<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Video Player</title>
    <style>
        /* Define a CSS variable for the primary color */
        :root {
            --primary-color: #ff5722; /* Default orange color */
            --hover-color: #e64a19; /* Slightly darker color for hover effects */
            --text-color: white; /* Default text color */
            --background-opacity: rgba(0, 0, 0, 0.8); /* Background for controls */
        }

        /* Body and background styles */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #000;
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        /* Video container styling */
        .video-container {
            position: relative;
            width: 90%;
            max-width: 960px; /* Limits the video size to YouTube-like dimensions */
            background-color: #000;
            overflow: hidden;
            aspect-ratio: 16 / 9; /* Ensures a consistent 16:9 aspect ratio */
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
        }

        /* Styling for the video */
        video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Custom controls container */
        .controls {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--background-opacity);
            padding: 8px;
            border-radius: 10px;
            z-index: 15;
            opacity: 1; /* Visible by default */
            transition: opacity 0.3s ease; /* Smooth transition for hiding */
        }

        .controls.hidden {
            opacity: 0; /* Hidden state */
            pointer-events: none; /* Disable interaction when hidden */
        }

        /* Custom control buttons and dropdown */
        .controls button, .controls select {
            background: var(--primary-color);
            color: var(--text-color);
            border: none;
            padding: 8px 12px;
            margin: 0 5px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 5px;
        }

        .controls button:hover, .controls select:hover {
            background: var(--hover-color);
        }

        .controls select {
            padding: 8px;
        }
        
        #playPauseIcon path,
        #playPauseIcon g {
            transition: opacity 0.3s ease;
        }

        /* Watermark */
        .watermark {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--background-opacity);
            color: var(--text-color);
            padding: 5px;
            font-size: 12px;
            z-index: 10;
            font-family: 'Helvetica Neue', sans-serif;
        }

        /* Responsive adjustments */
        @media (max-width: 600px) {
            .controls button, .controls select {
                font-size: 12px;
                padding: 6px 10px;
            }
        }
    </style>
</head>
<body>

    <div class="watermark">
        User: {{ video_id }} | Session: {{ request.remote_addr }}
    </div>

    <div class="video-container">
        <!-- Video player -->
        <video id="videoPlayer" preload="metadata">
            <source src="/stream/{{ video_id }}?url={{ encrypted_url }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>

        <!-- Custom controls -->
        <div class="controls" id="controls">

            <!-- Rewind button -->
            <button onclick="rewind()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M11 19V5L2 12l9 7zM22 5v14l-9-7 9-7z" fill="var(--text-color)"></path>
                </svg>
            </button>

            <!-- Play/Pause button -->
            <button onclick="playPause()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" id="playPauseIcon">
                    <!-- Play Icon -->
                    <path id="playIcon" d="M8 5v14l11-7z" fill="var(--text-color)" />
            
                    <!-- Pause Icon -->
                    <g id="pauseIcon" style="display:none;">
                        <rect x="6" y="5" width="4" height="14" fill="var(--text-color)"></rect>
                        <rect x="14" y="5" width="4" height="14" fill="var(--text-color)"></rect>
                    </g>
                </svg>
            </button>
            
            <!-- Fast Forward button -->
            <button onclick="fastForward()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M13 19V5l9 7-9 7zM2 5v14l9-7-9-7z" fill="var(--text-color)"></path>
                </svg>
            </button>
        
            <!-- Playback Speed dropdown -->
            <select id="playbackSpeed" onchange="changeSpeed()">
                <option value="0.5">0.5x</option>
                <option value="1" selected>1x</option>
                <option value="1.5">1.5x</option>
                <option value="2">2x</option>
            </select>
        </div>
        
    </div>

    <script>
        const videoPlayer = document.getElementById('videoPlayer');
        const controls = document.getElementById('controls');
        const playbackSpeed = document.getElementById('playbackSpeed');
        let controlsTimeout;

        // Disable default video context menu
        videoPlayer.addEventListener('contextmenu', (e) => e.preventDefault());

        // Play/Pause the video
        function playPause() {
            const playIcon = document.getElementById('playIcon');
            const pauseIcon = document.getElementById('pauseIcon');

            if (videoPlayer.paused) {
                videoPlayer.play();
                playIcon.style.display = 'none';  // Hide the play icon
                pauseIcon.style.display = 'block'; // Show the pause icon
            } else {
                videoPlayer.pause();
                playIcon.style.display = 'block'; // Show the play icon
                pauseIcon.style.display = 'none'; // Hide the pause icon
            }
        }

        // Rewind the video by 10 seconds
        function rewind() {
            videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 10);
        }

        // Fast forward the video by 10 seconds
        function fastForward() {
            videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 10);
        }

        // Change playback speed
        function changeSpeed() {
            videoPlayer.playbackRate = playbackSpeed.value;
        }

        // Show controls
        function showControls() {
            controls.classList.remove('hidden');
            resetControlsTimeout();
        }

        // Hide controls
        function hideControls() {
            controls.classList.add('hidden');
        }

        // Reset controls timeout
        function resetControlsTimeout() {
            clearTimeout(controlsTimeout);
            controlsTimeout = setTimeout(hideControls, 5000);
        }

        // Event listener to show controls when video is clicked
        videoPlayer.addEventListener('click', showControls);

        // Hide controls after 5 seconds of inactivity
        resetControlsTimeout();
    </script>

</body>
</html>
