Spaces:

jerrrycans
/

file2

Sleeping

App Files Files Community

jerrrycans commited on Mar 11, 2025

Commit

eb43b1b

verified ·

1 Parent(s): 40f5327

Update bot/server/templates/player.html

Browse files

Files changed (1) hide show

bot/server/templates/player.html +286 -87

bot/server/templates/player.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!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">
@@ -9,20 +9,34 @@
     <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>
       :root {
-        --primary-color: #3498db;
-        --secondary-color: #2ecc71;
       }
       html, body {
         margin: 0;
         height: 100%;
-        font-family: 'Arial', sans-serif;
-        background-color: #000;
       }
       #stream-media {
@@ -30,150 +44,308 @@
         width: 100%;
       }
       #error-message {
-        color: red;
-        font-size: 24px;
-        text-align: center;
-        margin-top: 20px;
-        background-color: rgba(0, 0, 0, 0.7);
-        padding: 10px;
-        border-radius: 5px;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         display: none;
       }
-      .plyr__video-wrapper .plyr-download-button {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        width: 36px;
-        height: 36px;
-        background-color: rgba(0, 0, 0, 0.7);
-        border-radius: 50%;
-        text-align: center;
-        line-height: 36px;
-        color: white;
-        z-index: 10;
-        cursor: pointer;
         transition: all 0.3s ease;
-        border: 1px solid rgba(255, 255, 255, 0.2);
       }
-      .plyr__video-wrapper .plyr-share-button {
         position: absolute;
-        top: 56px;
-        left: 10px;
-        width: 36px;
-        height: 36px;
-        background-color: rgba(0, 0, 0, 0.7);
         border-radius: 50%;
         text-align: center;
-        line-height: 36px;
         color: white;
         z-index: 10;
         cursor: pointer;
         transition: all 0.3s ease;
-        border: 1px solid rgba(255, 255, 255, 0.2);
       }
-      .plyr__video-wrapper .plyr-download-button:hover,
-      .plyr__video-wrapper .plyr-share-button:hover {
-        background-color: var(--primary-color);
-        transform: scale(1.05);
-        border-color: white;
       }
       .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%;
       }
-      .plyr--full-ui input[type=range] {
-        color: var(--primary-color);
       }
-      .plyr__control--overlaid {
-        background: var(--primary-color);
       }
-      .plyr--video .plyr__control:hover {
-        background: var(--primary-color);
       }
-      .plyr--video .plyr__control.plyr__tab-focus {
-        background: var(--primary-color);
       }
-      .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
-        background: var(--primary-color);
       }
-      .plyr__control.plyr__control--pressed {
-        background: var(--secondary-color);
       }
-      .loading-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.7);
         display: flex;
         align-items: center;
-        justify-content: center;
-        z-index: 100;
         opacity: 1;
-        transition: opacity 0.5s ease;
       }
-      .loading-spinner {
-        width: 50px;
-        height: 50px;
-        border: 5px solid rgba(255, 255, 255, 0.3);
-        border-radius: 50%;
-        border-top-color: var(--primary-color);
-        animation: spin 1s ease-in-out infinite;
       }
-      @keyframes spin {
-        to { transform: rotate(360deg); }
       }
-      .hidden {
-        opacity: 0;
-        pointer-events: none;
       }
     </style>
   </head>
   <body>
-    <div class="loading-overlay" id="loading-overlay">
-      <div class="loading-spinner"></div>
     </div>
-    <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>
-    </video>
-    <div id="error-message"></div>
     <script>
       // Initialize the player with exact same controls as the original
@@ -183,23 +355,31 @@
           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 },
       });
       // Hide loading overlay when player is ready
       player.on('ready', function() {
-        document.getElementById('loading-overlay').classList.add('hidden');
       });
       // This would be replaced with the actual media URL in your template system
       var mediaLink = "{{ mediaLink }}";
       if (mediaLink) {
           document.querySelector('#stream-media source').setAttribute('src', mediaLink);
           player.restart();
-          // Add download button - keeping the exact same functionality
           var downloadButton = document.createElement('div');
-          downloadButton.className = 'plyr-download-button';
           downloadButton.onclick = function(event) {
             event.stopPropagation();
@@ -212,17 +392,21 @@
           player.elements.container.querySelector('.plyr__video-wrapper').appendChild(downloadButton);
-          // Add share button - keeping the exact same functionality
           var shareButton = document.createElement('div');
-          shareButton.className = 'plyr-share-button';
           shareButton.onclick = function(event) {
             event.stopPropagation();
             if (navigator.share) {
               navigator.share({
-                title: "Play",
                 url: mediaLink
               });
             }
           };
@@ -242,6 +426,21 @@
         errorElement.textContent = 'Error: Failed to load media';
         errorElement.style.display = 'block';
       });
     </script>
   </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <title>Premium Media Player</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap">
     <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
     <style>
       :root {
+        --primary-color: #00c6ff;
+        --secondary-color: #0072ff;
+        --accent-color: #00e676;
+        --text-color: #ffffff;
+        --background-dark: #111111;
+        --background-light: #2a2a2a;
+        --overlay-color: rgba(0, 0, 0, 0.7);
+        --glow-color: rgba(0, 198, 255, 0.5);
       }
       html, body {
         margin: 0;
         height: 100%;
+        font-family: 'Montserrat', sans-serif;
+        background-color: var(--background-dark);
+        overflow: hidden;
+      }
+      .player-container {
+        position: relative;
+        height: 100%;
+        width: 100%;
       }
       #stream-media {
         width: 100%;
       }
+      /* Modern Error Message */
       #error-message {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        background: linear-gradient(135deg, #ff416c, #ff4b2b);
+        color: white;
+        font-size: 18px;
+        text-align: center;
+        padding: 20px 30px;
+        border-radius: 10px;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+        z-index: 100;
         display: none;
+        animation: fadeInUp 0.5s ease;
+        max-width: 80%;
       }
+      /* Redesigned Control Buttons */
+      .plyr--full-ui input[type=range] {
+        color: var(--primary-color);
+      }
+      .plyr__control--overlaid {
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        padding: 25px;
+        opacity: 0.9;
         transition: all 0.3s ease;
       }
+      .plyr__control--overlaid:hover {
+        background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+        opacity: 1;
+        transform: scale(1.05);
+        box-shadow: 0 0 20px var(--glow-color);
+      }
+      .plyr--video .plyr__control:hover {
+        background: var(--primary-color);
+      }
+      .plyr--video .plyr__control.plyr__tab-focus {
+        background: var(--primary-color);
+      }
+      /* Progress Bar Enhancement */
+      .plyr__progress__buffer {
+        color: rgba(255, 255, 255, 0.25);
+      }
+      .plyr__progress input[type=range]::-webkit-slider-thumb {
+        box-shadow: 0 0 10px var(--glow-color);
+      }
+      .plyr__progress__container:hover .plyr__progress {
+        height: 8px;
+        transition: height 0.2s ease;
+      }
+      .plyr__progress {
+        height: 6px;
+        transition: height 0.2s ease;
+      }
+      .plyr__volume {
+        max-width: initial;
+        min-width: initial;
+        width: auto;
+      }
+      /* Control Bar Styling */
+      .plyr--video .plyr__controls {
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
+        padding: 35px 15px 15px 15px;
+      }
+      /* Custom Buttons */
+      .plyr__video-wrapper .custom-player-button {
         position: absolute;
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
         border-radius: 50%;
         text-align: center;
         color: white;
         z-index: 10;
         cursor: pointer;
         transition: all 0.3s ease;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        border: none;
+        width: 44px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
+      .plyr__video-wrapper .plyr-download-button {
+        top: 20px;
+        right: 20px;
+      }
+      .plyr__video-wrapper .plyr-share-button {
+        top: 20px;
+        right: 74px;
+      }
+      .plyr__video-wrapper .custom-player-button:hover {
+        transform: scale(1.1) rotate(5deg);
+        box-shadow: 0 0 15px var(--glow-color);
       }
       .plyr__video-wrapper .plyr-download-button:before {
         font-family: "Font Awesome 5 Free";
         content: "\f019";
         font-weight: bold;
+        font-size: 18px;
       }
       .plyr__video-wrapper .plyr-share-button:before {
         font-family: "Font Awesome 5 Free";
         content: "\f064";
         font-weight: bold;
+        font-size: 18px;
       }
+      /* Player Height */
       .plyr, .plyr__video-wrapper, .plyr__video-embed iframe {
         height: 100%;
       }
+      /* Loading Animation */
+      .loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(circle, rgba(17, 17, 17, 0.9) 0%, rgba(0, 0, 0, 0.95) 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+        opacity: 1;
+        transition: opacity 0.5s ease;
       }
+      .loading-spinner {
+        width: 64px;
+        height: 64px;
+        margin-bottom: 20px;
+        position: relative;
       }
+      .loading-spinner:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: var(--primary-color);
+        border-bottom-color: var(--secondary-color);
+        animation: spinnerAnimation 1.2s linear infinite;
       }
+      .loading-spinner:before {
+        content: '';
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-left-color: var(--accent-color);
+        border-right-color: var(--accent-color);
+        animation: spinnerAnimation 1.8s linear infinite reverse;
       }
+      .loading-text {
+        color: var(--text-color);
+        font-size: 16px;
+        letter-spacing: 2px;
+        margin-top: 10px;
+        font-weight: 500;
+        text-transform: uppercase;
+        animation: pulse 1.5s infinite;
       }
+      @keyframes spinnerAnimation {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
       }
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translate(-50%, calc(-50% + 20px));
+        }
+        to {
+          opacity: 1;
+          transform: translate(-50%, -50%);
+        }
+      }
+      .hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+      /* Video Title */
+      .video-title-bar {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
+        padding: 15px 20px;
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
+        z-index: 9;
         display: flex;
         align-items: center;
         opacity: 1;
+        transition: opacity 0.3s ease;
+        pointer-events: none;
       }
+      .video-title {
+        color: var(--text-color);
+        font-size: 18px;
+        font-weight: 600;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+        max-width: 80%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
+      /* Hide title on player interaction */
+      .plyr--playing .video-title-bar {
+        opacity: 0;
       }
+      .plyr--paused .video-title-bar,
+      .plyr--playing:hover .video-title-bar {
+        opacity: 1;
+      }
+      /* Volume Slider Enhancement */
+      .plyr__volume input[type=range]::-webkit-slider-thumb {
+        box-shadow: 0 0 5px var(--glow-color);
+      }
+      /* Menu Container Enhancement */
+      .plyr__menu__container {
+        background: linear-gradient(135deg, var(--background-light), var(--background-dark));
+        border-radius: 8px;
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
+      }
+      .plyr__menu__container .plyr__control {
+        color: var(--text-color);
+      }
+      .plyr__menu__container .plyr__control--back {
+        border-bottom-color: rgba(255, 255, 255, 0.2);
+      }
+      .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
+        background: var(--primary-color);
+        box-shadow: 0 0 8px var(--glow-color);
       }
     </style>
   </head>
   <body>
+    <div class="player-container">
+      <div class="loading-overlay" id="loading-overlay">
+        <div class="loading-spinner"></div>
+        <div class="loading-text">Loading</div>
+      </div>
+      <div class="video-title-bar">
+        <div class="video-title" id="video-title">Media Player</div>
+      </div>
+      <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>
+      </video>
+      <div id="error-message"></div>
     </div>
     <script>
       // Initialize the player with exact same controls as the original
           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 },
+          tooltips: { controls: true, seek: true },
       });
       // Hide loading overlay when player is ready
       player.on('ready', function() {
+        setTimeout(function() {
+          document.getElementById('loading-overlay').classList.add('hidden');
+        }, 500); // Add slight delay for smoother transition
       });
       // This would be replaced with the actual media URL in your template system
       var mediaLink = "{{ mediaLink }}";
+      var mediaTitle = "{{ mediaTitle || 'Media File' }}";
+      // Update video title
+      document.getElementById('video-title').textContent = mediaTitle;
       if (mediaLink) {
           document.querySelector('#stream-media source').setAttribute('src', mediaLink);
           player.restart();
+          // Add download button - with same functionality but enhanced styling
           var downloadButton = document.createElement('div');
+          downloadButton.className = 'custom-player-button plyr-download-button';
+          downloadButton.setAttribute('title', 'Download');
           downloadButton.onclick = function(event) {
             event.stopPropagation();
           player.elements.container.querySelector('.plyr__video-wrapper').appendChild(downloadButton);
+          // Add share button - with same functionality but enhanced styling
           var shareButton = document.createElement('div');
+          shareButton.className = 'custom-player-button plyr-share-button';
+          shareButton.setAttribute('title', 'Share');
           shareButton.onclick = function(event) {
             event.stopPropagation();
             if (navigator.share) {
               navigator.share({
+                title: mediaTitle || "Play",
                 url: mediaLink
               });
+            } else {
+              // Fallback for browsers that don't support navigator.share
+              prompt('Copy this link to share:', mediaLink);
             }
           };
         errorElement.textContent = 'Error: Failed to load media';
         errorElement.style.display = 'block';
       });
+      // Add some visual feedback for player events
+      player.on('play', function() {
+        if (player.elements.container.querySelector('.video-title-bar')) {
+          setTimeout(function() {
+            player.elements.container.querySelector('.video-title-bar').style.opacity = '0';
+          }, 1500);
+        }
+      });
+      player.on('pause', function() {
+        if (player.elements.container.querySelector('.video-title-bar')) {
+          player.elements.container.querySelector('.video-title-bar').style.opacity = '1';
+        }
+      });
     </script>
   </body>
+</html>