<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ffmpeg4discord's Web UI</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
    <div class="container">
        <div class="row mt-3">
            <div class="alert alert-light" role="alert" {{ "hidden" if alert_hidden else "" }}>
                <p>{{ twopass.message }}</p>
                <span class="text-danger">The server is still running. Do not forget to terminate it.</span>
            </div>
        </div>        
        <div class="row mt-3">
            <video id="myVideo" preload="auto" controls>
                <source src="{{ file_url }}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <p class="text-muted"><em>Drag the video playhead, and use the buttons below to set the Start and End times.</em></p> 
        </div>
        <form id="encodeForm" action="/encode" method="post">
            <div class="row mb-3">
                <div class="col">
                    <button type="button" class="btn btn-outline-primary" onclick="setTime('start')"><span class="bi-skip-start-fill"></span> Set Start Time</button>
                </div>
                <div class="col">
                    <button type="button" class="btn btn-outline-primary" onclick="setTime('end')">Set End Time <span class="bi-skip-end-fill"></span></button>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col">
                    <label for="startTime" class="form-label padding-top">Start Time:</label>
                    <input class="form-range" type="range" name="startTime" id="startTime" min="0" step="1" max="0">
                    <span id="startTimeLabel">{{ twopass.from_seconds|string + " seconds" if twopass.from_seconds else "0 seconds" }}</span>
                </div>
                <div class="col">
                    <label for="endTime" class="form-label">End Time:</label>
                    <input class="form-range" type="range" name="endTime" id="endTime" min="0" step="1" max="0">
                    <span id="endTimeLabel">{{ twopass.to_seconds|string + " seconds" if twopass.to_seconds else twopass.duration|string + " seconds" }}</span>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <button type="button" class="btn btn-outline-primary" onclick="selectVideoPart()"><span class="bi-play"></span> Preview Selection</button>
                </div>
            </div>
            <hr />
            <h3>Output Parameters</h3>
            <div class="row mb-3 row-cols-5">
                <div class="col">
                    <label for="resolution" class="form-label">Resolution</label>
                    <input class="form-control" name="resolution" id="resolution" type="text" value="{{ twopass.resolution }}" />
                </div>
                <div class="col">
                    <label for="target_filesize" class="form-label"><span id="targetApprox">{{ "Approximate" if approx else "Target" }}</span> File Size (MB)</label>
                    <input class="form-control mb-2" name="target_filesize" id="target_filesize" type="text" value="{{ twopass.target_filesize }}" />
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="approx" value="True" name="approx" id="approx" {{ "checked" if approx else "" }}>
                        <label class="form-check-label" for="approx">Approximate file size</label>
                    </div>
                </div>
                <div class="col">
                    <label for="audio_br" class="form-label">Audio Bitrate (kbps)</label>
                    <input class="form-control" name="audio_br" id="audio_br" type="text" value="{{ twopass.audio_br/1000 }}" />
                </div>
                <div class="col">
                    <label for="crop" class="form-label">Crop</label>
                    <input class="form-control" name="crop" id="crop" type="text" value="{{ twopass.crop }}" />
                </div>
                <div class="col">
                    <label for="output" class="form-label">Output Folder/File</label>
                    <input class="form-control" name="output" id="output" type="text" value="{{ twopass.output }}" />
                </div>
                <div class="col">
                    <label for="framerate" class="form-label">Frame Rate</label>
                    <input class="form-control" name="framerate" id="framerate" type="text" value="{{ twopass.framerate if twopass.framerate else '' }}" />
                </div>
                <div class="col">
                    <label for="codec" class="form-label">Video Codec</label>
                    <select name="codec" id="codec" class="form-select">
                        <option {{ "selected" if twopass.codec == "libx264" else "" }} value="libx264">MP4 / libx264</option>
                        <option {{ "selected" if twopass.codec == "libvpx-vp9" else "" }} value="libvpx-vp9">WEBM / libvpx-vp9</option>
                    </select>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col">
                    <button id="spinButton" onclick="startSpin()" class="submission btn btn-primary btn-lg" type="submit">
                        <span class="bi-film"></span> Encode
                    </button>
                    <span id="spinIcon" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
                </div>
            </div>
        </form>
    </div>
    <script>
        const video = document.getElementById('myVideo');
        const startTimeInput = document.getElementById('startTime');
        const endTimeInput = document.getElementById('endTime');
        const startTimeLabel = document.getElementById('startTimeLabel');
        const endTimeLabel = document.getElementById('endTimeLabel');

        video.addEventListener('loadedmetadata', () => {
            // Set the maximum value of the input elements to the video duration
            startTimeInput.max = video.duration;
            endTimeInput.max = video.duration;
            startTimeInput.value = "{{ twopass.from_seconds if twopass.from_seconds else 0 }}"
            endTimeInput.value = "{{ twopass.to_seconds if twopass.to_seconds else twopass.duration }}"
        });

        startTimeInput.addEventListener('input', updateStartTimeLabel);
        endTimeInput.addEventListener('input', updateEndTimeLabel);

        function updateStartTimeLabel() {
            startTimeLabel.textContent = startTimeInput.value + ' seconds';
        }

        function updateEndTimeLabel() {
            endTimeLabel.textContent = endTimeInput.value + ' seconds';
        }

        function setTime(type) {
            const currentTime = Math.floor(video.currentTime);
            
            if (type === 'start') {
                startTimeInput.value = currentTime;
                startTimeLabel.textContent = currentTime + ' seconds';
            } else if (type === 'end') {
                endTimeInput.value = currentTime;
                endTimeLabel.textContent = currentTime + ' seconds';
            }
        }

        function selectVideoPart() {
            const startTime = parseInt(startTimeInput.value);
            const endTime = parseInt(endTimeInput.value);

            if (!isNaN(startTime) && !isNaN(endTime) && startTime < endTime) {
                video.currentTime = startTime;
                video.play();

                setTimeout(() => {
                    video.pause();
                    video.currentTime = endTime;
                }, (endTime - startTime) * 1000);
            } else {
                alert('Please enter valid start and end times.');
            }
        }

        function startSpin() {
            // Get the icon element
            var icon = document.getElementById('spinIcon');
            icon.hidden = false;

            // Disable the button temporarily to prevent multiple clicks
            document.getElementById('spinButton').disabled = true;
            document.getElementById('encodeForm').submit();

        }

        const checkbox = document.getElementById('approx');
        const span = document.getElementById('targetApprox');

        // Add event listener to the checkbox
        checkbox.addEventListener('change', function() {
            // Check if the checkbox is checked
            if (this.checked) {
                // Update the text inside the span
                span.textContent = 'Approximate';
            } else {
                // Update the text inside the span
                span.textContent = 'Target';
            }
        });
    </script>
</body>
</html>
