Spaces:

jerrrycans
/

file2

Sleeping

App Files Files Community

jerrrycans commited on Apr 6, 2025

Commit

0be674e

verified ·

1 Parent(s): 9bced27

Update bot/server/templates/player.html

Browse files

Files changed (1) hide show

bot/server/templates/player.html +39 -50

bot/server/templates/player.html CHANGED Viewed

@@ -92,7 +92,7 @@ height: 100%;
 <body>
 <video id="stream-media" controls preload="auto">
-<source src="https://example.com/video.mp4" type="video/mp4">
 <p class="vjs-no-js">
 To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
 </p>
@@ -101,7 +101,7 @@ To view this video please enable JavaScript, and consider upgrading to a web bro
 <div id="error-message"></div>
 <script>
-var player = new Plyr('#stream-media', {
 controls:['play-large', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'mute', 'settings', 'pip', 'fullscreen'],
 settings:['speed','loop'],
 speed:{selected:1,options:[0.25,0.5,0.75,1,1.25,1.5,1.75,2]},
@@ -109,76 +109,65 @@ seek: 10,
 keyboard: { focused: true, global: true },
 });
-var mediaLink = "https://example.com/video.mp4";
 if (mediaLink) {
-document.querySelector('#stream-media source').setAttribute('src', mediaLink);
-player.restart();
-var downloadButton = document.createElement('div');
 downloadButton.className = 'plyr-download-button';
-downloadButton.onclick = function() {
-event.stopPropagation();
-var link = document.createElement('a');
 link.href = mediaLink;
-document.body.appendChild(link);
 link.click();
-document.body.removeChild(link);
 };
 player.elements.container.querySelector('.plyr__video-wrapper').appendChild(downloadButton);
-var shareButton = document.createElement('div');
 shareButton.className = 'plyr-share-button';
-shareButton.onclick = function() {
-event.stopPropagation();
-if (navigator.share) {
-navigator.share({
-title: "Play",
-url: mediaLink
-});
-}
 };
 player.elements.container.querySelector('.plyr__video-wrapper').appendChild(shareButton);
-var uploadButton = document.createElement('div');
 uploadButton.className = 'plyr-upload-button';
-uploadButton.onclick = async function() {
-event.stopPropagation();
 try {
-    const formData = new FormData();
-    const response = await fetch(mediaLink);
-    const blob = await response.blob();
-    formData.append('file', blob);
-    const uploadResponse = await fetch('https://jerrrycans-file.hf.space/upload', {
-        method: 'POST',
-        body: formData
-    });
-    if (uploadResponse.ok) {
-        const result = await uploadResponse.json();
-        const uploadedUrl = `https://jerrrycans-file.hf.space${result.url}`;
-        alert(`File uploaded successfully! URL:\n${uploadedUrl}`);
-    } else {
-        alert('Failed to upload file.');
-    }
 } catch (error) {
-    alert('An error occurred while uploading the file.');
 }
 };
 player.elements.container.querySelector('.plyr__video-wrapper').appendChild(uploadButton);
 } else {
-document.getElementById('error-message').textContent = 'Error: Media URL not provided';
 }
 </script>
 </body>
-</html>

 <body>
 <video id="stream-media" controls preload="auto">
+<source src="" type="">
 <p class="vjs-no-js">
 To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
 </p>
 <div id="error-message"></div>
 <script>
+const player = new Plyr('#stream-media', {
 controls:['play-large', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'mute', 'settings', 'pip', 'fullscreen'],
 settings:['speed','loop'],
 speed:{selected:1,options:[0.25,0.5,0.75,1,1.25,1.5,1.75,2]},
 keyboard: { focused: true, global: true },
 });
+// Get media URL from query parameter
+const urlParams = new URLSearchParams(window.location.search);
+const mediaLink = urlParams.get('mediaLink');
 if (mediaLink) {
+document.querySelector('#stream-media source').src = mediaLink;
+player.source = { type: 'video', sources: [{ src: mediaLink }] };
+// Download Button
+const downloadButton = document.createElement('div');
 downloadButton.className = 'plyr-download-button';
+downloadButton.onclick = () => {
+const link = document.createElement('a');
 link.href = mediaLink;
 link.click();
 };
 player.elements.container.querySelector('.plyr__video-wrapper').appendChild(downloadButton);
+// Share Button
+const shareButton = document.createElement('div');
 shareButton.className = 'plyr-share-button';
+shareButton.onclick = () => {
+navigator.share?.({ title: "Play", url: mediaLink });
 };
 player.elements.container.querySelector('.plyr__video-wrapper').appendChild(shareButton);
+// Upload Button
+const uploadButton = document.createElement('div');
 uploadButton.className = 'plyr-upload-button';
+uploadButton.onclick = async () => {
 try {
+const videoSrc = document.querySelector('#stream-media source').src;
+const response = await fetch(videoSrc);
+const blob = await response.blob();
+const formData = new FormData();
+formData.append('file', blob, 'video.mp4');
+const uploadResponse = await fetch('https://jerrrycans-file.hf.space/upload', {
+method: 'POST',
+body: formData,
+});
+if (uploadResponse.ok) {
+const { url } = await uploadResponse.json();
+const fullUrl = `https://jerrrycans-file.hf.space${url}`;
+alert(`Upload successful!\nURL: ${fullUrl}`);
+} else {
+throw new Error('Upload failed');
+}
 } catch (error) {
+alert(`Upload error: ${error.message}`);
 }
 };
 player.elements.container.querySelector('.plyr__video-wrapper').appendChild(uploadButton);
 } else {
+document.getElementById('error-message').textContent = 'Error: Missing media URL parameter';
 }
 </script>
 </body>
+</html>