Added Lyrics Support

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),
-  showpl = ref(false),
+  showme = reactive({
+    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;
-          if (show) $emit('list', 'showplaylist');
+          showme.menu = !showme.menu;
+          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"