Added Lyrics Support

.prettierignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 public
+*.md

ISSUE_TEMPLATE.md

@@ -0,0 +1,21 @@
+
+## Browser
+
+- [ ] Chromium Based
+- [ ] Firefox Based
+- [ ] Other
+
+<!-- Name and Version -->.
+
+## Expected Behaviour
+
+<!-- TODO -->
+
+
+## Actual Behaviour
+
+<!-- TODO -->
+
+## Misc. ( optional )
+
+<!-- Screen Shots / Console Logs / Network Requests / Anything else Relevent -->

README.md

@@ -1,4 +1,4 @@
-# \[WIP\] Hyperpipe
+# [WIP] Hyperpipe
 
 ![On Codeberg](https://codeberg.org/Hyperpipe/static/raw/branch/master/on-codeberg.svg)
 
@@ -13,9 +13,9 @@ A Privacy Respecting Frontend for YouTube Music inspired and built with the help
 
 - Bugs
 - Messy Code
-- Stuff the used to work to Break in the future.
+- Stuff that used to work to break in the future.
 
-_But if you see any on the following, Please open an issue_
+_But if you see any of the following, Please open an issue_
 
 ## Usage
 
@@ -49,15 +49,21 @@ npm run build
 | :--------------------------: | :---------------: |
 | [hyperpipe.surge.sh][hypipe] |        🇩🇪         |
 
+
 ## LICENSE
 
 ### GPL v3 Only
 
 Please refer to [LICENSE][license].
 
-You can reach out to me on
+## Help
+
+Feel free to join in on [Matrix!](https://matrix.to/#/#hyperpipe:nitro.chat)
+
+You can reach out to me personally on:
 
 - snematoda [dot] 751k2 [at] aleeas [dot] com
+- [Matrix - @snematoda:nitro.chat ](https://matrix.to/#/@snematoda:nitro.chat)
 
 ### Dependencies and Mentions
 

src/App.vue

@@ -8,6 +8,7 @@ import NowPlaying from './components/NowPlaying.vue';
 import Search from './components/Search.vue';
 import NewPlaylist from './components/NewPlaylist.vue';
 import Playlists from './components/Playlists.vue';
+import Lyrics from './components/Lyrics.vue';
 import Artist from './components/Artist.vue';
 import Prefs from './components/Prefs.vue';
 
@@ -31,7 +32,9 @@ const data = reactive({
   duration: 0,
   time: 0,
   showplaylist: false,
+  showlyrics: false,
   loop: false,
+  lyrics: '',
 });
 
 const artist = reactive({
@@ -210,13 +213,15 @@ async function getArtist(e) {
 async function getNext(hash) {
   if (
     !data.urls ||
-    data.urls.filter(s => s.url == data.url) ||
+    !data.urls.filter(s => s.url == data.url)[0] ||
     data.urls.length == 1
   ) {
     const json = await getJson(
       'https://hyperpipeapi.onrender.com/next/' + hash,
     );
 
+    data.lyrics = json.lyricsId;
+
     data.url = '/watch?v=' + json.songs[0].id;
     console.log(json);
 
@@ -432,16 +437,24 @@ onMounted(() => {
     :urls="data.urls"
     :show="data.showplaylist" />
 
+  <Lyrics
+    v-if="data.showlyrics"
+    :id="data.lyrics"
+    :curl="data.url"
+    :iniurl="data.urls[0]?.url" />
+
   <StatusBar
     @play="playPause"
     @vol="setVolume"
     @list="Toggle"
+    @lyrics="Toggle"
     @loop="Toggle"
     @save="SaveTrack"
     @change-time="setTime"
     :state="data.state"
     :time="data.time"
     :show="data.showplaylist"
+    :lyrics="data.showlyrics"
     :loop="data.loop" />
 
   <audio

src/components/Lyrics.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, watch } from 'vue';
+
+import { getJson } from '../scripts/fetch.js';
+
+const props = defineProps({
+    id: String,
+    curl: String,
+    iniurl: String,
+  }),
+  text = ref(''),
+  source = ref('');
+
+console.log(props);
+
+function get() {
+  if (props.id && props.curl === props.iniurl) {
+    console.log(props.id);
+
+    getJson('https://hyperpipeapi.onrender.com/browse/' + props.id).then(
+      res => {
+        text.value = res.text;
+        source.value = res.source;
+      },
+    );
+  } else if (props.curl) {
+    getJson(
+      'https://hyperpipeapi.onrender.com/next/' +
+        props.curl.replace('/watch?v=', ''),
+    ).then(next => {
+      getJson('https://hyperpipeapi.onrender.com/browse/' + next.lyricsId).then(
+        res => {
+          text.value = res.text;
+          source.value = res.source;
+        },
+      );
+    });
+  }
+}
+
+get();
+
+watch(
+  () => props.curl,
+  () => {
+    get();
+  },
+);
+</script>
+
+<template>
+  <div class="ly-modal">
+    <pre>{{ text }}</pre>
+    <div>{{ source }}</div>
+  </div>
+</template>
+
+<style scoped>
+.ly-modal {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 2rem;
+  bottom: 5rem;
+  right: 1rem;
+  width: 30rem;
+  max-width: calc(100% - 2rem);
+  background: var(--color-background-mute);
+  border-radius: 0.5rem;
+  z-index: 99999;
+  box-shadow: 0.1rem 0.1rem 1rem var(--color-shadow);
+  padding: 1rem;
+  overflow-y: auto;
+}
+pre {
+  font-family: inherit;
+  font-size: 1.25rem;
+  letter-spacing: 0.125rem;
+  white-space: pre-wrap;
+}
+div {
+  padding: 1rem;
+  letter-spacing: 0.1rem;
+  font-weight: 600;
+}
+</style>

src/components/StatusBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import Modal from './Modal.vue';
 import { useListPlaylists } from '../scripts/db.js';
 
@@ -8,29 +8,33 @@ defineProps({
   time: Number,
   show: Boolean,
   loop: Boolean,
+  lyrics: Boolean,
 });
 
 const emit = defineEmits([
     'vol',
     'play',
     'list',
+    'lyrics',
     'loop',
     'save',
     'change-time',
   ]),
-  showVol = ref(false),
   vol = ref(1),
-  showmenu = ref(false),
+  showme = reactive({
-  showpl = ref(false),
+    menu: false,
+    pl: false,
+    vol: false,
+  }),
   pl = ref(''),
   list = ref([]);
 
 function Save() {
-  showpl.value = true;
+  showme.pl = true;
   useListPlaylists(res => {
     console.log(res);
     list.value = res;
-    showmenu.value = false;
+    showme.menu = false;
   });
 }
 </script>
@@ -39,11 +43,11 @@ function Save() {
     <Transition name="fade">
       <Modal
         n="2"
-        :display="showpl"
+        :display="showme.pl"
         title="Select Playlist to Add"
         @show="
           e => {
-            showpl = e;
+            showme.pl = e;
           }
         ">
         <template #content>
@@ -55,12 +59,12 @@ function Save() {
           </template>
         </template>
         <template #buttons>
-          <button aria-label="Cancel" @click="showpl = false">Cancel</button>
+          <button aria-label="Cancel" @click="showme.pl = false">Cancel</button>
           <button
             aria-label="Add Song"
             @click="
               if (pl) $emit('save', pl);
-              showpl = false;
+              showme.pl = false;
             ">
             Add
           </button>
@@ -95,10 +99,10 @@ function Save() {
       <button
         id="vol-btn"
         aria-label="Volume Buttons"
-        @click="showVol = !showVol"
+        @click="showme.vol = !showme.vol"
         class="popup-wrap bi bi-volume-up">
         <Transition name="fade">
-          <div v-if="showVol" id="vol" class="popup">
+          <div v-if="showme.vol" id="vol" class="popup">
             <input
               id="vol-input"
               aria-label="Volume Input"
@@ -117,10 +121,10 @@ function Save() {
         class="bi bi-three-dots"
         aria-label="More Controls"
         @click="
-          showmenu = !showmenu;
+          showme.menu = !showme.menu;
-          if (show) $emit('list', 'showplaylist');
+          show ?? $emit('list', 'showplaylist');
         "></button>
-      <div id="menu" v-if="showmenu" class="popup">
+      <div id="menu" v-if="showme.menu" class="popup">
         <button
           id="addToPlaylist"
           title="Add Current Song to a Playlist"
@@ -133,6 +137,10 @@ function Save() {
           aria-label="Current Playlist"
           :class="'bi bi-music-note-list ' + show"
           @click="$emit('list', 'showplaylist')"></button>
+        <button
+          id="btn-lyrics"
+          :class="'bi bi-file-music ' + lyrics"
+          @click="$emit('lyrics', 'showlyrics')"></button>
         <button
           id="loop-btn"
           title="Loop"