wip

src/shared/notes/kinds/file.tsx

@@ -1,5 +1,5 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import ReactPlayer from 'react-player';
+import { MediaPlayer, MediaProvider } from '@vidstack/react';
 import { Link } from 'react-router-dom';
 
 import { Image } from '@shared/image';
@@ -25,15 +25,16 @@ export function FileNote(props: { event?: NDKEvent }) {
   if (type === 'video') {
     return (
       <div className="mb-2 mt-3">
-        <ReactPlayer
+        <MediaPlayer
           key={url}
-          url={url}
-          width="100%"
-          height="auto"
-          className="!h-auto overflow-hidden rounded-lg object-fill"
-          controls={true}
-          pip={true}
-        />
+          src={url}
+          poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
+          load="visible"
+          aspectRatio="16/9"
+          crossorigin=""
+        >
+          <MediaProvider />
+        </MediaPlayer>
       </div>
     );
   }

src/shared/notes/preview/image.tsx

@@ -2,7 +2,6 @@ import { downloadDir } from '@tauri-apps/api/path';
 import { download } from 'tauri-plugin-upload-api';
 
 import { DownloadIcon } from '@shared/icons';
-import { Image } from '@shared/image';
 
 export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: boolean }) {
   const downloadImage = async (url: string) => {
@@ -16,12 +15,15 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
       <div className="flex flex-col gap-2">
         {urls.map((url) => (
           <div key={url} className="group relative min-w-0 shrink-0 grow-0 basis-full">
-            <Image
+            <img
               src={url}
               alt={url}
               className={`${
                 truncate ? 'h-auto max-h-[300px]' : 'h-auto'
               } w-full rounded-lg border border-white/10 object-cover`}
+              loading="lazy"
+              decoding="async"
+              style={{ contentVisibility: 'auto' }}
             />
             <button
               type="button"

src/shared/notes/preview/video.tsx

@@ -1,28 +1,19 @@
-import ReactPlayer from 'react-player/es6';
+import { MediaPlayer, MediaProvider } from '@vidstack/react';
 
 export function VideoPreview({ urls }: { urls: string[] }) {
   return (
     <div className="relative mt-3 flex w-full flex-col gap-2">
       {urls.map((url) => (
-        <ReactPlayer
+        <MediaPlayer
           key={url}
-          url={url}
-          width="100%"
-          height="auto"
-          className="!h-auto overflow-hidden rounded-lg object-fill"
-          controls={true}
-          pip={true}
-          light={
-            <img
-              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
-              alt={url}
-              className="aspect-video h-full w-full bg-white object-cover"
-              loading="lazy"
-              decoding="async"
-              style={{ contentVisibility: 'auto' }}
-            />
-          }
-        />
+          src={url}
+          poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
+          load="visible"
+          aspectRatio="16/9"
+          crossorigin=""
+        >
+          <MediaProvider />
+        </MediaPlayer>
       ))}
     </div>
   );