Update index.html

index.html

@@ -318,6 +318,7 @@
                 return;
             }
 
+            // 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);
@@ -331,11 +332,11 @@
                 </div>
             `).join('');
 
+            // Add click event listeners to video items
             document.querySelectorAll('.video-item').forEach(item => {
                 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]);
                     }
                 });
@@ -345,39 +346,53 @@
         // Function to render pagination
         function renderPagination() {
             const totalPages = Math.ceil(filteredVideos.length / videosPerPage);
+            
             if (totalPages <= 1) {
                 pagination.innerHTML = '';
                 return;
             }
 
+            // Determine which page buttons to show
             let buttons = [];
             if (totalPages <= 7) {
+                // Show all pages if 7 or fewer
                 for (let i = 1; i <= totalPages; i++) {
                     buttons.push(i);
                 }
             } else {
+                // Always include first page
                 buttons.push(1);
+                
+                // Add ellipsis if current page is more than 3
                 if (currentPage > 3) {
                     buttons.push('...');
                 }
+                
+                // Add pages around current page
                 const startPage = Math.max(2, currentPage - 1);
                 const endPage = Math.min(totalPages - 1, currentPage + 1);
                 for (let i = startPage; i <= endPage; i++) {
                     buttons.push(i);
                 }
+                
+                // Add ellipsis if current page is less than totalPages - 2
                 if (currentPage < totalPages - 2) {
                     buttons.push('...');
                 }
+                
+                // Always include last page
                 buttons.push(totalPages);
             }
             
+            // Create pagination HTML
             pagination.innerHTML = buttons.map(button => {
                 if (button === '...') {
                     return '<span class="page-btn">...</span>';
                 }
                 return `<button class="page-btn ${button === currentPage ? 'active' : ''}" data-page="${button}">${button}</button>`;
             }).join('');
-
+            
+            // Add click event listeners to page buttons
             document.querySelectorAll('.page-btn[data-page]').forEach(button => {
                 button.addEventListener('click', function() {
                     currentPage = parseInt(this.getAttribute('data-page'));
@@ -388,57 +403,35 @@
             });
         }
 
-        // Async function to play a video and handle HF Model Hub authentication if needed
-        async function playVideo(video) {
+        // Function to play video
+        function playVideo(video) {
             currentVideo = video;
             currentTitle.textContent = video.title;
             
+            // Handle different types of URLs (direct or Hugging Face)
             let videoUrl = video.url;
-            let finalUrl = videoUrl;
             
-            // 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;
-                    }
-                    localStorage.setItem('hf_token', token);
-                }
-                try {
-                    const response = await fetch(videoUrl, {
-                        headers: {
-                            'Authorization': `Bearer ${token}`
-                        }
-                    });
-                    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;
-                }
+            // 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 = finalUrl;
+            videoPlayer.src = videoUrl;
             videoPlayer.load();
             
-            // Show popup and disable background scrolling
+            // Show popup
             playerPopup.classList.add('active');
-            document.body.style.overflow = 'hidden';
             
-            // Play video after a short delay to allow the popup to render
+            // Play video after showing popup
             setTimeout(() => {
                 videoPlayer.play().catch(error => {
-                    console.error("Error playing video:", 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
@@ -462,14 +455,14 @@
         // Close popup when clicking close button
         closePopup.addEventListener('click', closePlayerPopup);
 
-        // Close popup when clicking outside the popup content
+        // Close popup when clicking outside content
         playerPopup.addEventListener('click', function(e) {
             if (e.target === playerPopup) {
                 closePlayerPopup();
             }
         });
 
-        // Video control buttons
+        // Video controls
         playPauseBtn.addEventListener('click', function() {
             if (videoPlayer.paused) {
                 videoPlayer.play();
@@ -489,9 +482,9 @@
         fullscreenBtn.addEventListener('click', function() {
             if (videoPlayer.requestFullscreen) {
                 videoPlayer.requestFullscreen();
-            } else if (videoPlayer.webkitRequestFullscreen) {
+            } else if (videoPlayer.webkitRequestFullscreen) { /* Safari */
                 videoPlayer.webkitRequestFullscreen();
-            } else if (videoPlayer.msRequestFullscreen) {
+            } else if (videoPlayer.msRequestFullscreen) { /* IE11 */
                 videoPlayer.msRequestFullscreen();
             }
         });
@@ -500,12 +493,12 @@
             videoPlayer.muted = !videoPlayer.muted;
         });
 
-        // Keyboard controls (active when popup is visible)
+        // Keyboard controls (only active when popup is visible)
         document.addEventListener('keydown', function(e) {
             if (!playerPopup.classList.contains('active')) return;
             
             switch(e.key) {
-                case ' ':
+                case ' ': // Space
                     if (videoPlayer.paused) {
                         videoPlayer.play();
                     } else {
@@ -542,7 +535,7 @@
             }
         });
 
-        // Double-tap controls for mobile/touch devices
+        // Double tap controls for mobile/touch devices
         let lastTap = 0;
         let tapTimeout;
         
@@ -552,15 +545,20 @@
             clearTimeout(tapTimeout);
             
             if (tapLength < 500 && tapLength > 0) {
+                // Double tap detected
                 const playerRect = videoPlayer.getBoundingClientRect();
                 const clickX = e.clientX - playerRect.left;
                 const playerWidth = playerRect.width;
                 
+                // 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 {
@@ -569,14 +567,21 @@
                 }
                 e.preventDefault();
             } else {
+                // Single tap - wait to see if it becomes a double tap
                 tapTimeout = setTimeout(function() {
-                    // Single tap action (no default action here)
+                    // Single tap action (do nothing or implement something)
                 }, 300);
             }
             lastTap = currentTime;
         });
 
-        // Fix for fullscreen mode changes
+        // 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);
@@ -587,22 +592,24 @@
                 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;
+                                       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 video data on page load
+        // Initialize
         fetchVideoData();
     </script>
 </body>
-</html>
+</html>