добавь чат который будет появляться по нажатию кнопки только в полноэкранном режиме. встрой в ui плеера или настройки: import React, { useEffect, useRef, useState } from 'react';
import '@vidstack/react/player/styles/default/theme.css';
import '@vidstack/react/player/styles/default/layouts/audio.css';
import '@vidstack/react/player/styles/default/layouts/video.css';

import { MediaPlayer, MediaProvider } from '@vidstack/react';
import {
    DefaultVideoLayout,
    defaultLayoutIcons,
    DefaultAudioLayout,
} from '@vidstack/react/player/layouts/default';

import { socket } from '../api';
import Chat from './Chat';

const Player = ({ roomId, nickname, VideoUrl, setVideoUrl }) => {
    const [showChat, setShowChat] = useState(false);
    const playerRef = useRef(null);
    const lockSeek = useRef(false);
    const toggleChat = () => {
        setShowChat(!showChat);
    };

    useEffect(() => {
        const player = playerRef.current;

        const sendCurrentTime = () => {
            const currentTime = player.currentTime;
            if (parseInt(currentTime) !== 0) {
                socket.emit('videoControl', { roomId, action: 'sync', data: parseInt(currentTime) });
            }
        };

        const intervalId = setInterval(sendCurrentTime, 5000);

        const handlePlay = () => {
            socket.emit('videoControl', { roomId, action: 'play' });
        };

        const handlePause = () => {
            socket.emit('videoControl', { roomId, action: 'pause' });
        };

        const handleSeeked = () => {
            if (!lockSeek.current) {
                socket.emit('videoControl', { roomId, action: 'seek', data: parseInt(player.currentTime) });
            }
        };

        player.addEventListener('play', handlePlay);
        player.addEventListener('pause', handlePause);
        player.addEventListener('seeked', handleSeeked);

        const handleVideoControl = (data) => {
            if (data) {
                if (data.action === 'setUrl') {
                    setVideoUrl(data.data);
                } else if (data.action === 'play') {
                    player.play();
                } else if (data.action === 'pause') {
                    player.pause();
                } else if (data.action === 'seek' || data.action === 'sync') {
                    lockSeek.current = true;
                    if (Math.abs(player.currentTime - data.data) > 2) {
                        player.currentTime = data.data;
                    }
                    lockSeek.current = false;
                }
            }
        };

        socket.on('videoControl', handleVideoControl);

        return () => {
            clearInterval(intervalId);
            socket.off('videoControl', handleVideoControl);
            player.removeEventListener('play', handlePlay);
            player.removeEventListener('pause', handlePause);
            player.removeEventListener('seeked', handleSeeked);
        };
    }, [roomId, setVideoUrl]);

    // Стили для контейнера плеера
    const playerContainerStyle = {
        width: '100%',
        height: '100%',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
    };

    // Стили для MediaPlayer
    const mediaPlayerStyle = {
        width: '100%',
        height: '100%',
        flex: '1',
        position: 'relative',
    };

    // Стили для видео
    const videoStyle = {
        width: '100%',
        height: '100%',
        objectFit: 'contain',
    };

    return (
        <div style={playerContainerStyle}>
            <MediaPlayer
                ref={playerRef}
                src={VideoUrl || 'https://files.vidstack.io/sprite-fight/720p.mp4'}
                viewType='video'
                streamType='on-demand'
                logLevel='warn'
                crossOrigin
                playsInline
                title='Sprite Fight'
                poster='https://files.vidstack.io/sprite-fight/poster.webp'
                aspectRatio='none'
                style={mediaPlayerStyle}
            >
                {/* Применяем стили к видеоэлементу */}
                <MediaProvider>
                    {(props) => (
                        <video {...props} style={videoStyle}>
                            {props.children}
                        </video>
                    )}
                </MediaProvider>
                <DefaultAudioLayout icons={defaultLayoutIcons} />
                <DefaultVideoLayout icons={defaultLayoutIcons} translations={RUSSIA} title={"матрица"}/>
            </MediaPlayer>
        </div>
    );
};

export default Player;