replace media chrome with vidstack

package.json

@@ -60,13 +60,13 @@
     "@tiptap/react": "^2.1.13",
     "@tiptap/starter-kit": "^2.1.13",
     "@tiptap/suggestion": "^2.1.13",
+    "@vidstack/react": "^1.8.3",
     "dayjs": "^1.11.10",
     "framer-motion": "^10.16.12",
     "html-to-text": "^9.0.5",
     "light-bolt11-decoder": "^3.0.0",
     "lru-cache": "^10.1.0",
     "markdown-to-jsx": "^7.3.2",
-    "media-chrome": "^1.5.4",
     "minidenticons": "^4.2.0",
     "nanoid": "^5.0.4",
     "nostr-fetch": "^0.13.1",

pnpm-lock.yaml

@@ -131,6 +131,9 @@ dependencies:
   '@tiptap/suggestion':
     specifier: ^2.1.13
     version: 2.1.13(@tiptap/core@2.1.13)(@tiptap/pm@2.1.13)
+  '@vidstack/react':
+    specifier: ^1.8.3
+    version: 1.8.3(@types/react@18.2.41)(react@18.2.0)
   dayjs:
     specifier: ^1.11.10
     version: 1.11.10
@@ -149,9 +152,6 @@ dependencies:
   markdown-to-jsx:
     specifier: ^7.3.2
     version: 7.3.2(react@18.2.0)
-  media-chrome:
-    specifier: ^1.5.4
-    version: 1.5.4
   minidenticons:
     specifier: ^4.2.0
     version: 4.2.0
@@ -2979,6 +2979,18 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
+  /@vidstack/react@1.8.3(@types/react@18.2.41)(react@18.2.0):
+    resolution: {integrity: sha512-QCyHy6e3LpzfajtjrhJPXzGYbBrBCUE5qYAatKXX+nxWqRvspa0fJPlnGeWb+tg6DlDsgwDLFjGNWj8qUeUVXQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': ^18.0.0
+      react: ^18.0.0
+    dependencies:
+      '@types/react': 18.2.41
+      media-captions: 1.0.2
+      react: 18.2.0
+    dev: false
+
   /@vitejs/plugin-react-swc@3.5.0(vite@4.5.0):
     resolution: {integrity: sha512-1PrOvAaDpqlCV+Up8RkAh9qaiUjoDUcjtttyhXDKw53XA6Ve16SOp6cCOpRs8Dj8DqUQs6eTW5YkLcLJjrXAig==}
     peerDependencies:
@@ -4780,8 +4792,9 @@ packages:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
     dev: false
 
-  /media-chrome@1.5.4:
+  /media-captions@1.0.2:
-    resolution: {integrity: sha512-BKWxw21Y6WZX4WX5WfwtmyMlnCKf4IrVbG7n5dWbQQew1ZFtKEUjR0xYqKDqOi1fkZkP3T2j2+MCRNuRB5YT+A==}
+    resolution: {integrity: sha512-QxAFc+XTGZeMx+ZvLtMxEDgAjd0kr1LJ2NekLr1cw/UKENOxK7B9g6HwtuTQzCXxmb4Dknd4T8M7FOqqCK9buA==}
+    engines: {node: '>=16'}
     dev: false
 
   /merge-stream@2.0.0:

src/app.css

@@ -1,5 +1,9 @@
 /* @import 'reactflow/dist/style.css'; */
 
+/* Vidstack */
+@import '@vidstack/react/player/styles/default/theme.css';
+@import '@vidstack/react/player/styles/default/layouts/video.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/shared/notes/file.tsx

@@ -1,14 +1,11 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { downloadDir } from '@tauri-apps/api/path';
 import { download } from '@tauri-apps/plugin-upload';
+import { MediaPlayer, MediaProvider } from '@vidstack/react';
 import {
-  MediaControlBar,
+  DefaultVideoLayout,
-  MediaController,
+  defaultLayoutIcons,
-  MediaFullscreenButton,
+} from '@vidstack/react/player/layouts/default';
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaTimeRange,
-} from 'media-chrome/dist/react';
 import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -32,7 +29,7 @@ export function FileNote({ event }: { event: NDKEvent }) {
     switch (type) {
       case 'image':
         return (
-          <div key={url} className="group relative">
+          <div className="group relative">
             <img
               src={url}
               alt={url}
@@ -52,18 +49,15 @@ export function FileNote({ event }: { event: NDKEvent }) {
         );
       case 'video':
         return (
-          <MediaController
+          <MediaPlayer
-            key={url}
+            src={url}
-            className="aspect-video w-full overflow-hidden rounded-lg"
+            className="w-full overflow-hidden rounded-lg"
+            aspectRatio="16/9"
+            load="visible"
           >
-            <video slot="media" src={url} preload="metadata" muted />
+            <MediaProvider />
-            <MediaControlBar>
+            <DefaultVideoLayout icons={defaultLayoutIcons} />
-              <MediaPlayButton></MediaPlayButton>
+          </MediaPlayer>
-              <MediaTimeRange></MediaTimeRange>
-              <MediaMuteButton></MediaMuteButton>
-              <MediaFullscreenButton></MediaFullscreenButton>
-            </MediaControlBar>
-          </MediaController>
         );
       default:
         return (

src/shared/notes/kinds/file.tsx

@@ -1,14 +1,11 @@
 import { NDKTag } from '@nostr-dev-kit/ndk';
 import { downloadDir } from '@tauri-apps/api/path';
 import { download } from '@tauri-apps/plugin-upload';
+import { MediaPlayer, MediaProvider } from '@vidstack/react';
 import {
-  MediaControlBar,
+  DefaultVideoLayout,
-  MediaController,
+  defaultLayoutIcons,
-  MediaFullscreenButton,
+} from '@vidstack/react/player/layouts/default';
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaTimeRange,
-} from 'media-chrome/dist/react';
 import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -50,18 +47,15 @@ export function FileKind({ tags }: { tags: NDKTag[] }) {
 
   if (type === 'video') {
     return (
-      <MediaController
+      <MediaPlayer
-        key={url}
+        src={url}
-        className="aspect-video w-full overflow-hidden rounded-lg"
+        className="w-full overflow-hidden rounded-lg"
+        aspectRatio="16/9"
+        load="visible"
       >
-        <video slot="media" src={url} preload="metadata" muted />
+        <MediaProvider />
-        <MediaControlBar>
+        <DefaultVideoLayout icons={defaultLayoutIcons} />
-          <MediaPlayButton></MediaPlayButton>
+      </MediaPlayer>
-          <MediaTimeRange></MediaTimeRange>
-          <MediaMuteButton></MediaMuteButton>
-          <MediaFullscreenButton></MediaFullscreenButton>
-        </MediaControlBar>
-      </MediaController>
     );
   }
 

src/shared/notes/preview/video.tsx

@@ -1,27 +1,19 @@
+import { MediaPlayer, MediaProvider } from '@vidstack/react';
 import {
-  MediaControlBar,
+  DefaultVideoLayout,
-  MediaController,
+  defaultLayoutIcons,
-  MediaFullscreenButton,
+} from '@vidstack/react/player/layouts/default';
-  MediaLoadingIndicator,
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaTimeRange,
-} from 'media-chrome/dist/react';
 
 export function VideoPreview({ url }: { url: string }) {
   return (
-    <MediaController
+    <MediaPlayer
-      key={url}
+      src={url}
-      className="my-2 aspect-video w-full overflow-hidden rounded-lg"
+      className="my-2 w-full overflow-hidden rounded-lg"
+      aspectRatio="16/9"
+      load="visible"
     >
-      <video slot="media" src={url} preload="metadata" muted />
+      <MediaProvider />
-      <MediaLoadingIndicator slot="centered-chrome"></MediaLoadingIndicator>
+      <DefaultVideoLayout icons={defaultLayoutIcons} />
-      <MediaControlBar>
+    </MediaPlayer>
-        <MediaPlayButton></MediaPlayButton>
-        <MediaTimeRange></MediaTimeRange>
-        <MediaMuteButton></MediaMuteButton>
-        <MediaFullscreenButton></MediaFullscreenButton>
-      </MediaControlBar>
-    </MediaController>
   );
 }