Merge pull request #21 from OMGDuke/20/game-volume-fix

Fix specific game volume not loading

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdh-gamethememusic",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Play theme songs on your game pages",
   "scripts": {
     "build": "shx rm -rf dist && rollup -c",

src/components/themePlayer/index.tsx

@@ -1,8 +1,9 @@
 import { ServerAPI, useParams } from 'decky-frontend-lib'
-import React, { ReactElement, useEffect, useRef } from 'react'
+import React, { ReactElement, useEffect, useRef, useState } from 'react'
 
 import useThemeMusic from '../../hooks/useThemeMusic'
 import { useSettings } from '../../context/settingsContext'
+import { getCache } from '../../cache/musicCache'
 
 export default function ThemePlayer({
   serverAPI
@@ -13,20 +14,32 @@ export default function ThemePlayer({
   const { appid } = useParams<{ appid: string }>()
   const audioRef = useRef<HTMLAudioElement>(null)
   const { audio } = useThemeMusic(serverAPI, parseInt(appid))
+  const [volume, setVolume] = useState(settingsState.volume)
+
+  useEffect(() => {
+    async function getData() {
+      const cache = await getCache(parseInt(appid))
+      if (typeof cache?.volume === 'number' && isFinite(cache.volume)) {
+        setVolume(cache.volume)
+      }
+    }
+    getData()
+  }, [])
 
   useEffect(() => {
     if (audio?.audioUrl?.length && audioRef.current) {
       audioRef.current.src = audio?.audioUrl
-      audioRef.current.volume = settingsState.volume
+      audioRef.current.volume = volume
       audioRef.current.play()
     }
     return () => {
       if (audioRef.current) {
         audioRef.current.pause()
+        audioRef.current.volume = 0
         audioRef.current.src = ''
       }
     }
-  }, [audio?.audioUrl, audioRef])
+  }, [audio?.audioUrl, audioRef?.current, volume])
 
   if (!audio?.audioUrl?.length) return <></>
 

src/hooks/useThemeMusic.ts

@@ -8,7 +8,6 @@ import { useSettings } from '../context/settingsContext'
 
 const useThemeMusic = (serverAPI: ServerAPI, appId: number) => {
   const { state: settingsState } = useSettings()
-  console.log('defaultMuted', settingsState.defaultMuted)
   const [audio, setAudio] = useState<{ videoId: string; audioUrl: string }>({
     videoId: '',
     audioUrl: ''