socket.on('new_video', (data) => {
    const videoElement = createVideoElement(data);
    document.getElementById('board').appendChild(videoElement);
});

socket.on('updated_video', (data) => {
    const videoElement = document.querySelector(`.video[data-id="${data.id}"]`);
    if (videoElement) {
        videoElement.style.left = `${data.x}px`;
        videoElement.style.top = `${data.y}px`;
        videoElement.style.width = `${data.width}px`;
        videoElement.style.height = `${data.height}px`;
        videoElement.querySelector('.video-file-name').textContent = data.file_name;
        videoElement.querySelector('video').src = data.url;
    }
});

socket.on('video_deleted', (data) => {
    const element = document.querySelector(`.video[data-id="${data.id}"]`);
    if (element) {
        element.remove();
    }
});

function createVideoElement(data) {
    const videoElement = document.createElement('div');
    videoElement.className = 'video';
    videoElement.dataset.id = data.id;
    videoElement.style.left = `${data.x}px`;
    videoElement.style.top = `${data.y}px`;
    videoElement.style.width = `${data.width}px`;
    videoElement.style.height = `${data.height}px`;

    const videoTitle = document.createElement('div');
    videoTitle.className = 'video-file-name';
    videoTitle.textContent = data.file_name;

    const videoTag = document.createElement('video');
    videoTag.src = data.url;
    videoTag.controls = false;

    const controls = document.createElement('div');
    controls.className = 'video-controls';

    const playPauseButton = document.createElement('button');
    playPauseButton.className = 'play-pause';
    playPauseButton.textContent = '▶️';

    controls.appendChild(playPauseButton);

    videoElement.appendChild(videoTitle);
    videoElement.appendChild(videoTag);
    videoElement.appendChild(controls);

    addVideoEventListeners(videoElement, data.id, videoTag, playPauseButton);
    return videoElement;
}

function addVideoEventListeners(videoElement, id, videoTag, playPauseButton) {
    videoElement.addEventListener('mousedown', (e) => {
        if (e.button !== 0) return;
        e.preventDefault();
        e.stopPropagation();

        const startX = e.clientX;
        const startY = e.clientY;
        const startLeft = parseFloat(videoElement.style.left) || 0;
        const startTop = parseFloat(videoElement.style.top) || 0;

        function moveVideo(e) {
            const deltaX = (e.clientX - startX) / scale;
            const deltaY = (e.clientY - startY) / scale;
            videoElement.style.left = `${startLeft + deltaX}px`;
            videoElement.style.top = `${startTop + deltaY}px`;
            const x = parseFloat(videoElement.style.left) || 0;
            const y = parseFloat(videoElement.style.top) || 0;
            const width = videoElement.offsetWidth;
            const height = videoElement.offsetHeight;
            socket.emit('update_video', { id, x, y, width, height });
        }

        document.addEventListener('mousemove', moveVideo);

        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', moveVideo);
        }, { once: true });
    });

    videoElement.addEventListener('dblclick', (e) => {
        e.preventDefault();
        e.stopPropagation();
        showContextMenu(videoElement, id, e.clientX, e.clientY);
    });

    addResizeListeners(videoElement, id, 'video');

    playPauseButton.addEventListener('click', () => {
        if (videoTag.paused) {
            videoTag.play();
            playPauseButton.textContent = '⏸️';
        } else {
            videoTag.pause();
            playPauseButton.textContent = '▶️';
        }
    });
}

document.getElementById('add-video').addEventListener('click', () => {
    const formHtml = `
        <div id="video-form" style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#f9f9f9; padding:20px; border-radius:12px; box-shadow:0 15px 30px rgba(0,0,0,0.2); z-index: 1000; max-width:400px; width:100%; text-align:center; font-family:'Arial', sans-serif;">
            <label for="video-file" style="display:block; margin-bottom:16px; font-size:16px; color:#333;">📹 Upload Your Video File</label>
            <input type="file" id="video-file" accept="video/*" style="margin-bottom:20px; width:calc(100% - 32px); padding:10px; border-radius:8px; background-color:#fff; border:1px solid #ddd; color:#333; cursor:pointer;">
            <br>
            <button id="add-video-submit" style="padding:12px 24px; background-color:#28a745; color:white; border:none; border-radius:6px; cursor:pointer; margin-right:12px; box-shadow:0 4px 8px rgba(40,167,69,0.2); transition:background-color 0.3s;">Add Video</button>
            <button id="cancel-video" style="padding:12px 24px; background-color:#ff3860; color:white; border:none; border-radius:6px; cursor:pointer; box-shadow:0 4px 8px rgba(255,56,96,0.2); transition:background-color 0.3s;">Cancel</button>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', formHtml);

    document.getElementById('add-video-submit').addEventListener('click', async () => {
        const fileInput = document.getElementById('video-file');
        if (fileInput.files.length > 0) {
            const file = fileInput.files[0];
            const videoData = await uploadFile(file, '/upload_video');
            addVideoToCenter(videoData);
            closeModal();
        }
    });

    document.getElementById('cancel-video').addEventListener('click', closeModal);

    function closeModal() {
        const form = document.getElementById('video-form');
        if (form) {
            form.remove();
        }
    }
});

function addVideoToCenter(videoData) {
    const rect = boardWrapper.getBoundingClientRect();
    const width = 400;
    const height = 225;

    const centerX = ((rect.width / 2 - translateX) / scale) - width / 2;
    const centerY = ((rect.height / 2 - translateY) / scale) - height / 2;

    socket.emit('create_video', {
        file_name: videoData.file_name,
        url: videoData.url,
        x: centerX,
        y: centerY,
        width: width,
        height: height,
        board_id: currentBoardId
    });
}

function handleExistingVideoElements() {
    document.querySelectorAll('.video').forEach(videoElement => {
        const id = videoElement.dataset.id;
        const videoTag = videoElement.querySelector('video');
        const playPauseButton = videoElement.querySelector('.play-pause');
        addVideoEventListeners(videoElement, id, videoTag, playPauseButton);
    });
}

Посмотри почему у меня элемент не передвигается, при этом двойной клик работает нормально