Audio Video Synchronization Tool

/**
 * Creates a user interface that simulates an Audio/Video Synchronization tool.
 * Since the input is a static image, which has no audio or time dimension, this function
 * builds a visual representation of a player with controls to adjust a theoretical audio delay.
 * The provided image is used as the video frame in this simulated player.
 *
 * @param {Image} originalImg The input image object to be used as the video frame.
 * @param {number} initialDelay The initial audio delay offset in milliseconds. Default is 0.
 * @param {string} themeColor A CSS color string for the UI's theme (e.g., '#4CAF50', 'blue'). Default is '#007bff'.
 * @param {number} width The width of the entire UI component in pixels. The height will be calculated based on the image's aspect ratio. Default is 640.
 * @returns {HTMLElement} A DIV element containing the interactive synchronization UI.
 */
function processImage(originalImg, initialDelay = 0, themeColor = '#007bff', width = 640) {
    // --- Main Container ---
    const container = document.createElement('div');
    container.style.width = `${width}px`;
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.backgroundColor = '#1e1e1e';
    container.style.color = '#f0f0f0';
    container.style.borderRadius = '8px';
    container.style.overflow = 'hidden';
    container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.5)';
    container.style.display = 'inline-block';
    container.style.userSelect = 'none';

    // --- Video Display Area ---
    const aspectRatio = originalImg.naturalHeight / originalImg.naturalWidth;
    const height = width * aspectRatio;

    const videoWrapper = document.createElement('div');
    videoWrapper.style.position = 'relative';
    videoWrapper.style.width = '100%';
    videoWrapper.style.height = `${height}px`;
    videoWrapper.style.backgroundColor = '#000';
    videoWrapper.style.display = 'flex';
    videoWrapper.style.justifyContent = 'center';
    videoWrapper.style.alignItems = 'center';

    // Use a canvas to display the image, which is common for video players
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, width, height);
    videoWrapper.appendChild(canvas);

    // Add a fake play icon overlay
    const playIcon = document.createElement('div');
    playIcon.innerHTML = `<svg viewBox="0 0 24 24" width="80" height="80" fill="rgba(255,255,255,0.7)"><path d="M8 5v14l11-7z"></path></svg>`;
    playIcon.style.position = 'absolute';
    playIcon.style.top = '50%';
    playIcon.style.left = '50%';
    playIcon.style.transform = 'translate(-50%, -50%)';
    playIcon.style.cursor = 'pointer';
    playIcon.style.opacity = '0.8';
    playIcon.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
    playIcon.onmouseover = () => {
        playIcon.style.opacity = '1';
        playIcon.style.transform = 'translate(-50%, -50%) scale(1.1)';
    };
    playIcon.onmouseout = () => {
        playIcon.style.opacity = '0.8';
        playIcon.style.transform = 'translate(-50%, -50%) scale(1.0)';
    };
    videoWrapper.appendChild(playIcon);
    container.appendChild(videoWrapper);

    // --- Controls Panel ---
    const controls = document.createElement('div');
    controls.style.padding = '15px';
    controls.style.backgroundColor = '#2a2a2a';
    controls.style.display = 'flex';
    controls.style.flexDirection = 'column';
    controls.style.gap = '15px';

    // --- Delay Control Section ---
    const delaySection = document.createElement('div');
    delaySection.style.display = 'flex';
    delaySection.style.alignItems = 'center';
    delaySection.style.gap = '10px';

    const label = document.createElement('label');
    label.textContent = 'Audio Delay:';
    label.style.whiteSpace = 'nowrap';
    label.style.fontWeight = 'bold';
    label.style.flexShrink = '0';
    delaySection.appendChild(label);

    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = -1000;
    slider.max = 1000;
    slider.value = initialDelay;
    slider.step = 1;
    slider.style.flexGrow = '1';
    slider.style.accentColor = themeColor; // Modern way to style sliders
    delaySection.appendChild(slider);

    const numberInput = document.createElement('input');
    numberInput.type = 'number';
    numberInput.min = -1000;
    numberInput.max = 1000;
    numberInput.value = initialDelay;
    numberInput.style.width = '70px';
    numberInput.style.textAlign = 'right';
    numberInput.style.padding = '5px';
    numberInput.style.backgroundColor = '#3c3c3c';
    numberInput.style.color = '#fff';
    numberInput.style.border = '1px solid #555';
    numberInput.style.borderRadius = '4px';
    delaySection.appendChild(numberInput);

    const unitLabel = document.createElement('span');
    unitLabel.textContent = 'ms';
    unitLabel.style.width = '25px';
    delaySection.appendChild(unitLabel);

    // --- Event Listeners for Syncing Controls ---
    slider.addEventListener('input', () => {
        numberInput.value = slider.value;
    });
    numberInput.addEventListener('input', () => {
        // Clamp the value to the slider's min/max
        let val = parseInt(numberInput.value, 10);
        if (isNaN(val)) val = 0;
        val = Math.max(parseInt(slider.min, 10), Math.min(val, parseInt(slider.max, 10)));
        slider.value = val;
        numberInput.value = val; 
    });

    controls.appendChild(delaySection);

    // --- Button for Action ---
    const applyButton = document.createElement('button');
    applyButton.textContent = 'Apply Synchronization';
    applyButton.style.padding = '10px';
    applyButton.style.border = 'none';
    applyButton.style.borderRadius = '4px';
    applyButton.style.backgroundColor = themeColor;
    applyButton.style.color = 'white';
    applyButton.style.fontWeight = 'bold';
    applyButton.style.cursor = 'pointer';
    applyButton.style.marginTop = '5px';
    applyButton.style.transition = 'background-color 0.2s ease';
    applyButton.onmouseover = () => applyButton.style.backgroundColor = 'rgba(0,0,0,0.2)'; // Simple darken effect
    applyButton.onmouseout = () => applyButton.style.backgroundColor = themeColor;
    applyButton.onclick = () => {
        alert(`Synchronization delay set to ${numberInput.value}ms.\n\n(This is a visual demonstration and does not process actual media files.)`);
    };
    controls.appendChild(applyButton);

    container.appendChild(controls);

    return container;
}