Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 13, 2025

Commit

0cb0646

verified ·

1 Parent(s): 398a831

Update index.html

Browse files

Files changed (1) hide show

index.html +253 -369

index.html CHANGED Viewed

@@ -3,361 +3,190 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HF Video Library (Optimized with Plyr)</title>
     <!-- Plyr CSS -->
     <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
     <style>
-        /* --- Keep your existing styles for layout, search, grid, etc. --- */
-        * {
-            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;
-            display: flex; /* Use flexbox for better alignment */
-            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; /* Maintain aspect ratio consistency */
-            background-color: #e0e0e0; /* Lighter placeholder */
-            border-radius: 4px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 10px;
-            overflow: hidden;
-            position: relative;
-        }
-        .video-thumbnail img { /* Optional: If you add thumbnail images later */
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-         .play-icon { /* Simple text icon */
-            font-size: 40px;
-            color: rgba(0,0,0,0.6);
-            opacity: 0.8;
-            transition: opacity 0.2s;
             position: absolute;
-        }
-        .video-item:hover .play-icon {
-            opacity: 1;
-        }
-        .video-item-title {
-            font-weight: 500;
-            margin-top: auto; /* Pushes title down if thumbnail varies slightly */
-            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.85); /* Slightly darker */
-            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: 1100px; /* Slightly wider for player */
-            background-color: #000; /* Black background suits player */
-            border-radius: 8px;
-            overflow: hidden;
-            position: relative;
-            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
-            display: flex; /* Use flexbox for title + player */
-            flex-direction: column;
-        }
-        .close-popup {
-            position: absolute;
-            top: 8px;  /* Adjust for better placement */
-            right: 8px; /* Adjust for better placement */
-            background-color: rgba(30,30,30,0.7); /* Subtle background */
-            color: white;
-            border: none;
-            width: 32px; /* Slightly larger */
-            height: 32px;
             border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            z-index: 1001; /* Ensure it's above Plyr */
-            font-size: 18px;
-            line-height: 1; /* Ensure centering */
-        }
-         .close-popup:hover {
-             background-color: rgba(50,50,50,0.9);
          }
-        .popup-title {
-            color: white;
-            padding: 12px 15px; /* Adjust padding */
-            font-size: 1.1em; /* Adjust size */
-            background-color: #111;
-            text-align: center;
-             white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            order: -1; /* Display title above video */
-        }
-        /* Remove custom controls, player-wrapper, spinner, indicators */
-        /* .controls, .player-wrapper, #loadingSpinner, #bufferingIndicator, #seekPreview { display: none; } */
-        /* Style the video element itself if needed, but Plyr handles most */
-        #videoPlayer {
-            display: block; /* Ensure it takes block layout */
-            width: 100%;
-            height: auto; /* Let Plyr manage height based on aspect ratio */
-            max-height: 80vh; /* Prevent excessive height on tall screens */
-            background-color: #000;
-        }
-         /* Plyr Customizations (Optional) */
-        :root {
-            --plyr-color-main: #007bff; /* Example: Blue theme */
-        }
-        .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: 98%; /* Almost full width on mobile */
-                 max-width: none;
-                 height: auto;
-            }
-             #videoPlayer {
-                 max-height: 85vh; /* Adjust max height for mobile */
-             }
-             .popup-title {
-                 font-size: 1em;
-             }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
-            <h1>HF Video Library <small>(Plyr Enhanced)</small></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-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>
-            <!-- The video element Plyr will enhance -->
-            <video id="videoPlayer" playsinline controls preload="metadata">
-                <!-- preload="metadata" is often a good balance -->
                 Your browser does not support the video tag.
             </video>
-            <!-- Custom controls and instructions are removed - Plyr provides them -->
         </div>
     </div>
-    <!-- Plyr JS -->
     <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
     <script>
-        // Global variables
         let videoData = [];
         let filteredVideos = [];
         let currentVideo = null;
         let currentPage = 1;
-        const videosPerPage = 12; // Adjusted for potentially smaller cards
-        let player = null; // To hold the Plyr instance
-        // DOM Elements
         const videoGrid = document.getElementById('videoGrid');
         const pagination = document.getElementById('pagination');
         const searchInput = document.getElementById('search');
         const playerPopup = document.getElementById('playerPopup');
-        const videoPlayerElement = document.getElementById('videoPlayer'); // Get the element
         const currentTitle = document.getElementById('currentTitle');
         const closePopup = document.getElementById('closePopup');
-        // --- Fetching, Rendering Grid, Pagination (Keep mostly the same) ---
-        async function fetchVideoData() {
             try {
-                // Show initial loading state
                 videoGrid.innerHTML = '<div class="no-videos">Loading video list...</div>';
                 pagination.innerHTML = '';
-                const response = await fetch('database.json'); // Ensure this path is correct
-                if (!response.ok) {
-                    throw new Error(`Failed to fetch video data (Status: ${response.status})`);
-                }
                 const data = await response.json();
-                videoData = Array.isArray(data) ? data :
-                          (data.videos && Array.isArray(data.videos) ? data.videos : []);
-                // Optimize HF URLs (Keep this logic)
                 videoData.forEach(video => {
                     if (video.url && video.url.includes('huggingface.co')) {
-                        let url = new URL(video.url);
-                        // Ensure download=true is present without duplicating query params
-                        if(url.searchParams.get('download') !== 'true') {
-                           url.searchParams.set('download', 'true');
                         }
-                        video.url = url.toString();
                     }
-                    // Basic validation
-                    if (!video.title || !video.url) {
-                        console.warn("Skipping video with missing title or URL:", video);
                     }
                 });
-                // Filter out invalid entries before proceeding
-                videoData = videoData.filter(video => video.title && video.url);
-                if (videoData.length === 0) {
-                     videoGrid.innerHTML = '<div class="no-videos">No valid videos found in database.json</div>';
                      return;
                 }
-                filteredVideos = [...videoData];
-                currentPage = 1; // Reset to page 1
                 renderPagination();
                 renderVideoGrid();
             } catch (error) {
-                console.error('Error fetching or processing video data:', error);
-                videoGrid.innerHTML = `<div class="no-videos">Error loading videos: ${error.message}. Check console.</div>`;
             }
         }
         function renderVideoGrid() {
-             videoGrid.innerHTML = ''; // Clear previous items
-            if (filteredVideos.length === 0) {
-                videoGrid.innerHTML = '<div class="no-videos">No videos match your search.</div>';
-                // Don't clear pagination if there are videos overall, just no search results
-                if (videoData.length > 0 && searchInput.value) {
-                     renderPagination(); // Keep pagination visible
-                } else {
-                     pagination.innerHTML = ''; // Hide if no videos at all
-                }
                 return;
             }
-            const startIndex = (currentPage - 1) * videosPerPage;
             const endIndex = Math.min(startIndex + videosPerPage, filteredVideos.length);
             const currentVideos = filteredVideos.slice(startIndex, endIndex);
             const fragment = document.createDocumentFragment();
             currentVideos.forEach((video, index) => {
                 const videoItem = document.createElement('div');
@@ -372,7 +201,7 @@
                 `;
                 videoItem.addEventListener('click', function() {
                     const dataIndex = parseInt(this.getAttribute('data-index'));
-                    if (!isNaN(dataIndex) && dataIndex >= 0 && dataIndex < filteredVideos.length) {
                         playVideo(filteredVideos[dataIndex]);
                     } else {
                         console.error("Invalid video index clicked:", dataIndex);
@@ -380,76 +209,54 @@
                 });
                 fragment.appendChild(videoItem);
             });
-            videoGrid.appendChild(fragment);
         }
         function renderPagination() {
              const totalPages = Math.ceil(filteredVideos.length / videosPerPage);
-             pagination.innerHTML = ''; // Clear existing buttons
-            if (totalPages <= 1) {
-                return; // No pagination needed for 0 or 1 page
-            }
-            let buttons = [];
-            const maxVisibleButtons = 7; // Max buttons like 1 ... 5 6 7 ... 10
-            if (totalPages <= maxVisibleButtons) {
-                for (let i = 1; i <= totalPages; i++) {
-                    buttons.push(i);
-                }
             } else {
-                buttons.push(1); // Always show first page
                 let startPage, endPage;
                 if (currentPage <= Math.floor(maxVisibleButtons / 2) + 1) {
-                    // Near the beginning
-                    startPage = 2;
-                    endPage = maxVisibleButtons - 2; // 1 + (max-2 pages) + ... + last
                      for (let i = startPage; i <= endPage; i++) buttons.push(i);
                      buttons.push('...');
                 } else if (currentPage >= totalPages - Math.floor(maxVisibleButtons / 2)) {
-                    // Near the end
-                    startPage = totalPages - (maxVisibleButtons - 3); // first + ... + (max-2 pages) + last
                     buttons.push('...');
                      for (let i = startPage; i < totalPages; i++) buttons.push(i);
                 } else {
-                    // In the middle
                      buttons.push('...');
-                    const sideButtons = Math.floor((maxVisibleButtons - 3) / 2); // Buttons around current
-                    startPage = currentPage - sideButtons;
-                    endPage = currentPage + sideButtons;
                      for (let i = startPage; i <= endPage; i++) buttons.push(i);
                      buttons.push('...');
                 }
-                buttons.push(totalPages); // Always show last page
             }
-             // Create pagination HTML
-            pagination.innerHTML = buttons.map(button => {
-                if (button === '...') {
-                    return '<span class="page-btn disabled">...</span>'; // Non-clickable ellipsis
-                }
                 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() {
                     const newPage = parseInt(this.getAttribute('data-page'));
                      if (newPage !== currentPage) {
-                        currentPage = newPage;
-                        renderPagination(); // Update buttons appearance
-                        renderVideoGrid(); // Render new page content
-                        window.scrollTo({ top: videoGrid.offsetTop - 20, behavior: 'smooth' }); // Scroll near top of grid
                     }
                 });
             });
         }
-        // --- Player Logic (Using Plyr) ---
         function playVideo(video) {
             if (!video || !video.url) {
@@ -458,92 +265,170 @@
             }
             currentVideo = video;
             currentTitle.textContent = video.title;
-            currentTitle.setAttribute('title', video.title); // Add tooltip for long titles
-            // Set the source for the video element
             videoPlayerElement.src = video.url;
-            // Destroy previous Plyr instance if it exists
             if (player) {
-                try {
-                    player.destroy();
-                } catch (e) {
-                    console.warn("Error destroying previous Plyr instance:", e);
-                }
                 player = null;
             }
-             // Initialize Plyr
             try {
                 player = new Plyr(videoPlayerElement, {
-                    // Plyr options (optional)
                      title: video.title,
                      controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
                      settings: ['captions', 'quality', 'speed', 'loop'],
-                     // quality: {
-                     //     // If you were using HLS/DASH, you'd configure quality options here
-                     //     default: 720, // Example default quality
-                     //     options: [1080, 720, 480]
-                     // },
-                     // tooltips: { controls: true, seek: true } // Enable tooltips
                 });
-                 // Add event listener for when player is ready
-                player.on('ready', () => {
-                    // Autoplay (optional, might be blocked by browsers)
-                    // player.play().catch(e => console.log("Autoplay prevented:", e));
                 });
-                // Add event listener for errors
                 player.on('error', event => {
                     console.error('Plyr error:', event.detail.plyr.source, event);
-                    // Maybe display a user-friendly error message
                 });
-                 // Show the popup
-                playerPopup.classList.add('active');
-                document.body.style.overflow = 'hidden'; // Prevent background scroll
              } catch (error) {
                  console.error("Failed to initialize Plyr:", error);
-                 // Fallback or error message
-                 alert(`Error initializing video player for "${video.title}". Check console for details.`);
-                 // Still try to show the basic video element if Plyr fails?
-                 videoPlayerElement.load(); // Try loading without Plyr
                  playerPopup.classList.add('active');
                  document.body.style.overflow = 'hidden';
              }
         }
         function closePlayerPopup() {
-             if (player) {
                  try {
-                    player.pause(); // Pause before destroying
-                    player.destroy();
-                 } catch (e) {
-                     console.warn("Error destroying Plyr instance on close:", e)
-                 }
                  player = null;
-             }
-            // Fallback if player wasn't initialized or destroyed properly
             videoPlayerElement.pause();
-            videoPlayerElement.removeAttribute('src'); // Remove src to stop potential loading
-            videoPlayerElement.load(); // Reset the media element
             playerPopup.classList.remove('active');
-            document.body.style.overflow = ''; // Restore scroll
             currentVideo = null;
         }
-        // --- Event Listeners (Search, Popup Close) ---
         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();
         });
@@ -551,20 +436,19 @@
         closePopup.addEventListener('click', closePlayerPopup);
         playerPopup.addEventListener('click', function(e) {
-            // Close only if clicking the overlay itself, not the content inside
             if (e.target === playerPopup) {
                 closePlayerPopup();
             }
         });
-        // Close popup with Escape key (Plyr might handle this, but good fallback)
         document.addEventListener('keydown', function(e) {
             if (e.key === 'Escape' && playerPopup.classList.contains('active')) {
                 closePlayerPopup();
             }
         });
         // --- Initial Load ---
         fetchVideoData();

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HF Video Library (Plyr + Controls)</title>
     <!-- Plyr CSS -->
     <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
     <style>
+        /* --- Keep your existing base styles --- */
+        * { 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; 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; }
+        .play-icon { font-size: 40px; color: rgba(0,0,0,0.6); opacity: 0.8; transition: opacity 0.2s; position: absolute; }
+        .video-item:hover .play-icon { opacity: 1; }
+        .video-item-title { font-weight: 500; margin-top: auto; 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; }
+        .page-btn.disabled { cursor: default; color: #ccc; }
+        .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); 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: 1100px; background-color: #000; border-radius: 8px; overflow: hidden; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.5); display: flex; flex-direction: column; }
+        .close-popup { position: absolute; top: 8px; right: 8px; 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: 1001; font-size: 18px; line-height: 1; }
+        .close-popup:hover { background-color: rgba(50,50,50,0.9); }
+        .popup-title { color: white; padding: 12px 15px; font-size: 1.1em; background-color: #111; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; order: -1; }
+        #videoPlayer { display: block; width: 100%; height: auto; max-height: 80vh; background-color: #000; }
+        /* Plyr Customizations */
+        :root { --plyr-color-main: #007bff; }
+         /* Add styles for the double-tap visual feedback (optional) */
+        .plyr__video-wrapper::after {
+            content: '';
             position: absolute;
+            top: 0; left: 50%;
+            transform: translateX(-50%);
+            width: 0; height: 100%;
+            background: rgba(255, 255, 255, 0.15);
+            border-radius: 50%;
             opacity: 0;
+            transition: width 0.2s ease-out, opacity 0.2s ease-out;
+            pointer-events: none; /* Important */
         }
+        .plyr__video-wrapper.seeking-forward::after {
+            left: auto; right: 15%; transform: translateX(0);
+            width: 80px; height: 80px; top: 50%; transform: translateY(-50%);
             border-radius: 50%;
+            content: '»'; /* Use pseudo element content for icon */
+            display: flex; align-items: center; justify-content: center;
+            font-size: 30px; color: white;
+            opacity: 1;
+            animation: seek-pulse 0.4s ease-out;
+        }
+         .plyr__video-wrapper.seeking-backward::after {
+             left: 15%; right: auto; transform: translateX(0);
+             width: 80px; height: 80px; top: 50%; transform: translateY(-50%);
+             border-radius: 50%;
+             content: '«'; /* Use pseudo element content for icon */
+             display: flex; align-items: center; justify-content: center;
+             font-size: 30px; color: white;
+             opacity: 1;
+             animation: seek-pulse 0.4s ease-out;
+        }
+         @keyframes seek-pulse {
+             0% { transform: translateY(-50%) scale(0.8); opacity: 0.5; }
+             50% { transform: translateY(-50%) scale(1.1); opacity: 1; }
+             100% { transform: translateY(-50%) scale(1); opacity: 0; }
          }
+        .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: 98%; max-width: none; height: auto; }
+            #videoPlayer { max-height: 85vh; }
+            .popup-title { font-size: 1em; }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
+             <h1>HF Video Library <small>(Plyr + Controls)</small></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>
     <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>
+            <!-- Changed preload to "auto" -->
+            <video id="videoPlayer" playsinline controls preload="auto">
                 Your browser does not support the video tag.
             </video>
         </div>
     </div>
     <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
     <script>
+        // --- Keep Global variables, DOM Elements as before ---
         let videoData = [];
         let filteredVideos = [];
         let currentVideo = null;
         let currentPage = 1;
+        const videosPerPage = 12;
+        let player = null; // Plyr instance
+        let lastTapTime = 0; // For double-tap detection
+        let tapTimeout = null; // Timeout for distinguishing single/double taps
         const videoGrid = document.getElementById('videoGrid');
         const pagination = document.getElementById('pagination');
         const searchInput = document.getElementById('search');
         const playerPopup = document.getElementById('playerPopup');
+        const videoPlayerElement = document.getElementById('videoPlayer');
         const currentTitle = document.getElementById('currentTitle');
         const closePopup = document.getElementById('closePopup');
+        // --- fetchVideoData, renderVideoGrid, renderPagination (Keep as before) ---
+         async function fetchVideoData() {
             try {
                 videoGrid.innerHTML = '<div class="no-videos">Loading video list...</div>';
                 pagination.innerHTML = '';
+                const response = await fetch('database.json');
+                if (!response.ok) throw new Error(`Failed to fetch video data (Status: ${response.status})`);
                 const data = await response.json();
+                videoData = Array.isArray(data) ? data : (data.videos && Array.isArray(data.videos) ? data.videos : []);
                 videoData.forEach(video => {
                     if (video.url && video.url.includes('huggingface.co')) {
+                        try {
+                           let url = new URL(video.url);
+                           if (url.searchParams.get('download') !== 'true') {
+                               url.searchParams.set('download', 'true');
+                           }
+                           video.url = url.toString();
+                        } catch (e) {
+                           console.warn(`Invalid URL format for video "${video.title}": ${video.url}`, e);
+                           video.url = null; // Mark as invalid
                         }
                     }
+                     if (!video.title || !video.url) {
+                        console.warn("Skipping video with missing title or invalid URL:", video);
                     }
                 });
+                 videoData = videoData.filter(video => video.title && video.url);
+                 if (videoData.length === 0) {
+                     videoGrid.innerHTML = '<div class="no-videos">No valid videos found. Check database.json format and URLs.</div>';
                      return;
                 }
+                 filteredVideos = [...videoData];
+                currentPage = 1;
                 renderPagination();
                 renderVideoGrid();
             } catch (error) {
+                console.error('Error fetching/processing video data:', error);
+                videoGrid.innerHTML = `<div class="no-videos">Error loading videos: ${error.message}. Check console and network tab.</div>`;
             }
         }
         function renderVideoGrid() {
+             videoGrid.innerHTML = '';
+             if (filteredVideos.length === 0) {
+                videoGrid.innerHTML = videoData.length > 0 && searchInput.value
+                    ? '<div class="no-videos">No videos match your search.</div>'
+                    : '<div class="no-videos">No videos available.</div>';
+                renderPagination(); // Show pagination even if search yields no results (if there's data)
                 return;
             }
+             const startIndex = (currentPage - 1) * videosPerPage;
             const endIndex = Math.min(startIndex + videosPerPage, filteredVideos.length);
             const currentVideos = filteredVideos.slice(startIndex, endIndex);
             const fragment = document.createDocumentFragment();
             currentVideos.forEach((video, index) => {
                 const videoItem = document.createElement('div');
                 `;
                 videoItem.addEventListener('click', function() {
                     const dataIndex = parseInt(this.getAttribute('data-index'));
+                     if (!isNaN(dataIndex) && dataIndex >= 0 && dataIndex < filteredVideos.length) {
                         playVideo(filteredVideos[dataIndex]);
                     } else {
                         console.error("Invalid video index clicked:", dataIndex);
                 });
                 fragment.appendChild(videoItem);
             });
+             videoGrid.appendChild(fragment);
         }
         function renderPagination() {
              const totalPages = Math.ceil(filteredVideos.length / videosPerPage);
+             pagination.innerHTML = '';
+             if (totalPages <= 1) return;
+             let buttons = [];
+            const maxVisibleButtons = 7;
+             if (totalPages <= maxVisibleButtons) {
+                for (let i = 1; i <= totalPages; i++) buttons.push(i);
             } else {
+                buttons.push(1);
                 let startPage, endPage;
                 if (currentPage <= Math.floor(maxVisibleButtons / 2) + 1) {
+                    startPage = 2; endPage = maxVisibleButtons - 2;
                      for (let i = startPage; i <= endPage; i++) buttons.push(i);
                      buttons.push('...');
                 } else if (currentPage >= totalPages - Math.floor(maxVisibleButtons / 2)) {
+                    startPage = totalPages - (maxVisibleButtons - 3);
                     buttons.push('...');
                      for (let i = startPage; i < totalPages; i++) buttons.push(i);
                 } else {
                      buttons.push('...');
+                    const sideButtons = Math.floor((maxVisibleButtons - 3) / 2);
+                    startPage = currentPage - sideButtons; endPage = currentPage + sideButtons;
                      for (let i = startPage; i <= endPage; i++) buttons.push(i);
                      buttons.push('...');
                 }
+                buttons.push(totalPages);
             }
+             pagination.innerHTML = buttons.map(button => {
+                if (button === '...') return '<span class="page-btn disabled">...</span>';
                 return `<button class="page-btn ${button === currentPage ? 'active' : ''}" data-page="${button}">${button}</button>`;
             }).join('');
+             document.querySelectorAll('.page-btn[data-page]').forEach(button => {
                 button.addEventListener('click', function() {
                     const newPage = parseInt(this.getAttribute('data-page'));
                      if (newPage !== currentPage) {
+                        currentPage = newPage; renderPagination(); renderVideoGrid();
+                        window.scrollTo({ top: videoGrid.offsetTop - 20, behavior: 'smooth' });
                     }
                 });
             });
         }
+        // --- Updated Player Logic ---
         function playVideo(video) {
             if (!video || !video.url) {
             }
             currentVideo = video;
             currentTitle.textContent = video.title;
+            currentTitle.setAttribute('title', video.title);
             videoPlayerElement.src = video.url;
             if (player) {
+                try { player.destroy(); } catch (e) { console.warn("Error destroying previous Plyr instance:", e); }
                 player = null;
             }
             try {
                 player = new Plyr(videoPlayerElement, {
+                    // Keep Plyr options
                      title: video.title,
                      controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
                      settings: ['captions', 'quality', 'speed', 'loop'],
+                     keyboard: { focused: true, global: false }, // Ensure keyboard works when focused
+                     tooltips: { controls: true, seek: true }
                 });
+                // --- Event Listeners for Focus and Double Tap ---
+                player.on('ready', event => {
+                    const instance = event.detail.plyr;
+                    const container = instance.elements.container;
+                    // **Ensure Keyboard Focus**
+                     if (container) {
+                        container.setAttribute('tabindex', '-1'); // Make container focusable
+                        // Delay focus slightly to ensure popup transition is complete
+                        setTimeout(() => container.focus(), 100);
+                     }
+                    // **Setup Double Tap Listener**
+                    if (container) {
+                         container.addEventListener('touchstart', handleDoubleTap);
+                         // Add click listener as fallback for non-touch devices or testing
+                         container.addEventListener('click', handleDoubleTap);
+                     }
                 });
                 player.on('error', event => {
                     console.error('Plyr error:', event.detail.plyr.source, event);
+                    alert(`Error playing video: ${video.title}. Check console.`);
+                     closePlayerPopup(); // Close popup on critical error
                 });
+                 // Add listener to remove double-tap listener on destroy
+                player.on('destroy', () => {
+                     const container = player?.elements?.container; // Use optional chaining
+                     if (container) {
+                         container.removeEventListener('touchstart', handleDoubleTap);
+                         container.removeEventListener('click', handleDoubleTap);
+                     }
+                     clearTimeout(tapTimeout); // Clear any pending timeouts
+                 });
+                 playerPopup.classList.add('active');
+                document.body.style.overflow = 'hidden';
              } catch (error) {
                  console.error("Failed to initialize Plyr:", error);
+                 alert(`Error initializing video player for "${video.title}". Check console.`);
+                 // Simple fallback: just show the native controls if Plyr fails
+                 videoPlayerElement.controls = true;
                  playerPopup.classList.add('active');
                  document.body.style.overflow = 'hidden';
              }
         }
+        // --- Double Tap Handler ---
+        function handleDoubleTap(e) {
+             if (!player || !player.elements.container) return;
+             // Ignore taps on controls
+             if (e.target.closest('.plyr__controls')) {
+                 return;
+             }
+            const TappedElement = player.elements.container; // Listen on the main container
+            const now = new Date().getTime();
+            const DOUBLE_TAP_DELAY = 350; // Milliseconds delay for double tap
+            if (now - lastTapTime < DOUBLE_TAP_DELAY) {
+                // Double tap detected
+                 clearTimeout(tapTimeout); // Prevent single tap action
+                 lastTapTime = 0; // Reset tap time
+                const rect = TappedElement.getBoundingClientRect();
+                // Use touch coordinate if available, otherwise click coordinate
+                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+                const tapX = clientX - rect.left;
+                const width = rect.width;
+                 // Optional: Add visual feedback class
+                 const wrapper = TappedElement.querySelector('.plyr__video-wrapper');
+                 if (tapX < width * 0.35) { // Left ~1/3
+                    player.rewind(10);
+                    if (wrapper) flashSeekIndicator(wrapper, 'backward');
+                 } else if (tapX > width * 0.65) { // Right ~1/3
+                    player.forward(10);
+                    if (wrapper) flashSeekIndicator(wrapper, 'forward');
+                 } else { // Middle
+                    player.togglePlay();
+                 }
+                 e.preventDefault(); // Prevent potential browser zoom or other default actions
+            } else {
+                 // First tap (or tap after long delay)
+                 lastTapTime = now;
+                 // We don't need a timeout here because Plyr's default single-click
+                 // behaviour (toggle play/pause) is usually desired. If a double-tap
+                 // happens quickly, the `clearTimeout` and `lastTapTime = 0` above
+                 // will effectively cancel the single-tap interpretation.
+            }
+        }
+        // Helper for visual feedback (optional)
+        function flashSeekIndicator(element, direction) {
+            element.classList.remove('seeking-forward', 'seeking-backward');
+             // Force reflow hack to restart animation
+            void element.offsetWidth;
+             if (direction === 'forward') {
+                 element.classList.add('seeking-forward');
+            } else if (direction === 'backward') {
+                 element.classList.add('seeking-backward');
+            }
+             // Remove class after animation (match animation duration)
+             setTimeout(() => {
+                 element.classList.remove('seeking-forward', 'seeking-backward');
+            }, 400);
+        }
         function closePlayerPopup() {
+            if (player) {
                  try {
+                     // Remove listeners before destroying
+                     const container = player.elements.container;
+                     if (container) {
+                         container.removeEventListener('touchstart', handleDoubleTap);
+                         container.removeEventListener('click', handleDoubleTap);
+                     }
+                    player.destroy(); // This should pause and clean up
+                 } catch (e) { console.warn("Error destroying Plyr instance on close:", e); }
                  player = null;
+            }
+             // Fallback cleanup
             videoPlayerElement.pause();
+            videoPlayerElement.removeAttribute('src');
+            videoPlayerElement.load();
+            clearTimeout(tapTimeout); // Clear tap timeout
             playerPopup.classList.remove('active');
+            document.body.style.overflow = '';
             currentVideo = null;
+            lastTapTime = 0; // Reset tap time
         }
+        // --- Event Listeners (Search, Popup Close, Escape Key) ---
         searchInput.addEventListener('input', function() {
             const searchTerm = this.value.toLowerCase().trim();
             filteredVideos = videoData.filter(video =>
                 video.title.toLowerCase().includes(searchTerm)
             );
+            currentPage = 1;
             renderPagination();
             renderVideoGrid();
         });
         closePopup.addEventListener('click', closePlayerPopup);
         playerPopup.addEventListener('click', function(e) {
             if (e.target === playerPopup) {
                 closePlayerPopup();
             }
         });
+        // Use Plyr's keyboard handling, but keep Escape as a global close fallback
         document.addEventListener('keydown', function(e) {
             if (e.key === 'Escape' && playerPopup.classList.contains('active')) {
                 closePlayerPopup();
             }
+            // Let Plyr handle Space, Arrows, F, M when it has focus
         });
         // --- Initial Load ---
         fetchVideoData();