Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 13, 2025

Commit

77d1f67

verified ·

1 Parent(s): 9b8a30b

Update index.html

Browse files

Files changed (1) hide show

index.html +721 -906

index.html CHANGED Viewed

@@ -3,102 +3,297 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Video Library - Optimized Streaming</title>
-    <!-- Load Plyr.io -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.css" />
     <style>
-        /* Basic Reset & Font */
-        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
-        body { background-color: #f5f5f5; padding: 20px; max-width: 1200px; margin: 0 auto; }
-        /* Layout & Structure */
-        .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; }
-        .no-videos { padding: 20px; text-align: center; color: #777; }
-        .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; }
-        .page-btn:disabled { cursor: not-allowed; opacity: 0.6; }
-        /* Video Item */
-        .video-item { padding: 15px; border: 1px solid #eee; border-radius: 8px; cursor: pointer; transition: all 0.2s; background-color: white; display: flex; flex-direction: column; }
-        .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: #e0e0e0; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; overflow: hidden; position: relative; }
-        .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
-        .video-item:hover .video-thumbnail img { transform: scale(1.05); }
-        .video-thumbnail::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.3), transparent); opacity: 0; transition: opacity 0.3s; }
-        .video-item:hover .video-thumbnail::after { opacity: 1; }
-        .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-size: 45px; color: white; opacity: 0; transition: opacity 0.3s, transform 0.3s; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
-        .video-item:hover .play-icon { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
-        .video-item-title { font-weight: 500; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.95em; }
-        /* Popup Player */
-        .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
-        .popup-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s linear 0s; }
-        .popup-content { width: 90%; max-width: 1100px; background-color: #111; border-radius: 8px; overflow: hidden; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.5); display: flex; flex-direction: column; max-height: 90vh; }
-        .close-popup { position: absolute; top: 12px; right: 12px; background-color: rgba(30,30,30,0.7); color: white; border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1010; font-size: 18px; transition: background-color 0.2s; line-height: 1; }
-        .close-popup:hover { background-color: rgba(200,0,0,0.8); }
-        .popup-header { background-color: #1a1a1a; padding: 12px 15px 12px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; }
-        .popup-title { color: white; font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 50px; }
-        .quality-selector { display: flex; align-items: center; gap: 8px; color: #ccc; font-size: 0.9em; }
-        .quality-selector select { padding: 4px 8px; background-color: #333; color: white; border: 1px solid #555; border-radius: 4px; font-size: 0.9em; }
-        .player-wrapper { position: relative; width: 100%; /*padding-top: 56.25%; 16:9 */ background-color: #000; flex-grow: 1; display: flex; align-items: center; justify-content: center; }
-        /* Make Plyr fill the wrapper */
-        .plyr { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
-        #playerContainer { width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; }
-        #playerContainer video { max-width:100%; max-height:100%; object-fit: contain; }
-        /* Loading & Debug */
-        .player-loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2em; z-index: 5; flex-direction: column; gap: 10px; pointer-events: none; }
-        .player-loading .spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; }
-        @keyframes spin { to { transform: rotate(360deg); } }
-        .debug-controls { position: absolute; bottom: 70px; left: 10px; z-index: 1005; }
-        .debug-toggle { background-color: rgba(0,0,0,0.6); color: white; border: 1px solid #555; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; transition: background-color 0.2s; }
-        .debug-toggle:hover { background-color: rgba(50,50,50,0.8); }
-        .debug-overlay { position: absolute; bottom: 100px; left: 10px; background-color: rgba(0,0,0,0.75); color: #e0e0e0; padding: 10px; border-radius: 4px; font-size: 11px; max-width: 300px; z-index: 1005; display: none; line-height: 1.5; max-height: 200px; overflow-y: auto; white-space: pre-wrap; }
-        /* Responsive */
-        @media (max-width: 768px) {
-            .video-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
-            .popup-content { width: 98%; max-height: 95vh; }
-            .popup-header { flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 50px; /* Space for close btn */ }
-            .popup-title { font-size: 1em; }
-            .quality-selector { font-size: 0.8em; }
-            .quality-selector select { font-size: 0.8em; }
-            .debug-overlay { font-size: 10px; max-width: 200px; }
-            .debug-toggle { font-size: 10px; padding: 4px 8px; }
         }
-        @media (max-width: 480px) {
-            .video-grid { grid-template-columns: 1fr; gap: 10px; } /* Single column */
-            .video-item { flex-direction: row; gap: 10px; align-items: center; padding: 10px; }
-            .video-thumbnail { width: 120px; height: 67px; margin-bottom: 0; flex-shrink: 0; }
-            .video-item-title { white-space: normal; text-overflow: clip; overflow: visible; font-size: 0.9em; }
-            .play-icon { font-size: 30px; }
-            body { padding: 10px; }
-            .container { gap: 15px; }
         }
     </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">
-                <!-- Video items will be loaded here -->
-                <div class="video-thumbnail">Loading videos...</div>
             </div>
             <div class="pagination" id="pagination"></div>
         </div>
@@ -107,954 +302,574 @@
     <!-- Video Player Popup -->
     <div class="popup-overlay" id="playerPopup">
         <div class="popup-content">
-            <button class="close-popup" id="closePopup" title="Close Player (Esc)">✕</button>
-            <div class="popup-header">
-                <div class="popup-title" id="currentTitle">Video Title</div>
-                <div class="quality-selector">
-                    <label for="qualitySelector">Quality:</label>
-                    <select id="qualitySelector">
-                        <option value="auto">Auto</option>
-                        <!-- Quality options added dynamically -->
-                    </select>
-                </div>
-            </div>
             <div class="player-wrapper">
-                <div id="playerContainer">
-                    <!-- Video element will be created here -->
-                </div>
-                <div class="player-loading" id="playerLoading">
-                    <div class="spinner"></div>
-                    <span>Loading...</span>
-                </div>
-                <div class="debug-controls">
-                     <button class="debug-toggle" id="debugToggle">Stats</button>
-                </div>
-                 <div class="debug-overlay" id="debugOverlay">
-                    Loading metrics...
-                </div>
             </div>
         </div>
     </div>
-    <!-- Load required scripts -->
-    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
-    <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script> <!-- DASH -->
-    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <!-- HLS -->
     <script>
-        // --- Global Variables ---
         let videoData = [];
         let filteredVideos = [];
         let currentVideo = null;
         let currentPage = 1;
-        const videosPerPage = 12; // Adjusted for better grid layout
-        let player = null; // Plyr instance
-        let hls = null;    // HLS.js instance
-        let dash = null;   // Dash.js instance
-        let debugInterval = null;
-        let isDebugVisible = false;
-        // --- DOM Elements ---
         const videoGrid = document.getElementById('videoGrid');
         const pagination = document.getElementById('pagination');
         const searchInput = document.getElementById('search');
         const playerPopup = document.getElementById('playerPopup');
         const currentTitle = document.getElementById('currentTitle');
         const closePopup = document.getElementById('closePopup');
-        const playerContainer = document.getElementById('playerContainer');
-        const playerLoading = document.getElementById('playerLoading');
-        const qualitySelector = document.getElementById('qualitySelector');
-        const debugOverlay = document.getElementById('debugOverlay');
-        const debugToggle = document.getElementById('debugToggle');
-        // --- Core Functions ---
-        // Fetch video data from JSON
         async function fetchVideoData() {
-            videoGrid.innerHTML = '<div class="video-thumbnail">Loading video index...</div>';
             try {
-                // Add cache busting query param to avoid stale data
-                const response = await fetch(`database.json?v=${Date.now()}`);
                 if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
                 }
                 const data = await response.json();
-                // Ensure data format is correct
-                videoData = Array.isArray(data) ? data :
-                          (data && Array.isArray(data.videos) ? data.videos : []);
-                if (!videoData.length) {
-                    console.warn("No videos found in database.json or format is incorrect.");
-                    videoGrid.innerHTML = '<div class="no-videos">No videos found. Check database.json.</div>';
-                    return;
-                }
-                // Basic validation of video objects
-                videoData = videoData.filter(v => v && v.title && v.url);
-                // --- IMPORTANT: Add Thumbnail URLs ---
-                // You NEED to add 'thumbnailUrl' to your database.json entries
-                // Example: { "title": "My Video", "url": "path/to/manifest.m3u8", "thumbnailUrl": "path/to/thumbnail.jpg" }
                 videoData.forEach(video => {
-                    if (!video.thumbnailUrl) {
-                         // Fallback placeholder - REPLACE THIS IN PRODUCTION
-                         video.thumbnailUrl = `https://via.placeholder.com/280x156/CCCCCC/000000?text=${encodeURIComponent(video.title.substring(0, 15))}`;
                     }
                 });
                 filteredVideos = [...videoData];
-                currentPage = 1; // Reset page on data load/refresh
                 renderPagination();
                 renderVideoGrid();
-                preloadThumbnailsForPage(currentPage);
             } catch (error) {
-                console.error('Error fetching or processing video data:', error);
                 videoGrid.innerHTML = `<div class="no-videos">Error loading videos: ${error.message}</div>`;
             }
         }
-        // Preload thumbnails for the visible page
-        function preloadThumbnailsForPage(page) {
-            const startIndex = (page - 1) * videosPerPage;
-            const endIndex = Math.min(startIndex + videosPerPage, filteredVideos.length);
-            const videosOnPage = filteredVideos.slice(startIndex, endIndex);
-            videosOnPage.forEach(video => {
-                if (video.thumbnailUrl) {
-                    const img = new Image();
-                    img.src = video.thumbnailUrl;
-                }
-            });
-        }
-        // Render video grid for the current page
         function renderVideoGrid() {
-            videoGrid.innerHTML = ''; // Clear previous items
             if (filteredVideos.length === 0) {
-                videoGrid.innerHTML = '<div class="no-videos">No videos match your search.</div>';
                 return;
             }
             const startIndex = (currentPage - 1) * videosPerPage;
             const endIndex = Math.min(startIndex + videosPerPage, filteredVideos.length);
-            if (startIndex >= filteredVideos.length) {
-                 videoGrid.innerHTML = '<div class="no-videos">No videos on this page.</div>';
-                 return;
-            }
-            const fragment = document.createDocumentFragment();
-            for (let i = startIndex; i < endIndex; i++) {
-                const video = filteredVideos[i];
-                const videoItem = document.createElement('div');
-                videoItem.className = 'video-item';
-                videoItem.dataset.index = i; // Store the index in the filtered list
-                videoItem.innerHTML = `
                     <div class="video-thumbnail">
-                        <img src="${video.thumbnailUrl || ''}" alt="${video.title}" loading="lazy" onerror="this.style.display='none'; this.parentElement.style.backgroundColor='#ccc';">
                         <div class="play-icon">▶</div>
                     </div>
                     <div class="video-item-title">${video.title}</div>
-                `;
-                videoItem.addEventListener('click', () => {
-                    const index = parseInt(videoItem.dataset.index);
-                     if (!isNaN(index) && index >= 0 && index < filteredVideos.length) {
-                         playVideo(filteredVideos[index]);
-                     } else {
-                         console.error("Invalid video index clicked:", videoItem.dataset.index);
-                     }
                 });
-                fragment.appendChild(videoItem);
-            }
-            videoGrid.appendChild(fragment);
         }
-        // Render pagination controls
         function renderPagination() {
-            pagination.innerHTML = ''; // Clear previous pagination
             const totalPages = Math.ceil(filteredVideos.length / videosPerPage);
-            if (totalPages <= 1) return; // No pagination needed for 1 or 0 pages
-            const maxVisibleButtons = 7; // Max number of page buttons to show
-            let startPage, endPage;
-            if (totalPages <= maxVisibleButtons) {
-                startPage = 1;
-                endPage = totalPages;
             } else {
-                const maxPagesBeforeCurrent = Math.floor((maxVisibleButtons - 3) / 2);
-                const maxPagesAfterCurrent = Math.ceil((maxVisibleButtons - 3) / 2);
-                if (currentPage <= maxPagesBeforeCurrent + 1) {
-                    startPage = 1;
-                    endPage = maxVisibleButtons - 1;
-                } else if (currentPage + maxPagesAfterCurrent >= totalPages) {
-                    startPage = totalPages - (maxVisibleButtons - 2);
-                    endPage = totalPages;
-                } else {
-                    startPage = currentPage - maxPagesBeforeCurrent;
-                    endPage = currentPage + maxPagesAfterCurrent;
                 }
-            }
-            const fragment = document.createDocumentFragment();
-            // Previous Button
-            const prevBtn = document.createElement('button');
-            prevBtn.className = 'page-btn';
-            prevBtn.textContent = '‹';
-            prevBtn.disabled = currentPage === 1;
-            prevBtn.addEventListener('click', () => {
-                if (currentPage > 1) {
-                    currentPage--;
-                    renderPagination();
-                    renderVideoGrid();
-                    preloadThumbnailsForPage(currentPage);
-                    window.scrollTo(0, videoGrid.offsetTop - 20);
                 }
-            });
-            fragment.appendChild(prevBtn);
-            // Page number buttons
-            if (startPage > 1) {
-                fragment.appendChild(createPageButton(1));
-                if (startPage > 2) {
-                    const ellipsis = document.createElement('span');
-                    ellipsis.className = 'page-btn';
-                    ellipsis.textContent = '...';
-                    ellipsis.style.cursor = 'default';
-                    fragment.appendChild(ellipsis);
                 }
             }
-            for (let i = startPage; i <= endPage; i++) {
-                fragment.appendChild(createPageButton(i));
-            }
-            if (endPage < totalPages) {
-                 if (endPage < totalPages - 1) {
-                    const ellipsis = document.createElement('span');
-                    ellipsis.className = 'page-btn';
-                    ellipsis.textContent = '...';
-                    ellipsis.style.cursor = 'default';
-                    fragment.appendChild(ellipsis);
                 }
-                fragment.appendChild(createPageButton(totalPages));
-            }
-             // Next Button
-            const nextBtn = document.createElement('button');
-            nextBtn.className = 'page-btn';
-            nextBtn.textContent = '›';
-            nextBtn.disabled = currentPage === totalPages;
-            nextBtn.addEventListener('click', () => {
-                if (currentPage < totalPages) {
-                    currentPage++;
                     renderPagination();
                     renderVideoGrid();
-                    preloadThumbnailsForPage(currentPage);
-                     window.scrollTo(0, videoGrid.offsetTop - 20);
-                }
-            });
-            fragment.appendChild(nextBtn);
-            pagination.appendChild(fragment);
-        }
-        // Helper to create a single pagination button
-        function createPageButton(pageNumber) {
-            const button = document.createElement('button');
-            button.className = 'page-btn';
-            button.textContent = pageNumber;
-            button.dataset.page = pageNumber;
-            if (pageNumber === currentPage) {
-                button.classList.add('active');
-            }
-            button.addEventListener('click', function() {
-                if (currentPage !== pageNumber) {
-                    currentPage = pageNumber;
-                    renderPagination(); // Re-render pagination to update active state
-                    renderVideoGrid();
-                    preloadThumbnailsForPage(currentPage);
-                     window.scrollTo(0, videoGrid.offsetTop - 20); // Scroll towards top of grid
-                }
             });
-            return button;
         }
-        // --- Player Functions ---
-        // Clean up previous player instances (Plyr, HLS, DASH)
-        function cleanupPlayerInstances() {
-            console.log("Cleaning up player instances...");
-            if (debugInterval) {
-                clearInterval(debugInterval);
-                debugInterval = null;
-            }
-            if (player) {
-                try {
-                    player.destroy();
-                } catch (e) { console.error("Error destroying Plyr:", e); }
-                player = null;
-            }
-            if (hls) {
-                 try {
-                    hls.stopLoad();
-                    hls.detachMedia();
-                    hls.destroy();
-                } catch (e) { console.error("Error destroying HLS:", e); }
-                hls = null;
-            }
-            if (dash) {
-                 try {
-                    dash.reset(); // Resets the MediaPlayer instance
-                 } catch (e) { console.error("Error resetting DASH:", e); }
-                dash = null; // Assuming create() makes a new context
-            }
-            playerContainer.innerHTML = ''; // Clear the container
-            qualitySelector.innerHTML = '<option value="auto">Auto</option>'; // Reset quality
-            qualitySelector.value = 'auto';
-            qualitySelector.disabled = true;
-            debugOverlay.style.display = 'none';
-            isDebugVisible = false;
-        }
-        // Play the selected video
         function playVideo(video) {
-            if (!video || !video.url) {
-                console.error("Invalid video object passed to playVideo:", video);
-                alert("Cannot play this video: Invalid data.");
-                return;
-            }
             currentVideo = video;
-            currentTitle.textContent = video.title || 'Untitled Video';
-            playerLoading.style.display = 'flex';
-            playerPopup.classList.add('active');
-            document.body.style.overflow = 'hidden'; // Prevent background scroll
-            cleanupPlayerInstances(); // Clean up before creating new
-            // Create the video element for Plyr
-            const videoElement = document.createElement('video');
-            videoElement.id = 'videoPlayerInstance'; // Give it an ID
-            videoElement.setAttribute('playsinline', ''); // Important for iOS
-            videoElement.setAttribute('crossorigin', 'anonymous'); // Needed for HLS/DASH usually
-            // videoElement.controls = true; // Let Plyr handle controls
-            playerContainer.appendChild(videoElement);
-            initializeStreamingPlayer(videoElement, video.url);
-        }
-        // Initialize HLS.js, Dash.js, or standard HTML5 video based on URL
-        function initializeStreamingPlayer(videoElement, videoUrl) {
-            const url = videoUrl.trim();
-            const fileExtension = url.split('.').pop().toLowerCase().split('?')[0]; // Get extension before query params
-            console.log(`Initializing player for URL: ${url} (Extension: ${fileExtension})`);
-             // --- IMPORTANT URL CHECK ---
-             // Check if the URL is actually accessible and looks like a media file/manifest
-             if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                 console.error("Video URL does not start with http:// or https://:", url);
-                 alert(`Error: Invalid video URL format provided: ${url}`);
-                 playerLoading.style.display = 'none';
-                 closePlayerPopup(); // Close the broken player
-                 return;
-             }
-             // Check for Hugging Face direct links - they might need specific handling
-             // or might not support streaming manifests directly without extra steps.
-             if (url.includes('huggingface.co') && (fileExtension === 'mp4' || fileExtension === 'webm' || fileExtension === 'mov')) {
-                 console.warn("Detected direct Hugging Face file URL. ABR streaming (HLS/DASH) requires a manifest (.m3u8/.mpd). Seeking performance might be limited.");
-                 // Proceed with standard player, but inform the user about potential limitations.
-             }
-            // 1. Check for HLS (.m3u8)
-            if (fileExtension === 'm3u8') {
-                if (Hls.isSupported()) {
-                    console.log("Using HLS.js");
-                    hls = new Hls({
-                        // Configuration focused on stability and seeking
-                        // Start with auto quality
-                        startLevel: -1,
-                        // Buffer settings: Allow seeking back easily, manage forward buffer
-                        maxBufferLength: 60,         // Max seconds of buffer
-                        maxMaxBufferLength: 120,       // Max buffer size when seeking forward
-                        backBufferLength: 90,       // Keep 90s behind current time for seeking back
-                        // ABR settings: More stable, less aggressive switching
-                        abrEwmaDefaultEstimate: 500000, // Start estimate lower (500kbps)
-                        abrBandWidthFactor: 0.8,      // Be slightly conservative
-                        abrBandWidthUpFactor: 0.6,    // Don't jump up too eagerly
-                        // Performance
-                        enableWorker: true,          // Use web workers if available
-                        // Low Latency (might not be needed unless it's a live stream)
-                        // lowLatencyMode: false,
-                        // Seeking / Frag loading tweaks
-                        fragLoadingMaxRetry: 4,
-                        levelLoadingMaxRetry: 4,
-                        manifestLoadingMaxRetry: 2,
-                        fragLoadingTimeOut: 15000, // 15 seconds timeout for fragments
-                        levelLoadingTimeOut: 10000,
-                        manifestLoadingTimeOut: 10000,
-                    });
-                    hls.loadSource(url);
-                    hls.attachMedia(videoElement);
-                    hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
-                        console.log("HLS Manifest Parsed:", data.levels);
-                        initPlyr(videoElement); // Init Plyr *after* manifest is ready
-                        populateQualitySelector(hls.levels.map((l, i) => ({ height: l.height, index: i })), 'hls');
-                    });
-                    hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
-                        console.log(`HLS Level Switched: ${data.level}`);
-                         if (qualitySelector.value !== 'auto') {
-                           // If user manually selected a quality, but ABR switched away
-                           // (e.g., due to bandwidth), reflect the change back to Auto.
-                           // Or keep it? Decide on UX. Let's reset to Auto for clarity.
-                           // const currentLevel = hls.levels[data.level];
-                           // if (qualitySelector.value != currentLevel.height) {
-                           //    console.log("ABR override manual selection, resetting selector to Auto");
-                           //    qualitySelector.value = 'auto';
-                           // }
-                        }
-                        updateDebugInfo();
-                    });
-                    hls.on(Hls.Events.ERROR, (event, data) => {
-                        console.error('HLS Error:', data);
-                        handleStreamingError(data, 'HLS');
-                    });
-                } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
-                    console.log("Using native HLS support");
-                    videoElement.src = url;
-                    initPlyr(videoElement); // Init Plyr for native HLS
-                    qualitySelector.disabled = true; // Native HLS often doesn't expose quality levels easily
-                     videoElement.addEventListener('loadedmetadata', () => {
-                        playerLoading.style.display = 'none';
-                    });
-                } else {
-                    console.error("HLS not supported by HLS.js or natively.");
-                    alert("Cannot play this video format (HLS) in your browser.");
-                    playerLoading.style.display = 'none';
                 }
-            }
-            // 2. Check for DASH (.mpd)
-            else if (fileExtension === 'mpd') {
-                console.log("Using Dash.js");
-                 try {
-                    dash = dashjs.MediaPlayer().create();
-                    // Config for stability and seeking
-                    dash.updateSettings({
-                        'streaming': {
-                            'abr': {
-                                // 'ABRStrategy': 'abrL2A', // Throughput based
-                                'useDefaultABRRules': true,
-                                'ABRStrategy': 'abrThroughput', // Often better for VOD seeking
-                                'bandwidthSafetyFactor': 0.8,
-                                'useDeadTimeLatency': false, // Good for VOD
-                            },
-                            'buffer': {
-                                'stableBufferTime': 30, // Target buffer
-                                'bufferTimeAtTopQuality': 45, // Allow more buffer at highest quality
-                                'bufferTimeAtTopQualityLongForm': 60,
-                                'longFormContentDurationThreshold': 600, // Content > 10 mins
-                                'bufferToKeep': 20, // Keep less behind playhead than HLS default
-                                'bufferPruningInterval': 15,
-                                'fastSwitchEnabled': true, // Enable faster quality switching
-                            },
-                            'scheduling': {
-                                'scheduleWhilePaused': true, // Keep buffering when paused
-                            }
-                        }
-                    });
-                    dash.initialize(videoElement, url, true); // Autoplay = true
-                    dash.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, () => {
-                        console.log("DASH Stream Initialized");
-                        initPlyr(videoElement);
-                        const qualities = dash.getBitrateInfoListFor('video');
-                        console.log("DASH Qualities:", qualities);
-                        populateQualitySelector(qualities.map(q => ({ height: q.height, index: q.qualityIndex })), 'dash');
-                    });
-                    dash.on(dashjs.MediaPlayer.events.QUALITY_CHANGE_RENDERED, (e) => {
-                         console.log(`DASH Quality Changed: ${e.mediaType} to ${e.newQuality} (${dash.getBitrateInfoListFor(e.mediaType)[e.newQuality]?.height}p)`);
-                         updateDebugInfo();
-                    });
-                     dash.on(dashjs.MediaPlayer.events.ERROR, (e) => {
-                        console.error('DASH Error:', e.error.message, e);
-                        handleStreamingError(e.error, 'DASH'); // Pass the error object itself
-                    });
-                 } catch (error) {
-                     console.error("Failed to initialize Dash.js:", error);
-                     alert(`Error initializing DASH player: ${error.message}`);
-                     playerLoading.style.display = 'none';
-                     // Optionally fallback to standard player if possible?
-                 }
-            }
-            // 3. Fallback to standard HTML5 video (mp4, webm, etc.)
-            else {
-                console.log(`Using standard HTML5 video player for extension: ${fileExtension}`);
-                 if (videoElement.canPlayType(`video/${fileExtension}`) || fileExtension === 'mp4' || fileExtension === 'webm' || fileExtension === 'ogv') {
-                     videoElement.src = url;
-                     initPlyr(videoElement); // Initialize Plyr directly
-                     qualitySelector.disabled = true; // No quality options for standard video
-                     // Use loadedmetadata event for standard video as 'ready' might fire too early
-                     videoElement.addEventListener('loadedmetadata', () => {
-                        playerLoading.style.display = 'none';
-                     });
-                      videoElement.addEventListener('error', (e) => {
-                        console.error("HTML5 Video Error:", videoElement.error);
-                         alert(`Error playing video: ${videoElement.error?.message || 'Unknown error'}`);
-                        playerLoading.style.display = 'none';
-                      });
-                 } else {
-                     console.error(`Unsupported video format: ${fileExtension}`);
-                     alert(`Your browser does not support the video format: ${fileExtension}`);
-                     playerLoading.style.display = 'none';
-                 }
-            }
-        }
-        // Handle errors from HLS.js or Dash.js
-        function handleStreamingError(errorData, sourceType) {
-             let shouldClose = false;
-             let message = `A ${sourceType} error occurred.`;
-            if (sourceType === 'HLS') {
-                if (errorData.fatal) {
-                    message += ` Fatal error: ${errorData.type} - ${errorData.details}`;
-                    console.error(message);
-                    switch (errorData.type) {
-                        case Hls.ErrorTypes.NETWORK_ERROR:
-                            console.warn("HLS Network Error. Attempting recovery...");
-                            if (hls) hls.startLoad(); // Try to recover network errors
-                            else shouldClose = true;
-                            break;
-                        case Hls.ErrorTypes.MEDIA_ERROR:
-                            console.warn("HLS Media Error. Attempting recovery...");
-                            if (hls) hls.recoverMediaError();
-                            else shouldClose = true;
-                            break;
-                        default:
-                            console.error("Unrecoverable HLS error.");
-                             shouldClose = true; // Close on other fatal errors
-                             break;
-                    }
-                } else {
-                    // Non-fatal errors, just log them
-                     message += ` Non-fatal: ${errorData.type} - ${errorData.details}`;
-                     console.warn(message);
                 }
-            } else if (sourceType === 'DASH') {
-                 message = `DASH Error: ${errorData.code} - ${errorData.message}`;
-                 console.error(message, errorData);
-                 // Dash.js errors are often less recoverable by simple API calls
-                 shouldClose = true; // Assume most DASH errors require closing player for now
             }
-            if (shouldClose) {
-                alert(`Could not play video due to a streaming error:\n${message}\nPlease try again later or select a different video.`);
-                closePlayerPopup();
             } else {
-                // For recoverable errors, maybe show a temporary warning?
-                 playerLoading.innerHTML = `<div class="spinner"></div><span>Error occurred, trying to recover...</span>`;
-                 playerLoading.style.display = 'flex';
-                 // Hide after a few seconds if playback resumes
-                 setTimeout(() => {
-                    if(player && !player.paused) playerLoading.style.display = 'none';
-                 }, 3000);
             }
         }
-        // Populate the quality selector dropdown
-        function populateQualitySelector(levels, type) {
-            qualitySelector.innerHTML = '<option value="auto">Auto</option>'; // Start fresh
-            qualitySelector.disabled = false;
-            if (levels && levels.length > 0) {
-                // Sort by height descending
-                levels.sort((a, b) => (b.height || 0) - (a.height || 0));
-                 // Use a Set to avoid duplicate heights (common in DASH)
-                const uniqueHeights = new Set();
-                levels.forEach(level => {
-                    if (level.height && !uniqueHeights.has(level.height)) {
-                        uniqueHeights.add(level.height);
-                        const option = document.createElement('option');
-                        option.value = level.index; // Store index for setting quality
-                        option.dataset.height = level.height; // Store height for display/logic
-                        option.textContent = `${level.height}p`;
-                        qualitySelector.appendChild(option);
                     }
                 });
-                // Ensure 'auto' is selected initially
-                qualitySelector.value = 'auto';
-            } else {
-                console.warn("No quality levels found to populate selector.");
-                qualitySelector.disabled = true;
             }
         }
-        // Initialize Plyr player instance
-        function initPlyr(videoElement) {
-            if (player) {
-                console.warn("Plyr already initialized. Destroying previous instance.");
-                try { player.destroy(); } catch(e){}
             }
-            console.log("Initializing Plyr...");
-            const plyrOptions = {
-                // Controls: Customize as needed
-                controls: [
-                    'play-large', 'restart', 'play', 'progress', 'current-time', 'duration',
-                    'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'
-                ],
-                settings: ['captions', 'quality', 'speed', 'loop'],
-                // Quality handling delegated to our custom selector + HLS/DASH
-                 quality: {
-                     default: 'auto', // Corresponds to our value
-                     options: [], // We populate this via populateQualitySelector
-                     forced: true, // Use our logic
-                     onChange: (newQuality) => {
-                         // This might be called by Plyr's internal settings menu if enabled
-                         // Let's sync our selector if Plyr changes it
-                         console.log("Plyr quality onChange triggered:", newQuality);
-                         const selectedHeight = parseInt(newQuality); // Plyr usually passes height
-                         let foundOption = false;
-                         for(let option of qualitySelector.options) {
-                             if (option.dataset.height == selectedHeight) {
-                                 qualitySelector.value = option.value;
-                                 foundOption = true;
-                                 break;
-                             }
-                         }
-                         if (!foundOption && newQuality === 'auto') {
-                             qualitySelector.value = 'auto';
-                         }
-                         // Trigger our own change handler
-                         handleQualityChange();
-                     },
-                 },
-                speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] },
-                keyboard: { focused: true, global: true }, // Allow spacebar etc.
-                tooltips: { controls: true, seek: true },
-                seekTime: 10, // Seek interval
-                // Ensure autoplay works after user interaction
-                 autoplay: true, // Attempt autoplay
-                 // Volume persistence
-                 storage: { enabled: true, key: 'plyr_volume' },
-                 // Fix for aspect ratio issues sometimes
-                 ratio: '16:9', // Or detect dynamically if needed
-            };
             try {
-                player = new Plyr(videoElement, plyrOptions);
-                // Plyr Event Listeners
-                player.on('ready', event => {
-                    console.log('Plyr Ready');
-                    playerLoading.style.display = 'none';
-                    // Attempt to play, might be blocked by browser
-                    player.play().catch(error => console.warn('Autoplay prevented:', error));
-                    initDebugOverlay(); // Setup debug toggle listener
-                });
-                player.on('playing', event => {
-                    playerLoading.style.display = 'none';
-                    updateDebugInfo(); // Start updating debug info if visible
-                });
-                 player.on('waiting', event => {
-                    playerLoading.style.display = 'flex'; // Show loading on buffer stall
-                 });
-                 player.on('seeking', event => {
-                     playerLoading.style.display = 'flex'; // Show loading immediately on seek start
-                 });
-                 player.on('seeked', event => {
-                     // Hide loading quickly after seek *if* video is ready to play
-                     // Check if paused - if seeking while paused, don't hide loading
-                     if (!player.paused) {
-                         playerLoading.style.display = 'none';
-                     }
-                 });
-                player.on('qualitychange', event => {
-                     console.log("Plyr qualitychange event (internal):", event.detail.quality);
-                     updateDebugInfo();
-                });
-                 player.on('error', event => {
-                    console.error("Plyr player error:", event.detail.error);
-                     // Don't necessarily close popup on generic plyr error, let HLS/DASH handle stream errors
-                 });
-                player.on('controlsshown', () => updateDebugInfo()); // Update when controls appear
             } catch (error) {
-                console.error("Failed to initialize Plyr:", error);
-                alert(`Error initializing video player UI: ${error.message}`);
-                 playerLoading.style.display = 'none';
             }
         }
-        // Handle change event from our custom quality selector
-        function handleQualityChange() {
-            if (!qualitySelector.value) return;
-            const selectedValue = qualitySelector.value; // This is 'auto' or the level/quality index
-            console.log(`Quality selector changed to: ${selectedValue}`);
-            if (selectedValue === 'auto') {
-                // Enable ABR
-                if (hls) {
-                    console.log("Setting HLS to Auto quality (level -1)");
-                    hls.currentLevel = -1;
-                }
-                if (dash) {
-                    console.log("Setting DASH to Auto quality");
-                    dash.updateSettings({ 'streaming': { 'abr': { 'initialBitrate': { 'video': -1 }, 'autoSwitchBitrate': { 'video': true } } } });
-                }
             } else {
-                // Disable ABR and set specific level/quality index
-                const qualityIndex = parseInt(selectedValue);
-                 if (!isNaN(qualityIndex)) {
-                    if (hls) {
-                        console.log(`Setting HLS quality index: ${qualityIndex}`);
-                         hls.currentLevel = qualityIndex;
-                    }
-                    if (dash) {
-                        console.log(`Setting DASH quality index: ${qualityIndex}`);
-                         dash.updateSettings({ 'streaming': { 'abr': { 'autoSwitchBitrate': { 'video': false } } } });
-                         // Setting quality might need a slight delay after disabling ABR
-                         setTimeout(() => dash.setQualityFor('video', qualityIndex, true), 50); // true = immediate switch
-                    }
-                 } else {
-                      console.warn("Invalid quality index selected:", selectedValue);
-                 }
             }
-             updateDebugInfo(); // Update debug info after change
         }
-        // Close the player popup
-        function closePlayerPopup() {
-            playerPopup.classList.remove('active');
-            document.body.style.overflow = ''; // Restore background scroll
-            cleanupPlayerInstances(); // Crucial to stop streams and free resources
-            currentVideo = null;
-            currentTitle.textContent = '';
         }
-        // --- Debugging Functions ---
-        function initDebugOverlay() {
-            debugToggle.removeEventListener('click', toggleDebugDisplay); // Remove previous listener if any
-            debugToggle.addEventListener('click', toggleDebugDisplay);
-            // Reset state
-            debugOverlay.style.display = 'none';
-            isDebugVisible = false;
-             if (debugInterval) clearInterval(debugInterval);
         }
-        function toggleDebugDisplay() {
-            isDebugVisible = !isDebugVisible;
-            if (isDebugVisible) {
-                debugOverlay.style.display = 'block';
-                updateDebugInfo(); // Initial update
-                if (!debugInterval) {
-                    debugInterval = setInterval(updateDebugInfo, 1500); // Update ~ every 1.5 seconds
                 }
             } else {
-                debugOverlay.style.display = 'none';
-                 if (debugInterval) {
-                    clearInterval(debugInterval);
-                    debugInterval = null;
                 }
             }
         }
-        function updateDebugInfo() {
-            if (!isDebugVisible || !player || !player.media) return;
-            const video = player.media;
-            let info = `Player State: ${player.playing ? 'Playing' : (player.paused ? 'Paused' : 'Idle')}\n`;
-            info += `Resolution: ${video.videoWidth}x${video.videoHeight}\n`;
-            info += `Time: ${formatTime(video.currentTime)} / ${formatTime(video.duration)}\n`;
-            info += `Volume: ${Math.round(player.volume * 100)}% ${player.muted ? '(Muted)' : ''}\n`;
-            info += `Playback Rate: ${player.speed}x\n`;
-            info += `Buffered: ${getBufferedRanges(video)}\n`;
-            info += `Network State: ${getNetworkState(video.networkState)}\n`;
-            info += `Ready State: ${getReadyState(video.readyState)}\n`;
-            if (hls) {
-                info += "\n--- HLS.js Info ---\n";
-                const currentLevel = hls.levels[hls.currentLevel];
-                const autoLevel = hls.autoLevelEnabled;
-                info += `Mode: HLS.js ${autoLevel ? '(Auto)' : '(Manual)'}\n`;
-                if (currentLevel) {
-                    info += `Current Level: ${hls.currentLevel} (${currentLevel.width}x${currentLevel.height} @ ${formatBitrate(currentLevel.bitrate)})\n`;
-                } else {
-                     info += `Current Level: ${hls.currentLevel} (Auto/Initial)\n`;
-                }
-                info += `Target Level: ${hls.nextLevel} ${hls.nextAutoLevel ? '(Auto)' : ''}\n`;
-                info += `Load Level: ${hls.loadLevel}\n`;
-                info += `Buffer Length: ${hls.mainForwardBufferInfo.len?.toFixed(2) || '?'}s\n`;
-                info += `Live Latency: ${hls.liveSyncPosition?.toFixed(2) || 'N/A'}s\n`;
-                const stats = hls.stats;
-                 if (stats) {
-                    info += `Dropped Frames: ${stats.totalDroppedFrames || 0}\n`;
-                    info += `BW Estimate: ${formatBitrate(stats.bwEstimate)}\n`;
-                 }
-            }
-            if (dash) {
-                info += "\n--- Dash.js Info ---\n";
-                const streamInfo = dash.getActiveStream()?.getStreamInfo();
-                const videoQuality = dash.getQualityFor('video');
-                const isAuto = dash.getSettings()?.streaming?.abr?.autoSwitchBitrate?.video ?? true;
-                info += `Mode: Dash.js ${isAuto ? '(Auto)' : '(Manual)'}\n`;
-                if (streamInfo) {
-                    info += `Stream ID: ${streamInfo.id}\n`;
-                    info += `Duration: ${formatTime(streamInfo.duration)}\n`;
-                }
-                 const bitrateList = dash.getBitrateInfoListFor('video');
-                 if (bitrateList && bitrateList[videoQuality]) {
-                     const currentQuality = bitrateList[videoQuality];
-                     info += `Current Quality: ${videoQuality} (${currentQuality.width}x${currentQuality.height} @ ${formatBitrate(currentQuality.bitrate)})\n`;
-                 } else {
-                     info += `Current Quality: ${videoQuality} (Unknown)\n`;
-                 }
-                info += `Buffer Length: ${dash.getBufferLength('video')?.toFixed(2) || '?'}s\n`;
-                 const dashMetrics = dash.getMetricsFor('video');
-                 if (dashMetrics?.DroppedFrames) {
-                    info += `Dropped Frames: ${dashMetrics.DroppedFrames.framesDropped || 0}\n`;
-                 }
-                 if(dashMetrics?.BufferLevel) {
-                     const bufferLevels = dashMetrics.BufferLevel;
-                     if(bufferLevels.length > 0) {
-                         info += `Buffer Level (Last): ${bufferLevels[bufferLevels.length - 1].level.toFixed(2)}s\n`;
-                     }
-                 }
-                 if (dashMetrics?.RequestsQueue) {
-                     info += `Request Queue: ${dashMetrics.RequestsQueue.requestsQueue?.length || 0}\n`;
-                 }
-            }
-            debugOverlay.textContent = info;
-        }
-        // Helper to format time
-        function formatTime(seconds) {
-            if (isNaN(seconds) || seconds === Infinity) return '0:00 / ∞';
-            const date = new Date(0);
-            date.setSeconds(seconds);
-            return date.toISOString().substr(11, 8); // HH:MM:SS format
-        }
-         // Helper to format bitrate
-        function formatBitrate(bits) {
-            if (isNaN(bits) || bits === 0) return '0 bps';
-            if (bits < 1000) return `${bits} bps`;
-            if (bits < 1000000) return `${(bits / 1000).toFixed(1)} kbps`;
-            return `${(bits / 1000000).toFixed(2)} Mbps`;
-        }
-        // Helper for buffered ranges
-        function getBufferedRanges(video) {
-            try {
-                const buffered = video.buffered;
-                 if (!buffered || buffered.length === 0) return '[]';
-                let ranges = '';
-                for (let i = 0; i < buffered.length; i++) {
-                    ranges += `[${formatTime(buffered.start(i))} - ${formatTime(buffered.end(i))}] `;
-                }
-                return ranges.trim();
-            } catch (e) {
-                return '[Error accessing buffer]';
-            }
         }
-        // Helper for network state
-        function getNetworkState(state) {
-            switch (state) {
-                case 0: return 'NETWORK_EMPTY';
-                case 1: return 'NETWORK_IDLE';
-                case 2: return 'NETWORK_LOADING';
-                case 3: return 'NETWORK_NO_SOURCE';
-                default: return 'UNKNOWN';
             }
         }
-        // Helper for ready state
-        function getReadyState(state) {
-             switch (state) {
-                case 0: return 'HAVE_NOTHING';
-                case 1: return 'HAVE_METADATA';
-                case 2: return 'HAVE_CURRENT_DATA';
-                case 3: return 'HAVE_FUTURE_DATA';
-                case 4: return 'HAVE_ENOUGH_DATA';
-                default: return 'UNKNOWN';
-             }
-        }
-        // --- Event Listeners ---
         // Search functionality
         searchInput.addEventListener('input', function() {
-            const searchTerm = this.value.toLowerCase().trim();
-            filteredVideos = videoData.filter(video =>
                 video.title.toLowerCase().includes(searchTerm)
             );
             currentPage = 1; // Reset to first page on search
             renderPagination();
             renderVideoGrid();
-            preloadThumbnailsForPage(currentPage);
         });
-        // Close popup button
         closePopup.addEventListener('click', closePlayerPopup);
-        // Close popup on ESC key
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape' && playerPopup.classList.contains('active')) {
                 closePlayerPopup();
             }
-            // Let Plyr handle other keyboard shortcuts like space, arrows etc.
         });
-        // Close popup when clicking outside the content area
-        playerPopup.addEventListener('click', function(e) {
-            if (e.target === playerPopup) { // Check if the click was directly on the overlay
-                closePlayerPopup();
             }
         });
-        // Handle quality selector changes
-        qualitySelector.addEventListener('change', handleQualityChange);
-        // --- Initialization ---
-        document.addEventListener('DOMContentLoaded', fetchVideoData);
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HF Video Library</title>
     <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            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;
+            position: relative;
+        }
+        .video-thumbnail img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .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;
+        }
+        .btn.active {
+            background-color: #007bff;
+        }
+        .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;
+            position: absolute;
+        }
+        .video-item:hover .play-icon {
+            opacity: 1;
+        }
+        .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); }
+        }
+        .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;
+        }
+        .seek-preview {
+            position: absolute;
+            bottom: 100px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(0,0,0,0.7);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 14px;
+            z-index: 10;
+            display: none;
+        }
+        .no-videos {
+            padding: 20px;
+            text-align: center;
+            color: #777;
+        }
+        @media (max-width: 768px) {
+            .video-grid {
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            }
+            .popup-content {
+                width: 95%;
+            }
+            .controls {
+                gap: 5px;
+                padding: 10px;
+            }
+            .btn {
+                padding: 6px 12px;
+                font-size: 0.9em;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
+            <h1>HF 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>
     <!-- Video Player Popup -->
     <div class="popup-overlay" id="playerPopup">
         <div class="popup-content">
+            <button class="close-popup" id="closePopup">✕</button>
+            <div class="buffering-indicator" id="bufferingIndicator">Buffering...</div>
+            <div class="seek-preview" id="seekPreview"></div>
+            <div class="popup-title" id="currentTitle">Video Title</div>
             <div class="player-wrapper">
+                <div class="loading-spinner" id="loadingSpinner"></div>
+                <video id="videoPlayer" preload="auto" playsinline>
+                    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;
+        let isSeeking = false;
+        let preloadedSegments = new Set();
+        // 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');
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        const bufferingIndicator = document.getElementById('bufferingIndicator');
+        const seekPreview = document.getElementById('seekPreview');
+        // 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 : []);
+                // Optimize HF URLs
                 videoData.forEach(video => {
+                    if (video.url.includes('huggingface.co')) {
+                        // Force no-transform for HF URLs
+                        if (!video.url.includes('?')) {
+                            video.url += '?';
+                        }
+                        if (!video.url.includes('download=true')) {
+                            video.url += (video.url.endsWith('?') ? '' : '&') + 'download=true';
+                        }
                     }
                 });
                 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 with ultra-fast seeking
         function playVideo(video) {
             currentVideo = video;
+            currentTitle.textContent = video.title;
+            // Reset state
+            isSeeking = false;
+            preloadedSegments.clear();
+            // Show loading spinner
+            loadingSpinner.style.display = 'block';
+            bufferingIndicator.style.display = 'none';
+            // Optimize HF URL
+            let videoUrl = video.url;
+            if (videoUrl.includes('huggingface.co')) {
+                if (!videoUrl.includes('?')) {
+                    videoUrl += '?';
                 }
+                if (!videoUrl.includes('download=true')) {
+                    videoUrl += (videoUrl.endsWith('?') ? '' : '&') + 'download=true';
                 }
             }
+            // Use MediaSource for advanced buffering control if supported
+            if (window.MediaSource && MediaSource.isTypeSupported('video/mp4')) {
+                setupMediaSourcePlayer(videoUrl);
             } else {
+                setupRegularPlayer(videoUrl);
             }
+            // Show popup
+            playerPopup.classList.add('active');
+            // Disable scrolling on body when popup is active
+            document.body.style.overflow = 'hidden';
         }
+        function setupMediaSourcePlayer(url) {
+            const mediaSource = new MediaSource();
+            videoPlayer.src = URL.createObjectURL(mediaSource);
+            mediaSource.addEventListener('sourceopen', function() {
+                const sourceBuffer = mediaSource.addSourceBuffer('video/mp4');
+                // Start loading the initial segment
+                fetchSegment(url, 0, 1024 * 1024 * 2) // First 2MB
+                    .then(segment => {
+                        sourceBuffer.addEventListener('updateend', function() {
+                            if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
+                                mediaSource.endOfStream();
+                                videoPlayer.play().catch(e => console.error('Play error:', e));
+                                loadingSpinner.style.display = 'none';
+                                // Start aggressive preloading
+                                preloadNextSegments(videoPlayer.duration, url);
+                            }
+                        }, { once: true });
+                        sourceBuffer.appendBuffer(segment);
+                    })
+                    .catch(error => {
+                        console.error('Error loading initial segment:', error);
+                        // Fallback to regular player
+                        setupRegularPlayer(url);
+                    });
+                // Handle seeking
+                videoPlayer.addEventListener('seeking', function() {
+                    if (!isSeeking && mediaSource.readyState === 'open') {
+                        isSeeking = true;
+                        const targetTime = videoPlayer.currentTime;
+                        seekPreview.textContent = formatTime(targetTime);
+                        seekPreview.style.display = 'block';
+                        // Load segment around seek position
+                        const segmentStart = Math.max(0, targetTime - 2);
+                        const segmentEnd = Math.min(videoPlayer.duration, targetTime + 2);
+                        fetchByteRange(url, segmentStart, segmentEnd)
+                            .then(segment => {
+                                sourceBuffer.appendBuffer(segment);
+                                seekPreview.style.display = 'none';
+                                isSeeking = false;
+                            })
+                            .catch(error => {
+                                console.error('Seek error:', error);
+                                seekPreview.style.display = 'none';
+                                isSeeking = false;
+                            });
                     }
                 });
+            });
+            setupPlayerEventListeners();
+        }
+        function setupRegularPlayer(url) {
+            videoPlayer.src = url;
+            videoPlayer.load();
+            // Set up event listeners for immediate playback
+            videoPlayer.addEventListener('canplaythrough', function() {
+                loadingSpinner.style.display = 'none';
+                videoPlayer.play().catch(e => console.error('Play error:', e));
+                // Start aggressive preloading
+                preloadNextSegments(videoPlayer.duration, url);
+            }, { once: true });
+            videoPlayer.addEventListener('seeking', function() {
+                const targetTime = videoPlayer.currentTime;
+                seekPreview.textContent = formatTime(targetTime);
+                seekPreview.style.display = 'block';
+                setTimeout(() => {
+                    seekPreview.style.display = 'none';
+                }, 1000);
+            });
+            setupPlayerEventListeners();
+        }
+        function preloadNextSegments(duration, url) {
+            if (!duration || duration === Infinity) return;
+            const currentTime = videoPlayer.currentTime;
+            const segmentSize = 1024 * 1024 * 4; // 4MB segments
+            // Preload next 3 segments ahead
+            for (let i = 1; i <= 3; i++) {
+                const segmentStart = currentTime + (i * 5);
+                if (segmentStart >= duration) break;
+                const segmentEnd = Math.min(duration, segmentStart + 5);
+                const segmentKey = `${Math.floor(segmentStart)}-${Math.floor(segmentEnd)}`;
+                if (!preloadedSegments.has(segmentKey)) {
+                    preloadedSegments.add(segmentKey);
+                    // Just trigger the download, we don't need the data for regular playback
+                    fetchByteRange(url, segmentStart, segmentEnd)
+                        .catch(error => console.error('Preload error:', error));
+                }
             }
         }
+        async function fetchSegment(url, start, end) {
+            const response = await fetch(url, {
+                headers: {
+                    'Range': `bytes=${start}-${end}`
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
             }
+            return response.arrayBuffer();
+        }
+        async function fetchByteRange(url, startTime, endTime) {
+            // Estimate byte range based on time (approximation)
+            const duration = videoPlayer.duration || 60; // Fallback to 60s if unknown
+            const fileSize = await getFileSize(url);
+            const startByte = Math.floor((startTime / duration) * fileSize);
+            const endByte = Math.floor((endTime / duration) * fileSize);
+            return fetchSegment(url, startByte, endByte);
+        }
+        async function getFileSize(url) {
             try {
+                const response = await fetch(url, { method: 'HEAD' });
+                if (response.ok) {
+                    const contentLength = response.headers.get('Content-Length');
+                    return parseInt(contentLength) || 100 * 1024 * 1024; // Fallback to 100MB
+                }
             } catch (error) {
+                console.error('Error getting file size:', error);
             }
+            return 100 * 1024 * 1024; // Default fallback
         }
+        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';
+            });
+            videoPlayer.addEventListener('pause', () => {
+                playPauseBtn.textContent = '⏯️ Play';
+            });
+            videoPlayer.addEventListener('waiting', () => {
+                bufferingIndicator.style.display = 'block';
+            });
+            videoPlayer.addEventListener('playing', () => {
+                bufferingIndicator.style.display = 'none';
+            });
+            videoPlayer.addEventListener('timeupdate', () => {
+                // Continuously preload ahead
+                preloadNextSegments(videoPlayer.duration, videoPlayer.src);
+            });
+            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) {
+            const newTime = Math.max(0, Math.min(videoPlayer.duration, videoPlayer.currentTime + seconds));
+            videoPlayer.currentTime = newTime;
+            // Show seek preview
+            seekPreview.textContent = formatTime(newTime);
+            seekPreview.style.display = 'block';
+            setTimeout(() => {
+                seekPreview.style.display = 'none';
+            }, 1000);
         }
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
         }
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                if (playerPopup.requestFullscreen) {
+                    playerPopup.requestFullscreen();
+                } else if (playerPopup.webkitRequestFullscreen) {
+                    playerPopup.webkitRequestFullscreen();
+                } else if (playerPopup.msRequestFullscreen) {
+                    playerPopup.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';
         }
+        // Close popup function
+        function closePlayerPopup() {
+            videoPlayer.pause();
+            if (videoPlayer.src.startsWith('blob:')) {
+                URL.revokeObjectURL(videoPlayer.src);
             }
+            videoPlayer.src = '';
+            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();
             }
         });
+        // 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':
+                    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
+                    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>
 </body>
 </html>