From 281fa7a5244b966d08566493e61cd2b753901504 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Sat, 19 Aug 2023 02:55:18 +0900
Subject: [PATCH] feat: add youtube thumbnail

---
 next.config.js                                   | 16 ++++++++++------
 src/components/Episode/Header/Episode.Player.tsx | 12 ++++++++++++
 .../GlobalAudioPlayer/GlobalAudioPlayer.tsx      | 15 +++++++++------
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/next.config.js b/next.config.js
index abda681..ffcdf44 100644
--- a/next.config.js
+++ b/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
diff --git a/src/components/Episode/Header/Episode.Player.tsx b/src/components/Episode/Header/Episode.Player.tsx
index df92744..06b4b02 100644
--- a/src/components/Episode/Header/Episode.Player.tsx
+++ b/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,
+      }))
     }
   }, [])
 
diff --git a/src/components/GlobalAudioPlayer/GlobalAudioPlayer.tsx b/src/components/GlobalAudioPlayer/GlobalAudioPlayer.tsx
index 0790dec..0eaa42a 100644
--- a/src/components/GlobalAudioPlayer/GlobalAudioPlayer.tsx
+++ b/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>