replace media chrome with vidstack

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,
-  MediaController,
-  MediaFullscreenButton,
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaTimeRange,
-} from 'media-chrome/dist/react';
+  DefaultVideoLayout,
+  defaultLayoutIcons,
+} from '@vidstack/react/player/layouts/default';
 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
-            key={url}
-            className="aspect-video w-full overflow-hidden rounded-lg"
+          <MediaPlayer
+            src={url}
+            className="w-full overflow-hidden rounded-lg"
+            aspectRatio="16/9"
+            load="visible"
           >
-            <video slot="media" src={url} preload="metadata" muted />
-            <MediaControlBar>
-              <MediaPlayButton></MediaPlayButton>
-              <MediaTimeRange></MediaTimeRange>
-              <MediaMuteButton></MediaMuteButton>
-              <MediaFullscreenButton></MediaFullscreenButton>
-            </MediaControlBar>
-          </MediaController>
+            <MediaProvider />
+            <DefaultVideoLayout icons={defaultLayoutIcons} />
+          </MediaPlayer>
         );
       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,
-  MediaController,
-  MediaFullscreenButton,
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaTimeRange,
-} from 'media-chrome/dist/react';
+  DefaultVideoLayout,
+  defaultLayoutIcons,
+} from '@vidstack/react/player/layouts/default';
 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
-        key={url}
-        className="aspect-video w-full overflow-hidden rounded-lg"
+      <MediaPlayer
+        src={url}
+        className="w-full overflow-hidden rounded-lg"
+        aspectRatio="16/9"
+        load="visible"
       >
-        <video slot="media" src={url} preload="metadata" muted />
-        <MediaControlBar>
-          <MediaPlayButton></MediaPlayButton>
-          <MediaTimeRange></MediaTimeRange>
-          <MediaMuteButton></MediaMuteButton>
-          <MediaFullscreenButton></MediaFullscreenButton>
-        </MediaControlBar>
-      </MediaController>
+        <MediaProvider />
+        <DefaultVideoLayout icons={defaultLayoutIcons} />
+      </MediaPlayer>
     );
   }
 

src/shared/notes/preview/video.tsx

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