feat: implement youtube volume sync

.env

@@ -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

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>
     </>