Added info page

src/App.vue

@@ -11,6 +11,7 @@ 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 Info from './components/Info.vue';
 import Artist from './components/Artist.vue';
 import Prefs from './components/Prefs.vue';
 
@@ -29,6 +30,7 @@ const data = reactive({
   songItems: null,
   items: {},
   title: '',
+  description: '',
   artist: '',
   artistUrl: '',
   state: 'play',
@@ -36,6 +38,7 @@ const data = reactive({
   time: 0,
   showplaylist: false,
   showlyrics: false,
+  showinfo: false,
   loop: false,
   lyrics: '',
 });
@@ -172,6 +175,7 @@ async function getSong(e) {
   console.log(json);
 
   data.artUrl = json.thumbnailUrl;
+  data.description = json.description;
   data.cover = `--art: url(${json.thumbnailUrl});`;
   data.nowtitle = json.title;
   data.nowartist = json.uploader.split(' - ')[0];
@@ -489,6 +493,8 @@ onMounted(() => {
     :curl="data.url"
     :iniurl="data.urls[0]?.url" />
 
+  <Info v-if="data.showinfo" :text="data.description" />
+
   <StatusBar
     @play="playPause"
     @vol="setVolume"

src/components/Info.vue

@@ -0,0 +1,16 @@
+<script setup>
+import TextModal from './TextModal.vue';
+
+defineProps(['text']);
+
+const parse = d =>
+  new DOMParser().parseFromString(d, 'text/html').body.innerText;
+</script>
+
+<template>
+  <TextModal>
+    <template #content>
+      <pre>{{ parse(text.replaceAll('<br>', '\n')) }}</pre>
+    </template>
+  </TextModal>
+</template>

src/components/Lyrics.vue

@@ -3,6 +3,8 @@ import { ref, watch } from 'vue';
 
 import { getJson } from '../scripts/fetch.js';
 
+import TextModal from './TextModal.vue';
+
 const props = defineProps({
     id: String,
     curl: String,
@@ -56,37 +58,17 @@ watch(
 </script>
 
 <template>
-  <div class="ly-modal">
-    <pre class="placeholder" :data-loaded="curl ? status : true">{{
-      text
-    }}</pre>
-    <div>{{ source }}</div>
-  </div>
+  <TextModal>
+    <template #content>
+      <pre class="placeholder" :data-loaded="curl ? status : true">{{
+        text
+      }}</pre>
+      <div>{{ source }}</div>
+    </template>
+  </TextModal>
 </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;
-}
 pre:empty::before {
   --ico: '\f3a5';
 }
@@ -96,10 +78,4 @@ pre[data-loaded='false']:empty::after {
 pre[data-loaded='true']:empty::after {
   --text: 'No Lyrics...';
 }
-
-div {
-  padding: 1rem;
-  letter-spacing: 0.1rem;
-  font-weight: 600;
-}
 </style>

src/components/StatusBar.vue

@@ -121,6 +121,11 @@ function Save() {
           lyrics ? $emit('toggle', 'showlyrics') : '';
         "></button>
       <div id="menu" v-if="showme.menu" class="popup">
+        <button
+          id="info-btn"
+          class="bi bi-info-circle"
+          aria-label="Show Information About Song"
+          @click="$emit('toggle', 'showinfo')"></button>
         <button
           id="addToPlaylist"
           title="Add Current Song to a Playlist"

src/components/TextModal.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="txt-modal">
+    <slot name="content"></slot>
+  </div>
+</template>
+
+<style scoped>
+.txt-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;
+}
+:deep(pre) {
+  font-family: inherit;
+  font-size: 1.25rem;
+  letter-spacing: 0.125rem;
+  white-space: pre-wrap;
+}
+
+:deep(div) {
+  padding: 1rem;
+  letter-spacing: 0.1rem;
+  font-weight: 600;
+}
+</style>