Update bot/server/templates/player.html

bot/server/templates/player.html

@@ -5,53 +5,75 @@
 
     <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.2/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
+    <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 {
-        --main-color: #3498db;
-        --secondary-color: #2ecc71;
-        --text-color: #ecf0f1;
-        --dark-bg: #1a1a1a;
-        --hover-color: #e74c3c;
-        --gradient-start: #3498db;
-        --gradient-end: #8e44ad;
+        --primary-color: #3a86ff;
+        --secondary-color: #8338ec;
+        --dark-color: #0d1117;
+        --light-color: #f8f9fa;
+        --success-color: #06d6a0;
+        --warning-color: #ffbe0b;
+        --danger-color: #ef476f;
       }
 
       * {
-        box-sizing: border-box;
         margin: 0;
         padding: 0;
+        box-sizing: border-box;
       }
 
       html, body {
         margin: 0;
         height: 100%;
-        font-family: 'Montserrat', sans-serif;
-        background-color: var(--dark-bg);
-        color: var(--text-color);
+        font-family: 'Poppins', sans-serif;
+        background-color: var(--dark-color);
+        color: var(--light-color);
         overflow: hidden;
       }
 
       .player-container {
+        position: relative;
         height: 100%;
         width: 100%;
-        position: relative;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-        overflow: hidden;
-        border-radius: 4px;
+        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%;
-        background-color: #000;
+        max-height: 100vh;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
       }
 
       #error-message {
@@ -59,228 +81,134 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        color: var(--hover-color);
-        font-size: 1.5rem;
+        color: var(--danger-color);
+        font-size: 18px;
         text-align: center;
-        background-color: rgba(0, 0, 0, 0.8);
-        padding: 20px;
-        border-radius: 10px;
-        box-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
-        z-index: 100;
+        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-control {
+      .custom-controls {
         position: absolute;
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
+        top: 10px;
+        right: 10px;
         display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--text-color);
-        z-index: 10;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-        opacity: 0.9;
+        flex-direction: column;
+        gap: 10px;
+        z-index: 20;
+        transition: opacity 0.2s ease;
+        opacity: 0;
       }
 
-      .custom-control:hover {
-        transform: scale(1.1);
+      .player-container:hover .custom-controls {
         opacity: 1;
       }
 
-      .plyr-download-button {
-        top: 20px;
-        right: 20px;
-      }
-
-      .plyr-share-button {
-        top: 20px;
-        right: 90px;
-      }
-
-      .plyr-info-button {
-        top: 20px;
-        right: 160px;
+      .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-tooltip {
-        position: absolute;
-        background-color: rgba(0, 0, 0, 0.8);
-        color: white;
-        padding: 5px 10px;
-        border-radius: 4px;
-        font-size: 12px;
-        bottom: -35px;
-        left: 50%;
-        transform: translateX(-50%);
-        white-space: nowrap;
-        opacity: 0;
-        transition: opacity 0.2s ease;
-        pointer-events: none;
+      .control-button:hover {
+        background: var(--primary-color);
+        transform: scale(1.1);
       }
 
-      .custom-control:hover .control-tooltip {
-        opacity: 1;
+      .control-button i {
+        font-size: 16px;
       }
 
       .plyr--full-ui input[type=range] {
-        color: var(--main-color);
+        color: var(--primary-color);
       }
 
       .plyr__control--overlaid {
-        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-      }
-
-      .plyr--video .plyr__control:hover {
-        background: var(--secondary-color);
+        background: var(--primary-color);
       }
 
       .plyr--video .plyr__control.plyr__tab-focus,
-      .plyr__control--overlaid:focus,
-      .plyr__control--overlaid:hover {
-        background: var(--hover-color);
+      .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 5px rgba(52, 152, 219, 0.5);
-      }
-
-      .plyr__menu__container .plyr__control.plyr__tab-focus,
-      .plyr__menu__container .plyr__control:hover,
-      .plyr__menu__container .plyr__control[aria-expanded=true] {
-        background: var(--main-color);
-      }
-
-      .plyr--audio .plyr__control.plyr__tab-focus,
-      .plyr--audio .plyr__control:hover,
-      .plyr--audio .plyr__control[aria-expanded=true] {
-        background: var(--main-color);
+        box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.35);
       }
 
-      .plyr__control--overlaid {
-        padding: 25px;
-      }
-
-      .plyr--video .plyr__controls {
-        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
-      }
-
-      .plyr--full-ui.plyr--video .plyr__control--overlaid {
-        opacity: 0.9;
+      .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
+        background: var(--primary-color);
       }
 
-      /* Loading animation */
       .loading-overlay {
         position: absolute;
         top: 0;
         left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.8);
+        width: 100%;
+        height: 100%;
+        background-color: rgba(13, 17, 23, 0.85);
         display: flex;
         justify-content: center;
         align-items: center;
-        z-index: 9;
+        z-index: 30;
       }
 
-      .loader {
+      .spinner {
         width: 50px;
         height: 50px;
-        border: 5px solid rgba(255, 255, 255, 0.3);
+        border: 5px solid rgba(255, 255, 255, 0.1);
         border-radius: 50%;
-        border-top-color: var(--main-color);
+        border-top-color: var(--primary-color);
         animation: spin 1s ease-in-out infinite;
       }
 
       @keyframes spin {
-        to { transform: rotate(360deg); }
-      }
-
-      /* Media info panel */
-      .media-info-panel {
-        position: absolute;
-        top: 0;
-        right: -350px;
-        width: 350px;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.85);
-        transition: right 0.3s ease;
-        z-index: 20;
-        overflow-y: auto;
-        padding: 20px;
-        backdrop-filter: blur(10px);
-      }
-
-      .media-info-panel.active {
-        right: 0;
-      }
-
-      .info-close {
-        position: absolute;
-        top: 15px;
-        right: 15px;
-        font-size: 20px;
-        cursor: pointer;
-        color: var(--text-color);
-      }
-
-      .info-heading {
-        color: var(--main-color);
-        margin-bottom: 20px;
-        font-size: 1.5rem;
-        border-bottom: 2px solid var(--main-color);
-        padding-bottom: 10px;
-      }
-
-      .info-group {
-        margin-bottom: 15px;
-      }
-
-      .info-label {
-        color: var(--secondary-color);
-        font-size: 0.9rem;
-        margin-bottom: 5px;
-        font-weight: 600;
-      }
-
-      .info-value {
-        font-size: 0.85rem;
-        line-height: 1.4;
-        word-break: break-word;
-      }
-
-      .plyr, .plyr__video-wrapper, .plyr__video-embed iframe {
-        height: 100%;
+        to {
+          transform: rotate(360deg);
+        }
       }
 
-      /* Mobile responsiveness */
       @media (max-width: 768px) {
-        .custom-control {
-          width: 40px;
-          height: 40px;
+        .video-title {
+          font-size: 16px;
+          padding: 10px 15px;
         }
-
-        .plyr-download-button {
-          right: 15px;
-          top: 15px;
+        
+        .control-button {
+          width: 36px;
+          height: 36px;
         }
-
-        .plyr-share-button {
-          right: 70px;
-          top: 15px;
+      }
+      
+      @media (max-width: 480px) {
+        .video-title {
+          font-size: 14px;
+          padding: 8px 12px;
         }
-
-        .plyr-info-button {
-          right: 125px;
-          top: 15px;
+        
+        .control-button {
+          width: 32px;
+          height: 32px;
         }
-
-        .media-info-panel {
-          width: 280px;
+        
+        .control-button i {
+          font-size: 14px;
         }
       }
     </style>
@@ -288,234 +216,242 @@
 
   <body>
     <div class="player-container">
-      <video id="stream-media" controls preload="auto">
+      <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 id="loading-overlay" class="loading-overlay">
-        <div class="loader"></div>
-      </div>
-
-      <div id="media-info-panel" class="media-info-panel">
-        <div class="info-close" id="info-close"><i class="fas fa-times"></i></div>
-        <h3 class="info-heading">Media Information</h3>
-        <div class="info-group">
-          <div class="info-label">File Name</div>
-          <div class="info-value" id="info-filename">Loading...</div>
-        </div>
-        <div class="info-group">
-          <div class="info-label">Resolution</div>
-          <div class="info-value" id="info-resolution">Loading...</div>
-        </div>
-        <div class="info-group">
-          <div class="info-label">Duration</div>
-          <div class="info-value" id="info-duration">Loading...</div>
-        </div>
-        <div class="info-group">
-          <div class="info-label">Media URL</div>
-          <div class="info-value" id="info-url">Loading...</div>
-        </div>
-        <div class="info-group">
-          <div class="info-label">Playback Speed</div>
-          <div class="info-value" id="info-speed">1x</div>
-        </div>
+      
+      <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>
-      document.addEventListener('DOMContentLoaded', function() {
-        const loadingOverlay = document.getElementById('loading-overlay');
-        
-        // Initialize player with more 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,
-          invertTime: false,
-          toggleInvert: true,
-          storage: { enabled: true, key: 'ultra-player-settings' }
-        });
-
-        // Extract the media link
-        let mediaLink = "";
-        try {
-          // In a real implementation, this would be replaced by server-side templating
-          const urlParams = new URLSearchParams(window.location.search);
-          mediaLink = urlParams.get('mediaLink') || "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
-        } catch (e) {
-          mediaLink = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
-        }
+      // 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';
+      }
 
-        // Setup the media source
+      // Function to handle media loading
+      function loadMedia() {
         if (mediaLink) {
-          document.querySelector('#stream-media source').setAttribute('src', mediaLink);
+          const sourceElement = document.querySelector('#stream-media source');
+          sourceElement.setAttribute('src', mediaLink);
+          sourceElement.setAttribute('type', mediaType);
           
-          // Create custom download button
-          const downloadButton = document.createElement('div');
-          downloadButton.className = 'custom-control plyr-download-button';
-          downloadButton.innerHTML = '<i class="fas fa-download"></i><span class="control-tooltip">Download</span>';
-          downloadButton.onclick = function(event) {
-            event.stopPropagation();
-            const link = document.createElement('a');
-            link.href = mediaLink;
-            link.download = getFileName(mediaLink);
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-          };
-
-          // Create custom share button
-          const shareButton = document.createElement('div');
-          shareButton.className = 'custom-control plyr-share-button';
-          shareButton.innerHTML = '<i class="fas fa-share-alt"></i><span class="control-tooltip">Share</span>';
-          shareButton.onclick = function(event) {
-            event.stopPropagation();
-            if (navigator.share) {
-              navigator.share({
-                title: "Ultra Media Player",
-                text: "Check out this media!",
-                url: mediaLink
-              });
-            } else {
-              // Fallback for browsers that don't support Web Share API
-              prompt("Copy this link to share:", window.location.href);
-            }
-          };
-
-          // Create info button
-          const infoButton = document.createElement('div');
-          infoButton.className = 'custom-control plyr-info-button';
-          infoButton.innerHTML = '<i class="fas fa-info"></i><span class="control-tooltip">Info</span>';
-          infoButton.onclick = function(event) {
-            event.stopPropagation();
-            document.getElementById('media-info-panel').classList.add('active');
-            updateMediaInfo();
-          };
-
-          // Append custom controls
-          const playerContainer = player.elements.container.querySelector('.plyr__video-wrapper');
-          playerContainer.appendChild(downloadButton);
-          playerContainer.appendChild(shareButton);
-          playerContainer.appendChild(infoButton);
-
-          // Close info panel
-          document.getElementById('info-close').addEventListener('click', function() {
-            document.getElementById('media-info-panel').classList.remove('active');
-          });
-
-          // Update player
           player.source = {
             type: 'video',
-            sources: [{
-              src: mediaLink,
-              type: getMediaType(mediaLink)
-            }]
+            sources: [
+              {
+                src: mediaLink,
+                type: mediaType,
+              },
+            ],
           };
-
-          // Handle player events
+          
+          // Hide loading overlay after the media loads
           player.on('ready', function() {
-            loadingOverlay.style.display = 'none';
-            updateMediaInfo();
-          });
-
-          player.on('error', function(error) {
-            loadingOverlay.style.display = 'none';
-            document.getElementById('error-message').textContent = 'Error loading media: ' + error.detail.message;
+            document.querySelector('.loading-overlay').style.display = 'none';
           });
-
-          player.on('ratechange', function() {
-            document.getElementById('info-speed').textContent = player.speed + 'x';
+          
+          // 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 {
-          loadingOverlay.style.display = 'none';
-          document.getElementById('error-message').textContent = 'Error: Media URL not provided';
+          showError('Error: Media URL not provided. Please add a "src" parameter to the URL.');
         }
+      }
 
-        // Helper functions
-        function getFileName(url) {
-          const segments = url.split('/');
-          return segments[segments.length - 1].split('?')[0];
+      // 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');
         }
+      });
 
-        function getMediaType(url) {
-          const extension = url.split('.').pop().toLowerCase();
-          const videoTypes = {
-            'mp4': 'video/mp4',
-            'webm': 'video/webm',
-            'mov': 'video/quicktime',
-            'avi': 'video/x-msvideo',
-            'mkv': 'video/x-matroska'
-          };
-          
-          const audioTypes = {
-            'mp3': 'audio/mpeg',
-            'wav': 'audio/wav',
-            'ogg': 'audio/ogg',
-            'm4a': 'audio/mp4',
-            'flac': 'audio/flac'
-          };
-          
-          return videoTypes[extension] || audioTypes[extension] || '';
+      // 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);
+          });
         }
+      });
 
-        function formatTime(seconds) {
-          if (isNaN(seconds)) return '00:00';
+      // 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';
           
-          const hours = Math.floor(seconds / 3600);
-          const minutes = Math.floor((seconds % 3600) / 60);
-          const secs = Math.floor(seconds % 60);
+          // 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 = '';
           
-          if (hours > 0) {
-            return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
-          } else {
-            return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+          // 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);
           }
         }
+      });
 
-        function updateMediaInfo() {
-          document.getElementById('info-filename').textContent = getFileName(mediaLink);
-          document.getElementById('info-url').textContent = mediaLink;
-          
-          // Get video dimensions when available
-          if (player.media && player.media.videoWidth && player.media.videoHeight) {
-            document.getElementById('info-resolution').textContent = `${player.media.videoWidth}x${player.media.videoHeight}`;
-          } else {
-            document.getElementById('info-resolution').textContent = 'Unknown';
-          }
-          
-          // Get duration when available
-          if (player.duration) {
-            document.getElementById('info-duration').textContent = formatTime(player.duration);
-          } else {
-            document.getElementById('info-duration').textContent = 'Unknown';
-          }
+      // 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>