From e5b5d1ec117a57cf3f58c11700e7e99c6a283de4 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@profullstack.com>
Date: Mon, 2 Nov 2026 17:13:39 +0000
Subject: [PATCH] feat: play reels and tenant media in the house player
 (@profullstack/player 0.17.0)

/videos, the dashboard Reels tab and tenant pages (videos, video and audio
assets) drew raw <video>/<audio> with native controls. They now use
@profullstack/player: one control bar with auto-hide, full screen
including iPhone, HLS/MPEG-TS/MP4 and the compact audio bar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/dashboard/[[...tab]]/page.tsx |  3 ++-
 app/globals.css                   |  5 +++++
 app/videos/page.tsx               |  3 ++-
 bun.lock                          | 11 +++++++++++
 components/Tenant.tsx             | 11 ++++++++---
 components/VideoPlayer.tsx        | 31 +++++++++++++++++++++++++++++++
 package.json                      |  1 +
 7 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 components/VideoPlayer.tsx

diff --git a/app/dashboard/[[...tab]]/page.tsx b/app/dashboard/[[...tab]]/page.tsx
index 001e1d0..251e45e 100644
--- a/app/dashboard/[[...tab]]/page.tsx
+++ b/app/dashboard/[[...tab]]/page.tsx
@@ -2,6 +2,7 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import { useParams } from "next/navigation";
 import { copyText } from "@/lib/clipboard";
+import VideoPlayer from "@/components/VideoPlayer";
 import { formatApiKeyTime } from "@/lib/api-key-time";
 import { formatStoredWebhookPayload } from "@/lib/webhook-payload";
 import {
@@ -723,7 +724,7 @@ function VideosPanel({ onError, onOk }: { onError: (m: string) => void; onOk: (m
             <div className="video-grid">
               {reels.map((m) => (
                 <figure key={m.id} className="video-cell">
-                  <video src={m.url} poster={m.thumb || undefined} controls preload="metadata" playsInline />
+                  <VideoPlayer className="video-stage" src={m.url} poster={m.thumb} />
                   <figcaption className="row" style={{ justifyContent: "space-between", alignItems: "center" }}>
                     <span>{m.title}</span>
                     <button className="btn2 ghost" disabled={busy} onClick={() => del(m.id)}>Delete</button>
diff --git a/app/globals.css b/app/globals.css
index d50c617..838bbc3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -375,6 +375,9 @@ h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; f
 .video-cell:hover { border-color: var(--acid); }
 .video-cell video { display: block; width: 100%; max-height: 60vh; background: #000; aspect-ratio: 16 / 9; object-fit: contain; }
 .video-cell.portrait video { aspect-ratio: 9 / 16; }
+/* House player (@profullstack/player) stage: same box the raw <video> had. */
+.video-cell .video-stage { width: 100%; height: auto; max-height: 60vh; aspect-ratio: 16 / 9; }
+.video-cell.portrait .video-stage { aspect-ratio: 9 / 16; }
 .video-cell figcaption { font-family: var(--mono); font-size: 11px; color: var(--ash); padding: 8px 10px; text-transform: uppercase; letter-spacing: .08em; word-break: break-word; }
 
 /* Tenant "Post it" share row */
@@ -416,6 +419,7 @@ dialog.qhelp::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(2px)
 /* Tenant uploaded-video gallery */
 .t-videos { display: grid; gap: 12px; max-width: 460px; margin: 22px auto 0; width: 100%; }
 .t-video { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #000; display: block; }
+.t-video.pux-player { height: auto; aspect-ratio: 16 / 9; }
 
 /* Highlighted code blocks (content blocks) + copy button */
 .code-wrap { position: relative; margin: 14px 0; }
@@ -469,6 +473,7 @@ dialog.qhelp::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(2px)
 /* mixed-media repo assets: video/audio tiles + dashboard chips */
 .t-asset-av { aspect-ratio: 1/1; width: 100%; padding: 0; background: #000; }
 .t-asset-av video, video.t-asset-av { width: 100%; height: 100%; object-fit: cover; }
+.t-asset-av > .pux-player, .t-asset-audio > .pux-player { width: 100%; height: 100%; }
 .t-asset-audio { grid-column: 1 / -1; aspect-ratio: auto; width: 100%; padding: 8px; }
 .t-asset-audio audio, audio.t-asset-audio { width: 100%; }
 .t-asset-chip { aspect-ratio: auto; padding: 8px 10px; font-family: var(--mono); font-size: 11px; color: var(--ash); text-align: center; word-break: break-word; }
diff --git a/app/videos/page.tsx b/app/videos/page.tsx
index 96c6049..4e86b86 100644
--- a/app/videos/page.tsx
+++ b/app/videos/page.tsx
@@ -3,6 +3,7 @@ import path from "node:path";
 import type { Metadata } from "next";
 import { listMedia } from "@/lib/db";
 import { hasThumb } from "@/lib/media";
+import VideoPlayer from "@/components/VideoPlayer";
 
 export const dynamic = "force-dynamic";
 
@@ -70,7 +71,7 @@ export default async function VideosPage() {
         <div className="video-grid">
           {reels.map((r) => (
             <figure key={r.src} className={`video-cell${r.portrait ? " portrait" : ""}`}>
-              <video src={r.src} poster={r.poster} controls preload="metadata" playsInline />
+              <VideoPlayer className="video-stage" src={r.src} poster={r.poster} />
               <figcaption>{r.title}</figcaption>
             </figure>
           ))}
diff --git a/bun.lock b/bun.lock
index 3903c78..820c3af 100644
--- a/bun.lock
+++ b/bun.lock
@@ -9,6 +9,7 @@
         "@profullstack/coinpay-onboard": "0.3.1",
         "@profullstack/footer": "latest",
         "@profullstack/libsql-pg": "^0.1.4",
+        "@profullstack/player": "0.17.0",
         "@profullstack/profile": "0.1.6",
         "@profullstack/redeem-credits": "0.2.0",
         "@profullstack/stack": "0.5.0",
@@ -150,6 +151,8 @@
 
     "@profullstack/libsql-pg": ["@profullstack/libsql-pg@0.1.4", "", { "dependencies": { "@profullstack/libsql-pg": "^0.1.1", "pg": "^8.13.0" }, "optionalDependencies": { "@libsql/client": "^0.15.0" }, "bin": { "libsql-pg": "bin/libsql-pg.js" } }, "sha512-FB+rGGmM9Ua5ZqcrZQvjhagjDDIXZRj9mTC2wLsluD4MTk7/XcjHbOsHb6uMh5gEzhmH2yZz/yGpKCsMyVLujw=="],
 
+    "@profullstack/player": ["@profullstack/player@0.17.0", "", { "dependencies": { "hls.js": "^1.7.1", "mpegts.js": "^1.8.2" }, "peerDependencies": { "react": ">=18" }, "optionalPeers": ["react"] }, "sha512-rd1aQzXqBwMMp6aIuyJ7K3O3+k7W83J1AXl7TG9PZmAVeK85lxEsuE1DwUnUbaa6zwBhJ9Xfcb0YxHVqtncYGg=="],
+
     "@profullstack/profile": ["@profullstack/profile@0.1.6", "", { "peerDependencies": { "@libsql/client": ">=0.6.0", "postgres": "^3.4.0", "react": ">=18" }, "optionalPeers": ["@libsql/client", "postgres", "react"], "bin": { "profile": "src/cli.js" } }, "sha512-xkn0P3ANz151QJdlBwcBXkHk813qW9qAmuTZKcuvpEZYkyHDC9J9KfvpVSRepfjECzz4ONGHWO5Zwc4BHpfK8g=="],
 
     "@profullstack/redeem-credits": ["@profullstack/redeem-credits@0.2.0", "", { "bin": { "redeem-credits": "dist/cli.js" } }, "sha512-JLowb7mWYfouIK7O522tuPPhvLjQjhdEfm6g3xEYrlNLGzLhrIADDhrYldBlGHfiVBWUFX7wefLuCSLF9fnyog=="],
@@ -266,10 +269,14 @@
 
     "es-object-atoms": ["es-object-atoms@1.1.2", "", { "dependencies": { "es-errors": "^1.3.0" } }, "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw=="],
 
+    "es6-promise": ["es6-promise@4.2.8", "", {}, "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="],
+
     "escape-html": ["escape-html@1.0.3", "", {}, "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="],
 
     "etag": ["etag@1.8.1", "", {}, "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="],
 
+    "events": ["events@3.3.0", "", {}, "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="],
+
     "eventsource": ["eventsource@3.0.7", "", { "dependencies": { "eventsource-parser": "^3.0.1" } }, "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA=="],
 
     "eventsource-parser": ["eventsource-parser@3.1.1", "", {}, "sha512-EKN1vKAMcZ8MlYMpaNuxN6R9yakzH6uajHcHVTqWJzvu5pWw9DyhbP35HH8MVBQ+dZjAfDxk+A8NiR9KWaXiyQ=="],
@@ -304,6 +311,8 @@
 
     "hasown": ["hasown@2.0.4", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A=="],
 
+    "hls.js": ["hls.js@1.7.4", "", {}, "sha512-3GlxGdPvT2YHvQYOt+yOzT/DEior/qJVNIylHA77kgeoBTdQQqi70GwefNEUmHQeNGyjC8U62+bruqW/Tpm+tg=="],
+
     "hono": ["hono@4.13.14", "", {}, "sha512-yhRLQ21U6qa9Hsu2N7Qcbh8tE+WKEcoErjIo56LeSGiGXGp9sA7UpE86Ui9uexb61KakiGwuHMn2QdV7w6i6kQ=="],
 
     "http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="],
@@ -342,6 +351,8 @@
 
     "mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
 
+    "mpegts.js": ["mpegts.js@1.8.2", "", { "dependencies": { "es6-promise": "^4.2.8", "events": "^3.3.0" } }, "sha512-cZYMa5muASH55wrS6JK5IGkUqnCA96c0f+WdnW91jIK9s/N6NzjmTQDJNYg9A5u/G2Q5nj2b3w1Zwzze/9guxA=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "nanoid": ["nanoid@3.3.20", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ=="],
diff --git a/components/Tenant.tsx b/components/Tenant.tsx
index 368d2da..f870459 100644
--- a/components/Tenant.tsx
+++ b/components/Tenant.tsx
@@ -6,6 +6,7 @@ import SharePost from "./SharePost";
 import LinkIcon, { kindFromUrl } from "./LinkIcon";
 import CrawlProofAd from "./CrawlProofAd";
 import CodeCopy from "./CodeCopy";
+import VideoPlayer from "./VideoPlayer";
 import { renderMarkdown } from "@/lib/markdown";
 
 /**
@@ -113,7 +114,7 @@ export default function Tenant({ cfg }: { cfg: TenantConfig }) {
         {cfg.videos.length > 0 && (
           <div id="videos" className="t-videos" aria-label="Videos">
             {cfg.videos.map((v, i) => (
-              <video key={i} className="t-video" controls preload="metadata" playsInline src={v.url} poster={v.poster || undefined} />
+              <VideoPlayer key={i} className="t-video" src={v.url} poster={v.poster} />
             ))}
           </div>
         )}
@@ -122,9 +123,13 @@ export default function Tenant({ cfg }: { cfg: TenantConfig }) {
           <div className="t-assets" aria-label="Assets">
             {cfg.assets.map((a, i) =>
               a.kind === "video" ? (
-                <video key={i} className="t-asset t-asset-av" controls preload="metadata" playsInline src={a.url} title={a.label} />
+                <div key={i} className="t-asset t-asset-av" title={a.label}>
+                  <VideoPlayer src={a.url} />
+                </div>
               ) : a.kind === "audio" ? (
-                <audio key={i} className="t-asset t-asset-audio" controls preload="none" src={a.url} title={a.label} />
+                <div key={i} className="t-asset t-asset-audio" title={a.label}>
+                  <VideoPlayer src={a.url} audio />
+                </div>
               ) : (
                 <a key={i} className="t-asset" href={a.url} target="_blank" rel="noopener noreferrer" title={a.label}>
                   <img src={a.url} alt={a.label} loading="lazy" />
diff --git a/components/VideoPlayer.tsx b/components/VideoPlayer.tsx
new file mode 100644
index 0000000..d3d0fc2
--- /dev/null
+++ b/components/VideoPlayer.tsx
@@ -0,0 +1,31 @@
+"use client";
+import { Player } from "@profullstack/player/react";
+import "@profullstack/player/player.css";
+
+/**
+ * The house player (@profullstack/player): one control bar that hides itself,
+ * full screen on every device including iPhone, MP4/HLS/MPEG-TS/audio sniffed
+ * from the URL. Server components render this instead of a raw <video>/<audio>.
+ */
+export default function VideoPlayer({
+  src,
+  poster,
+  audio,
+  className,
+}: {
+  src: string;
+  poster?: string | null;
+  audio?: boolean;
+  className?: string;
+}) {
+  return (
+    <Player
+      src={src}
+      poster={poster || undefined}
+      audio={audio}
+      className={className}
+      shareable={false}
+      useTimeParam={false}
+    />
+  );
+}
diff --git a/package.json b/package.json
index 62263e1..3d997c8 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@profullstack/coinpay-onboard": "0.3.1",
     "@profullstack/footer": "latest",
     "@profullstack/libsql-pg": "^0.1.4",
+    "@profullstack/player": "0.17.0",
     "@profullstack/profile": "0.1.6",
     "@profullstack/redeem-credits": "0.2.0",
     "@profullstack/stack": "0.5.0",