.video-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
}

.video-controls button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.video-controls button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

{% extends "base.html" %}
{% block title %}Board View{% endblock %}
{% block content %}
<!--<h2>{{ board.name }}</h2>-->

<script type="text/javascript">
    // Определяем currentBoardId, чтобы он был доступен в JavaScript
    const currentBoardId = {{ board.id }};
</script>

<div id="board-wrapper">
    <div id="board">
        {% for note in notes %}
        <div class="note" data-id="{{ note.id }}"
            style="left: {{ note.x }}px; top: {{ note.y }}px; width: {{ note.width }}px; height: {{ note.height }}px;">
            <textarea>{{ note.text }}</textarea>
        </div>
        {% endfor %}
        {% for image in images %}
        <div class="image hidden" data-id="{{ image.id }}"
            style="left: {{ image.x }}px; top: {{ image.y }}px; width: {{ image.width }}px; height: {{ image.height }}px;">
            <img src="{{ image.url }}" style="width: 100%; height: 100%; object-fit: contain;">
        </div>
        {% endfor %}
        {% for audio in audios %}
        <div class="audio" data-id="{{ audio.id }}"
            style="left: {{ audio.x }}px; top: {{ audio.y }}px; width: {{ audio.width }}px; height: {{ audio.height }}px;">
            <div class="audio-file-name">{{ audio.file_name }}</div>
            <audio src="{{ audio.url }}"></audio>
            <div class="controls">
                <button class="play-pause">▶️</button>
                <button class="stop">⏹️</button>
                <input class="progress-bar" type="range" min="0" step="0.1" max="32.078333">
            </div>
        </div>
        {% endfor %}
        {% for link in links %}
        <div class="link" data-id="{{ link.id }}" data-url="{{ link.url }}"
            style="left: {{ link.x }}px; top: {{ link.y }}px; width: {{ link.width }}px; height: {{ link.height }}px;">
            <div class="link-icon">🔗</div>
            <div class="link-text">{{ link.name }}</div>
        </div>
        {% endfor %}
        {% for iframe in iframes %}
        <div class="iframe" data-id="{{ iframe.id }}" style="left:{{ iframe.x }}px; top:{{ iframe.y }}px; width:{{ iframe.width }}px; height:{{ iframe.height }}px;">
            <iframe src="{{ iframe.url }}" style="width:100%; height:100%; border:none;"></iframe>
        </div>
        {% endfor %}
        {% for video in videos %}
        <div class="video" data-id="{{ video.id }}"
            style="left: {{ video.x }}px; top: {{ video.y }}px; width: {{ video.width }}px; height: {{ video.height }}px;">
            <div class="video-file-name">{{ video.file_name }}</div>
            <video src="{{ video.url }}" controls></video>
            <div class="video-controls">
                <button class="play-pause">▶️</button>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<div id="menu-container">
    <button id="menu-button">Menu</button>
    <div id="dropdown-menu" class="hidden">
        <button id="add-note">Add Comment</button>
        <button id="add-image">Add Image</button>
        <button id="add-audio">Add Audio</button>
        <button id="add-video">Add Video</button>
        <button id="add-link">Add Link</button>
        <button id="add-iframe">Add Iframe</button>
        <button id="toggle-fullscreen">Toggle Fullscreen</button>
        <button id="toggle-vr">Toggle VR</button>
    </div>
</div>

<!-- Подключение Socket.io -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>

<!-- Инициализация Socket -->
<script src="{{ url_for('static', filename='js/socket.js') }}"></script>

<!-- Другие JavaScript файлы -->
<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
<script src="{{ url_for('static', filename='js/contextMenu.js') }}"></script>
<script src="{{ url_for('static', filename='js/resize.js') }}"></script>
<script src="{{ url_for('static', filename='js/notes.js') }}"></script>
<script src="{{ url_for('static', filename='js/images.js') }}"></script>
<script src="{{ url_for('static', filename='js/audio.js') }}"></script>
<script src="{{ url_for('static', filename='js/video.js') }}"></script>
<script src="{{ url_for('static', filename='js/link.js') }}"></script>
<script src="{{ url_for('static', filename='js/iframe.js') }}"></script>
<script src="{{ url_for('static', filename='js/board.js') }}"></script>
<script src="{{ url_for('static', filename='js/vr.js') }}"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>

{% endblock %}

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 = true;

    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);
    });
}

Я не могу передвинуть видео элемент, потому что при нажатии на него срабатывает воспроизведение/пауза, как мне сделать чтобы он адекватно перемещался?