update channel

src/shared/preview/image.tsx

@@ -0,0 +1,14 @@
+export default function 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"
+        decoding="async"
+        style={{ contentVisibility: 'auto' }}
+      />
+    </div>
+  );
+}

src/shared/preview/video.tsx

@@ -0,0 +1,11 @@
+import { MediaOutlet, MediaPlayer } from '@vidstack/react';
+
+export default function VideoPreview({ url }: { url: string }) {
+  return (
+    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
+      <MediaPlayer src={url} poster="" controls>
+        <MediaOutlet />
+      </MediaPlayer>
+    </div>
+  );
+}

src/shared/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 default function 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>
+  );
+}