Changes:

- Scroll To Top for Albums and Artists ( closes #123 )
- Opt-in for Prefers Reduced Motion ( closes #124 )
- Thumbnails for local playlists
- Better SW caching

src/components/NewPlaylist.vue

@@ -4,7 +4,7 @@ import { ref, reactive, watch, onMounted } from 'vue';
 import AlbumItem from './AlbumItem.vue';
 import Modal from './Modal.vue';
 
-import { useRand } from '@/scripts/colors.js';
+import { useRand, parseThumb } from '@/scripts/colors.js';
 import { useStore } from '@/scripts/util.js';
 
 import {
@@ -53,14 +53,19 @@ const list = ref([]),
     password: undefined,
     playlists: [],
     create: false,
-  });
+  }),
+  proxy = ref('');
 
 const pathname = url => new URL(url).pathname;
 
-const Open = async key => {
+const setProxy = async () => {
+    const { imageProxyUrl } = await getJsonPiped('/config');
+    proxy.value = imageProxyUrl;
+  },
+  Open = async key => {
     console.log(key);
 
-    const { imageProxyUrl } = await getJsonPiped('/config');
+    if (!proxy.value) await setProxy();
 
     useGetPlaylist(key, res => {
       console.log(res);
@@ -72,10 +77,7 @@ const Open = async key => {
             ...i,
             ...{
               playlistId: key,
-              thumbnail: `${imageProxyUrl}/vi_webp/${i.url.replace(
-                '/watch?v=',
-                '',
-              )}/maxresdefault.webp?host=i.ytimg.com`,
+              thumbnail: parseThumb(i.url, proxy.value),
             },
           })),
         });
@@ -84,16 +86,18 @@ const Open = async key => {
       } else alert('No songs to play!');
     });
   },
-  List = () => {
+  List = async () => {
+    if (!proxy.value) await setProxy();
+
     useListPlaylists(res => {
       list.value = res;
     });
   },
   Create = () => {
     if (text.value) {
-      useCreatePlaylist(text.value, [], () => {
-        List();
+      useCreatePlaylist(text.value, [], async () => {
         show.new = false;
+        await List();
       });
     }
   },
@@ -122,7 +126,7 @@ const Open = async key => {
       return;
     }
 
-    List();
+    await List();
 
     for (let i of data) {
       const pl = list.value.find(p => p.name == i.name);
@@ -137,13 +141,13 @@ const Open = async key => {
         }
       } else useCreatePlaylist(i.name, i.urls);
 
-      List();
+      await List();
     }
 
     show.import = false;
   },
-  Export = () => {
-    List();
+  Export = async () => {
+    await List();
 
     const base = JSON.stringify(
         {
@@ -174,8 +178,8 @@ const Open = async key => {
 
     console.log(conn);
 
-    conn.on('open', () => {
-      List();
+    conn.on('open', async () => {
+      await List();
       conn.send(list.value);
     });
 
@@ -281,7 +285,7 @@ watch(
 watch(auth, getPlaylists);
 
 onMounted(async () => {
-  List();
+  await List();
   await getPlaylists();
 });
 </script>
@@ -422,6 +426,7 @@ onMounted(async () => {
         :key="i.name"
         :name="i.name"
         :author="t('title.songs') + ' • ' + i.urls.length"
+        :art="parseThumb(i.urls[0]?.url, proxy)"
         :grad="useRand()"
         @open-album="Open(i.name)" />
     </div>

src/components/Prefs.vue

@@ -22,7 +22,8 @@ const { t, setupLocale } = useI18n(),
   instances = ref([]),
   hypInstances = ref([]),
   next = ref(false),
-  compact = ref(false);
+  compact = ref(false),
+  prm = ref(false);
 
 getJson('https://piped-instances.kavin.rocks')
   .then(i => i || getJson('https://instances.tokhmi.xyz'))
@@ -70,6 +71,12 @@ function setCodec(codec) {
     window.audioPlayer.configure('preferredAudioCodecs', codec.split(':'));
 }
 
+function setPRM(prm) {
+  setStore('prm', prm);
+  if (prm) document.body.classList.add('prm');
+  else document.body.classList.remove('prm');
+}
+
 function getStoreBool(key, ele, def) {
   ele.value = getStore(key) || def;
 }
@@ -108,6 +115,7 @@ const verifyApi = computed(() =>
 onMounted(() => {
   getStoreBool('next', next, true);
   getStoreBool('compact', compact, false);
+  getStoreBool('prm', prm, false);
 });
 </script>
 
@@ -137,6 +145,17 @@ onMounted(() => {
     <label for="pref-chk-compact">{{ t('pref.compact') }}</label>
   </div>
 
+  <div class="left">
+    <input
+      type="checkbox"
+      name="pref-chk-prm"
+      id="pref-chk-prm"
+      class="input"
+      @change="setPRM($event.target.checked)"
+      v-model="prm" />
+    <label for="pref-chk-prm">{{ t('pref.prm') }}</label>
+  </div>
+
   <h2>Language</h2>
 
   <select

src/components/SongItem.vue

@@ -177,4 +177,9 @@ span.bi-three-dots-vertical {
   width: 70px;
   height: 70px;
 }
+
+.prm .card {
+  margin: 0;
+  padding: 0.5rem;
+}
 </style>

src/components/StatusBar.vue

@@ -236,7 +236,10 @@ async function Like() {
         <button
           id="vol-btn"
           aria-label="Volume Buttons"
-          @click="showme.vol = !showme.vol; showme.menu = false"
+          @click="
+            showme.vol = !showme.vol;
+            showme.menu = false;
+          "
           class="popup-wrap bi bi-volume-up clickable">
           <Transition name="fade">
             <div v-if="showme.vol" id="vol" class="popup">
@@ -255,7 +258,10 @@ async function Like() {
         <button
           class="bi bi-three-dots clickable"
           aria-label="More Controls"
-          @click="showme.menu = !showme.menu; showme.vol = false"></button>
+          @click="
+            showme.menu = !showme.menu;
+            showme.vol = false;
+          "></button>
         <Transition name="fade">
           <div id="menu" v-if="showme.menu" class="popup">
             <button