From d2d3bde63148a8eb8013c627478430b97e839077 Mon Sep 17 00:00:00 2001
From: Dobby <dobby5nk@gmail.com>
Date: Sat, 8 Jul 2023 17:37:23 +0200
Subject: [PATCH] Lint code

---
 src/components/ListviewItem.vue               |   4 +-
 src/components/MediaItemCard.vue              |   2 +-
 src/components/ProviderIcons.vue              |   4 +-
 src/components/VolumeControl.vue              |   2 +-
 src/layouts/default/AppBar.vue                |   2 +-
 .../PlayerOSD/PlayerExtendedControls.vue      |   6 +-
 .../default/PlayerOSD/PlayerTimeline.vue      |   3 +-
 .../default/PlayerOSD/PlayerTrackDetails.vue  |   8 +-
 src/layouts/default/View.vue                  |   2 +-
 src/plugins/api/index.ts                      |   4 +-
 src/plugins/i18n.ts                           |   4 +-
 src/views/AlbumDetails.vue                    | 109 +++++++-----------
 src/views/LibraryAlbums.vue                   |   8 +-
 src/views/LibraryArtists.vue                  |  36 +++---
 src/views/LibraryPlaylists.vue                |  37 +++---
 src/views/LibraryRadios.vue                   |  30 +++--
 src/views/LibraryTracks.vue                   |  37 +++---
 src/views/PlaylistDetails.vue                 |  86 +++++---------
 src/views/RadioDetails.vue                    |  38 ++----
 src/views/settings/AddProvider.vue            |  78 ++++---------
 src/views/settings/EditPlayer.vue             |  47 +++-----
 src/views/settings/EditProvider.vue           |  78 ++++---------
 src/views/settings/Players.vue                |   4 +-
 src/views/settings/Providers.vue              |   6 +-
 vite.config.ts                                |   4 +-
 25 files changed, 239 insertions(+), 400 deletions(-)

diff --git a/src/components/ListviewItem.vue b/src/components/ListviewItem.vue
index a253987e..b9b94a77 100644
--- a/src/components/ListviewItem.vue
+++ b/src/components/ListviewItem.vue
@@ -2,11 +2,11 @@
 <template>
   <div>
     <ListItem
+      v-hold="() => emit('menu', item)"
       link
       :disabled="!itemIsAvailable(item) || isDisabled"
       @click.stop="emit('click', item)"
       @click.right.prevent="emit('menu', item)"
-      v-hold="() => emit('menu', item)"
     >
       <template #prepend>
         <div v-if="showCheckboxes" class="media-thumb listitem-media-thumb">
@@ -56,7 +56,7 @@
       <!-- subtitle -->
       <template #subtitle>
         <!-- track: artists(s) + album -->
-        <div class="line-clamp-1" v-if="item.media_type == MediaType.TRACK">
+        <div v-if="item.media_type == MediaType.TRACK" class="line-clamp-1">
           <v-item-group>
             <v-item v-if="'artists' in item">
               {{ getArtistsString(item.artists, 2) }}
diff --git a/src/components/MediaItemCard.vue b/src/components/MediaItemCard.vue
index 270d97b8..fb7d71ad 100644
--- a/src/components/MediaItemCard.vue
+++ b/src/components/MediaItemCard.vue
@@ -25,8 +25,8 @@
       <template #append>
         <!-- format -->
         <Button
-          icon
           v-if="activePlayerQueue && activePlayerQueue?.active"
+          icon
           :disabled="activePlayerQueue && activePlayerQueue?.items == 0"
           @click="api.queueCommandPlayPause(activePlayerQueue!.queue_id)"
         >
diff --git a/src/components/ProviderIcons.vue b/src/components/ProviderIcons.vue
index 3a5435af..08d8fcdb 100644
--- a/src/components/ProviderIcons.vue
+++ b/src/components/ProviderIcons.vue
@@ -2,7 +2,7 @@
   <div class="provider-icons" style="display: inline-flex" :style="`height: ${height};`">
     <v-menu v-for="providerDomain of uniqueProviders" :key="providerDomain" location="bottom end" @click:outside.stop>
       <template #activator="{ props }">
-        <Button icon v-bind="props" :key="providerDomain">
+        <Button v-bind="props" :key="providerDomain" icon>
           <provider-icon
             :domain="providerDomain"
             :size="height"
@@ -63,7 +63,7 @@
                 style="height: 50px; display: flex; align-items: center; margin-left: 10px; margin-right: 10px"
                 @mouseover="fetchPreviewUrl(mapping.provider_domain, mapping.item_id)"
               >
-                <audio controls :src="previewUrls[`${mapping.provider_domain}.${mapping.item_id}`]" />
+                <audio controls :src="previewUrls[`${mapping.provider_domain}.${mapping.item_id}`]"></audio>
               </div>
             </div>
           </div>
diff --git a/src/components/VolumeControl.vue b/src/components/VolumeControl.vue
index efd5ac6e..a1b44ae9 100644
--- a/src/components/VolumeControl.vue
+++ b/src/components/VolumeControl.vue
@@ -136,7 +136,7 @@ const setGroupPower = function (player: Player, powered: boolean) {
     // send power command to all group child players
     for (const childPlayer of getVolumePlayers(player)) {
       // bypass api throttling by sending the command directly
-      api.sendCommand(`players/cmd/power`, {
+      api.sendCommand('players/cmd/power', {
         player_id: childPlayer.player_id,
         powered,
       });
diff --git a/src/layouts/default/AppBar.vue b/src/layouts/default/AppBar.vue
index 8e7c894a..228bad88 100644
--- a/src/layouts/default/AppBar.vue
+++ b/src/layouts/default/AppBar.vue
@@ -31,8 +31,8 @@
         <v-menu location="bottom end">
           <template #activator="{ props }">
             <Button
-              icon
               v-if="store.topBarContextMenuItems.length > 0"
+              icon
               style="height: 50px; height: 38px !important"
               v-bind="props"
             >
diff --git a/src/layouts/default/PlayerOSD/PlayerExtendedControls.vue b/src/layouts/default/PlayerOSD/PlayerExtendedControls.vue
index fb5f18e6..4e243ae8 100644
--- a/src/layouts/default/PlayerOSD/PlayerExtendedControls.vue
+++ b/src/layouts/default/PlayerOSD/PlayerExtendedControls.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- active queue -->
   <Button
-    icon
     v-if="props.visibleComponents && props.visibleComponents.queue?.isVisible"
+    icon
     v-bind="props.visibleComponents.queue.icon"
     @click="
       store.showFullscreenPlayer = false;
@@ -16,8 +16,8 @@
   </Button>
   <!-- active player -->
   <Button
-    icon
     v-if="props.visibleComponents && props.visibleComponents.player?.isVisible"
+    icon
     v-bind="props.visibleComponents.player.icon"
     class="mediacontrols-right"
     @click="store.showPlayersMenu = true"
@@ -26,7 +26,7 @@
   </Button>
   <!-- active player volume -->
   <div v-if="props.visibleComponents && props.visibleComponents.volume?.isVisible">
-    <v-menu v-if="activePlayerQueue" class="volume-control-dialog" v-model="showVolume" :close-on-content-click="false">
+    <v-menu v-if="activePlayerQueue" v-model="showVolume" class="volume-control-dialog" :close-on-content-click="false">
       <template #activator="{ props: menu }">
         <div v-if="getBreakpointValue('bp5') || !responsiveVolumeSize">
           <PlayerVolume
diff --git a/src/layouts/default/PlayerOSD/PlayerTimeline.vue b/src/layouts/default/PlayerOSD/PlayerTimeline.vue
index e503254d..b88db0bb 100644
--- a/src/layouts/default/PlayerOSD/PlayerTimeline.vue
+++ b/src/layouts/default/PlayerOSD/PlayerTimeline.vue
@@ -26,8 +26,7 @@
         @mouseleave="isThumbHidden = true"
         @mousedown="startDragging"
         @mouseup="stopDragging"
-      >
-      </v-slider>
+      />
 
       <!-- end time detail -->
       <div style="z-index: 1" class="text-caption">
diff --git a/src/layouts/default/PlayerOSD/PlayerTrackDetails.vue b/src/layouts/default/PlayerOSD/PlayerTrackDetails.vue
index be07e9fd..4f80429e 100644
--- a/src/layouts/default/PlayerOSD/PlayerTrackDetails.vue
+++ b/src/layouts/default/PlayerOSD/PlayerTrackDetails.vue
@@ -101,19 +101,19 @@
         {{ curQueueItem.media_item.artists[0].name }}
       </div>
       <!-- radio live metadata -->
-      <div class="line-clamp-1" v-else-if="curQueueItem?.streamdetails?.stream_title">
+      <div v-else-if="curQueueItem?.streamdetails?.stream_title" class="line-clamp-1">
         {{ curQueueItem?.streamdetails?.stream_title }}
       </div>
       <!-- other description -->
-      <div class="line-clamp-1" v-else-if="curQueueItem && curQueueItem.media_item?.metadata.description">
+      <div v-else-if="curQueueItem && curQueueItem.media_item?.metadata.description" class="line-clamp-1">
         {{ curQueueItem.media_item.metadata.description }}
       </div>
       <!-- queue empty message -->
-      <div class="line-clamp-1" v-else-if="activePlayerQueue && activePlayerQueue.items == 0">
+      <div v-else-if="activePlayerQueue && activePlayerQueue.items == 0" class="line-clamp-1">
         {{ $t('queue_empty') }}
       </div>
       <!-- 3rd party source active -->
-      <div class="line-clamp-1" v-else-if="store.selectedPlayer?.active_source != store.selectedPlayer?.player_id">
+      <div v-else-if="store.selectedPlayer?.active_source != store.selectedPlayer?.player_id" class="line-clamp-1">
         {{ $t('external_source_active', [store.selectedPlayer?.active_source]) }}
       </div>
     </template>
diff --git a/src/layouts/default/View.vue b/src/layouts/default/View.vue
index 3e1e3f20..f4648eb0 100644
--- a/src/layouts/default/View.vue
+++ b/src/layouts/default/View.vue
@@ -5,7 +5,7 @@
 
     <router-view v-slot="{ Component }" app>
       <transition name="fade" mode="out-in">
-        <component v-scroll:#cont="onScroll" :is="Component" />
+        <component :is="Component" v-scroll:#cont="onScroll" />
       </transition>
     </router-view>
   </v-main>
diff --git a/src/plugins/api/index.ts b/src/plugins/api/index.ts
index 15456fd0..f31a42b1 100644
--- a/src/plugins/api/index.ts
+++ b/src/plugins/api/index.ts
@@ -570,7 +570,7 @@ export class MusicAssistantApi {
     // Play item at index (or item_id) X in queue.
     this.playerQueueCommand(queueId, 'play_index', { index });
   }
-  public queueCommandMoveItem(queueId: string, queue_item_id: string, pos_shift: number = 1) {
+  public queueCommandMoveItem(queueId: string, queue_item_id: string, pos_shift = 1) {
     // Move queue item x up/down the queue.
     // - queue_id: id of the queue to process this request.
     // - queue_item_id: the item_id of the queueitem that needs to be moved.
@@ -759,7 +759,7 @@ export class MusicAssistantApi {
           - player_id: player_id of the groupplayer to handle the command.
           - members: list of player ids to set as members.
     */
-    this.sendCommand(`players/cmd/set_members`, {
+    this.sendCommand('players/cmd/set_members', {
       player_id,
       members,
     });
diff --git a/src/plugins/i18n.ts b/src/plugins/i18n.ts
index 272f07e3..6413ce7d 100644
--- a/src/plugins/i18n.ts
+++ b/src/plugins/i18n.ts
@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { createI18n } from "vue-i18n";
+import { createI18n } from 'vue-i18n';
 
 /*
  * All i18n resources specified in the plugin `include` option can be loaded
  * at once using the import syntax
  */
-import messages from "@intlify/unplugin-vue-i18n/messages";
+import messages from '@intlify/unplugin-vue-i18n/messages';
 
 export const i18n = createI18n({
   legacy: false,
diff --git a/src/views/AlbumDetails.vue b/src/views/AlbumDetails.vue
index 620dde52..7ee3f11a 100644
--- a/src/views/AlbumDetails.vue
+++ b/src/views/AlbumDetails.vue
@@ -1,21 +1,12 @@
 <template>
   <section>
     <InfoHeader :item="itemDetails" />
-    <v-tabs
-      v-model="activeTab"
-      show-arrows
-      grow
-      hide-slider
-    >
-      <v-tab
-        value="tracks"
-      >
-        {{ $t("tracks") }}
+    <v-tabs v-model="activeTab" show-arrows grow hide-slider>
+      <v-tab value="tracks">
+        {{ $t('tracks') }}
       </v-tab>
-      <v-tab
-        value="versions"
-      >
-        {{ $t("other_versions") }}
+      <v-tab value="versions">
+        {{ $t('other_versions') }}
       </v-tab>
     </v-tabs>
     <v-divider />
@@ -28,7 +19,10 @@
       :load-data="loadAlbumTracks"
       :sort-keys="['track_number', 'sort_name', 'duration']"
       :update-available="updateAvailable"
-      @refresh-clicked="loadItemDetails();updateAvailable=false;"
+      @refresh-clicked="
+        loadItemDetails();
+        updateAvailable = false;
+      "
     />
     <ItemsListing
       v-if="activeTab == 'versions'"
@@ -39,23 +33,21 @@
       :load-data="loadAlbumVersions"
       :sort-keys="['provider', 'sort_name', 'year']"
       :update-available="updateAvailable"
-      @refresh-clicked="loadItemDetails();updateAvailable=false;"
+      @refresh-clicked="
+        loadItemDetails();
+        updateAvailable = false;
+      "
     />
   </section>
 </template>
 
 <script setup lang="ts">
-import ItemsListing from "../components/ItemsListing.vue";
-import { filteredItems } from "../components/ItemsListing.vue";
-import InfoHeader from "../components/InfoHeader.vue";
-import {
-  EventType,
-  type Album,
-  type EventMessage,
-  type MediaItemType,
-} from "../plugins/api/interfaces";
-import { api } from "../plugins/api";
-import { ref, onMounted, onBeforeUnmount, watch } from "vue";
+import ItemsListing from '../components/ItemsListing.vue';
+import { filteredItems } from '../components/ItemsListing.vue';
+import InfoHeader from '../components/InfoHeader.vue';
+import { EventType, type Album, type EventMessage, type MediaItemType } from '../plugins/api/interfaces';
+import { api } from '../plugins/api';
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 
 export interface Props {
   itemId: string;
@@ -63,48 +55,39 @@ export interface Props {
   forceProviderVersion?: string;
 }
 const props = defineProps<Props>();
-const activeTab = ref("");
+const activeTab = ref('');
 const updateAvailable = ref(false);
 const itemDetails = ref<Album>();
 
 const loadItemDetails = async function () {
-  itemDetails.value = await api.getAlbum(
-    props.itemId,
-    props.provider
-  );
-  activeTab.value = "tracks";
+  itemDetails.value = await api.getAlbum(props.itemId, props.provider);
+  activeTab.value = 'tracks';
 };
 
 watch(
   () => props.itemId,
   (val) => {
     if (val) loadItemDetails();
-  }, { immediate: true }
+  },
+  { immediate: true },
 );
 
-
 onMounted(() => {
   //reload if/when item updates
-  const unsub = api.subscribe_multi(
-    [EventType.MEDIA_ITEM_ADDED, EventType.MEDIA_ITEM_UPDATED],
-    (evt: EventMessage) => {
-      // signal user that there might be updated info available for this item
-      const updatedItem = evt.data as MediaItemType;
-      if (itemDetails.value?.uri == updatedItem.uri) {
-        updateAvailable.value = true;
-      } else {
-        for (const provId of updatedItem.provider_mappings) {
-          if (
-            provId.provider_domain == itemDetails.value?.provider &&
-            provId.item_id == itemDetails.value?.item_id
-          ) {
-            updateAvailable.value = true;
-            break;
-          }
+  const unsub = api.subscribe_multi([EventType.MEDIA_ITEM_ADDED, EventType.MEDIA_ITEM_UPDATED], (evt: EventMessage) => {
+    // signal user that there might be updated info available for this item
+    const updatedItem = evt.data as MediaItemType;
+    if (itemDetails.value?.uri == updatedItem.uri) {
+      updateAvailable.value = true;
+    } else {
+      for (const provId of updatedItem.provider_mappings) {
+        if (provId.provider_domain == itemDetails.value?.provider && provId.item_id == itemDetails.value?.item_id) {
+          updateAvailable.value = true;
+          break;
         }
       }
     }
-  );
+  });
   onBeforeUnmount(unsub);
 });
 
@@ -113,7 +96,7 @@ const loadAlbumTracks = async function (
   limit: number,
   sort: string,
   search?: string,
-  inLibraryOnly = true
+  inLibraryOnly = true,
 ) {
   const albumTracks = await api.getAlbumTracks(props.itemId, props.provider);
   return filteredItems(albumTracks, offset, limit, sort, search, inLibraryOnly);
@@ -124,23 +107,11 @@ const loadAlbumVersions = async function (
   limit: number,
   sort: string,
   search?: string,
-  inLibraryOnly = true
+  inLibraryOnly = true,
 ) {
-  const albumVersions = await api.getAlbumVersions(
-    props.itemId,
-    props.provider
-  );
-  return filteredItems(
-    albumVersions,
-    offset,
-    limit,
-    sort,
-    search,
-    inLibraryOnly
-  );
+  const albumVersions = await api.getAlbumVersions(props.itemId, props.provider);
+  return filteredItems(albumVersions, offset, limit, sort, search, inLibraryOnly);
 };
 </script>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>
diff --git a/src/views/LibraryAlbums.vue b/src/views/LibraryAlbums.vue
index 127bfd95..26f76260 100644
--- a/src/views/LibraryAlbums.vue
+++ b/src/views/LibraryAlbums.vue
@@ -33,13 +33,7 @@ onBeforeUnmount(() => {
   store.topBarContextMenuItems = [];
 });
 
-const loadItems = async function (
-  offset: number,
-  limit: number,
-  sort: string,
-  search?: string,
-  inLibraryOnly = true
-) {
+const loadItems = async function (offset: number, limit: number, sort: string, search?: string, inLibraryOnly = true) {
   const library = inLibraryOnly || undefined;
   return await api.getAlbums(library, search, limit, offset, sort);
 };
diff --git a/src/views/LibraryArtists.vue b/src/views/LibraryArtists.vue
index 3cce83a8..fb89205a 100644
--- a/src/views/LibraryArtists.vue
+++ b/src/views/LibraryArtists.vue
@@ -11,54 +11,48 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import ItemsListing from "../components/ItemsListing.vue";
-import api from "../plugins/api";
-import { MediaType, type Artist } from "../plugins/api/interfaces";
-import { store } from "../plugins/store";
+import { onBeforeUnmount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ItemsListing from '../components/ItemsListing.vue';
+import api from '../plugins/api';
+import { MediaType, type Artist } from '../plugins/api/interfaces';
+import { store } from '../plugins/store';
 
 const { t } = useI18n();
 const items = ref<Artist[]>([]);
 const albumArtistsOnly = ref(true);
 
 // load album artists filter from storage
-const albumArtistsOnlyStr = localStorage.getItem("albumArtistsFilter");
+const albumArtistsOnlyStr = localStorage.getItem('albumArtistsFilter');
 if (albumArtistsOnlyStr) {
-  albumArtistsOnly.value = albumArtistsOnlyStr == "true";
+  albumArtistsOnly.value = albumArtistsOnlyStr == 'true';
 }
 
-const loadItems = async function (
-  offset: number,
-  limit: number,
-  sort: string,
-  search?: string,
-  inLibraryOnly = true
-) {
+const loadItems = async function (offset: number, limit: number, sort: string, search?: string, inLibraryOnly = true) {
   const library = inLibraryOnly || undefined;
   if (albumArtistsOnly.value) {
     return await api.getAlbumArtists(library, search, limit, offset, sort);
   } else {
     const items = await api.getArtists(library, search, limit, offset, sort);
-    console.log("items", items);
+    console.log('items', items);
     return items;
   }
 };
 
 const toggleAlbumArtistsFilter = function () {
   albumArtistsOnly.value = !albumArtistsOnly.value;
-  const albumArtistsOnlyStr = albumArtistsOnly.value ? "true" : "false";
-  localStorage.setItem("albumArtistsFilter", albumArtistsOnlyStr);
+  const albumArtistsOnlyStr = albumArtistsOnly.value ? 'true' : 'false';
+  localStorage.setItem('albumArtistsFilter', albumArtistsOnlyStr);
 };
 
 store.topBarContextMenuItems = [
   {
-    label: "sync_now",
-    labelArgs: [t("artists")],
+    label: 'sync_now',
+    labelArgs: [t('artists')],
     action: () => {
       api.startSync([MediaType.ARTIST]);
     },
-    icon: "mdi-sync",
+    icon: 'mdi-sync',
   },
 ];
 onBeforeUnmount(() => {
diff --git a/src/views/LibraryPlaylists.vue b/src/views/LibraryPlaylists.vue
index d1b48ac0..33bc763f 100644
--- a/src/views/LibraryPlaylists.vue
+++ b/src/views/LibraryPlaylists.vue
@@ -11,18 +11,18 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import ItemsListing from "../components/ItemsListing.vue";
-import api from "../plugins/api";
-import { MediaType, ProviderFeature, type Playlist } from "../plugins/api/interfaces";
-import { store } from "../plugins/store";
+import { onBeforeUnmount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ItemsListing from '../components/ItemsListing.vue';
+import api from '../plugins/api';
+import { MediaType, ProviderFeature, type Playlist } from '../plugins/api/interfaces';
+import { store } from '../plugins/store';
 
 const { t } = useI18n();
 const items = ref<Playlist[]>([]);
 
 store.topBarContextMenuItems = [
-{
+  {
     label: 'sync_now',
     labelArgs: [t('playlists')],
     action: () => {
@@ -32,30 +32,24 @@ store.topBarContextMenuItems = [
   },
 ];
 
-for (const prov of Object.values(api.providers).filter(x => x.available && x.supported_features.includes(ProviderFeature.PLAYLIST_CREATE))) {
-  store.topBarContextMenuItems.push(
-    {
+for (const prov of Object.values(api.providers).filter(
+  (x) => x.available && x.supported_features.includes(ProviderFeature.PLAYLIST_CREATE),
+)) {
+  store.topBarContextMenuItems.push({
     label: 'create_playlist',
     labelArgs: [prov.name],
     action: () => {
       newPlaylist(prov.instance_id);
     },
     icon: 'mdi-sync',
-  }
-  )
+  });
 }
 
 onBeforeUnmount(() => {
   store.topBarContextMenuItems = [];
 });
 
-const loadItems = async function (
-  offset: number,
-  limit: number,
-  sort: string,
-  search?: string,
-  inLibraryOnly = true
-) {
+const loadItems = async function (offset: number, limit: number, sort: string, search?: string, inLibraryOnly = true) {
   const library = inLibraryOnly || undefined;
   return await api.getPlaylists(library, search, limit, offset, sort);
 };
@@ -63,6 +57,9 @@ const loadItems = async function (
 const newPlaylist = async function (provId: string) {
   const name = prompt(t('new_playlist_name'));
   if (!name) return;
-  await api.createPlaylist(name, provId).then(() => location.reload()).catch((e) => alert(e));
+  await api
+    .createPlaylist(name, provId)
+    .then(() => location.reload())
+    .catch((e) => alert(e));
 };
 </script>
diff --git a/src/views/LibraryRadios.vue b/src/views/LibraryRadios.vue
index c232312c..fde065ef 100644
--- a/src/views/LibraryRadios.vue
+++ b/src/views/LibraryRadios.vue
@@ -11,18 +11,18 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import ItemsListing from "../components/ItemsListing.vue";
-import api from "../plugins/api";
-import { MediaType, type Radio } from "../plugins/api/interfaces";
-import { store } from "../plugins/store";
+import { onBeforeUnmount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ItemsListing from '../components/ItemsListing.vue';
+import api from '../plugins/api';
+import { MediaType, type Radio } from '../plugins/api/interfaces';
+import { store } from '../plugins/store';
 
 const { t } = useI18n();
 const items = ref<Radio[]>([]);
 
 store.topBarContextMenuItems = [
-{
+  {
     label: 'sync_now',
     labelArgs: [t('radios')],
     action: () => {
@@ -43,21 +43,17 @@ onBeforeUnmount(() => {
   store.topBarContextMenuItems = [];
 });
 
-const loadItems = async function (
-  offset: number,
-  limit: number,
-  sort: string,
-  search?: string,
-  inLibraryOnly = true
-) {
+const loadItems = async function (offset: number, limit: number, sort: string, search?: string, inLibraryOnly = true) {
   const library = inLibraryOnly || undefined;
   return await api.getRadios(library, search, limit, offset, sort);
 };
 
-const addUrl = function (
-) {
+const addUrl = function () {
   const url = prompt(t('enter_url'));
   if (!url) return;
-  api.getRadio(url, 'url', undefined, false ).then(() => location.reload()).catch((e) => alert(e));
+  api
+    .getRadio(url, 'url', undefined, false)
+    .then(() => location.reload())
+    .catch((e) => alert(e));
 };
 </script>
diff --git a/src/views/LibraryTracks.vue b/src/views/LibraryTracks.vue
index 5fd2dbc8..66b84a3f 100644
--- a/src/views/LibraryTracks.vue
+++ b/src/views/LibraryTracks.vue
@@ -5,29 +5,24 @@
     :show-providers="true"
     :show-track-number="false"
     :load-data="loadItems"
-    :sort-keys="[
-      'sort_name',
-      'timestamp_added DESC',
-      'sort_artist',
-      'duration',
-    ]"
+    :sort-keys="['sort_name', 'timestamp_added DESC', 'sort_artist', 'duration']"
     :show-album="false"
   />
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import ItemsListing from "../components/ItemsListing.vue";
-import api from "../plugins/api";
-import { MediaType, type Track } from "../plugins/api/interfaces";
-import { store } from "../plugins/store";
+import { onBeforeUnmount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ItemsListing from '../components/ItemsListing.vue';
+import api from '../plugins/api';
+import { MediaType, type Track } from '../plugins/api/interfaces';
+import { store } from '../plugins/store';
 
 const { t } = useI18n();
 const items = ref<Track[]>([]);
 
 store.topBarContextMenuItems = [
-{
+  {
     label: 'sync_now',
     labelArgs: [t('tracks')],
     action: () => {
@@ -48,21 +43,17 @@ onBeforeUnmount(() => {
   store.topBarContextMenuItems = [];
 });
 
-const loadItems = async function (
-  offset: number,
-  limit: number,
-  sort: string,
-  search?: string,
-  inLibraryOnly = true
-) {
+const loadItems = async function (offset: number, limit: number, sort: string, search?: string, inLibraryOnly = true) {
   const library = inLibraryOnly || undefined;
   return await api.getTracks(library, search, limit, offset, sort);
 };
 
-const addUrl = function (
-) {
+const addUrl = function () {
   const url = prompt(t('enter_url'));
   if (!url) return;
-  api.getTrack(url, 'url', undefined, false ).then(() => location.reload()).catch((e) => alert(e));
+  api
+    .getTrack(url, 'url', undefined, false)
+    .then(() => location.reload())
+    .catch((e) => alert(e));
 };
 </script>
diff --git a/src/views/PlaylistDetails.vue b/src/views/PlaylistDetails.vue
index 08d152bb..e9a0fa56 100644
--- a/src/views/PlaylistDetails.vue
+++ b/src/views/PlaylistDetails.vue
@@ -2,13 +2,9 @@
   <section>
     <InfoHeader :item="itemDetails" />
 
-    <v-tabs
-      show-arrows
-      grow
-      hide-slider
-    >
+    <v-tabs show-arrows grow hide-slider>
       <v-tab>
-        {{ $t("playlist_tracks") }}
+        {{ $t('playlist_tracks') }}
       </v-tab>
     </v-tabs>
     <v-divider />
@@ -21,24 +17,21 @@
       :load-data="loadPlaylistTracks"
       :sort-keys="['position', 'position DESC', 'sort_name', 'sort_artist', 'sort_album']"
       :update-available="updateAvailable"
-      @refresh-clicked="loadItemDetails();updateAvailable=false;"
+      @refresh-clicked="
+        loadItemDetails();
+        updateAvailable = false;
+      "
     />
   </section>
 </template>
 
 <script setup lang="ts">
-import ItemsListing from "../components/ItemsListing.vue";
-import { filteredItems } from "../components/ItemsListing.vue";
-import InfoHeader from "../components/InfoHeader.vue";
-import {
-  EventType,
-  type Playlist,
-  type EventMessage,
-  type MediaItemType,
-Track,
-} from "../plugins/api/interfaces";
-import { api } from "../plugins/api";
-import { watch, ref, onMounted, onBeforeUnmount } from "vue";
+import ItemsListing from '../components/ItemsListing.vue';
+import { filteredItems } from '../components/ItemsListing.vue';
+import InfoHeader from '../components/InfoHeader.vue';
+import { EventType, type Playlist, type EventMessage, type MediaItemType, Track } from '../plugins/api/interfaces';
+import { api } from '../plugins/api';
+import { watch, ref, onMounted, onBeforeUnmount } from 'vue';
 
 export interface Props {
   itemId: string;
@@ -56,31 +49,25 @@ watch(
   () => props.itemId,
   (val) => {
     if (val) loadItemDetails();
-  }, { immediate: true }
+  },
+  { immediate: true },
 );
 
 onMounted(() => {
-
-  const unsub = api.subscribe_multi(
-    [EventType.MEDIA_ITEM_ADDED, EventType.MEDIA_ITEM_UPDATED],
-    (evt: EventMessage) => {
-      // signal user that there might be updated info available for this item
-      const updatedItem = evt.data as MediaItemType;
-      if (itemDetails.value?.uri == updatedItem.uri) {
-        updateAvailable.value = true;
-      } else {
-        for (const provId of updatedItem.provider_mappings) {
-          if (
-            provId.provider_domain == itemDetails.value?.provider &&
-            provId.item_id == itemDetails.value?.item_id
-          ) {
-            updateAvailable.value = true;
-            break;
-          }
+  const unsub = api.subscribe_multi([EventType.MEDIA_ITEM_ADDED, EventType.MEDIA_ITEM_UPDATED], (evt: EventMessage) => {
+    // signal user that there might be updated info available for this item
+    const updatedItem = evt.data as MediaItemType;
+    if (itemDetails.value?.uri == updatedItem.uri) {
+      updateAvailable.value = true;
+    } else {
+      for (const provId of updatedItem.provider_mappings) {
+        if (provId.provider_domain == itemDetails.value?.provider && provId.item_id == itemDetails.value?.item_id) {
+          updateAvailable.value = true;
+          break;
         }
       }
     }
-  );
+  });
   onBeforeUnmount(unsub);
 });
 
@@ -89,23 +76,14 @@ const loadPlaylistTracks = async function (
   limit: number,
   sort: string,
   search?: string,
-  inLibraryOnly = true
+  inLibraryOnly = true,
 ) {
+  const playlistTracks: Track[] = [];
 
-  const playlistTracks:Track[] = [];
-
-  await api.getPlaylistTracks(
-    props.itemId,
-    props.provider,
-    (data: Track[]) => {console.log("chunk", data.length);playlistTracks.push(...data)}
-  );
-  return filteredItems(
-    playlistTracks,
-    offset,
-    limit,
-    sort,
-    search,
-    inLibraryOnly
-  );
+  await api.getPlaylistTracks(props.itemId, props.provider, (data: Track[]) => {
+    console.log('chunk', data.length);
+    playlistTracks.push(...data);
+  });
+  return filteredItems(playlistTracks, offset, limit, sort, search, inLibraryOnly);
 };
 </script>
diff --git a/src/views/RadioDetails.vue b/src/views/RadioDetails.vue
index 0f1e03ac..3e851cf5 100644
--- a/src/views/RadioDetails.vue
+++ b/src/views/RadioDetails.vue
@@ -1,13 +1,9 @@
 <template>
   <section>
     <InfoHeader :item="itemDetails" />
-    <v-tabs
-      show-arrows
-      grow
-      hide-slider
-    >
+    <v-tabs show-arrows grow hide-slider>
       <v-tab v-if="showVersionsTab">
-        {{ $t("other_versions") }}
+        {{ $t('other_versions') }}
       </v-tab>
     </v-tabs>
     <v-divider />
@@ -26,12 +22,12 @@
 </template>
 
 <script setup lang="ts">
-import ItemsListing, { filteredItems } from "../components/ItemsListing.vue";
-import InfoHeader from "../components/InfoHeader.vue";
-import { ref } from "vue";
-import type { Radio } from "../plugins/api/interfaces";
-import { api } from "../plugins/api";
-import { watch } from "vue";
+import ItemsListing, { filteredItems } from '../components/ItemsListing.vue';
+import InfoHeader from '../components/InfoHeader.vue';
+import { ref } from 'vue';
+import type { Radio } from '../plugins/api/interfaces';
+import { api } from '../plugins/api';
+import { watch } from 'vue';
 
 export interface Props {
   itemId: string;
@@ -54,7 +50,7 @@ watch(
   (val) => {
     if (val) loadItemDetails();
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const loadRadioVersions = async function (
@@ -62,19 +58,9 @@ const loadRadioVersions = async function (
   limit: number,
   sort: string,
   search?: string,
-  inLibraryOnly = true
+  inLibraryOnly = true,
 ) {
-  const radioVersions = await api.getRadioVersions(
-    props.itemId,
-    props.provider
-  );
-  return filteredItems(
-    radioVersions,
-    offset,
-    limit,
-    sort,
-    search,
-    inLibraryOnly
-  );
+  const radioVersions = await api.getRadioVersions(props.itemId, props.provider);
+  return filteredItems(radioVersions, offset, limit, sort, search, inLibraryOnly);
 };
 </script>
diff --git a/src/views/settings/AddProvider.vue b/src/views/settings/AddProvider.vue
index 53cc02ca..964f1722 100644
--- a/src/views/settings/AddProvider.vue
+++ b/src/views/settings/AddProvider.vue
@@ -2,69 +2,45 @@
   <section>
     <v-card-text>
       <!-- header -->
-      <div
-        v-if="api.providerManifests[domain]"
-        style="margin-left: -5px; margin-right: -5px"
-      >
+      <div v-if="api.providerManifests[domain]" style="margin-left: -5px; margin-right: -5px">
         <v-card-title>
-          {{
-            $t("settings.setup_provider", [api.providerManifests[domain].name])
-          }}
+          {{ $t('settings.setup_provider', [api.providerManifests[domain].name]) }}
         </v-card-title>
-        <v-card-subtitle>
-          {{ api.providerManifests[domain].description }}
-        </v-card-subtitle><br />
+        <v-card-subtitle> {{ api.providerManifests[domain].description }} </v-card-subtitle><br />
         <v-card-subtitle v-if="api.providerManifests[domain].codeowners.length">
-          <b>{{ $t("settings.codeowners") }}: </b>{{ api.providerManifests[domain].codeowners.join(" / ") }}
+          <b>{{ $t('settings.codeowners') }}: </b>{{ api.providerManifests[domain].codeowners.join(' / ') }}
         </v-card-subtitle>
 
         <v-card-subtitle v-if="api.providerManifests[domain].documentation">
-          <b>{{ $t("settings.need_help_setup_provider") }} </b>&nbsp;
-          <a
-            :href="api.providerManifests[domain].documentation"
-            target="_blank"
-          >{{ $t("settings.check_docs") }}</a>
+          <b>{{ $t('settings.need_help_setup_provider') }} </b>&nbsp;
+          <a :href="api.providerManifests[domain].documentation" target="_blank">{{ $t('settings.check_docs') }}</a>
         </v-card-subtitle>
       </div>
       <br />
       <v-divider />
       <br />
       <br />
-      <edit-config
-        :config-entries="config_entries"
-        :disabled="false"
-        @submit="onSubmit"
-        @action="onAction"
-      />
+      <edit-config :config-entries="config_entries" :disabled="false" @submit="onSubmit" @action="onAction" />
     </v-card-text>
     <v-overlay
       v-model="loading"
       scrim="true"
       persistent
-      style="display: flex;align-items: center;justify-content: center"
+      style="display: flex; align-items: center; justify-content: center"
     >
-      <v-progress-circular
-        indeterminate
-        size="64"
-        color="primary"
-      />
+      <v-progress-circular indeterminate size="64" color="primary" />
     </v-overlay>
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import { nanoid } from "nanoid";
-import { useRouter } from "vue-router";
-import { api } from "@/plugins/api";
-import {
-  ConfigValueType,
-  ConfigEntry,
-  EventType,
-  EventMessage,
-} from "@/plugins/api/interfaces";
-import EditConfig from "./EditConfig.vue";
-import { watch } from "vue";
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { nanoid } from 'nanoid';
+import { useRouter } from 'vue-router';
+import { api } from '@/plugins/api';
+import { ConfigValueType, ConfigEntry, EventType, EventMessage } from '@/plugins/api/interfaces';
+import EditConfig from './EditConfig.vue';
+import { watch } from 'vue';
 
 // global refs
 const router = useRouter();
@@ -84,7 +60,7 @@ onMounted(() => {
     // ignore any events that not match our session id.
     if (evt.object_id !== sessionId) return;
     const url = evt.data as string;
-    window.open(url, "_blank")!.focus();
+    window.open(url, '_blank')!.focus();
   });
   onBeforeUnmount(unsub);
 });
@@ -96,15 +72,12 @@ watch(
   async (val) => {
     if (val) {
       // fetch initial config entries (without any action) but pass along our session id
-      config_entries.value = await api.getProviderConfigEntries(
-        props.domain,
-        undefined,
-        undefined,
-        { session_id: sessionId }
-      );
+      config_entries.value = await api.getProviderConfigEntries(props.domain, undefined, undefined, {
+        session_id: sessionId,
+      });
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // methods
@@ -115,7 +88,7 @@ const onSubmit = async function (values: Record<string, ConfigValueType>) {
     .saveProviderConfig(props.domain, values)
     .then(() => {
       loading.value = false;
-      router.push({ name: "providersettings" });
+      router.push({ name: 'providersettings' });
     })
     .catch((err) => {
       // TODO: make this a bit more fancy someday
@@ -124,10 +97,7 @@ const onSubmit = async function (values: Record<string, ConfigValueType>) {
     });
 };
 
-const onAction = async function (
-  action: string,
-  values: Record<string, ConfigValueType>
-) {
+const onAction = async function (action: string, values: Record<string, ConfigValueType>) {
   loading.value = true;
   // append existing ConfigEntry values to allow
   // values be passed between flow steps
@@ -137,7 +107,7 @@ const onAction = async function (
     }
   }
   // ensure the session id is passed along
-  values["session_id"] = sessionId;
+  values['session_id'] = sessionId;
   api
     .getProviderConfigEntries(props.domain, undefined, action, values)
     .then((entries) => {
diff --git a/src/views/settings/EditPlayer.vue b/src/views/settings/EditPlayer.vue
index e4261b63..24736ba7 100644
--- a/src/views/settings/EditPlayer.vue
+++ b/src/views/settings/EditPlayer.vue
@@ -2,39 +2,33 @@
   <section>
     <v-card-text>
       <!-- header -->
-      <div
-        v-if="config && config.provider in api.providerManifests"
-        style="margin-left: -5px; margin-right: -5px"
-      >
+      <div v-if="config && config.provider in api.providerManifests" style="margin-left: -5px; margin-right: -5px">
         <v-card-title>
-          {{
-            $t("settings.config_player", [
-              config.name || api.players[config.player_id].name,
-            ])
-          }}
+          {{ $t('settings.config_player', [config.name || api.players[config.player_id].name]) }}
         </v-card-title>
         <v-card-subtitle>
-          <b>{{ $t("settings.player_id") }}: </b>{{ config.player_id }}
+          <b>{{ $t('settings.player_id') }}: </b>{{ config.player_id }}
         </v-card-subtitle>
         <v-card-subtitle>
-          <b>{{ $t("settings.player_provider") }}: </b>{{ api.providerManifests[config.provider].name }}
+          <b>{{ $t('settings.player_provider') }}: </b>{{ api.providerManifests[config.provider].name }}
           (
           {{ api.providerManifests[config.provider].description }})
           <a
             v-if="api.providerManifests[config.provider].documentation"
             :href="api.providerManifests[config.provider].documentation"
             target="_blank"
-          >{{ $t("settings.check_docs") }}</a>
+            >{{ $t('settings.check_docs') }}</a
+          >
         </v-card-subtitle>
         <v-card-subtitle v-if="api.players[config.player_id]">
-          <b>{{ $t("settings.player_model") }}: </b>{{ api.players[config.player_id].device_info.manufacturer }} /
+          <b>{{ $t('settings.player_model') }}: </b>{{ api.players[config.player_id].device_info.manufacturer }} /
           {{ api.players[config.player_id].device_info.model }}
         </v-card-subtitle>
         <v-card-subtitle v-if="api.players[config.player_id]">
-          <b>{{ $t("settings.player_address") }}: </b>{{ api.players[config.player_id].device_info.address }}
+          <b>{{ $t('settings.player_address') }}: </b>{{ api.players[config.player_id].device_info.address }}
         </v-card-subtitle>
         <v-card-subtitle>
-          <b>{{ $t("settings.player_type_label") }}: </b>{{ $t(`player_type.${api.players[config.player_id].type}`) }}
+          <b>{{ $t('settings.player_type_label') }}: </b>{{ $t(`player_type.${api.players[config.player_id].type}`) }}
         </v-card-subtitle>
         <br />
         <v-divider />
@@ -72,15 +66,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-import { api } from "@/plugins/api";
-import {
-  ConfigValueType,
-  PlayerConfig,
-} from "@/plugins/api/interfaces";
-import EditConfig from "./EditConfig.vue";
-import { watch } from "vue";
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { api } from '@/plugins/api';
+import { ConfigValueType, PlayerConfig } from '@/plugins/api/interfaces';
+import EditConfig from './EditConfig.vue';
+import { watch } from 'vue';
 
 // global refs
 const router = useRouter();
@@ -100,15 +91,15 @@ watch(
       config.value = await api.getPlayerConfig(val);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // methods
 const onSubmit = async function (values: Record<string, ConfigValueType>) {
-  values["enabled"] = config.value!.enabled;
-  values["name"] = config.value!.name || null;
+  values['enabled'] = config.value!.enabled;
+  values['name'] = config.value!.name || null;
   api.savePlayerConfig(props.playerId!, values);
-  router.push({ name: "playersettings" });
+  router.push({ name: 'playersettings' });
 };
 </script>
 
diff --git a/src/views/settings/EditProvider.vue b/src/views/settings/EditProvider.vue
index 9575da2d..6b2836e3 100644
--- a/src/views/settings/EditProvider.vue
+++ b/src/views/settings/EditProvider.vue
@@ -2,36 +2,20 @@
   <section>
     <v-card-text>
       <!-- header -->
-      <div
-        v-if="config && api.providerManifests[config.domain]"
-        style="margin-left: -5px; margin-right: -5px"
-      >
+      <div v-if="config && api.providerManifests[config.domain]" style="margin-left: -5px; margin-right: -5px">
         <v-card-title>
-          {{
-            $t("settings.setup_provider", [
-              api.providerManifests[config.domain].name,
-            ])
-          }}
+          {{ $t('settings.setup_provider', [api.providerManifests[config.domain].name]) }}
         </v-card-title>
-        <v-card-subtitle>
-          {{
-            api.providerManifests[config.domain].description
-          }}
-        </v-card-subtitle><br />
-        <v-card-subtitle
-          v-if="api.providerManifests[config.domain].codeowners.length"
-        >
-          <b>{{ $t("settings.codeowners") }}: </b>{{ api.providerManifests[config.domain].codeowners.join(" / ") }}
+        <v-card-subtitle> {{ api.providerManifests[config.domain].description }} </v-card-subtitle><br />
+        <v-card-subtitle v-if="api.providerManifests[config.domain].codeowners.length">
+          <b>{{ $t('settings.codeowners') }}: </b>{{ api.providerManifests[config.domain].codeowners.join(' / ') }}
         </v-card-subtitle>
 
-        <v-card-subtitle
-          v-if="api.providerManifests[config.domain].documentation"
-        >
-          <b>{{ $t("settings.need_help_setup_provider") }} </b>&nbsp;
-          <a
-            :href="api.providerManifests[config.domain].documentation"
-            target="_blank"
-          >{{ $t("settings.check_docs") }}</a>
+        <v-card-subtitle v-if="api.providerManifests[config.domain].documentation">
+          <b>{{ $t('settings.need_help_setup_provider') }} </b>&nbsp;
+          <a :href="api.providerManifests[config.domain].documentation" target="_blank">{{
+            $t('settings.check_docs')
+          }}</a>
         </v-card-subtitle>
         <br />
         <v-divider />
@@ -71,28 +55,19 @@
       persistent
       style="display: flex; align-items: center; justify-content: center"
     >
-      <v-progress-circular
-        indeterminate
-        size="64"
-        color="primary"
-      />
+      <v-progress-circular indeterminate size="64" color="primary" />
     </v-overlay>
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import { useRouter } from "vue-router";
-import { api } from "@/plugins/api";
-import {
-  ProviderConfig,
-  ConfigValueType,
-  EventMessage,
-  EventType,
-} from "@/plugins/api/interfaces";
-import EditConfig from "./EditConfig.vue";
-import { watch } from "vue";
-import { nanoid } from "nanoid";
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useRouter } from 'vue-router';
+import { api } from '@/plugins/api';
+import { ProviderConfig, ConfigValueType, EventMessage, EventType } from '@/plugins/api/interfaces';
+import EditConfig from './EditConfig.vue';
+import { watch } from 'vue';
+import { nanoid } from 'nanoid';
 
 // global refs
 const router = useRouter();
@@ -112,7 +87,7 @@ onMounted(() => {
     // ignore any events that not match our session id.
     if (evt.object_id !== sessionId) return;
     const url = evt.data as string;
-    window.open(url, "_blank")!.focus();
+    window.open(url, '_blank')!.focus();
   });
   onBeforeUnmount(unsub);
 });
@@ -125,20 +100,20 @@ watch(
       config.value = await api.getProviderConfig(val);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // methods
 const onSubmit = async function (values: Record<string, ConfigValueType>) {
   // save new provider config
   loading.value = true;
-  values["enabled"] = config.value!.enabled;
-  values["name"] = config.value!.name || null;
+  values['enabled'] = config.value!.enabled;
+  values['name'] = config.value!.name || null;
   api
     .saveProviderConfig(config.value!.domain, values, config.value!.instance_id)
     .then(() => {
       loading.value = false;
-      router.push({ name: "providersettings" });
+      router.push({ name: 'providersettings' });
     })
     .catch((err) => {
       // TODO: make this a bit more fancy someday
@@ -147,10 +122,7 @@ const onSubmit = async function (values: Record<string, ConfigValueType>) {
     });
 };
 
-const onAction = async function (
-  action: string,
-  values: Record<string, ConfigValueType>
-) {
+const onAction = async function (action: string, values: Record<string, ConfigValueType>) {
   loading.value = true;
   // append existing ConfigEntry values to allow
   // values be passed between flow steps
@@ -160,7 +132,7 @@ const onAction = async function (
     }
   }
   // ensure the session id is passed along
-  values["session_id"] = sessionId;
+  values['session_id'] = sessionId;
   api
     .getProviderConfigEntries(config.value!.domain, config.value!.instance_id, action, values)
     .then((entries) => {
diff --git a/src/views/settings/Players.vue b/src/views/settings/Players.vue
index 60897cb3..31ef2346 100644
--- a/src/views/settings/Players.vue
+++ b/src/views/settings/Players.vue
@@ -2,13 +2,13 @@
   <Container>
     <RecycleScroller v-slot="{ item }" :items="playerConfigs" :item-size="60" key-field="player_id" page-mode>
       <ListItem
-        link
-        @click="editPlayer(item.player_id)"
         v-hold="
           () => {
             editPlayer(item.player_id);
           }
         "
+        link
+        @click="editPlayer(item.player_id)"
       >
         <template #prepend>
           <provider-icon :domain="item.provider" :size="'40px'" class="listitem-media-thumb" />
diff --git a/src/views/settings/Providers.vue b/src/views/settings/Providers.vue
index db72a2f1..b9747d02 100644
--- a/src/views/settings/Providers.vue
+++ b/src/views/settings/Providers.vue
@@ -62,14 +62,14 @@
           page-mode
         >
           <ListItem
-            link
-            density="compact"
-            @click="editProvider(item.instance_id)"
             v-hold="
               () => {
                 editProvider(item.instance_id);
               }
             "
+            link
+            density="compact"
+            @click="editProvider(item.instance_id)"
           >
             <template #prepend>
               <provider-icon :domain="item.domain" :size="'40px'" class="listitem-media-thumb" />
diff --git a/vite.config.ts b/vite.config.ts
index d5b5574b..e7498f54 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,7 +5,7 @@ import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
 import { VitePWA } from 'vite-plugin-pwa';
 import { fileURLToPath, URL } from 'node:url';
 import webfontDownload from 'vite-plugin-webfont-dl';
-import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import path from 'path';
 
 // https://vitejs.dev/config/
@@ -52,7 +52,7 @@ export default defineConfig({
     }),
     VueI18nPlugin({
       include: [path.resolve(__dirname, './src/translations/**')],
-    })
+    }),
   ],
   define: { 'process.env': {} },
   resolve: {