Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 13, 2025

Commit

7997284

verified ·

1 Parent(s): b50f389

Update index.html

Browse files

Files changed (1) hide show

index.html +440 -105

index.html CHANGED Viewed

@@ -75,10 +75,17 @@
             justify-content: center;
             margin-bottom: 10px;
             overflow: hidden;
         }
         .video-thumbnail i {
             font-size: 48px;
             color: white;
         }
         .video-item-title {
             font-weight: 500;
@@ -179,6 +186,7 @@
             padding: 15px;
             background-color: #111;
             flex-wrap: wrap;
         }
         .btn {
             padding: 8px 16px;
@@ -192,6 +200,9 @@
         .btn:hover {
             background-color: #555;
         }
         .instructions {
             color: #ccc;
             padding: 10px 15px;
@@ -214,13 +225,80 @@
             .popup-content {
                 width: 95%;
             }
         }
         .no-videos {
             padding: 20px;
             text-align: center;
             color: #777;
         }
     </style>
 </head>
 <body>
     <div class="container">
@@ -246,9 +324,12 @@
     <div class="popup-overlay" id="playerPopup">
         <div class="popup-content">
             <button class="close-popup" id="closePopup">✕</button>
             <div class="popup-title" id="currentTitle">Video Title</div>
             <div class="player-wrapper">
-                <video id="videoPlayer" controls>
                     Your browser does not support the video tag.
                 </video>
             </div>
@@ -258,6 +339,10 @@
                 <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>
@@ -273,6 +358,9 @@
         let currentVideo = null;
         let currentPage = 1;
         const videosPerPage = 10;
         // DOM Elements
         const videoGrid = document.getElementById('videoGrid');
@@ -287,29 +375,66 @@
         const forwardBtn = document.getElementById('forwardBtn');
         const fullscreenBtn = document.getElementById('fullscreenBtn');
         const muteBtn = document.getElementById('muteBtn');
         // Function to fetch video data
         async function fetchVideoData() {
             try {
                 const response = await fetch('database.json');
                 if (!response.ok) {
                     throw new Error('Failed to fetch video data');
                 }
                 const data = await response.json();
-                // Check if data has videos array or is itself an array
-                videoData = Array.isArray(data) ? data :
-                          (data.videos && Array.isArray(data.videos) ? data.videos : []);
-                filteredVideos = [...videoData];
-                renderPagination();
-                renderVideoGrid();
             } catch (error) {
                 console.error('Error fetching video data:', error);
                 videoGrid.innerHTML = `<div class="no-videos">Error loading videos: ${error.message}</div>`;
             }
         }
         // Function to render video grid
         function renderVideoGrid() {
             if (filteredVideos.length === 0) {
@@ -326,6 +451,7 @@
             videoGrid.innerHTML = currentVideos.map((video, index) => `
                 <div class="video-item" data-index="${startIndex + index}">
                     <div class="video-thumbnail">
                         <div class="play-icon">▶</div>
                     </div>
                     <div class="video-item-title">${video.title}</div>
@@ -341,6 +467,21 @@
                     }
                 });
             });
         }
         // Function to render pagination
@@ -408,37 +549,302 @@
             currentVideo = video;
             currentTitle.textContent = video.title;
-            // Handle different types of URLs (direct or Hugging Face)
-            let videoUrl = video.url;
-            // Check if this is a Hugging Face URL and handle accordingly
-            if (videoUrl.includes('huggingface.co')) {
-                // URLs for private repositories should already include token
             }
-            videoPlayer.src = videoUrl;
-            videoPlayer.load();
             // Show popup
             playerPopup.classList.add('active');
             // Play video after showing popup
-            setTimeout(() => {
                 videoPlayer.play().catch(error => {
                     console.error('Error playing video:', error);
-                    alert(`Error playing video: ${error.message}. Make sure the URL is accessible.`);
                 });
-            }, 300);
-            // Disable scrolling on body when popup is active
-            document.body.style.overflow = 'hidden';
         }
         // Close popup function
         function closePlayerPopup() {
             videoPlayer.pause();
             playerPopup.classList.remove('active');
             document.body.style.overflow = '';
         }
         // Search functionality
@@ -462,70 +868,31 @@
             }
         });
-        // Video controls
-        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) { /* Safari */
-                videoPlayer.webkitRequestFullscreen();
-            } else if (videoPlayer.msRequestFullscreen) { /* IE11 */
-                videoPlayer.msRequestFullscreen();
-            }
-        });
-        muteBtn.addEventListener('click', function() {
-            videoPlayer.muted = !videoPlayer.muted;
-        });
         // Keyboard controls (only active when popup is visible)
         document.addEventListener('keydown', function(e) {
             if (!playerPopup.classList.contains('active')) return;
             switch(e.key) {
                 case ' ': // Space
-                    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':
@@ -553,61 +920,29 @@
                 // Determine click position (left, center, or right third)
                 if (clickX < playerWidth / 3) {
                     // Left side - backward
-                    videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 10);
                 } else if (clickX > (playerWidth * 2) / 3) {
                     // Right side - forward
-                    videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 10);
                 } else {
                     // Center - play/pause
-                    if (videoPlayer.paused) {
-                        videoPlayer.play();
-                    } else {
-                        videoPlayer.pause();
-                    }
                 }
                 e.preventDefault();
             } else {
                 // Single tap - wait to see if it becomes a double tap
                 tapTimeout = setTimeout(function() {
-                    // Single tap action (do nothing or implement something)
                 }, 300);
             }
             lastTap = currentTime;
         });
-        // Fix for fullscreen and sound issues
-        videoPlayer.addEventListener('loadedmetadata', function() {
-            // Ensure volume is set
-            videoPlayer.volume = 1.0;
-        });
-        // Fix for fullscreen mode
-        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');
-                // Force video to take full size of screen
-                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');
-                // Reset styles when exiting fullscreen
-                videoPlayer.style.width = '100%';
-                videoPlayer.style.height = '100%';
-            }
-        }
         // Initialize
         fetchVideoData();
     </script>

             justify-content: center;
             margin-bottom: 10px;
             overflow: hidden;
+            position: relative;
+        }
+        .video-thumbnail img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
         .video-thumbnail i {
             font-size: 48px;
             color: white;
+            position: absolute;
         }
         .video-item-title {
             font-weight: 500;
             padding: 15px;
             background-color: #111;
             flex-wrap: wrap;
+            align-items: center;
         }
         .btn {
             padding: 8px 16px;
         .btn:hover {
             background-color: #555;
         }
+        .btn.active {
+            background-color: #007bff;
+        }
         .instructions {
             color: #ccc;
             padding: 10px 15px;
             .popup-content {
                 width: 95%;
             }
+            .controls {
+                gap: 5px;
+                padding: 10px;
+            }
+            .btn {
+                padding: 6px 12px;
+                font-size: 0.9em;
+            }
         }
         .no-videos {
             padding: 20px;
             text-align: center;
             color: #777;
         }
+        .quality-selector {
+            margin-left: auto;
+        }
+        .quality-btn {
+            padding: 6px 12px;
+            background-color: #444;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-left: 5px;
+        }
+        .quality-btn.active {
+            background-color: #007bff;
+        }
+        .loading-spinner {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 40px;
+            height: 40px;
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 4px solid #fff;
+            animation: spin 1s linear infinite;
+            z-index: 10;
+            display: none;
+        }
+        @keyframes spin {
+            0% { transform: translate(-50%, -50%) rotate(0deg); }
+            100% { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+        .network-indicator {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background-color: rgba(0,0,0,0.5);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            z-index: 10;
+            display: none;
+        }
+        .buffering-indicator {
+            position: absolute;
+            bottom: 60px;
+            left: 10px;
+            background-color: rgba(0,0,0,0.5);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            z-index: 10;
+            display: none;
+        }
     </style>
+    <!-- HLS.js for adaptive streaming -->
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 </head>
 <body>
     <div class="container">
     <div class="popup-overlay" id="playerPopup">
         <div class="popup-content">
             <button class="close-popup" id="closePopup">✕</button>
+            <div class="network-indicator" id="networkIndicator"></div>
+            <div class="buffering-indicator" id="bufferingIndicator">Buffering...</div>
             <div class="popup-title" id="currentTitle">Video Title</div>
             <div class="player-wrapper">
+                <div class="loading-spinner" id="loadingSpinner"></div>
+                <video id="videoPlayer" controls preload="auto">
                     Your browser does not support the video tag.
                 </video>
             </div>
                 <button class="btn" id="forwardBtn">⏩ 10s</button>
                 <button class="btn" id="fullscreenBtn">⛶ Fullscreen</button>
                 <button class="btn" id="muteBtn">🔊 Mute/Unmute</button>
+                <div class="quality-selector" id="qualitySelector">
+                    <span>Quality:</span>
+                    <button class="quality-btn" data-quality="auto">Auto</button>
+                </div>
             </div>
             <div class="instructions">
                 <p><strong>Keyboard Controls:</strong> Space (Play/Pause) • ← (Back 10s) • → (Forward 10s) • F (Fullscreen) • M (Mute/Unmute)</p>
         let currentVideo = null;
         let currentPage = 1;
         const videosPerPage = 10;
+        let hls = null;
+        let lastNetworkSpeedTest = 0;
+        let networkSpeed = 0;
         // DOM Elements
         const videoGrid = document.getElementById('videoGrid');
         const forwardBtn = document.getElementById('forwardBtn');
         const fullscreenBtn = document.getElementById('fullscreenBtn');
         const muteBtn = document.getElementById('muteBtn');
+        const qualitySelector = document.getElementById('qualitySelector');
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        const networkIndicator = document.getElementById('networkIndicator');
+        const bufferingIndicator = document.getElementById('bufferingIndicator');
         // Function to fetch video data
         async function fetchVideoData() {
             try {
+                // Try to get from cache first
+                const cachedData = localStorage.getItem('videoLibraryData');
+                if (cachedData) {
+                    const parsedData = JSON.parse(cachedData);
+                    if (parsedData && (Array.isArray(parsedData) ||
+                        (parsedData.videos && Array.isArray(parsedData.videos)))) {
+                        processVideoData(parsedData);
+                        // Check if cache is stale (older than 1 hour)
+                        const cacheTime = localStorage.getItem('videoLibraryCacheTime');
+                        if (cacheTime && (Date.now() - parseInt(cacheTime)) < 3600000) {
+                            return;
+                        }
+                    }
+                }
+                // Fetch fresh data
                 const response = await fetch('database.json');
                 if (!response.ok) {
                     throw new Error('Failed to fetch video data');
                 }
                 const data = await response.json();
+                // Cache the data
+                localStorage.setItem('videoLibraryData', JSON.stringify(data));
+                localStorage.setItem('videoLibraryCacheTime', Date.now().toString());
+                processVideoData(data);
             } catch (error) {
                 console.error('Error fetching video data:', error);
                 videoGrid.innerHTML = `<div class="no-videos">Error loading videos: ${error.message}</div>`;
             }
         }
+        function processVideoData(data) {
+            // Check if data has videos array or is itself an array
+            videoData = Array.isArray(data) ? data :
+                      (data.videos && Array.isArray(data.videos) ? data.videos : []);
+            // Generate thumbnails for videos that don't have them
+            videoData.forEach(video => {
+                if (!video.thumbnail) {
+                    // Create a thumbnail URL based on video URL (this is a placeholder)
+                    video.thumbnail = `https://img.youtube.com/vi/${Math.random().toString(36).substring(2)}/mqdefault.jpg`;
+                }
+            });
+            filteredVideos = [...videoData];
+            renderPagination();
+            renderVideoGrid();
+        }
         // Function to render video grid
         function renderVideoGrid() {
             if (filteredVideos.length === 0) {
             videoGrid.innerHTML = currentVideos.map((video, index) => `
                 <div class="video-item" data-index="${startIndex + index}">
                     <div class="video-thumbnail">
+                        <img src="${video.thumbnail}" alt="${video.title}" onerror="this.style.display='none'">
                         <div class="play-icon">▶</div>
                     </div>
                     <div class="video-item-title">${video.title}</div>
                     }
                 });
             });
+            // Preload first video for better UX
+            if (currentVideos.length > 0) {
+                preloadVideo(currentVideos[0]);
+            }
+        }
+        // Function to preload video metadata
+        function preloadVideo(video) {
+            const tempVideo = document.createElement('video');
+            tempVideo.src = video.url;
+            tempVideo.preload = 'metadata';
+            tempVideo.onloadedmetadata = () => {
+                console.log(`Preloaded metadata for: ${video.title}`);
+            };
         }
         // Function to render pagination
             currentVideo = video;
             currentTitle.textContent = video.title;
+            // Show loading spinner
+            loadingSpinner.style.display = 'block';
+            // Destroy previous HLS instance if exists
+            if (hls) {
+                hls.destroy();
+                hls = null;
             }
             // Show popup
             playerPopup.classList.add('active');
+            // Check if this is an HLS stream (.m3u8)
+            if (video.url.includes('.m3u8')) {
+                setupHLSPlayer(video.url);
+            } else {
+                setupRegularPlayer(video.url);
+            }
+            // Disable scrolling on body when popup is active
+            document.body.style.overflow = 'hidden';
+        }
+        function setupHLSPlayer(url) {
+            if (Hls.isSupported()) {
+                hls = new Hls({
+                    maxBufferLength: 30,
+                    maxMaxBufferLength: 600,
+                    maxBufferSize: 60 * 1000 * 1000,
+                    maxBufferHole: 0.5,
+                    lowLatencyMode: true,
+                    enableWorker: true,
+                    startLevel: -1, // Auto quality
+                    abrEwmaDefaultEstimate: 500000, // 500kbps initial estimate
+                    abrBandWidthFactor: 0.95,
+                    abrBandWidthUpFactor: 0.7,
+                    abrEwmaSlowVoD: 1,
+                    abrEwmaFastVoD: 1,
+                    abrEwmaSlowLive: 1,
+                    abrEwmaFastLive: 1
+                });
+                hls.loadSource(url);
+                hls.attachMedia(videoPlayer);
+                hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
+                    // Add quality options
+                    updateQualityOptions(data.levels);
+                    // Start playing
+                    videoPlayer.play().catch(error => {
+                        console.error('Error playing video:', error);
+                        loadingSpinner.style.display = 'none';
+                    });
+                });
+                hls.on(Hls.Events.ERROR, (event, data) => {
+                    if (data.fatal) {
+                        console.error('HLS fatal error, falling back to regular player');
+                        hls.destroy();
+                        setupRegularPlayer(url);
+                    }
+                });
+                hls.on(Hls.Events.FRAG_BUFFERED, () => {
+                    loadingSpinner.style.display = 'none';
+                });
+            } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
+                // Native HLS support (Safari)
+                videoPlayer.src = url;
+                videoPlayer.addEventListener('loadedmetadata', () => {
+                    videoPlayer.play().catch(error => {
+                        console.error('Error playing video:', error);
+                        loadingSpinner.style.display = 'none';
+                    });
+                });
+            } else {
+                console.error('HLS not supported, falling back to regular player');
+                setupRegularPlayer(url);
+            }
+            // Setup event listeners
+            setupPlayerEventListeners();
+        }
+        function setupRegularPlayer(url) {
+            videoPlayer.src = url;
+            videoPlayer.load();
+            // Clear any existing quality options
+            updateQualityOptions([]);
             // Play video after showing popup
+            videoPlayer.addEventListener('loadedmetadata', () => {
                 videoPlayer.play().catch(error => {
                     console.error('Error playing video:', error);
+                    loadingSpinner.style.display = 'none';
                 });
+            });
+            videoPlayer.addEventListener('canplay', () => {
+                loadingSpinner.style.display = 'none';
+            });
+            // Setup event listeners
+            setupPlayerEventListeners();
+        }
+        function setupPlayerEventListeners() {
+            // Play/Pause button
+            playPauseBtn.addEventListener('click', togglePlayPause);
+            // Backward/Forward buttons
+            backwardBtn.addEventListener('click', () => seekRelative(-10));
+            forwardBtn.addEventListener('click', () => seekRelative(10));
+            // Fullscreen button
+            fullscreenBtn.addEventListener('click', toggleFullscreen);
+            // Mute button
+            muteBtn.addEventListener('click', toggleMute);
+            // Player events
+            videoPlayer.addEventListener('play', () => {
+                playPauseBtn.textContent = '⏸️ Pause';
+                startNetworkMonitoring();
+            });
+            videoPlayer.addEventListener('pause', () => {
+                playPauseBtn.textContent = '⏯️ Play';
+                stopNetworkMonitoring();
+            });
+            videoPlayer.addEventListener('waiting', () => {
+                bufferingIndicator.style.display = 'block';
+            });
+            videoPlayer.addEventListener('playing', () => {
+                bufferingIndicator.style.display = 'none';
+            });
+            videoPlayer.addEventListener('seeking', () => {
+                bufferingIndicator.style.display = 'block';
+            });
+            videoPlayer.addEventListener('seeked', () => {
+                bufferingIndicator.style.display = 'none';
+            });
+            videoPlayer.addEventListener('error', (e) => {
+                console.error('Video error:', videoPlayer.error);
+                loadingSpinner.style.display = 'none';
+                bufferingIndicator.style.display = 'none';
+            });
+        }
+        function togglePlayPause() {
+            if (videoPlayer.paused) {
+                videoPlayer.play().catch(error => {
+                    console.error('Error playing video:', error);
+                });
+            } else {
+                videoPlayer.pause();
+            }
+        }
+        function seekRelative(seconds) {
+            videoPlayer.currentTime = Math.max(0, Math.min(videoPlayer.duration, videoPlayer.currentTime + seconds));
+        }
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                if (videoPlayer.requestFullscreen) {
+                    videoPlayer.requestFullscreen();
+                } else if (videoPlayer.webkitRequestFullscreen) {
+                    videoPlayer.webkitRequestFullscreen();
+                } else if (videoPlayer.msRequestFullscreen) {
+                    videoPlayer.msRequestFullscreen();
+                }
+            } else {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+            }
+        }
+        function toggleMute() {
+            videoPlayer.muted = !videoPlayer.muted;
+            muteBtn.textContent = videoPlayer.muted ? '🔇 Unmute' : '🔊 Mute';
+        }
+        function updateQualityOptions(levels) {
+            // Clear existing quality buttons (except Auto)
+            const existingBtns = document.querySelectorAll('.quality-btn:not([data-quality="auto"])');
+            existingBtns.forEach(btn => btn.remove());
+            if (levels.length > 0) {
+                // Add quality options
+                levels.forEach((level, index) => {
+                    const btn = document.createElement('button');
+                    btn.className = 'quality-btn';
+                    btn.dataset.quality = index;
+                    btn.textContent = `${Math.round(level.height)}p`;
+                    btn.addEventListener('click', () => setQuality(index));
+                    qualitySelector.appendChild(btn);
+                });
+                // Make Auto button active by default
+                document.querySelector('.quality-btn[data-quality="auto"]').classList.add('active');
+            } else {
+                // Hide quality selector if no levels available
+                qualitySelector.style.display = 'none';
+            }
+        }
+        function setQuality(level) {
+            if (hls) {
+                if (level === 'auto') {
+                    hls.currentLevel = -1; // Auto
+                } else {
+                    hls.currentLevel = level;
+                }
+                // Update active button
+                document.querySelectorAll('.quality-btn').forEach(btn => {
+                    btn.classList.remove('active');
+                });
+                document.querySelector(`.quality-btn[data-quality="${level}"]`).classList.add('active');
+            }
+        }
+        function startNetworkMonitoring() {
+            lastNetworkSpeedTest = 0;
+            networkSpeed = 0;
+            networkIndicator.style.display = 'block';
+            updateNetworkIndicator();
+            // Monitor bandwidth every 5 seconds
+            const monitorInterval = setInterval(() => {
+                if (videoPlayer.paused) {
+                    clearInterval(monitorInterval);
+                    return;
+                }
+                updateNetworkIndicator();
+            }, 5000);
+            // Also monitor during playback
+            videoPlayer.addEventListener('timeupdate', updateNetworkIndicator);
+        }
+        function stopNetworkMonitoring() {
+            networkIndicator.style.display = 'none';
+        }
+        function updateNetworkIndicator() {
+            const now = performance.now();
+            const bytesLoaded = videoPlayer.buffered.length > 0 ?
+                videoPlayer.buffered.end(videoPlayer.buffered.length - 1) * videoPlayer.bandwidth : 0;
+            if (lastNetworkSpeedTest > 0) {
+                const timeDiff = (now - lastNetworkSpeedTest) / 1000; // in seconds
+                const byteDiff = bytesLoaded - networkSpeed;
+                if (timeDiff > 0 && byteDiff > 0) {
+                    networkSpeed = byteDiff / timeDiff; // bytes per second
+                    const speedMbps = (networkSpeed * 8 / (1024 * 1024)).toFixed(2);
+                    networkIndicator.textContent = `${speedMbps} Mbps`;
+                    // Color code based on speed
+                    if (networkSpeed < 500000) { // < 4 Mbps
+                        networkIndicator.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
+                    } else if (networkSpeed < 1000000) { // < 8 Mbps
+                        networkIndicator.style.backgroundColor = 'rgba(255, 165, 0, 0.5)';
+                    } else {
+                        networkIndicator.style.backgroundColor = 'rgba(0, 128, 0, 0.5)';
+                    }
+                }
+            }
+            lastNetworkSpeedTest = now;
         }
         // Close popup function
         function closePlayerPopup() {
+            if (hls) {
+                hls.destroy();
+                hls = null;
+            }
             videoPlayer.pause();
             playerPopup.classList.remove('active');
             document.body.style.overflow = '';
+            stopNetworkMonitoring();
         }
         // Search functionality
             }
         });
         // Keyboard controls (only active when popup is visible)
         document.addEventListener('keydown', function(e) {
             if (!playerPopup.classList.contains('active')) return;
             switch(e.key) {
                 case ' ': // Space
+                    togglePlayPause();
                     e.preventDefault();
                     break;
                 case 'ArrowRight':
+                    seekRelative(10);
                     e.preventDefault();
                     break;
                 case 'ArrowLeft':
+                    seekRelative(-10);
                     e.preventDefault();
                     break;
                 case 'f':
                 case 'F':
+                    toggleFullscreen();
                     e.preventDefault();
                     break;
                 case 'm':
                 case 'M':
+                    toggleMute();
                     e.preventDefault();
                     break;
                 case 'Escape':
                 // Determine click position (left, center, or right third)
                 if (clickX < playerWidth / 3) {
                     // Left side - backward
+                    seekRelative(-10);
                 } else if (clickX > (playerWidth * 2) / 3) {
                     // Right side - forward
+                    seekRelative(10);
                 } else {
                     // Center - play/pause
+                    togglePlayPause();
                 }
                 e.preventDefault();
             } else {
                 // Single tap - wait to see if it becomes a double tap
                 tapTimeout = setTimeout(function() {
+                    // Single tap action (toggle controls visibility)
+                    if (videoPlayer.hasAttribute('controls')) {
+                        videoPlayer.removeAttribute('controls');
+                    } else {
+                        videoPlayer.setAttribute('controls', '');
+                    }
                 }, 300);
             }
             lastTap = currentTime;
         });
         // Initialize
         fetchVideoData();
     </script>