chore: format

src/App.vue

@@ -180,10 +180,7 @@ onMounted(() => {
   </template>
 
   <header v-if="!artist.state.title">
-    <img
+    <img v-if="data.state.art" class="art" :src="data.state.art" />
-      v-if="data.state.art"
-      class="art"
-      :src="data.state.art" />
 
     <div class="wrapper">
       <NowPlaying @get-artist="artist.getArtist" />

src/assets/base.css

@@ -34,7 +34,11 @@ body[date-theme^='black'] {
 
   --color-shadow: #000;
   --color-blur: #11111190;
-  --color-gradient: linear-gradient(45deg, oklab(0.9 -0.05 -0.04), oklab(0.57 -0.03 -0.09));
+  --color-gradient: linear-gradient(
+    45deg,
+    oklab(0.9 -0.05 -0.04),
+    oklab(0.57 -0.03 -0.09)
+  );
   --color-scrollbar: var(--vt-c-blue);
 
   --color-heading: var(--vt-c-text-dark-1);
@@ -75,7 +79,7 @@ body[data-theme^='nord'] {
   --color-shadow: #4c566a;
   --color-scrollbar: var(--color-foreground);
 
-  --color-gradient: linear-gradient(45deg, var(--color-foreground), #5E81AC);
+  --color-gradient: linear-gradient(45deg, var(--color-foreground), #5e81ac);
 
   --color-heading: #d8dee9;
   --color-text: #d8dee9;
@@ -93,7 +97,11 @@ body[data-theme^='dracula'] {
   --color-shadow: #6272a4;
   --color-scrollbar: var(--color-foreground);
 
-  --color-gradient: linear-gradient(45deg, var(--color-foreground), var(--color-shadow));
+  --color-gradient: linear-gradient(
+    45deg,
+    var(--color-foreground),
+    var(--color-shadow)
+  );
 
   --color-heading: var(--vt-c-text-dark-1);
   --color-text: var(--vt-c-text-dark-2);

src/components/Btn.vue

@@ -3,7 +3,7 @@ defineProps(['ico']);
 defineEmits(['click']);
 
 import { useI18n } from '@/stores/misc.js';
-const {t} = useI18n()
+const { t } = useI18n();
 </script>
 
 <template>

src/components/Library.vue

@@ -374,7 +374,9 @@ onMounted(async () => {
           <div class="id-wrap">
             <span class="id-box">ID</span>
             <pre>{{ sync.id }}</pre>
-            <i class="bi bi-clipboard id-copy clickable" @click="copyPeerId"></i>
+            <i
+              class="bi bi-clipboard id-copy clickable"
+              @click="copyPeerId"></i>
           </div>
         </div>
       </template>
@@ -441,9 +443,7 @@ onMounted(async () => {
     <h2 v-if="list.length > 0">{{ t('playlist.local') }}</h2>
 
     <div class="grid-3">
-      <AlbumItem
+      <AlbumItem :name="t('title.offline')" @open-album="OpenOffline" />
-        :name="t('title.offline')"
-        @open-album="OpenOffline" />
       <AlbumItem
         v-for="i in list"
         :key="i.name"
@@ -577,9 +577,10 @@ input[type='file']::file-selector-button {
 .id-wrap {
   background-color: var(--color-background);
 }
-.id-wrap, .id-box {
+.id-wrap,
-  border-radius: .25rem;
+.id-box {
-  padding: .25rem .75rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.75rem;
 }
 .id-wrap > * {
   width: unset;

src/components/Player.vue

@@ -43,11 +43,12 @@ async function Stream() {
         codecs = store.getItem('codec');
 
       await audioPlayer.attach(audio.value);
-      
+
       for (const [playerKey, audioKey] of Object.entries({
         rate: 'playbackRate',
         pitch: 'preservesPitch',
-      })) audio.value[audioKey] = player.state[playerKey];
+      }))
+        audio.value[audioKey] = player.state[playerKey];
 
       audioPlayer.getNetworkingEngine().registerRequestFilter((_type, req) => {
         const headers = req.headers;
@@ -90,7 +91,7 @@ async function Stream() {
         },
         dash: {
           ignoreMinBufferTime: true,
-        }
+        },
       });
 
       window.audioPlayer = audioPlayer;
@@ -170,17 +171,17 @@ watch(() => player.state.streams, Stream);
 
 watch(
   () => player.state.currentTime,
-  cur => audio.value.currentTime = cur,
+  cur => (audio.value.currentTime = cur),
 );
 
 watch(
   () => player.state.rate,
-  cur => audio.value.playbackRate = cur,
+  cur => (audio.value.playbackRate = cur),
 );
 
 watch(
   () => player.state.pitch,
-  cur => audio.value.preservesPitch = cur,
+  cur => (audio.value.preservesPitch = cur),
 );
 
 onMounted(() => {

src/components/Prefs.vue

@@ -298,10 +298,12 @@ onMounted(() => {
       min="0.1"
       step="0.1"
       :value="getStore('rate') || 1"
-      @change="(e) => {
+      @change="
-        setStore('rate', e.target.value);
+        e => {
-        player.state.rate = e.target.value;
+          setStore('rate', e.target.value);
-      }" />
+          player.state.rate = e.target.value;
+        }
+      " />
   </div>
 
   <div class="left pt">

src/components/StatusBar.vue

@@ -77,8 +77,7 @@ async function Like() {
 <template>
   <div id="statusbar" class="flex">
     <div class="flex statusbar-progress-container">
-      <span
+      <span :aria-label="t('info.time_elapsed')">
-        :aria-label="t('info.time_elapsed')">
         {{ getFormattedTime(player.state.realTime) }}
       </span>
       <div
@@ -96,8 +95,7 @@ async function Like() {
               ($event.target.value / 100) * player.state.duration
           " />
       </div>
-      <span
+      <span :aria-label="t('info.track_duration')">
-        :aria-label="t('info.track_duration')">
         {{ getFormattedTime(player.state.duration) }}
       </span>
     </div>
@@ -128,8 +126,9 @@ async function Like() {
       <div class="statusbar-control-item center">
         <button
           :class="{
-            hidden: data.state.urls[
+            hidden:
-                data.state.urls.findIndex((s) => s.url == data.state.url) - 1
+              data.state.urls[
+                data.state.urls.findIndex(s => s.url == data.state.url) - 1
               ] == undefined &&
               (player.state.loop != 1 || data.state.urls.length == 0),
           }"
@@ -143,8 +142,12 @@ async function Like() {
           id="btn-rewind"
           aria-label="Rewind 10 seconds"
           class="bi bi-chevron-left clickable"
-          @click="player.state.currentTime =
+          @click="
-            Math.max(0, player.state.currentTime - 10)"></button>
+            player.state.currentTime = Math.max(
+              0,
+              player.state.currentTime - 10,
+            )
+          "></button>
 
         <button
           id="btn-play-pause"
@@ -158,13 +161,18 @@ async function Like() {
           id="btn-forward"
           aria-label="Forward 10 seconds"
           class="bi bi-chevron-right clickable"
-          @click="player.state.currentTime =
+          @click="
-            Math.min(player.state.duration, player.state.currentTime + 10)"></button>
+            player.state.currentTime = Math.min(
+              player.state.duration,
+              player.state.currentTime + 10,
+            )
+          "></button>
 
         <button
           :class="{
-            hidden: data.state.urls[
+            hidden:
-                data.state.urls.findIndex((s) => s.url == data.state.url) + 1
+              data.state.urls[
+                data.state.urls.findIndex(s => s.url == data.state.url) + 1
               ] == undefined &&
               (player.state.loop != 1 || data.state.urls.length == 0),
           }"