Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HF Video Library</title> | |
| <!-- Font Awesome --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <!-- Material Icons font file reference is less common, usually class-based --> | |
| <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/4.0.0/font/MaterialIcons-Regular.ttf" rel="stylesheet"> --> | |
| <!-- Using Material Icons via Google Fonts is more standard --> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <!-- Material Components Web --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.css" rel="stylesheet"> | |
| <!-- Plyr.js for enhanced video player --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.css"> | |
| <!-- Custom styles --> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- App Header --> | |
| <header class="app-header"> | |
| <div class="header-content"> | |
| <div class="logo-container"> | |
| <i class="fas fa-film logo-icon"></i> | |
| <h1 class="app-title">HF Video Library</h1> | |
| </div> | |
| <div class="search-wrapper"> | |
| <div class="search-container"> | |
| <i class="fas fa-search search-icon"></i> | |
| <input type="text" id="searchInput" placeholder="Search videos..." class="search-input"> | |
| <button id="clearSearch" class="clear-search-btn"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="app-main"> | |
| <!-- Video Grid Section --> | |
| <div class="video-grid-container"> | |
| <div class="controls-bar"> | |
| <div class="result-counter" id="resultCounter"> | |
| Showing <span id="visibleCount">0</span> of <span id="totalCount">0</span> videos | |
| </div> | |
| <div class="view-toggle"> | |
| <button id="gridViewBtn" class="view-btn active" title="Grid View"> | |
| <i class="fas fa-th"></i> | |
| </button> | |
| <button id="listViewBtn" class="view-btn" title="List View"> | |
| <i class="fas fa-list"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Loading Indicator --> | |
| <div id="loadingIndicator" class="loading-container"> | |
| <div class="loading-spinner"></div> | |
| <p>Loading videos...</p> | |
| </div> | |
| <!-- Error Message --> | |
| <div id="errorMessage" class="error-container" style="display: none;"> | |
| <i class="fas fa-exclamation-circle"></i> | |
| <p>Failed to load videos. Please try again later.</p> | |
| <button id="retryBtn" class="retry-btn">Retry</button> | |
| </div> | |
| <!-- Video Grid --> | |
| <div id="videoGrid" class="video-grid"></div> | |
| <!-- Pagination --> | |
| <div class="pagination-container"> | |
| <div id="pagination" class="pagination"></div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Video Player Modal --> | |
| <div id="videoModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2 id="modalVideoTitle">Video Title</h2> | |
| <button id="closeModal" class="close-button"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="player-container"> | |
| <video id="videoPlayer" playsinline controls> | |
| <p>Your browser doesn't support HTML5 video.</p> | |
| </video> | |
| <!-- *** NEW: Buffering Indicator *** --> | |
| <div id="playerLoadingIndicator" class="player-loading-indicator" style="display: none;"> | |
| <div class="loading-spinner"></div> | |
| <span id="playerLoadPercent">Loading 0%</span> | |
| </div> | |
| <!-- *** End of Buffering Indicator *** --> | |
| </div> | |
| <div class="player-help"> | |
| <div class="help-item"> | |
| <i class="fas fa-keyboard"></i> | |
| <span>Space: Play/Pause</span> | |
| </div> | |
| <div class="help-item"> | |
| <i class="fas fa-arrows-alt-h"></i> | |
| <span>←/→: Seek</span> | |
| </div> | |
| <div class="help-item"> | |
| <i class="fas fa-expand"></i> | |
| <span>F: Fullscreen</span> | |
| </div> | |
| <div class="help-item"> | |
| <i class="fas fa-volume-mute"></i> | |
| <span>M: Mute</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Messages --> | |
| <div id="toastContainer" class="toast-container"></div> | |
| <!-- Footer --> | |
| <footer class="app-footer"> | |
| <p>HF Video Library © 2025</p> | |
| </footer> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |