Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 14, 2025

Commit

2f160a3

verified ·

1 Parent(s): 3f097bd

Update index.html

Browse files

Files changed (1) hide show

index.html +111 -460

index.html CHANGED Viewed

@@ -4,479 +4,130 @@
     <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>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HF Video Library</title>
     <style>
+        /* Custom CSS for the application */
+        #search-bar {
+            margin: 20px;
+            text-align: center;
+        }
+        #search-input {
+            padding: 10px;
+            width: 300px;
+        }
+        #video-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+            padding: 20px;
+        }
+        .video-card {
+            border: 1px solid #ccc;
+            padding: 10px;
+            text-align: center;
+            cursor: pointer;
+        }
+        #video-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        #player {
+            width: 80%;
+            height: 80%;
+        }
+        #close-modal {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: white;
+            border: none;
+            padding: 10px;
+            cursor: pointer;
         }
     </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>
+    <div id="video-modal" style="display:none;">
+        <div id="player"></div>
+        <button id="close-modal">Close</button>
+    </div>
+    <script src="[invalid url, do not cite]
+    <link rel="stylesheet" href="[invalid url, do not cite] />
     <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);
             });
         }
+        // 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);
+        });
+        // 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');
+        }
+        // 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();
             }
+        });
+        function closeModal() {
+            const modal = document.getElementById('video-modal');
+            modal.style.display = 'none';
+            if (player) {
+                player.destroy();
+                player = null;
             }
         }
+    </script>
+</body>
 </html>