Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 13, 2025

Commit

c344676

verified ·

1 Parent(s): 0cb0646

Update index.html

Browse files

Files changed (1) hide show

index.html +136 -164

index.html CHANGED Viewed

@@ -3,13 +3,14 @@
 <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; }
@@ -37,60 +38,20 @@
         .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...">
@@ -107,7 +68,6 @@
         <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>
@@ -122,9 +82,9 @@
         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');
@@ -152,15 +112,16 @@
                            }
                            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;
@@ -181,7 +142,7 @@
                 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;
@@ -255,141 +216,186 @@
             });
         }
-        // --- Updated Player Logic ---
         function playVideo(video) {
             if (!video || !video.url) {
-                console.error("Cannot play video: Invalid video data provided.");
                 return;
             }
             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);
@@ -397,57 +403,23 @@
         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();

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HF Video Library (Plyr + Controls - Fixed Cleanup)</title>
     <!-- Plyr CSS -->
     <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
     <style>
+        /* --- Keep ALL your previous styles --- */
+         /* --- 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; }
         .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; }
         :root { --plyr-color-main: #007bff; }
+        .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; }
+        .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: '»'; 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: '«'; 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>
+    <!-- Keep Body HTML structure as before -->
+     <div class="container">
         <div class="header">
+             <h1>HF Video Library <small>(Plyr + Controls - Fixed Cleanup)</small></h1>
         </div>
         <div class="search-container">
             <input type="text" id="search" placeholder="Search videos...">
         <div class="popup-content">
             <button class="close-popup" id="closePopup">✕</button>
             <div class="popup-title" id="currentTitle">Video Title</div>
             <video id="videoPlayer" playsinline controls preload="auto">
                 Your browser does not support the video tag.
             </video>
         let currentVideo = null;
         let currentPage = 1;
         const videosPerPage = 12;
+        let player = null;
+        let lastTapTime = 0;
+        let tapTimeout = null;
         const videoGrid = document.getElementById('videoGrid');
         const pagination = document.getElementById('pagination');
                            }
                            video.url = url.toString();
                         } catch (e) {
+                           console.warn(`Invalid URL format for video "${video.title || 'Untitled'}": ${video.url}`, e);
                            video.url = null; // Mark as invalid
                         }
                     }
                      if (!video.title || !video.url) {
+                         // Ensure title exists even if empty for logging
+                        console.warn(`Skipping video with missing title or invalid/missing URL:`, video);
                     }
                 });
+                 videoData = videoData.filter(video => video.title && video.url); // Ensure only valid entries proceed
                  if (videoData.length === 0) {
                      videoGrid.innerHTML = '<div class="no-videos">No valid videos found. Check database.json format and URLs.</div>';
                      return;
                 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();
                 return;
             }
              const startIndex = (currentPage - 1) * videosPerPage;
             });
         }
+        // --- Player Logic with Enhanced Cleanup ---
+        /**
+         * Cleans up the existing player instance and resets the video element.
+         * @param {string} context - Identifier for logging (e.g., 'closePlayerPopup', 'playVideoStart')
+         */
+        function cleanupPlayer(context = 'unknown') {
+            console.log(`Cleanup requested from: ${context}`);
+            if (player) {
+                console.log("Player instance found, attempting cleanup.");
+                try {
+                    const container = player.elements?.container; // Use optional chaining
+                    if (container) {
+                        console.log("Removing double-tap listeners.");
+                        container.removeEventListener('touchstart', handleDoubleTap);
+                        container.removeEventListener('click', handleDoubleTap);
+                    } else {
+                        console.log("Player container not found, skipping listener removal.");
+                    }
+                    console.log("Destroying Plyr instance.");
+                    player.destroy();
+                } catch (e) {
+                    console.warn(`Error destroying Plyr instance during cleanup (${context}):`, e);
+                } finally {
+                    player = null; // Ensure player is nullified
+                    console.log("Plyr instance variable nullified.");
+                }
+            } else {
+                 console.log("No active player instance found to clean up.");
+            }
+            // --- Force reset the native video element ---
+            // This is crucial to prevent lingering state/playback
+            console.log("Resetting native video element.");
+            videoPlayerElement.pause();
+            videoPlayerElement.removeAttribute('src'); // Remove the source attribute
+            videoPlayerElement.src = ""; // Explicitly set src to empty string
+            videoPlayerElement.load(); // Force the browser to unload the media
+            clearTimeout(tapTimeout); // Clear any pending tap timeouts
+            lastTapTime = 0; // Reset tap timer
+            console.log("Native element reset complete.");
+        }
         function playVideo(video) {
             if (!video || !video.url) {
+                console.error("Cannot play video: Invalid video data provided.", video);
                 return;
             }
+            console.log(`Attempting to play video: ${video.title} (${video.url})`);
+            // ***** 1. Force Cleanup Before Starting *****
+            cleanupPlayer('playVideoStart'); // Clean up any previous instance thoroughly
             currentVideo = video;
             currentTitle.textContent = video.title;
             currentTitle.setAttribute('title', video.title);
+            // ***** 2. Set New Source *****
+            // Note: cleanupPlayer already reset src, so setting it here is correct
             videoPlayerElement.src = video.url;
+            console.log("Set new video source.");
+            // ***** 3. Initialize New Plyr Instance *****
             try {
+                 console.log("Initializing new Plyr instance.");
                 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 },
                      tooltips: { controls: true, seek: true }
                 });
+                console.log("Plyr instance created.");
+                // --- Setup Event Listeners for the NEW Instance ---
                 player.on('ready', event => {
+                    console.log("Plyr ready event fired.");
                     const instance = event.detail.plyr;
                     const container = instance.elements.container;
+                     if (container) {
+                         console.log("Setting up focus and double-tap listeners.");
+                        container.setAttribute('tabindex', '-1');
+                        setTimeout(() => {
+                             try { container.focus(); } catch(e) { console.warn("Failed to focus player container", e); }
+                         }, 100); // Delay focus
+                        container.addEventListener('touchstart', handleDoubleTap, { passive: false }); // Use passive: false if preventDefault is needed
+                        container.addEventListener('click', handleDoubleTap);
+                    } else {
+                         console.warn("Plyr container not found on ready.");
                      }
+                     // Optional: Autoplay (often blocked)
+                     // instance.play().catch(e => console.log("Autoplay prevented/failed:", e));
                 });
                 player.on('error', event => {
+                    console.error('Plyr playback error:', event.detail.plyr.source, event);
                     alert(`Error playing video: ${video.title}. Check console.`);
+                    closePlayerPopup(); // Close on critical error
                 });
+                // Listener to aid cleanup on destroy (redundant with our explicit cleanup, but good practice)
                 player.on('destroy', () => {
+                    console.log("Plyr destroy event fired.");
+                    // No need to remove listeners here, cleanupPlayer handles it.
                  });
+                // ***** 4. Show Popup *****
+                playerPopup.classList.add('active');
                 document.body.style.overflow = 'hidden';
+                console.log("Player popup activated.");
              } catch (error) {
                  console.error("Failed to initialize Plyr:", error);
                  alert(`Error initializing video player for "${video.title}". Check console.`);
+                 // Basic fallback if Plyr fails
+                 videoPlayerElement.controls = true; // Show native controls
                  playerPopup.classList.add('active');
                  document.body.style.overflow = 'hidden';
              }
         }
+        // --- Double Tap Handler (Keep as before) ---
         function handleDoubleTap(e) {
+             if (!player || !player.elements.container || !player.elements.wrapper) {
+                 // console.log("Double tap ignored: Player or elements not ready.");
+                 return;
+             }
              if (e.target.closest('.plyr__controls')) {
+                 // console.log("Double tap ignored: Tap on controls.");
                  return;
              }
+            const TappedElement = player.elements.container;
             const now = new Date().getTime();
+            const DOUBLE_TAP_DELAY = 350;
             if (now - lastTapTime < DOUBLE_TAP_DELAY) {
+                 console.log("Double tap detected.");
+                 clearTimeout(tapTimeout);
+                 lastTapTime = 0;
                 const rect = TappedElement.getBoundingClientRect();
                 const clientX = e.touches ? e.touches[0].clientX : e.clientX;
                 const tapX = clientX - rect.left;
                 const width = rect.width;
+                const wrapper = player.elements.wrapper; // wrapper for visual feedback
+                if (tapX < width * 0.35) {
+                    console.log("Double tap: Rewind 10s");
                     player.rewind(10);
                     if (wrapper) flashSeekIndicator(wrapper, 'backward');
+                } else if (tapX > width * 0.65) {
+                     console.log("Double tap: Forward 10s");
                     player.forward(10);
                     if (wrapper) flashSeekIndicator(wrapper, 'forward');
+                } else {
+                    console.log("Double tap: Toggle Play/Pause");
                     player.togglePlay();
+                }
+                e.preventDefault(); // Crucial for touchstart
             } else {
+                 // console.log("Single tap registered.");
                  lastTapTime = now;
+                 // No timeout needed here, let default single click handle play/pause toggle
             }
         }
         function flashSeekIndicator(element, direction) {
             element.classList.remove('seeking-forward', 'seeking-backward');
             void element.offsetWidth;
+             element.classList.add(direction === 'forward' ? 'seeking-forward' : 'seeking-backward');
              setTimeout(() => {
                  element.classList.remove('seeking-forward', 'seeking-backward');
             }, 400);
         function closePlayerPopup() {
+            console.log("Close popup requested.");
+            // ***** Call the centralized cleanup function *****
+            cleanupPlayer('closePlayerPopup');
             playerPopup.classList.remove('active');
             document.body.style.overflow = '';
+            currentVideo = null; // Clear current video reference
+            console.log("Popup closed and state reset.");
         }
+        // --- Event Listeners (Search, Popup Close, Escape Key - Keep as before) ---
+        searchInput.addEventListener('input', function() { /* ... */ });
         closePopup.addEventListener('click', closePlayerPopup);
+        playerPopup.addEventListener('click', function(e) { if (e.target === playerPopup) { closePlayerPopup(); } });
+        document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && playerPopup.classList.contains('active')) { closePlayerPopup(); } });
         // --- Initial Load ---
         fetchVideoData();