перепиши код на использование vidstack + добавь чат внутрь плеера чтобы была кнопка для открытия чата даже в полноэкранном режиме import React, { useEffect, useRef } from 'react';

import {socket} from "../api.js";
import Chat from "./Chat";
const Player = ({ roomId, nickname, VideoUrl, setVideoUrl}) => {
    const playerRef = useRef(null);
    let lockSeek = false;
    let player;
    useEffect(() => {

        // Загружаем скрипт
        const script = document.createElement('script');
        script.src = "https://fa-n.ru/room/playerjs.js";
        script.async = true;
        document.body.appendChild(script);

        script.onload = () => {
            player = new window.Playerjs({ id: "player" });

            function sendCurrentTime() {
                const currentTime = player.api("time");
                if (parseInt(currentTime) !== 0) {
                    socket.emit('videoControl', {roomId: roomId, action: "sync", data: parseInt(currentTime)});
                }
            }
            setInterval(sendCurrentTime, 5000);
            window.PlayerjsEvents = (event, id, info) => {
                console.log(event,id,info)
                if (event === "userplay") {
                    socket.emit('videoControl', { roomId:roomId, action:"play", data:null });
                }

                if (event === "userpause") {
                    socket.emit('videoControl', { roomId:roomId, action:"pause", data:null });
                }

                if (event === "seek") {
                    if (!lockSeek && info !== 0) {
                        socket.emit('videoControl', { roomId:roomId, action:"seek", data:parseInt(info) });
                    }
                }
            };

                player.api('play', VideoUrl);


        };
        const handleVideoControl = (data) => {
            if (data) {
                if (data.action === "setUrl") {
                    setVideoUrl(data.data);
                    console.log(data.data);
                } else if (data.action === "play") {
                    player.api("play");
                } else if (data.action === "pause") {
                    player.api("pause");
                } else if (data.action === "seek") {
                    lockSeek = true;
                    if (Math.abs(player.api("time") - data.data) > 2) {
                        player.api("seek", data.data);
                    }
                    lockSeek = false;
                } else if (data.action === "sync") {
                    lockSeek = true;
                    if (Math.abs(player.api("time") - data.data) > 2) {
                        player.api("seek", data.data);
                    }
                    lockSeek = false;
                }
            }
        };

        socket.on('videoControl', handleVideoControl);

        return () => {
            if (player) {
                player.api('destroy');
            }
            document.body.removeChild(script);
            socket.off('videoControl', handleVideoControl);
        };

    }, [socket, VideoUrl]);

    return <div id="player" ref={playerRef} style={{ width: '100%', height: '100%' }} />;
};

export default Player;