socket.on('new_audio', (data) => {
    const audioElement = createAudioElement(data);
    document.getElementById('board').appendChild(audioElement);
});

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

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

function createAudioElement(data) {
    // Создаем основной контейнер для аудио элемента
    const audioElement = document.createElement('div');
    audioElement.className = 'audio';
    audioElement.dataset.id = data.id;
    audioElement.style.left = `${data.x}px`;
    audioElement.style.top = `${data.y}px`;
    audioElement.style.width = `${data.width}px`;
    audioElement.style.height = `${data.height}px`;

    // Элемент для отображения имени файла
    const audioTitle = document.createElement('div');
    audioTitle.className = 'audio-file-name';
    audioTitle.textContent = data.file_name;

    // Сам аудио элемент
    const audioTag = document.createElement('audio');
    audioTag.src = data.url;

    // Контейнер для управляющих кнопок
    const controls = document.createElement('div');
    controls.className = 'controls';

    // Кнопка проигрывания/паузы
    const playPauseButton = document.createElement('button');
    playPauseButton.className = 'play-pause';
    playPauseButton.textContent = '▶️';

    // Кнопка остановки
    const stopButton = document.createElement('button');
    stopButton.className = 'stop';
    stopButton.textContent = '⏹️';

    // Полоса прогресса
    const progressBar = document.createElement('input');
    progressBar.className = 'progress-bar';
    progressBar.type = 'range';
    progressBar.min = 0;
    progressBar.value = 0;
    progressBar.step = 0.1;

    // Добавляем элементы управления в контейнер
    controls.appendChild(playPauseButton);
    controls.appendChild(stopButton);
    controls.appendChild(progressBar);

    // Добавляем все подэлементы в основной контейнер
    audioElement.appendChild(audioTitle);
    audioElement.appendChild(audioTag);
    audioElement.appendChild(controls);

    // Привязываем необходимые обработчики событий сразу после создания элементов
    attachAudioEventListeners(audioElement, audioTag, playPauseButton, stopButton, progressBar);
    addAudioEventListeners(audioElement, data.id); // Для перетаскивания, изменения размера и др.
    return audioElement;
}

function attachAudioEventListeners(audioElement, audioTag, playPauseButton, stopButton, progressBar) {
    // Событие, когда аудио метаданные загружены
    audioTag.addEventListener('loadedmetadata', () => {
        progressBar.max = audioTag.duration;
    });

    // Событие обновления времени проигрывания аудио
    audioTag.addEventListener('timeupdate', () => {
        progressBar.value = audioTag.currentTime;
    });

    // Обработчик клика для кнопки проигрывания/паузы
    playPauseButton.addEventListener('click', () => {
        if (audioTag.paused) {
            audioTag.play();
            playPauseButton.textContent = '⏸️';
        } else {
            audioTag.pause();
            playPauseButton.textContent = '▶️';
        }
    });

    // Обработчик клика для кнопки остановки
    stopButton.addEventListener('click', () => {
        audioTag.pause();
        audioTag.currentTime = 0;
        playPauseButton.textContent = '▶️';
    });

    // Обработчик изменения значения полосы прогресса
    progressBar.addEventListener('input', () => {
        audioTag.currentTime = progressBar.value;
    });
}

function addAudioEventListeners(audioElement, id) {
    // Обработчик для перетаскивания элемента
    audioElement.addEventListener('mousedown', (e) => {
        // Проверяем, что клик не на элементах управления
        if (e.target.closest('.play-pause') || e.target.closest('.stop') || e.target.closest('.progress-bar')) {
            return;
        }

        if (e.button !== 0) return;
        e.preventDefault();
        e.stopPropagation();

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

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

        // Добавляем обработчик движения мыши
        document.addEventListener('mousemove', moveAudio);

        // Обработчик отпускания кнопки мыши
        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', moveAudio);
        }, { once: true });
    });

    // Обработчик двойного клика
    audioElement.addEventListener('dblclick', (e) => {
        e.preventDefault();
        e.stopPropagation();
        showContextMenu(audioElement, id, e.clientX, e.clientY);
    });

    // Для добавления других нужных слушателей, таких как изменение размера
    addResizeListeners(audioElement, id, 'audio');
}

document.getElementById('add-audio').addEventListener('click', () => {
    const formHtml = `
        <div id="audio-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="audio-file" style="display:block; margin-bottom:16px; font-size:16px; color:#333;">🎵 Upload Your Audio File</label>
            <input type="file" id="audio-file" accept="audio/*" 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-audio-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 Audio</button>
            <button id="cancel-audio" 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-audio-submit').addEventListener('click', async () => {
        const fileInput = document.getElementById('audio-file');
        if (fileInput.files.length > 0) {
            const file = fileInput.files[0];
            const audioData = await uploadFile(file, '/upload_audio');
            addAudioToCenter(audioData);
            closeModal();
        }
    });

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

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

function addAudioToCenter(audioData) {
    const rect = boardWrapper.getBoundingClientRect();
    const width = 200;
    const height = 80;

    const centerX = ((rect.width / 2 - translateX) / scale) - width / 2;
    const centerY = ((rect.height / 2 - translateY) / scale) - height / 2;
    console.log(`Rect dimensions: ${rect.width}, ${rect.height}`);
    console.log(`translateX: ${translateX}, translateY: ${translateY}, scale: ${scale}`);
    console.log(`Center X: ${centerX}, Center Y: ${centerY}`);
    socket.emit('create_audio', {
        file_name: audioData.file_name,
        url: audioData.url,
        x: centerX,
        y: centerY,
        width: 500,
        height: 100,
        board_id: currentBoardId
    });
}

function handleExistingAudioElements() {
    // Находим все существующие элементы с классом 'audio'
    document.querySelectorAll('.audio').forEach(audioElement => {
        // Получаем audioTag и элементы управления, которые нам необходимы для привязки обработчиков
        const audioTag = audioElement.querySelector('audio');
        const playPauseButton = audioElement.querySelector('.play-pause');
        const stopButton = audioElement.querySelector('.stop');
        const progressBar = audioElement.querySelector('.progress-bar');

        const id = audioElement.dataset.id; // Получаем идентификатор элемента

        // Привязываем события, которые отвечают за взаимодействие с непосредственно аудио
        attachAudioEventListeners(audioElement, audioTag, playPauseButton, stopButton, progressBar);

        // Привязываем другие события, такие как перетаскивание и изменение размера
        addAudioEventListeners(audioElement, id);
    });
}

// iframe.js

socket.on('new_iframe', (data) => {
    const iframe = createIframeElement(data);
    document.getElementById('board').appendChild(iframe);
});

socket.on('updated_iframe', (data) => {
    const iframe = document.querySelector(`.iframe[data-id="${data.id}"]`);
    if (iframe) {
        iframe.style.left = `${data.x}px`;
        iframe.style.top = `${data.y}px`;
        iframe.style.width = `${data.width}px`;
        iframe.style.height = `${data.height}px`;
        iframe.querySelector('iframe').src = data.url;
    }
});

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

// Event listener for 'add-iframe' button
document.getElementById('add-iframe').addEventListener('click', () => {
    const formHtml = `<div id="iframe-form" style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.1); z-index: 1000;">
        <label for="iframe-url" style="display:block; margin-bottom:8px;">Iframe URL:</label>
        <input type="text" id="iframe-url" placeholder="Enter iframe URL" style="width: calc(100% - 22px); padding:10px; margin-bottom:12px; border:1px solid #ccc; border-radius:4px;"><br>
        <button id="add-iframe-submit" style="padding:10px 20px; background-color:#007bff; color:white; border:none; border-radius:4px; cursor:pointer; margin-right:8px;">Add Iframe</button>
        <button id="cancel-iframe" style="padding:10px 20px; background-color:#ccc; color:white; border:none; border-radius:4px; cursor:pointer;">Cancel</button>
    </div>`;

    document.body.insertAdjacentHTML('beforeend', formHtml);

    document.getElementById('add-iframe-submit').addEventListener('click', () => {
        const url = document.getElementById('iframe-url').value;
        if (url) {
            addIframeToCenter({ url });
            closeModal();
        }
    });

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

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

function addIframeToCenter(iframeData) {
    const width = 800; // default width
    const height = 925; // default height

    // Get visible area dimensions
    const rect = boardWrapper.getBoundingClientRect();

    // Calculate center coordinates considering current scale and translation
    const centerX = ((rect.width / 2 - translateX) / scale) - width / 2;
    const centerY = ((rect.height / 2 - translateY) / scale) - height / 2;

    console.log(`Rect dimensions: ${rect.width}, ${rect.height}`);
    console.log(`translateX: ${translateX}, translateY: ${translateY}, scale: ${scale}`);
    console.log(`Center X: ${centerX}, Center Y: ${centerY}`);
    socket.emit('create_iframe', {
        name: 'Iframe',
        url: iframeData.url,
        x: centerX,
        y: centerY,
        width,
        height,
        board_id: currentBoardId
    });
}

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

    const iframe = document.createElement('iframe');
    iframe.src = data.url;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = 'none';

    iframeContainer.appendChild(iframe);

    addIframeEventListeners(iframeContainer, data.id);

    return iframeContainer;
}

function addIframeEventListeners(iframeContainer, id) {
    let isTouchDragEnabled = false;

    iframeContainer.addEventListener('mousedown', (e) => {
        if (e.button !== 0) return; // Only respond to left mouse button
        e.preventDefault();
        e.stopPropagation();

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

        function moveIframe(e) {
            const deltaX = (e.clientX - startX) / scale;
            const deltaY = (e.clientY - startY) / scale;
            iframeContainer.style.left = `${startLeft + deltaX}px`;
            iframeContainer.style.top = `${startTop + deltaY}px`;

            const x = parseFloat(iframeContainer.style.left) || 0;
            const y = parseFloat(iframeContainer.style.top) || 0;
            const width = iframeContainer.offsetWidth;
            const height = iframeContainer.offsetHeight;

            socket.emit('update_iframe', { id, x, y, width, height });
        }

        document.addEventListener('mousemove', moveIframe);

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

    function startTouchDrag(e) {
        e.preventDefault();
        e.stopPropagation();

        const startX = e.touches[0].clientX;
        const startY = e.touches[0].clientY;
        const startLeft = parseFloat(iframeContainer.style.left) || 0;
        const startTop = parseFloat(iframeContainer.style.top) || 0;

        function moveTouch(e) {
            const deltaX = (e.touches[0].clientX - startX) / scale;
            const deltaY = (e.touches[0].clientY - startY) / scale;
            iframeContainer.style.left = `${startLeft + deltaX}px`;
            iframeContainer.style.top = `${startTop + deltaY}px`;

            const x = parseFloat(iframeContainer.style.left) || 0;
            const y = parseFloat(iframeContainer.style.top) || 0;
            const width = iframeContainer.offsetWidth;
            const height = iframeContainer.offsetHeight;

            socket.emit('update_iframe', { id, x, y, width, height });
        }

        function endTouchDrag() {
            document.removeEventListener('touchmove', moveTouch);
            document.removeEventListener('touchend', endTouchDrag);
        }

        document.addEventListener('touchmove', moveTouch);
        document.addEventListener('touchend', endTouchDrag);
    }

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

        // Toggle touch drag
        isTouchDragEnabled = !isTouchDragEnabled;

        if (isTouchDragEnabled) {
            iframeContainer.addEventListener('touchstart', startTouchDrag);
            document.addEventListener('mousedown', checkClickOutside);
        } else {
            iframeContainer.removeEventListener('touchstart', startTouchDrag);
            document.removeEventListener('mousedown', checkClickOutside);
        }
    });

    function checkClickOutside(e) {
        if (!iframeContainer.contains(e.target)) {
            iframeContainer.removeEventListener('touchstart', startTouchDrag);
            isTouchDragEnabled = false;
            document.removeEventListener('mousedown', checkClickOutside);
        }
    }

    addResizeListeners(iframeContainer, id, 'iframe');
}

function handleExistingIframes() {
    document.querySelectorAll('.iframe').forEach(iframeContainer => {
        const id = iframeContainer.dataset.id;
        addIframeEventListeners(iframeContainer, id);
    });
}

У меня почему то iframe в браузере не применяет стили top и left, может дело в стилях?