сделай чтобы при смене серии или сезона заново обновлялись назначения событий для плеера,  т.к. при смене серии iframe код полностью обновляется import React, { useEffect, useRef, useCallback } from 'react';
import { socket } from "../api.js";

const PlayerCollaps = ({ roomId, videoUrl, setVideoUrl }) => {
    const iframeRef = useRef(null);
    const lockSeekRef = useRef(false);

    // Хранилище текущего сезона и эпизода
    const currentSeasonRef = useRef("");
    const currentEpisodeRef = useRef("");

    // Обработчик сообщений из iframe, обернутый в useCallback
    const handleMessage = useCallback((event) => {
        // **Рекомендуется** проверить origin для безопасности
        if (event.origin !== 'http://127.0.0.1:3002') return;

        const data = event.data;
        if (data && data.type) {
            switch (data.type) {
                case 'play':
                    socket.emit('videoControl', { roomId, action: "play", data: null });
                    break;
                case 'pause':
                    socket.emit('videoControl', { roomId, action: "pause", data: null });
                    break;
                case 'seeking':
                    if (!lockSeekRef.current) {
                        socket.emit('videoControl', { roomId, action: "seek", data: Math.floor(data.time) });
                    }
                    break;
                case 'playlistItem':
                    currentSeasonRef.current = data.season;
                    currentEpisodeRef.current = data.episode;
                    socket.emit('videoControl', {
                        roomId,
                        action: "changeEpisode",
                        data: { season: data.season, episode: data.episode }
                    });
                    break;
                default:
                    break;
            }
        }
    }, [roomId]);

    // Добавление и удаление слушателя сообщений из iframe
    useEffect(() => {
        window.addEventListener('message', handleMessage);
        return () => {
            window.removeEventListener('message', handleMessage);
        };
    }, [handleMessage]);

    // Обработчик событий сокета, обернутый в useCallback
    const handleVideoControl = useCallback((data) => {
        if (iframeRef.current) {
            let message = {};

            switch (data.action) {
                case "setUrl":
                    setVideoUrl(data.data);
                    break;
                case "play":
                case "pause":
                    message.action = data.action;
                    break;
                case "seek":
                case "sync":
                    message.action = 'seek';
                    message.time = data.data;
                    lockSeekRef.current = true;
                    // Устанавливаем таймаут для сброса блокировки
                    setTimeout(() => { lockSeekRef.current = false; }, 1000);
                    break;
                case "changeEpisode":
                    if (
                        currentSeasonRef.current.toString() !== data.data.season.toString() ||
                        currentEpisodeRef.current.toString() !== data.data.episode.toString()
                    ) {
                        message.action = 'changeEpisode';
                        message.season = data.data.season;
                        message.episode = data.data.episode;
                    }
                    break;
                default:
                    break;
            }

            if (Object.keys(message).length > 0) {
                console.log(message);
                iframeRef.current.contentWindow.postMessage(message, '*');
            }
        }
    }, [setVideoUrl]);

    // Функция для привязки слушателей
    const bindSocketListeners = useCallback(() => {
        socket.on('videoControl', handleVideoControl);
    }, [handleVideoControl]);

    // Функция для отвязки слушателей
    const unbindSocketListeners = useCallback(() => {
        socket.off('videoControl', handleVideoControl);
    }, [handleVideoControl]);

    // Привязка и отвязка слушателей сокета при изменении roomId или при подключении/реконнекте
    useEffect(() => {
        // Привязка слушателей при подключении
        socket.on('connect', bindSocketListeners);
        socket.on('reconnect', bindSocketListeners);

        // Первоначальная привязка, если уже подключено
        if (socket.connected) {
            bindSocketListeners();
        }

        // Очистка при размонтировании или изменении зависимостей
        return () => {
            socket.off('connect', bindSocketListeners);
            socket.off('reconnect', bindSocketListeners);
            unbindSocketListeners();
        };
    }, [bindSocketListeners, unbindSocketListeners]);

    return (
        <>
            {videoUrl ? (
                <iframe
                    key={videoUrl} // Ключ для пересоздания iframe при изменении videoId
                    ref={iframeRef}
                    src={`http://127.0.0.1:3002/api/collaps/${videoUrl}`}
                    style={{ width: '100%', height: '100%', border: 'none' }}
                    allow="autoplay; encrypted-media"
                    allowFullScreen
                    title="Video Player"
                />
            ) : (
                <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <p>Выберите видео для воспроизведения.</p>
                </div>
            )}
        </>
    );
};

export default PlayerCollaps;