Music And Video Movies Photo Viewer

function processImage(originalImg, title = "Music & Video Movie", primaryColor = "#ff0055", timestamp = "01:23", duration = "04:56") {
    // Determine dimensions to enforce a cinematic 16:9 aspect ratio standard for movies/video
    const w = 800;
    const h = 450;
    
    // Create canvas
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // 1. Draw out-of-focus background for a modern media viewer look
    if (typeof ctx.filter !== "undefined") {
        ctx.filter = "blur(20px)";
    }
    // Draw slightly scaled up to hide sharp blurry edges
    ctx.drawImage(originalImg, -20, -20, w + 40, h + 40);
    ctx.filter = "none";

    // Semi-transparent overlay to contrast with the main image
    ctx.fillStyle = "rgba(0, 0, 0, 0.65)";
    ctx.fillRect(0, 0, w, h);

    // 2. Calculate "contain" bounds to ensure the full photo is visible (letterbox/pillarbox)
    const imgRatio = originalImg.width / originalImg.height;
    const targetRatio = w / h;
    let rw = w, rh = h, rx = 0, ry = 0;

    if (imgRatio > targetRatio) {
        // Image is wider than 16:9
        rh = w / imgRatio;
        ry = (h - rh) / 2;
    } else {
        // Image is taller than 16:9
        rw = h * imgRatio;
        rx = (w - rw) / 2;
    }

    // 3. Draw the crisp original image perfectly framed
    // Optional: Add shadow to the framed image
    ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
    ctx.shadowBlur = 15;
    ctx.drawImage(originalImg, rx, ry, rw, rh);
    
    // Reset shadow
    ctx.shadowColor = "transparent";
    ctx.shadowBlur = 0;

    // 4. Draw Video Player Overlays

    // Top Gradient for title readability
    let topGrad = ctx.createLinearGradient(0, 0, 0, h * 0.25);
    topGrad.addColorStop(0, 'rgba(0, 0, 0, 0.9)');
    topGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
    ctx.fillStyle = topGrad;
    ctx.fillRect(0, 0, w, h * 0.25);

    // Bottom Gradient for controls readability
    let botGrad = ctx.createLinearGradient(0, h * 0.6, 0, h);
    botGrad.addColorStop(0, 'rgba(0, 0, 0, 0)');
    botGrad.addColorStop(1, 'rgba(0, 0, 0, 0.9)');
    ctx.fillStyle = botGrad;
    ctx.fillRect(0, h * 0.6, w, h * 0.4);

    // Top Header / Movie Title
    ctx.fillStyle = "#ffffff";
    ctx.font = "bold 20px 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    ctx.textAlign = "left";
    ctx.fillText("🍿 " + title, 20, 35);

    // Mini Audio Visualizer (Music Aspect)
    const eqX = w - 30;
    const eqY = 35;
    ctx.fillStyle = primaryColor;
    // Draw fake equalizer bars
    const barHeights = [-10, -18, -12, -8, -16];
    for (let i = 0; i < barHeights.length; i++) {
        ctx.fillRect(eqX - (barHeights.length - i) * 6, eqY, 4, barHeights[i]);
    }
    
    ctx.font = "14px 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    ctx.textAlign = "right";
    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
    ctx.fillText("HQ Audio & Video", eqX - 35, 32);

    // 5. Center Play Button
    // Outer Circle Blur / Background
    ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
    ctx.beginPath();
    ctx.arc(w / 2, h / 2, 45, 0, Math.PI * 2);
    ctx.fill();
    
    // Animated-looking ring
    ctx.lineWidth = 3;
    ctx.strokeStyle = primaryColor;
    ctx.stroke();

    // Play Triangle
    ctx.fillStyle = "#ffffff";
    ctx.beginPath();
    ctx.moveTo(w / 2 - 10, h / 2 - 18);
    ctx.lineTo(w / 2 + 18, h / 2);
    ctx.lineTo(w / 2 - 10, h / 2 + 18);
    ctx.fill();

    // 6. Bottom Media Controls
    const barY = h - 30;
    const progressX = 20;
    const progressW = w - 40;

    // Progress line background
    ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
    ctx.fillRect(progressX, barY, progressW, 5);

    // Parse timestamp to figure out percentage (defaults to 30% if parsing fails)
    let pct = 0.3;
    try {
        const parseTime = (t) => {
            let parts = String(t).split(':').map(Number);
            if (parts.length === 2) return parts[0] * 60 + parts[1];
            if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2];
            return 0;
        };
        let ts = parseTime(timestamp);
        let ds = parseTime(duration);
        if (ds > 0 && ts <= ds) {
            pct = ts / ds;
        }
    } catch(e) {}

    // Active progress line
    ctx.fillStyle = primaryColor;
    ctx.fillRect(progressX, barY, progressW * pct, 5);

    // Scrubber Knob
    ctx.beginPath();
    ctx.arc(progressX + progressW * pct, barY + 2.5, 7, 0, Math.PI * 2);
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#ffffff";
    ctx.stroke();

    // Time text labels
    ctx.font = "14px monospace";
    ctx.textAlign = "left";
    ctx.fillStyle = "#ffffff";
    ctx.fillText(timestamp, progressX, barY - 12);

    ctx.textAlign = "right";
    ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
    ctx.fillText(duration, progressX + progressW, barY - 12);

    // Subtitle / Tool branding
    ctx.textAlign = "center";
    ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
    ctx.font = "11px 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    ctx.letterSpacing = "2px";
    ctx.fillText("MUSIC AND VIDEO MOVIES PHOTO VIEWER", w / 2, h - 8);

    return canvas;
}