Update index.html

index.html

@@ -249,6 +249,44 @@
             grid-column: 1 / -1;
         }
         
+        .auth-container {
+            margin: 20px 0;
+            padding: 15px;
+            background-color: #f8f9fa;
+            border-radius: 5px;
+            display: none;
+        }
+        
+        .auth-container.show {
+            display: block;
+        }
+        
+        .auth-input {
+            width: 100%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        
+        .auth-btn {
+            background-color: #2c3e50;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        
+        .auth-btn:hover {
+            background-color: #1a252f;
+        }
+        
+        .error-message {
+            color: #e74c3c;
+            margin-top: 10px;
+        }
+        
         @media (max-width: 768px) {
             .video-list {
                 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -295,6 +333,13 @@
             <h1>Video Player</h1>
         </header>
         
+        <div class="auth-container" id="authContainer">
+            <h3>Private Repository Authentication</h3>
+            <input type="text" class="auth-input" id="hfToken" placeholder="Hugging Face Access Token">
+            <button class="auth-btn" id="authBtn">Authenticate</button>
+            <div class="error-message" id="authError"></div>
+        </div>
+        
         <div class="search-container">
             <input type="text" id="search" placeholder="Search videos...">
         </div>
@@ -307,7 +352,7 @@
     <div class="video-player-container" id="playerContainer">
         <div class="video-player-wrapper">
             <button class="close-player" id="closePlayer">&times;</button>
-            <video id="videoPlayer"></video>
+            <video id="videoPlayer" crossorigin="anonymous"></video>
             <div class="player-controls">
                 <div class="control-group">
                     <button class="control-btn" id="playPauseBtn">&#9658;</button>
@@ -338,6 +383,8 @@
         // Global variables
         let videos = [];
         let lastTapTime = 0;
+        let hfToken = null;
+        let isPrivateRepo = false;
         
         // DOM elements
         const videoListElement = document.getElementById('videoList');
@@ -356,6 +403,10 @@
         const volumeSlider = document.getElementById('volumeSlider');
         const fullscreenBtn = document.getElementById('fullscreenBtn');
         const closePlayer = document.getElementById('closePlayer');
+        const authContainer = document.getElementById('authContainer');
+        const hfTokenInput = document.getElementById('hfToken');
+        const authBtn = document.getElementById('authBtn');
+        const authError = document.getElementById('authError');
         
         // Load videos from JSON
         async function loadVideos() {
@@ -365,7 +416,27 @@
                     throw new Error('Failed to load videos');
                 }
                 videos = await response.json();
-                displayVideos(videos);
+                
+                // Check if any video URL contains 'huggingface.co' to determine if we need auth
+                isPrivateRepo = videos.some(video => 
+                    video.url.includes('huggingface.co') && 
+                    (video.url.includes('/blob/') || video.url.includes('/resolve/'))
+                );
+                
+                if (isPrivateRepo) {
+                    // Check if we already have a token in localStorage
+                    const storedToken = localStorage.getItem('hfToken');
+                    if (storedToken) {
+                        hfToken = storedToken;
+                        authContainer.classList.remove('show');
+                        displayVideos(videos);
+                    } else {
+                        authContainer.classList.add('show');
+                    }
+                } else {
+                    authContainer.classList.remove('show');
+                    displayVideos(videos);
+                }
             } catch (error) {
                 console.error('Error loading videos:', error);
                 videoListElement.innerHTML = '<div class="no-results">Failed to load videos. Please try again later.</div>';
@@ -401,20 +472,48 @@
         }
         
         // Play selected video
-        function playVideo(url, title) {
-            videoPlayer.src = url;
-            document.title = `${title} - Video Player`;
-            
-            // Show player
-            playerContainer.classList.add('show');
-            
-            // Attempt to play (may need user interaction on some browsers)
-            const playPromise = videoPlayer.play();
-            
-            if (playPromise !== undefined) {
-                playPromise.catch(error => {
-                    console.log('Auto-play prevented:', error);
-                });
+        async function playVideo(url, title) {
+            try {
+                // For HF Hub videos, modify the URL to use raw content
+                let finalUrl = url;
+                
+                if (url.includes('huggingface.co')) {
+                    // Convert blob/resolve URLs to raw URLs
+                    finalUrl = url
+                        .replace('/blob/', '/resolve/')
+                        .replace('https://huggingface.co/', 'https://cdn-lfs.huggingface.co/');
+                    
+                    if (isPrivateRepo && hfToken) {
+                        // Add token for private repos
+                        finalUrl += `?token=${hfToken}`;
+                    }
+                }
+                
+                // Set the video source
+                videoPlayer.src = finalUrl;
+                document.title = `${title} - Video Player`;
+                
+                // Show player
+                playerContainer.classList.add('show');
+                
+                // Attempt to play (may need user interaction on some browsers)
+                const playPromise = videoPlayer.play();
+                
+                if (playPromise !== undefined) {
+                    playPromise.catch(error => {
+                        console.log('Auto-play prevented:', error);
+                        // Show play button to indicate user needs to click
+                        playPauseBtn.innerHTML = '&#9658;';
+                    });
+                }
+                
+                // Set initial volume
+                videoPlayer.volume = volumeSlider.value;
+                
+            } catch (error) {
+                console.error('Error playing video:', error);
+                alert('Failed to play video. Please check your authentication for private repositories.');
+                closeVideoPlayer();
             }
         }
         
@@ -423,6 +522,11 @@
             videoPlayer.pause();
             playerContainer.classList.remove('show');
             document.title = 'Video Player';
+            
+            // Exit fullscreen if active
+            if (document.fullscreenElement) {
+                document.exitFullscreen();
+            }
         }
         
         // Format time (seconds to MM:SS)
@@ -476,6 +580,7 @@
         // Update volume
         function updateVolume() {
             videoPlayer.volume = volumeSlider.value;
+            videoPlayer.muted = (videoPlayer.volume === 0);
             if (videoPlayer.volume === 0) {
                 volumeBtn.innerHTML = '&#128263;';
             } else {
@@ -520,6 +625,17 @@
             }
         }
         
+        // Handle fullscreen change
+        function handleFullscreenChange() {
+            if (document.fullscreenElement) {
+                // When entering fullscreen, ensure video is playing
+                if (videoPlayer.paused) {
+                    videoPlayer.play();
+                    playPauseBtn.innerHTML = '&#10074;&#10074;';
+                }
+            }
+        }
+        
         // Handle double tap for skip
         function handleDoubleTap(e) {
             const currentTime = Date.now();
@@ -543,6 +659,40 @@
             lastTapTime = currentTime;
         }
         
+        // Handle authentication
+        function handleAuth() {
+            const token = hfTokenInput.value.trim();
+            if (!token) {
+                authError.textContent = 'Please enter a valid Hugging Face access token';
+                return;
+            }
+            
+            // Test the token with a simple API call
+            fetch('https://huggingface.co/api/whoami', {
+                headers: {
+                    'Authorization': `Bearer ${token}`
+                }
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Invalid token');
+                }
+                return response.json();
+            })
+            .then(data => {
+                // Token is valid
+                hfToken = token;
+                localStorage.setItem('hfToken', token);
+                authContainer.classList.remove('show');
+                authError.textContent = '';
+                displayVideos(videos);
+            })
+            .catch(error => {
+                console.error('Authentication failed:', error);
+                authError.textContent = 'Authentication failed. Please check your token.';
+            });
+        }
+        
         // Event listeners
         searchInput.addEventListener('input', () => {
             const searchTerm = searchInput.value.toLowerCase();
@@ -558,6 +708,14 @@
         });
         videoPlayer.addEventListener('click', togglePlayPause);
         videoPlayer.addEventListener('dblclick', handleDoubleTap);
+        videoPlayer.addEventListener('volumechange', () => {
+            volumeSlider.value = videoPlayer.volume;
+            if (videoPlayer.muted || videoPlayer.volume === 0) {
+                volumeBtn.innerHTML = '&#128263;';
+            } else {
+                volumeBtn.innerHTML = '&#128266;';
+            }
+        });
         
         playPauseBtn.addEventListener('click', togglePlayPause);
         skipBackBtn.addEventListener('click', () => skip(-10));
@@ -571,6 +729,13 @@
         
         fullscreenBtn.addEventListener('click', toggleFullscreen);
         closePlayer.addEventListener('click', closeVideoPlayer);
+        authBtn.addEventListener('click', handleAuth);
+        
+        // Fullscreen change events
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+        document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+        document.addEventListener('MSFullscreenChange', handleFullscreenChange);
         
         // Keyboard controls
         document.addEventListener('keydown', (e) => {