RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>EDITOR PRO COMPLETO - TODO FIX</title>
<style>
    body { background:#111; color:#fff; font-family:Arial; margin:10px; }
    #top { display:flex; gap:10px; }
    #player { display:flex; justify-content:center; align-items:center; background:black; }
    #monitor { background:black; border:1px solid #333; padding:5px; line-height: 0; }
    canvas { width:260px; height:150px; background:black; display: block; }
    #player:fullscreen { width:100vw; height:100vh; }
    #player:fullscreen canvas { width: auto !important; height: 100vh !important; max-width: 100vw; object-fit: contain; }
    #timeline { display:flex; gap:6px; flex-wrap:wrap; max-width:500px; margin-top: 10px; }
    .clip { width:90px; height:55px; background:#222; position:relative; cursor:pointer; border:1px solid #333; overflow: hidden; }
    .clip.active { outline:2px solid #00ffcc; }
    .clip img { width:100%; height:100%; object-fit:cover; display: block; }
    .clip button { position:absolute; top:2px; right:2px; background:#900; border:none; color:white; font-size:10px; cursor:pointer; z-index: 10; }
    button { background:#111; color:white; border:1px solid #444; padding:6px; margin-top:10px; cursor: pointer; }
    #renderBtn { background: #28a745; border: none; font-weight: bold; }
    .effect-controls { display:none; margin-top:10px; background: #1a1a1a; padding: 10px; border-radius: 4px; }
    .effect-btn.active { background:#007bff; }
</style>
</head>
<body>

<div id="top">
    <div>
        <div id="player">
            <div id="monitor"><canvas id="canvas"></canvas></div>
        </div>
        <button id="fullscreen">PANTALLA GRANDE</button>
    </div>
    <div id="timeline"></div>
</div>

<button id="play">PLAY</button>
<button id="stop">STOP</button>
<button id="renderBtn">RENDERIZAR</button>
<input type="file" id="file" multiple>

<div>
    <button class="effect-btn" data-effect="transform">AJUSTE</button>
    <button class="effect-btn" data-effect="contrast">CONTRASTE</button>
    <button class="effect-btn" data-effect="fade">FADE</button>
    <button class="effect-btn" data-effect="trim">RECORTE</button>
</div>

<div id="contrast" class="effect-controls">
    Contraste <input type="range" id="contrastVal" min="0" max="200" value="100">
    <span id="contrastLabel">100%</span>
</div>

<div id="trim" class="effect-controls">
    Inicio <input type="number" id="trimStart" step="0.1">
    Fin <input type="number" id="trimEnd" step="0.1">
</div>

function initAudio() {
    if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        destination = audioCtx.createMediaStreamDestination();
    }
}

fullscreen.onclick = () => { if(!document.fullscreenElement) player.requestFullscreen(); else document.exitFullscreen(); };

file.onchange = async e => {
    initAudio();
    for(let f of e.target.files){
        let type = f.type.startsWith("image/") ? "img" : "video";
        let el = document.createElement(type);
        let url = URL.createObjectURL(f);
        el.src = url;
        el.crossOrigin = "anonymous";

if(type === "video"){
            await new Promise(r => el.onloadedmetadata = r);
            const source = audioCtx.createMediaElementSource(el);
            source.connect(audioCtx.destination);
            source.connect(destination);
            if(clips.length === 0){ canvas.width = el.videoWidth; canvas.height = el.videoHeight; }
            const thumb = await createThumb(url);
            clips.push({el, type, duration:el.duration, thumb, trimStart:0, trimEnd:el.duration, contrast:100, zoom:1, posX:0, posY:0});
        } else {
            await new Promise(r => el.onload = r);
            if(clips.length === 0){ canvas.width = el.width; canvas.height = el.height; }
            clips.push({el, type, duration:3, thumb: url, contrast:100, zoom:1, posX:0, posY:0});
        }
    }
    renderTimeline();
};

async function createThumb(url) {
    return new Promise(res => {
        const v = document.createElement("video");
        v.src = url; v.muted = true; v.currentTime = 0.5;
        v.onseeked = () => {
            const c = document.createElement("canvas");
            c.width = 180; c.height = 110;
            c.getContext("2d").drawImage(v, 0, 0, 180, 110);
            res(c.toDataURL());
        };
        v.onerror = () => res("");
    });
}

function loadUI(){
    let c=clips[currentIndex]; if(!c) return;
    contrastVal.value=c.contrast; contrastLabel.innerText=c.contrast+"%";
    zoom.value=c.zoom; posX.value=c.posX; posY.value=c.posY;
    fadeIn.value=c.fadeIn||0; fadeOut.value=c.fadeOut||0;
    trimStart.value=c.trimStart||0; trimEnd.value=c.trimEnd||c.duration;
}

function draw(){
    ctx.filter = "none"; ctx.globalAlpha = 1;
    ctx.fillStyle="black"; ctx.fillRect(0,0,canvas.width,canvas.height);
    let c=clips[currentIndex]; if(!c) return;
    let rawTime = c.type==="video" ? c.el.currentTime : (performance.now()-imgStart)/1000;
    let start=c.trimStart||0; let end=c.trimEnd||c.duration;
    let t=rawTime-start; let duration=end-start;
    ctx.filter=`contrast(${c.contrast}%)`;
    let alpha=1;
    if(c.fadeIn && t<c.fadeIn) alpha=t/c.fadeIn;
    if(c.fadeOut && t>duration-c.fadeOut) alpha=(duration-t)/c.fadeOut;
    ctx.globalAlpha=Math.max(0,Math.min(1,alpha));
    let iw=c.el.videoWidth||c.el.width; let ih=c.el.videoHeight||c.el.height;
    let scale=Math.min(canvas.width/iw, canvas.height/ih) * c.zoom;
    let nw=iw*scale; let nh=ih*scale;
    ctx.drawImage(c.el, (canvas.width-nw)/2+c.posX, (canvas.height-nh)/2+c.posY, nw, nh);
}

play.onclick=()=>{ if(!clips.length) return; initAudio(); stop(); playing=true; currentIndex=0; cambiarClip(); };
function stop(){ playing=false; if(raf) cancelAnimationFrame(raf); clips.forEach(c=>c.el.pause && c.el.pause()); }
stop.onclick=stop;

renderBtn.onclick=async ()=>{
    initAudio(); stop();
    const stream = canvas.captureStream(30);
    const combined = new MediaStream([...stream.getVideoTracks(), ...destination.stream.getAudioTracks()]);
    const rec = new MediaRecorder(combined, { mimeType: 'video/webm;codecs=vp8,opus', videoBitsPerSecond: 20000000 });
    let chunks=[];
    rec.ondataavailable=e=>chunks.push(e.data);
    rec.onstop=()=>{
        let a=document.createElement("a");
        a.href=URL.createObjectURL(new Blob(chunks, {type:'video/webm'}));
        a.download="video_final.webm"; a.click();
    };
    rec.start(); playing=true; currentIndex=0; cambiarClip();
    let total=clips.reduce((acc,c)=> acc + ((c.trimEnd||c.duration)-(c.trimStart||0)), 0);
    setTimeout(()=>{ rec.stop(); stop(); }, total*1000 + 800);
};

/* SYNC DATOS Y UI */
setInterval(()=>{
    let c=clips[currentIndex]; if(!c) return;
    c.contrast=parseInt(contrastVal.value);
    contrastLabel.innerText = c.contrast + "%"; // ESTO FALTABA
    c.zoom=parseFloat(zoom.value); c.posX=parseFloat(posX.value); c.posY=parseFloat(posY.value);
    c.fadeIn=parseFloat(fadeIn.value); c.fadeOut=parseFloat(fadeOut.value);
    c.trimStart=parseFloat(trimStart.value); c.trimEnd=parseFloat(trimEnd.value);
    if(!playing) draw();
},100);

document.querySelectorAll(".effect-btn").forEach(btn=>{
    btn.onclick=()=>{
        document.querySelectorAll(".effect-btn").forEach(b=>b.classList.remove("active"));
        btn.classList.add("active");
        document.querySelectorAll(".effect-controls").forEach(c=>c.style.display="none");
        document.getElementById(btn.dataset.effect).style.display="block";
    };
});
</script>
</body>
</html>