dash/hls support

GoldDominik893 · May 29, 2024 · 2c0de32 · 2c0de32
1 parent dfba148
commit 2c0de32
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,8 @@
 
 * [x] Lightweight
 * [x] No ads and no tracking
-* [x] Native language support.
+* [x] Native language support
+* [x] DASH/HLS video support
 * [x] Playlists
 * [x] Blue/Ultra dark themes
 * [x] Community driven plugin store
@@ -51,11 +52,10 @@
 
 ## To do
 
-* [ ] DASH/HLS video through VideoJS.
-* [ ] Autoplay for playlists.
-* [ ] Subscribing to channels.
-* [ ] Caching the trending page to reduce loading times significantly.
-* [ ] Annotations (clickable links on the video basically).
+* [ ] Autoplay for playlists
+* [ ] Subscribing to channels
+* [ ] Caching the trending page to reduce loading times significantly
+* [ ] Annotations (clickable links on the video basically)
 
 ## Related Repositories
 
@@ -108,7 +108,7 @@ This tool is provided to you in the spirit of free, open source software.
 
 You may view the LICENSE in which this software is provided to you [here](./LICENSE).
 
->   16. Limitation of Liability.
+> 16. Limitation of Liability.
 >
 > IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
 WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS

diff --git a/config.php b/config.php
@@ -16,7 +16,7 @@
 
     // Invidious
     $InvCServer = "https://invidious.protokolla.fi";  // The Invidious instance that will be used to fetch comments
-    $InvVIServer = "https://yt.artemislena.eu"; // The Invidious instance that will be used to fetch video information
+    $InvVIServer = "https://yt.artemislena.eu";       // The Invidious instance that will be used to fetch video information
     $InvTServer = "https://invidious.protokolla.fi";  // The Invidious instance that will be used to fetch trending videos for the home page
     $InvSServer = "https://invidious.protokolla.fi";  // The Invidious instance that will be used to search for content
 

diff --git a/index.php b/index.php
@@ -62,7 +62,7 @@
 parse_str($url_components['query'], $params);
 ?>
 <!DOCTYPE html>
-<html>
+<head>
     <head>
 
         <title>Liberatube · <?php echo $translations[$langrow]['home']; ?></title>
@@ -87,7 +87,7 @@
         <meta name="og:image" content="https://github.com/GoldDominik893/file-hosting/blob/main/images/favicon.png?raw=true"/>
 
         <span><meta property="og:site_name" content="Liberatube">
-        <link itemprop="name" content="Liberatube"></span></head>
+        <link itemprop="name" content="Liberatube"></span>
 
 
 
@@ -135,6 +135,8 @@
     }
 }
 ?>
+
+</head>
     <body>
 
 

diff --git a/scripts/playermain.js b/scripts/playermain.js
@@ -54,4 +54,88 @@ function seekToTime(timestamp) {
     }
 
     video.currentTime = totalSeconds;
-  }
+  }
+
+
+
+
+
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const video = document.getElementById('video');
+    const audio = document.getElementById('audio');
+    const qualitySelector = document.getElementById('qualitySelector');
+
+    let shouldUpdateTime = true;
+
+    function syncPlayPause(event) {
+        if (event.target === audio && video.paused !== audio.paused) {
+            if (audio.paused) video.pause();
+            else video.play();
+        } else if (event.target === video && video.paused !== audio.paused) {
+            if (video.paused) audio.pause();
+            else audio.play();
+        }
+    }
+
+    video.addEventListener('play', syncPlayPause);
+    video.addEventListener('pause', syncPlayPause);
+    audio.addEventListener('play', syncPlayPause);
+    audio.addEventListener('pause', syncPlayPause);
+
+    function checkSync() {
+        if (shouldUpdateTime && Math.abs(video.currentTime - audio.currentTime) > 0.3) {
+            audio.currentTime = video.currentTime;
+        }
+    }
+
+    setInterval(checkSync, 100);
+
+    document.addEventListener('visibilitychange', function () {
+        if (document.visibilityState === 'hidden') {
+            shouldUpdateTime = false;
+        } else if (document.visibilityState === 'visible') {
+            video.currentTime = audio.currentTime;
+            shouldUpdateTime = true;
+        }
+    });
+
+    function keepPlaying() {
+        if (document.visibilityState === 'hidden') {
+            if (!audio.paused) {
+                audio.play().catch(error => console.log('Audio play error:', error));
+            }
+        } else {
+            if (!video.paused) {
+                video.play().catch(error => console.log('Video play error:', error));
+            }
+            if (!audio.paused) {
+                audio.play().catch(error => console.log('Audio play error:', error));
+            }
+        }
+        requestAnimationFrame(keepPlaying);
+    }
+
+    requestAnimationFrame(keepPlaying);
+
+    video.addEventListener('seeked', () => {
+        if (shouldUpdateTime) {
+            audio.currentTime = video.currentTime;
+        }
+    });
+
+    // Populate quality selector
+    const videoSources = video.getElementsByTagName('source');
+    Array.from(videoSources).forEach(source => {
+        const option = document.createElement('option');
+        option.value = source.src;
+        option.textContent = source.getAttribute('label');
+        qualitySelector.appendChild(option);
+    });
+
+    // Add event listener for quality change
+    qualitySelector.addEventListener('change', function () {
+        video.src = this.value;
+        video.play();
+    });
+});
diff --git a/watch/index.php b/watch/index.php
@@ -242,7 +242,7 @@
                       <script src="../scripts/-video.min.js"></script>';
                 $videosizingcss = 'style="max-width: 98vw"';
             } else {
-                $videosizingcss = 'style="max-width: 98%; max-height: 90vh;"';
+                $videosizingcss = 'style="max-width: 100%; max-height: 90vh;"';
             }
             if ($params['listen'] == "true") {
 
@@ -254,12 +254,39 @@
             }
             else {
 
-                    echo '<video id="video" class="video-js video" controls preload="auto" data-setup="{}" '.$videosizingcss.' poster="/videodata/poster.php?id='.$params['v'].'" autoplay controls>
-                    <source src="/videodata/non-hls.php?id='.$params['v'].$dlsetting.'" type="video/mp4">
-                    '.$captionshtml.'Your Browser Sucks! Can not play the video.
-                    </video>';
+
+                    $baseUrl = '/videodata/hls.php?id={{videoId}}&itag={{itag}}';
+
+                    foreach ($HlsItag as $index => $itag) {
+                        $quality = $HlsQuality[$index];
+                        if ($HlsQuality[$index] === null AND $HlsType[$index] !== null) {
+                            // For audio, store the URL in $audioUrl
+                            $audioUrl = str_replace(['{{videoId}}', '{{itag}}'], [$_GET['v'], $itag], $baseUrl);
+                        } else {
+                            $videoUrls[] = [
+                                'url' => str_replace(['{{videoId}}', '{{itag}}'], [$_GET['v'], $itag], $baseUrl),
+                                'quality' => $quality
+                            ];
+
+                        }
+                    }
+                    $videoUrls = array_reverse($videoUrls);
+                    echo '<video id="video" class="video-js video" controls preload="auto" data-setup="{}" '.$videosizingcss.' poster="/videodata/poster.php?id='.$params['v'].'" autoplay>';
+                    foreach ($videoUrls as $video) {
+                        echo '<source src="'.$video['url'].$dlsetting.'" type="video/mp4" label="HLS '.$video['quality'].'">';
+                    }
+                    echo '<source src="/videodata/non-hls.php?id='.$params['v'].$dlsetting.'" type="video/mp4" label="360/720p">'
+                    .$captionshtml.'Your Browser Sucks! Can not play the video.</video>
+
+                    <audio id="audio" preload="auto">
+                    <source src="'.$audioUrl.$dlsetting.'" type="audio/mp4">
+                    </audio>
+                    
+                    <select id="qualitySelector"></select>';
 
             }
+
+
         ?>
 
     </center>