Trying to synchronize the play/pause of the YouTube player for all the user's. I am getting the data on client side from server but its not playing the or pause the video base on that action.
What I want to achieve is that if the owner of the room plays the video it should get played for everyone
Backend WebSocket setup
const server = http.createServer(app);const wss = new WebSocketServer({ server });wss.on("connection", (ws, req) => { ws.on("message", (message) => { console.log(wss.clients.size); try { const data = JSON.parse(message.toString()); console.log("Received message:", data); wss.clients.forEach((client) => { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(JSON.stringify(data)); } }); } catch (error) { console.error("Error parsing message:", error); } }); console.log("connected"); ws.on("close", () => { console.log("Client disconnected"); });});Front end setup
const [player, setPlayer] = useState<YouTubePlayer | null>(null); const ws = useRef<WebSocket | null>(null); // youtube player callbacks useEffect(() => { if (!ws.current) { ws.current = new WebSocket("ws://localhost:3000/"); ws.current.onopen = () => { console.log("WS connected"); }; } ws.current.onmessage = (event) => { const data = JSON.parse(event.data); console.log(data); if (player) { switch (data.action) { case "play": console.log("Playing video"); player.playVideo(); break; case "pause": console.log("Pausing video"); player.pauseVideo(); break; } } else { console.warn("YouTube player not yet initialized"); } }; ws.current.onclose = () => { console.log("WS disconnected"); }; // return () => { // if (ws.current) { // ws.current.close(); // ws.current = null; // } // }; }, []); const handlePlay = () => { if (ws.current && ws.current?.readyState === WebSocket.OPEN) { console.log("Sending play action"); ws.current?.send(JSON.stringify({ action: "play" })); } }; const handlePause = (e: YouTubeEvent) => { if (ws.current && ws.current?.readyState === WebSocket.OPEN) { console.log("Sending pause action"); ws.current?.send(JSON.stringify({ action: "pause" })); } }; const youtubePlayerOpts = { height: "100%", width: "100%", playerVars: { autoplay: 1 as 0 | 1, // controls: isOwner ? (1 as 0 | 1) : (0 as 0 | 1), // disablekb: isOwner ? (0 as 0 | 1) : (1 as 0 | 1), // modestbranding: 1 as 1, // rel: 0 as 0 | 1, }, };YouTube Player component
<YouTube videoId={currentSong?.externalId} opts={youtubePlayerOpts} className="h-[90%] w-full" onReady={(e) => { setPlayer(e.target); }} onPlay={handlePlay} onPause={handlePause}/>Tried adding player as a dependency, tried putting console logs but unable to find the problem, Sometimes it does get play but I am confuse why only sometimes, also sometimes it dont initialize the player