Update index.html

index.html

@@ -4,130 +4,909 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HF Video Library</title>
+    <!-- Plyr CSS -->
+    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
     <style>
-        /* Custom CSS for the application */
-        #search-bar {
-            margin: 20px;
+        :root {
+            --primary-color: #6366f1;
+            --primary-hover: #4f46e5;
+            --text-color: #1f2937;
+            --bg-color: #f9fafb;
+            --card-bg: #ffffff;
+            --border-color: #e5e7eb;
+            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            line-height: 1.5;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        header {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
             text-align: center;
         }
-        #search-input {
-            padding: 10px;
-            width: 300px;
+
+        .search-box {
+            display: flex;
+            max-width: 500px;
+            margin: 0 auto;
+            width: 100%;
+        }
+
+        .search-input {
+            flex: 1;
+            padding: 12px 16px;
+            font-size: 1rem;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+
+        .search-input:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
         }
-        #video-grid {
+
+        .video-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
             gap: 20px;
-            padding: 20px;
+            margin-bottom: 30px;
         }
+
         .video-card {
-            border: 1px solid #ccc;
-            padding: 10px;
-            text-align: center;
+            background-color: var(--card-bg);
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: var(--shadow);
+            transition: transform 0.2s, box-shadow 0.2s;
+            cursor: pointer;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .video-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        .video-thumbnail {
+            width: 100%;
+            aspect-ratio: 16 / 9;
+            background-color: #eee;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #888;
+        }
+
+        .video-thumbnail svg {
+            width: 48px;
+            height: 48px;
+            color: var(--primary-color);
+        }
+
+        .video-info {
+            padding: 16px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .video-title {
+            font-size: 1rem;
+            font-weight: 600;
+            margin-bottom: 8px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .pagination {
+            display: flex;
+            justify-content: center;
+            gap: 8px;
+            margin-top: 30px;
+            flex-wrap: wrap;
+        }
+
+        .page-btn {
+            padding: 8px 12px;
+            background-color: var(--card-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
             cursor: pointer;
+            font-size: 0.9rem;
+            transition: all 0.2s;
         }
-        #video-modal {
+
+        .page-btn:hover {
+            background-color: var(--primary-hover);
+            color: white;
+            border-color: var(--primary-hover);
+        }
+
+        .page-btn.active {
+            background-color: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+
+        .modal-overlay {
             position: fixed;
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0,0,0,0.8);
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.75);
             display: flex;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            padding: 20px;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s, visibility 0.3s;
+        }
+
+        .modal-overlay.active {
+            opacity: 1;
+            visibility: visible;
         }
-        #player {
-            width: 80%;
-            height: 80%;
+
+        .modal-content {
+            width: 100%;
+            max-width: 900px;
+            background-color: var(--card-bg);
+            border-radius: 8px;
+            overflow: hidden;
+            position: relative;
+            padding-top: 56.25%; /* 16:9 aspect ratio */
         }
-        #close-modal {
+
+        .modal-close {
             position: absolute;
-            top: 20px;
-            right: 20px;
-            background: white;
+            top: 10px;
+            right: 10px;
+            width: 36px;
+            height: 36px;
+            background-color: rgba(0, 0, 0, 0.5);
             border: none;
-            padding: 10px;
+            border-radius: 50%;
+            color: white;
+            font-size: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             cursor: pointer;
+            z-index: 1010;
+            transition: background-color 0.2s;
+        }
+
+        .modal-close:hover {
+            background-color: rgba(0, 0, 0, 0.7);
+        }
+
+        .video-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        .video-player {
+            width: 100%;
+            height: 100%;
+        }
+
+        .loader {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 200px;
+            text-align: center;
+        }
+
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(99, 102, 241, 0.3);
+            border-radius: 50%;
+            border-top-color: var(--primary-color);
+            animation: spin 1s ease-in-out infinite;
+            margin-bottom: 20px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .error-message {
+            color: #ef4444;
+            padding: 16px;
+            text-align: center;
+            background-color: #fee2e2;
+            border-radius: 6px;
+            margin-bottom: 20px;
+            border: 1px solid #fecaca;
+        }
+
+        @media (max-width: 640px) {
+            .video-grid {
+                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+                gap: 16px;
+            }
+
+            h1 {
+                font-size: 1.75rem;
+            }
+
+            .search-input {
+                padding: 10px 12px;
+            }
+
+            .modal-content {
+                max-width: 100%;
+            }
+        }
+
+        /* Pagination with jump-to-page input for large collections */
+        .pagination-jump {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-left: 8px;
+        }
+
+        .jump-input {
+            width: 60px;
+            padding: 8px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            text-align: center;
+        }
+
+        .no-results {
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 40px;
+            background-color: var(--card-bg);
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+        }
+
+        /* Improved loading states */
+        .video-card-skeleton {
+            background-color: var(--card-bg);
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: var(--shadow);
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .skeleton-thumbnail {
+            width: 100%;
+            aspect-ratio: 16 / 9;
+            background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
+            background-size: 200% 100%;
+            animation: shimmer 1.5s infinite;
+        }
+
+        .skeleton-info {
+            padding: 16px;
+        }
+
+        .skeleton-title {
+            height: 20px;
+            margin-bottom: 8px;
+            background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
+            background-size: 200% 100%;
+            animation: shimmer 1.5s infinite;
+            border-radius: 4px;
+        }
+
+        @keyframes shimmer {
+            0% { background-position: -200% 0; }
+            100% { background-position: 200% 0; }
         }
     </style>
 </head>
 <body>
-    <div id="search-bar">
-        <input type="text" id="search-input" placeholder="Search videos...">
-    </div>
-    <div id="video-grid">
-        <!-- Videos will be rendered here -->
+    <div class="container">
+        <header>
+            <h1>HF Video Library</h1>
+            <div class="search-box">
+                <input type="text" class="search-input" placeholder="Search videos..." id="searchInput">
+            </div>
+        </header>
+
+        <div id="errorContainer"></div>
+        
+        <div id="loadingIndicator" class="loader">
+            <div class="spinner"></div>
+            <p>Loading videos...</p>
+        </div>
+
+        <div id="videoGrid" class="video-grid" style="display: none;"></div>
+        
+        <div id="pagination" class="pagination"></div>
     </div>
-    <div id="video-modal" style="display:none;">
-        <div id="player"></div>
-        <button id="close-modal">Close</button>
+
+    <div class="modal-overlay" id="videoModal">
+        <button class="modal-close" id="closeModal">✕</button>
+        <div class="modal-content">
+            <div class="video-container" id="videoContainer"></div>
+        </div>
     </div>
-    <script src="[invalid url, do not cite]
-    <link rel="stylesheet" href="[invalid url, do not cite] />
+
+    <!-- Plyr.js -->
+    <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
+
     <script>
-        // Custom JavaScript for the application
-        let videos = [];
-        let player;
-
-        // Fetch video data from database.json
-        fetch('database.json')
-          .then(response => response.json())
-          .then(data => {
-            videos = data.videos;
-            renderVideos(videos);
-          })
-          .catch(error => console.error('Error loading database.json', error));
-
-        // Render videos in the grid
-        function renderVideos(videosToRender) {
-            const grid = document.getElementById('video-grid');
-            grid.innerHTML = '';
-            videosToRender.forEach(video => {
-                const card = document.createElement('div');
-                card.className = 'video-card';
-                card.innerHTML = `<h3>${video.title}</h3><p>Click to play</p>`;
-                card.onclick = () => playVideo(video.url, video.title);
-                grid.appendChild(card);
-            });
+        // Configuration
+        const CONFIG = {
+            videosPerPage: 12,
+            dataSource: 'database.json',
+            playerOptions: {
+                controls: [
+                    'play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 
+                    'captions', 'settings', 'pip', 'airplay', 'fullscreen'
+                ],
+                settings: ['captions', 'quality', 'speed'],
+                keyboard: { focused: true, global: false },
+                resetOnEnd: true
+            }
+        };
+
+        // State management
+        const STATE = {
+            videos: [],
+            filteredVideos: [],
+            currentPage: 1,
+            player: null,
+            videoElement: null,
+            searchQuery: '',
+            loading: true,
+            error: null
+        };
+
+        // DOM Elements
+        const DOM = {
+            videoGrid: document.getElementById('videoGrid'),
+            loadingIndicator: document.getElementById('loadingIndicator'),
+            pagination: document.getElementById('pagination'),
+            videoModal: document.getElementById('videoModal'),
+            closeModal: document.getElementById('closeModal'),
+            videoContainer: document.getElementById('videoContainer'),
+            searchInput: document.getElementById('searchInput'),
+            errorContainer: document.getElementById('errorContainer')
+        };
+
+        // Helper Functions
+        function showError(message) {
+            STATE.error = message;
+            DOM.errorContainer.innerHTML = `
+                <div class="error-message">
+                    <strong>Error:</strong> ${message}
+                </div>
+            `;
+            DOM.loadingIndicator.style.display = 'none';
         }
 
-        // Handle search functionality
-        const searchInput = document.getElementById('search-input');
-        searchInput.addEventListener('input', () => {
-            const query = searchInput.value.toLowerCase();
-            const filteredVideos = videos.filter(video => video.title.toLowerCase().includes(query));
-            renderVideos(filteredVideos);
-        });
+        function clearError() {
+            STATE.error = null;
+            DOM.errorContainer.innerHTML = '';
+        }
 
-        // Play video in modal
-        function playVideo(url, title) {
-            if (player) {
-                player.destroy();
-            }
-            const modal = document.getElementById('video-modal');
-            modal.style.display = 'flex';
-            const playerElement = document.getElementById('player');
-            playerElement.innerHTML = `<video id="plyr-player" playsinline controls><source src="${url}" type="video/mp4"></video>`;
-            player = new Plyr('#plyr-player');
+        function createVideoElement() {
+            // Completely create a new video element each time
+            const videoElement = document.createElement('video');
+            videoElement.className = 'video-player';
+            videoElement.controls = true;
+            videoElement.preload = 'auto';
+            videoElement.crossOrigin = 'anonymous'; // For potential subtitles
+            
+            return videoElement;
         }
 
-        // Close modal functionality
-        document.getElementById('close-modal').addEventListener('click', closeModal);
-        document.getElementById('video-modal').addEventListener('click', (e) => {
-            if (e.target === document.getElementById('video-modal')) {
-                closeModal();
+        // Event Handlers
+        function handleVideoClick(index) {
+            const video = STATE.filteredVideos[index];
+            if (!video) return;
+
+            openModal();
+            playVideo(video);
+        }
+
+        function handleSearchInput(event) {
+            STATE.searchQuery = event.target.value.trim().toLowerCase();
+            filterVideos();
+            STATE.currentPage = 1; // Reset to first page when searching
+            renderVideos();
+            renderPagination();
+        }
+
+        function handlePageClick(page) {
+            if (page === STATE.currentPage) return;
+            STATE.currentPage = page;
+            renderVideos();
+            renderPagination();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+
+        function handleCloseModal() {
+            closeModal();
+            cleanupPlayer();
+        }
+
+        function handleKeyDown(event) {
+            if (event.key === 'Escape' && DOM.videoModal.classList.contains('active')) {
+                handleCloseModal();
             }
-        });
+        }
+
+        // Modal Functions
+        function openModal() {
+            DOM.videoModal.classList.add('active');
+            document.body.style.overflow = 'hidden'; // Prevent scrolling
+        }
 
         function closeModal() {
-            const modal = document.getElementById('video-modal');
-            modal.style.display = 'none';
-            if (player) {
-                player.destroy();
-                player = null;
+            DOM.videoModal.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+
+        // Video Player Functions
+        function playVideo(video) {
+            // Always clean up previous player first (important)
+            cleanupPlayer();
+            
+            // Clear the video container completely
+            DOM.videoContainer.innerHTML = '';
+            
+            // Create a fresh video element for each playback
+            STATE.videoElement = createVideoElement();
+            DOM.videoContainer.appendChild(STATE.videoElement);
+            
+            // Prepare the video URL
+            let videoUrl = video.url;
+            
+            // Add download parameter to Hugging Face URLs
+            if (videoUrl.includes('huggingface.co')) {
+                videoUrl = addQueryParam(videoUrl, 'download', 'true');
+            }
+            
+            // Set the source
+            STATE.videoElement.src = videoUrl;
+            
+            try {
+                // Initialize the player with the new element
+                STATE.player = new Plyr(STATE.videoElement, CONFIG.playerOptions);
+                
+                // Set up event listeners
+                STATE.player.on('error', (event) => {
+                    console.error('Plyr error:', event);
+                    
+                    // Check if there's a detailed error message
+                    let errorMsg = 'Unable to play this video.';
+                    if (STATE.videoElement.error) {
+                        switch (STATE.videoElement.error.code) {
+                            case 1: errorMsg += ' The video file was not found.'; break;
+                            case 2: errorMsg += ' Network error occurred.'; break;
+                            case 3: errorMsg += ' Video decoding failed. The format may not be supported by your browser.'; break;
+                            case 4: errorMsg += ' Video is not playable due to permissions or content protection.'; break;
+                        }
+                    }
+                    
+                    // Display error in the player
+                    const errorOverlay = document.createElement('div');
+                    errorOverlay.style.position = 'absolute';
+                    errorOverlay.style.top = '0';
+                    errorOverlay.style.left = '0';
+                    errorOverlay.style.width = '100%';
+                    errorOverlay.style.height = '100%';
+                    errorOverlay.style.backgroundColor = 'rgba(0,0,0,0.7)';
+                    errorOverlay.style.color = 'white';
+                    errorOverlay.style.display = 'flex';
+                    errorOverlay.style.alignItems = 'center';
+                    errorOverlay.style.justifyContent = 'center';
+                    errorOverlay.style.textAlign = 'center';
+                    errorOverlay.style.padding = '20px';
+                    errorOverlay.innerHTML = `<div>${errorMsg}</div>`;
+                    
+                    DOM.videoContainer.appendChild(errorOverlay);
+                });
+                
+                // Auto-play
+                STATE.player.play().catch(error => {
+                    console.warn('Auto-play was prevented:', error);
+                    // This is fine, as many browsers block autoplay
+                });
+                
+            } catch (error) {
+                console.error('Failed to initialize player:', error);
+                DOM.videoContainer.innerHTML = `<div style="padding: 20px; text-align: center;">
+                    Failed to initialize video player. Please try again.
+                </div>`;
+            }
+        }
+
+        function cleanupPlayer() {
+            if (STATE.player) {
+                // Force stop any playback
+                try {
+                    if (!STATE.player.paused) {
+                        STATE.player.pause();
+                    }
+                    
+                    // Destroy the player completely
+                    STATE.player.destroy();
+                } catch (e) {
+                    console.warn('Error during player cleanup:', e);
+                }
+                
+                STATE.player = null;
+            }
+            
+            // Ensure any lingering video element is properly cleaned up
+            if (STATE.videoElement) {
+                try {
+                    // Force stop
+                    STATE.videoElement.pause();
+                    
+                    // Clear all sources explicitly
+                    STATE.videoElement.removeAttribute('src');
+                    STATE.videoElement.load();
+                } catch (e) {
+                    console.warn('Error clearing video element:', e);
+                }
+                
+                STATE.videoElement = null;
+            }
+            
+            // Extra safety - remove all content
+            DOM.videoContainer.innerHTML = '';
+        }
+
+        // Data Functions
+        async function fetchVideoData() {
+            try {
+                clearError();
+                STATE.loading = true;
+                renderLoadingState();
+                
+                const response = await fetch(CONFIG.dataSource);
+                
+                if (!response.ok) {
+                    throw new Error(`Failed to load video data (Status: ${response.status})`);
+                }
+                
+                const data = await response.json();
+                
+                // Validate data structure
+                if (!data || !Array.isArray(data.videos)) {
+                    throw new Error('Invalid data format: Expected {"videos": [...]}');
+                }
+                
+                // Filter out invalid entries
+                STATE.videos = data.videos.filter(video => {
+                    const isValid = video && typeof video.title === 'string' && 
+                                   typeof video.url === 'string' && video.url.trim() !== '';
+                    
+                    if (!isValid) {
+                        console.warn('Skipping invalid video entry:', video);
+                    }
+                    
+                    return isValid;
+                });
+                
+                // Initial filtering
+                filterVideos();
+                
+                // Render the UI
+                STATE.loading = false;
+                renderUI();
+                
+            } catch (error) {
+                console.error('Error fetching video data:', error);
+                showError(error.message || 'Failed to load video data. Please try again later.');
+            }
+        }
+
+        function filterVideos() {
+            const query = STATE.searchQuery;
+            
+            if (!query) {
+                STATE.filteredVideos = [...STATE.videos];
+                return;
+            }
+            
+            STATE.filteredVideos = STATE.videos.filter(video => 
+                video.title.toLowerCase().includes(query)
+            );
+        }
+
+        // Rendering Functions
+        function renderUI() {
+            if (STATE.loading) {
+                renderLoadingState();
+                return;
             }
+            
+            DOM.loadingIndicator.style.display = 'none';
+            DOM.videoGrid.style.display = 'grid';
+            
+            renderVideos();
+            renderPagination();
         }
+
+        function renderLoadingState() {
+            DOM.loadingIndicator.style.display = 'flex';
+            DOM.videoGrid.style.display = 'none';
+            DOM.pagination.innerHTML = '';
+            
+            // Show skeleton loading for better UX
+            DOM.videoGrid.innerHTML = Array(CONFIG.videosPerPage)
+                .fill()
+                .map(() => `
+                    <div class="video-card-skeleton">
+                        <div class="skeleton-thumbnail"></div>
+                        <div class="skeleton-info">
+                            <div class="skeleton-title"></div>
+                            <div class="skeleton-title" style="width: 70%"></div>
+                        </div>
+                    </div>
+                `)
+                .join('');
+        }
+
+        function renderVideos() {
+            if (STATE.filteredVideos.length === 0) {
+                DOM.videoGrid.innerHTML = `
+                    <div class="no-results">
+                        <h3>No videos found</h3>
+                        <p>Try adjusting your search query</p>
+                    </div>
+                `;
+                DOM.pagination.innerHTML = '';
+                return;
+            }
+            
+            const startIndex = (STATE.currentPage - 1) * CONFIG.videosPerPage;
+            const endIndex = startIndex + CONFIG.videosPerPage;
+            const pageVideos = STATE.filteredVideos.slice(startIndex, endIndex);
+            
+            DOM.videoGrid.innerHTML = pageVideos.map((video, index) => `
+                <div class="video-card" onclick="handleVideoClick(${startIndex + index})">
+                    <div class="video-thumbnail">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                        </svg>
+                    </div>
+                    <div class="video-info">
+                        <h3 class="video-title">${escapeHTML(video.title)}</h3>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        function renderPagination() {
+            const totalPages = Math.ceil(STATE.filteredVideos.length / CONFIG.videosPerPage);
+            
+            if (totalPages <= 1) {
+                DOM.pagination.innerHTML = '';
+                return;
+            }
+            
+            // Determine which page numbers to show
+            let pageNumbers = [];
+            const maxVisiblePages = 5;
+            
+            if (totalPages <= maxVisiblePages) {
+                // Show all pages
+                pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
+            } else {
+                // Always include first and last page
+                pageNumbers.push(1);
+                
+                // Calculate middle pages
+                let startPage = Math.max(2, STATE.currentPage - 1);
+                let endPage = Math.min(totalPages - 1, STATE.currentPage + 1);
+                
+                // Adjust if we're near the start or end
+                if (STATE.currentPage <= 2) {
+                    endPage = 4;
+                } else if (STATE.currentPage >= totalPages - 1) {
+                    startPage = totalPages - 3;
+                }
+                
+                // Add ellipsis if needed
+                if (startPage > 2) {
+                    pageNumbers.push('...');
+                }
+                
+                // Add middle pages
+                for (let i = startPage; i <= endPage; i++) {
+                    pageNumbers.push(i);
+                }
+                
+                // Add ellipsis if needed
+                if (endPage < totalPages - 1) {
+                    pageNumbers.push('...');
+                }
+                
+                // Add last page if not already added
+                if (totalPages > 1) {
+                    pageNumbers.push(totalPages);
+                }
+            }
+            
+            // Generate pagination HTML
+            const paginationHTML = pageNumbers.map(page => {
+                if (page === '...') {
+                    return `<span class="page-btn">...</span>`;
+                }
+                return `
+                    <button class="page-btn ${page === STATE.currentPage ? 'active' : ''}" 
+                            onclick="handlePageClick(${page})">
+                        ${page}
+                    </button>
+                `;
+            }).join('');
+            
+            // Add jump-to-page for large collections
+            const jumpToPageInput = totalPages > maxVisiblePages ? `
+                <div class="pagination-jump">
+                    <span>Go to:</span>
+                    <input type="number" class="jump-input" id="jumpToPage" 
+                           min="1" max="${totalPages}" value="${STATE.currentPage}">
+                    <button class="page-btn" onclick="jumpToPage()">Go</button>
+                </div>
+            ` : '';
+            
+            DOM.pagination.innerHTML = paginationHTML + jumpToPageInput;
+            
+            // Add event listener to jump input
+            const jumpInput = document.getElementById('jumpToPage');
+            if (jumpInput) {
+                jumpInput.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter') {
+                        jumpToPage();
+                    }
+                });
+            }
+        }
+
+        // Utility Functions
+        function escapeHTML(str) {
+            const div = document.createElement('div');
+            div.textContent = str;
+            return div.innerHTML;
+        }
+
+        function addQueryParam(url, param, value) {
+            const separator = url.includes('?') ? '&' : '?';
+            return `${url}${separator}${param}=${encodeURIComponent(value)}`;
+        }
+
+        function jumpToPage() {
+            const input = document.getElementById('jumpToPage');
+            if (!input) return;
+            
+            let page = parseInt(input.value);
+            const totalPages = Math.ceil(STATE.filteredVideos.length / CONFIG.videosPerPage);
+            
+            // Validate input
+            if (isNaN(page) || page < 1) {
+                page = 1;
+            } else if (page > totalPages) {
+                page = totalPages;
+            }
+            
+            handlePageClick(page);
+        }
+
+        // Mobile double-tap handlers
+        function setupDoubleTapHandlers() {
+            let lastTap = 0;
+            let touchTimeout;
+            
+            document.addEventListener('touchend', (e) => {
+                // Only handle if modal is active and player exists
+                if (!DOM.videoModal.classList.contains('active') || !STATE.player) return;
+                
+                const currentTime = new Date().getTime();
+                const tapLength = currentTime - lastTap;
+                
+                clearTimeout(touchTimeout);
+                
+                if (tapLength < 500 && tapLength > 0) {
+                    // Double tap detected
+                    e.preventDefault();
+                    
+                    // Determine which side of the screen was tapped
+                    const screenWidth = window.innerWidth;
+                    const touchX = e.changedTouches[0].clientX;
+                    
+                    if (touchX < screenWidth / 4) {
+                        // Left side - seek backward 10 seconds
+                        STATE.player.currentTime -= 10;
+                    } else if (touchX > (screenWidth * 3) / 4) {
+                        // Right side - seek forward 10 seconds
+                        STATE.player.currentTime += 10;
+                    } else {
+                        // Middle - toggle play/pause
+                        if (STATE.player.paused) {
+                            STATE.player.play();
+                        } else {
+                            STATE.player.pause();
+                        }
+                    }
+                } else {
+                    // Single tap - wait to see if double tap follows
+                    touchTimeout = setTimeout(() => {
+                        // Single tap handling if needed
+                    }, 300);
+                    lastTap = currentTime;
+                }
+            });
+        }
+
+        // Initialization and Event Listeners
+        document.addEventListener('DOMContentLoaded', () => {
+            // Set up event listeners
+            DOM.searchInput.addEventListener('input', handleSearchInput);
+            DOM.closeModal.addEventListener('click', handleCloseModal);
+            DOM.videoModal.addEventListener('click', (event) => {
+                // Close modal if clicking outside the content
+                if (event.target === DOM.videoModal) {
+                    handleCloseModal();
+                }
+            });
+            document.addEventListener('keydown', handleKeyDown);
+            
+            // Set up mobile-specific handlers
+            setupDoubleTapHandlers();
+            
+            // Fetch data
+            fetchVideoData();
+        });
+
+        // Make handlers globally accessible for onclick attributes
+        window.handleVideoClick = handleVideoClick;
+        window.handlePageClick = handlePageClick;
+        window.jumpToPage = jumpToPage;
     </script>
 </body>
 </html>