Spaces:

jerrrycans
/

file2

Sleeping

App Files Files Community

jerrrycans commited on Mar 11, 2025

Commit

231fc02

verified ·

1 Parent(s): 20da603

Update bot/server/templates/player.html

Browse files

Files changed (1) hide show

bot/server/templates/player.html +54 -113

bot/server/templates/player.html CHANGED Viewed

@@ -1,135 +1,93 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Modern Media Player</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-Frame-Options" content="deny">
     <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
     <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
     <style>
-      :root {
-        --primary-color: #4F46E5;
-        --hover-color: #6366F1;
-        --text-color: #F9FAFB;
-        --background-overlay: rgba(17, 24, 39, 0.8);
-        --background-hover: rgba(79, 70, 229, 0.9);
-      }
       html, body {
         margin: 0;
         height: 100%;
-        font-family: 'Poppins', sans-serif;
-        background-color: #0F172A;
-        overflow: hidden;
       }
       #stream-media {
         height: 100%;
         width: 100%;
-        border-radius: 8px;
-        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
       }
       #error-message {
-        color: #EF4444;
-        font-size: 1.25rem;
         text-align: center;
-        margin-top: 1.25rem;
-        font-weight: 500;
-      }
-      /* Custom player styling */
-      .plyr--full-ui input[type=range] {
-        color: var(--primary-color);
       }
-      .plyr__control--overlaid {
-        background: var(--background-overlay);
-        color: var(--text-color);
-        transition: background 0.3s ease;
         border-radius: 50%;
       }
-      .plyr__control--overlaid:hover {
-        background: var(--background-hover);
-        transform: scale(1.1);
-      }
-      .plyr__menu__container {
-        background: var(--background-overlay);
-        border-radius: 8px;
-      }
-      .plyr__control {
-        color: var(--text-color);
-      }
-      .plyr__control:hover {
-        background: var(--hover-color);
       }
-      .plyr__control.plyr__tab-focus {
-        box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.5);
-      }
-      /* Action buttons */
-      .player-action-button {
         position: absolute;
-        width: 40px;
-        height: 40px;
-        background-color: var(--background-overlay);
         border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--text-color);
         z-index: 10;
-        transition: all 0.3s ease;
-        opacity: 0;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-      }
-      .player-action-button:hover {
-        background-color: var(--background-hover);
-        transform: scale(1.1);
       }
-      .plyr__video-wrapper:hover .player-action-button {
-        opacity: 1;
       }
-      .plyr-download-button {
-        top: 20px;
-        right: 20px;
       }
-      .plyr-share-button {
-        top: 20px;
-        right: 70px;
       }
       .plyr, .plyr__video-wrapper, .plyr__video-embed iframe {
         height: 100%;
-        border-radius: 8px;
-      }
-      /* Fix for the empty center element */
-      .plyr__poster {
-        background-size: cover !important;
-      }
-      .plyr--video .plyr__controls {
-        padding: 20px;
-        background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
-        border-radius: 0 0 8px 8px;
       }
     </style>
   </head>
@@ -145,21 +103,11 @@
     <script>
       var player = new Plyr('#stream-media', {
-          controls:['play-large', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'mute', 'volume', 'settings', 'pip', 'fullscreen'],
-          settings:['quality', 'speed', 'loop'],
-          speed:{selected:1, options:[0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]},
-          seekTime: 10,
           keyboard: { focused: true, global: true },
-          hideControls: true,
-          resetOnEnd: true,
-          fullscreen: { enabled: true, fallback: true, iosNative: true },
-          tooltips: { controls: true, seek: true },
-      });
-      // Remove any unwanted elements that might be in the center
-      player.on('ready', function() {
-        const unwantedElements = document.querySelectorAll('.plyr__control--overlaid:not(:first-child)');
-        unwantedElements.forEach(el => el.remove());
       });
       var mediaLink = "{{ mediaLink }}";
@@ -169,14 +117,12 @@
           player.restart();
           var downloadButton = document.createElement('div');
-          downloadButton.className = 'player-action-button plyr-download-button';
-          downloadButton.innerHTML = '<i class="fas fa-download"></i>';
-          downloadButton.onclick = function(event) {
             event.stopPropagation();
             var link = document.createElement('a');
             link.href = mediaLink;
-            link.download = mediaLink.split('/').pop();
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
@@ -185,21 +131,15 @@
           player.elements.container.querySelector('.plyr__video-wrapper').appendChild(downloadButton);
           var shareButton = document.createElement('div');
-          shareButton.className = 'player-action-button plyr-share-button';
-          shareButton.innerHTML = '<i class="fas fa-share-alt"></i>';
-          shareButton.onclick = function(event) {
             event.stopPropagation();
             if (navigator.share) {
               navigator.share({
-                title: "Modern Media Player",
                 url: mediaLink
               });
-            } else {
-              // Fallback for browsers that don't support Web Share API
-              navigator.clipboard.writeText(mediaLink)
-                .then(() => alert('Link copied to clipboard!'))
-                .catch(err => console.error('Could not copy link: ', err));
             }
           };
@@ -209,5 +149,6 @@
           document.getElementById('error-message').textContent = 'Error: Media URL not provided';
       }
     </script>
   </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <title>Play Files</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-Frame-Options" content="deny">
     <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
     <style>
       html, body {
         margin: 0;
         height: 100%;
       }
       #stream-media {
         height: 100%;
         width: 100%;
       }
       #error-message {
+        color: red;
+        font-size: 24px;
         text-align: center;
+        margin-top: 20px;
       }
+      .plyr__video-wrapper .plyr-download-button{
+        position: absolute;
+        top: 10px;
+        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__volume {
+        max-width: initial;
+        min-width: initial;
+        width: auto;
+        position: relative;
       }
+      .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{
+        background-color: rgba(255, 255, 255, 0.7);
+        color: black;
       }
+      .plyr__video-wrapper .plyr-download-button:before {
+        font-family: "Font Awesome 5 Free";
+        content: "\f019";
+        font-weight: bold;
       }
+      .plyr__video-wrapper .plyr-share-button:before {
+        font-family: "Font Awesome 5 Free";
+        content: "\f064";
+        font-weight: bold;
       }
       .plyr, .plyr__video-wrapper, .plyr__video-embed iframe {
         height: 100%;
       }
     </style>
   </head>
     <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]},
+          seek: 10,
           keyboard: { focused: true, global: true },
       });
       var mediaLink = "{{ 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
               });
             }
           };
           document.getElementById('error-message').textContent = 'Error: Media URL not provided';
       }
     </script>
   </body>
+</html>