Hugging Face's logo

Spaces:
jerrrycans
/
file2
Sleeping

App Files Community
jerrrycans commited on
Commit
40f5327
·
verified ·
1 Parent(s): 1944a80

Update bot/server/templates/player.html

Browse files
Files changed (1) hide show
  1. bot/server/templates/player.html +245 -152
bot/server/templates/player.html CHANGED
@@ -1,154 +1,247 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
- <head>
4
- <title>Play Files</title>
5
-
6
- <meta charset="UTF-8">
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
- <meta http-equiv="X-Frame-Options" content="deny">
9
-
10
- <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
11
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
12
-
13
- <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
14
-
15
- <style>
16
- html, body {
17
- margin: 0;
18
- height: 100%;
19
- }
20
-
21
- #stream-media {
22
- height: 100%;
23
- width: 100%;
24
- }
25
-
26
- #error-message {
27
- color: red;
28
- font-size: 24px;
29
- text-align: center;
30
- margin-top: 20px;
31
- }
32
-
33
- .plyr__video-wrapper .plyr-download-button{
34
- position: absolute;
35
- top: 10px;
36
- left: 10px;
37
- width: 30px;
38
- height: 30px;
39
- background-color: rgba(0, 0, 0, 0.7);
40
- border-radius: 50%;
41
- text-align: center;
42
- line-height: 30px;
43
- color: white;
44
- z-index: 10;
45
- }
46
-
47
- .plyr__volume {
48
- max-width: initial;
49
- min-width: initial;
50
- width: auto;
51
- position: relative;
52
- }
53
-
54
-
55
- .plyr__video-wrapper .plyr-share-button{
56
- position: absolute;
57
- top: 50px;
58
- left: 10px;
59
- width: 30px;
60
- height: 30px;
61
- background-color: rgba(0, 0, 0, 0.7);
62
- border-radius: 50%;
63
- text-align: center;
64
- line-height: 30px;
65
- color: white;
66
- z-index: 10;
67
- }
68
-
69
- .plyr__video-wrapper .plyr-download-button:hover,
70
- .plyr__video-wrapper .plyr-share-button:hover{
71
- background-color: rgba(255, 255, 255, 0.7);
72
- color: black;
73
- }
74
-
75
- .plyr__video-wrapper .plyr-download-button:before {
76
- font-family: "Font Awesome 5 Free";
77
- content: "\f019";
78
- font-weight: bold;
79
- }
80
-
81
- .plyr__video-wrapper .plyr-share-button:before {
82
- font-family: "Font Awesome 5 Free";
83
- content: "\f064";
84
- font-weight: bold;
85
- }
86
-
87
- .plyr, .plyr__video-wrapper, .plyr__video-embed iframe {
88
- height: 100%;
89
- }
90
-
91
- </style>
92
- </head>
93
-
94
- <body>
95
- <video id="stream-media" controls preload="auto">
96
- <source src="" type="">
97
- <p class="vjs-no-js">
98
- To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
99
- </p>
100
- </video>
101
-
102
- <div id="error-message"></div>
103
-
104
- <script>
105
- var player = new Plyr('#stream-media', {
106
- controls:['play-large', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'mute', 'settings', 'pip', 'fullscreen'],
107
- settings:['speed','loop'],
108
- speed:{selected:1,options:[0.25,0.5,0.75,1,1.25,1.5,1.75,2]},
109
- seek: 10,
110
- keyboard: { focused: true, global: true },
111
- });
112
-
113
- var mediaLink = "{{ mediaLink }}";
114
-
115
- if (mediaLink) {
116
- document.querySelector('#stream-media source').setAttribute('src', mediaLink);
117
- player.restart();
118
-
119
- var downloadButton = document.createElement('div');
120
- downloadButton.className = 'plyr-download-button';
121
-
122
- downloadButton.onclick = function() {
123
- event.stopPropagation();
124
- var link = document.createElement('a');
125
- link.href = mediaLink;
126
- document.body.appendChild(link);
127
- link.click();
128
- document.body.removeChild(link);
129
- };
130
-
131
- player.elements.container.querySelector('.plyr__video-wrapper').appendChild(downloadButton);
132
-
133
- var shareButton = document.createElement('div');
134
- shareButton.className = 'plyr-share-button';
135
-
136
- shareButton.onclick = function() {
137
- event.stopPropagation();
138
- if (navigator.share) {
139
- navigator.share({
140
- title: "Play",
141
- url: mediaLink
142
- });
143
- }
144
- };
145
-
146
- player.elements.container.querySelector('.plyr__video-wrapper').appendChild(shareButton);
147
-
148
- } else {
149
- document.getElementById('error-message').textContent = 'Error: Media URL not provided';
150
- }
151
- </script>
152
-
153
- </body>
154
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+ <head>
4
+ <title>Play Files</title>
5
+
6
+ <meta charset="UTF-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <meta http-equiv="X-Frame-Options" content="deny">
9
+
10
+ <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
12
+
13
+ <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
14
+
15
+ <style>
16
+ :root {
17
+ --primary-color: #3498db;
18
+ --secondary-color: #2ecc71;
19
+ }
20
+
21
+ html, body {
22
+ margin: 0;
23
+ height: 100%;
24
+ font-family: 'Arial', sans-serif;
25
+ background-color: #000;
26
+ }
27
+
28
+ #stream-media {
29
+ height: 100%;
30
+ width: 100%;
31
+ }
32
+
33
+ #error-message {
34
+ color: red;
35
+ font-size: 24px;
36
+ text-align: center;
37
+ margin-top: 20px;
38
+ background-color: rgba(0, 0, 0, 0.7);
39
+ padding: 10px;
40
+ border-radius: 5px;
41
+ position: absolute;
42
+ top: 50%;
43
+ left: 50%;
44
+ transform: translate(-50%, -50%);
45
+ display: none;
46
+ }
47
+
48
+ .plyr__video-wrapper .plyr-download-button {
49
+ position: absolute;
50
+ top: 10px;
51
+ left: 10px;
52
+ width: 36px;
53
+ height: 36px;
54
+ background-color: rgba(0, 0, 0, 0.7);
55
+ border-radius: 50%;
56
+ text-align: center;
57
+ line-height: 36px;
58
+ color: white;
59
+ z-index: 10;
60
+ cursor: pointer;
61
+ transition: all 0.3s ease;
62
+ border: 1px solid rgba(255, 255, 255, 0.2);
63
+ }
64
+
65
+ .plyr__video-wrapper .plyr-share-button {
66
+ position: absolute;
67
+ top: 56px;
68
+ left: 10px;
69
+ width: 36px;
70
+ height: 36px;
71
+ background-color: rgba(0, 0, 0, 0.7);
72
+ border-radius: 50%;
73
+ text-align: center;
74
+ line-height: 36px;
75
+ color: white;
76
+ z-index: 10;
77
+ cursor: pointer;
78
+ transition: all 0.3s ease;
79
+ border: 1px solid rgba(255, 255, 255, 0.2);
80
+ }
81
+
82
+ .plyr__video-wrapper .plyr-download-button:hover,
83
+ .plyr__video-wrapper .plyr-share-button:hover {
84
+ background-color: var(--primary-color);
85
+ transform: scale(1.05);
86
+ border-color: white;
87
+ }
88
+
89
+ .plyr__video-wrapper .plyr-download-button:before {
90
+ font-family: "Font Awesome 5 Free";
91
+ content: "\f019";
92
+ font-weight: bold;
93
+ }
94
+
95
+ .plyr__video-wrapper .plyr-share-button:before {
96
+ font-family: "Font Awesome 5 Free";
97
+ content: "\f064";
98
+ font-weight: bold;
99
+ }
100
+
101
+ .plyr, .plyr__video-wrapper, .plyr__video-embed iframe {
102
+ height: 100%;
103
+ }
104
+
105
+ .plyr--full-ui input[type=range] {
106
+ color: var(--primary-color);
107
+ }
108
+
109
+ .plyr__control--overlaid {
110
+ background: var(--primary-color);
111
+ }
112
+
113
+ .plyr--video .plyr__control:hover {
114
+ background: var(--primary-color);
115
+ }
116
+
117
+ .plyr--video .plyr__control.plyr__tab-focus {
118
+ background: var(--primary-color);
119
+ }
120
+
121
+ .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
122
+ background: var(--primary-color);
123
+ }
124
+
125
+ .plyr__control.plyr__control--pressed {
126
+ background: var(--secondary-color);
127
+ }
128
+
129
+ .loading-overlay {
130
+ position: absolute;
131
+ top: 0;
132
+ left: 0;
133
+ width: 100%;
134
+ height: 100%;
135
+ background-color: rgba(0, 0, 0, 0.7);
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ z-index: 100;
140
+ opacity: 1;
141
+ transition: opacity 0.5s ease;
142
+ }
143
+
144
+ .loading-spinner {
145
+ width: 50px;
146
+ height: 50px;
147
+ border: 5px solid rgba(255, 255, 255, 0.3);
148
+ border-radius: 50%;
149
+ border-top-color: var(--primary-color);
150
+ animation: spin 1s ease-in-out infinite;
151
+ }
152
+
153
+ @keyframes spin {
154
+ to { transform: rotate(360deg); }
155
+ }
156
+
157
+ .hidden {
158
+ opacity: 0;
159
+ pointer-events: none;
160
+ }
161
+ </style>
162
+ </head>
163
+
164
+ <body>
165
+ <div class="loading-overlay" id="loading-overlay">
166
+ <div class="loading-spinner"></div>
167
+ </div>
168
+
169
+ <video id="stream-media" controls preload="auto">
170
+ <source src="" type="">
171
+ <p class="vjs-no-js">
172
+ To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
173
+ </p>
174
+ </video>
175
+
176
+ <div id="error-message"></div>
177
+
178
+ <script>
179
+ // Initialize the player with exact same controls as the original
180
+ var player = new Plyr('#stream-media', {
181
+ controls: ['play-large', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'mute', 'settings', 'pip', 'fullscreen'],
182
+ settings: ['speed', 'loop'],
183
+ speed: {selected: 1, options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]},
184
+ seek: 10,
185
+ keyboard: { focused: true, global: true },
186
+ });
187
+
188
+ // Hide loading overlay when player is ready
189
+ player.on('ready', function() {
190
+ document.getElementById('loading-overlay').classList.add('hidden');
191
+ });
192
+
193
+ // This would be replaced with the actual media URL in your template system
194
+ var mediaLink = "{{ mediaLink }}";
195
+
196
+ if (mediaLink) {
197
+ document.querySelector('#stream-media source').setAttribute('src', mediaLink);
198
+ player.restart();
199
+
200
+ // Add download button - keeping the exact same functionality
201
+ var downloadButton = document.createElement('div');
202
+ downloadButton.className = 'plyr-download-button';
203
+
204
+ downloadButton.onclick = function(event) {
205
+ event.stopPropagation();
206
+ var link = document.createElement('a');
207
+ link.href = mediaLink;
208
+ document.body.appendChild(link);
209
+ link.click();
210
+ document.body.removeChild(link);
211
+ };
212
+
213
+ player.elements.container.querySelector('.plyr__video-wrapper').appendChild(downloadButton);
214
+
215
+ // Add share button - keeping the exact same functionality
216
+ var shareButton = document.createElement('div');
217
+ shareButton.className = 'plyr-share-button';
218
+
219
+ shareButton.onclick = function(event) {
220
+ event.stopPropagation();
221
+ if (navigator.share) {
222
+ navigator.share({
223
+ title: "Play",
224
+ url: mediaLink
225
+ });
226
+ }
227
+ };
228
+
229
+ player.elements.container.querySelector('.plyr__video-wrapper').appendChild(shareButton);
230
+
231
+ } else {
232
+ document.getElementById('loading-overlay').classList.add('hidden');
233
+ var errorElement = document.getElementById('error-message');
234
+ errorElement.textContent = 'Error: Media URL not provided';
235
+ errorElement.style.display = 'block';
236
+ }
237
+
238
+ // Handle player errors
239
+ player.on('error', function(event) {
240
+ document.getElementById('loading-overlay').classList.add('hidden');
241
+ var errorElement = document.getElementById('error-message');
242
+ errorElement.textContent = 'Error: Failed to load media';
243
+ errorElement.style.display = 'block';
244
+ });
245
+ </script>
246
+ </body>
247
+ </html>