From 96da42f1cfa1a78fc41b6c39b37f6fa666dc023c Mon Sep 17 00:00:00 2001
From: Jon Dough <49297268+stjet@users.noreply.github.com>
Date: Mon, 18 Mar 2024 08:07:46 +0000
Subject: [PATCH] subtitles and sort by fav

---
 host.ts                           |  5 ++-
 templates/components/listing.html |  2 +-
 templates/index.html              |  9 +++++
 templates/player.html             | 61 +++++++++++++++++++++----------
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/host.ts b/host.ts
index 1ab9588..13b8963 100644
--- a/host.ts
+++ b/host.ts
@@ -33,7 +33,7 @@ createServer((req, res) => {
     req_path = path.join(__dirname, "build", decodeURI(req.url), "index.html");
   } else {
     //is file
-    if (url_obj.pathname.startsWith("/anime_assets") || url_obj.pathname.startsWith("/manga_assets") || url_obj.pathname.startsWith("/music_assets")) {
+    if (url_obj.pathname.startsWith("/anime_assets") || url_obj.pathname.startsWith("/manga_assets") || url_obj.pathname.startsWith("/music_assets") || url_obj.pathname.startsWith("/music_subtitle_assets")) {
       req_path = path.join(__dirname, "static_assets", decodeURI(req.url));
     } else {
       req_path = path.join(__dirname, "build", decodeURI(req.url));
@@ -97,6 +97,9 @@ createServer((req, res) => {
     case "xml":
       content_type = "text/xml";
       break;
+    case "vtt":
+      content_type = "text/vtt";
+      break;
     case "png":
     case "ico":
       content_type = "image/png";
diff --git a/templates/components/listing.html b/templates/components/listing.html
index f3ddd8c..4bb0d40 100644
--- a/templates/components/listing.html
+++ b/templates/components/listing.html
@@ -1 +1 @@
-<li class="listing [[ listing.type ]]-listing"><a href="/[[ listing.type ]]/[[ listing.name ]]">[[ if:listing.favourites ]][[ if:listing.favourites.listing ]]★[[ endif ]][[ endif ]][[ listing.name ]] ([[ listing.type ]])</a></li>
\ No newline at end of file
+<li class="listing [[ listing.type ]]-listing[[ if:listing.favourites.listing ]] favourited-listing[[ endif ]]"><a href="/[[ listing.type ]]/[[ listing.name ]]">[[ if:listing.favourites ]][[ if:listing.favourites.listing ]]★[[ endif ]][[ endif ]][[ listing.name ]] ([[ listing.type ]])</a></li>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index a0634e1..4015e9c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,6 +18,7 @@
         <option value="anime">Anime</option>
         <option value="manga">Manga</option>
         <option value="music">Music</option>
+        <option value="favourited">Favourited</option>
       </select>
       <div>
         <ul>
@@ -58,6 +59,14 @@
               l.style.display = "none";
             }
           });
+        } else if (show_value === "favourited") {
+          document.querySelectorAll(".listing").forEach((l) => {
+            if (l.classList.contains("favourited-listing")) {
+              l.style.display = "list-item";
+            } else {
+              l.style.display = "none";
+            }
+          });
         }
       }
       show_change();
diff --git a/templates/player.html b/templates/player.html
index c9f3852..c353d65 100644
--- a/templates/player.html
+++ b/templates/player.html
@@ -23,6 +23,9 @@
       #filters-container {
         padding-left: 15px;
       }
+      #captions-box {
+        height: 1em;
+      }
       .artist-song-filter {
         padding-left: 15px;
       }
@@ -57,7 +60,10 @@
           <b>Current Song <span id="current-song"></span></b>
           <br>
           <audio id="audio" type="audio/mpeg" controls>
+            <track id="audio-captions" default kind="captions" src=""/>
           </audio>
+          <div id="captions-box">
+          </div>
           <br>
           <input type="button" value="Skip Song" onclick="next_song()"/>
         </div>
@@ -99,7 +105,6 @@
       [[ endfor ]]
     </div>
     <script>
-      //TODO: queue
       //help where are all the type annotations
       const songs = Array.from(document.getElementById("songs").children).map((c) => c.innerText);
       let playable_songs = songs;
@@ -109,33 +114,43 @@
       let show_title = false;
       let in_queue_ele = document.getElementById("in-queue");
       let empty_ele = document.getElementById("empty-queue");
-      //set random song
       let audio_ele = document.getElementById("audio");
-      const random_song_start = playable_songs[Math.floor(Math.random() * playable_songs.length)];
-      document.getElementById("current-song").innerText = random_song_start;
-      played.push(played);
-      audio_ele.src = `/music_assets/${random_song_start}.mp3`;
+      let captions_ele = document.getElementById("audio-captions");
+      let captions_box = document.getElementById("captions-box");
+
       //"ended" event
       function next_song() {
+        captions_box.innerHTML = "";
         const not_played = playable_songs.filter((song) => !played.includes(song));
         if (not_played.length === 0) return;
-        let next_song = not_played[Math.floor(Math.random() * not_played.length)];
+        let next = not_played[Math.floor(Math.random() * not_played.length)];
         if (queue.length > 0) {
-          next_song = queue.shift()[0];
+          next = queue.shift()[0];
           in_queue_ele.children[0].remove();
           if (queue.length === 0) empty_ele.style.display = "block";
         }
-        document.getElementById("current-song").innerText = next_song;
-        played.push(next_song);
-        audio_ele.src = `/music_assets/${next_song}.mp3`;
+        document.getElementById("current-song").innerText = next;
+        played.push(next);
+        audio_ele.src = `/music_assets/${next}.mp3`;
         audio_ele.play();
         if (show_title) {
-          document.title = `Now playing: ${next_song}`;
+          document.title = `Now playing: ${next}`;
         } else {
           document.title = "possibly a music player";
         }
+        captions_ele.src = `/music_subtitle_assets/${next}.vtt`;
       }
       audio_ele.addEventListener("ended", next_song);
+
+      captions_ele.addEventListener("cuechange", () => {
+        //do we need to sanitize this? surely not, right?
+        captions_box.innerHTML = "";
+        let active_cue = captions_ele.track.activeCues[0];
+        if (active_cue) {
+          captions_box.appendChild(active_cue.getCueAsHTML());
+        }
+      });
+
       function add_to_queue(name) {
         let queue_id = `queue-item-${queue_id_counter}`;
         queue.push([name, queue_id]);
@@ -156,6 +171,7 @@
         in_queue_ele.appendChild(queue_item);
         queue_id_counter++;
       }
+
       //show filters toggle
       const show_filters_ele = document.getElementById("show-filters");
       function filter_check() {
@@ -167,13 +183,16 @@
       }
       show_filters_ele.onchange = filter_check;
       filter_check();
+
       //show track in page title toggle
       const show_title_ele = document.getElementById("show-title");
       function title_check() {
         show_title = show_title_ele.checked;
       }
       show_title_ele.onchange = title_check;
-      filter_check();
+      title_check();
+      next_song();
+
       //artist and artist song filter toggle
       function artist_filter_toggle(artist) {
         document.querySelectorAll(`#${artist}-song-filter > input[type=\"checkbox\"]`).forEach((c) => {
@@ -181,21 +200,25 @@
           c.onchange();
         });
       }
+
       function update_playable_songs() {
         playable_songs = songs.filter((song) => document.getElementById(`${song.replace("/", "-").replaceAll("\"", "\\\"")}-checkbox`).checked);
       }
-      function filter_select_all() {
-        document.querySelectorAll(".artist-filter > input[type=\"checkbox\"]").forEach((c) => {
-          c.checked = true;
-          c.onchange();
-        });
-      }
+
       function filter_deselect_all() {
         document.querySelectorAll(".artist-filter > input[type=\"checkbox\"]").forEach((c) => {
           c.checked = false;
           c.onchange();
         });
       }
+
+      function filter_select_all() {
+        document.querySelectorAll(".artist-filter > input[type=\"checkbox\"]").forEach((c) => {
+          c.checked = true;
+          c.onchange();
+        });
+      }
+
       filter_select_all();
     </script>
   </body>