Update index.html

index.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Video Library</title>
+    <!-- Load Plyr.io for enhanced video playback -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.css" />
     <style>
         * {
             box-sizing: border-box;
@@ -75,10 +77,34 @@
             justify-content: center;
             margin-bottom: 10px;
             overflow: hidden;
+            position: relative;
+        }
+        .video-thumbnail img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .video-thumbnail::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.3);
         }
-        .video-thumbnail i {
-            font-size: 48px;
+        .play-icon {
+            position: absolute;
+            z-index: 2;
+            font-size: 50px;
             color: white;
+            opacity: 0.8;
+            transition: opacity 0.2s;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+        .video-item:hover .play-icon {
+            opacity: 1;
+            transform: scale(1.1);
         }
         .video-item-title {
             font-weight: 500;
@@ -115,7 +141,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: rgba(0,0,0,0.8);
+            background-color: rgba(0,0,0,0.9);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -131,7 +157,7 @@
         .popup-content {
             width: 90%;
             max-width: 1024px;
-            background-color: #222;
+            background-color: #111;
             border-radius: 8px;
             overflow: hidden;
             position: relative;
@@ -139,13 +165,13 @@
         }
         .close-popup {
             position: absolute;
-            top: 10px;
-            right: 10px;
+            top: 15px;
+            right: 15px;
             background-color: rgba(0,0,0,0.5);
             color: white;
             border: none;
-            width: 30px;
-            height: 30px;
+            width: 36px;
+            height: 36px;
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -153,19 +179,23 @@
             cursor: pointer;
             z-index: 10;
             font-size: 18px;
+            transition: background-color 0.2s;
+        }
+        .close-popup:hover {
+            background-color: rgba(255,0,0,0.7);
         }
         .player-wrapper {
             position: relative;
             width: 100%;
             padding-top: 56.25%; /* 16:9 Aspect Ratio */
+            background-color: #000;
         }
-        #videoPlayer {
+        .plyr {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: #000;
         }
         .popup-title {
             color: white;
@@ -173,39 +203,50 @@
             font-size: 1.2em;
             background-color: #111;
         }
-        .controls {
-            display: flex;
-            gap: 10px;
-            padding: 15px;
-            background-color: #111;
-            flex-wrap: wrap;
+        .no-videos {
+            padding: 20px;
+            text-align: center;
+            color: #777;
         }
-        .btn {
-            padding: 8px 16px;
-            background-color: #333;
+        .player-loading {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
             color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: background-color 0.2s;
+            font-size: 1.2em;
+            z-index: 5;
+        }
+        .player-loading .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(255,255,255,0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
         }
-        .btn:hover {
-            background-color: #555;
+        @keyframes spin {
+            to { transform: rotate(360deg); }
         }
-        .instructions {
-            color: #ccc;
+        .quality-selector {
             padding: 10px 15px;
-            background-color: #111;
-            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            background-color: #1a1a1a;
+            color: #ddd;
         }
-        .play-icon {
-            font-size: 50px;
+        .quality-selector select {
+            padding: 5px 10px;
+            background-color: #333;
             color: white;
-            opacity: 0.8;
-            transition: opacity 0.2s;
-        }
-        .video-item:hover .play-icon {
-            opacity: 1;
+            border: none;
+            border-radius: 4px;
         }
         @media (max-width: 768px) {
             .video-grid {
@@ -215,10 +256,31 @@
                 width: 95%;
             }
         }
-        .no-videos {
-            padding: 20px;
-            text-align: center;
-            color: #777;
+        .debug-overlay {
+            position: absolute;
+            bottom: 70px;
+            left: 10px;
+            background-color: rgba(0,0,0,0.7);
+            color: white;
+            padding: 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            max-width: 300px;
+            z-index: 10;
+            display: none;
+        }
+        .debug-toggle {
+            background-color: #333;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 12px;
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            z-index: 10;
         }
     </style>
 </head>
@@ -248,24 +310,33 @@
             <button class="close-popup" id="closePopup">✕</button>
             <div class="popup-title" id="currentTitle">Video Title</div>
             <div class="player-wrapper">
-                <video id="videoPlayer" controls>
-                    Your browser does not support the video tag.
-                </video>
-            </div>
-            <div class="controls">
-                <button class="btn" id="backwardBtn">⏪ 10s</button>
-                <button class="btn" id="playPauseBtn">⏯️ Play/Pause</button>
-                <button class="btn" id="forwardBtn">⏩ 10s</button>
-                <button class="btn" id="fullscreenBtn">⛶ Fullscreen</button>
-                <button class="btn" id="muteBtn">🔊 Mute/Unmute</button>
+                <div id="playerContainer"></div>
+                <div class="player-loading" id="playerLoading">
+                    <div class="spinner"></div>
+                </div>
+                <div class="debug-overlay" id="debugOverlay">
+                    Loading metrics...
+                </div>
+                <button class="debug-toggle" id="debugToggle">Show Stats</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 class="quality-selector">
+                <span>Playback Quality:</span>
+                <select id="qualitySelector">
+                    <option value="auto">Auto</option>
+                    <option value="1080">1080p</option>
+                    <option value="720">720p</option>
+                    <option value="480">480p</option>
+                    <option value="360">360p</option>
+                </select>
             </div>
         </div>
     </div>
 
+    <!-- Load required scripts -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.14/hls.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.7.1/dash.all.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script>
+    
     <script>
         // Global variables
         let videoData = [];
@@ -273,21 +344,27 @@
         let currentVideo = null;
         let currentPage = 1;
         const videosPerPage = 10;
+        let player = null;
+        let hls = null;
+        let dash = null;
+        let videoPreloadList = [];
+        let videoPreloadIndex = 0;
+        let videoBuffers = new Map();
+        let debugInterval = null;
         
         // 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 playerContainer = document.getElementById('playerContainer');
+        const playerLoading = document.getElementById('playerLoading');
+        const qualitySelector = document.getElementById('qualitySelector');
+        const debugOverlay = document.getElementById('debugOverlay');
+        const debugToggle = document.getElementById('debugToggle');
+        
         // Function to fetch video data
         async function fetchVideoData() {
             try {
@@ -304,12 +381,62 @@
                 filteredVideos = [...videoData];
                 renderPagination();
                 renderVideoGrid();
+                
+                // Preload thumbnails for first page
+                preloadThumbnails();
             } catch (error) {
                 console.error('Error fetching video data:', error);
                 videoGrid.innerHTML = `<div class="no-videos">Error loading videos: ${error.message}</div>`;
             }
         }
 
+        // Function to extract thumbnail from video URL
+        function getThumbnailUrl(videoUrl) {
+            // For Hugging Face videos, we can use a placeholder
+            return `/api/placeholder/280/156`;
+        }
+
+        // Function to preload thumbnails for better UX
+        function preloadThumbnails() {
+            // 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);
+            
+            currentVideos.forEach(video => {
+                const img = new Image();
+                img.src = getThumbnailUrl(video.url);
+            });
+            
+            // Preload video data for the first few videos
+            videoPreloadList = currentVideos.slice(0, 3);
+            startVideoPreloading();
+        }
+        
+        // Function to preload video data for smoother playback
+        function startVideoPreloading() {
+            if (videoPreloadList.length === 0 || videoPreloadIndex >= videoPreloadList.length) return;
+            
+            const video = videoPreloadList[videoPreloadIndex];
+            
+            // Create a minimal fetch request to start preloading the video
+            fetch(video.url, { method: 'HEAD' })
+                .then(() => {
+                    console.log(`Preloaded headers for ${video.title}`);
+                    videoPreloadIndex++;
+                    if (videoPreloadIndex < videoPreloadList.length) {
+                        startVideoPreloading();
+                    }
+                })
+                .catch(err => {
+                    console.warn(`Failed to preload ${video.title}:`, err);
+                    videoPreloadIndex++;
+                    if (videoPreloadIndex < videoPreloadList.length) {
+                        startVideoPreloading();
+                    }
+                });
+        }
+
         // Function to render video grid
         function renderVideoGrid() {
             if (filteredVideos.length === 0) {
@@ -318,7 +445,6 @@
                 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);
@@ -326,13 +452,13 @@
             videoGrid.innerHTML = currentVideos.map((video, index) => `
                 <div class="video-item" data-index="${startIndex + index}">
                     <div class="video-thumbnail">
+                        <img src="${getThumbnailUrl(video.url)}" alt="${video.title}" loading="lazy">
                         <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'));
@@ -341,58 +467,47 @@
                     }
                 });
             });
+            
+            // Preload thumbnails again
+            preloadThumbnails();
         }
 
-        // Function to render pagination
+        // Function to render pagination controls
         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'));
@@ -403,213 +518,306 @@
             });
         }
 
-        // Function to play video
-        function playVideo(video) {
-            currentVideo = video;
-            currentTitle.textContent = video.title;
+        // Function to cleanup previous player instances
+        function cleanupPlayerInstances() {
+            if (player) {
+                player.destroy();
+                player = null;
+            }
+            if (hls) {
+                hls.destroy();
+                hls = null;
+            }
+            if (dash) {
+                dash.reset();
+                dash = null;
+            }
+            if (debugInterval) {
+                clearInterval(debugInterval);
+                debugInterval = null;
+            }
+            playerContainer.innerHTML = '';
+        }
+
+        // Function to initialize and show debug overlay with playback metrics
+        function initDebugOverlay() {
+            if (!player) return;
             
-            // Handle different types of URLs (direct or Hugging Face)
-            let videoUrl = video.url;
+            debugToggle.addEventListener('click', function() {
+                if (debugOverlay.style.display === 'block') {
+                    debugOverlay.style.display = 'none';
+                    if (debugInterval) {
+                        clearInterval(debugInterval);
+                        debugInterval = null;
+                    }
+                } else {
+                    debugOverlay.style.display = 'block';
+                    updateDebugInfo();
+                    debugInterval = setInterval(updateDebugInfo, 1000);
+                }
+            });
+        }
+        
+        // Update debug information
+        function updateDebugInfo() {
+            if (!player || !player.media) return;
+            
+            let info = '';
+            const video = player.media;
+            info += `Resolution: ${video.videoWidth}x${video.videoHeight}<br>`;
+            info += `Current Time: ${formatTime(video.currentTime)}/${formatTime(video.duration)}<br>`;
+            info += `Playback Rate: ${video.playbackRate}x<br>`;
+            info += `Volume: ${Math.round(video.volume * 100)}%<br><br>`;
             
-            // Check if this is a Hugging Face URL and handle accordingly
-            if (videoUrl.includes('huggingface.co')) {
-                // URLs for private repositories should already include token
+            const buffered = video.buffered;
+            if (buffered.length) {
+                info += `Buffered: ${formatTime(buffered.start(0))} - ${formatTime(buffered.end(0))}<br>`;
+                const bufferedAhead = buffered.end(0) - video.currentTime;
+                info += `Buffer ahead: ${bufferedAhead.toFixed(2)}s<br>`;
             }
             
-            videoPlayer.src = videoUrl;
-            videoPlayer.load();
+            if (video.networkState) {
+                const states = ['NETWORK_EMPTY', 'NETWORK_IDLE', 'NETWORK_LOADING', 'NETWORK_NO_SOURCE'];
+                info += `Network State: ${states[video.networkState]}<br>`;
+            }
+            
+            if (hls) {
+                info += `<br>HLS Metrics:<br>`;
+                info += `Level: ${hls.currentLevel} (${hls.levels[hls.currentLevel]?.height || '?'}p)<br>`;
+                info += `Latency: ${hls.latency?.toFixed(2) || '?'}ms<br>`;
+            }
             
-            // Show popup
+            if (dash) {
+                info += `<br>DASH Metrics:<br>`;
+                const dashMetrics = dash.getMetricsFor('video');
+                const videoQualities = dash.getBitrateInfoListFor('video');
+                info += `Quality: ${videoQualities[dash.getQualityFor('video')]?.width || '?'}x${videoQualities[dash.getQualityFor('video')]?.height || '?'}<br>`;
+                info += `Buffer: ${dash.getBufferLength('video').toFixed(2)}s<br>`;
+            }
+            
+            debugOverlay.innerHTML = info;
+        }
+        
+        // Format time for debug info
+        function formatTime(seconds) {
+            if (isNaN(seconds)) return '0:00';
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+        }
+
+        // Function to play video with optimized streaming
+        function playVideo(video) {
+            currentVideo = video;
+            currentTitle.textContent = video.title;
+            playerLoading.style.display = 'flex';
             playerPopup.classList.add('active');
+            cleanupPlayerInstances();
             
-            // Play video after showing popup
-            setTimeout(() => {
-                videoPlayer.play().catch(error => {
-                    console.error('Error playing video:', error);
-                    alert(`Error playing video: ${error.message}. Make sure the URL is accessible.`);
-                });
-            }, 300);
+            const videoElement = document.createElement('video');
+            videoElement.setAttribute('playsinline', '');
+            videoElement.setAttribute('controls', '');
+            videoElement.classList.add('plyr__video-embed');
+            playerContainer.appendChild(videoElement);
             
-            // Disable scrolling on body when popup is active
+            const videoUrl = video.url;
+            initializePlayer(videoElement, videoUrl);
             document.body.style.overflow = 'hidden';
         }
+        
+        // Determine if the URL is for Hugging Face videos (or similar criteria)
+        function isHuggingFaceURL(url) {
+            return url.includes('huggingface.co');
+        }
+        
+        // Initialize the player with the best streaming technology
+        function initializePlayer(videoElement, videoUrl) {
+            const initPlyr = () => {
+                const options = {
+                    controls: [
+                        'play-large', 'play', 'progress', 'current-time', 'mute',
+                        'volume', 'settings', 'fullscreen'
+                    ],
+                    settings: ['quality', 'speed'],
+                    keyboard: { focused: true, global: true },
+                    tooltips: { controls: true, seek: true },
+                    seekTime: 10,
+                    speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] },
+                    blankVideo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+                    previewThumbnails: {
+                        enabled: false,
+                    },
+                    autoplay: true,
+                    disableContextMenu: false
+                };
+                
+                player = new Plyr(videoElement, options);
+                
+                player.on('ready', () => {
+                    playerLoading.style.display = 'none';
+                    initDebugOverlay();
+                    setTimeout(() => {
+                        player.play().catch(error => {
+                            console.warn('Autoplay prevented:', error);
+                        });
+                    }, 100);
+                });
+                
+                player.on('enterfullscreen', () => {
+                    if (screen.orientation && screen.orientation.lock) {
+                        screen.orientation.lock('landscape').catch(e => {
+                            console.warn("Orientation lock failed:", e);
+                        });
+                    }
+                });
+                
+                player.on('exitfullscreen', () => {
+                    if (screen.orientation && screen.orientation.unlock) {
+                        screen.orientation.unlock();
+                    }
+                });
+                
+                player.on('seeking', () => {
+                    playerLoading.style.display = 'flex';
+                });
+                
+                player.on('seeked', () => {
+                    playerLoading.style.display = 'none';
+                });
+                
+                qualitySelector.addEventListener('change', function() {
+                    const quality = this.value;
+                    if (quality === 'auto') {
+                        if (hls) {
+                            hls.currentLevel = -1;
+                        }
+                        if (dash) {
+                            dash.setAutoSwitchQualityFor('video', true);
+                        }
+                        return;
+                    }
+                    const height = parseInt(quality);
+                    
+                    if (hls && hls.levels) {
+                        const levelIndex = hls.levels.findIndex(level => level.height <= height);
+                        if (levelIndex !== -1) {
+                            hls.currentLevel = levelIndex;
+                        }
+                    }
+                    
+                    if (dash) {
+                        const videoQualities = dash.getBitrateInfoListFor('video');
+                        const qualityIndex = videoQualities.findIndex(q => q.height <= height);
+                        if (qualityIndex !== -1) {
+                            dash.setAutoSwitchQualityFor('video', false);
+                            dash.setQualityFor('video', qualityIndex);
+                        }
+                    }
+                });
+            };
+            
+            if (videoUrl.includes('.m3u8') || isHuggingFaceURL(videoUrl)) {
+                if (Hls.isSupported()) {
+                    hls = new Hls({
+                        startLevel: -1,
+                        maxBufferLength: 30,
+                        maxMaxBufferLength: 60,
+                        progressive: true,
+                        lowLatencyMode: true,
+                        backBufferLength: 90,
+                        enableWorker: true,
+                        testBandwidth: true,
+                        abrEwmaDefaultEstimate: 1000000,
+                        abrBandWidthFactor: 0.9,
+                        abrBandWidthUpFactor: 0.7,
+                        maxLoadingDelay: 4,
+                        manifestLoadingTimeOut: 10000,
+                        fragLoadingTimeOut: 20000,
+                        enableSoftwareAES: true,
+                    });
+                    
+                    hls.loadSource(videoUrl);
+                    hls.attachMedia(videoElement);
+                    
+                    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                        initPlyr();
+                        qualitySelector.innerHTML = '<option value="auto">Auto</option>';
+                        hls.levels.forEach(level => {
+                            qualitySelector.innerHTML += `<option value="${level.height}">${level.height}p</option>`;
+                        });
+                    });
+                    
+                    hls.on(Hls.Events.ERROR, (event, data) => {
+                        console.error('HLS Error:', data);
+                        if (data.fatal) {
+                            switch(data.type) {
+                                case Hls.ErrorTypes.NETWORK_ERROR:
+                                    console.log('Fatal network error, trying to recover');
+                                    hls.startLoad();
+                                    break;
+                                case Hls.ErrorTypes.MEDIA_ERROR:
+                                    console.log('Fatal media error, trying to recover');
+                                    hls.recoverMediaError();
+                                    break;
+                                default:
+                                    console.error('Fatal HLS error, cannot recover');
+                                    hls.destroy();
+                                    alert('Could not play this video. Please try another one.');
+                                    closePlayerPopup();
+                                    break;
+                            }
+                        }
+                    });
+                } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
+                    videoElement.src = videoUrl;
+                    initPlyr();
+                }
+            }
+            else if (videoUrl.includes('.mpd')) {
+                dash = dashjs.MediaPlayer().create();
+                dash.initialize(videoElement, videoUrl, true);
+                dash.updateSettings({
+                    streaming: {
+                        buffer: {
+                            fastSwitchEnabled: true,
+                            stableBufferTime: 20,
+                        }
+                    }
+                });
+                
+                dash.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, function() {
+                    initPlyr();
+                    const videoQualities = dash.getBitrateInfoListFor('video');
+                    qualitySelector.innerHTML = '<option value="auto">Auto</option>';
+                    videoQualities.forEach(quality => {
+                        qualitySelector.innerHTML += `<option value="${quality.height}">${quality.height}p</option>`;
+                    });
+                });
+            }
+            else {
+                // Fallback for standard video files
+                videoElement.src = videoUrl;
+                initPlyr();
+            }
+        }
 
-        // Close popup function
+        // Function to close the player popup and cleanup the player
         function closePlayerPopup() {
-            videoPlayer.pause();
             playerPopup.classList.remove('active');
             document.body.style.overflow = '';
+            cleanupPlayerInstances();
         }
 
-        // 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
+        // Add event listener for closing the popup
         closePopup.addEventListener('click', closePlayerPopup);
-
-        // Close popup when clicking outside content
-        playerPopup.addEventListener('click', function(e) {
-            if (e.target === playerPopup) {
+        window.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
                 closePlayerPopup();
             }
         });
-
-        // Video controls
-        playPauseBtn.addEventListener('click', function() {
-            if (videoPlayer.paused) {
-                videoPlayer.play();
-            } else {
-                videoPlayer.pause();
-            }
-        });
-
-        backwardBtn.addEventListener('click', function() {
-            videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 10);
-        });
-
-        forwardBtn.addEventListener('click', function() {
-            videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 10);
-        });
-
-        fullscreenBtn.addEventListener('click', function() {
-            if (videoPlayer.requestFullscreen) {
-                videoPlayer.requestFullscreen();
-            } else if (videoPlayer.webkitRequestFullscreen) { /* Safari */
-                videoPlayer.webkitRequestFullscreen();
-            } else if (videoPlayer.msRequestFullscreen) { /* IE11 */
-                videoPlayer.msRequestFullscreen();
-            }
-        });
-
-        muteBtn.addEventListener('click', function() {
-            videoPlayer.muted = !videoPlayer.muted;
-        });
-
-        // Keyboard controls (only active when popup is visible)
-        document.addEventListener('keydown', function(e) {
-            if (!playerPopup.classList.contains('active')) return;
-            
-            switch(e.key) {
-                case ' ': // Space
-                    if (videoPlayer.paused) {
-                        videoPlayer.play();
-                    } else {
-                        videoPlayer.pause();
-                    }
-                    e.preventDefault();
-                    break;
-                case 'ArrowRight':
-                    videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 10);
-                    e.preventDefault();
-                    break;
-                case 'ArrowLeft':
-                    videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 10);
-                    e.preventDefault();
-                    break;
-                case 'f':
-                case 'F':
-                    if (document.fullscreenElement) {
-                        document.exitFullscreen();
-                    } else if (videoPlayer.requestFullscreen) {
-                        videoPlayer.requestFullscreen();
-                    }
-                    e.preventDefault();
-                    break;
-                case 'm':
-                case 'M':
-                    videoPlayer.muted = !videoPlayer.muted;
-                    e.preventDefault();
-                    break;
-                case 'Escape':
-                    closePlayerPopup();
-                    e.preventDefault();
-                    break;
-            }
-        });
-
-        // Double tap controls for mobile/touch devices
-        let lastTap = 0;
-        let tapTimeout;
         
-        videoPlayer.addEventListener('click', function(e) {
-            const currentTime = new Date().getTime();
-            const tapLength = currentTime - lastTap;
-            clearTimeout(tapTimeout);
-            
-            if (tapLength < 500 && tapLength > 0) {
-                // Double tap detected
-                const playerRect = videoPlayer.getBoundingClientRect();
-                const clickX = e.clientX - playerRect.left;
-                const playerWidth = playerRect.width;
-                
-                // Determine click position (left, center, or right third)
-                if (clickX < playerWidth / 3) {
-                    // Left side - backward
-                    videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 10);
-                } else if (clickX > (playerWidth * 2) / 3) {
-                    // Right side - forward
-                    videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 10);
-                } else {
-                    // Center - play/pause
-                    if (videoPlayer.paused) {
-                        videoPlayer.play();
-                    } else {
-                        videoPlayer.pause();
-                    }
-                }
-                e.preventDefault();
-            } else {
-                // Single tap - wait to see if it becomes a double tap
-                tapTimeout = setTimeout(function() {
-                    // Single tap action (do nothing or implement something)
-                }, 300);
-            }
-            lastTap = currentTime;
-        });
-
-        // Fix for fullscreen and sound issues
-        videoPlayer.addEventListener('loadedmetadata', function() {
-            // Ensure volume is set
-            videoPlayer.volume = 1.0;
-        });
-
-        // Fix for fullscreen mode
-        document.addEventListener('fullscreenchange', handleFullscreenChange);
-        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
-        document.addEventListener('mozfullscreenchange', handleFullscreenChange);
-        document.addEventListener('MSFullscreenChange', handleFullscreenChange);
-
-        function handleFullscreenChange() {
-            if (document.fullscreenElement || 
-                document.webkitFullscreenElement || 
-                document.mozFullScreenElement) {
-                console.log('Entered fullscreen mode');
-                // Force video to take full size of screen
-                const fullscreenVideo = document.fullscreenElement || 
-                                       document.webkitFullscreenElement || 
-                                       document.mozFullScreenElement;
-                if (fullscreenVideo === videoPlayer) {
-                    videoPlayer.style.width = '100%';
-                    videoPlayer.style.height = '100%';
-                }
-            } else {
-                console.log('Exited fullscreen mode');
-                // Reset styles when exiting fullscreen
-                videoPlayer.style.width = '100%';
-                videoPlayer.style.height = '100%';
-            }
-        }
-
-        // Initialize
+        // Initialize video data on page load
         fetchVideoData();
     </script>
 </body>
-</html>
+</html>