Optimize code

This commit is contained in:
Mathias Wagner 2025-03-01 14:36:39 +01:00
parent 6750b00f46
commit 770cad27b0
3 changed files with 11 additions and 80 deletions

View File

@ -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;
try {
const hasSeekTo = typeof player.seekTo === 'function';
console.log(`Player has seekTo: ${hasSeekTo}`);
console.log("YouTube player ready");
// Start playback if needed
if (autoplay) {
player.seekTo(startTime || 0);
player.playVideo();
event.target.seekTo(startTime || 0);
event.target.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);
}
},
'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) {

View File

@ -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"
/>
</div>
@ -554,12 +530,6 @@ export const Game = () => {
/>
)}
{playbackError && (
<div className="playback-error">
{playbackError}
</div>
)}
{songsLoading && (
<div className="songs-loading-indicator">
Loading songs...

View File

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