Optimize code
This commit is contained in:
parent
6750b00f46
commit
770cad27b0
@ -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) {
|
||||
|
@ -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...
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user