Spaces:

jerrrycans
/

file2

Sleeping

App Files Files Community

jerrrycans commited on Mar 11, 2025

Commit

20da603

verified ·

1 Parent(s): 75e4943

Update bot/server/templates/player.html

Browse files

Files changed (1) hide show

bot/server/templates/player.html +104 -192

bot/server/templates/player.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!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">
@@ -15,287 +15,199 @@
     <style>
       :root {
-        --primary-color: #6366f1;
-        --hover-color: #4f46e5;
-        --text-color: #f8fafc;
-        --dark-bg: #0f172a;
-        --control-bg: rgba(15, 23, 42, 0.8);
-        --control-hover: rgba(99, 102, 241, 0.9);
       }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        font-family: 'Poppins', sans-serif;
-      }
       html, body {
         margin: 0;
         height: 100%;
-        background-color: var(--dark-bg);
-        color: var(--text-color);
-      }
-      .player-container {
-        height: 100%;
-        width: 100%;
-        position: relative;
         overflow: hidden;
-        display: flex;
-        justify-content: center;
-        align-items: center;
       }
       #stream-media {
         height: 100%;
         width: 100%;
-        max-height: 100vh;
       }
       #error-message {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: #ef4444;
         font-size: 1.25rem;
         text-align: center;
-        padding: 1rem;
-        background-color: rgba(15, 23, 42, 0.9);
-        border-radius: 0.5rem;
-        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-        max-width: 90%;
       }
-      /* Plyr customization */
       .plyr--full-ui input[type=range] {
         color: var(--primary-color);
       }
-      .plyr--video .plyr__control.plyr__tab-focus,
-      .plyr--video .plyr__control:hover,
-      .plyr--video .plyr__control[aria-expanded=true] {
-        background: var(--hover-color);
-      }
       .plyr__control--overlaid {
-        background: var(--primary-color) !important;
-        padding: 1.5rem !important;
-        transition: transform 0.2s ease, background 0.2s ease !important;
       }
       .plyr__control--overlaid:hover {
-        background: var(--hover-color) !important;
-        transform: scale(1.1) !important;
       }
-      .plyr--video .plyr__controls {
-        background: linear-gradient(rgba(0, 0, 0, 0), var(--control-bg)) !important;
-        padding: 1.5rem 1rem !important;
       }
-      .plyr__menu__container {
-        background: var(--dark-bg) !important;
-        border-radius: 0.5rem !important;
       }
-      .plyr__menu__container .plyr__control,
-      .plyr__menu__container .plyr__menu__value {
-        color: var(--text-color) !important;
       }
-      .plyr__menu__container .plyr__control--back::before {
-        background: rgba(255, 255, 255, 0.1) !important;
       }
-      /* Custom action buttons */
-      .plyr__video-wrapper .custom-button {
         position: absolute;
-        width: 42px;
-        height: 42px;
-        background-color: var(--control-bg);
         border-radius: 50%;
-        text-align: center;
-        line-height: 42px;
         color: var(--text-color);
         z-index: 10;
         transition: all 0.3s ease;
-        cursor: pointer;
-        border: 2px solid rgba(255, 255, 255, 0.1);
-        backdrop-filter: blur(5px);
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
       }
-      .plyr__video-wrapper .plyr-download-button {
-        top: 20px;
-        right: 20px;
       }
-      .plyr__video-wrapper .plyr-share-button {
-        top: 20px;
-        right: 72px;
       }
-      .plyr__video-wrapper .custom-button:hover {
-        background-color: var(--control-hover);
-        transform: translateY(-3px);
       }
-      .plyr__video-wrapper .custom-button:active {
-        transform: translateY(0);
       }
       .plyr, .plyr__video-wrapper, .plyr__video-embed iframe {
         height: 100%;
-        border-radius: 0.75rem;
-      }
-      /* Loading animation */
-      .loading-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--dark-bg);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 20;
-        opacity: 1;
-        transition: opacity 0.5s ease;
-      }
-      .loading-overlay.hidden {
-        opacity: 0;
-        pointer-events: none;
       }
-      .spinner {
-        width: 60px;
-        height: 60px;
-        border: 5px solid rgba(255, 255, 255, 0.1);
-        border-radius: 50%;
-        border-top-color: var(--primary-color);
-        animation: spin 1s ease-in-out infinite;
-      }
-      @keyframes spin {
-        to { transform: rotate(360deg); }
       }
-      /* Responsive adjustments */
-      @media (max-width: 768px) {
-        .plyr__video-wrapper .custom-button {
-          width: 36px;
-          height: 36px;
-          line-height: 36px;
-        }
       }
     </style>
   </head>
   <body>
-    <div class="player-container">
-      <div class="loading-overlay">
-        <div class="spinner"></div>
-      </div>
-      <video id="stream-media" controls preload="auto" crossorigin="anonymous">
-        <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 loading state
-      const loadingOverlay = document.querySelector('.loading-overlay');
-      // Initialize Plyr with enhanced options
-      const player = new Plyr('#stream-media', {
-        controls: ['play-large', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
-        settings: ['captions', 'quality', 'speed', 'loop'],
-        speed: {selected: 1, options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3]},
-        seekTime: 10,
-        keyboard: { focused: true, global: true },
-        tooltips: { controls: true, seek: true },
-        disableContextMenu: false,
-        quality: { default: 720, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }
       });
-      // Media link placeholder - this will be replaced by the server
-      const mediaLink = "{{ mediaLink }}";
       if (mediaLink) {
-        // Set source and load media
-        document.querySelector('#stream-media source').setAttribute('src', mediaLink);
-        // Handle media loaded
-        player.on('ready', function() {
-          // Hide loading overlay
-          setTimeout(() => {
-            loadingOverlay.classList.add('hidden');
-          }, 600);
-          // Add download button
-          const downloadButton = document.createElement('div');
-          downloadButton.className = 'custom-button plyr-download-button';
           downloadButton.innerHTML = '<i class="fas fa-download"></i>';
           downloadButton.onclick = function(event) {
             event.stopPropagation();
-            const link = document.createElement('a');
             link.href = mediaLink;
             link.download = mediaLink.split('/').pop();
-            link.setAttribute('download', '');
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
           };
-          // Add share button
-          const shareButton = document.createElement('div');
-          shareButton.className = 'custom-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: "Watch Media",
-                url: window.location.href
-              }).catch(err => {
-                console.error('Share failed:', err);
               });
             } else {
               // Fallback for browsers that don't support Web Share API
-              prompt("Copy this link to share:", window.location.href);
             }
           };
-          // Add buttons to player
-          player.elements.container.querySelector('.plyr__video-wrapper').appendChild(downloadButton);
           player.elements.container.querySelector('.plyr__video-wrapper').appendChild(shareButton);
-        });
-        // Restart player to load the source
-        player.restart();
       } else {
-        // Handle error case
-        loadingOverlay.classList.add('hidden');
-        document.getElementById('error-message').innerHTML = '<i class="fas fa-exclamation-triangle"></i> Media URL not provided. Please try again later.';
       }
-      // Add error handling
-      player.on('error', function() {
-        loadingOverlay.classList.add('hidden');
-        document.getElementById('error-message').innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error loading media. Please try again later.';
-      });
     </script>
   </body>
 </html>

 <!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">
     <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>
   <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>
+    </video>
+    <div id="error-message"></div>
     <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 }}";
       if (mediaLink) {
+          document.querySelector('#stream-media source').setAttribute('src', mediaLink);
+          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);
           };
+          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));
             }
           };
           player.elements.container.querySelector('.plyr__video-wrapper').appendChild(shareButton);
       } else {
+          document.getElementById('error-message').textContent = 'Error: Media URL not provided';
       }
     </script>
   </body>
 </html>