initial HLS support

n-ce · May 14, 2024 · 50d7243 · 50d7243
1 parent cdd2e2e
commit 50d7243
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -36,8 +36,9 @@
 
 <body>
   <canvas class="hide"></canvas>
-  <audio preload="metadata">
+  <audio>
     <track src="subtitles.ttml" kind="subtitles" label="Expanded TTML Sample" />
+    <source type="audio/mpegurl">
   </audio>
   <nav>
     <a href="/" id="/">
@@ -135,7 +136,11 @@
           <i class="ri-subtract-line"></i> Remove
         </button>
         <button>
-          <i class="ri-filter-2-line"></i> Filter &lt;10:00 </button>
+          <i class="ri-filter-2-line"></i> Filter &lt;10:00
+        </button>
+        <button>
+          <i class="ri-filter-2-line"></i> Filter Music
+        </button>
         <button class="checked" id="autoQueueBtn">
           <i class="ri-list-check-2"></i> Auto-Queue
         </button>
@@ -290,7 +295,9 @@ <h3>Playback</h3>
             <option value="">Any</option>
           </select>
         </span>
+        <toggle-switch id="HLS_Switch">Enable HLS</toggle-switch>
       </div>
+
       <div>
         <h3>Thumbnail</h3>
         <toggle-switch id="thumbnailSwitch" checked>Load</toggle-switch>

diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "update": "npx npm-check-updates -u"
   },
   "dependencies": {
+    "hls.js": "^1.5.8",
     "imsc": "^1.1.5",
     "lit": "^3.1.3",
     "solid-js": "^1.8.17"
@@ -25,4 +26,4 @@
   "browserslist": [
     "defaults"
   ]
-}
+}
diff --git a/src/lib/player.ts b/src/lib/player.ts
@@ -6,6 +6,7 @@ import { getDB, addListToCollection } from "./libraryUtils";
 
 const codecSelector = <HTMLSelectElement>document.getElementById('CodecPreference');
 const bitrateSelector = <HTMLSelectElement>document.getElementById('bitrateSelector');
+const switchHLS = <HTMLElement>document.getElementById('HLS_Switch');
 
 /////////////////////////////////////////////////////////////
 
@@ -52,6 +53,18 @@ subtitleSelector.addEventListener('change', () => {
 
 /////////////////////////////////////////////////////////////
 
+
+if (getSaved('HLS'))
+  switchHLS.toggleAttribute('checked');
+
+switchHLS.addEventListener('click', () => {
+  getSaved('HLS') ?
+    removeSaved('HLS') :
+    save('HLS', 'true');
+});
+
+/////////////////////////////////////////////////////////////
+
 export default async function player(id: string | null = '') {
 
   if (!id) return;
@@ -88,15 +101,17 @@ export default async function player(id: string | null = '') {
     });
 
 
-  if (data && !data.audioStreams?.length)
-    return notify('No audio streams available');
+  if (!data && !data.hasOwnProperty('audioStreams'))
+    return notify('No data found');
+
+
 
   const audioStreams = data.audioStreams
     .sort((a: { bitrate: number }, b: { bitrate: number }) => (a.bitrate - b.bitrate));
 
   const noOfBitrates = audioStreams.length;
 
-  if (!noOfBitrates) {
+  if (!noOfBitrates && !switchHLS.hasAttribute('checked')) {
     notify('NO AUDIO STREAMS AVAILABLE.');
     playButton.classList.replace(playButton.className, 'ri-stop-circle-fill');
     return;
@@ -106,26 +121,38 @@ export default async function player(id: string | null = '') {
   let index = -1;
 
   bitrateSelector.innerHTML = '';
+  const isMusic = data.category === 'Music';
+  const ivApi = getApi('invidious');
+  const hlsOn = switchHLS.hasAttribute('checked');
+
+  function proxyHandler(url: string) {
+
+    const oldUrl = new URL(url);
+
+    if (isMusic && hlsOn) return url;
+
+    // only proxy music streams
+    const host = isMusic ? ivApi : `https://${oldUrl.searchParams.get('host')}`;
+
+    return url.replace(oldUrl.origin, host);
+  }
+
 
   audioStreams.forEach((_: {
     codec: string,
     url: string,
     quality: string,
     bitrate: string,
-    contentLength: number
+    contentLength: number,
+    mimeType: string
   }, i: number) => {
     const codec = _.codec === 'opus' ? 'opus' : 'aac';
 
-    const oldUrl = new URL(_.url);
-
-    // only proxy music streams
-    const host = data.category === 'Music' ? getApi('invidious') : `https://${oldUrl.searchParams.get('host')}`;
-
-    const newUrl = _.url.replace(oldUrl.origin, host);
 
     // add to DOM
-    bitrateSelector.add(new Option(`${_.quality} ${codec} - ${(_.contentLength / (1024 * 1024)).toFixed(2)} MB`, newUrl));
+    bitrateSelector.add(new Option(`${_.quality} ${codec} - ${(_.contentLength / (1024 * 1024)).toFixed(2)} MB`, proxyHandler(_.url)));
 
+    (<HTMLOptionElement>bitrateSelector.lastElementChild).dataset.type = _.mimeType;
 
     // find preferred bitrate
     const codecPref = preferedCodec ? codec === preferedCodec : true;
@@ -135,8 +162,23 @@ export default async function player(id: string | null = '') {
 
 
   bitrateSelector.selectedIndex = index;
-  audio.src = bitrateSelector.value;
 
+  if (hlsOn) {
+
+    import('hls.js').then(h => {
+      const hls = new h.default();
+      hls.attachMedia(audio);
+      hls.on(h.Events.MEDIA_ATTACHED,
+        () => {
+          hls.loadSource(data.hls);
+        }
+      );
+    });
+  } else
+
+    audio.src = bitrateSelector.value;
+
+  console.log(data.hls, proxyHandler(data.hls))
   // Subtitle data dom injection
 
   for (const option of subtitleSelector.options)

diff --git a/src/scripts/main.ts b/src/scripts/main.ts
@@ -10,9 +10,10 @@ import './settings';
 import './library';
 import './audioEvents';
 import '../components/toggleSwitch';
-import eruda from 'eruda';
 
-eruda.init();
+
+if (import.meta.env.PROD)
+  import('eruda').then(eruda => eruda.default.init());
 
 if (import.meta.env.PROD)
   import('virtual:pwa-register').then(pwa => {

diff --git a/src/scripts/queue.ts b/src/scripts/queue.ts
@@ -11,7 +11,8 @@ const [
   clearQBtn,
   shuffleQBtn,
   removeQBtn,
-  filterG10Btn,
+  filterMusicBtn,
+  filterLT10Btn,
   autoQueueBtn
 ] = (<HTMLSpanElement>document.getElementById('queuetools')).children as HTMLCollectionOf<HTMLButtonElement>;
 
@@ -22,7 +23,7 @@ export function appendToQueuelist(data: DOMStringMap, prepend: boolean = false)
 
   if (queueArray.includes(data.id)) return;
 
-  if (filterG10Btn.classList.contains('filter'))
+  if (filterLT10Btn.classList.contains('filter'))
     if (isLongerThan10Min(<string>data.duration))
       return;
 
@@ -116,9 +117,9 @@ removeQBtn.addEventListener('click', () => {
 
 
 
-filterG10Btn.addEventListener('click', () => {
+filterLT10Btn.addEventListener('click', () => {
 
-  filterG10Btn.classList.toggle('filter');
+  filterLT10Btn.classList.toggle('filter');
   // Prevent Queue Conflicts
   if (removeQBtn.classList.contains('delete'))
     removeQBtn.click();
@@ -176,3 +177,6 @@ new MutationObserver(m => {
 }).observe(queuelist, { childList: true });
 
 
+filterMusicBtn.addEventListener('click', () => {
+  console.log(true)
+});
diff --git a/src/scripts/search.ts b/src/scripts/search.ts
@@ -88,7 +88,7 @@ function searchLoader() {
       // filter livestreams & shorts & append rest
       searchlist.appendChild(
         itemsLoader(
-          items.filter((item: StreamItem) => !item.isShort && item.duration !== -1)
+          items.filter((item: StreamItem) => !item.isShort)
         ));
       // load more results when 3rd last element is visible
 

diff --git a/src/stylesheets/nav.css b/src/stylesheets/nav.css
@@ -23,7 +23,7 @@ nav a.active {
 @media(orientation:portrait) {
 
   nav {
-    height: auto;
+    height: fit-content;
     justify-content: space-around;
     width: 96%;
     padding: 2% 0;

diff --git a/src/stylesheets/search.css b/src/stylesheets/search.css
@@ -27,10 +27,11 @@
   color: inherit;
   font-size: medium;
 
-  &::placeholder {
-    color: inherit;
-    opacity: 75%;
-  }
+}
+
+#superInput::placeholder {
+  color: inherit;
+  opacity: 75%;
 }
 
 #searchFilters {

diff --git a/src/stylesheets/settings.css b/src/stylesheets/settings.css
@@ -16,7 +16,7 @@
 
     toggle-switch,
     span {
-      margin-bottom: 2%;
+      margin-bottom: 4%;
     }
 
     span {

diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css
@@ -87,7 +87,7 @@ section.view {
   }
 
   section {
-    height: calc(96dvh - 2.25rem);
+    height: 100%;
   }
 }