Hugging Face's logo

Spaces:
Subham9126
/
dfd
Running

App Files Community
dfd
File size: 6,260 Bytes
6d5721b
 
 
 
 
9274027
d10c35a
9274027
d10c35a
 
 
 
9274027
 
 
 
 
 
6d5721b
2f160a3
9274027
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f848982
 
 
9274027
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f848982
22fa71e
 
9274027
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f848982
9274027
 
 
 
 
d10c35a
 
 
 
 
 
9274027
 
 
 
 
 
 
 
 
 
 
22fa71e
9274027
 
 
 
 
 
22fa71e
f848982
9274027
 
 
 
 
f848982
9274027
 
d10c35a
22fa71e
 
f848982
9274027
 
 
 
2f160a3
22fa71e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<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>