feat: add youtube thumbnail

next.config.js

@@ -1,11 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    reactStrictMode: true,
-    images: {
-        domains: ['images.cdn.unbody.io', 'image.simplecastcdn.com'],
-        // loader: 'imgix',
-        // path: 'https://images.cdn.unbody.io',
-    }
+  reactStrictMode: true,
+  images: {
+    domains: [
+      'images.cdn.unbody.io',
+      'image.simplecastcdn.com',
+      'img.youtube.com',
+    ],
+    // loader: 'imgix',
+    // path: 'https://images.cdn.unbody.io',
+  },
 }
 
 module.exports = nextConfig

src/components/Episode/Header/Episode.Player.tsx

@@ -16,6 +16,11 @@ const EpisodePlayer = ({ url }: EpisodePlayerProps) => {
   const state = useHookstate(playerState)
   const epState = useHookstate(episodeState)
 
+  const isYoutubeRegex =
+    /(?:\/(?:embed|v|e)\/|\/watch\?v=|\/v\/|https?:\/\/(?:www\.)?youtu\.be\/)([^?&]+)/
+
+  const youtubeLink = url.match(isYoutubeRegex) ?? []
+
   const playerContainerRef = useRef<HTMLDivElement>(null)
   const playerRef = useRef<ReactPlayer>(null)
 
@@ -72,6 +77,13 @@ const EpisodePlayer = ({ url }: EpisodePlayerProps) => {
         ...prev,
         url,
       }))
+
+      const thumbnail = `https://img.youtube.com/vi/${youtubeLink[1]}/0.jpg`
+
+      epState.set((prev) => ({
+        ...prev,
+        thumbnail: thumbnail,
+      }))
     }
   }, [])
 

src/components/GlobalAudioPlayer/GlobalAudioPlayer.tsx

@@ -183,12 +183,15 @@ export default function GlobalAudioPlayer() {
         onProgress={handleProgress}
       />
       <RightMenu>
-        <Image
-          src={epState.value.thumbnail}
-          alt={epState.value.thumbnail}
-          width={48}
-          height={48}
-        />
+        {!!epState.value.thumbnail && (
+          <Image
+            src={epState.value.thumbnail}
+            alt={epState.value.thumbnail}
+            width={48}
+            height={48}
+          />
+        )}
+
         <EpisodeData>
           <Typography variant="body2">{epState.value.title}</Typography>
           <Typography variant="body3">{epState.value.podcast}</Typography>