From b9e7f379f1e15f343dc915a789c2ecde12e536a5 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@profullstack.com>
Date: Mon, 2 Nov 2026 17:19:01 +0000
Subject: [PATCH] feat(chat): play video and audio attachments in the house
 player (@profullstack/player 0.17.0)

Decrypted video/audio attachments drew raw <video>/<audio> with native
controls. EnhancedVideoPlayer now wraps @profullstack/player (one control
bar with auto-hide, full screen including iPhone, compact audio bar) and
MessageAttachments renders it. Attachments are blob: URLs with no file
extension, so the MIME type is passed and the kind set explicitly.
WebRTC call video is untouched.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bun.lock                                      |  9 +++++
 package.json                                  |  1 +
 .../components/chat/MessageAttachments.jsx    |  7 ++--
 .../components/media/EnhancedVideoPlayer.jsx  | 39 ++++++++++++-------
 4 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/bun.lock b/bun.lock
index 9e6d1a94..9fdafae4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,6 +13,7 @@
         "@profullstack/footer": "latest",
         "@profullstack/openprofile": "^0.2.0",
         "@profullstack/pairux-embed": "^0.1.0",
+        "@profullstack/player": "0.17.0",
         "@profullstack/stack": "^0.5.0",
         "@profullstack/text-type-detection": "^1.0.0",
         "@profullstack/x402-gateway": "^0.16.1",
@@ -391,6 +392,8 @@
 
     "@profullstack/pairux-embed": ["@profullstack/pairux-embed@0.1.0", "", { "dependencies": { "livekit-client": "^2.17.0" } }, "sha512-dGRx0kW6Y0awBOy9nbWrqAEcZNJEHrBOfxG/RikmNHuGyE+BaP0Qn1ZFis8dDWyQdEJ6VsTIH6xJbu+Gx5ITqg=="],
 
+    "@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/referrals": ["@profullstack/referrals@0.1.0", "", { "peerDependencies": { "react": ">=18" }, "optionalPeers": ["react"] }, "sha512-u66SdBVpsv3kc0N+NWISPoYD5vjCERyv5wfD07iSkZwQeC2IA+ihX5jNA4e7Xr+Y4AUvxLycG+3b4VaROqzgRg=="],
 
     "@profullstack/stack": ["@profullstack/stack@0.5.0", "", { "dependencies": { "@profullstack/emailer": "^1.0.1", "@profullstack/form-guard": "^0.1.1", "@profullstack/referrals": "^0.1.0" }, "peerDependencies": { "@supabase/ssr": ">=0.5.0", "next": ">=13.0.0", "react": ">=18.0.0" }, "optionalPeers": ["@supabase/ssr", "next", "react"] }, "sha512-LbXovIhyzLEq+a+y3q8KWC+jN1tJjvSoUiFEhpiEBisQn5U+iutIGHDgg16Lul74kQaFZeFlbp7CMPAVJ8KL6g=="],
@@ -773,6 +776,8 @@
 
     "es-to-primitive": ["es-to-primitive@1.3.0", "", { "dependencies": { "is-callable": "1.2.7", "is-date-object": "1.1.0", "is-symbol": "1.1.1" } }, "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g=="],
 
+    "es6-promise": ["es6-promise@4.2.8", "", {}, "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="],
+
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
     "escape-html": ["escape-html@1.0.3", "", {}, "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="],
@@ -931,6 +936,8 @@
 
     "hermes-parser": ["hermes-parser@0.25.1", "", { "dependencies": { "hermes-estree": "0.25.1" } }, "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA=="],
 
+    "hls.js": ["hls.js@1.7.4", "", {}, "sha512-3GlxGdPvT2YHvQYOt+yOzT/DEior/qJVNIylHA77kgeoBTdQQqi70GwefNEUmHQeNGyjC8U62+bruqW/Tpm+tg=="],
+
     "hono": ["hono@4.13.14", "", {}, "sha512-yhRLQ21U6qa9Hsu2N7Qcbh8tE+WKEcoErjIo56LeSGiGXGp9sA7UpE86Ui9uexb61KakiGwuHMn2QdV7w6i6kQ=="],
 
     "hookified": ["hookified@1.15.1", "", {}, "sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg=="],
@@ -1145,6 +1152,8 @@
 
     "mocha": ["mocha@12.0.3", "", { "dependencies": { "browser-stdout": "^1.3.1", "chokidar": "^5.0.0", "debug": "^4.3.5", "diff": "^9.0.0", "find-up-simple": "^1.0.1", "glob": "^13.0.0", "is-path-inside": "^4.0.0", "is-unicode-supported": "^0.1.0", "js-yaml": "^5.0.0", "minimatch": "^10.2.2", "ms": "^2.1.3", "picocolors": "^1.1.1", "serialize-javascript": "^7.1.1", "strip-json-comments": "^5.0.3", "supports-color": "^8.1.1", "workerpool": "^10.0.0" }, "bin": { "mocha": "bin/mocha.js" } }, "sha512-beammieDdiWdkjANWeWPpkxUROYGi5FN88fPOkLiticz7HTg3Y+Pho3EYE6SUdcuWnZ3h2WD8EXCA55JF4o6wg=="],
 
+    "mpegts.js": ["mpegts.js@1.8.2", "", { "dependencies": { "es6-promise": "^4.2.8", "events": "^3.3.0" } }, "sha512-cZYMa5muASH55wrS6JK5IGkUqnCA96c0f+WdnW91jIK9s/N6NzjmTQDJNYg9A5u/G2Q5nj2b3w1Zwzze/9guxA=="],
+
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
diff --git a/package.json b/package.json
index 41779e62..7cacc297 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "@profullstack/footer": "latest",
     "@profullstack/openprofile": "^0.2.0",
     "@profullstack/pairux-embed": "^0.1.0",
+    "@profullstack/player": "0.17.0",
     "@profullstack/stack": "^0.5.0",
     "@profullstack/text-type-detection": "^1.0.0",
     "@profullstack/x402-gateway": "^0.16.1",
diff --git a/src/lib/components/chat/MessageAttachments.jsx b/src/lib/components/chat/MessageAttachments.jsx
index cb2b0542..2ab4ff1e 100644
--- a/src/lib/components/chat/MessageAttachments.jsx
+++ b/src/lib/components/chat/MessageAttachments.jsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { decryptFileContent } from '@/lib/utils/file-decryption.js';
+import EnhancedVideoPlayer from '@/lib/components/media/EnhancedVideoPlayer.jsx';
 
 function base64ToBlobUrl(base64, mimeType) {
   const bin = atob(base64);
@@ -105,9 +106,9 @@ export default function MessageAttachments({ messageId }) {
               <img className="att-image" src={it.url} alt={it.filename} />
             </a>
           ) : it.kind === 'video' ? (
-            <video className="att-video" src={it.url} controls preload="metadata" />
+            <EnhancedVideoPlayer className="att-video" src={it.url} type={it.mimeType || 'video/mp4'} />
           ) : it.kind === 'audio' ? (
-            <audio className="att-audio" src={it.url} controls preload="metadata" />
+            <EnhancedVideoPlayer className="att-audio" src={it.url} type={it.mimeType || 'audio/mpeg'} audio />
           ) : (
             <a className="att-file" href={it.url} download={it.filename}>
               <span className="att-file-icon">📎</span>
@@ -124,7 +125,7 @@ export default function MessageAttachments({ messageId }) {
         .att-error { color: var(--color-error); }
         .att-spinner { width: 13px; height: 13px; border: 2px solid rgba(127,127,127,.3); border-top-color: var(--color-brand-primary); border-radius: 50%; animation: spin .8s linear infinite; }
         .att-image { max-width: 260px; max-height: 320px; border-radius: .5rem; display: block; cursor: pointer; }
-        .att-video { max-width: 280px; max-height: 320px; border-radius: .5rem; display: block; background: #000; }
+        .att-video { width: 280px; max-width: 100%; aspect-ratio: 16 / 9; max-height: 320px; border-radius: .5rem; display: block; background: #000; }
         .att-audio { width: 240px; }
         .att-file { display: flex; align-items: center; gap: .4rem; padding: .5rem .625rem; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); border-radius: .5rem; text-decoration: none; color: var(--color-text-primary); max-width: 260px; }
         .att-file:hover { background: var(--color-bg-secondary); }
diff --git a/src/lib/components/media/EnhancedVideoPlayer.jsx b/src/lib/components/media/EnhancedVideoPlayer.jsx
index d2c20e9c..bb56d36f 100644
--- a/src/lib/components/media/EnhancedVideoPlayer.jsx
+++ b/src/lib/components/media/EnhancedVideoPlayer.jsx
@@ -1,22 +1,33 @@
 'use client';
 
 import { useRef, useEffect } from 'react';
+import { createPlayer } from '@profullstack/player';
+import '@profullstack/player/player.css';
 
-export default function EnhancedVideoPlayer({ src, type = 'video/mp4', controls = true, autoPlay = false }) {
-  const videoRef = useRef(null);
+/**
+ * Plays a video or audio attachment in the house player (@profullstack/player):
+ * one control bar with auto-hide, full screen including iPhone.
+ *
+ * Attachments are decrypted into blob: URLs, which carry no file extension, so
+ * the caller passes the MIME type and the player is told the kind outright
+ * instead of sniffing the URL.
+ */
+export default function EnhancedVideoPlayer({ src, type = 'video/mp4', audio = false, autoPlay = false, className = '' }) {
+  const rootRef = useRef(null);
 
   useEffect(() => {
-    if (videoRef.current && src) {
-      videoRef.current.load();
-    }
-  }, [src]);
+    const root = rootRef.current;
+    if (!root || !src) return undefined;
+    const isAudio = audio || (type || '').toLowerCase().startsWith('audio/');
+    const handle = createPlayer(root, {
+      src,
+      kind: isAudio ? 'audio' : 'mp4',
+      audio: isAudio,
+      ...(type ? { mimeType: type } : {}),
+      autoplay: autoPlay,
+    });
+    return () => handle.destroy();
+  }, [src, type, audio, autoPlay]);
 
-  return (
-    <div className="video-player">
-      <video ref={videoRef} controls={controls} autoPlay={autoPlay} style={{ width: '100%', borderRadius: '.5rem' }}>
-        <source src={src} type={type} />
-        Your browser does not support the video tag.
-      </video>
-    </div>
-  );
+  return <div ref={rootRef} className={`video-player ${className}`.trim()} />;
 }