update dependencies

src/global.d.ts

@@ -5,14 +5,6 @@ declare module '*.vue' {
 
 declare module 'md5-es';
 
-interface Navigator {
-  readonly mediaSession?: MediaSession;
-}
-
-interface Window {
-  MediaSession?: MediaSession;
-}
-
 type MediaSessionPlaybackState = 'none' | 'paused' | 'playing';
 
 type MediaSessionAction =
@@ -33,21 +25,6 @@ interface MediaSessionActionDetails {
   seekTime?: number;
 }
 
-interface MediaPositionState {
-  duration?: number;
-  playbackRate?: number;
-  position?: number;
-}
-
-interface MediaSession {
-  playbackState: MediaSessionPlaybackState;
-  metadata: MediaMetadata | null;
-  setActionHandler(
-    action: MediaSessionAction,
-    listener: ((details: MediaSessionActionDetails) => void)): void;
-  setPositionState?(arg: MediaPositionState): void;
-}
-
 interface MediaImage {
   src: string;
   sizes?: string;
@@ -64,3 +41,26 @@ interface MediaMetadataInit {
 declare class MediaMetadata {
   constructor(init?: MediaMetadataInit);
 }
+
+interface MediaPositionState {
+  duration?: number;
+  playbackRate?: number;
+  position?: number;
+}
+
+interface MediaSession {
+  playbackState: MediaSessionPlaybackState;
+  metadata: MediaMetadata | null;
+  setActionHandler(
+    action: MediaSessionAction,
+    listener: ((details: MediaSessionActionDetails) => void)): void;
+  setPositionState?(arg: MediaPositionState): void;
+}
+
+interface Navigator {
+  readonly mediaSession?: MediaSession;
+}
+
+interface Window {
+  MediaSession?: MediaSession;
+}

src/library/album/AlbumLibrary.vue

@@ -8,7 +8,7 @@
       </li>
     </ul>
     <AlbumList :items="albums" />
-    <InfiniteLoader :key="sort" :loading="loading" :has-more="hasMore" @loadMore="loadMore" />
+    <InfiniteLoader :key="sort" :loading="loading" :has-more="hasMore" @load-more="loadMore" />
   </div>
 </template>
 <script lang="ts">

src/library/album/AlbumList.vue

@@ -4,7 +4,7 @@
           :image="item.image"
           :to="{name: 'album', params: { id: item.id } }"
           :title="item.name">
-      <template v-slot:text>
+      <template #text>
         <router-link :to="{name: 'artist', params: { id: item.artistId } }" class="text-muted">
           {{ item.artist }}
         </router-link>

src/library/artist/ArtistDetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <ContentLoader #default :loading="item == null">
+  <ContentLoader v-slot :loading="item == null">
     <div class="row">
       <div class="col col-xl-8">
         <h1>{{ item.name }}</h1>

src/library/artist/ArtistList.vue

@@ -3,7 +3,7 @@
     <Tile v-for="item in props.items" :key="item.id"
           :to="{name: 'artist', params: { id: item.id } }"
           :title="item.name">
-      <template v-slot:text>
+      <template #text>
         <strong>{{ item.albumCount }}</strong> albums
       </template>
     </Tile>

src/library/genre/GenreDetails.vue

@@ -14,12 +14,12 @@
       </li>
     </ul>
     <template v-if="section === 'tracks'">
-      <ContentLoader #default :loading="tracks == null">
+      <ContentLoader v-slot :loading="tracks == null">
         <TrackList :tracks="tracks" />
       </ContentLoader>
     </template>
     <template v-else>
-      <ContentLoader #default :loading="albums == null">
+      <ContentLoader v-slot :loading="albums == null">
         <AlbumList :items="albums" />
       </ContentLoader>
     </template>

src/library/genre/GenreLibrary.vue

@@ -4,7 +4,7 @@
           :image="item.image"
           :to="{name: 'genre', params: { id: item.id } }"
           :title="item.name">
-      <template v-slot:text>
+      <template #text>
         <strong>{{ item.albumCount }}</strong> albums •
         <strong>{{ item.songCount }}</strong> songs
       </template>

src/playlist/Playlist.vue

@@ -1,5 +1,5 @@
 <template>
-  <ContentLoader #default :loading="playlist == null">
+  <ContentLoader v-slot :loading="playlist == null">
     <div class="d-flex justify-content-between">
       <h1>{{ playlist.name }}</h1>
       <OverflowMenu>
@@ -9,7 +9,7 @@
       </OverflowMenu>
     </div>
     <TrackList :tracks="playlist.tracks" @remove="remove(index)">
-      <template v-slot:context-menu="{index}">
+      <template #context-menu="{index}">
         <b-dropdown-item-button @click="remove(index)">
           Remove
         </b-dropdown-item-button>

src/playlist/PlaylistList.vue

@@ -4,7 +4,7 @@
           :image="item.image"
           :to="{name: 'playlist', params: { id: item.id } }"
           :title="item.name">
-      <template v-slot:text>
+      <template #text>
         <strong>{{ item.songCount }}</strong> songs
       </template>
     </Tile>

src/search/SearchResult.vue

@@ -1,5 +1,5 @@
 <template>
-  <ContentLoader #default :loading="result == null">
+  <ContentLoader v-slot :loading="result == null">
     <div v-if="result.artists.length > 0" class="mb-5">
       <h1>Artists</h1>
       <ArtistList :items="result.artists" />

src/shared/components/InfiniteLoader.vue

@@ -45,7 +45,7 @@
     },
     methods: {
       loadMore() {
-        this.$emit('loadMore')
+        this.$emit('load-more')
       },
     }
   })