Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 14, 2025

Commit

3f097bd

verified ·

1 Parent(s): bb5b26d

Update index.html

Browse files

Files changed (1) hide show

index.html +382 -606

index.html CHANGED Viewed

@@ -4,703 +4,479 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HF Video Library</title>
-    <!-- Plyr.js CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.css">
     <style>
-        /* Global Styles */
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
-        body {
-            background-color: #f5f5f5;
-            color: #333;
-            line-height: 1.6;
-            padding: 20px;
         }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        /* Header Styles */
-        header {
-            text-align: center;
-            margin-bottom: 30px;
-        }
-        h1 {
-            font-size: 2.5rem;
-            color: #333;
-            margin-bottom: 10px;
         }
-        /* Search Bar */
-        .search-container {
-            margin-bottom: 30px;
-            display: flex;
-            justify-content: center;
         }
-        #search-input {
-            width: 100%;
-            max-width: 500px;
-            padding: 12px 20px;
-            border: 1px solid #ddd;
-            border-radius: 25px;
-            font-size: 16px;
             transition: all 0.3s ease;
         }
-        #search-input:focus {
-            outline: none;
-            border-color: #2196F3;
-            box-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
-        }
-        /* Video Grid */
-        .video-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        .video-card {
-            background: white;
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            cursor: pointer;
-            transition: transform 0.2s ease;
-        }
-        .video-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
-        }
-        .video-thumbnail {
-            width: 100%;
-            height: 150px;
-            background-color: #333;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: white;
-        }
-        .video-info {
-            padding: 15px;
-        }
-        .video-title {
-            font-size: 16px;
-            font-weight: 600;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-        }
-        /* Pagination */
-        .pagination {
-            display: flex;
-            justify-content: center;
-            margin-top: 20px;
-            gap: 5px;
-        }
-        .page-btn {
-            padding: 8px 15px;
-            border: 1px solid #ddd;
-            background-color: white;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .page-btn:hover {
-            background-color: #f0f0f0;
-        }
-        .page-btn.active {
-            background-color: #2196F3;
-            color: white;
-            border-color: #2196F3;
-        }
-        /* Video Modal */
-        .modal-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.8);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 1000;
             opacity: 0;
             visibility: hidden;
-            transition: opacity 0.3s ease, visibility 0.3s ease;
         }
-        .modal-overlay.active {
             opacity: 1;
             visibility: visible;
         }
-        .modal-content {
-            width: 90%;
-            max-width: 900px;
-            background-color: #000;
-            border-radius: 8px;
-            overflow: hidden;
-            position: relative;
-        }
-        .video-player-container {
-            width: 100%;
-            position: relative;
         }
-        .close-modal {
-            position: absolute;
-            top: 15px;
-            right: 15px;
-            color: white;
-            background-color: rgba(0, 0, 0, 0.5);
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            z-index: 10;
-            font-size: 18px;
         }
-        /* Loading State */
-        .loading {
-            text-align: center;
-            padding: 50px;
-            font-size: 18px;
-            color: #666;
         }
-        /* Error Message */
-        .error-message {
-            text-align: center;
-            padding: 30px;
-            color: #d32f2f;
-            background-color: #ffebee;
-            border-radius: 4px;
-            margin: 20px 0;
-            border: 1px solid #ffcdd2;
         }
-        /* No Results */
-        .no-results {
-            text-align: center;
-            padding: 40px;
-            font-size: 18px;
-            color: #666;
         }
-        /* Responsive Adjustments */
-        @media (max-width: 768px) {
-            .video-grid {
-                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-                gap: 15px;
-            }
-            .video-thumbnail {
-                height: 100px;
-            }
-            .video-info {
-                padding: 10px;
-            }
-            .video-title {
-                font-size: 14px;
-            }
-            .modal-content {
-                width: 95%;
-            }
         }
     </style>
 </head>
-<body>
-    <div class="container">
-        <header>
-            <h1>HF Video Library</h1>
-            <div class="search-container">
-                <input type="text" id="search-input" placeholder="Search videos...">
             </div>
-        </header>
-        <div id="loading" class="loading">Loading videos...</div>
-        <div id="error-container"></div>
-        <div id="video-grid" class="video-grid"></div>
-        <div id="pagination" class="pagination"></div>
-    </div>
-    <div id="video-modal" class="modal-overlay">
-        <div class="modal-content">
-            <div class="close-modal" id="close-modal">✕</div>
-            <div class="video-player-container">
-                <video id="video-player" controls crossorigin playsinline></video>
             </div>
         </div>
     </div>
-    <!-- Plyr.js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script>
     <script>
         // Configuration
-        const CONFIG = {
-            videosPerPage: 12,
-            databasePath: './database.json'
-        };
-        // State management
-        let state = {
             videos: [],
             filteredVideos: [],
-            currentPage: 1,
-            searchQuery: '',
-            player: null,
-            currentVideoUrl: null,
-            timeoutIds: []
         };
-        // DOM elements
         const elements = {
-            videoGrid: document.getElementById('video-grid'),
             pagination: document.getElementById('pagination'),
-            searchInput: document.getElementById('search-input'),
-            videoModal: document.getElementById('video-modal'),
-            videoPlayer: document.getElementById('video-player'),
-            closeModal: document.getElementById('close-modal'),
-            loading: document.getElementById('loading'),
-            errorContainer: document.getElementById('error-container')
         };
-        // Fetch video data from database.json
         async function fetchVideoData() {
             try {
-                elements.loading.style.display = 'block';
-                elements.errorContainer.innerHTML = '';
-                const response = await fetch(CONFIG.databasePath);
                 if (!response.ok) {
-                    throw new Error(`Failed to load video database (${response.status})`);
                 }
                 const data = await response.json();
-                if (!data || !Array.isArray(data.videos)) {
-                    throw new Error('Invalid database format');
                 }
-                // Filter out invalid entries (missing required fields)
-                state.videos = data.videos.filter(video =>
-                    video && typeof video.title === 'string' &&
-                    typeof video.url === 'string' &&
-                    video.title.trim() !== '' &&
-                    video.url.trim() !== ''
-                );
-                state.filteredVideos = [...state.videos];
                 renderVideoGrid();
                 renderPagination();
             } catch (error) {
                 console.error('Error loading video data:', error);
-                elements.errorContainer.innerHTML = `
-                    <div class="error-message">
-                        Failed to load videos. Please try again later.
-                        <br><small>${error.message}</small>
-                    </div>
-                `;
-            } finally {
-                elements.loading.style.display = 'none';
             }
         }
-        // Render the video grid
         function renderVideoGrid() {
-            const startIndex = (state.currentPage - 1) * CONFIG.videosPerPage;
-            const endIndex = startIndex + CONFIG.videosPerPage;
-            const videosToDisplay = state.filteredVideos.slice(startIndex, endIndex);
-            elements.videoGrid.innerHTML = '';
             if (videosToDisplay.length === 0) {
-                elements.videoGrid.innerHTML = `
-                    <div class="no-results">
-                        ${state.searchQuery ? 'No videos match your search.' : 'No videos available.'}
                     </div>
                 `;
                 return;
             }
-            videosToDisplay.forEach((video, index) => {
                 const videoCard = document.createElement('div');
-                videoCard.className = 'video-card';
-                videoCard.dataset.url = video.url;
-                videoCard.dataset.title = video.title;
-                videoCard.dataset.index = startIndex + index;
                 videoCard.innerHTML = `
-                    <div class="video-thumbnail">
-                        <svg width="50" height="50" 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">${video.title}</h3>
                     </div>
                 `;
-                videoCard.addEventListener('click', () => playVideo(video));
-                elements.videoGrid.appendChild(videoCard);
             });
         }
         // Render pagination controls
         function renderPagination() {
-            const totalPages = Math.ceil(state.filteredVideos.length / CONFIG.videosPerPage);
-            elements.pagination.innerHTML = '';
-            if (totalPages <= 1) {
-                return;
-            }
-            // Previous button
-            if (state.currentPage > 1) {
-                const prevBtn = createPaginationButton('←', () => {
-                    state.currentPage--;
-                    renderVideoGrid();
-                    renderPagination();
-                    window.scrollTo(0, 0);
-                });
-                elements.pagination.appendChild(prevBtn);
             }
-            // Page numbers with ellipsis
-            const renderPageBtn = (page) => {
-                const btn = createPaginationButton(page, () => {
-                    state.currentPage = page;
-                    renderVideoGrid();
-                    renderPagination();
-                    window.scrollTo(0, 0);
-                }, page === state.currentPage);
-                elements.pagination.appendChild(btn);
-            };
-            // Logic for showing page numbers with ellipsis
-            if (totalPages <= 7) {
-                // Show all pages if there are 7 or fewer
-                for (let i = 1; i <= totalPages; i++) {
-                    renderPageBtn(i);
-                }
-            } else {
-                // Show first page
-                renderPageBtn(1);
-                // Show ellipsis or pages
-                if (state.currentPage > 3) {
-                    elements.pagination.appendChild(createEllipsis());
-                }
-                // Show current page and surrounding pages
-                let startPage = Math.max(2, state.currentPage - 1);
-                let endPage = Math.min(totalPages - 1, state.currentPage + 1);
-                // Adjust to show at least 3 pages (if possible)
-                if (startPage === 2) endPage = Math.min(totalPages - 1, 4);
-                if (endPage === totalPages - 1) startPage = Math.max(2, totalPages - 3);
-                for (let i = startPage; i <= endPage; i++) {
-                    renderPageBtn(i);
-                }
-                // Show ellipsis or pages
-                if (state.currentPage < totalPages - 2) {
-                    elements.pagination.appendChild(createEllipsis());
-                }
-                // Show last page
-                renderPageBtn(totalPages);
             }
-            // Next button
-            if (state.currentPage < totalPages) {
-                const nextBtn = createPaginationButton('→', () => {
-                    state.currentPage++;
-                    renderVideoGrid();
-                    renderPagination();
-                    window.scrollTo(0, 0);
-                });
-                elements.pagination.appendChild(nextBtn);
             }
-        }
-        // Create pagination button
-        function createPaginationButton(text, onClick, isActive = false) {
-            const button = document.createElement('button');
-            button.className = `page-btn ${isActive ? 'active' : ''}`;
-            button.textContent = text;
-            button.addEventListener('click', onClick);
-            return button;
-        }
-        // Create ellipsis element for pagination
-        function createEllipsis() {
-            const ellipsis = document.createElement('span');
-            ellipsis.className = 'page-btn';
-            ellipsis.textContent = '...';
-            ellipsis.style.cursor = 'default';
-            return ellipsis;
-        }
-        // Search functionality
-        function setupSearch() {
-            elements.searchInput.addEventListener('input', (e) => {
-                const query = e.target.value.trim().toLowerCase();
-                state.searchQuery = query;
-                if (query === '') {
-                    state.filteredVideos = [...state.videos];
-                } else {
-                    state.filteredVideos = state.videos.filter(video =>
-                        video.title.toLowerCase().includes(query)
-                    );
-                }
-                state.currentPage = 1;
-                renderVideoGrid();
-                renderPagination();
-            });
-        }
-        // Process URL for Hugging Face
-        function processVideoUrl(url) {
-            // Add download=true parameter to HF URLs if not already present
-            if (url.includes('huggingface.co') && !url.includes('download=true')) {
-                const separator = url.includes('?') ? '&' : '?';
-                return `${url}${separator}download=true`;
-            }
-            return url;
-        }
-        // Play video function
-        function playVideo(video) {
-            // Clean up any existing player properly before initializing a new one
-            cleanupPlayer();
-            // Set current video URL
-            state.currentVideoUrl = processVideoUrl(video.url);
-            // Setup video element
-            elements.videoPlayer.setAttribute('src', state.currentVideoUrl);
-            elements.videoPlayer.setAttribute('data-title', video.title);
-            // Show modal
-            elements.videoModal.classList.add('active');
-            document.body.style.overflow = 'hidden'; // Prevent scrolling
-            // Initialize Plyr after a small delay to ensure the DOM is updated
-            setTimeout(() => {
-                // Initialize player
-                state.player = new Plyr('#video-player', {
-                    controls: [
-                        'play-large', 'play', 'progress', 'current-time', 'mute',
-                        'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'
-                    ],
-                    resetOnEnd: true,
-                    keyboard: { focused: true, global: false },
-                    title: video.title
-                });
-                // Start playing
-                const playPromise = elements.videoPlayer.play();
-                if (playPromise !== undefined) {
-                    playPromise.catch(error => {
-                        console.log('Auto-play was prevented:', error);
-                        // Auto-play was prevented, show play button
-                    });
-                }
-                // Setup double-tap handling for mobile
-                setupDoubleTapControls();
-            }, 100);
-        }
-        // Cleanup player function
-        function cleanupPlayer() {
-            // Clear any remaining timeouts
-            state.timeoutIds.forEach(id => clearTimeout(id));
-            state.timeoutIds = [];
-            // Destroy Plyr instance if it exists
-            if (state.player) {
-                // Stop video playback before destroying
-                if (elements.videoPlayer && !elements.videoPlayer.paused) {
-                    elements.videoPlayer.pause();
-                }
-                // Reset source and current time
-                elements.videoPlayer.removeAttribute('src');
-                elements.videoPlayer.load();
-                // Destroy player
-                state.player.destroy();
-                state.player = null;
-            }
-            // Additional cleanup to ensure no audio continues
-            if (elements.videoPlayer) {
-                elements.videoPlayer.currentTime = 0;
-                elements.videoPlayer.src = "";
-                elements.videoPlayer.load();
-            }
-            // Clear URL reference
-            state.currentVideoUrl = null;
-        }
-        // Setup double-tap controls for mobile
-        function setupDoubleTapControls() {
-            if (!state.player || !elements.videoPlayer) return;
-            const videoContainer = elements.videoPlayer.closest('.video-player-container');
-            if (!videoContainer) return;
-            let lastTap = 0;
-            let tapTimeout;
-            // Create left and right tap areas (invisible overlays)
-            const createTapArea = (side) => {
-                const area = document.createElement('div');
-                area.style.position = 'absolute';
-                area.style.top = '0';
-                area.style.height = '100%';
-                area.style.width = '50%';
-                area.style[side] = '0';
-                area.style.zIndex = '5';
-                area.addEventListener('touchstart', (e) => {
-                    const currentTime = new Date().getTime();
-                    const tapLength = currentTime - lastTap;
-                    clearTimeout(tapTimeout);
-                    if (tapLength < 500 && tapLength > 0) {
-                        // Double tap detected
-                        e.preventDefault();
-                        if (side === 'left') {
-                            // Double tap left - seek backward 10 seconds
-                            state.player.currentTime -= 10;
-                        } else {
-                            // Double tap right - seek forward 10 seconds
-                            state.player.currentTime += 10;
-                        }
-                    } else {
-                        // Single tap - wait to see if it becomes a double tap
-                        tapTimeout = setTimeout(() => {
-                            // Single tap action - toggle play/pause
-                            if (state.player.paused) {
-                                state.player.play();
-                            } else {
-                                state.player.pause();
-                            }
-                        }, 500);
-                    }
-                    lastTap = currentTime;
-                }, false);
-                return area;
-            };
-            // Add areas to container
-            const leftArea = createTapArea('left');
-            const rightArea = createTapArea('right');
-            videoContainer.appendChild(leftArea);
-            videoContainer.appendChild(rightArea);
-            // Store references to remove them later
-            state.tapAreas = [leftArea, rightArea];
-        }
-        // Close modal and stop video
-        function closeModal() {
-            // First, clean up the player
-            cleanupPlayer();
-            // Remove tap areas if they exist
-            if (state.tapAreas) {
-                state.tapAreas.forEach(area => {
-                    if (area && area.parentNode) {
-                        area.parentNode.removeChild(area);
-                    }
-                });
-                state.tapAreas = [];
             }
-            // Hide modal
-            elements.videoModal.classList.remove('active');
-            document.body.style.overflow = ''; // Restore scrolling
-        }
-        // Setup modal close handlers
-        function setupModalHandlers() {
-            // Close button
-            elements.closeModal.addEventListener('click', closeModal);
-            // Click outside modal content
-            elements.videoModal.addEventListener('click', (e) => {
-                if (e.target === elements.videoModal) {
-                    closeModal();
-                }
-            });
-            // Escape key
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && elements.videoModal.classList.contains('active')) {
-                    closeModal();
-                }
-            });
-        }
-        // Initialize application
-        function init() {
-            fetchVideoData();
-            setupSearch();
-            setupModalHandlers();
         }
-        // Start the app when DOM is loaded
-        document.addEventListener('DOMContentLoaded', init);
-    </script>
-</body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HF Video Library</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        /* Custom CSS for animations and overrides */
+        .fade-in {
+            animation: fadeIn 0.3s ease-in-out;
         }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
         }
+        .video-card:hover .video-overlay {
+            opacity: 1;
         }
+        .video-overlay {
+            transition: opacity 0.2s ease;
         }
+        .player-modal {
             transition: all 0.3s ease;
         }
+        .player-modal.hidden {
             opacity: 0;
             visibility: hidden;
+            transform: translateY(20px);
         }
+        .player-modal.visible {
             opacity: 1;
             visibility: visible;
+            transform: translateY(0);
         }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
         }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
         }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
         }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
         }
+        /* Loading spinner */
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-left-color: #3b82f6;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
         }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
         }
     </style>
 </head>
+<body class="bg-gray-100 font-sans antialiased">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-blue-600 to-indigo-700 shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center mb-4 md:mb-0">
+                    <i class="fas fa-video text-white text-2xl mr-3"></i>
+                    <h1 class="text-2xl md:text-3xl font-bold text-white">HF Video Library</h1>
+                </div>
+                <div class="relative w-full md:w-64">
+                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <i class="fas fa-search text-gray-400"></i>
+                    </div>
+                    <input
+                        type="text"
+                        id="searchInput"
+                        placeholder="Search videos..."
+                        class="w-full pl-10 pr-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white bg-opacity-90 text-gray-800 placeholder-gray-500 transition duration-200"
+                    >
+                </div>
             </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Loading State -->
+        <div id="loadingState" class="flex flex-col items-center justify-center py-20">
+            <div class="spinner mb-4"></div>
+            <p class="text-gray-600 text-lg">Loading video library...</p>
+        </div>
+        <!-- Error State -->
+        <div id="errorState" class="hidden flex-col items-center justify-center py-20 text-center">
+            <i class="fas fa-exclamation-triangle text-red-500 text-5xl mb-4"></i>
+            <h2 class="text-2xl font-semibold text-gray-800 mb-2">Failed to load videos</h2>
+            <p class="text-gray-600 mb-6 max-w-md">We couldn't load the video library. Please check your internet connection and try again.</p>
+            <button id="retryButton" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition duration-200">
+                <i class="fas fa-sync-alt mr-2"></i> Retry
+            </button>
+        </div>
+        <!-- Video Grid -->
+        <div id="videoGrid" class="hidden">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-xl font-semibold text-gray-800">
+                    <span id="videoCount">0</span> videos available
+                </h2>
+                <div class="flex items-center space-x-2">
+                    <span class="text-sm text-gray-600">Items per page:</span>
+                    <select id="itemsPerPage" class="border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
+                        <option value="12">12</option>
+                        <option value="24">24</option>
+                        <option value="48">48</option>
+                    </select>
+                </div>
+            </div>
+            <div id="videoContainer" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"></div>
+            <!-- Pagination -->
+            <div id="pagination" class="mt-10 flex justify-center">
+                <nav class="flex items-center space-x-1">
+                    <button id="prevPage" class="px-3 py-1 rounded border bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
+                        <i class="fas fa-chevron-left"></i>
+                    </button>
+                    <div id="pageNumbers" class="flex space-x-1"></div>
+                    <button id="nextPage" class="px-3 py-1 rounded border bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
+                        <i class="fas fa-chevron-right"></i>
+                    </button>
+                </nav>
+            </div>
+        </div>
+    </main>
+    <!-- Video Player Modal -->
+    <div id="playerModal" class="player-modal hidden fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-75 flex items-center justify-center p-4">
+        <div class="relative w-full max-w-4xl bg-white rounded-xl shadow-2xl overflow-hidden">
+            <div class="absolute top-4 right-4 z-10">
+                <button id="closePlayer" class="bg-gray-800 bg-opacity-70 text-white rounded-full p-2 hover:bg-opacity-100 transition duration-200">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="aspect-w-16 aspect-h-9 bg-black">
+                <div id="playerContainer" class="w-full">
+                    <video id="player" playsinline controls></video>
+                </div>
+            </div>
+            <div class="p-4 bg-gray-50">
+                <h2 id="videoTitle" class="text-xl font-semibold text-gray-800 mb-2"></h2>
+                <div class="flex justify-between items-center text-sm text-gray-600">
+                    <div id="videoInfo"></div>
+                    <div id="videoActions" class="flex space-x-3">
+                        <button id="fullscreenBtn" class="hover:text-blue-600 transition duration-200">
+                            <i class="fas fa-expand mr-1"></i> Fullscreen
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-6">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <p>&copy; 2023 HF Video Library. All rights reserved.</p>
+                </div>
+                <div class="flex space-x-4">
+                    <a href="#" class="hover:text-blue-300 transition duration-200">
+                        <i class="fab fa-github"></i>
+                    </a>
+                    <a href="#" class="hover:text-blue-300 transition duration-200">
+                        <i class="fab fa-twitter"></i>
+                    </a>
+                    <a href="#" class="hover:text-blue-300 transition duration-200">
+                        <i class="fas fa-envelope"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
     <script>
         // Configuration
+        const config = {
+            databaseUrl: 'database.json',
+            itemsPerPage: 12,
+            currentPage: 1,
+            totalPages: 1,
             videos: [],
             filteredVideos: [],
+            player: null
         };
+        // DOM Elements
         const elements = {
+            loadingState: document.getElementById('loadingState'),
+            errorState: document.getElementById('errorState'),
+            videoGrid: document.getElementById('videoGrid'),
+            videoContainer: document.getElementById('videoContainer'),
+            videoCount: document.getElementById('videoCount'),
             pagination: document.getElementById('pagination'),
+            prevPage: document.getElementById('prevPage'),
+            nextPage: document.getElementById('nextPage'),
+            pageNumbers: document.getElementById('pageNumbers'),
+            itemsPerPage: document.getElementById('itemsPerPage'),
+            searchInput: document.getElementById('searchInput'),
+            playerModal: document.getElementById('playerModal'),
+            closePlayer: document.getElementById('closePlayer'),
+            playerContainer: document.getElementById('playerContainer'),
+            videoTitle: document.getElementById('videoTitle'),
+            videoInfo: document.getElementById('videoInfo'),
+            retryButton: document.getElementById('retryButton'),
+            fullscreenBtn: document.getElementById('fullscreenBtn')
         };
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', () => {
+            fetchVideoData();
+            // Event listeners
+            elements.searchInput.addEventListener('input', handleSearch);
+            elements.itemsPerPage.addEventListener('change', handleItemsPerPageChange);
+            elements.prevPage.addEventListener('click', goToPrevPage);
+            elements.nextPage.addEventListener('click', goToNextPage);
+            elements.closePlayer.addEventListener('click', closeVideoPlayer);
+            elements.retryButton.addEventListener('click', fetchVideoData);
+            elements.fullscreenBtn.addEventListener('click', toggleFullscreen);
+            // Keyboard shortcuts for player (when modal is open)
+            document.addEventListener('keydown', (e) => {
+                if (elements.playerModal.classList.contains('visible') && config.player) {
+                    // Space for play/pause
+                    if (e.code === 'Space') {
+                        e.preventDefault();
+                        if (config.player.paused) {
+                            config.player.play();
+                        } else {
+                            config.player.pause();
+                        }
+                    }
+                    // F for fullscreen
+                    if (e.code === 'KeyF') {
+                        e.preventDefault();
+                        toggleFullscreen();
+                    }
+                    // M for mute
+                    if (e.code === 'KeyM') {
+                        e.preventDefault();
+                        config.player.muted = !config.player.muted;
+                    }
+                    // Arrow keys for seeking
+                    if (e.code === 'ArrowLeft') {
+                        e.preventDefault();
+                        config.player.currentTime -= 5;
+                    }
+                    if (e.code === 'ArrowRight') {
+                        e.preventDefault();
+                        config.player.currentTime += 5;
+                    }
+                }
+            });
+        });
+        // Fetch video data from JSON
         async function fetchVideoData() {
             try {
+                showLoading();
+                const response = await fetch(config.databaseUrl);
                 if (!response.ok) {
+                    throw new Error('Failed to fetch video data');
                 }
                 const data = await response.json();
+                if (!data.videos || !Array.isArray(data.videos)) {
+                    throw new Error('Invalid video data format');
                 }
+                // Filter out invalid video entries
+                config.videos = data.videos.filter(video => {
+                    return video.title && video.url;
+                });
+                config.filteredVideos = [...config.videos];
+                // Calculate total pages
+                config.totalPages = Math.ceil(config.filteredVideos.length / config.itemsPerPage);
+                // Render UI
+                updateVideoCount();
                 renderVideoGrid();
                 renderPagination();
+                hideLoading();
+                showVideoGrid();
             } catch (error) {
                 console.error('Error loading video data:', error);
+                hideLoading();
+                showError();
             }
         }
+        // Show loading state
+        function showLoading() {
+            elements.loadingState.classList.remove('hidden');
+            elements.errorState.classList.add('hidden');
+            elements.videoGrid.classList.add('hidden');
+        }
+        // Hide loading state
+        function hideLoading() {
+            elements.loadingState.classList.add('hidden');
+        }
+        // Show error state
+        function showError() {
+            elements.errorState.classList.remove('hidden');
+        }
+        // Show video grid
+        function showVideoGrid() {
+            elements.videoGrid.classList.remove('hidden');
+        }
+        // Handle search input
+        function handleSearch() {
+            const searchTerm = elements.searchInput.value.toLowerCase();
+            if (searchTerm === '') {
+                config.filteredVideos = [...config.videos];
+            } else {
+                config.filteredVideos = config.videos.filter(video =>
+                    video.title.toLowerCase().includes(searchTerm)
+                );
+            }
+            // Reset to first page
+            config.currentPage = 1;
+            config.totalPages = Math.ceil(config.filteredVideos.length / config.itemsPerPage);
+            updateVideoCount();
+            renderVideoGrid();
+            renderPagination();
+        }
+        // Handle items per page change
+        function handleItemsPerPageChange() {
+            config.itemsPerPage = parseInt(elements.itemsPerPage.value);
+            config.currentPage = 1;
+            config.totalPages = Math.ceil(config.filteredVideos.length / config.itemsPerPage);
+            renderVideoGrid();
+            renderPagination();
+        }
+        // Update video count display
+        function updateVideoCount() {
+            elements.videoCount.textContent = config.filteredVideos.length;
+        }
+        // Render video grid
         function renderVideoGrid() {
+            elements.videoContainer.innerHTML = '';
+            const startIndex = (config.currentPage - 1) * config.itemsPerPage;
+            const endIndex = startIndex + config.itemsPerPage;
+            const videosToDisplay = config.filteredVideos.slice(startIndex, endIndex);
             if (videosToDisplay.length === 0) {
+                elements.videoContainer.innerHTML = `
+                    <div class="col-span-full text-center py-10">
+                        <i class="fas fa-video-slash text-4xl text-gray-400 mb-4"></i>
+                        <h3 class="text-xl font-medium text-gray-600">No videos found</h3>
+                        <p class="text-gray-500 mt-2">Try adjusting your search or filters</p>
                     </div>
                 `;
                 return;
             }
+            videosToDisplay.forEach(video => {
                 const videoCard = document.createElement('div');
+                videoCard.className = 'bg-white rounded-xl shadow-md overflow-hidden transition-transform duration-200 hover:shadow-lg hover:-translate-y-1';
                 videoCard.innerHTML = `
+                    <div class="relative cursor-pointer" onclick="playVideo('${video.url}', '${escapeHtml(video.title)}')">
+                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 relative">
+                            <div class="absolute inset-0 flex items-center justify-center">
+                                <i class="fas fa-play text-white text-4xl opacity-70"></i>
+                            </div>
+                            <img src="${video.thumbnail || 'https://via.placeholder.com/320x180?text=No+Thumbnail'}"
+                                 alt="${escapeHtml(video.title)}"
+                                 class="w-full h-full object-cover">
+                        </div>
+                        <div class="p-4">
+                            <h3 class="font-medium text-gray-800 truncate">${escapeHtml(video.title)}</h3>
+                        </div>
+                        <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition duration-200"></div>
                     </div>
                 `;
+                elements.videoContainer.appendChild(videoCard);
             });
         }
         // Render pagination controls
         function renderPagination() {
+            elements.pageNumbers.innerHTML = '';
+            // Disable prev/next buttons if on first/last page
+            elements.prevPage.disabled = config.currentPage === 1;
+            elements.nextPage.disabled = config.currentPage === config.totalPages;
+            // Always show first page
+            addPageButton(1);
+            // Show ellipsis if needed before current page
+            if (config.currentPage > 3) {
+                addEllipsis();
             }
+            // Show pages around current page
+            const startPage = Math.max(2, config.currentPage - 1);
+            const endPage = Math.min(config.totalPages - 1, config.currentPage + 1);
+            for (let i = startPage; i <= endPage; i++) {
+                addPageButton(i);
             }
+            // Show ellipsis if needed after current page
+            if (config.currentPage < config.totalPages - 2) {
+                addEllipsis();
             }
+            // Always show last page if different from first
+            if (config.totalPages > 1) {
+                addPageButton(config.totalPages);
             }
         }
+        // Helper to add a page button
+        function addPageButton(pageNumber) {
+            const button = document.createElement('button');
+            button.className = `px-3 py-1 rounded border ${config.currentPage === pageNumber ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 hover:bg-gray-50'}`;
+            button.textContent = pageNumber;
+            button.addEventListener('click', () => goToPage(pageNumber));
+            elements.pageNumbers.appendChild(button);
+        }
+        // Helper to add ellipsis
+        function addEll
 </html>