wip

src/shared/notes/preview/video.tsx

@@ -4,21 +4,29 @@ import {
   DefaultVideoLayout,
   defaultLayoutIcons,
 } from '@vidstack/react/player/layouts/default';
+import { memo } from 'react';
 
-export function VideoPreview({ urls }: { urls: string[] }) {
+export const VideoPreview = memo(function VideoPreview({ urls }: { urls: string[] }) {
   return (
-    <div className="relative mt-3 flex w-full flex-col gap-2">
+    <div className="flex flex-col gap-2">
       {urls.map((url) => (
         <MediaPlayer
           key={url}
           src={url}
-          load="visible"
+          poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
+          load="idle"
           aspectRatio="16/9"
           crossorigin=""
           muted={true}
           className="player"
         >
-          <MediaProvider />
+          <MediaProvider>
+            <Poster
+              className="vds-poster"
+              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
+              alt="poster"
+            />
+          </MediaProvider>
           <DefaultAudioLayout
             icons={defaultLayoutIcons}
             smallLayoutWhen="(width < 500) or (height < 380)"
@@ -33,4 +41,4 @@ export function VideoPreview({ urls }: { urls: string[] }) {
       ))}
     </div>
   );
-}
+});