update preview components

src/components/note/preview/image.tsx

@@ -1,9 +1,7 @@
-import { memo } from 'react';
-
-export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
+export const ImagePreview = ({ url, size }: { url: string; size: string }) => {
   return (
     <div className={`relative h-full ${size === 'large' ? 'w-4/5' : 'w-1/2'} mt-2 rounded-lg border border-zinc-800`}>
-      <img src={url} alt={url} className="h-auto w-full rounded-lg object-cover" loading="lazy" fetchpriority="high" />
+      <img src={url} alt={url} className="h-auto w-full rounded-lg object-cover" loading="lazy" />
     </div>
   );
-});
+};

src/components/note/preview/video.tsx

@@ -1,17 +1,11 @@
-import { memo } from 'react';
-import ReactPlayer from 'react-player';
+import { MediaOutlet, MediaPlayer } from '@vidstack/react';
 
-export const VideoPreview = memo(function VideoPreview({ url }: { url: string }) {
+export const VideoPreview = ({ url }: { url: string }) => {
   return (
     <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
-      <ReactPlayer
-        url={url}
-        controls={true}
-        volume={0}
-        className="aspect-video w-full xl:w-2/3"
-        width="100%"
-        height="100%"
-      />
+      <MediaPlayer src={url} poster="" controls>
+        <MediaOutlet />
+      </MediaPlayer>
     </div>
   );
-});
+};

src/components/note/preview/youtube.tsx

@@ -0,0 +1,16 @@
+import YouTube from 'react-youtube';
+
+function getVideoId(url: string) {
+  const regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/gm;
+  return regex.exec(url)[3];
+}
+
+export const YoutubePreview = ({ url }: { url: string }) => {
+  const id = getVideoId(url);
+
+  return (
+    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
+      <YouTube videoId={id} className="aspect-video xl:w-2/3" opts={{ width: '100%', height: '100%' }} />
+    </div>
+  );
+};