Convert PNG To MP4 Video For Webpage VPN

async function processImage(originalImg, durationSeconds = 3, addZoomEffect = 'true') {
    return new Promise((resolve) => {
        const duration = Number(durationSeconds) || 3;
        const doZoom = String(addZoomEffect).toLowerCase() === 'true';
        
        // Container for our UI
        const container = document.createElement('div');
        container.style.display = 'flex';
        container.style.flexDirection = 'column';
        container.style.alignItems = 'center';
        container.style.gap = '15px';
        container.style.fontFamily = 'Arial, sans-serif';
        container.style.width = '100%';
        container.style.padding = '20px';
        container.style.boxSizing = 'border-box';
        
        const msg = document.createElement('div');
        msg.textContent = 'Generating video, please wait...';
        msg.style.fontWeight = 'bold';
        msg.style.color = '#333';
        container.appendChild(msg);

        if (!window.MediaRecorder) {
            msg.textContent = 'Error: MediaRecorder API is not supported in this browser.';
            msg.style.color = 'red';
            return resolve(container);
        }

        // Create canvas for rendering
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.width;
        canvas.height = originalImg.height;
        const ctx = canvas.getContext('2d');
        
        // Draw initial state
        ctx.drawImage(originalImg, 0, 0);

        // MediaRecorder setup (Native web approach)
        const fps = 30;
        const stream = canvas.captureStream(fps);
        
        // Browsers like Safari natively support video/mp4. Chrome prefers WebM. 
        // We prioritize mp4 as requested, falling back incrementally.
        let mimeType = 'video/mp4';
        if (!MediaRecorder.isTypeSupported(mimeType)) {
            mimeType = 'video/webm; codecs=vp9';
        }
        if (!MediaRecorder.isTypeSupported(mimeType)) {
            mimeType = 'video/webm';
        }
        
        let recorder;
        try {
            recorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 2500000 });
        } catch (err) {
            recorder = new MediaRecorder(stream);
            mimeType = recorder.mimeType || 'video/webm';
        }

        const chunks = [];
        recorder.ondataavailable = e => {
            if (e.data && e.data.size > 0) {
                chunks.push(e.data);
            }
        };

        recorder.onstop = () => {
            const blob = new Blob(chunks, { type: mimeType });
            const videoUrl = URL.createObjectURL(blob);
            
            const video = document.createElement('video');
            video.src = videoUrl;
            video.controls = true;
            video.autoplay = true;
            video.loop = true;
            video.muted = true; // Required for reliable autoplay
            video.playsInline = true;
            video.style.maxWidth = '100%';
            video.style.maxHeight = '600px';
            video.style.border = '2px solid #ddd';
            video.style.borderRadius = '8px';
            video.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';
            
            const downloadLink = document.createElement('a');
            downloadLink.href = videoUrl;
            
            // Set correct extension based on browser support
            const ext = mimeType.includes('mp4') ? 'mp4' : 'webm';
            downloadLink.download = `converted-video.${ext}`;
            downloadLink.textContent = `Download Video (.${ext})`;
            downloadLink.style.padding = '12px 24px';
            downloadLink.style.background = '#007bff';
            downloadLink.style.color = '#fff';
            downloadLink.style.textDecoration = 'none';
            downloadLink.style.borderRadius = '6px';
            downloadLink.style.fontWeight = 'bold';
            downloadLink.style.cursor = 'pointer';
            downloadLink.style.transition = 'background 0.3s ease';
            downloadLink.onmouseover = () => downloadLink.style.background = '#0056b3';
            downloadLink.onmouseout = () => downloadLink.style.background = '#007bff';

            msg.textContent = mimeType.includes('mp4') ? 
                'MP4 Video generated successfully!' : 
                'Video generated! (Note: Saved as WebM. Your browser lacks native MP4 recording support. Safari recommended for MP4).';
            msg.style.color = 'green';
            
            container.appendChild(video);
            container.appendChild(downloadLink);
        };

        recorder.start();

        // Drawing loop simulating video playback (Static image or zooming)
        const totalFrames = duration * fps;
        let frameCount = 0;
        const intervalTime = 1000 / fps;

        const drawLoop = setInterval(() => {
            frameCount++;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            if (doZoom) {
                // Gentle infinite zoom effect to make it an active "video" rather than a purely static frame
                const scale = 1.0 + (0.1 * (frameCount / totalFrames));
                const w = originalImg.width * scale;
                const h = originalImg.height * scale;
                const x = (originalImg.width - w) / 2;
                const y = (originalImg.height - h) / 2;
                ctx.drawImage(originalImg, x, y, w, h);
            } else {
                ctx.drawImage(originalImg, 0, 0);
            }

            if (frameCount >= totalFrames) {
                clearInterval(drawLoop);
                recorder.stop();
                // Release the stream's tracks
                stream.getTracks().forEach(track => track.stop());
            }
        }, intervalTime);
        
        // Return immediately so loading message renders while processing runs in background
        resolve(container);
    });
}