Playlist Art, Minor Fixes

src/App.vue

@@ -27,7 +27,6 @@ const data = reactive({
   url: '',
   urls: [],
   songItems: null,
-  hls: null,
   items: {},
   title: '',
   artist: '',
@@ -127,8 +126,8 @@ function playList(a) {
 }
 
 function playNext(u) {
-  if (data.hls) {
-    data.hls.destroy();
+  if (window.hls) {
+    window.hls.destroy();
   }
 
   audio.value.src = '';
@@ -234,7 +233,7 @@ async function getNext(hash) {
       ...i,
       ...{
         url: '/watch?v=' + i.id,
-        id: null,
+        id: undefined,
       },
     }));
 
@@ -264,12 +263,12 @@ function Stream(res) {
   console.log(res);
 
   if (Hls.isSupported() && useStore().hls !== 'false') {
-    data.hls = new Hls();
+    window.hls = new Hls();
 
-    data.hls.attachMedia(audio.value);
+    window.hls.attachMedia(audio.value);
 
-    data.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
-      data.hls.loadSource(res.hls);
+    window.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+      window.hls.loadSource(res.hls);
     });
   } else {
     data.audioSrc = res.stream;
@@ -348,6 +347,11 @@ onBeforeMount(() => {
 });
 
 onMounted(() => {
+
+  if (window.hls) {
+    window.hls.destroy()
+  }
+
   useLazyLoad();
 
   /* Event Listeners for Lazy Loading */

src/assets/base.css

@@ -234,6 +234,7 @@ button {
 }
 
 .bars-wrap {
+  left: .75rem;
   position: absolute;
   height: 1.5rem;
   width: 2rem;

src/components/Modal.vue

@@ -62,7 +62,7 @@ watch(show, n => {
 }
 .modal-content * {
   width: 100%;
-  padding: 1rem;
+  padding: .5rem 1rem;
 }
 .modal-close {
   color: var(--color-background);

src/components/NewPlaylist.vue

@@ -71,6 +71,7 @@ onMounted(() => {
       <template v-for="i in list">
         <AlbumItem
           :name="i.name"
+          :author="'Songs • ' + i.urls.length"
           :grad="useRand()"
           @open-album="Play(i.name)" />
       </template>

src/components/Playlists.vue

@@ -1,10 +1,13 @@
 <script setup>
+
 defineProps({
   url: String,
   urls: Array,
   show: Boolean,
 });
+
 defineEmits(['playthis']);
+
 </script>
 
 <template>
@@ -17,6 +20,9 @@ defineEmits(['playthis']);
             <div class="bars"></div>
             <div class="bars"></div>
           </span>
+          <div v-else-if="plurl.thumbnails" class="pl-img">
+            <img :src="plurl.thumbnails[0].url" :height=" plurl.thumbnails[0].height" :width="plurl.thumbnails[0].width">
+          </div>
           <span class="pl-main caps">{{ plurl.title }}</span>
         </div>
       </template>
@@ -57,6 +63,25 @@ defineEmits(['playthis']);
   background: var(--color-background-soft);
 }
 .pl-main {
-  padding-left: 3rem;
+  padding-left: 2.75rem;
+}
+.pl-img {
+  top: .45rem;
+  left: .45rem;
+  position: absolute;
+  background-image: var(--src);
+  height: 2.75rem;
+  width: 2.75rem;
+  border-radius: .125rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.pl-img img {
+  height: 100%;
+  width: 100%;
+  border-radius: .125rem;
+}
+.pl-img[data-active=false] {
+  display: none;
 }
 </style>

src/components/StatusBar.vue

@@ -47,7 +47,7 @@ function Save() {
         ">
         <template #content>
           <template v-for="i in list">
-            <div class="flex item" @click="pl = i.name">
+            <div class="flex item" @click="pl = i.name" :data-active="pl == i.name">
               <span>{{ i.name }}</span
               ><span class="ml-auto">{{ i.urls.length || '' }}</span>
             </div>
@@ -177,10 +177,17 @@ function Save() {
   margin-left: auto;
 }
 .item {
-  border-radius: 50rem 0 0 50rem;
+  background: var(--color-background);
+  border-radius: .5rem;
+  margin: .5rem 0;
 }
 .item:hover {
-  background-color: var(--color-background-mute);
+  background: var(--color-background-mute);
+}
+
+.item[data-active=true] {
+  color: var(--color-background);
+  background: linear-gradient(135deg, cornflowerblue, #88c0d0);
 }
 #menu {
   bottom: 1.5rem;

src/scripts/colors.js

@@ -6,11 +6,13 @@ const c = [
   'linear-gradient(45deg, #d08770, #bf616a)',
 ];
 
-export function useColors() {
-  return c;
-}
-
 export function useRand() {
   const i = Math.floor(Math.random() * c.length);
   return c[i];
 }
+
+export function useRandColor() {
+  const r = Math.random().toString(16)
+
+  return '#' + r.substr(r.length - 6)
+}

src/scripts/fetch.js

@@ -1,3 +1,5 @@
+import { useStore } from './util.js'
+
 export function getPipedQuery() {
   const papi = new URLSearchParams(location.search).get('pipedapi');
 
@@ -31,7 +33,7 @@ export async function getJson(url) {
 export async function getJsonPiped(path) {
   const root =
     new URLSearchParams(location.search).get('pipedapi') ||
-    localStorage.getItem('pipedapi') ||
+    useStore().getItem('pipedapi') ||
     'pipedapi.kavin.rocks';
 
   return await getJson('https://' + root + path);