diff --git a/src/pages/GamePage.module.css b/src/pages/GamePage.module.css index 5df6a03..7771239 100644 --- a/src/pages/GamePage.module.css +++ b/src/pages/GamePage.module.css @@ -165,6 +165,10 @@ left: 72px; } +.cornerBtnLeft3 { + left: 140px; +} + .cornerBtnRight { right: 16px; font-size: 18px; diff --git a/src/pages/GamePage.tsx b/src/pages/GamePage.tsx index 071e672..5eb4d32 100644 --- a/src/pages/GamePage.tsx +++ b/src/pages/GamePage.tsx @@ -70,6 +70,7 @@ export function GamePage() { const [audioPlayer, setAudioPlayer] = useState(null) const ytHostRef = useRef(null) const [keyboardMode, setKeyboardMode] = useState(false) + const [useYoutube, setUseYoutube] = useState(!!resolvedSong.youtubeVideoId) // Load chart useEffect(() => { @@ -93,7 +94,7 @@ export function GamePage() { let destroyed = false let player: AudioPlayer | null = null - if (resolvedSong.youtubeVideoId && ytHostRef.current) { + if (useYoutube && resolvedSong.youtubeVideoId && ytHostRef.current) { gameLog(`creating YouTube audio player: ${resolvedSong.youtubeVideoId} offset=${resolvedSong.youtubeOffset}`) createYouTubeAudioPlayer({ videoId: resolvedSong.youtubeVideoId, @@ -116,7 +117,7 @@ export function GamePage() { player?.destroy() setAudioPlayer(null) } - }, [resolvedSong.id]) + }, [resolvedSong.id, useYoutube]) // Pose detection (disabled in keyboard mode) const { loading, error, calibrationStatus, framingHint, gesture } = usePoseLoop( @@ -348,6 +349,17 @@ export function GamePage() { > {keyboardMode ? 'KB: ON' : 'KB: OFF'} + {resolvedSong.youtubeVideoId && ( + + )} {canFullscreen && !isFullscreen && (