From c7c91b953063b002602a04193959d36f147ef1bb Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 23 Aug 2023 16:02:38 +0900
Subject: [PATCH] feat: implement youtube volume sync

---
 .env                                          |  4 ----
 .../Episode/Header/Episode.Player.tsx         | 20 +++++++++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)
 delete mode 100644 .env

diff --git a/.env b/.env
deleted file mode 100644
index 512521c..0000000
--- a/.env
+++ /dev/null
@@ -1,4 +0,0 @@
-UNBODY_API_KEY=04A427B28187C872D7ADB2E724E2474E
-UNBODY_LPE_PROJECT_ID=0d770f21-dca1-441f-9e32-5cf5058aed9d
-SIMPLECAST_ACCESS_TOKEN=eyJhcGlfa2V5IjoiOWR0Yzh0b2lBYkM3ZEdkOW5Nalo4LzJxNW54UUFEbHZvUlVaNjhGdzltMD0ifQ==
-NEXT_PUBLIC_SITE_URL=https://press.logos.co
\ No newline at end of file
diff --git a/src/components/Episode/Header/Episode.Player.tsx b/src/components/Episode/Header/Episode.Player.tsx
index 6f829be..e451de3 100644
--- a/src/components/Episode/Header/Episode.Player.tsx
+++ b/src/components/Episode/Header/Episode.Player.tsx
@@ -112,6 +112,21 @@ const EpisodePlayer = ({
     }
   }, [state.value.isEnabled])
 
+  useEffect(() => {
+    if (channel?.name === LPE.Podcast.ChannelNames.Youtube) {
+      window.addEventListener('message', function (event) {
+        if (event.origin == 'https://www.youtube.com') {
+          const data = JSON.parse(event.data)
+          const volume = data.info.volume
+
+          if (typeof volume !== 'undefined') {
+            state.set((prev) => ({ ...prev, volume: volume / 100 }))
+          }
+        }
+      })
+    }
+  }, [])
+
   const handleProgress = (newState: {
     playedSeconds: number
     played: number
@@ -174,6 +189,11 @@ const EpisodePlayer = ({
           onPlay={handlePlay}
           onPause={handlePause}
           onDuration={handleDuration}
+          config={{
+            youtube: {
+              playerVars: { enablejsapi: 1 },
+            },
+          }}
         />
       </PlayerContainer>
     </>