Fix video player and include audi with 1080p and up

src/pages/watch.astro

@@ -3,7 +3,7 @@ import { t, changeLanguage } from "i18next";
 import Base from "@layouts/Default.astro";
 import "@styles/video.scss";
 // Configuration
-import { DEFAULT_VIDEO_PROXY, DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from '@utils/GetConfig'
+import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from '@utils/GetConfig'
 import { Donate, Download, ShareIos, ThumbsUp, MediaVideo } from "@iconoir/vue";
 
 // Components
@@ -12,8 +12,8 @@ import Video from '@components/VideoItem.astro'
 
 // Fetch
 const SWV = Astro.url.href.split("watch?v=").pop();
-const video = await fetch(DEFAULT_DATA_PROXY + "/api/v1/videos/" + SWV).then((response) => response.json());
-const comments = await fetch(DEFAULT_DATA_PROXY + "/api/v1/comments/" + SWV).then((response) => response.json());
+const video = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/videos/" + SWV).then((response) => response.json());
+const comments = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/comments/" + SWV).then((response) => response.json());
 
 changeLanguage("en");
 
@@ -35,18 +35,56 @@ new Date(VideoSeconds * 1000)
 // Format Views
 const ViewsConversion = Intl.NumberFormat("en", { notation: "compact" });
 let ViewsFormat = ViewsConversion.format(Views);
+
+// Quality Check
+const EightKCheck = await fetch(DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=571')
+if (EightKCheck.status == 200) {
+    var EightK = true
+} else {
+    var EightK = false
+}
+
+const FourKCheck = await fetch(DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=313')
+if (FourKCheck.status == 200) {
+    var FourK = true
+} else {
+    var FourK = false
+}
+
+const TenEightyCheck = await fetch(DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=137')
+if (TenEightyCheck.status == 200) {
+    var TenEighty = true
+} else {
+    var TenEighty = false
+}
+
+const ThreeSixtyCheck = await fetch(DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=134')
+if (ThreeSixtyCheck.status == 200) {var ThreeSixty = true}
+
+if (EightK === true) { // 571
+    var Quality = '571'
+} else if (FourK === true) { // 313
+    var Quality = '313'
+} else if (TenEighty === true) { // 137
+    var Quality = '137'
+} else if (ThreeSixty === true) { // 134
+    var Quality = '134'
+}
 ---
 
 <Base Title={video.title}>
   <div class="video-container">
     <video
-      class="zorn-player"
+      class="zorn-player main-video"
       autoplay
       poster={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
       video-title={video.title}
-      src={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + video.videoId + '&itag=244&local=true'}
+      src={DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=' + Quality + '&local=true'}
     >
     </video>
+    <audio class="main-audio">
+        <source src={DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId} type="audio/mp3">
+    </audio>
   </div>
   <div class="video-rea">
     <div class="rea-details">
@@ -145,6 +183,59 @@ function ShareDialogHide() {
 }
 </script>
 
+
+
+<script is:inline>
+  // 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}
+</script>
+
 <style lang="scss">
   .video-container {
     max-width: 1000px;

src/public/scripts/zorn.js

@@ -68,6 +68,10 @@
             <button id="play-pause">${PlayIcon}</button>
             <button id="skip-back">${Backward15Icon}</button>
             <button id="skip-forth">${Forward15Icon}</button>
+            <div class="volume-controls">
+                <button data-title="Mute (m)" class="volume-button" id="volume-button">${VolumeHighIcon}</button>
+                <input class="volume" id="volume" value="1" type="range" max="1" min="0" step="0.01"/>
+            </div>
             <div class="time">
                 <time id="time-elapsed">00:00</time>
                 <span> / </span>