changes:

- fix: store lyricsid
- feat: added auto theme (closes #156)
- reverse metadata art (might fix #157)
...minor fixes and update deps

src/App.vue

@@ -30,7 +30,7 @@ const Genres = defineAsyncComponent(() => import('@/components/Genres.vue')),
   );
 
 /* Composables */
-import { useStore, useUnwrap } from '@/scripts/util.js';
+import { useStore, useUnwrap, useAutoTheme } from '@/scripts/util.js';
 import { useSetupDB, useUpdatePlaylist } from '@/scripts/db.js';
 
 /* Stores */
@@ -134,11 +134,14 @@ function playList(a) {
 /* Lifestyle hooks */
 onBeforeMount(() => {
   /* Set the default theme if set */
-  if (store.theme) document.body.setAttribute('data-theme', store.theme);
+  if (store.theme)
+    document.body.setAttribute('data-theme', useAutoTheme(store.theme));
+
   if (store.compact == 'true') document.body.setAttribute('data-compact', '');
 
   /* Prefers Reduced Motion */
-  if (store.prm == 'true') document.body.classList.add('prm');
+  if (store.prm == 'true' || matchMedia('(prefers-reduced-motion)').matches)
+    document.body.classList.add('prm');
 
   /* Set the default locale if set */
   const loc =

src/assets/version.json

@@ -1,3 +1,3 @@
 {
-  "date": "2024-01-01"
+  "date": "2024-01-21"
 }

src/components/Lyrics.vue

@@ -24,13 +24,18 @@ function set(id) {
 function get() {
   status.value = false;
 
-  if (data.state.lyrics && data.state.urls === data.state.url) {
-    set(data.state.lyrics);
+  const now = data.current();
+
+  if (now.lyrics) {
+    set(now.lyrics);
   } else if (data.state.url) {
     getJsonHyp(
       '/next/' + data.state.url.replace('/watch?v=', '') + '?queue=avoid',
     ).then(({ lyricsId }) => {
-      if (lyricsId) set(lyricsId);
+      if (lyricsId) {
+        set(lyricsId);
+        now.lyrics = lyricsId;
+      }
     });
   }
 }

src/components/Prefs.vue

@@ -8,7 +8,7 @@ import {
   useAuthLogout,
 } from '@/scripts/fetch.js';
 
-import { useStore } from '@/scripts/util.js';
+import { useStore, useAutoTheme } from '@/scripts/util.js';
 import { SUPPORTED_LOCALES, useI18n } from '@/stores/misc.js';
 
 const date = ref('unknown');
@@ -60,7 +60,7 @@ function getTheme() {
 }
 
 function setTheme(theme) {
-  document.body.setAttribute('data-theme', theme);
+  document.body.setAttribute('data-theme', useAutoTheme(theme));
   setStore('theme', theme);
 }
 
@@ -142,6 +142,7 @@ onMounted(() => {
     class="input"
     :value="getTheme()"
     @change="setTheme($event.target.value)">
+    <option value="auto">{{ t('pref.auto') }}</option>
     <option value="dark">{{ t('pref.dark') }}</option>
     <option value="light">{{ t('pref.light') }}</option>
     <option value="black">{{ t('pref.black') }}</option>

src/locales/en.json

@@ -65,9 +65,9 @@
     "auto_queue": "Automatically Queue Songs",
     "codec": "Codec",
     "quality": "Quality",
-    "auto": "auto",
-    "best": "best",
-    "worst": "worst",
+    "auto": "Auto",
+    "best": "Best",
+    "worst": "Worst",
     "volume": "Default Volume",
     "home": "Home",
     "explore": "Explore",

src/scripts/util.js

@@ -11,6 +11,14 @@ export function useSanitize(txt) {
   });
 }
 
+export function useAutoTheme(t) {
+  return t == 'auto'
+    ? matchMedia('(prefers-color-scheme: light)').matches
+      ? 'light'
+      : 'dark'
+    : t;
+}
+
 export function useVerifyAuth(hash) {
   return PL_EXP.test(hash);
 }
@@ -62,10 +70,8 @@ export function useShare(data) {
   }
 }
 
-export function useMetadata(url, urls, data) {
+export function useMetadata(now, data) {
   if ('mediaSession' in navigator) {
-    const now = urls.find(u => u.url === url);
-
     let artwork = [],
       album = undefined;
 
@@ -73,7 +79,7 @@ export function useMetadata(url, urls, data) {
       album = now.subtitle;
 
       if (now.thumbnails) {
-        artwork = now.thumbnails.map(t => ({
+        artwork = now.thumbnails.reverse().map(t => ({
           sizes: t.width && t.height ? t.width + 'x' + t.height : '512x512',
           src: t.url,
           type: 'image/webp',

src/stores/player.js

@@ -62,6 +62,8 @@ export const useData = defineStore('data', () => {
         ? '/watch?v=' + json.songs[0].id
         : '/watch?v=' + hash;
 
+      json.songs[0] &&= { ...json.songs[0], ...{ lyrics: json.lyricsId } };
+
       state.urls =
         json.songs.length > 0
           ? json.songs.map(i => ({
@@ -72,34 +74,25 @@ export const useData = defineStore('data', () => {
               },
             }))
           : state.urls;
+    } else if (state.urls.length == 0)
+      state.urls = [
+        {
+          title: state.title,
+          url: state.url,
+        },
+      ];
 
-      useMetadata(state.url, state.urls, {
-        title: state.title,
-        artist: state.artist,
-        art: state.art,
-      });
-    } else {
-      if (state.urls.length == 0) {
-        state.urls = [
-          {
-            title: state.title,
-            url: state.url,
-          },
-        ];
-      }
-
-      useMetadata(state.url, state.urls, {
-        title: state.title,
-        artist: state.artist,
-        art: state.art,
-      });
-    }
+    useMetadata(state.current(), {
+      title: state.title,
+      artist: state.artist,
+      art: state.art,
+    });
   }
 
   function playNext() {
     const i = state.urls.findIndex(s => s.url === state.url);
 
-    if (player.state.loop == 2) getSong(state.url);
+    if (player.state.loop == 2) play(state.urls[i]);
     else if (
       state.urls.length > i &&
       state.urls.length != 0 &&
@@ -117,8 +110,8 @@ export const useData = defineStore('data', () => {
 
     if (state.urls[i - 1]) play(state.urls[i - 1]);
     else if (player.state.loop == 1) {
-      state.url = state.urls[state.urls.length - 1].url;
-      play(state.urls[state.urls.length - 1]);
+      state.url = state.urls.at(-1).url;
+      play(state.urls.at(-1));
     } else state.urls = [];
   }
 
@@ -132,7 +125,11 @@ export const useData = defineStore('data', () => {
     } else state.urls = [];
   }
 
-  return { state, getSong, play, playNext, prevTrack, nextTrack };
+  function current() {
+    return state.urls.find(i => i.url == state.url);
+  }
+
+  return { state, getSong, play, playNext, prevTrack, nextTrack, current };
 });
 
 export const usePlayer = defineStore('player', () => {