Spaces:

jerrrycans
/

file2

Sleeping

App Files Files Community

jerrrycans commited on Mar 11, 2025

Commit

d3b3ae2

verified ·

1 Parent(s): eb43b1b

Update bot/server/templates/player.html

Browse files

Files changed (1) hide show

bot/server/templates/player.html +457 -424

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

 <!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">
     <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
     <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
     <style>
+        :root {
+            --primary-color: #6366f1;
+            --primary-hover: #4f46e5;
+            --dark-bg: #0f172a;
+            --light-text: #f8fafc;
+            --medium-bg: #1e293b;
+            --accent-color: #ec4899;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --error-color: #ef4444;
+            --transition-time: 0.3s;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        html, body {
+            margin: 0;
+            height: 100%;
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--dark-bg);
+            color: var(--light-text);
+        }
+        .player-container {
+            height: 100%;
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+        }
+        .video-info {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
+            padding: 15px 20px;
+            z-index: 20;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            opacity: 1;
+            transition: opacity 0.3s ease;
+        }
+        .video-title {
+            font-size: 1.2rem;
+            font-weight: 500;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 80%;
+        }
+        #stream-media {
+            height: 100%;
+            width: 100%;
+            border-radius: 8px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+        #error-message {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(239, 68, 68, 0.9);
+            color: white;
+            padding: 15px 25px;
+            border-radius: 8px;
+            font-size: 18px;
+            font-weight: 500;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            z-index: 30;
+            display: none;
+            animation: fadeIn 0.3s ease-out;
+            text-align: center;
+            max-width: 80%;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translate(-50%, -40%); }
+            to { opacity: 1; transform: translate(-50%, -50%); }
+        }
+        .custom-controls {
+            position: absolute;
+            left: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            z-index: 15;
+            opacity: 0;
+            transition: opacity var(--transition-time) ease;
+        }
+        .player-container:hover .custom-controls,
+        .player-container:hover .video-info {
+            opacity: 1;
+        }
+        .control-button {
+            width: 45px;
+            height: 45px;
+            border-radius: 50%;
+            background-color: rgba(15, 23, 42, 0.85);
+            border: 2px solid var(--primary-color);
+            color: var(--light-text);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all var(--transition-time) ease;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+        }
+        .control-button:hover {
+            background-color: var(--primary-color);
+            transform: scale(1.1);
+        }
+        .control-button i {
+            font-size: 18px;
+        }
+        /* Plyr customization */
+        .plyr--full-ui input[type=range] {
+            color: var(--primary-color);
+        }
+        .plyr--video .plyr__control--overlaid {
+            background: var(--primary-color);
+        }
+        .plyr--video .plyr__control--overlaid:hover {
+            background: var(--primary-hover);
+        }
+        .plyr--video .plyr__control.plyr__tab-focus,
+        .plyr--video .plyr__control:hover,
+        .plyr--video .plyr__control[aria-expanded=true] {
+            background: var(--primary-color);
+        }
+        .plyr__control.plyr__tab-focus {
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
+        }
+        .plyr__menu__container .plyr__control--forward.plyr__tab-focus,
+        .plyr__menu__container .plyr__control--forward:hover {
+            color: var(--primary-color);
+        }
+        .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
+            background: var(--primary-color);
+        }
+        .plyr--full-ui.plyr--video .plyr__control--overlaid {
+            padding: 18px;
+        }
+        .plyr--full-ui.plyr--video .plyr__control--overlaid svg {
+            width: 24px;
+            height: 24px;
+        }
+        .plyr__progress input[type=range],
+        .plyr__progress__buffer {
+            height: 6px;
+        }
+        .plyr--full-ui input[type=range] {
+            height: 6px;
+        }
+        .plyr__volume input[type=range] {
+            height: 6px;
+        }
+        .plyr--audio .plyr__control.plyr__tab-focus,
+        .plyr--audio .plyr__control:hover,
+        .plyr--audio .plyr__control[aria-expanded=true] {
+            background: var(--primary-color);
+        }
+        .plyr__control--overlaid {
+            transform: scale(1.1);
+            transition: transform 0.2s ease;
+        }
+        .plyr__control--overlaid:hover {
+            transform: scale(1.2);
+        }
+        .plyr__controls {
+            padding: 15px !important;
+            border-radius: 0 0 8px 8px;
+            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
+        }
+        .plyr__time {
+            font-weight: 500;
+            font-size: 14px;
+        }
+        /* Loading animation */
+        .loader {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 70px;
+            height: 70px;
+            display: none;
+            z-index: 25;
+        }
+        .loader-circle {
+            width: 100%;
+            height: 100%;
+            border: 5px solid rgba(255, 255, 255, 0.2);
+            border-top: 5px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1.5s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .custom-controls {
+                left: 15px;
+            }
+            .control-button {
+                width: 40px;
+                height: 40px;
+            }
+            .video-title {
+                font-size: 1rem;
+            }
+            .video-info {
+                padding: 10px 15px;
+            }
+        }
+        @media (max-width: 480px) {
+            .custom-controls {
+                left: 10px;
+            }
+            .control-button {
+                width: 35px;
+                height: 35px;
+            }
+            .control-button i {
+                font-size: 15px;
+            }
+            .video-title {
+                font-size: 0.9rem;
+                max-width: 65%;
+            }
+        }
     </style>
+</head>
+<body>
     <div class="player-container">
+        <div class="video-info">
+            <div class="video-title">Now Playing: Demo Video</div>
+            <div class="video-time" id="video-time"></div>
+        </div>
+        <video id="stream-media" controls preload="auto" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080' preserveAspectRatio='none'%3E%3Crect width='100%25' height='100%25' fill='%231e293b'/%3E%3C/svg%3E">
+            <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
+            <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" id="download-button">
+                <i class="fas fa-download"></i>
+            </button>
+            <button class="control-button" id="share-button">
+                <i class="fas fa-share-alt"></i>
+            </button>
+        </div>
+        <div class="loader">
+            <div class="loader-circle"></div>
+        </div>
+        <div id="error-message"></div>
     </div>
     <script>
+        // Initialize Plyr
+        var player = new Plyr('#stream-media', {
+            controls: ['play-large', 'rewind', 'play', 'fast-forward', 'progress', 'current-time', 'mute', 'settings', 'pip', 'fullscreen'],
+            settings: ['speed', 'loop', 'quality'],
+            speed: {selected: 1, options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]},
+            seek: 10,
+            keyboard: { focused: true, global: true },
+            tooltips: { controls: true, seek: true },
+            captions: { active: true, update: true },
+            quality: { default: 576, options:[2160][1440][1080][720][576][480][360][240] }
+        });
+        var mediaLink = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4";
+        var videoTitle = "Demo Video";
+        // Set video title if provided
+        if (videoTitle) {
+            document.querySelector('.video-title').textContent = "Now Playing: " + videoTitle;
+        }
+        // Show loading animation
+        function showLoader() {
+            document.querySelector('.loader').style.display = 'block';
+        }
+        // Hide loading animation
+        function hideLoader() {
+            document.querySelector('.loader').style.display = 'none';
+        }
+        // Show error message
+        function showError(message) {
+            const errorElement = document.getElementById('error-message');
+            errorElement.textContent = message;
+            errorElement.style.display = 'block';
+            // Hide error after 5 seconds
+            setTimeout(() => {
+                errorElement.style.display = 'none';
+            }, 5000);
+        }
+        // Update video time display
+        player.on('timeupdate', () => {
+            const currentTime = player.currentTime;
+            const duration = player.duration;
+            if (!isNaN(duration) && isFinite(duration)) {
+                const minutes = Math.floor(duration / 60);
+                const seconds = Math.floor(duration % 60);
+                document.getElementById('video-time').textContent =
+                    `${Math.floor(currentTime / 60)}:${Math.floor(currentTime % 60).toString().padStart(2, '0')} / ${minutes}:${seconds.toString().padStart(2, '0')}`;
+            }
+        });
+        // Handle events
+        player.on('ready', () => {
+            hideLoader();
+        });
+        player.on('loading', () => {
+            showLoader();
+        });
+        player.on('error', () => {
+            hideLoader();
+            showError('Error: Could not load the video');
+        });
+        // Process media link
+        if (mediaLink) {
+            showLoader();
+            document.querySelector('#stream-media source').setAttribute('src', mediaLink);
+            // Try to determine the type from the URL
+            const fileExtension = mediaLink.split('.').pop().toLowerCase();
+            let mimeType = '';
+            switch(fileExtension) {
+                case 'mp4':
+                    mimeType = 'video/mp4';
+                    break;
+                case 'webm':
+                    mimeType = 'video/webm';
+                    break;
+                case 'ogg':
+                case 'ogv':
+                    mimeType = 'video/ogg';
+                    break;
+                case 'mov':
+                    mimeType = 'video/quicktime';
+                    break;
+                case 'm3u8':
+                    mimeType = 'application/x-mpegURL';
+                    break;
+                case 'mpd':
+                    mimeType = 'application/dash+xml';
+                    break;
             }
+            if (mimeType) {
+                document.querySelector('#stream-media source').setAttribute('type', mimeType);
+            }
+            player.source = {
+                type: 'video',
+                sources: [{
+                    src: mediaLink,
+                    type: mimeType
+                }]
+            };
+            // Set up download button
+            document.getElementById('download-button').addEventListener('click', function(event) {
+                event.stopPropagation();
+                var link = document.createElement('a');
+                link.href = mediaLink;
+                link.download = videoTitle || 'download';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            });
+            // Set up share button
+            document.getElementById('share-button').addEventListener('click', function(event) {
+                event.stopPropagation();
+                if (navigator.share) {
+                    navigator.share({
+                        title: videoTitle || "Shared Video",
+                        url: mediaLink
+                    }).catch(err => {
+                        console.error("Share error:", err);
+                    });
+                } else {
+                    // Fallback for browsers that don't support Web Share API
+                    navigator.clipboard.writeText(mediaLink).then(() => {
+                        showError("Link copied to clipboard!");
+                    }).catch(err => {
+                        console.error("Clipboard error:", err);
+                    });
+                }
+            });
+        } else {
+            hideLoader();
+            showError('Error: Media URL not provided');
+        }
     </script>
+</body>
 </html>