Spaces:

inoculatemedia
/

hls-player-and-recorder

Running

App Files Files Community

inoculatemedia commited on Apr 26

Commit

d3ec1a2

verified ·

1 Parent(s): c692dcf

Add 2 files

Browse files

Files changed (2) hide show

index.html +533 -318
prompts.txt +1 -0

index.html CHANGED Viewed

@@ -3,400 +3,615 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>NHLS Video Player with Save Feature</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        /* Custom CSS for video player */
-        .video-container {
             position: relative;
-            max-width: 800px;
-            margin: 0 auto;
-            background-color: #000;
-            border-radius: 12px;
             overflow: hidden;
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
         }
-        .video-controls {
             position: absolute;
             bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 10px;
-            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
-            opacity: 0;
-            transition: opacity 0.3s;
-        }
-        .video-container:hover .video-controls {
-            opacity: 1;
-        }
-        .progress-container {
-            height: 5px;
-            background-color: rgba(255, 255, 255, 0.2);
-            border-radius: 3px;
-            cursor: pointer;
         }
-        .progress-bar {
             height: 100%;
-            background-color: #3b82f6;
-            border-radius: 3px;
-            width: 0%;
-        }
-        .volume-container {
-            width: 100px;
-        }
-        .volume-slider {
-            width: 0;
-            transition: width 0.2s;
-            overflow: hidden;
-        }
-        .volume-btn:hover + .volume-slider, .volume-slider:hover {
-            width: 100px;
         }
-        /* Animation for download button */
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.1); }
-            100% { transform: scale(1); }
         }
-        .download-btn:hover {
-            animation: pulse 1s infinite;
         }
-        /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
         }
-        ::-webkit-scrollbar-track {
-            background: #f1f1f1;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #888;
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #555;
         }
     </style>
-   <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
-<!-- Or if you want the latest version from the main branch -->
-<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
-<script>
-  var video = document.getElementById('video-player');
-  var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
-  if (Hls.isSupported()) {
-    var hls = new Hls();
-    hls.loadSource(videoSrc);
-    hls.attachMedia(video);
-  }
-  // HLS.js is not supported on platforms that do not have Media Source
-  // Extensions (MSE) enabled.
-  //
-  // When the browser has built-in HLS support (check using `canPlayType`),
-  // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
-  // element through the `src` property. This is using the built-in support
-  // of the plain video element, without using HLS.js.
-  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-    video.src = videoSrc;
-  }
-</script>
 </head>
-<body class="bg-gray-900 text-white min-h-screen flex flex-col">
-    <header class="bg-gray-800 py-4 px-6 shadow-lg">
-        <div class="container mx-auto flex justify-between items-center">
-            <div class="flex items-center space-x-2">
-                <i class="fas fa-play-circle text-blue-500 text-3xl"></i>
-                <h1 class="text-2xl font-bold">HLS Video Player</h1>
-            </div>
-            <div class="flex items-center space-x-4">
-                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700">
-                    <i class="fas fa-moon"></i>
                 </button>
             </div>
         </div>
-    </header>
-    <main class="flex-grow container mx-auto px-4 py-8">
-        <div class="video-container group">
-            <video autoplay muted id="video-player" class="w-full" poster="https://via.placeholder.com/800x450/1e293b/64748b?text=NHLS+Video+Player">
-                Your browser does not support the video tag.
-            </video>
-            <div class="video-controls">
-                <div class="flex items-center mb-2 px-2">
-                    <div class="progress-container flex-grow mx-2">
-                        <div class="progress-bar"></div>
                     </div>
-                    <span class="time-display text-sm w-20 text-right">
-                        <span class="current-time">00:00</span> / <span class="duration">00:00</span>
-                    </span>
-                </div>
-                <div class="flex items-center justify-between px-2">
-                    <div class="flex items-center space-x-4">
-                        <button id="play-pause" class="text-white hover:text-blue-400">
-                            <i class="fas fa-play"></i>
-                        </button>
-                        <div class="flex items-center volume-control">
-                            <button class="volume-btn text-white hover:text-blue-400">
-                                <i class="fas fa-volume-up"></i>
-                            </button>
-                            <div class="volume-slider ml-2">
-                                <input type="range" min="0" max="1" step="0.01" value="1" class="w-full">
                             </div>
                         </div>
                     </div>
-                    <div class="flex items-center space-x-4">
-                        <button id="fullscreen" class="text-white hover:text-blue-400">
-                            <i class="fas fa-expand"></i>
-                        </button>
-                        <button id="download-btn" class="download-btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-full flex items-center">
-                            <i class="fas fa-download mr-2"></i> Save MP4
-                        </button>
-                    </div>
                 </div>
-            </div>
-        </div>
-        <div class="max-w-4xl mx-auto mt-8">
-            <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
-                <h2 class="text-xl font-bold mb-4 flex items-center">
-                    <i class="fas fa-info-circle text-blue-500 mr-2"></i> Video Information
-                </h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <p class="text-gray-400">Title:</p>
-                        <p class="font-medium">Big Buck Bunny Sample Video</p>
                     </div>
-                    <div>
-                        <p class="text-gray-400">Duration:</p>
-                        <p class="font-medium"><span id="video-duration">00:00</span></p>
                     </div>
-                    <div>
-                        <p class="text-gray-400">Format:</p>
-                        <p class="font-medium">M3U8</p>
                     </div>
-                    <div>
-                        <p class="text-gray-400">Resolution:</p>
-                        <p class="font-medium">720p</p>
                     </div>
                 </div>
             </div>
-            <div class="bg-gray-800 rounded-lg p-6 shadow-lg mt-6">
-                <h2 class="text-xl font-bold mb-4 flex items-center">
-                    <i class="fas fa-cog text-blue-500 mr-2"></i> Settings
-                </h2>
-                <div class="space-y-4">
-                    <div>
-                        <label class="block text-gray-400 mb-2">Playback Speed</label>
-                        <select id="playback-speed" class="bg-gray-700 text-white rounded px-3 py-2 w-full md:w-64">
-                            <option value="0.5">0.5x</option>
-                            <option value="0.75">0.75x</option>
-                            <option value="1" selected>1x (Normal)</option>
-                            <option value="1.25">1.25x</option>
-                            <option value="1.5">1.5x</option>
-                            <option value="2">2x</option>
-                        </select>
                     </div>
-                    <div>
-                        <label class="flex items-center space-x-2">
-                            <input type="checkbox" id="autoplay" class="rounded text-blue-500">
-                            <span>Autoplay next video</span>
-                        </label>
                     </div>
                 </div>
-            </div>
-        </div>
-    </main>
-    <footer class="bg-gray-800 py-4 px-6">
-        <div class="container mx-auto text-center text-gray-400">
-            <p>©All rights reserved.</p>
         </div>
-    </footer>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            // Video player elements
-            const video = document.getElementById('video-player');
-            const playPauseBtn = document.getElementById('play-pause');
-            const progressBar = document.querySelector('.progress-bar');
-            const progressContainer = document.querySelector('.progress-container');
-            const currentTimeDisplay = document.querySelector('.current-time');
-            const durationDisplay = document.querySelector('.duration');
-            const volumeBtn = document.querySelector('.volume-btn');
-            const volumeSlider = document.querySelector('.volume-slider input');
-            const volumeIcon = document.querySelector('.volume-btn i');
-            const fullscreenBtn = document.getElementById('fullscreen');
-            const downloadBtn = document.getElementById('download-btn');
-            const playbackSpeed = document.getElementById('playback-speed');
-            const videoDuration = document.getElementById('video-duration');
-            const themeToggle = document.getElementById('theme-toggle');
-            // Format time as MM:SS
-            function formatTime(seconds) {
-                const minutes = Math.floor(seconds / 60);
-                const remainingSeconds = Math.floor(seconds % 60);
-                return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
-            }
-            // Update progress bar
-            function updateProgress() {
-                const progress = (video.currentTime / video.duration) * 100;
-                progressBar.style.width = `${progress}%`;
-                currentTimeDisplay.textContent = formatTime(video.currentTime);
             }
-            // Set video duration
-            function setVideoDuration() {
-                durationDisplay.textContent = formatTime(video.duration);
-                videoDuration.textContent = formatTime(video.duration);
             }
-            // Toggle play/pause
-            function togglePlayPause() {
-                if (video.paused) {
-                    video.play();
-                    playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
-                } else {
-                    video.pause();
-                    playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
                 }
             }
-            // Set progress on click
-            function setProgress(e) {
-                const width = this.clientWidth;
-                const clickX = e.offsetX;
-                const duration = video.duration;
-                video.currentTime = (clickX / width) * duration;
             }
-            // Set volume
-            function setVolume() {
-                video.volume = this.value;
-                if (video.volume === 0) {
-                    volumeIcon.className = 'fas fa-volume-mute';
-                } else if (video.volume < 0.5) {
-                    volumeIcon.className = 'fas fa-volume-down';
-                } else {
-                    volumeIcon.className = 'fas fa-volume-up';
                 }
             }
-            // Toggle mute
-            function toggleMute() {
-                if (video.volume > 0) {
-                    video.volume = 0;
-                    volumeSlider.value = 0;
-                    volumeIcon.className = 'fas fa-volume-mute';
-                } else {
-                    video.volume = 1;
-                    volumeSlider.value = 1;
-                    volumeIcon.className = 'fas fa-volume-up';
                 }
             }
-            // Toggle fullscreen
-            function toggleFullscreen() {
-                if (!document.fullscreenElement) {
-                    video.requestFullscreen().catch(err => {
-                        alert(`Error attempting to enable fullscreen: ${err.message}`);
-                    });
-                } else {
-                    document.exitFullscreen();
                 }
             }
-            // Download video
-            function downloadVideo() {
-                const videoSrc = video.querySelector('source').src;
-                const videoTitle = 'HLS_Video_' + new Date().toISOString().slice(0, 10) + '.mp4';
-                // Create download link
-                const link = document.createElement('a');
-                link.href = videoSrc;
-                link.download = videoTitle;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-                // Show download notification
-                const notification = document.createElement('div');
-                notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
-                notification.innerHTML = `
-                    <i class="fas fa-check-circle mr-2"></i>
-                    <span>Download started: ${videoTitle}</span>
-                `;
-                document.body.appendChild(notification);
-                setTimeout(() => {
-                    notification.classList.add('opacity-0', 'transition-opacity', 'duration-500');
-                    setTimeout(() => notification.remove(), 500);
-                }, 3000);
             }
-            // Change playback speed
-            function changePlaybackSpeed() {
-                video.playbackRate = this.value;
             }
-            // Toggle dark/light theme
-            function toggleTheme() {
-                const isDark = document.documentElement.classList.contains('dark');
-                if (isDark) {
-                    document.documentElement.classList.remove('dark');
-                    document.body.classList.remove('bg-gray-900');
-                    document.body.classList.add('bg-gray-100', 'text-gray-900');
-                    themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
                 } else {
-                    document.documentElement.classList.add('dark');
-                    document.body.classList.remove('bg-gray-100', 'text-gray-900');
-                    document.body.classList.add('bg-gray-900', 'text-white');
-                    themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
                 }
-            }
-            // Event listeners
-            video.addEventListener('click', togglePlayPause);
-            video.addEventListener('timeupdate', updateProgress);
-            video.addEventListener('loadedmetadata', setVideoDuration);
-            video.addEventListener('ended', () => {
-                playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
             });
-            playPauseBtn.addEventListener('click', togglePlayPause);
-            progressContainer.addEventListener('click', setProgress);
-            volumeSlider.addEventListener('input', setVolume);
-            volumeBtn.addEventListener('click', toggleMute);
-            fullscreenBtn.addEventListener('click', toggleFullscreen);
-            downloadBtn.addEventListener('click', downloadVideo);
-            playbackSpeed.addEventListener('change', changePlaybackSpeed);
-            themeToggle.addEventListener('click', toggleTheme);
-            // Initialize volume icon
-            setVolume.call(volumeSlider);
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=inoculatemedia/hls-player-and-recorder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advanced HLS Player with Recording & Upscaling</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .timeline-handle {
+            width: 12px;
+            height: 20px;
+            background-color: #3b82f6;
+            cursor: ew-resize;
+            position: absolute;
+            top: -4px;
+            z-index: 10;
+        }
+        .timeline-range {
+            background-color: rgba(59, 130, 246, 0.3);
+            height: 12px;
+            position: absolute;
+            top: 0;
+        }
+        .waveform {
+            background: linear-gradient(90deg, #4b5563 0%, #6b7280 100%);
+            height: 60px;
             position: relative;
             overflow: hidden;
         }
+        .waveform-bar {
+            background-color: #d1d5db;
+            width: 2px;
             position: absolute;
             bottom: 0;
         }
+        .progress-indicator {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 2px;
             height: 100%;
+            background-color: #ef4444;
+            z-index: 5;
         }
+        .upscale-preview {
+            transition: all 0.3s ease;
         }
+        .upscale-preview:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
         }
+        .glow {
+            animation: glow 2s infinite alternate;
         }
+        @keyframes glow {
+            from {
+                box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
+            }
+            to {
+                box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
+            }
         }
     </style>
 </head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <div class="flex justify-between items-center mb-8">
+            <h1 class="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
+                <i class="fas fa-video mr-2"></i>Advanced HLS Player
+            </h1>
+            <div class="flex space-x-4">
+                <button id="recordBtn" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg flex items-center">
+                    <i class="fas fa-circle mr-2"></i> Record
+                </button>
+                <button id="upscaleBtn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg flex items-center">
+                    <i class="fas fa-expand mr-2"></i> Upscale
                 </button>
             </div>
         </div>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Main Player Column -->
+            <div class="lg:col-span-2 space-y-6">
+                <!-- Video Player -->
+                <div class="relative bg-black rounded-xl overflow-hidden shadow-2xl">
+                    <video id="video" controls class="w-full aspect-video"></video>
+                    <div id="recordingIndicator" class="absolute top-4 right-4 bg-red-600 px-3 py-1 rounded-full hidden">
+                        <span class="flex items-center">
+                            <span class="h-2 w-2 bg-white rounded-full mr-2 animate-pulse"></span>
+                            REC
+                        </span>
                     </div>
+                    <div id="upscaleOverlay" class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden">
+                        <div class="text-center p-6 bg-gray-800 rounded-lg max-w-md">
+                            <div class="spinner mb-4">
+                                <i class="fas fa-spinner fa-spin text-4xl text-purple-500"></i>
+                            </div>
+                            <h3 class="text-xl font-bold mb-2">Upscaling Video</h3>
+                            <p class="text-gray-300">Processing with Real-ESRGAN...</p>
+                            <div class="w-full bg-gray-700 h-2 mt-4 rounded-full overflow-hidden">
+                                <div id="upscaleProgress" class="bg-purple-500 h-full" style="width: 0%"></div>
                             </div>
                         </div>
                     </div>
                 </div>
+                <!-- Timeline Controls -->
+                <div class="bg-gray-800 p-4 rounded-xl shadow-lg">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="font-semibold text-lg">
+                            <i class="fas fa-cut mr-2 text-blue-400"></i>Clip Editor
+                        </h3>
+                        <div class="flex space-x-2">
+                            <button id="setStartBtn" class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm">
+                                Set Start
+                            </button>
+                            <button id="setEndBtn" class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm">
+                                Set End
+                            </button>
+                            <button id="exportClipBtn" class="px-3 py-1 bg-green-600 hover:bg-green-700 rounded text-sm">
+                                Export Clip
+                            </button>
+                        </div>
                     </div>
+                    <div class="relative waveform rounded-lg mb-2">
+                        <div id="waveformBars"></div>
+                        <div id="progressIndicator" class="progress-indicator"></div>
+                        <div id="timelineRange" class="timeline-range hidden"></div>
+                        <div id="startHandle" class="timeline-handle hidden"></div>
+                        <div id="endHandle" class="timeline-handle hidden"></div>
                     </div>
+                    <div class="flex justify-between text-xs text-gray-400">
+                        <span id="currentTime">00:00:00</span>
+                        <span id="duration">00:00:00</span>
                     </div>
+                </div>
+                <!-- Stream Controls -->
+                <div class="bg-gray-800 p-4 rounded-xl shadow-lg">
+                    <h3 class="font-semibold text-lg mb-4">
+                        <i class="fas fa-stream mr-2 text-blue-400"></i>Stream Controls
+                    </h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <label class="block text-sm font-medium mb-1">HLS Stream URL</label>
+                            <div class="flex">
+                                <input id="streamUrl" type="text" value="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
+                                    class="flex-1 px-3 py-2 bg-gray-700 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <button id="loadStreamBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-r-lg">
+                                    Load
+                                </button>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium mb-1">Quality</label>
+                            <select id="qualitySelect" class="w-full px-3 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option value="auto">Auto</option>
+                                <option value="high">High</option>
+                                <option value="medium">Medium</option>
+                                <option value="low">Low</option>
+                            </select>
+                        </div>
                     </div>
                 </div>
             </div>
+            <!-- Sidebar Column -->
+            <div class="space-y-6">
+                <!-- Recording Panel -->
+                <div class="bg-gray-800 p-4 rounded-xl shadow-lg">
+                    <h3 class="font-semibold text-lg mb-4 flex items-center">
+                        <i class="fas fa-record-vinyl mr-2 text-red-400"></i>Recordings
+                    </h3>
+                    <div id="recordingsList" class="space-y-2 max-h-60 overflow-y-auto">
+                        <div class="text-center py-4 text-gray-500">
+                            <i class="fas fa-folder-open text-2xl mb-2"></i>
+                            <p>No recordings yet</p>
+                        </div>
                     </div>
+                    <div class="mt-4 pt-4 border-t border-gray-700">
+                        <label class="block text-sm font-medium mb-2">Recording Format</label>
+                        <div class="flex space-x-2">
+                            <button class="flex-1 px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm">
+                                MP4
+                            </button>
+                            <button class="flex-1 px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm">
+                                WebM
+                            </button>
+                        </div>
                     </div>
                 </div>
+                <!-- Upscale Panel -->
+                <div class="bg-gray-800 p-4 rounded-xl shadow-lg">
+                    <h3 class="font-semibold text-lg mb-4 flex items-center">
+                        <i class="fas fa-expand mr-2 text-purple-400"></i>Upscale Settings
+                    </h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium mb-1">Model</label>
+                            <select class="w-full px-3 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                                <option>Real-ESRGAN (General)</option>
+                                <option>Real-ESRGAN (Anime)</option>
+                                <option>Real-ESRGAN+</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium mb-1">Scale Factor</label>
+                            <select class="w-full px-3 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                                <option>2x</option>
+                                <option>4x</option>
+                                <option>8x (Experimental)</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium mb-1">Denoise Level</label>
+                            <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+                <!-- Upscale Preview -->
+                <div id="upscalePreviewContainer" class="bg-gray-800 p-4 rounded-xl shadow-lg hidden">
+                    <h3 class="font-semibold text-lg mb-4 flex items-center">
+                        <i class="fas fa-eye mr-2 text-green-400"></i>Upscale Preview
+                    </h3>
+                    <div class="grid grid-cols-2 gap-2 mb-4">
+                        <div>
+                            <p class="text-xs text-center mb-1">Original</p>
+                            <img id="originalPreview" src="" class="w-full rounded border border-gray-600 upscale-preview">
+                        </div>
+                        <div>
+                            <p class="text-xs text-center mb-1">Upscaled</p>
+                            <img id="upscaledPreview" src="" class="w-full rounded border border-purple-500 border-2 upscale-preview glow">
+                        </div>
+                    </div>
+                    <button class="w-full py-2 bg-purple-600 hover:bg-purple-700 rounded-lg">
+                        Apply to Entire Video
+                    </button>
+                </div>
+            </div>
         </div>
+    </div>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // Video elements
+            const video = document.getElementById('video');
+            const streamUrlInput = document.getElementById('streamUrl');
+            const loadStreamBtn = document.getElementById('loadStreamBtn');
+            const qualitySelect = document.getElementById('qualitySelect');
+            const currentTimeDisplay = document.getElementById('currentTime');
+            const durationDisplay = document.getElementById('duration');
+            // Recording elements
+            const recordBtn = document.getElementById('recordBtn');
+            const recordingIndicator = document.getElementById('recordingIndicator');
+            const recordingsList = document.getElementById('recordingsList');
+            // Timeline elements
+            const waveformBars = document.getElementById('waveformBars');
+            const progressIndicator = document.getElementById('progressIndicator');
+            const timelineRange = document.getElementById('timelineRange');
+            const startHandle = document.getElementById('startHandle');
+            const endHandle = document.getElementById('endHandle');
+            const setStartBtn = document.getElementById('setStartBtn');
+            const setEndBtn = document.getElementById('setEndBtn');
+            const exportClipBtn = document.getElementById('exportClipBtn');
+            // Upscale elements
+            const upscaleBtn = document.getElementById('upscaleBtn');
+            const upscaleOverlay = document.getElementById('upscaleOverlay');
+            const upscaleProgress = document.getElementById('upscaleProgress');
+            const upscalePreviewContainer = document.getElementById('upscalePreviewContainer');
+            const originalPreview = document.getElementById('originalPreview');
+            const upscaledPreview = document.getElementById('upscaledPreview');
+            // Player state
+            let hls = null;
+            let isRecording = false;
+            let mediaRecorder = null;
+            let recordedChunks = [];
+            let startTime = 0;
+            let endTime = 0;
+            let isDraggingStart = false;
+            let isDraggingEnd = false;
+            let isDraggingProgress = false;
+            // Initialize HLS player
+            function initHlsPlayer(url) {
+                if (hls) {
+                    hls.destroy();
+                }
+                if (Hls.isSupported()) {
+                    hls = new Hls();
+                    hls.loadSource(url);
+                    hls.attachMedia(video);
+                    hls.on(Hls.Events.MANIFEST_PARSED, function() {
+                        console.log('Manifest parsed');
+                        video.play();
+                        generateWaveform();
+                    });
+                    hls.on(Hls.Events.ERROR, function(event, data) {
+                        console.error('HLS Error:', data);
+                    });
+                } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                    // For Safari
+                    video.src = url;
+                    video.addEventListener('loadedmetadata', function() {
+                        video.play();
+                        generateWaveform();
+                    });
+                }
             }
+            // Generate fake waveform for demo
+            function generateWaveform() {
+                waveformBars.innerHTML = '';
+                const width = waveformBars.clientWidth;
+                const height = waveformBars.clientHeight;
+                for (let i = 0; i < 200; i++) {
+                    const bar = document.createElement('div');
+                    bar.className = 'waveform-bar';
+                    bar.style.left = `${(i / 200) * 100}%`;
+                    bar.style.height = `${Math.random() * 80 + 20}%`;
+                    waveformBars.appendChild(bar);
+                }
             }
+            // Update time display
+            function updateTimeDisplay() {
+                const currentTime = video.currentTime || 0;
+                const duration = video.duration || 0;
+                currentTimeDisplay.textContent = formatTime(currentTime);
+                durationDisplay.textContent = formatTime(duration);
+                // Update progress indicator
+                if (duration > 0) {
+                    const progressPercent = (currentTime / duration) * 100;
+                    progressIndicator.style.left = `${progressPercent}%`;
                 }
             }
+            // Format time as HH:MM:SS
+            function formatTime(seconds) {
+                const date = new Date(0);
+                date.setSeconds(seconds);
+                return date.toISOString().substr(11, 8);
             }
+            // Start recording
+            async function startRecording() {
+                if (!video.src) {
+                    alert('No video stream to record');
+                    return;
+                }
+                try {
+                    // In a real implementation, we would use MediaRecorder with WebCodecs
+                    // This is a simplified version for demonstration
+                    recordedChunks = [];
+                    isRecording = true;
+                    recordBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop';
+                    recordBtn.classList.remove('bg-red-600');
+                    recordBtn.classList.add('bg-gray-600');
+                    recordingIndicator.classList.remove('hidden');
+                    // Simulate recording with WebCodecs
+                    console.log('Recording started with WebCodecs (simulated)');
+                    // In a real implementation, we would:
+                    // 1. Create a MediaStream from the video element
+                    // 2. Use MediaRecorder with WebCodecs to encode to MP4
+                    // 3. Process frames with GPU acceleration
+                } catch (error) {
+                    console.error('Recording error:', error);
+                    stopRecording();
                 }
             }
+            // Stop recording
+            function stopRecording() {
+                isRecording = false;
+                recordBtn.innerHTML = '<i class="fas fa-circle mr-2"></i> Record';
+                recordBtn.classList.add('bg-red-600');
+                recordBtn.classList.remove('bg-gray-600');
+                recordingIndicator.classList.add('hidden');
+                // Simulate saving the recording
+                console.log('Recording stopped');
+                // In a real implementation, we would:
+                // 1. Finalize the MP4 file
+                // 2. Save to disk or offer download
+                // Add to recordings list for demo
+                addRecordingToUI();
+            }
+            // Add recording to UI (demo)
+            function addRecordingToUI() {
+                if (recordingsList.querySelector('.text-center')) {
+                    recordingsList.innerHTML = '';
                 }
+                const recordingItem = document.createElement('div');
+                recordingItem.className = 'flex items-center justify-between p-2 bg-gray-700 rounded-lg';
+                recordingItem.innerHTML = `
+                    <div class="flex items-center">
+                        <i class="fas fa-file-video text-blue-400 mr-3"></i>
+                        <div>
+                            <p class="font-medium">Recording_${new Date().toLocaleTimeString()}</p>
+                            <p class="text-xs text-gray-400">00:30:45 - MP4</p>
+                        </div>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="p-1 text-blue-400 hover:text-blue-300">
+                            <i class="fas fa-play"></i>
+                        </button>
+                        <button class="p-1 text-green-400 hover:text-green-300">
+                            <i class="fas fa-download"></i>
+                        </button>
+                        <button class="p-1 text-red-400 hover:text-red-300">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
+                `;
+                recordingsList.prepend(recordingItem);
             }
+            // Set clip start time
+            function setClipStart() {
+                startTime = video.currentTime;
+                updateClipRangeUI();
+            }
+            // Set clip end time
+            function setClipEnd() {
+                endTime = video.currentTime;
+                updateClipRangeUI();
+            }
+            // Update the clip range UI
+            function updateClipRangeUI() {
+                if (video.duration) {
+                    const startPercent = (startTime / video.duration) * 100;
+                    const endPercent = (endTime / video.duration) * 100;
+                    if (startTime > 0 && endTime > 0 && startTime < endTime) {
+                        timelineRange.style.left = `${startPercent}%`;
+                        timelineRange.style.width = `${endPercent - startPercent}%`;
+                        timelineRange.classList.remove('hidden');
+                        startHandle.style.left = `${startPercent}%`;
+                        startHandle.classList.remove('hidden');
+                        endHandle.style.left = `${endPercent}%`;
+                        endHandle.classList.remove('hidden');
+                    }
                 }
             }
+            // Export clip
+            function exportClip() {
+                if (startTime >= endTime || startTime < 0 || endTime < 0) {
+                    alert('Please set a valid start and end time');
+                    return;
+                }
+                // In a real implementation, we would:
+                // 1. Use WebCodecs to extract the clip between startTime and endTime
+                // 2. Encode as MP4
+                // 3. Offer download
+                alert(`Clip exported from ${formatTime(startTime)} to ${formatTime(endTime)}`);
+                console.log('Exporting clip with WebCodecs (simulated)');
+            }
+            // Upscale video
+            function upscaleVideo() {
+                if (!video.src) {
+                    alert('No video loaded');
+                    return;
+                }
+                // Show upscale overlay
+                upscaleOverlay.classList.remove('hidden');
+                // Simulate upscaling with Real-ESRGAN
+                // In a real implementation, this would require server-side processing
+                // or a WebAssembly port of Real-ESRGAN
+                let progress = 0;
+                const interval = setInterval(() => {
+                    progress += 5;
+                    upscaleProgress.style.width = `${progress}%`;
+                    if (progress >= 100) {
+                        clearInterval(interval);
+                        setTimeout(() => {
+                            upscaleOverlay.classList.add('hidden');
+                            showUpscalePreview();
+                        }, 500);
+                    }
+                }, 200);
             }
+            // Show upscale preview
+            function showUpscalePreview() {
+                // For demo purposes, we'll use placeholder images
+                originalPreview.src = 'https://via.placeholder.com/200x112/4b5563/ffffff?text=Original';
+                upscaledPreview.src = 'https://via.placeholder.com/400x224/7e22ce/ffffff?text=Upscaled+4x';
+                upscalePreviewContainer.classList.remove('hidden');
             }
+            // Event listeners
+            loadStreamBtn.addEventListener('click', () => {
+                const url = streamUrlInput.value.trim();
+                if (url) {
+                    initHlsPlayer(url);
+                }
+            });
+            qualitySelect.addEventListener('change', () => {
+                if (hls) {
+                    const level = qualitySelect.value;
+                    if (level === 'auto') {
+                        hls.currentLevel = -1;
+                    } else {
+                        const levels = { high: 0, medium: 1, low: 2 };
+                        hls.currentLevel = levels[level];
+                    }
+                }
+            });
+            recordBtn.addEventListener('click', () => {
+                if (isRecording) {
+                    stopRecording();
+                } else {
+                    startRecording();
+                }
+            });
+            video.addEventListener('timeupdate', updateTimeDisplay);
+            setStartBtn.addEventListener('click', setClipStart);
+            setEndBtn.addEventListener('click', setClipEnd);
+            exportClipBtn.addEventListener('click', exportClip);
+            upscaleBtn.addEventListener('click', upscaleVideo);
+            // Timeline dragging
+            waveformBars.addEventListener('mousedown', (e) => {
+                if (!video.duration) return;
+                const rect = waveformBars.getBoundingClientRect();
+                const percent = (e.clientX - rect.left) / rect.width;
+                const time = percent * video.duration;
+                if (startHandle.classList.contains('hidden') === false &&
+                    Math.abs(percent - parseFloat(startHandle.style.left) / 100) < 0.02) {
+                    isDraggingStart = true;
+                } else if (endHandle.classList.contains('hidden') === false &&
+                          Math.abs(percent - parseFloat(endHandle.style.left) / 100) < 0.02) {
+                    isDraggingEnd = true;
                 } else {
+                    isDraggingProgress = true;
+                    video.currentTime = time;
                 }
+            });
+            document.addEventListener('mousemove', (e) => {
+                if (!video.duration) return;
+                const rect = waveformBars.getBoundingClientRect();
+                const percent = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+                const time = percent * video.duration;
+                if (isDraggingStart) {
+                    startTime = time;
+                    if (startTime > endTime && endTime > 0) {
+                        startTime = endTime - 0.1;
+                    }
+                    updateClipRangeUI();
+                } else if (isDraggingEnd) {
+                    endTime = time;
+                    if (endTime < startTime) {
+                        endTime = startTime + 0.1;
+                    }
+                    updateClipRangeUI();
+                } else if (isDraggingProgress) {
+                    video.currentTime = time;
+                }
             });
+            document.addEventListener('mouseup', () => {
+                isDraggingStart = false;
+                isDraggingEnd = false;
+                isDraggingProgress = false;
+            });
+            // Initialize with default stream
+            initHlsPlayer(streamUrlInput.value);
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=inoculatemedia/hls-player-and-recorder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -0,0 +1 @@


1	+ hls player with record to mp4 with webcodecs gpu, clip cutting, upscale with real esrgan