сделай чтобы при открытии чата нижний control (панель управления исчезала) и чтобы chat был поверх всего в плеере и сделай кнопку в виде иконки по середине относительно высоты взятой из mui 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,useMediaPlayer  } 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 [isFullscreen, setIsFullscreen] = useState(false);
    const playerRef = useRef(null);
    const lockSeek = useRef(false);

    const toggleChat = () => {
        setShowChat(!showChat);
        const player = useMediaPlayer()
        player.controls = false;
        if (playerRef.current) {

            playerRef.current.controls = false;


        }
    };

    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',
        position: 'relative', // Добавляем относительное позиционирование
    };

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

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

    // Стили для кнопки чата
    const chatToggleButtonStyle = {
        position: 'absolute',
        bottom: '60px', // Настройте по необходимости
        right: '20px',
        zIndex: 10,
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        color: 'white',
        border: 'none',
        padding: '10px',
        borderRadius: '5px',
        cursor: 'pointer',
    };

    // Стили для контейнера чата
    const chatContainerStyle = {
        position: 'absolute',
        top: '0',
        right: '0',
        width: '30%', // Настройте по необходимости
        height: '100%',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        zIndex: 9,
        overflowY: 'auto',
    };

    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={'Матрица'} />
                {(

                    <button onClick={toggleChat} style={chatToggleButtonStyle}>
                        {showChat ? 'Скрыть чат' : 'Показать чат'}
                    </button>
                )}

                {/* Отображение чата, только если нажата кнопка и плеер в полноэкранном режиме */}
                {showChat && (
                    <div className="media-fullscreen" style={chatContainerStyle}>
                        <Chat roomId={roomId} nickname={nickname} />
                    </div>
                )}
            </MediaPlayer>


        </div>
    );
};

export default Player;