<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Mixer</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body class="fullscreen-decks">
    <!-- Compact Toolbar -->
    <div id="toolbar">
        <span class="logo">VIDEO MIXER <span class="version-tag">v1.1</span></span>
        <div id="toolbar-controls">
            <button id="popout-btn" title="Open Output Window (drag to second monitor)">&#x2750; Output Window</button>
            <span id="output-status" class="output-disconnected">Output: --</span>
            <label>Res:
                <select id="output-resolution">
                    <option value="1280x720">720p</option>
                    <option value="1920x1080" selected>1080p</option>
                </select>
            </label>
            <button id="fullscreen-btn" title="Fullscreen Mixer (F)">&#x26F6;</button>
            <button id="save-session-btn" title="Save Session">&#x1F4BE; Save</button>
            <button id="load-session-btn" title="Load Session">&#x1F4C2; Load</button>
            <button id="shortcuts-btn" title="Keyboard Shortcuts">?</button>
        </div>
    </div>

    <!-- Hidden master canvas (renders mix for BroadcastChannel sync) -->
    <canvas id="master-output" style="display:none;"></canvas>

    <!-- Decks Row — fills remaining screen -->
    <div id="decks-row">
        <!-- Deck A -->
        <div class="deck" id="deck-a">
            <div class="drop-overlay hidden" data-deck="a">Drop files or folders here</div>
            <div class="deck-header">
                <span class="deck-label">DECK A</span>
                <span class="deck-now-playing" id="deck-a-now-playing">No media loaded</span>
                <span class="deck-error hidden" id="deck-a-error" title="Media load error">&#x26A0;</span>
            </div>
            <div class="deck-preview-wrap" data-deck="a">
                <canvas class="deck-preview" id="deck-a-preview"></canvas>
                <video id="deck-a-video" muted playsinline preload="auto"></video>
                <!-- VU Meter -->
                <div class="vu-meter" id="vu-meter-a">
                    <div class="vu-bar"><div class="vu-fill" id="vu-fill-a"></div></div>
                </div>
            </div>
            <div class="deck-transport">
                <button class="transport-btn" data-deck="a" data-action="prev" title="Previous">&#x23EE;</button>
                <button class="transport-btn play-btn" data-deck="a" data-action="play" title="Play/Pause">&#x25B6;</button>
                <button class="transport-btn" data-deck="a" data-action="next" title="Next">&#x23ED;</button>
                <button class="transport-btn" data-deck="a" data-action="loop" title="Loop">&#x1F501;</button>
                <button class="transport-btn" data-deck="a" data-action="shuffle" title="Shuffle">&#x1F500;</button>
            </div>
            <div class="deck-sliders">
                <label>Vol <input type="range" min="0" max="100" value="100" class="vol-slider" data-deck="a"> <span class="vol-val" data-deck="a">100</span></label>
                <label>Speed <input type="range" min="25" max="200" value="100" class="speed-slider" data-deck="a"> <span class="speed-val" data-deck="a">1.0x</span></label>
                <label title="Image auto-advance (slideshow). 0 = OFF, image stays on screen.">Slide <input type="range" min="0" max="30" value="0" class="slide-dur-slider" data-deck="a"> <span class="slide-dur-val" data-deck="a">OFF</span></label>
            </div>
            <div class="deck-progress-wrap">
                <input type="range" min="0" max="1000" value="0" class="progress-slider" data-deck="a">
                <span class="time-display" data-deck="a">0:00 / 0:00</span>
            </div>
            <!-- Per-Deck FX -->
            <div class="deck-fx collapsed" id="deck-a-fx">
                <button class="deck-fx-toggle" data-deck="a">FX &#x25BC;</button>
                <div class="deck-fx-controls hidden" data-deck="a">
                    <label>Bright <input type="range" min="50" max="200" value="100" class="dfx-slider" data-deck="a" data-fx="brightness"></label>
                    <label>Contrast <input type="range" min="50" max="200" value="100" class="dfx-slider" data-deck="a" data-fx="contrast"></label>
                    <label>Saturate <input type="range" min="0" max="200" value="100" class="dfx-slider" data-deck="a" data-fx="saturate"></label>
                    <label>Hue <input type="range" min="0" max="360" value="0" class="dfx-slider" data-deck="a" data-fx="hue"></label>
                    <button class="deck-fx-reset" data-deck="a">Reset</button>
                </div>
            </div>
            <div class="file-browser" id="browser-a">
                <div class="browser-nav">
                    <button class="nav-btn" data-deck="a" data-nav="up">&#x2191; Up</button>
                    <button class="nav-btn" data-deck="a" data-nav="home">&#x2302; Home</button>
                    <input type="text" class="path-input" data-deck="a" placeholder="Enter folder path...">
                    <button class="nav-btn" data-deck="a" data-nav="go">Go</button>
                </div>
                <div class="browser-path" data-deck="a"></div>
                <ul class="file-list" data-deck="a"></ul>
                <div class="browser-actions">
                    <button class="load-folder-btn" data-deck="a">Load All to Deck A</button>
                </div>
            </div>
        </div>

        <!-- Center / Crossfader -->
        <div id="center-panel">
            <div id="crossfader-section">
                <span class="cf-label">A</span>
                <input type="range" id="crossfader" min="0" max="1000" value="500">
                <span class="cf-label">B</span>
            </div>

            <!-- Mini output preview -->
            <div id="mini-preview-wrap">
                <canvas id="mini-preview"></canvas>
                <span class="mini-label">MIX PREVIEW</span>
            </div>

            <!-- Transition Picker -->
            <div id="transition-section">
                <span class="section-title">TRANSITION</span>
                <div id="transition-picker">
                    <!-- Populated by JS -->
                </div>
                <div id="transition-current">
                    <span id="transition-current-name">Crossfade</span>
                </div>
            </div>

            <div id="auto-mix-section">
                <button id="auto-mix-btn">Auto Mix</button>
                <label>Duration:
                    <input type="range" id="auto-mix-duration" min="500" max="10000" value="2000" step="100">
                    <span id="auto-mix-dur-val">2.0s</span>
                </label>
            </div>

            <div id="autopilot-section">
                <span class="section-title">AUTOPILOT</span>
                <button id="autopilot-btn">Autopilot</button>
                <label>Hold: <input type="range" id="autopilot-hold" min="3" max="30" value="8"> <span id="autopilot-hold-val">8s</span></label>
                <label>Fade: <input type="range" id="autopilot-trans" min="1" max="8" value="3" step="0.5"> <span id="autopilot-trans-val">3s</span></label>
            </div>

            <!-- BPM / Beat Sync -->
            <div id="bpm-section">
                <span class="section-title">BEAT SYNC</span>
                <div id="bpm-display">-- BPM</div>
                <button id="tap-tempo-btn">TAP</button>
                <button id="beat-sync-btn">Sync to Beat</button>
            </div>

            <div id="fx-section">
                <span class="section-title">MASTER FX</span>
                <label>Bright <input type="range" id="fx-brightness" min="50" max="200" value="100"></label>
                <label>Contrast <input type="range" id="fx-contrast" min="50" max="200" value="100"></label>
                <label>Saturate <input type="range" id="fx-saturate" min="0" max="200" value="100"></label>
                <label>Hue <input type="range" id="fx-hue" min="0" max="360" value="0"></label>
                <button id="fx-reset">Reset FX</button>
            </div>

            <div id="custom-transitions-section">
                <span class="section-title">CUSTOM FX</span>
                <button id="load-custom-btn">Reload Custom</button>
                <div id="custom-list"></div>
            </div>
        </div>

        <!-- Deck B -->
        <div class="deck" id="deck-b">
            <div class="drop-overlay hidden" data-deck="b">Drop files or folders here</div>
            <div class="deck-header">
                <span class="deck-label">DECK B</span>
                <span class="deck-now-playing" id="deck-b-now-playing">No media loaded</span>
                <span class="deck-error hidden" id="deck-b-error" title="Media load error">&#x26A0;</span>
            </div>
            <div class="deck-preview-wrap" data-deck="b">
                <canvas class="deck-preview" id="deck-b-preview"></canvas>
                <video id="deck-b-video" muted playsinline preload="auto"></video>
                <!-- VU Meter -->
                <div class="vu-meter" id="vu-meter-b">
                    <div class="vu-bar"><div class="vu-fill" id="vu-fill-b"></div></div>
                </div>
            </div>
            <div class="deck-transport">
                <button class="transport-btn" data-deck="b" data-action="prev" title="Previous">&#x23EE;</button>
                <button class="transport-btn play-btn" data-deck="b" data-action="play" title="Play/Pause">&#x25B6;</button>
                <button class="transport-btn" data-deck="b" data-action="next" title="Next">&#x23ED;</button>
                <button class="transport-btn" data-deck="b" data-action="loop" title="Loop">&#x1F501;</button>
                <button class="transport-btn" data-deck="b" data-action="shuffle" title="Shuffle">&#x1F500;</button>
            </div>
            <div class="deck-sliders">
                <label>Vol <input type="range" min="0" max="100" value="100" class="vol-slider" data-deck="b"> <span class="vol-val" data-deck="b">100</span></label>
                <label>Speed <input type="range" min="25" max="200" value="100" class="speed-slider" data-deck="b"> <span class="speed-val" data-deck="b">1.0x</span></label>
                <label title="Image auto-advance (slideshow). 0 = OFF, image stays on screen.">Slide <input type="range" min="0" max="30" value="0" class="slide-dur-slider" data-deck="b"> <span class="slide-dur-val" data-deck="b">OFF</span></label>
            </div>
            <div class="deck-progress-wrap">
                <input type="range" min="0" max="1000" value="0" class="progress-slider" data-deck="b">
                <span class="time-display" data-deck="b">0:00 / 0:00</span>
            </div>
            <!-- Per-Deck FX -->
            <div class="deck-fx collapsed" id="deck-b-fx">
                <button class="deck-fx-toggle" data-deck="b">FX &#x25BC;</button>
                <div class="deck-fx-controls hidden" data-deck="b">
                    <label>Bright <input type="range" min="50" max="200" value="100" class="dfx-slider" data-deck="b" data-fx="brightness"></label>
                    <label>Contrast <input type="range" min="50" max="200" value="100" class="dfx-slider" data-deck="b" data-fx="contrast"></label>
                    <label>Saturate <input type="range" min="0" max="200" value="100" class="dfx-slider" data-deck="b" data-fx="saturate"></label>
                    <label>Hue <input type="range" min="0" max="360" value="0" class="dfx-slider" data-deck="b" data-fx="hue"></label>
                    <button class="deck-fx-reset" data-deck="b">Reset</button>
                </div>
            </div>
            <div class="file-browser" id="browser-b">
                <div class="browser-nav">
                    <button class="nav-btn" data-deck="b" data-nav="up">&#x2191; Up</button>
                    <button class="nav-btn" data-deck="b" data-nav="home">&#x2302; Home</button>
                    <input type="text" class="path-input" data-deck="b" placeholder="Enter folder path...">
                    <button class="nav-btn" data-deck="b" data-nav="go">Go</button>
                </div>
                <div class="browser-path" data-deck="b"></div>
                <ul class="file-list" data-deck="b"></ul>
                <div class="browser-actions">
                    <button class="load-folder-btn" data-deck="b">Load All to Deck B</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Keyboard Shortcuts Overlay -->
    <div id="shortcuts-overlay" class="hidden">
        <div id="shortcuts-box">
            <h3>Keyboard Shortcuts</h3>
            <table>
                <tr><td><kbd>Q</kbd></td><td>Play/Pause Deck A</td></tr>
                <tr><td><kbd>W</kbd></td><td>Play/Pause Deck B</td></tr>
                <tr><td><kbd>A</kbd> / <kbd>S</kbd></td><td>Prev / Next on Deck A</td></tr>
                <tr><td><kbd>K</kbd> / <kbd>L</kbd></td><td>Prev / Next on Deck B</td></tr>
                <tr><td><kbd>&larr;</kbd> / <kbd>&rarr;</kbd></td><td>Move Crossfader</td></tr>
                <tr><td><kbd>Space</kbd></td><td>Auto Mix</td></tr>
                <tr><td><kbd>P</kbd></td><td>Toggle Autopilot</td></tr>
                <tr><td><kbd>O</kbd></td><td>Open Output Window</td></tr>
                <tr><td><kbd>F</kbd></td><td>Toggle Fullscreen</td></tr>
                <tr><td><kbd>T</kbd></td><td>Tap Tempo</td></tr>
                <tr><td><kbd>1</kbd> / <kbd>2</kbd></td><td>Vol Down Deck A / B</td></tr>
                <tr><td><kbd>3</kbd> / <kbd>4</kbd></td><td>Vol Up Deck A / B</td></tr>
                <tr><td><kbd>Ctrl+S</kbd></td><td>Save Session</td></tr>
                <tr><td><kbd>?</kbd></td><td>Toggle Shortcuts</td></tr>
            </table>
            <button id="close-shortcuts">Close</button>
        </div>
    </div>

    <script src="/static/js/transitions.js"></script>
    <script src="/static/js/mixer.js"></script>
</body>
</html>
