diff --git a/client/src/components/YouTubePlayer/YouTubePlayer.jsx b/client/src/components/YouTubePlayer/YouTubePlayer.jsx index 33b0db2..00d84a6 100644 --- a/client/src/components/YouTubePlayer/YouTubePlayer.jsx +++ b/client/src/components/YouTubePlayer/YouTubePlayer.jsx @@ -6,8 +6,6 @@ const YouTubePlayer = ({ autoplay = false, startTime = 45, onReady = () => {}, - onError = () => {}, - onPlayerReady = null, className = '' }) => { const iframeRef = useRef(null); @@ -65,36 +63,20 @@ const YouTubePlayer = ({ }, events: { 'onReady': (event) => { - const player = event.target; - console.log("YouTube player ready event fired"); - - playerRef.current = player; + console.log("YouTube player ready"); - try { - const hasSeekTo = typeof player.seekTo === 'function'; - console.log(`Player has seekTo: ${hasSeekTo}`); - - // Start playback if needed - if (autoplay) { - player.seekTo(startTime || 0); - player.playVideo(); - } - - setIsLoaded(true); - onReady(); - - if (typeof onPlayerReady === 'function') { - console.log("Providing player instance to parent"); - onPlayerReady(player); - } - } catch (err) { - console.error("Error in player ready handler:", err); - onError(err); + // Start playback if needed + if (autoplay) { + event.target.seekTo(startTime || 0); + event.target.playVideo(); } + + setIsLoaded(true); + onReady(); }, 'onError': (event) => { console.error("YouTube player error:", event); - onError(event); + // Remove error handling } } }); @@ -115,7 +97,7 @@ const YouTubePlayer = ({ } } }; - }, [videoId, autoplay, onReady, onError, startTime, customStartTime]); + }, [videoId, autoplay, onReady, startTime, customStartTime]); useEffect(() => { if (playerRef.current && isLoaded && customStartTime !== startTime) { diff --git a/client/src/pages/Game/Game.jsx b/client/src/pages/Game/Game.jsx index af8e1cc..b7bfd40 100644 --- a/client/src/pages/Game/Game.jsx +++ b/client/src/pages/Game/Game.jsx @@ -47,7 +47,6 @@ export const Game = () => { const timerIntervalRef = useRef(null); const [allSongs, setAllSongs] = useState([]); - const [playbackError, setPlaybackError] = useState(null); const [songsLoading, setSongsLoading] = useState(false); useEffect(() => { @@ -259,28 +258,7 @@ export const Game = () => { }, [send]); const handlePlayerReady = useCallback((player) => { - console.log("Player ready handler called with:", player); - setPlaybackError(null); - - if (player && typeof player.seekTo === 'function') { - console.log("Setting valid YouTube player instance"); - setYtPlayer(player); - - try { - const currentTime = player.getCurrentTime(); - console.log(`Player initialized at ${currentTime}s`); - } catch (err) { - console.error("Error testing player methods:", err); - } - } else { - console.error("Invalid YouTube player instance provided:", player); - setPlaybackError("YouTube player initialization issue"); - } - }, []); - - const handlePlayerError = useCallback((error) => { - console.error("YouTube playback error:", error); - setPlaybackError("Error playing song - trying to continue..."); + console.log("Player ready"); }, []); const togglePlayback = useCallback(() => { @@ -330,8 +308,6 @@ export const Game = () => { autoplay={true} startTime={currentSong.refrainTime || 45} onReady={handlePlayerReady} - onPlayerReady={setYtPlayer} - onError={handlePlayerError} className="song-embedded-player" /> @@ -554,12 +530,6 @@ export const Game = () => { /> )} - {playbackError && ( -
- {playbackError} -
- )} - {songsLoading && (
Loading songs... diff --git a/client/src/pages/Game/styles.sass b/client/src/pages/Game/styles.sass index c5bba8a..7b8f0d5 100644 --- a/client/src/pages/Game/styles.sass +++ b/client/src/pages/Game/styles.sass @@ -691,27 +691,6 @@ opacity: 1 transform: scale(1.05) -.playback-error - position: fixed - bottom: 10px - left: 50% - transform: translateX(-50%) - background: rgba(255, 0, 0, 0.7) - margin-left: 10px - color: white - padding: 8px 20px - border-radius: 20px - font-size: 14px - z-index: 1000 - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) - animation: fade-out 4s forwards - -@keyframes fade-out - 0%, 80% - opacity: 1 - 100% - opacity: 0 - .player-container position: fixed left: 20px