Revamp Video Player (Plans to drop Zorn)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "minpluto",
-  "version": "2024.07.13",
+  "version": "2024.07.26",
   "description": "An open source frontend alternative to YouTube.",
   "repository": "https://sudovanilla.org/MinPluto/MinPluto",
   "author": "Korbs <korbs@sudovanilla.org>",

src/components/global/Head.astro

@@ -91,9 +91,5 @@ if (Astro.url.href.match('watch')) {
         :
         null
     }
-    <script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">
 </head>
-<Analytics/>
+<Analytics/>
-
-<script is:inline src="./assets/vendor/preline/preline.js"></script>

src/components/video-player/Controls.astro

@@ -0,0 +1,37 @@
+---
+import {
+    Backward15Seconds,
+    Enlarge,
+    Forward15Seconds,
+    PlaySolid,
+    Settings,
+} from "@iconoir/vue";
+---
+<div class="video-controls">
+    <div class="vc-top">
+        <p>DJI: Landscape Footage of Cities</p>
+    </div>
+    <div class="vc-bottom">
+        <div class="vc-start">
+            <button id="vc-playpause"><PlaySolid /></button>
+            <button id="vc-backwards"><Backward15Seconds /></button>
+            <button id="vc-forwards"><Forward15Seconds /></button>
+        </div>
+        <div class="vc-center">
+            <div class="vc-seek">
+                <span class="vc-progress-bar"></span>
+                <input class="seek" id="seek" value="0" min="0" type="range" step="1">
+            </div>
+            <p class="timestamp">
+                <span class="seek-tooltip" id="seek-tooltip">00:00</span>
+                <span id="current">00:00</span>
+                <span id="duration">00:00</span>
+            </p>
+        </div>
+        <div class="vc-end">
+            <!-- <button id="vc-settings"><Settings /></button> -->
+            <!-- <button><SoundHighSolid /></button> Should affect <audio>, not <video> -->
+            <button id="vc-fullscreen"><Enlarge /></button>
+        </div>
+    </div>
+</div>

src/components/video-player/Player.astro

@@ -0,0 +1,21 @@
+---
+// Properties
+const { Poster, Source } = Astro.props
+
+// Components
+import Controls from '@components/video-player/Controls.astro'
+
+// Styles
+import '@styles/player.scss'
+---
+
+<div class="video-container">
+    <video class="main-video" muted autoplay loop src={Source} poster={Poster}></video>
+    <audio class="main-audio" autoplay><source src={Source} type="audio/mp3"/></audio>
+    <Controls/>
+</div>
+
+<!-- Player Functions -->
+<script is:inline src="/player/controller.js"></script>
+<script is:inline src="/player/seek.js"></script>
+<script is:inline src="/player/sync.js"></script>

src/pages/vp.astro

@@ -0,0 +1,8 @@
+---
+import Base from "@layouts/Default.astro";
+import Player from "@components/video-player/Player.astro"
+---
+
+<Base>
+    <Player Source="/demo-purposes.mp4"/>
+</Base>

src/pages/watch.astro

@@ -9,6 +9,7 @@ import { Donate, Download, ShareIos, ThumbsUp, MediaVideo } from "@iconoir/vue";
 // Components
 import Dialog from '@components/Dialog.astro'
 import Video from '@components/VideoItem.astro'
+import Player from "@components/video-player/Player.astro";
 
 // Fetch
 const SWV = Astro.url.href.split("watch?v=").pop();
@@ -71,17 +72,10 @@ if (EightK === true) { // 571
 
 <Base Title={video.title}>
   <div class="video-container">
-    <video
+    <Player
-      class="zorn-player main-video"
+      Poster={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
-      autoplay
+      Source={DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=' + '137' + '&local=true'}
-      poster={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
+    />
-      video-title={video.title}
-      src={DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=' + Quality + '&local=true'}
-    >
-    </video>
-    <audio class="main-audio">
-        <source src={DEFAULT_MEDIA_PROXY + '/latest_version?id=' + video.videoId} type="audio/mp3">
-    </audio>
   </div>
   <div class="video-rea">
     <div class="rea-details">

src/public/player/controller.js

@@ -0,0 +1,193 @@
+var VideoContainer = document.querySelector('.video-container')
+var VideoControls = document.querySelector('.video-controls')
+var Player = document.querySelector('video')
+
+// Icons
+var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+var pause_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>';
+var PlayIcon = play_solid_default;
+var PauseIcon = pause_solid_default;
+
+// Fullscreen
+function Fullscreen() {
+  const Button_Fullscreen = document.getElementById("vc-fullscreen");
+  function Toggle_Fullscreen() {
+    if (document.fullscreenElement) {
+      document.querySelector('.vc-top').style.opacity = '0'
+      document.exitFullscreen();
+    } else if (document.webkitFullscreenElement) {
+      document.querySelector('.vc-top').style.opacity = '0'
+      document.webkitExitFullscreen();
+    } else if (VideoContainer.webkitRequestFullscreen) {
+      document.querySelector('.vc-top').style.opacity = '1'
+      VideoContainer.webkitRequestFullscreen();
+    } else {
+      document.querySelector('.vc-top').style.opacity = '1'
+      VideoContainer.requestFullscreen();
+    }
+  }
+  Button_Fullscreen.onclick = Toggle_Fullscreen;
+  function Update_FullscreenButton() {
+    if (document.fullscreenElement) {
+      Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)");
+    } else {
+      Button_Fullscreen.setAttribute("data-title", "Full screen (f)");
+    }
+  }
+  Player.addEventListener("dblclick", () => {
+    Toggle_Fullscreen()
+    Update_FullscreenButton()
+  });
+}
+
+// Play/Pause
+function PlayPause() {
+  const Button_PlayPause = document.querySelector(".video-controls #vc-playpause");
+  Button_PlayPause.addEventListener("click", Toggle_PlayPause);
+  Player.addEventListener("click", Toggle_PlayPause);
+  Player.addEventListener("play", Update_PlayPauseButton);
+  Player.addEventListener("pause", Update_PlayPauseButton);
+  function Toggle_PlayPause() {
+    if (Player.paused || Player.ended) {
+      Player.play();
+    } else {
+      Player.pause();
+    }
+  }
+  function Update_PlayPauseButton() {
+    if (Player.paused) {
+      Button_PlayPause.setAttribute("data-title", "Play (K)");
+      Button_PlayPause.innerHTML = `${PlayIcon}`;
+    } else {
+      Button_PlayPause.setAttribute("data-title", "Pause (K)");
+      Button_PlayPause.innerHTML = `${PauseIcon}`;
+    }
+  }
+}
+
+// Skip Around
+function SkipAround() {
+  const Button_SkipBack = document.querySelector(".video-controls #vc-backwards");
+  const Button_SkipForth = document.querySelector(".video-controls #vc-forwards");
+  Button_SkipBack.addEventListener("click", Toggle_SkipBack);
+  Button_SkipForth.addEventListener("click", Toggle_SkipForth);
+  function Toggle_SkipBack() {
+    Skip(-10);
+  }
+  function Toggle_SkipForth() {
+    Skip(10);
+  }
+  function Skip(value) {
+    Player.currentTime += value;
+  }
+}
+
+// Hide Controls
+function AutoToggleControls() {
+  function Hide_Controls2() {
+    if (Player.paused) {
+      return;
+    } else {
+      document.querySelector(".video-controls").classList.add("hide");
+    }
+  }
+  function Show_Controls2() {
+    document.querySelector(".video-controls").classList.remove("hide");
+  }
+  VideoControls.addEventListener("mouseenter", Show_Controls2);
+  VideoControls.addEventListener("mouseleave", Hide_Controls2);
+  var mouseTimer = null, cursorVisible = true;
+  function Hide_Cursor() {
+    mouseTimer = null;
+    VideoContainer.style.cursor = "none";
+    cursorVisible = false;
+    Hide_Controls2();
+  }
+  document.onmousemove = function () {
+    if (mouseTimer) {
+      window.clearTimeout(mouseTimer);
+      Show_Controls2();
+    }
+    if (!cursorVisible) {
+      VideoContainer.style.cursor = "default";
+      cursorVisible = true;
+    }
+    mouseTimer = window.setTimeout(Hide_Cursor, 3200);
+  };
+}
+
+// Keyboard Shortcuts
+function KeyboardShortcuts(events) {
+  if (Player.hasAttribute("keyboard-shortcut-fullscreen")) {
+    var Fullscreen_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-fullscreen");
+  } else {
+    var Fullscreen_KeyboardShortcut = "f";
+  }
+  if (Player.hasAttribute("keyboard-shortcut-mute")) {
+    var Mute_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-mute");
+  } else {
+    var Mute_KeyboardShortcut = "m";
+  }
+  if (Player.hasAttribute("keyboard-shortcut-playpause")) {
+    var PlayPause_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-playpause");
+  } else {
+    var PlayPause_KeyboardShortcut = "k";
+  }
+  if (Player.hasAttribute("keyboard-shortcut-skipback")) {
+    var SkipBack_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-skipback");
+  } else {
+    var SkipBack_KeyboardShortcut = "j";
+  }
+  if (Player.hasAttribute("keyboard-shortcut-skipforth")) {
+    var SkipForth_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-skipforth");
+  } else {
+    var SkipForth_KeyboardShortcut = "l";
+  }
+  function keyboardShortcuts(event) {
+    const { key } = event;
+    if (key === PlayPause_KeyboardShortcut) {
+      if (Player.paused || Player.ended) {
+        Player.play();
+      } else {
+        Player.pause();
+      }
+      if (Player.paused) {
+        Show_Controls();
+      } else {
+        setTimeout(() => {
+          Hide_Controls();
+        }, 1200);
+      }
+    } else if (key === Mute_KeyboardShortcut) {
+      Player.muted = !Player.muted;
+      if (Player.muted) {
+        volume.setAttribute("data-volume", volume.value);
+        volume.value = 0;
+      } else {
+        volume.value = volume.dataset.volume;
+      }
+    } else if (key === Fullscreen_KeyboardShortcut) {
+      if (document.fullscreenElement) {
+        document.exitFullscreen();
+      } else if (document.webkitFullscreenElement) {
+        document.webkitExitFullscreen();
+      } else if (VideoContainer.webkitRequestFullscreen) {
+        VideoContainer.webkitRequestFullscreen();
+      } else {
+        VideoContainer.requestFullscreen();
+      }
+    } else if (key === SkipBack_KeyboardShortcut) {
+      Player.currentTime += -10;
+    } else if (key === SkipForth_KeyboardShortcut) {
+      Player.currentTime += 10;
+    }
+  }
+  document.addEventListener("keyup", keyboardShortcuts);
+}
+
+// Init All Functions
+AutoToggleControls()
+Fullscreen()
+KeyboardShortcuts()
+PlayPause()
+SkipAround()

src/public/player/seek.js

@@ -0,0 +1,81 @@
+function Seek() {
+    var Player = document.querySelector('video')
+    const timeElapsed = document.getElementById("current");
+    const duration = document.getElementById("duration");
+    function formatTime(timeInSeconds) {
+        const result = new Date(timeInSeconds * 1e3)
+            .toISOString()
+            .substr(11, 8);
+        return {
+            minutes: result.substr(3, 2),
+            seconds: result.substr(6, 2),
+        };
+    }
+    function initializeVideo() {
+        const videoDuration = Math.round(Player.duration);
+        const time = formatTime(videoDuration);
+        duration.innerText = `${time.minutes}:${time.seconds}`;
+        duration.setAttribute(
+            "datetime",
+            `${time.minutes}m ${time.seconds}s`,
+        );
+    }
+    Player.addEventListener("loadedmetadata", initializeVideo);
+    function updateTimeElapsed() {
+        const time = formatTime(Math.round(Player.currentTime));
+        timeElapsed.innerText = `${time.minutes}:${time.seconds}`;
+        timeElapsed.setAttribute(
+            "datetime",
+            `${time.minutes}m ${time.seconds}s`,
+        );
+    }
+    Player.addEventListener("timeupdate", updateTimeElapsed);
+    const progressBar = document.querySelector(".vc-progress-bar");
+    const seek = document.getElementById("seek");
+    function initializeVideo() {
+        const videoDuration = Math.round(Player.duration);
+        seek.setAttribute("max", videoDuration);
+        progressBar.setAttribute("max", videoDuration);
+        const time = formatTime(videoDuration);
+        duration.innerText = `${time.minutes}:${time.seconds}`;
+        duration.setAttribute(
+            "datetime",
+            `${time.minutes}m ${time.seconds}s`,
+        );
+    }
+    function updateProgress() {
+        seek.value = Math.floor(Player.currentTime);
+        document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
+    }
+    Player.addEventListener("timeupdate", updateProgress);
+    const seekTooltip = document.getElementById("seek-tooltip");
+    function updateSeekTooltip(event) {
+        const skipTo = Math.round(
+            (event.offsetX / event.target.clientWidth) *
+                parseInt(event.target.getAttribute("max"), 10),
+        );
+        seek.setAttribute("data-seek", skipTo);
+        const t = formatTime(skipTo);
+        seekTooltip.textContent = `${t.minutes}:${t.seconds}`;
+        const rect = Player.getBoundingClientRect();
+        seekTooltip.style.left = `${event.pageX - rect.left}px`;
+        seekTooltip.style.opacity = '1'
+        document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
+        seek.addEventListener('mouseleave', () => {
+            seekTooltip.style.opacity = '0'
+        })
+    }
+    seek.addEventListener("mousemove", updateSeekTooltip);
+    function skipAhead(event) {
+        const skipTo = event.target.dataset.seek
+            ? event.target.dataset.seek
+            : event.target.value;
+        Player.currentTime = skipTo;
+        progressBar.value = skipTo;
+        seek.value = skipTo;
+    }
+    seek.addEventListener("input", skipAhead);
+
+    initializeVideo();
+}
+Seek();

src/public/player/sync.js

@@ -0,0 +1,64 @@
+// https://gist.github.com/michancio/59b9f3dc54b3ff4f6a84
+// Find elements
+var SyncVideo = document.querySelector(".main-video");
+var SyncAudio = document.querySelector(".main-audio");
+
+// Object for synchronization of multiple media/sources
+if (typeof window.MediaController === "function") {
+    var controller = new MediaController();
+    SyncVideo.controller = controller;
+    SyncAudio.controller = controller;
+} else {
+    controller = null;
+}
+
+// Run SyncAudio and SyncVideo simultaneously
+SyncVideo.addEventListener(
+    "play",
+    function () {
+        if (!controller && SyncAudio.paused) {
+            SyncAudio.play();
+        }
+    },
+    false,
+);
+
+// Pause/Play and Buffering
+SyncVideo.addEventListener("waiting", () => {
+    // If SyncVideo is buffering
+    SyncAudio.pause();
+});
+SyncVideo.addEventListener("playing", () => {
+    // If SyncVideo is done buffering
+    SyncAudio.play();
+    SyncTimestamp();
+});
+
+SyncVideo.addEventListener(
+    "pause",
+    function () {
+        if (!controller && !SyncAudio.paused) {
+            SyncAudio.pause();
+        }
+    },
+    false,
+);
+
+// When Media Ends
+SyncVideo.addEventListener(
+    "ended",
+    function () {
+        if (controller) {
+            controller.pause();
+        } else {
+            SyncVideo.pause();
+            SyncAudio.pause();
+        }
+    },
+    false,
+);
+
+// Seekbar
+function SyncTimestamp() {
+    SyncAudio.currentTime = SyncVideo.currentTime;
+}

src/styles/player.scss

@@ -0,0 +1,163 @@
+.video-container {
+    position: relative;
+    *:focus {
+        border: 2px white solid;
+        transition: 1s border;
+    }
+    video {
+        width: 100%;
+        z-index: 1;
+    }
+    .video-controls {
+        background: linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0.7495448863139005) 100%);;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        width: calc(100% - 24px);
+        padding: 12px;
+        z-index: 5;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        transition: 0.3s opacity;
+        button {
+            color: white;
+            border-radius: 3rem;
+            aspect-ratio: 1;
+            border: none;
+            background: transparent;
+            display: flex;
+            align-items: center;
+            padding: 6px;
+            cursor: pointer;
+            &:hover {
+                background: rgba(255, 255, 255, 0.1);
+            }
+        }
+        .vc-top {
+            margin-top: 12px;
+            pointer-events: none;
+            opacity: 0;
+            transition: 0.3s opacity;
+        }
+        .vc-bottom {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            justify-content: space-between;
+            .vc-start,
+            .vc-end {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+            }
+            .vc-center {
+                width: calc(100% - 220px);
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                p {
+                    width: max-content;
+                }
+            }
+            .vc-seek {
+                background: rgb(255 255 255 / 10%);
+                width: 100%;
+                height: 6px;
+                position: relative;
+                display: block;
+                border-radius: 3rem;
+                .vc-progress-bar {
+                    width: 1%;
+                    background: #ff274d;
+                    position: absolute;
+                    left: 0px;
+                    height: 100%;
+                    border-radius: 3rem;
+                }
+                input#seek {
+                    position: absolute;
+                    top: -8px;
+                    left: 0px;
+                    width: 100%;
+                    
+                }
+                #seek[type="range"] {
+                    -webkit-appearance: none;
+                    appearance: none;
+                    background: transparent;
+                    cursor: pointer;
+                    width: 100%;
+                }
+                #seek[type="range"]:focus {
+                    outline: none;
+                }
+                #seek[type="range"]::-webkit-slider-runnable-track {
+                    background-color: transparent;
+                    border-radius: 3rem;
+                    height: 1rem;
+                }
+                #seek[type="range"]::-webkit-slider-thumb {
+                    -webkit-appearance: none;
+                    appearance: none;
+                    margin-top: -4px;
+                    background-color: #ffffff;
+                    border-radius: 3rem;
+                    height: 1.5rem;
+                    width: 1.5rem;
+                }
+                #seek[type="range"]:focus::-webkit-slider-thumb {
+                    outline: 3px solid #ffffff;
+                    outline-offset: 0.125rem;
+                }
+                #seek[type="range"]::-moz-range-track {
+                    background-color: transparent;
+                    border-radius: 3rem;
+                    height: 1rem;
+                }
+                #seek[type="range"]::-moz-range-thumb {
+                    background-color: #ffffff;
+                    border: none;
+                    border-radius: 3rem;
+                    height: 1.5rem;
+                    width: 1.5rem;
+                }
+                #seek[type="range"]:focus::-moz-range-thumb{
+                    outline: 3px solid transparent;
+                    outline-offset: 0.125rem;
+                }
+            }
+            .timestamp {
+                display: flex;
+                background: rgb(255 255 255 / 10%);
+                border-radius: 3rem;
+                align-items: center;
+                position: relative;
+                pointer-events: none;
+                #seek-tooltip {
+                    z-index: 10;
+                    background: #464646;
+                    padding: 6px 12px;
+                    border-radius: 3rem 0px 0px 3rem;
+                    margin-right: -64px;
+                    opacity: 0;
+                    transition: 0.3s opacity;
+                }
+                #current {
+                    background: rgb(255 255 255 / 15%);
+                    padding: 6px 12px;
+                    border-radius: 3rem 0px 0px 3rem;
+                }
+                #duration {
+                    padding: 6px 12px;
+                }
+            }
+        }
+    }
+}
+
+.video-controls.hide {
+    opacity: 0;
+    transition: 0.3s opacity;
+}

tsconfig.json

@@ -7,6 +7,7 @@
       "@components/*": ["src/components/*"],
       "@layouts/*": ["src/layouts/*"],
       "@library/*": ["src/library/*"],
+      "@player/*": ["src/components/video-player/*"],
       "@root/*": ["*"],
       "@styles/*": ["src/styles/*"],
       "@utils/*": ["src/utilities/*"]