6.1 : Implemented Download Functionality & other fixes (#134)

* Removed 'allowJs'

* fix : Subtitle turn off

* Transition bg & txt color for body

* prevent potential issue of activating pwa in serve when eruda is turned off

* removed audio dataset seconds in favor of currentTime

* future : library icons integrated

index.html

@@ -66,7 +66,7 @@
       <img height="100%" width="100%" crossorigin="anonymous" alt="Current Playing Media Thumbnail">
 
       <div id="metadata">
-        <a id="title" href="" target="_blank">ytify 6.0</a>
+        <a id="title" href="" target="_blank">ytify 6.1</a>
         <a id="author" href="" target="_blank">Channel</a>
         <select id="bitrateSelector">
           <option value="">Bitrate</option>
@@ -77,7 +77,7 @@
       </div>
 
 
-      <audio data-seconds="0">
+      <audio>
         <track src="subtitles.ttml" kind="subtitles" label="Expanded TTML Sample" srclang="en" />
       </audio>
 
@@ -87,9 +87,15 @@
 
     <section id="upcoming">
       <span id="queuetools">
-        <button class="ri-delete-bin-7-line">&nbsp;Clear</button>
-        <button class="ri-shuffle-line">&nbsp;Shuffle</button>
-        <button class="ri-subtract-line">&nbsp;Remove</button>
+        <button>
+          <i class="ri-delete-bin-7-line"></i> Clear
+        </button>
+        <button>
+          <i class="ri-shuffle-line"></i> Shuffle
+        </button>
+        <button>
+          <i class="ri-subtract-line"></i> Remove
+        </button>
       </span>
       <div id="queuelist">
         <h1 align="center">upcoming streams show here</h1>
@@ -133,13 +139,19 @@ <h1>Streams related to your current playing stream show up here.</h1>
 
     <section id="library">
       <details>
-        <summary id="library:history">History</summary>
+        <summary id="history">
+          <i class="ri-history-line"></i> History
+        </summary>
       </details>
       <details>
-        <summary>Favorites</summary>
+        <summary id="favorites">
+          <i class="ri-heart-fill"></i> Favorites
+        </summary>
       </details>
       <details>
-        <summary>Playlists</summary>
+        <summary>
+          <i class="ri-play-list-2-line"></i> Playlists
+        </summary>
       </details>
     </section>
 
@@ -161,7 +173,7 @@ <h1>Streams related to your current playing stream show up here.</h1>
       <toggle-switch id="thumbnailSwitch" checked>Load Thumbnails</toggle-switch>
       <toggle-switch id="qualitySwitch">Highest Quality Audio</toggle-switch>
       <toggle-switch id="suggestionsSwitch" checked>Display Search Suggestions</toggle-switch>
-      <toggle-switch id="librarySwitch" checked>Disable Library</toggle-switch>
+      <toggle-switch checked id="librarySwitch">Disable Library</toggle-switch>
 
       <span>
         <label for="roundnessChanger">UI Roundness</label>
@@ -240,22 +252,22 @@ <h1>playlist or channel items show here</h1>
     <ul>
       <li><i class="ri-play-line"></i>Play Now</li>
       <li><i class="ri-list-check-2"></i>Enqueue</li>
-      <li id="psc">
+      <li>
         <i class="ri-play-list-add-line"></i>
         <select id="playlistSelector">
           <option>Add To Playlist</option>
         </select>
       </li>
       <li><i class="ri-rfid-line"></i>Start Radio</li>
-      <!-- hidden till racoon is ready -->
-      <li class="hide"><i class="ri-download-2-line"></i>Download</li>
+      <li>
+        <i class="ri-download-2-line"></i>
+        <select id="downloadSelector">
+          <option>Download</option>
+        </select>
+      </li>
       <li><i class="ri-youtube-line"></i>View Channel</li>
     </ul>
   </div>
-  <div id="download" class="hide">
-    <button class="ri-close-line"></button>
-    <iframe></iframe>
-  </div>
   <script src="/src/scripts/main.ts" type="module"></script>
 </body>
 

src/lib/player.ts

@@ -32,7 +32,6 @@ export default async function player(id: string | null = '') {
     return;
   }
 
-  audio.dataset.seconds = '0';
 
   // extracting opus streams and storing m4a streams
 
@@ -46,12 +45,12 @@ export default async function player(id: string | null = '') {
     if (value.codec === "opus") {
       if (isSafari) continue;
       opus.urls.push(value.url);
-      opus.bitrates.push(parseInt(value.quality));
+      opus.bitrates.push(value.bitrate);
       bitrateSelector.add(new Option(value.quality, value.url));
     }
     else {
       m4a.urls.push(value.url);
-      m4a.bitrates.push(parseInt(value.quality));
+      m4a.bitrates.push(value.bitrate);
       isSafari ?
         bitrateSelector.add(new Option(value.quality, value.url)) :
         m4a.options.push(new Option(value.quality, value.url));
@@ -62,7 +61,7 @@ export default async function player(id: string | null = '') {
 
   if (
     !getSaved('quality') &&
-    Math.min(...opus.bitrates) > 64 &&
+    Math.min(...opus.bitrates) > 65536 &&
     !isSafari) {
 
     opus.urls = opus.urls.concat(m4a.urls);

src/scripts/api.ts

@@ -1,4 +1,5 @@
-import { pipedInstances } from "../lib/dom";
+import { audio, pipedInstances } from "../lib/dom";
+import player from "../lib/player";
 import { getSaved, save } from "../lib/utils";
 
 
@@ -30,12 +31,15 @@ fetch(apiList)
 
 // Instance Selector change event
 
-pipedInstances.addEventListener('change', () => {
+pipedInstances.addEventListener('change', async () => {
   const instance = pipedInstances.options[pipedInstances.selectedIndex];
   const name = instance.textContent;
   const url = instance.value;
   if (name && url)
     save('pipedInstance', name + '|' + url);
   if (url === defURL)
     localStorage.removeItem('pipedInstance');
-});
+  const timeOfSwitch = audio.currentTime;
+  await player(audio.dataset.id);
+  audio.currentTime = timeOfSwitch;
+});

src/scripts/audioEvents.ts

@@ -113,13 +113,10 @@ audio.addEventListener('timeupdate', () => {
     return;
 
   const seconds = Math.floor(audio.currentTime);
-  const data = parseInt(audio.dataset.seconds || '0');
-  // only update every second
-  if (seconds > data) {
-    progress.value = seconds.toString();
-    currentDuration.textContent = convertSStoHHMMSS(seconds);
-  }
-  audio.dataset.seconds = seconds.toString();
+
+  progress.value = seconds.toString();
+  currentDuration.textContent = convertSStoHHMMSS(seconds);
+
 });
 
 

src/scripts/library.ts

@@ -1,7 +1,44 @@
-/* 
+/*
 
-Need to Learn IndexedDB
+const openDb = indexedDB.open('library', 1);
 
+let db: IDBDatabase;
 
+//upgrade event
+
+openDb.onupgradeneeded = () => {
+  db = openDb.result;
+  console.log("upgrade needed", db);
+}
+
+//on success
+
+openDb.onsuccess = () => {
+
+  console.log("success is called", db);
+
+  // Create the history object store
+
+  const historyStore = db.createObjectStore(
+    'history', { keyPath: 'id' }
+  );
+
+  console.log(db.objectStoreNames)
+}
+
+openDb.onerror = () => {
+  console.log('error : ', openDb.result)
+}
+
+// deletion procedure 
+function deleteDB() {
+  const deletion_request = indexedDB.deleteDatabase('library')
+  deletion_request.onerror = _ => console.log('Error : ', _);
+  deletion_request.onsuccess = _ => console.log('Success : ', _);
+}
+
+
+// to view existing dbs in eruda
+indexedDB.databases().then(_ => _.forEach($ => console.log($)))
 
 */

src/scripts/miscEvents.ts

@@ -1,22 +1,21 @@
 import { audio, bitrateSelector, img, subtitleContainer, subtitleSelector, subtitleTrack } from "../lib/dom";
 import player from "../lib/player";
-import { blankImage, getSaved, params, parseTTML, save, updatePositionState } from "../lib/utils";
+import { blankImage, getSaved, parseTTML, save } from "../lib/utils";
 
 
 
 bitrateSelector.addEventListener('change', () => {
-  const timeOfSwitch = parseInt(audio.dataset.seconds || '0');
+  const timeOfSwitch = audio.currentTime;
   audio.src = bitrateSelector.value;
   audio.currentTime = timeOfSwitch;
   audio.play();
-  updatePositionState();
 });
 
 
 
 subtitleSelector.addEventListener('change', () => {
   subtitleTrack.src = subtitleSelector.value;
-  subtitleTrack.src ?
+  subtitleSelector.value ?
     subtitleContainer.classList.remove('hide') :
     subtitleContainer.classList.add('hide');
   parseTTML();
@@ -35,13 +34,9 @@ qualitySwitch.addEventListener('click', async () => {
     localStorage.removeItem('quality') : // low
     save('quality', 'hq'); // high
 
-  if (params.has('s')) {
-    const timeOfSwitch = parseInt(audio.dataset.seconds || '');
-    await player(params.get('s'));
-    audio.currentTime = timeOfSwitch;
-    updatePositionState();
-  }
-
+  const timeOfSwitch = audio.currentTime;
+  await player(audio.dataset.id);
+  audio.currentTime = timeOfSwitch;
 })
 
 

src/scripts/superModal.ts

@@ -7,15 +7,16 @@ const [playNow, enqueue, atpContainer, startRadio, downloadBtn, openChannelBtn]
 
 
 
-superModal.addEventListener('click', e => {
-  const el = <HTMLLIElement | HTMLSelectElement>e.target;
-  if (el.matches('#psc') && !el.matches('select')) return;
-  superModal.classList.toggle('hide');
+superModal.addEventListener('click', _ => {
+  if ((<HTMLDivElement>_.target).matches('#superModal'))
+    superModal.classList.toggle('hide');
 });
 
 
 playNow.addEventListener('click', () => {
   player(superModal.dataset.id);
+
+  superModal.classList.toggle('hide');
 });
 
 
@@ -24,6 +25,7 @@ enqueue.addEventListener('click', () => {
   if (firstItemInQueue().matches('h1'))
     firstItemInQueue().remove();
   appendToQueuelist(superModal.dataset);
+  superModal.classList.toggle('hide');
 });
 
 
@@ -67,32 +69,58 @@ startRadio.addEventListener('click', async () => {
 
   upcomingIcon.classList.replace('ri-loader-3-line', 'ri-skip-forward-line');
 
+  superModal.classList.toggle('hide');
 });
 
 
-const atpSelector = <HTMLSelectElement>atpContainer.firstElementChild;
+const atpSelector = <HTMLSelectElement>atpContainer.lastElementChild;
+
+atpContainer.addEventListener('click', () => {
+
+})
 
 atpSelector.addEventListener('change', () => {
-  superModal.classList.toggle('hide');
+
 });
 
 
-const download = <HTMLDivElement>document.getElementById('download');
-const iframe = <HTMLIFrameElement>download.lastElementChild;
-const exitDownloader = <HTMLButtonElement>download.firstElementChild;
+const dlSelector = <HTMLSelectElement>document.getElementById('downloadSelector');
 
-downloadBtn.addEventListener('click', () => {
-  const url = 'https://shailendramaurya.github.io/racoon/?link=https://youtu.be/' + superModal.dataset.id;
-  iframe.src = url;
-  download.classList.toggle('hide');
 
+downloadBtn.addEventListener('click', () => {
+  dlSelector.innerHTML = '<option>Fetching...</option>';
+
+  fetch(pipedInstances.value + '/streams/' + superModal.dataset.id)
+    .then(_ => _.json())
+    .then(_ => _.audioStreams)
+    .then(streams => {
+      dlSelector.innerHTML = '<option value>Download</option';
+      for (const stream of streams) {
+        dlSelector.add(
+          new Option(
+            stream.quality +
+            (stream.codec === 'opus' ? ' opus' : ' m4a'),
+            stream.itag));
+      }
+    })
+    .catch(() => dlSelector.innerHTML = '<option>Fetching Failed</option')
 })
 
-exitDownloader.addEventListener('click', () => {
-  iframe.src = '';
-  download.classList.toggle('hide');
+
+dlSelector.addEventListener('change', () => {
+  const provider = 'https://projectlounge.pw/ytdl';
+  const streamUrl = 'https://youtu.be/' + superModal.dataset.id;
+  const itag = dlSelector.value;
+  const link = provider + '/download?url=' + streamUrl + '&format=' + itag;
+
+  if (itag)
+    open(link);
 })
 
+
+
+
 openChannelBtn.addEventListener('click', () => {
   open('https://youtube.com' + superModal.dataset.channelUrl);
+  superModal.classList.toggle('hide');
 })