Spaces:

inoculatemedia
/

hls-player-and-recorder

Running

App Files Files Community

inoculatemedia commited on Apr 26

Commit

01f382b

verified ·

1 Parent(s): 3b64012

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +378 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Hls Player And Recorder
-emoji: 👀
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: hls-player-and-recorder
+emoji: 🐳
+colorFrom: red
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,378 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<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>
+</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">NHLS 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 id="video-player" class="w-full" poster="https://via.placeholder.com/800x450/1e293b/64748b?text=NHLS+Video+Player">
+                <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
+                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">MP4 (H.264)</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>© 2023 NHLS Video Player. 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 = 'NHLS_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>

prompts.txt ADDED Viewed

File without changes