сделай чтобы Иконка чата из 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 RUSSIA = {
        'Caption Styles': 'Стили субтитров',
        'Captions look like this': 'Субтитры выглядят так',
        'Closed-Captions Off': 'Субтитры отключены',
        'Closed-Captions On': 'Субтитры включены',
        'Display Background': 'Фон отображения',
        'Enter Fullscreen': 'Вход в полноэкранный режим',
        'Enter PiP': 'Войти в режим "картинка в картинке"',
        'Exit Fullscreen': 'Выйти из полноэкранного режима',
        'Exit PiP': 'Выйти из режима "картинка в картинке"',
        'Google Cast': 'Google Cast',
        'Keyboard Animations': 'Анимации клавиатуры',
        'Seek Backward': 'Перемотать назад',
        'Seek Forward': 'Перемотать вперед',
        'Skip To Live': 'Перейти к живому эфиру',
        'Text Background': 'Фон текста',
        Accessibility: 'Доступность',
        AirPlay: 'AirPlay',
        Announcements: 'Объявления',
        Audio: 'Аудио',
        Auto: 'Авто',
        Boost: 'Усиление звука',
        Captions: 'Субтитры',
        Chapters: 'Главы',
        Color: 'Цвет',
        Connected: 'Подключено',
        Connecting: 'Подключение',
        Continue: 'Продолжить',
        Default: 'По умолчанию',
        Disabled: 'Отключено',
        Disconnected: 'Отключено',
        Download: 'Скачать',
        Family: 'Семейный',
        Font: 'Шрифт',
        Fullscreen: 'Полноэкранный режим',
        LIVE: 'В эфире',
        Loop: 'Повтор',
        Mute: 'Выключить звук',
        Normal: 'Норма',
        Off: 'Выключено',
        Opacity: 'Прозрачность',
        Pause: 'Пауза',
        PiP: 'Картинка в картинке',
        Play: 'Воспроизвести',
        Playback: 'Воспроизведение',
        Quality: 'Качество',
        Replay: 'Повторить',
        Reset: 'Сбросить',
        Seek: 'Перемотка',
        Settings: 'Настройки',
        Shadow: 'Тень',
        Size: 'Размер',
        Speed: 'Скорость',
        Text: 'Текст',
        Track: 'Дорожка',
        Unmute: 'Включить звук',
        Volume: 'Громкость',
    };
    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',
    };
    const player = useMediaPlayer()
    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 style={chatContainerStyle}>
                        <Chat roomId={roomId} nickname={nickname} />
                    </div>
                )}
            </MediaPlayer>


        </div>
    );
};

export default Player;