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 }) {
) : it.kind === 'video' ? (
-
+
) : it.kind === 'audio' ? (
-
+
) : (
📎
@@ -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 (
-
-
-
- );
+ return ;
}