Update bot/server/templates/player.html

bot/server/templates/player.html

@@ -30,10 +30,10 @@ text-align: center;
 margin-top: 20px;
 }
 
-.plyr__video-wrapper .plyr-download-button,
-.plyr__video-wrapper .plyr-share-button,
-.plyr__video-wrapper .plyr-upload-button {
+.plyr__video-wrapper .plyr-download-button{
 position: absolute;
+top: 10px;
+left: 10px;
 width: 30px;
 height: 30px;
 background-color: rgba(0, 0, 0, 0.7);
@@ -44,24 +44,30 @@ color: white;
 z-index: 10;
 }
 
-.plyr__video-wrapper .plyr-download-button {
-top: 10px;
-left: 10px;
+.plyr__volume {
+max-width: initial;
+min-width: initial;
+width: auto;
+position: relative;
 }
 
-.plyr__video-wrapper .plyr-share-button {
-top: 50px;
-left: 10px;
-}
 
-.plyr__video-wrapper .plyr-upload-button {
-top: 90px;
+.plyr__video-wrapper .plyr-share-button{
+position: absolute;
+top: 50px;
 left: 10px;
+width: 30px;
+height: 30px;
+background-color: rgba(0, 0, 0, 0.7);
+border-radius: 50%;
+text-align: center;
+line-height: 30px;
+color: white;
+z-index: 10;
 }
 
 .plyr__video-wrapper .plyr-download-button:hover,
-.plyr__video-wrapper .plyr-share-button:hover,
-.plyr__video-wrapper .plyr-upload-button:hover {
+.plyr__video-wrapper .plyr-share-button:hover{
 background-color: rgba(255, 255, 255, 0.7);
 color: black;
 }
@@ -78,15 +84,10 @@ content: "\f064";
 font-weight: bold;
 }
 
-.plyr__video-wrapper .plyr-upload-button:before {
-font-family: "Font Awesome 5 Free";
-content: "\f093";
-font-weight: bold;
-}
-
 .plyr, .plyr__video-wrapper, .plyr__video-embed iframe {
 height: 100%;
 }
+
 </style>
 </head>
 
@@ -101,7 +102,7 @@ To view this video please enable JavaScript, and consider upgrading to a web bro
 <div id="error-message"></div>
 
 <script>
-const player = new Plyr('#stream-media', {
+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,63 +110,43 @@ seek: 10,
 keyboard: { focused: true, global: true },
 });
 
-// Get media URL from query parameter
-const urlParams = new URLSearchParams(window.location.search);
-const mediaLink = urlParams.get('mediaLink');
+var mediaLink = "{{ mediaLink }}";
 
 if (mediaLink) {
-document.querySelector('#stream-media source').src = mediaLink;
-player.source = { type: 'video', sources: [{ src: mediaLink }] };
+document.querySelector('#stream-media source').setAttribute('src', mediaLink);
+player.restart();
 
-// Download Button
-const downloadButton = document.createElement('div');
+var downloadButton = document.createElement('div');
 downloadButton.className = 'plyr-download-button';
-downloadButton.onclick = () => {
-const link = document.createElement('a');
+
+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);
 
-// Share Button
-const shareButton = document.createElement('div');
+var 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,
+shareButton.onclick = function() {
+event.stopPropagation();
+if (navigator.share) {
+navigator.share({
+title: "Play",
+url: mediaLink
 });
-
-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);
+
+player.elements.container.querySelector('.plyr__video-wrapper').appendChild(shareButton);
 
 } else {
-document.getElementById('error-message').textContent = 'Error: Missing media URL parameter';
+document.getElementById('error-message').textContent = 'Error: Media URL not provided';
 }
 </script>