Mp4 To Photo Converter

function processImage(originalImg, frameTime = "0") {
    // Create main container widget
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.gap = '20px';
    container.style.width = '100%';
    container.style.maxWidth = '700px';
    container.style.margin = '20px auto';
    container.style.padding = '30px';
    container.style.backgroundColor = '#ffffff';
    container.style.border = '1px solid #e5e7eb';
    container.style.borderRadius = '16px';
    container.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1)';
    container.style.boxSizing = 'border-box';

    // Header section
    const header = document.createElement('div');
    header.style.textAlign = 'center';
    
    const title = document.createElement('h2');
    title.textContent = 'MP4 to Photo Converter';
    title.style.margin = '0 0 10px 0';
    title.style.color = '#1f2937';
    title.style.fontSize = '24px';
    
    const desc = document.createElement('p');
    desc.textContent = 'Upload an MP4 video, seek to the exact moment you want, and capture a photo frame.';
    desc.style.margin = '0';
    desc.style.color = '#6b7280';
    desc.style.fontSize = '15px';

    header.appendChild(title);
    header.appendChild(desc);
    container.appendChild(header);

    // Video Player component
    const video = document.createElement('video');
    video.controls = true;
    video.style.width = '100%';
    video.style.maxHeight = '400px';
    video.style.backgroundColor = '#000';
    video.style.borderRadius = '10px';
    video.style.display = 'none'; // Hidden until a video is loaded
    video.crossOrigin = "anonymous";

    // Controls component
    const controlsContainer = document.createElement('div');
    controlsContainer.style.display = 'flex';
    controlsContainer.style.flexDirection = 'column';
    controlsContainer.style.alignItems = 'center';
    controlsContainer.style.gap = '15px';
    controlsContainer.style.width = '100%';

    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'video/mp4, video/webm, video/ogg, video/*';
    fileInput.id = 'mp4-file-input';
    fileInput.style.display = 'none';

    const fileBtn = document.createElement('label');
    fileBtn.htmlFor = 'mp4-file-input';
    fileBtn.textContent = 'Choose Video File';
    fileBtn.style.padding = '12px 24px';
    fileBtn.style.backgroundColor = '#3b82f6';
    fileBtn.style.color = '#ffffff';
    fileBtn.style.borderRadius = '8px';
    fileBtn.style.cursor = 'pointer';
    fileBtn.style.fontWeight = '600';
    fileBtn.style.fontSize = '16px';
    fileBtn.style.transition = 'background-color 0.2s';
    
    fileBtn.onmouseover = () => fileBtn.style.backgroundColor = '#2563eb';
    fileBtn.onmouseout = () => fileBtn.style.backgroundColor = '#3b82f6';

    controlsContainer.appendChild(fileBtn);
    controlsContainer.appendChild(fileInput);

    const captureBtn = document.createElement('button');
    captureBtn.textContent = '📸 Capture Current Frame';
    captureBtn.style.padding = '12px 24px';
    captureBtn.style.backgroundColor = '#10b981';
    captureBtn.style.color = '#ffffff';
    captureBtn.style.border = 'none';
    captureBtn.style.borderRadius = '8px';
    captureBtn.style.cursor = 'pointer';
    captureBtn.style.fontWeight = '600';
    captureBtn.style.fontSize = '16px';
    captureBtn.style.display = 'none';
    captureBtn.style.transition = 'background-color 0.2s';
    
    captureBtn.onmouseover = () => captureBtn.style.backgroundColor = '#059669';
    captureBtn.onmouseout = () => captureBtn.style.backgroundColor = '#10b981';

    controlsContainer.appendChild(captureBtn);

    // Canvas/Result rendering section
    const resultContainer = document.createElement('div');
    resultContainer.style.width = '100%';
    resultContainer.style.display = 'flex';
    resultContainer.style.flexDirection = 'column';
    resultContainer.style.alignItems = 'center';
    resultContainer.style.gap = '15px';
    resultContainer.style.marginTop = '10px';
    resultContainer.style.paddingTop = '20px';
    resultContainer.style.borderTop = '1px solid #e5e7eb';
    resultContainer.style.display = 'none'; // Hidden until frame is captured

    const resultTitle = document.createElement('h3');
    resultTitle.textContent = 'Captured Photo';
    resultTitle.style.margin = '0';
    resultTitle.style.color = '#374151';
    resultTitle.style.fontSize = '18px';

    const canvas = document.createElement('canvas');
    canvas.style.maxWidth = '100%';
    canvas.style.maxHeight = '400px';
    canvas.style.borderRadius = '10px';
    canvas.style.border = '1px solid #d1d5db';
    canvas.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';

    const dlBtn = document.createElement('a');
    dlBtn.textContent = '⬇ Download Photo (.png)';
    dlBtn.download = 'captured-frame.png';
    dlBtn.style.padding = '10px 20px';
    dlBtn.style.backgroundColor = '#4f46e5';
    dlBtn.style.color = '#ffffff';
    dlBtn.style.textDecoration = 'none';
    dlBtn.style.borderRadius = '8px';
    dlBtn.style.fontWeight = '600';
    dlBtn.style.fontSize = '15px';
    dlBtn.style.transition = 'background-color 0.2s';
    
    dlBtn.onmouseover = () => dlBtn.style.backgroundColor = '#4338ca';
    dlBtn.onmouseout = () => dlBtn.style.backgroundColor = '#4f46e5';

    resultContainer.appendChild(resultTitle);
    resultContainer.appendChild(canvas);
    resultContainer.appendChild(dlBtn);

    container.appendChild(video);
    container.appendChild(controlsContainer);
    container.appendChild(resultContainer);

    // Interactivity Logic
    function loadVideoSrc(src) {
        video.src = src;
        video.style.display = 'block';
        captureBtn.style.display = 'inline-block';
        
        fileBtn.textContent = 'Change Video';
        fileBtn.style.backgroundColor = '#6b7280';
        fileBtn.style.padding = '8px 16px';
        fileBtn.style.fontSize = '14px';
        
        fileBtn.onmouseover = () => fileBtn.style.backgroundColor = '#4b5563';
        fileBtn.onmouseout = () => fileBtn.style.backgroundColor = '#6b7280';

        const seekTime = parseFloat(frameTime);
        if (!isNaN(seekTime) && seekTime > 0) {
            video.addEventListener('loadedmetadata', function onLoaded() {
                video.currentTime = seekTime;
                video.removeEventListener('loadedmetadata', onLoaded);
            });
        }
    }

    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            if (video.src && video.src.startsWith('blob:')) {
                URL.revokeObjectURL(video.src);
            }
            const fileURL = URL.createObjectURL(file);
            loadVideoSrc(fileURL);
            resultContainer.style.display = 'none';
        }
    });

    captureBtn.addEventListener('click', () => {
        // readyState 2 corresponds to HAVE_CURRENT_DATA
        if (video.readyState < 2) {
            alert('Please wait for the video to load before capturing.');
            return;
        }
        
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const ctx = canvas.getContext('2d');
        
        try {
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            dlBtn.href = canvas.toDataURL('image/png');
            resultContainer.style.display = 'flex';
            // Smoothly scroll down to showcase the resulting photo
            resultContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        } catch (err) {
            alert('Error capturing frame. Sometimes this happens with external URLs due to CORS security restrictions.');
        }
    });

    // Check if the provided originalImg source points to a video
    if (originalImg && typeof originalImg.src === 'string') {
        const src = originalImg.src.toLowerCase();
        if (src.endsWith('.mp4') || src.endsWith('.webm') || src.startsWith('data:video') || src.startsWith('blob:')) {
            loadVideoSrc(originalImg.src);
        }
    }

    return container;
}