Update index.html

index.html

@@ -4,8 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Video Library</title>
-    <!-- Load Plyr.io for enhanced video playback -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.css" />
     <style>
         * {
             box-sizing: border-box;
@@ -77,34 +75,10 @@
             justify-content: center;
             margin-bottom: 10px;
             overflow: hidden;
-            position: relative;
-        }
-        .video-thumbnail img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .video-thumbnail::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.3);
         }
-        .play-icon {
-            position: absolute;
-            z-index: 2;
-            font-size: 50px;
+        .video-thumbnail i {
+            font-size: 48px;
             color: white;
-            opacity: 0.8;
-            transition: opacity 0.2s;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
-        }
-        .video-item:hover .play-icon {
-            opacity: 1;
-            transform: scale(1.1);
         }
         .video-item-title {
             font-weight: 500;
@@ -141,7 +115,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0,0,0,0.9);
+            background-color: rgba(0,0,0,0.8);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -157,7 +131,7 @@
         .popup-content {
             width: 90%;
             max-width: 1024px;
-            background-color: #111;
+            background-color: #222;
             border-radius: 8px;
             overflow: hidden;
             position: relative;
@@ -165,13 +139,13 @@
         }
         .close-popup {
             position: absolute;
-            top: 15px;
-            right: 15px;
+            top: 10px;
+            right: 10px;
             background-color: rgba(0,0,0,0.5);
             color: white;
             border: none;
-            width: 36px;
-            height: 36px;
+            width: 30px;
+            height: 30px;
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -179,23 +153,19 @@
             cursor: pointer;
             z-index: 10;
             font-size: 18px;
-            transition: background-color 0.2s;
-        }
-        .close-popup:hover {
-            background-color: rgba(255,0,0,0.7);
         }
         .player-wrapper {
             position: relative;
             width: 100%;
             padding-top: 56.25%; /* 16:9 Aspect Ratio */
-            background-color: #000;
         }
-        .plyr {
+        #videoPlayer {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background-color: #000;
         }
         .popup-title {
             color: white;
@@ -203,50 +173,39 @@
             font-size: 1.2em;
             background-color: #111;
         }
-        .no-videos {
-            padding: 20px;
-            text-align: center;
-            color: #777;
-        }
-        .player-loading {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.7);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 1.2em;
-            z-index: 5;
-        }
-        .player-loading .spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(255,255,255,0.3);
-            border-radius: 50%;
-            border-top-color: white;
-            animation: spin 1s ease-in-out infinite;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        .quality-selector {
-            padding: 10px 15px;
+        .controls {
             display: flex;
-            align-items: center;
             gap: 10px;
-            background-color: #1a1a1a;
-            color: #ddd;
+            padding: 15px;
+            background-color: #111;
+            flex-wrap: wrap;
         }
-        .quality-selector select {
-            padding: 5px 10px;
+        .btn {
+            padding: 8px 16px;
             background-color: #333;
             color: white;
             border: none;
             border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .btn:hover {
+            background-color: #555;
+        }
+        .instructions {
+            color: #ccc;
+            padding: 10px 15px;
+            background-color: #111;
+            font-size: 0.9em;
+        }
+        .play-icon {
+            font-size: 50px;
+            color: white;
+            opacity: 0.8;
+            transition: opacity 0.2s;
+        }
+        .video-item:hover .play-icon {
+            opacity: 1;
         }
         @media (max-width: 768px) {
             .video-grid {
@@ -256,31 +215,10 @@
                 width: 95%;
             }
         }
-        .debug-overlay {
-            position: absolute;
-            bottom: 70px;
-            left: 10px;
-            background-color: rgba(0,0,0,0.7);
-            color: white;
-            padding: 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            max-width: 300px;
-            z-index: 10;
-            display: none;
-        }
-        .debug-toggle {
-            background-color: #333;
-            color: white;
-            border: none;
-            padding: 5px 10px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 12px;
-            position: absolute;
-            bottom: 10px;
-            left: 10px;
-            z-index: 10;
+        .no-videos {
+            padding: 20px;
+            text-align: center;
+            color: #777;
         }
     </style>
 </head>
@@ -310,33 +248,24 @@
             <button class="close-popup" id="closePopup">✕</button>
             <div class="popup-title" id="currentTitle">Video Title</div>
             <div class="player-wrapper">
-                <div id="playerContainer"></div>
-                <div class="player-loading" id="playerLoading">
-                    <div class="spinner"></div>
-                </div>
-                <div class="debug-overlay" id="debugOverlay">
-                    Loading metrics...
-                </div>
-                <button class="debug-toggle" id="debugToggle">Show Stats</button>
+                <video id="videoPlayer" controls>
+                    Your browser does not support the video tag.
+                </video>
             </div>
-            <div class="quality-selector">
-                <span>Playback Quality:</span>
-                <select id="qualitySelector">
-                    <option value="auto">Auto</option>
-                    <option value="1080">1080p</option>
-                    <option value="720">720p</option>
-                    <option value="480">480p</option>
-                    <option value="360">360p</option>
-                </select>
+            <div class="controls">
+                <button class="btn" id="backwardBtn">⏪ 10s</button>
+                <button class="btn" id="playPauseBtn">⏯️ Play/Pause</button>
+                <button class="btn" id="forwardBtn">⏩ 10s</button>
+                <button class="btn" id="fullscreenBtn">⛶ Fullscreen</button>
+                <button class="btn" id="muteBtn">🔊 Mute/Unmute</button>
+            </div>
+            <div class="instructions">
+                <p><strong>Keyboard Controls:</strong> Space (Play/Pause) • ← (Back 10s) • → (Forward 10s) • F (Fullscreen) • M (Mute/Unmute)</p>
+                <p><strong>Double-tap:</strong> Left side (Back 10s) • Center (Play/Pause) • Right side (Forward 10s)</p>
             </div>
         </div>
     </div>
 
-    <!-- Load required scripts -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.14/hls.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.7.1/dash.all.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script>
-    
     <script>
         // Global variables
         let videoData = [];
@@ -344,27 +273,21 @@
         let currentVideo = null;
         let currentPage = 1;
         const videosPerPage = 10;
-        let player = null;
-        let hls = null;
-        let dash = null;
-        let videoPreloadList = [];
-        let videoPreloadIndex = 0;
-        let videoBuffers = new Map();
-        let debugInterval = null;
         
         // DOM Elements
         const videoGrid = document.getElementById('videoGrid');
         const pagination = document.getElementById('pagination');
         const searchInput = document.getElementById('search');
         const playerPopup = document.getElementById('playerPopup');
+        const videoPlayer = document.getElementById('videoPlayer');
         const currentTitle = document.getElementById('currentTitle');
         const closePopup = document.getElementById('closePopup');
-        const playerContainer = document.getElementById('playerContainer');
-        const playerLoading = document.getElementById('playerLoading');
-        const qualitySelector = document.getElementById('qualitySelector');
-        const debugOverlay = document.getElementById('debugOverlay');
-        const debugToggle = document.getElementById('debugToggle');
-        
+        const playPauseBtn = document.getElementById('playPauseBtn');
+        const backwardBtn = document.getElementById('backwardBtn');
+        const forwardBtn = document.getElementById('forwardBtn');
+        const fullscreenBtn = document.getElementById('fullscreenBtn');
+        const muteBtn = document.getElementById('muteBtn');
+
         // Function to fetch video data
         async function fetchVideoData() {
             try {
@@ -381,62 +304,12 @@
                 filteredVideos = [...videoData];
                 renderPagination();
                 renderVideoGrid();
-                
-                // Preload thumbnails for first page
-                preloadThumbnails();
             } catch (error) {
                 console.error('Error fetching video data:', error);
                 videoGrid.innerHTML = `<div class="no-videos">Error loading videos: ${error.message}</div>`;
             }
         }
 
-        // Function to extract thumbnail from video URL
-        function getThumbnailUrl(videoUrl) {
-            // For Hugging Face videos, we can use a placeholder
-            return `/api/placeholder/280/156`;
-        }
-
-        // Function to preload thumbnails for better UX
-        function preloadThumbnails() {
-            // Calculate start and end index for current page
-            const startIndex = (currentPage - 1) * videosPerPage;
-            const endIndex = Math.min(startIndex + videosPerPage, filteredVideos.length);
-            const currentVideos = filteredVideos.slice(startIndex, endIndex);
-            
-            currentVideos.forEach(video => {
-                const img = new Image();
-                img.src = getThumbnailUrl(video.url);
-            });
-            
-            // Preload video data for the first few videos
-            videoPreloadList = currentVideos.slice(0, 3);
-            startVideoPreloading();
-        }
-        
-        // Function to preload video data for smoother playback
-        function startVideoPreloading() {
-            if (videoPreloadList.length === 0 || videoPreloadIndex >= videoPreloadList.length) return;
-            
-            const video = videoPreloadList[videoPreloadIndex];
-            
-            // Create a minimal fetch request to start preloading the video
-            fetch(video.url, { method: 'HEAD' })
-                .then(() => {
-                    console.log(`Preloaded headers for ${video.title}`);
-                    videoPreloadIndex++;
-                    if (videoPreloadIndex < videoPreloadList.length) {
-                        startVideoPreloading();
-                    }
-                })
-                .catch(err => {
-                    console.warn(`Failed to preload ${video.title}:`, err);
-                    videoPreloadIndex++;
-                    if (videoPreloadIndex < videoPreloadList.length) {
-                        startVideoPreloading();
-                    }
-                });
-        }
-
         // Function to render video grid
         function renderVideoGrid() {
             if (filteredVideos.length === 0) {
@@ -452,7 +325,6 @@
             videoGrid.innerHTML = currentVideos.map((video, index) => `
                 <div class="video-item" data-index="${startIndex + index}">
                     <div class="video-thumbnail">
-                        <img src="${getThumbnailUrl(video.url)}" alt="${video.title}" loading="lazy">
                         <div class="play-icon">▶</div>
                     </div>
                     <div class="video-item-title">${video.title}</div>
@@ -463,16 +335,14 @@
                 item.addEventListener('click', function() {
                     const index = parseInt(this.getAttribute('data-index'));
                     if (!isNaN(index) && index >= 0 && index < filteredVideos.length) {
+                        // Call the async function to play the video
                         playVideo(filteredVideos[index]);
                     }
                 });
             });
-            
-            // Preload thumbnails again
-            preloadThumbnails();
         }
 
-        // Function to render pagination controls
+        // Function to render pagination
         function renderPagination() {
             const totalPages = Math.ceil(filteredVideos.length / videosPerPage);
             if (totalPages <= 1) {
@@ -518,304 +388,219 @@
             });
         }
 
-        // Function to cleanup previous player instances
-        function cleanupPlayerInstances() {
-            if (player) {
-                player.destroy();
-                player = null;
-            }
-            if (hls) {
-                hls.destroy();
-                hls = null;
-            }
-            if (dash) {
-                dash.reset();
-                dash = null;
-            }
-            if (debugInterval) {
-                clearInterval(debugInterval);
-                debugInterval = null;
-            }
-            playerContainer.innerHTML = '';
-        }
-
-        // Function to initialize and show debug overlay with playback metrics
-        function initDebugOverlay() {
-            if (!player) return;
-            
-            debugToggle.addEventListener('click', function() {
-                if (debugOverlay.style.display === 'block') {
-                    debugOverlay.style.display = 'none';
-                    if (debugInterval) {
-                        clearInterval(debugInterval);
-                        debugInterval = null;
-                    }
-                } else {
-                    debugOverlay.style.display = 'block';
-                    updateDebugInfo();
-                    debugInterval = setInterval(updateDebugInfo, 1000);
-                }
-            });
-        }
-        
-        // Update debug information
-        function updateDebugInfo() {
-            if (!player || !player.media) return;
-            
-            let info = '';
-            const video = player.media;
-            info += `Resolution: ${video.videoWidth}x${video.videoHeight}<br>`;
-            info += `Current Time: ${formatTime(video.currentTime)}/${formatTime(video.duration)}<br>`;
-            info += `Playback Rate: ${video.playbackRate}x<br>`;
-            info += `Volume: ${Math.round(video.volume * 100)}%<br><br>`;
-            
-            const buffered = video.buffered;
-            if (buffered.length) {
-                info += `Buffered: ${formatTime(buffered.start(0))} - ${formatTime(buffered.end(0))}<br>`;
-                const bufferedAhead = buffered.end(0) - video.currentTime;
-                info += `Buffer ahead: ${bufferedAhead.toFixed(2)}s<br>`;
-            }
-            
-            if (video.networkState) {
-                const states = ['NETWORK_EMPTY', 'NETWORK_IDLE', 'NETWORK_LOADING', 'NETWORK_NO_SOURCE'];
-                info += `Network State: ${states[video.networkState]}<br>`;
-            }
-            
-            if (hls) {
-                info += `<br>HLS Metrics:<br>`;
-                info += `Level: ${hls.currentLevel} (${hls.levels[hls.currentLevel]?.height || '?'}p)<br>`;
-                info += `Latency: ${hls.latency?.toFixed(2) || '?'}ms<br>`;
-            }
-            
-            if (dash) {
-                info += `<br>DASH Metrics:<br>`;
-                const dashMetrics = dash.getMetricsFor('video');
-                const videoQualities = dash.getBitrateInfoListFor('video');
-                info += `Quality: ${videoQualities[dash.getQualityFor('video')]?.width || '?'}x${videoQualities[dash.getQualityFor('video')]?.height || '?'}<br>`;
-                info += `Buffer: ${dash.getBufferLength('video').toFixed(2)}s<br>`;
-            }
-            
-            debugOverlay.innerHTML = info;
-        }
-        
-        // Format time for debug info
-        function formatTime(seconds) {
-            if (isNaN(seconds)) return '0:00';
-            const mins = Math.floor(seconds / 60);
-            const secs = Math.floor(seconds % 60);
-            return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
-        }
-
-        // Function to play video with optimized streaming
-        function playVideo(video) {
+        // Async function to play a video and handle HF Model Hub authentication if needed
+        async function playVideo(video) {
             currentVideo = video;
             currentTitle.textContent = video.title;
-            playerLoading.style.display = 'flex';
-            playerPopup.classList.add('active');
-            cleanupPlayerInstances();
             
-            const videoElement = document.createElement('video');
-            videoElement.setAttribute('playsinline', '');
-            videoElement.setAttribute('controls', '');
-            videoElement.classList.add('plyr__video-embed');
-            playerContainer.appendChild(videoElement);
+            let videoUrl = video.url;
+            let finalUrl = videoUrl;
             
-            const videoUrl = video.url;
-            initializePlayer(videoElement, videoUrl);
-            document.body.style.overflow = 'hidden';
-        }
-        
-        // Determine if the URL is for Hugging Face videos (or similar criteria)
-        function isHuggingFaceURL(url) {
-            return url.includes('huggingface.co');
-        }
-        
-        // Initialize the player with the best streaming technology
-        function initializePlayer(videoElement, videoUrl) {
-            const initPlyr = () => {
-                const options = {
-                    controls: [
-                        'play-large', 'play', 'progress', 'current-time', 'mute',
-                        'volume', 'settings', 'fullscreen'
-                    ],
-                    settings: ['quality', 'speed'],
-                    keyboard: { focused: true, global: true },
-                    tooltips: { controls: true, seek: true },
-                    seekTime: 10,
-                    speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] },
-                    blankVideo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
-                    previewThumbnails: {
-                        enabled: false,
-                    },
-                    autoplay: true,
-                    disableContextMenu: false
-                };
-                
-                player = new Plyr(videoElement, options);
-                
-                player.on('ready', () => {
-                    playerLoading.style.display = 'none';
-                    initDebugOverlay();
-                    setTimeout(() => {
-                        player.play().catch(error => {
-                            console.warn('Autoplay prevented:', error);
-                        });
-                    }, 100);
-                });
-                
-                player.on('enterfullscreen', () => {
-                    if (screen.orientation && screen.orientation.lock) {
-                        screen.orientation.lock('landscape').catch(e => {
-                            console.warn("Orientation lock failed:", e);
-                        });
-                    }
-                });
-                
-                player.on('exitfullscreen', () => {
-                    if (screen.orientation && screen.orientation.unlock) {
-                        screen.orientation.unlock();
-                    }
-                });
-                
-                player.on('seeking', () => {
-                    playerLoading.style.display = 'flex';
-                });
-                
-                player.on('seeked', () => {
-                    playerLoading.style.display = 'none';
-                });
-                
-                qualitySelector.addEventListener('change', function() {
-                    const quality = this.value;
-                    if (quality === 'auto') {
-                        if (hls) {
-                            hls.currentLevel = -1;
-                        }
-                        if (dash) {
-                            dash.setAutoSwitchQualityFor('video', true);
-                        }
+            // Check if the URL is from HF Model Hub and might require authentication.
+            if (videoUrl.includes("huggingface.co")) {
+                // Try to get token from localStorage or prompt the user.
+                let token = localStorage.getItem('hf_token');
+                if (!token) {
+                    token = prompt("Enter your HuggingFace token:");
+                    if (!token) {
+                        alert("Authentication token required to access HuggingFace video.");
                         return;
                     }
-                    const height = parseInt(quality);
-                    
-                    if (hls && hls.levels) {
-                        const levelIndex = hls.levels.findIndex(level => level.height <= height);
-                        if (levelIndex !== -1) {
-                            hls.currentLevel = levelIndex;
-                        }
-                    }
-                    
-                    if (dash) {
-                        const videoQualities = dash.getBitrateInfoListFor('video');
-                        const qualityIndex = videoQualities.findIndex(q => q.height <= height);
-                        if (qualityIndex !== -1) {
-                            dash.setAutoSwitchQualityFor('video', false);
-                            dash.setQualityFor('video', qualityIndex);
-                        }
-                    }
-                });
-            };
-            
-            if (videoUrl.includes('.m3u8') || isHuggingFaceURL(videoUrl)) {
-                if (Hls.isSupported()) {
-                    hls = new Hls({
-                        startLevel: -1,
-                        maxBufferLength: 30,
-                        maxMaxBufferLength: 60,
-                        progressive: true,
-                        lowLatencyMode: true,
-                        backBufferLength: 90,
-                        enableWorker: true,
-                        testBandwidth: true,
-                        abrEwmaDefaultEstimate: 1000000,
-                        abrBandWidthFactor: 0.9,
-                        abrBandWidthUpFactor: 0.7,
-                        maxLoadingDelay: 4,
-                        manifestLoadingTimeOut: 10000,
-                        fragLoadingTimeOut: 20000,
-                        enableSoftwareAES: true,
-                    });
-                    
-                    hls.loadSource(videoUrl);
-                    hls.attachMedia(videoElement);
-                    
-                    hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                        initPlyr();
-                        qualitySelector.innerHTML = '<option value="auto">Auto</option>';
-                        hls.levels.forEach(level => {
-                            qualitySelector.innerHTML += `<option value="${level.height}">${level.height}p</option>`;
-                        });
-                    });
-                    
-                    hls.on(Hls.Events.ERROR, (event, data) => {
-                        console.error('HLS Error:', data);
-                        if (data.fatal) {
-                            switch(data.type) {
-                                case Hls.ErrorTypes.NETWORK_ERROR:
-                                    console.log('Fatal network error, trying to recover');
-                                    hls.startLoad();
-                                    break;
-                                case Hls.ErrorTypes.MEDIA_ERROR:
-                                    console.log('Fatal media error, trying to recover');
-                                    hls.recoverMediaError();
-                                    break;
-                                default:
-                                    console.error('Fatal HLS error, cannot recover');
-                                    hls.destroy();
-                                    alert('Could not play this video. Please try another one.');
-                                    closePlayerPopup();
-                                    break;
-                            }
+                    localStorage.setItem('hf_token', token);
+                }
+                try {
+                    const response = await fetch(videoUrl, {
+                        headers: {
+                            'Authorization': `Bearer ${token}`
                         }
                     });
-                } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
-                    videoElement.src = videoUrl;
-                    initPlyr();
+                    if (!response.ok) {
+                        throw new Error(`Failed to load video: ${response.status} ${response.statusText}`);
+                    }
+                    const blob = await response.blob();
+                    finalUrl = URL.createObjectURL(blob);
+                } catch (error) {
+                    alert("Error loading HuggingFace video: " + error.message);
+                    return;
                 }
             }
-            else if (videoUrl.includes('.mpd')) {
-                dash = dashjs.MediaPlayer().create();
-                dash.initialize(videoElement, videoUrl, true);
-                dash.updateSettings({
-                    streaming: {
-                        buffer: {
-                            fastSwitchEnabled: true,
-                            stableBufferTime: 20,
-                        }
-                    }
-                });
-                
-                dash.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, function() {
-                    initPlyr();
-                    const videoQualities = dash.getBitrateInfoListFor('video');
-                    qualitySelector.innerHTML = '<option value="auto">Auto</option>';
-                    videoQualities.forEach(quality => {
-                        qualitySelector.innerHTML += `<option value="${quality.height}">${quality.height}p</option>`;
-                    });
+            
+            videoPlayer.src = finalUrl;
+            videoPlayer.load();
+            
+            // Show popup and disable background scrolling
+            playerPopup.classList.add('active');
+            document.body.style.overflow = 'hidden';
+            
+            // Play video after a short delay to allow the popup to render
+            setTimeout(() => {
+                videoPlayer.play().catch(error => {
+                    console.error("Error playing video:", error);
+                    alert(`Error playing video: ${error.message}. Make sure the URL is accessible.`);
                 });
-            }
-            else {
-                // Fallback for standard video files
-                videoElement.src = videoUrl;
-                initPlyr();
-            }
+            }, 300);
         }
 
-        // Function to close the player popup and cleanup the player
+        // Close popup function
         function closePlayerPopup() {
+            videoPlayer.pause();
             playerPopup.classList.remove('active');
             document.body.style.overflow = '';
-            cleanupPlayerInstances();
         }
 
-        // Add event listener for closing the popup
+        // Search functionality
+        searchInput.addEventListener('input', function() {
+            const searchTerm = this.value.toLowerCase();
+            filteredVideos = videoData.filter(video => 
+                video.title.toLowerCase().includes(searchTerm)
+            );
+            currentPage = 1; // Reset to first page on search
+            renderPagination();
+            renderVideoGrid();
+        });
+
+        // Close popup when clicking close button
         closePopup.addEventListener('click', closePlayerPopup);
-        window.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape') {
+
+        // Close popup when clicking outside the popup content
+        playerPopup.addEventListener('click', function(e) {
+            if (e.target === playerPopup) {
                 closePlayerPopup();
             }
         });
+
+        // Video control buttons
+        playPauseBtn.addEventListener('click', function() {
+            if (videoPlayer.paused) {
+                videoPlayer.play();
+            } else {
+                videoPlayer.pause();
+            }
+        });
+
+        backwardBtn.addEventListener('click', function() {
+            videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 10);
+        });
+
+        forwardBtn.addEventListener('click', function() {
+            videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 10);
+        });
+
+        fullscreenBtn.addEventListener('click', function() {
+            if (videoPlayer.requestFullscreen) {
+                videoPlayer.requestFullscreen();
+            } else if (videoPlayer.webkitRequestFullscreen) {
+                videoPlayer.webkitRequestFullscreen();
+            } else if (videoPlayer.msRequestFullscreen) {
+                videoPlayer.msRequestFullscreen();
+            }
+        });
+
+        muteBtn.addEventListener('click', function() {
+            videoPlayer.muted = !videoPlayer.muted;
+        });
+
+        // Keyboard controls (active when popup is visible)
+        document.addEventListener('keydown', function(e) {
+            if (!playerPopup.classList.contains('active')) return;
+            
+            switch(e.key) {
+                case ' ':
+                    if (videoPlayer.paused) {
+                        videoPlayer.play();
+                    } else {
+                        videoPlayer.pause();
+                    }
+                    e.preventDefault();
+                    break;
+                case 'ArrowRight':
+                    videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 10);
+                    e.preventDefault();
+                    break;
+                case 'ArrowLeft':
+                    videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 10);
+                    e.preventDefault();
+                    break;
+                case 'f':
+                case 'F':
+                    if (document.fullscreenElement) {
+                        document.exitFullscreen();
+                    } else if (videoPlayer.requestFullscreen) {
+                        videoPlayer.requestFullscreen();
+                    }
+                    e.preventDefault();
+                    break;
+                case 'm':
+                case 'M':
+                    videoPlayer.muted = !videoPlayer.muted;
+                    e.preventDefault();
+                    break;
+                case 'Escape':
+                    closePlayerPopup();
+                    e.preventDefault();
+                    break;
+            }
+        });
+
+        // Double-tap controls for mobile/touch devices
+        let lastTap = 0;
+        let tapTimeout;
         
+        videoPlayer.addEventListener('click', function(e) {
+            const currentTime = new Date().getTime();
+            const tapLength = currentTime - lastTap;
+            clearTimeout(tapTimeout);
+            
+            if (tapLength < 500 && tapLength > 0) {
+                const playerRect = videoPlayer.getBoundingClientRect();
+                const clickX = e.clientX - playerRect.left;
+                const playerWidth = playerRect.width;
+                
+                if (clickX < playerWidth / 3) {
+                    videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 10);
+                } else if (clickX > (playerWidth * 2) / 3) {
+                    videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 10);
+                } else {
+                    if (videoPlayer.paused) {
+                        videoPlayer.play();
+                    } else {
+                        videoPlayer.pause();
+                    }
+                }
+                e.preventDefault();
+            } else {
+                tapTimeout = setTimeout(function() {
+                    // Single tap action (no default action here)
+                }, 300);
+            }
+            lastTap = currentTime;
+        });
+
+        // Fix for fullscreen mode changes
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+        document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+        document.addEventListener('MSFullscreenChange', handleFullscreenChange);
+
+        function handleFullscreenChange() {
+            if (document.fullscreenElement || 
+                document.webkitFullscreenElement || 
+                document.mozFullScreenElement) {
+                console.log('Entered fullscreen mode');
+                const fullscreenVideo = document.fullscreenElement || 
+                                        document.webkitFullscreenElement || 
+                                        document.mozFullScreenElement;
+                if (fullscreenVideo === videoPlayer) {
+                    videoPlayer.style.width = '100%';
+                    videoPlayer.style.height = '100%';
+                }
+            } else {
+                console.log('Exited fullscreen mode');
+                videoPlayer.style.width = '100%';
+                videoPlayer.style.height = '100%';
+            }
+        }
+
         // Initialize video data on page load
         fetchVideoData();
     </script>