Home, admin and player page

elvistony · Oct 9, 2024 · 701e5a6 · 701e5a6
1 parent 2d05659
commit 701e5a6
Show file tree

Hide file tree

Showing 7 changed files with 488 additions and 118 deletions.
diff --git a/admin/index.html b/admin/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Controls</title>
+</head>
+<body>
+    <div>
+        <input type="text" id="VideoURL" placeholder="URL" id="">
+        <input type="text" id="VideoTitle" placeholder="Title" id="">
+        <button id="fire-video-change">Play Stream</button>
+    </div>
+    <div>
+        <h6>SYNC</h6>
+        <button id="sync-playback">Sync Playback</button>
+    </div>
+    <div>
+        <h6>Playback Controls</h6>
+        <audio controls muted src="" id="videoplayer"></audio>
+    </div>
+
+    <script src="/assets/js/script.js"></script>
+    <script src="/bundle.js"></script>
+</body>
+</html>
diff --git a/assets/css/flix.css b/assets/css/flix.css
@@ -0,0 +1,137 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: black;
+    color: white;
+    font-family: Arial, sans-serif;
+}
+
+/* Full-screen background video */
+.video-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+}
+
+/* Overlay for controls */
+.controls-overlay {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
+    padding: 20px;
+    opacity: 1;
+    transition: opacity 0.5s;
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.left-controls {
+    display: flex;
+    align-items: center;
+}
+
+.play-pause {
+    font-size: 30px;
+
+    cursor: pointer;
+}
+
+.progress-bar-container {
+    position: relative;
+    width: 100%;
+    height: 5px;
+    background: rgba(255, 255, 255, 0.3);
+
+}
+
+.progress-bar {
+    width: 30%;
+    height: 100%;
+    background: red;
+}
+
+.volume-control, .settings-control {
+    font-size: 20px;
+    cursor: pointer;
+
+}
+
+.right-controls {
+    display: flex;
+    align-items: center;
+}
+
+.fullscreen {
+    font-size: 24px;
+    cursor: pointer;
+}
+
+/* Rewind and Forward buttons */
+.rewind, .forward {
+    position: absolute;
+    top: 20px;
+    font-size: 24px;
+    padding: 10px;
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.5);
+    border: none;
+    color: white;
+    font-size: 15px;
+}
+
+.rewind {
+    left: 20px;
+}
+
+.forward {
+    right: 20px;
+}
+
+/* Hide controls */
+.hide-controls {
+    opacity: 0;
+}
+
+.control-button{
+    padding: 10px;
+    color: white;
+    background: black;
+    border:none;
+    outline: 0.5px solid gray;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    margin-right: 5px;
+    transition: 0.5s ease;
+}
+
+.control-button:focus-within{
+    color: black;
+    background: white;
+}
+
+.control-button > *{
+    outline: none;
+}
+
+.control-button-mini{
+    width: 50px !important;
+    height: 50px !important;
+}
diff --git a/assets/js/flixplayer.js b/assets/js/flixplayer.js
@@ -0,0 +1,96 @@
+const video = document.getElementById('videoplayer');
+        const controlsOverlay = document.getElementById('controlsOverlay');
+        const playPauseBtn = document.getElementById('playPauseBtn');
+        const playPauseIcon = document.getElementById('playPauseIcon');
+        const progressBar = document.getElementById('progressBar');
+        const fullscreenBtn = document.getElementById('fullscreenBtn');
+        const fullscreenIcon = document.getElementById('fullscreenIcon');
+        const rewindBtn = document.getElementById('rewindBtn');
+        const forwardBtn = document.getElementById('forwardBtn');
+        let hideControlsTimeout;
+
+        // Play/Pause functionality
+        playPauseBtn.addEventListener('click', () => {
+            if (video.paused) {
+                video.play();
+                if (!document.fullscreenElement) {
+                    document.body.requestFullscreen();
+                }
+                playPauseIcon.classList.remove('fa-play');
+                playPauseIcon.classList.add('fa-pause');
+            } else {
+                video.pause();
+                playPauseIcon.classList.remove('fa-pause');
+                playPauseIcon.classList.add('fa-play');
+            }
+        });
+
+        // Fullscreen functionality
+        fullscreenBtn.addEventListener('click', () => {
+            if (!document.fullscreenElement) {
+                document.body.requestFullscreen();
+                fullscreenIcon.classList.remove('fa-compress');
+                fullscreenIcon.classList.add('fa-expand');
+            } else {
+                document.exitFullscreen();
+                fullscreenIcon.classList.remove('fa-expand');
+                fullscreenIcon.classList.add('fa-compress');
+            }
+        });
+
+        // Auto-hide controls after 3 seconds
+        function hideControls() {
+            controlsOverlay.classList.add('hide-controls');
+            rewindBtn.classList.add('hide-controls');
+            forwardBtn.classList.add('hide-controls');
+            playPauseIcon.focus();
+        }
+
+        function showControls() {
+            controlsOverlay.classList.remove('hide-controls');
+            rewindBtn.classList.remove('hide-controls');
+            forwardBtn.classList.remove('hide-controls');
+            clearTimeout(hideControlsTimeout);
+            hideControlsTimeout = setTimeout(hideControls, 3000);
+        }
+
+        // Show controls on mouse move
+        document.addEventListener('mousemove', showControls);
+
+
+        // Initially start the timer to auto-hide controls
+        video.addEventListener('play', () => {
+            hideControlsTimeout = setTimeout(hideControls, 3000);
+            playPauseIcon.classList.remove('fa-play');
+            playPauseIcon.classList.add('fa-pause');
+        });
+
+        // Reset auto-hide timer when video is paused
+        video.addEventListener('pause', ()=>{
+            showControls(); 
+            playPauseIcon.classList.add('fa-play');
+            playPauseIcon.classList.remove('fa-pause');
+        });
+
+        // Rewind 10 seconds
+        rewindBtn.addEventListener('click', () => {
+            video.pause()
+            video.currentTime = Math.max(0, video.currentTime - 10);
+        });
+
+        // Forward 10 seconds
+        forwardBtn.addEventListener('click', () => {
+            video.pause()
+            video.currentTime = Math.min(video.duration, video.currentTime + 10);
+        });
+
+        playPauseBtn.addEventListener('focus',showControls)
+        fullscreenBtn.addEventListener('focus',showControls)
+        rewindBtn.addEventListener('focus',showControls)
+        forwardBtn.addEventListener('focus',showControls)
+
+        document.addEventListener('keydown', (event) => {
+            if ((event.key === 'ArrowRight') || (event.key === 'ArrowLeft') || (event.key === 'ArrowUp') || (event.key === 'ArrowDown')) {
+                showControls(); 
+            }
+        });