Changes:

- Added pwa support
- Compact view (#100)
- Minor changes

src/components/AlbumItem.vue

@@ -45,5 +45,18 @@ defineEmits(['open-album']);
 }
 .card-text {
   margin-top: 0.5rem;
+  cursor: default;
+}
+
+[data-compact] .card {
+  min-height: 12rem;
+  width: 10rem;
+}
+[data-compact] .card-bg {
+  width: 7rem;
+  height: 7rem;
+}
+[data-compact] .card-text {
+  margin-top: 0.25rem;
 }
 </style>

src/components/Artist.vue

@@ -14,19 +14,17 @@ const subs = JSON.parse(store.subs ? store.subs : '[]'),
   isSub = ref(subs.includes(hash));
 
 function Sub() {
-  if (artist.state.title) {
-    if (isSub.value) {
-      subs.splice(subs.indexOf(hash), 1);
-      store.setItem('subs', JSON.stringify(subs));
-      isSub.value = false;
-    } else {
-      subs.push(hash);
-      store.setItem('subs', JSON.stringify(subs));
-      isSub.value = true;
-    }
+  if (!artist.state.title) return;
 
-    alert(JSON.stringify(subs));
+  if (isSub.value) {
+    subs.splice(subs.indexOf(hash), 1);
+    isSub.value = false;
+  } else {
+    subs.push(hash);
+    isSub.value = true;
   }
+
+  store.setItem('subs', JSON.stringify(subs));
 }
 </script>
 

src/components/Player.vue

@@ -118,6 +118,11 @@ async function Stream() {
   }
 }
 
+function destroy() {
+  window.audioPlayer.destroy();
+  window.audioPlayer = undefined;
+}
+
 watch(
   () => player.state.play,
   () => {
@@ -150,8 +155,9 @@ onMounted(() => {
   if ('mediaSession' in navigator) {
     navigator.mediaSession.setActionHandler('play', () => {
       player.state.status = 'pause';
+
       audio.value.play().catch(err => {
-        alert(err);
+        console.log(err);
         player.state.status = 'play';
       });
     });
@@ -163,7 +169,7 @@ onMounted(() => {
 
     navigator.mediaSession.setActionHandler('previoustrack', () => {
       if (data.state.urls.length > 2) {
-        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
+        const i = data.state.urls.findIndex(s => s.url == data.state.url);
 
         data.getSong(data.state.urls[i - 1].url);
       }
@@ -171,7 +177,7 @@ onMounted(() => {
 
     navigator.mediaSession.setActionHandler('nexttrack', () => {
       if (data.state.urls.length > 2) {
-        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
+        const i = data.state.urls.findIndex(s => s.url == data.state.url);
 
         data.getSong(data.state.urls[i + 1].url);
       }
@@ -188,16 +194,10 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  if (window.audioPlayer) {
-    window.audioPlayer.destroy();
-    window.audioPlayer = undefined;
-  }
+  if (window.audioPlayer) destroy();
 });
 onUnmounted(() => {
-  if (window.audioPlayer) {
-    window.audioPlayer.destroy();
-    window.audioPlayer = undefined;
-  }
+  if (window.audioPlayer) destroy();
 });
 </script>
 

src/components/Prefs.vue

@@ -19,7 +19,8 @@ import('@/assets/version.json').then(v => {
 const { t, setupLocale } = useI18n(),
   instances = ref([]),
   hypInstances = ref([]),
-  next = ref(false);
+  next = ref(false),
+  compact = ref(false);
 
 getJson('https://piped-instances.kavin.rocks').then(i => {
   instances.value = i;
@@ -60,8 +61,14 @@ function setLang(locale) {
   setStore('locale', locale);
 }
 
+function setCodec(codec) {
+  setStore('codec', codec);
+  if (window.audioPlayer)
+    window.audioPlayer.configure('preferredAudioCodecs', codec.split(':'));
+}
+
 function getStoreBool(key, ele) {
-  ele.value = getStore(key) || true;
+  ele.value = getStore(key) || ele.value;
 }
 
 const verifyApi = computed(() =>
@@ -82,6 +89,7 @@ const verifyApi = computed(() =>
 
 onMounted(() => {
   getStoreBool('next', next);
+  getStoreBool('compact', compact);
 });
 </script>
 
@@ -100,6 +108,17 @@ onMounted(() => {
     <option value="nord">{{ t('pref.nord') }}</option>
   </select>
 
+  <div class="left">
+    <input
+      type="checkbox"
+      name="pref-chk-compact"
+      id="pref-chk-compact"
+      class="input"
+      @change="setStore('compact', $event.target.checked)"
+      v-model="compact" />
+    <label for="pref-chk-compact">{{ t('pref.compact') }}</label>
+  </div>
+
   <h2>Language</h2>
 
   <select
@@ -145,7 +164,7 @@ onMounted(() => {
       name="pref-codec"
       class="input"
       :value="getStore('codec') || 'opus:mp4a'"
-      @change="setStore('codec', $event.target.value)">
+      @change="setCodec($event.target.value)">
       <option value="opus:mp4a">opus, mp4a</option>
       <option value="mp4a:opus">mp4a, opus</option>
       <option value="opus">opus</option>

src/components/SongItem.vue

@@ -173,4 +173,12 @@ span.bi-three-dots-vertical {
 .bi-dash-lg {
   color: indianred;
 }
+
+[data-compact] .card {
+  margin: 0;
+}
+[data-compact] .song-bg {
+  width: 70px;
+  height: 70px;
+}
 </style>