Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 13, 2025

Commit

3adfd32

verified ·

1 Parent(s): e7a2fbb

Update index.html

Browse files

Files changed (1) hide show

index.html +450 -617

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Video Player</title>
     <style>
         * {
             box-sizing: border-box;
@@ -11,772 +11,605 @@
             padding: 0;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         body {
             background-color: #f5f5f5;
-            color: #333;
-            line-height: 1.6;
-        }
-        .container {
             max-width: 1200px;
             margin: 0 auto;
-            padding: 20px;
         }
-        header {
-            background-color: #2c3e50;
-            color: white;
-            padding: 20px 0;
-            text-align: center;
-            margin-bottom: 30px;
-            border-radius: 5px;
         }
-        h1 {
-            font-size: 2.5rem;
         }
         .search-container {
-            margin: 20px 0;
-            display: flex;
-            justify-content: center;
         }
         #search {
-            width: 70%;
-            padding: 12px;
             border: 1px solid #ddd;
-            border-radius: 25px;
             font-size: 16px;
-            outline: none;
-            transition: all 0.3s;
         }
-        #search:focus {
-            border-color: #3498db;
-            box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
-        }
         .video-list {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
         }
         .video-item {
-            background-color: white;
             border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s, box-shadow 0.3s;
             cursor: pointer;
         }
         .video-item:hover {
             transform: translateY(-5px);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
         }
         .video-thumbnail {
-            position: relative;
-            padding-top: 56.25%; /* 16:9 aspect ratio */
-            background-color: #000;
-        }
-        .video-thumbnail img {
-            position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
-            height: 100%;
-            object-fit: cover;
         }
-        .video-info {
-            padding: 15px;
         }
-        .video-title {
-            font-size: 1.1rem;
-            margin-bottom: 5px;
-            font-weight: 600;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
             overflow: hidden;
         }
-        .video-player-container {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0, 0, 0, 0.9);
             display: flex;
-            flex-direction: column;
-            justify-content: center;
             align-items: center;
             z-index: 1000;
             opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s;
         }
-        .video-player-container.show {
             opacity: 1;
-            pointer-events: all;
         }
-        .video-player-wrapper {
             width: 90%;
-            max-width: 1000px;
-            position: relative;
-        }
-        #videoPlayer {
-            width: 100%;
             border-radius: 8px;
-            background-color: #000;
-        }
-        .player-controls {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background-color: rgba(0, 0, 0, 0.7);
-            padding: 10px;
-            border-radius: 0 0 8px 8px;
-            margin-top: -5px;
-        }
-        .control-group {
-            display: flex;
-            align-items: center;
-            gap: 15px;
         }
-        .control-btn {
-            background: none;
-            border: none;
             color: white;
-            font-size: 1.2rem;
-            cursor: pointer;
-            padding: 5px;
             border-radius: 50%;
-            width: 36px;
-            height: 36px;
             display: flex;
             align-items: center;
             justify-content: center;
-            transition: background-color 0.2s;
-        }
-        .control-btn:hover {
-            background-color: rgba(255, 255, 255, 0.2);
-        }
-        .progress-container {
-            flex-grow: 1;
-            margin: 0 15px;
-            height: 5px;
-            background-color: rgba(255, 255, 255, 0.2);
-            border-radius: 5px;
             cursor: pointer;
-            position: relative;
         }
-        .progress-bar {
-            height: 100%;
-            background-color: #3498db;
-            border-radius: 5px;
-            width: 0%;
             position: relative;
         }
-        .progress-time {
-            position: absolute;
-            top: -25px;
-            transform: translateX(-50%);
-            background-color: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 3px 6px;
-            border-radius: 4px;
-            font-size: 0.8rem;
-            display: none;
-        }
-        .progress-container:hover .progress-time {
-            display: block;
-        }
-        .close-player {
             position: absolute;
-            top: -40px;
-            right: 0;
-            background: none;
-            border: none;
-            color: white;
-            font-size: 1.5rem;
-            cursor: pointer;
         }
-        .time-display {
             color: white;
-            font-size: 0.9rem;
-            min-width: 100px;
-            text-align: center;
         }
-        .volume-container {
             display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-        .volume-slider {
-            width: 80px;
-            cursor: pointer;
-        }
-        .no-results {
-            text-align: center;
-            padding: 40px;
-            color: #666;
-            font-size: 1.2rem;
-            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));
-            }
-            .control-group {
-                gap: 8px;
-            }
-            .time-display {
-                min-width: 80px;
-                font-size: 0.8rem;
-            }
-            .volume-slider {
-                width: 60px;
-            }
         }
-        @media (max-width: 480px) {
-            .video-list {
-                grid-template-columns: 1fr;
-            }
-            #search {
-                width: 90%;
             }
-            .video-player-wrapper {
                 width: 95%;
             }
-            .control-btn {
-                font-size: 1rem;
-                width: 30px;
-                height: 30px;
-            }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <header>
-            <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>
-        <div class="video-list" id="videoList">
-            <!-- Videos will be loaded here -->
         </div>
     </div>
-    <div class="video-player-container" id="playerContainer">
-        <div class="video-player-wrapper">
-            <button class="close-player" id="closePlayer">&times;</button>
-            <video id="videoPlayer" crossorigin="anonymous"></video>
-            <div class="player-controls">
-                <div class="control-group">
-                    <button class="control-btn" id="playPauseBtn">&#9658;</button>
-                    <button class="control-btn" id="skipBackBtn">&#8630;</button>
-                    <button class="control-btn" id="skipForwardBtn">&#8631;</button>
-                    <div class="time-display">
-                        <span id="currentTime">0:00</span> / <span id="duration">0:00</span>
-                    </div>
-                </div>
-                <div class="progress-container" id="progressContainer">
-                    <div class="progress-bar" id="progressBar"></div>
-                    <div class="progress-time" id="progressTime">0:00</div>
-                </div>
-                <div class="control-group">
-                    <div class="volume-container">
-                        <button class="control-btn" id="volumeBtn">&#128266;</button>
-                        <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="1">
-                    </div>
-                    <button class="control-btn" id="fullscreenBtn">&#9974;</button>
-                </div>
             </div>
         </div>
     </div>
     <script>
         // Global variables
-        let videos = [];
-        let lastTapTime = 0;
-        let hfToken = null;
-        let isPrivateRepo = false;
-        // DOM elements
-        const videoListElement = document.getElementById('videoList');
         const searchInput = document.getElementById('search');
-        const playerContainer = document.getElementById('playerContainer');
         const videoPlayer = document.getElementById('videoPlayer');
         const playPauseBtn = document.getElementById('playPauseBtn');
-        const skipBackBtn = document.getElementById('skipBackBtn');
-        const skipForwardBtn = document.getElementById('skipForwardBtn');
-        const progressBar = document.getElementById('progressBar');
-        const progressContainer = document.getElementById('progressContainer');
-        const progressTime = document.getElementById('progressTime');
-        const currentTimeDisplay = document.getElementById('currentTime');
-        const durationDisplay = document.getElementById('duration');
-        const volumeBtn = document.getElementById('volumeBtn');
-        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() {
             try {
                 const response = await fetch('database.json');
                 if (!response.ok) {
-                    throw new Error('Failed to load videos');
                 }
-                videos = await response.json();
-                // 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>';
             }
         }
-        // Display videos in the list
-        function displayVideos(videosToDisplay) {
-            if (videosToDisplay.length === 0) {
-                videoListElement.innerHTML = '<div class="no-results">No videos found. Try a different search.</div>';
                 return;
             }
-            videoListElement.innerHTML = videosToDisplay.map(video => `
-                <div class="video-item" data-url="${video.url}" data-title="${video.title}">
                     <div class="video-thumbnail">
-                        <img src="${video.thumbnail || 'https://via.placeholder.com/300x169?text=No+Thumbnail'}" alt="${video.title}">
-                    </div>
-                    <div class="video-info">
-                        <h3 class="video-title">${video.title}</h3>
                     </div>
                 </div>
             `).join('');
-            // Add click event to video items
             document.querySelectorAll('.video-item').forEach(item => {
-                item.addEventListener('click', () => {
-                    const videoUrl = item.getAttribute('data-url');
-                    const videoTitle = item.getAttribute('data-title');
-                    playVideo(videoUrl, videoTitle);
                 });
             });
         }
-        // Play selected video
-        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();
             }
-        }
-        // Close video player
-        function closeVideoPlayer() {
-            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)
-        function formatTime(seconds) {
-            const minutes = Math.floor(seconds / 60);
-            const remainingSeconds = Math.floor(seconds % 60);
-            return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
-        }
-        // Update progress bar
-        function updateProgressBar() {
-            const currentTime = videoPlayer.currentTime;
-            const duration = videoPlayer.duration;
-            if (duration) {
-                const progressPercent = (currentTime / duration) * 100;
-                progressBar.style.width = `${progressPercent}%`;
-                currentTimeDisplay.textContent = formatTime(currentTime);
-                durationDisplay.textContent = formatTime(duration);
-            }
-        }
-        // Skip forward or backward
-        function skip(seconds) {
-            videoPlayer.currentTime += seconds;
-        }
-        // Toggle play/pause
-        function togglePlayPause() {
-            if (videoPlayer.paused) {
-                videoPlayer.play();
-                playPauseBtn.innerHTML = '&#10074;&#10074;';
-            } else {
-                videoPlayer.pause();
-                playPauseBtn.innerHTML = '&#9658;';
-            }
-        }
-        // Toggle mute
-        function toggleMute() {
-            videoPlayer.muted = !videoPlayer.muted;
-            if (videoPlayer.muted) {
-                volumeBtn.innerHTML = '&#128263;';
-                volumeSlider.value = 0;
-            } else {
-                volumeBtn.innerHTML = '&#128266;';
-                volumeSlider.value = videoPlayer.volume;
-            }
-        }
-        // Update volume
-        function updateVolume() {
-            videoPlayer.volume = volumeSlider.value;
-            videoPlayer.muted = (videoPlayer.volume === 0);
-            if (videoPlayer.volume === 0) {
-                volumeBtn.innerHTML = '&#128263;';
-            } else {
-                volumeBtn.innerHTML = '&#128266;';
-            }
-        }
-        // Seek to position in video
-        function seek(e) {
-            const width = this.clientWidth;
-            const clickX = e.offsetX;
-            const duration = videoPlayer.duration;
-            videoPlayer.currentTime = (clickX / width) * duration;
         }
-        // Update progress time indicator
-        function updateProgressTime(e) {
-            const width = this.clientWidth;
-            const clickX = e.offsetX;
-            const duration = videoPlayer.duration;
-            const seekTime = (clickX / width) * duration;
-            progressTime.textContent = formatTime(seekTime);
-            // Position the time indicator
-            const progressContainerRect = progressContainer.getBoundingClientRect();
-            const progressTimeWidth = progressTime.offsetWidth;
-            let leftPosition = e.clientX - progressContainerRect.left - (progressTimeWidth / 2);
-            // Keep within bounds
-            leftPosition = Math.max(0, Math.min(leftPosition, progressContainerRect.width - progressTimeWidth));
-            progressTime.style.left = `${leftPosition}px`;
-        }
-        // Toggle fullscreen
-        function toggleFullscreen() {
-            if (!document.fullscreenElement) {
-                playerContainer.requestFullscreen().catch(err => {
-                    console.error(`Error attempting to enable fullscreen: ${err.message}`);
-                });
-            } else {
-                document.exitFullscreen();
             }
-        }
-        // 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();
-            const tapLength = currentTime - lastTapTime;
-            if (tapLength < 300 && tapLength > 0) {
-                // Double tap detected
-                const rect = videoPlayer.getBoundingClientRect();
-                const tapPosition = e.clientX - rect.left;
-                const halfWidth = rect.width / 2;
-                if (tapPosition < halfWidth) {
-                    // Left side - skip backward
-                    skip(-10);
-                } else {
-                    // Right side - skip forward
-                    skip(10);
-                }
-            }
-            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();
-            const filteredVideos = videos.filter(video =>
                 video.title.toLowerCase().includes(searchTerm)
             );
-            displayVideos(filteredVideos);
         });
-        videoPlayer.addEventListener('timeupdate', updateProgressBar);
-        videoPlayer.addEventListener('ended', () => {
-            playPauseBtn.innerHTML = '&#9658;';
         });
-        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));
-        skipForwardBtn.addEventListener('click', () => skip(10));
-        progressContainer.addEventListener('click', seek);
-        progressContainer.addEventListener('mousemove', updateProgressTime);
-        volumeBtn.addEventListener('click', toggleMute);
-        volumeSlider.addEventListener('input', updateVolume);
-        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) => {
-            if (!playerContainer.classList.contains('show')) return;
-            switch (e.key) {
-                case ' ':
-                case 'k':
-                    togglePlayPause();
                     e.preventDefault();
                     break;
-                case 'ArrowLeft':
-                    skip(-5);
-                    break;
                 case 'ArrowRight':
-                    skip(5);
                     break;
-                case 'ArrowUp':
-                    videoPlayer.volume = Math.min(1, videoPlayer.volume + 0.1);
-                    volumeSlider.value = videoPlayer.volume;
-                    updateVolume();
                     break;
-                case 'ArrowDown':
-                    videoPlayer.volume = Math.max(0, videoPlayer.volume - 0.1);
-                    volumeSlider.value = videoPlayer.volume;
-                    updateVolume();
                     break;
                 case 'm':
-                    toggleMute();
-                    break;
-                case 'f':
-                    toggleFullscreen();
                     break;
                 case 'Escape':
-                    closeVideoPlayer();
                     break;
             }
         });
         // Initialize
-        loadVideos();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Library</title>
     <style>
         * {
             box-sizing: border-box;
             padding: 0;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         body {
             background-color: #f5f5f5;
+            padding: 20px;
             max-width: 1200px;
             margin: 0 auto;
         }
+        .container {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
         }
+        .header {
+            background-color: #333;
+            color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
         }
         .search-container {
+            padding: 15px;
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
         }
         #search {
+            width: 100%;
+            padding: 10px;
             border: 1px solid #ddd;
+            border-radius: 4px;
             font-size: 16px;
         }
         .video-list {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            padding: 15px;
+        }
+        .video-grid {
             display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 15px;
         }
         .video-item {
+            padding: 15px;
+            border: 1px solid #eee;
             border-radius: 8px;
             cursor: pointer;
+            transition: all 0.2s;
+            background-color: white;
         }
         .video-item:hover {
             transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         }
         .video-thumbnail {
             width: 100%;
+            height: 156px;
+            background-color: #333;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 10px;
+            overflow: hidden;
         }
+        .video-thumbnail i {
+            font-size: 48px;
+            color: white;
         }
+        .video-item-title {
+            font-weight: 500;
+            margin-top: 10px;
+            white-space: nowrap;
             overflow: hidden;
+            text-overflow: ellipsis;
         }
+        .pagination {
+            display: flex;
+            justify-content: center;
+            gap: 5px;
+            margin-top: 20px;
+        }
+        .page-btn {
+            padding: 8px 12px;
+            background-color: white;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .page-btn:hover {
+            background-color: #f0f0f0;
+        }
+        .page-btn.active {
+            background-color: #333;
+            color: white;
+            border-color: #333;
+        }
+        .popup-overlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background-color: rgba(0,0,0,0.8);
             display: flex;
             align-items: center;
+            justify-content: center;
             z-index: 1000;
             opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s, visibility 0.3s;
         }
+        .popup-overlay.active {
             opacity: 1;
+            visibility: visible;
         }
+        .popup-content {
             width: 90%;
+            max-width: 1024px;
+            background-color: #222;
             border-radius: 8px;
+            overflow: hidden;
+            position: relative;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
         }
+        .close-popup {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: rgba(0,0,0,0.5);
             color: white;
+            border: none;
+            width: 30px;
+            height: 30px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
+            z-index: 10;
+            font-size: 18px;
         }
+        .player-wrapper {
             position: relative;
+            width: 100%;
+            padding-top: 56.25%; /* 16:9 Aspect Ratio */
         }
+        #videoPlayer {
             position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #000;
         }
+        .popup-title {
             color: white;
+            padding: 15px;
+            font-size: 1.2em;
+            background-color: #111;
         }
+        .controls {
             display: flex;
+            gap: 10px;
             padding: 15px;
+            background-color: #111;
+            flex-wrap: wrap;
         }
+        .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 {
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             }
+            .popup-content {
                 width: 95%;
             }
+        }
+        .no-videos {
+            padding: 20px;
+            text-align: center;
+            color: #777;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <div class="header">
+            <h1>Video Library</h1>
         </div>
         <div class="search-container">
             <input type="text" id="search" placeholder="Search videos...">
         </div>
+        <div class="video-list">
+            <div class="video-grid" id="videoGrid">
+                <div class="video-item">
+                    <div class="video-thumbnail">Loading...</div>
+                </div>
+            </div>
+            <div class="pagination" id="pagination"></div>
         </div>
     </div>
+    <!-- Video Player Popup -->
+    <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>
+            <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>
     <script>
         // Global variables
+        let videoData = [];
+        let filteredVideos = [];
+        let currentVideo = null;
+        let currentPage = 1;
+        const videosPerPage = 10;
+        // 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 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 {
                 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) {
+                videoGrid.innerHTML = '<div class="no-videos">No videos found</div>';
+                pagination.innerHTML = '';
                 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);
+            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>
                 </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) {
+                        playVideo(filteredVideos[index]);
+                    }
                 });
             });
         }
+        // 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'));
+                    renderPagination();
+                    renderVideoGrid();
+                    window.scrollTo(0, 0);
+                });
+            });
         }
+        // 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;
+            // 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
+        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);
+        // Close popup when clicking outside content
+        playerPopup.addEventListener('click', function(e) {
+            if (e.target === playerPopup) {
+                closePlayerPopup();
+            }
         });
+        // 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':
+                    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) {
+                // 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 {
+                        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>
 </body>
 </html>