Spaces:

jerrrycans
/

file2

Sleeping

App Files Files Community

jerrrycans commited on Mar 11, 2025

Commit

1944a80

verified ·

1 Parent(s): 14bb70c

Update bot/server/templates/player.html

Browse files

Files changed (1) hide show

bot/server/templates/player.html +151 -527

bot/server/templates/player.html CHANGED Viewed

@@ -1,530 +1,154 @@
 <!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">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="description" content="Advanced HTML5 Video Player">
-    <!-- Favicon -->
-    <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/plyr@3.7.8/dist/plyr.svg">
-    <!-- CSS Libraries -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plyr@3.7.8/dist/plyr.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
-    <!-- Scripts -->
-    <script src="https://cdn.jsdelivr.net/npm/plyr@3.7.8/dist/plyr.polyfilled.js"></script>
-    <style>
-      :root {
-        --primary-color: #3498db;
-        --secondary-color: #2ecc71;
-        --background-color: #000;
-        --text-color: #fff;
-        --button-hover: rgba(52, 152, 219, 0.8);
-      }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html, body {
-        margin: 0;
-        height: 100%;
-        font-family: 'Roboto', Arial, sans-serif;
-        background-color: var(--background-color);
-        overflow: hidden;
-      }
-      .player-container {
-        position: relative;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      #stream-media {
-        height: 100%;
-        width: 100%;
-        max-height: 100vh;
-      }
-      .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;
-      }
-      #error-message {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: #e74c3c;
-        font-size: 18px;
-        text-align: center;
-        background-color: rgba(0, 0, 0, 0.8);
-        padding: 20px;
-        border-radius: 8px;
-        max-width: 80%;
-        z-index: 50;
-        display: none;
-      }
-      .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);
-      }
-      .custom-button {
-        position: absolute;
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        background-color: rgba(0, 0, 0, 0.6);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        cursor: pointer;
-        z-index: 10;
-        transition: all 0.3s ease;
-        border: 2px solid rgba(255, 255, 255, 0.2);
-      }
-      .custom-button:hover {
-        background-color: var(--button-hover);
-        transform: scale(1.1);
-        border-color: rgba(255, 255, 255, 0.5);
-      }
-      .custom-button i {
-        font-size: 16px;
-      }
-      .plyr__video-wrapper .download-button {
-        top: 15px;
-        right: 15px;
-      }
-      .plyr__video-wrapper .share-button {
-        top: 15px;
-        right: 65px;
-      }
-      .plyr__video-wrapper .info-button {
-        top: 15px;
-        right: 115px;
-      }
-      .video-info-panel {
-        position: absolute;
-        top: 70px;
-        right: 15px;
-        background-color: rgba(0, 0, 0, 0.8);
-        border-radius: 8px;
-        padding: 15px;
-        color: white;
-        max-width: 300px;
-        transform: translateY(-20px);
-        opacity: 0;
-        transition: all 0.3s ease;
-        z-index: 9;
-        pointer-events: none;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-      }
-      .video-info-panel.active {
-        transform: translateY(0);
-        opacity: 1;
-        pointer-events: all;
-      }
-      .video-info-panel h3 {
-        margin-bottom: 10px;
-        font-size: 16px;
-        font-weight: 500;
-        color: var(--primary-color);
-      }
-      .video-info-panel p {
-        margin-bottom: 8px;
-        font-size: 14px;
-        line-height: 1.4;
-      }
-      .keyboard-shortcuts {
-        position: absolute;
-        bottom: 70px;
-        left: 20px;
-        background-color: rgba(0, 0, 0, 0.7);
-        border-radius: 4px;
-        padding: 8px 12px;
-        color: white;
-        font-size: 12px;
-        opacity: 0;
-        transition: opacity 0.3s ease;
-        pointer-events: none;
-      }
-      .plyr--playing:hover .keyboard-shortcuts {
-        opacity: 1;
-      }
-      .plyr__volume {
-        max-width: 120px;
-      }
-      @media (max-width: 768px) {
-        .custom-button {
-          width: 36px;
-          height: 36px;
-        }
-        .plyr__video-wrapper .download-button {
-          top: 10px;
-          right: 10px;
-        }
-        .plyr__video-wrapper .share-button {
-          top: 10px;
-          right: 56px;
-        }
-        .plyr__video-wrapper .info-button {
-          top: 10px;
-          right: 102px;
-        }
-        .video-info-panel {
-          max-width: 250px;
-          top: 60px;
-        }
-      }
-      @media (max-width: 480px) {
-        .custom-button {
-          width: 32px;
-          height: 32px;
-        }
-        .custom-button i {
-          font-size: 14px;
-        }
-        .plyr__video-wrapper .share-button {
-          right: 52px;
-        }
-        .plyr__video-wrapper .info-button {
-          right: 94px;
-        }
-        .video-info-panel {
-          max-width: 200px;
-        }
-      }
-      .plyr {
-        --plyr-color-main: var(--primary-color);
-        --plyr-video-control-color: #fff;
-        --plyr-video-control-color-hover: #fff;
-        --plyr-video-control-background-hover: var(--primary-color);
-        height: 100%;
-      }
-      .plyr__progress__buffer {
-        color: rgba(255, 255, 255, 0.3);
-      }
-      .plyr--video .plyr__control.plyr__tab-focus,
-      .plyr--video .plyr__control:hover,
-      .plyr--video .plyr__control[aria-expanded=true] {
-        background: var(--primary-color);
-      }
-      .plyr--captions-enabled .plyr__captions {
-        font-size: 18px;
-        background-color: rgba(0, 0, 0, 0.7);
-        padding: 8px 16px;
-        border-radius: 4px;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="player-container">
-      <div class="loading-overlay" id="loading-overlay">
-        <div class="loading-spinner"></div>
-      </div>
-      <video id="stream-media" crossorigin="anonymous" playsinline>
-        <source src="" type="">
-        <track kind="captions" label="English" src="" srclang="en" default>
-        <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 class="video-info-panel" id="info-panel">
-        <h3>Media Information</h3>
-        <p><strong>Title:</strong> <span id="video-title">Video Title</span></p>
-        <p><strong>Duration:</strong> <span id="video-duration">00:00</span></p>
-        <p><strong>Quality:</strong> <span id="video-quality">HD</span></p>
-      </div>
-      <div class="keyboard-shortcuts" id="shortcuts-info">
-        Press <strong>Space</strong> to play/pause, <strong>F</strong> for fullscreen
-      </div>
-    </div>
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        // Create player instance with enhanced options
-        const player = new Plyr('#stream-media', {
-          controls: [
-            'play-large',
-            'restart',
-            '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,
-          volume: 0.8,
-          keyboard: { focused: true, global: true },
-          tooltips: { controls: true, seek: true },
-          captions: { active: false, language: 'en' },
-          quality: { default: 1080, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] },
-          invertTime: true,
-          displayDuration: true,
-          blankVideo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=',
-          ratio: '16:9',
-          disableContextMenu: false,
-          autoplay: false,
-          clickToPlay: true,
-          hideControls: true,
-          resetOnEnd: false,
-          debug: false
-        });
-        // Define media source (replace with actual media URL in production)
-        const mediaLink = "YOUR_MEDIA_URL_HERE";
-        const mediaTitle = "Your Video Title";
-        const mediaDuration = "01:30:45";
-        const mediaQuality = "1080p";
-        // Initialize loading overlay
-        const loadingOverlay = document.getElementById('loading-overlay');
-        // Set up media and process loading
-        if (mediaLink) {
-          document.querySelector('#stream-media source').setAttribute('src', mediaLink);
-          // Update video info panel
-          document.getElementById('video-title').textContent = mediaTitle;
-          document.getElementById('video-duration').textContent = mediaDuration;
-          document.getElementById('video-quality').textContent = mediaQuality;
-          // Create and add custom buttons
-          const playerWrapper = player.elements.container.querySelector('.plyr__video-wrapper');
-          // Download Button
-          const downloadButton = document.createElement('div');
-          downloadButton.className = 'custom-button download-button';
-          downloadButton.innerHTML = '<i class="fas fa-download"></i>';
-          downloadButton.setAttribute('aria-label', 'Download video');
-          downloadButton.setAttribute('title', 'Download video');
-          downloadButton.onclick = function(event) {
-            event.stopPropagation();
-            const link = document.createElement('a');
-            link.href = mediaLink;
-            link.download = mediaTitle || 'video';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-          };
-          playerWrapper.appendChild(downloadButton);
-          // Share Button
-          const shareButton = document.createElement('div');
-          shareButton.className = 'custom-button share-button';
-          shareButton.innerHTML = '<i class="fas fa-share-alt"></i>';
-          shareButton.setAttribute('aria-label', 'Share video');
-          shareButton.setAttribute('title', 'Share video');
-          shareButton.onclick = function(event) {
-            event.stopPropagation();
-            if (navigator.share) {
-              navigator.share({
-                title: mediaTitle || 'Video',
-                url: window.location.href
-              }).catch(err => {
-                console.error('Share failed:', err);
-              });
-            } else {
-              // Fallback for browsers that don't support navigator.share
-              prompt('Copy this link to share:', window.location.href);
-            }
-          };
-          playerWrapper.appendChild(shareButton);
-          // Info Button
-          const infoButton = document.createElement('div');
-          infoButton.className = 'custom-button info-button';
-          infoButton.innerHTML = '<i class="fas fa-info"></i>';
-          infoButton.setAttribute('aria-label', 'Video information');
-          infoButton.setAttribute('title', 'Video information');
-          const infoPanel = document.getElementById('info-panel');
-          infoButton.onclick = function(event) {
-            event.stopPropagation();
-            infoPanel.classList.toggle('active');
-          };
-          playerWrapper.appendChild(infoButton);
-          // Hide info panel when clicking elsewhere
-          document.addEventListener('click', function(event) {
-            if (!infoButton.contains(event.target) && !infoPanel.contains(event.target)) {
-              infoPanel.classList.remove('active');
-            }
-          });
-          // Handle player events
-          player.on('ready', event => {
-            console.log('Player is ready');
-            loadingOverlay.classList.add('hidden');
-            // Get actual duration if available
-            if (player.duration !== Infinity && !isNaN(player.duration)) {
-              const formatTime = seconds => {
-                const h = Math.floor(seconds / 3600);
-                const m = Math.floor((seconds % 3600) / 60);
-                const s = Math.floor(seconds % 60);
-                return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
-              };
-              document.getElementById('video-duration').textContent = formatTime(player.duration);
-            }
-          });
-          player.on('play', () => {
-            console.log('Video started playing');
-          });
-          player.on('pause', () => {
-            console.log('Video paused');
-          });
-          player.on('ended', () => {
-            console.log('Video ended');
-          });
-          player.on('error', error => {
-            console.error('Player error:', error);
-            loadingOverlay.classList.add('hidden');
-            showError('Error loading video. Please try again later.');
-          });
-          // Initialize the player
-          player.restart();
-        } else {
-          // Handle missing media
-          loadingOverlay.classList.add('hidden');
-          showError('Error: Media URL not provided');
-        }
-        // Error display function
-        function showError(message) {
-          const errorElement = document.getElementById('error-message');
-          errorElement.textContent = message;
-          errorElement.style.display = 'block';
-        }
-        // Add keyboard shortcut info on ctrl press
-        document.addEventListener('keydown', function(e) {
-          if (e.key === 'Control') {
-            document.getElementById('shortcuts-info').style.opacity = '1';
-          }
-        });
-        document.addEventListener('keyup', function(e) {
-          if (e.key === 'Control') {
-            document.getElementById('shortcuts-info').style.opacity = '0';
-          }
-        });
-        // Handle window resize events for responsive behavior
-        window.addEventListener('resize', function() {
-          player.ratio = '16:9';
-        });
-      });
-    </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>
+<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', '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 }}";
+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);
+} else {
+document.getElementById('error-message').textContent = 'Error: Media URL not provided';
+}
+</script>
+</body>
 </html>