diff --git a/components/AudioPlayer.tsx b/components/AudioPlayer.tsx index 5e0a528..c7e88d1 100644 --- a/components/AudioPlayer.tsx +++ b/components/AudioPlayer.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useRef, useEffect } from 'react'; +import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'; interface AudioPlayerProps { src: string; @@ -12,7 +12,11 @@ interface AudioPlayerProps { onHasPlayedChange?: (hasPlayed: boolean) => void; } -export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false, onHasPlayedChange }: AudioPlayerProps) { +export interface AudioPlayerRef { + play: () => void; +} + +const AudioPlayer = forwardRef(({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false, onHasPlayedChange }, ref) => { const audioRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); const [progress, setProgress] = useState(0); @@ -46,6 +50,20 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla } }, [src, unlockedSeconds, startTime, autoPlay]); + // Expose play method to parent component + useImperativeHandle(ref, () => ({ + play: () => { + if (!audioRef.current || isPlaying) return; + audioRef.current.play(); + setIsPlaying(true); + onPlay?.(); + if (!hasPlayedOnce) { + setHasPlayedOnce(true); + onHasPlayedChange?.(true); + } + } + })); + const togglePlay = () => { if (!audioRef.current) return; @@ -116,4 +134,8 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla ); -} +}); + +AudioPlayer.displayName = 'AudioPlayer'; + +export default AudioPlayer; diff --git a/components/Game.tsx b/components/Game.tsx index 1171672..a547f73 100644 --- a/components/Game.tsx +++ b/components/Game.tsx @@ -1,7 +1,7 @@ 'use client'; -import { useEffect, useState } from 'react'; -import AudioPlayer from './AudioPlayer'; +import { useEffect, useState, useRef } from 'react'; +import AudioPlayer, { AudioPlayerRef } from './AudioPlayer'; import GuessInput from './GuessInput'; import Statistics from './Statistics'; import { useGameState } from '../lib/gameState'; @@ -38,6 +38,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max const [hasRated, setHasRated] = useState(false); const [showYearModal, setShowYearModal] = useState(false); const [hasPlayedAudio, setHasPlayedAudio] = useState(false); + const audioPlayerRef = useRef(null); useEffect(() => { const updateCountdown = () => { @@ -119,7 +120,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max const handleStartAudio = () => { // This will be called when user clicks "Start" button on first attempt - // We'll trigger the audio player programmatically + // Trigger the audio player to start playing + audioPlayerRef.current?.play(); setHasPlayedAudio(true); }; @@ -265,6 +267,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max