Spaces:

jerrrycans
/

file2

Sleeping

App Files Files Community

jerrrycans commited on Mar 11, 2025

Commit

14bb70c

verified ·

1 Parent(s): bf7a056

Update bot/server/templates/player.html

Browse files

Files changed (1) hide show

bot/server/templates/player.html +385 -312

bot/server/templates/player.html CHANGED Viewed

@@ -1,28 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Ultra 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 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: #3a86ff;
-        --secondary-color: #8338ec;
-        --dark-color: #0d1117;
-        --light-color: #f8f9fa;
-        --success-color: #06d6a0;
-        --warning-color: #ffbe0b;
-        --danger-color: #ef476f;
       }
       * {
@@ -34,9 +37,8 @@
       html, body {
         margin: 0;
         height: 100%;
-        font-family: 'Poppins', sans-serif;
-        background-color: var(--dark-color);
-        color: var(--light-color);
         overflow: hidden;
       }
@@ -45,35 +47,47 @@
         height: 100%;
         width: 100%;
         display: flex;
-        flex-direction: column;
-        justify-content: center;
         align-items: center;
       }
-      .video-title {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
-        padding: 15px 20px;
-        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
-        color: white;
-        z-index: 10;
-        font-weight: 500;
-        font-size: 18px;
-        transition: opacity 0.3s ease;
-        opacity: 0;
       }
-      .player-container:hover .video-title {
-        opacity: 1;
       }
-      #stream-media {
-        height: 100%;
-        width: 100%;
-        max-height: 100vh;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
       }
       #error-message {
@@ -81,377 +95,436 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        color: var(--danger-color);
         font-size: 18px;
         text-align: center;
-        background-color: rgba(13, 17, 23, 0.9);
-        padding: 15px 25px;
         border-radius: 8px;
         max-width: 80%;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-        z-index: 100;
         display: none;
       }
-      .custom-controls {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        z-index: 20;
-        transition: opacity 0.2s ease;
-        opacity: 0;
       }
-      .player-container:hover .custom-controls {
-        opacity: 1;
       }
-      .control-button {
         width: 40px;
         height: 40px;
         border-radius: 50%;
-        background: rgba(0, 0, 0, 0.6);
-        backdrop-filter: blur(5px);
-        color: white;
-        border: none;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        transition: all 0.2s ease;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
       }
-      .control-button:hover {
-        background: var(--primary-color);
         transform: scale(1.1);
       }
-      .control-button i {
         font-size: 16px;
       }
-      .plyr--full-ui input[type=range] {
-        color: var(--primary-color);
       }
-      .plyr__control--overlaid {
-        background: var(--primary-color);
       }
-      .plyr--video .plyr__control.plyr__tab-focus,
-      .plyr--video .plyr__control:hover,
-      .plyr--video .plyr__control[aria-expanded=true] {
-        background: var(--secondary-color);
       }
-      .plyr__control.plyr__tab-focus {
-        box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.35);
       }
-      .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
-        background: var(--primary-color);
       }
-      .loading-overlay {
         position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(13, 17, 23, 0.85);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 30;
       }
-      .spinner {
-        width: 50px;
-        height: 50px;
-        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);
-        }
       }
       @media (max-width: 768px) {
-        .video-title {
-          font-size: 16px;
-          padding: 10px 15px;
-        }
-        .control-button {
           width: 36px;
           height: 36px;
         }
-      }
-      @media (max-width: 480px) {
-        .video-title {
-          font-size: 14px;
-          padding: 8px 12px;
         }
-        .control-button {
           width: 32px;
           height: 32px;
         }
-        .control-button i {
           font-size: 14px;
         }
       }
     </style>
   </head>
   <body>
     <div class="player-container">
-      <div class="video-title">Your Media Title</div>
-      <video id="stream-media" controls crossorigin playsinline>
         <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 class="custom-controls">
-        <button class="control-button download-button" title="Download">
-          <i class="fas fa-download"></i>
-        </button>
-        <button class="control-button share-button" title="Share">
-          <i class="fas fa-share-alt"></i>
-        </button>
-        <button class="control-button favorite-button" title="Add to favorites">
-          <i class="far fa-heart"></i>
-        </button>
       </div>
-      <div id="error-message"></div>
-      <div class="loading-overlay">
-        <div class="spinner"></div>
       </div>
     </div>
     <script>
-      // Initialize variables
-      let mediaLink = "";
-      let mediaTitle = "Your Media Title";
-      let mediaType = "video/mp4";
-      const urlParams = new URLSearchParams(window.location.search);
-      // Get media link from URL parameter or set default
-      if (urlParams.has('src')) {
-        mediaLink = decodeURIComponent(urlParams.get('src'));
-      }
-      // Get optional media title
-      if (urlParams.has('title')) {
-        mediaTitle = decodeURIComponent(urlParams.get('title'));
-        document.querySelector('.video-title').textContent = mediaTitle;
-        document.title = mediaTitle + " - Ultra Media Player";
-      }
-      // Get optional media type
-      if (urlParams.has('type')) {
-        mediaType = decodeURIComponent(urlParams.get('type'));
-      }
-      // Initialize the player 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,
-        volume: 1,
-        muted: false,
-        keyboard: { focused: true, global: true },
-        tooltips: { controls: true, seek: true },
-        resetOnEnd: false,
-        displayDuration: true,
-        invertTime: true,
-        toggleInvert: true,
-        ratio: '16:9',
-        autoplay: false,
-        clickToPlay: true,
-      });
-      // Function to show error message
-      function showError(message) {
-        const errorElement = document.getElementById('error-message');
-        errorElement.textContent = message;
-        errorElement.style.display = 'block';
-        document.querySelector('.loading-overlay').style.display = 'none';
-      }
-      // Function to handle media loading
-      function loadMedia() {
         if (mediaLink) {
-          const sourceElement = document.querySelector('#stream-media source');
-          sourceElement.setAttribute('src', mediaLink);
-          sourceElement.setAttribute('type', mediaType);
-          player.source = {
-            type: 'video',
-            sources: [
-              {
-                src: mediaLink,
-                type: mediaType,
-              },
-            ],
           };
-          // Hide loading overlay after the media loads
-          player.on('ready', function() {
-            document.querySelector('.loading-overlay').style.display = 'none';
-          });
-          // Handle loading error
-          player.on('error', function() {
-            showError('Error: Unable to load media. Please check the URL and try again.');
           });
-          // Set timeout for loading
-          setTimeout(function() {
-            if (player.loading) {
-              showError('Error: Media loading timeout. Please check your connection and try again.');
             }
-          }, 15000);
-        } else {
-          showError('Error: Media URL not provided. Please add a "src" parameter to the URL.');
-        }
-      }
-      // Set up download button functionality
-      document.querySelector('.download-button').addEventListener('click', function(event) {
-        event.stopPropagation();
-        if (mediaLink) {
-          const link = document.createElement('a');
-          link.href = mediaLink;
-          link.download = mediaTitle || "download";
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
-        } else {
-          showError('Error: No media available to download');
-        }
-      });
-      // Set up share button functionality
-      document.querySelector('.share-button').addEventListener('click', function(event) {
-        event.stopPropagation();
-        if (navigator.share && mediaLink) {
-          navigator.share({
-            title: mediaTitle,
-            url: window.location.href
-          }).catch(err => {
-            console.error('Share failed:', err);
           });
-        } else {
-          // Fallback for browsers that don't support Web Share API
-          const currentUrl = window.location.href;
-          navigator.clipboard.writeText(currentUrl).then(() => {
-            alert('Link copied to clipboard!');
-          }).catch(err => {
-            console.error('Failed to copy link:', err);
           });
-        }
-      });
-      // Set up favorite button functionality
-      let isFavorite = false;
-      document.querySelector('.favorite-button').addEventListener('click', function(event) {
-        event.stopPropagation();
-        isFavorite = !isFavorite;
-        const icon = this.querySelector('i');
-        if (isFavorite) {
-          icon.classList.remove('far');
-          icon.classList.add('fas');
-          icon.style.color = '#ef476f';
-          // Save to localStorage or your preferred storage method
-          try {
-            const favorites = JSON.parse(localStorage.getItem('mediaFavorites')) || [];
-            favorites.push({
-              url: mediaLink,
-              title: mediaTitle,
-              timestamp: new Date().toISOString()
-            });
-            localStorage.setItem('mediaFavorites', JSON.stringify(favorites));
-          } catch (e) {
-            console.error('Error saving favorite:', e);
-          }
-        } else {
-          icon.classList.remove('fas');
-          icon.classList.add('far');
-          icon.style.color = '';
-          // Remove from localStorage
-          try {
-            const favorites = JSON.parse(localStorage.getItem('mediaFavorites')) || [];
-            const updatedFavorites = favorites.filter(fav => fav.url !== mediaLink);
-            localStorage.setItem('mediaFavorites', JSON.stringify(updatedFavorites));
-          } catch (e) {
-            console.error('Error removing favorite:', e);
-          }
         }
-      });
-      // Keyboard shortcuts
-      document.addEventListener('keydown', function(event) {
-        // Space already handled by Plyr for play/pause
-        // D for download (when not typing in an input)
-        if (event.key === 'd' && document.activeElement.tagName !== 'INPUT') {
-          document.querySelector('.download-button').click();
         }
-        // S for share (when not typing in an input)
-        if (event.key === 's' && document.activeElement.tagName !== 'INPUT') {
-          document.querySelector('.share-button').click();
-        }
-        // F for favorite (when not typing in an input)
-        if (event.key === 'f' && document.activeElement.tagName !== 'INPUT') {
-          document.querySelector('.favorite-button').click();
-        }
       });
-      // Check if we're in a mobile context
-      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-      if (isMobile) {
-        document.documentElement.classList.add('mobile');
-      }
-      // Start loading the media
-      loadMedia();
     </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">
     <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);
       }
       * {
       html, body {
         margin: 0;
         height: 100%;
+        font-family: 'Roboto', Arial, sans-serif;
+        background-color: var(--background-color);
         overflow: hidden;
       }
         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 {
         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>