add eslint

src/library/TrackContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <b-dropdown variant="link" boundary="window" no-caret toggle-class="p-0">
     <template #button-content>
-      <Icon icon="three-dots-vertical"/>
+      <Icon icon="three-dots-vertical" />
     </template>
     <b-dropdown-item-button @click="playNext()">
       Play next
@@ -12,11 +12,11 @@
     <b-dropdown-item-button @click="toggleStarred()">
       {{ starred ? 'Unstar' : 'Star' }}
     </b-dropdown-item-button>
-    <slot :item="track"></slot>
+    <slot :item="track" />
   </b-dropdown>
 </template>
 <script lang="ts">
-  import Vue from "vue";
+  import Vue from 'vue'
 
   export default Vue.extend({
     props: {
@@ -30,18 +30,18 @@
     methods: {
       toggleStarred() {
         if (this.starred) {
-          this.$api.unstar('track', this.track.id);
+          this.$api.unstar('track', this.track.id)
         } else {
-          this.$api.star('track', this.track.id);
+          this.$api.star('track', this.track.id)
         }
-        this.starred = !this.starred;
+        this.starred = !this.starred
       },
       playNext() {
-        return this.$store.dispatch("player/playNext", this.track);
+        return this.$store.dispatch('player/playNext', this.track)
       },
       addToQueue() {
-        return this.$store.dispatch("player/addToQueue", this.track);
+        return this.$store.dispatch('player/addToQueue', this.track)
       },
     }
-  });
+  })
 </script>

src/library/TrackList.vue

@@ -1,65 +1,73 @@
 <template>
   <div>
     <b-table-simple borderless hover>
-    <thead>
-      <tr>
-        <th class="pl-0 pr-0 text-center text-muted"></th>
-        <th class="text-left">Title</th>
-        <th class="text-left d-none d-lg-table-cell">Artist</th>
-        <th class="text-left d-none d-md-table-cell" v-if="showAlbum">Album</th>
-        <th class="text-right d-none d-md-table-cell">Duration</th>
-        <th class="text-right">Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(item, index) in tracks" :key="index"
-           draggable="true" @dragstart="dragstart(item.id, $event)"
-          :class="{'text-primary': item.id === playingTrackId}">
-        <td class="pl-0 pr-0 text-center text-muted"
-            style="min-width: 20px; max-width: 20px;"
-            @click="play(index)">
-          <template v-if="item.id === playingTrackId">
-            <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" class="text-primary"/>
-          </template>
-          <template v-else>
-            <span class="track-number">{{ item.track || 1 }}</span>
-            <Icon class="track-number-hover" icon="play-fill"/>
-          </template>
-        </td>
-        <td @click="play(index)">
-          {{ item.title }}
-          <div class="d-lg-none text-muted">
-            <small>{{ item.artist }}</small>
-          </div>
-        </td>
-        <td class="d-none d-lg-table-cell">
-          <template v-if="item.artistId">
-            <router-link :to="{name: 'artist', params: {id: item.artistId}}">
-              {{ item.artist }}
-            </router-link>
-          </template>
-          <template v-else>
-            {{ item.artist }}
-          </template>
-        </td>
-        <td class="d-none d-md-table-cell" v-if="showAlbum">
-          <router-link :to="{name: 'album', params: {id: item.albumId}}">
-            {{ item.album }}
-          </router-link>
-        </td>
-        <td class="text-right d-none d-md-table-cell">
-          {{ item.duration | duration }}
-        </td>
-        <td class="text-right">
-          <TrackContextMenu :track="item">
-            <template v-slot="{ item }">
-              <slot name="context-menu" :index="index" :item="item"></slot>
+      <thead>
+        <tr>
+          <th class="pl-0 pr-0 text-center text-muted" />
+          <th class="text-left">
+            Title
+          </th>
+          <th class="text-left d-none d-lg-table-cell">
+            Artist
+          </th>
+          <th v-if="showAlbum" class="text-left d-none d-md-table-cell">
+            Album
+          </th>
+          <th class="text-right d-none d-md-table-cell">
+            Duration
+          </th>
+          <th class="text-right">
+            Actions
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in tracks" :key="index"
+            draggable="true" :class="{'text-primary': item.id === playingTrackId}"
+            @dragstart="dragstart(item.id, $event)">
+          <td class="pl-0 pr-0 text-center text-muted"
+              style="min-width: 20px; max-width: 20px;"
+              @click="play(index)">
+            <template v-if="item.id === playingTrackId">
+              <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" class="text-primary" />
             </template>
-          </TrackContextMenu>
-        </td>
-      </tr>
-    </tbody>
-  </b-table-simple>
+            <template v-else>
+              <span class="track-number">{{ item.track || 1 }}</span>
+              <Icon class="track-number-hover" icon="play-fill" />
+            </template>
+          </td>
+          <td @click="play(index)">
+            {{ item.title }}
+            <div class="d-lg-none text-muted">
+              <small>{{ item.artist }}</small>
+            </div>
+          </td>
+          <td class="d-none d-lg-table-cell">
+            <template v-if="item.artistId">
+              <router-link :to="{name: 'artist', params: {id: item.artistId}}">
+                {{ item.artist }}
+              </router-link>
+            </template>
+            <template v-else>
+              {{ item.artist }}
+            </template>
+          </td>
+          <td v-if="showAlbum" class="d-none d-md-table-cell">
+            <router-link :to="{name: 'album', params: {id: item.albumId}}">
+              {{ item.album }}
+            </router-link>
+          </td>
+          <td class="text-right d-none d-md-table-cell">
+            {{ item.duration | duration }}
+          </td>
+          <td class="text-right">
+            <TrackContextMenu :track="item">
+              <slot name="context-menu" :index="index" :item="item" />
+            </TrackContextMenu>
+          </td>
+        </tr>
+      </tbody>
+    </b-table-simple>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -76,43 +84,43 @@
   }
 </style>
 <script lang="ts">
-import Vue from "vue";
-import { mapActions, mapMutations, mapGetters, mapState } from 'vuex';
-import TrackContextMenu from "@/library/TrackContextMenu.vue"
+  import Vue from 'vue'
+  import { mapActions, mapGetters, mapState } from 'vuex'
+  import TrackContextMenu from '@/library/TrackContextMenu.vue'
 
-export default Vue.extend({
-  components: {
-    TrackContextMenu,
-  },
-  props: {
-    tracks: { type: Array, required: true },
-    showAlbum: { type: Boolean, default: false },
-  },
-  computed: {
-    ...mapState("player", {
-      isPlaying: "isPlaying",
-    }),
-    ...mapGetters({
-      playingTrackId: "player/trackId",
-    }),
-  },
-  methods: {
-    ...mapActions({
-      playPause: "player/playPause",
-    }),
-    play(index: number) {
-      if ((this.tracks as any)[index].id === this.playingTrackId) {
-        return this.$store.dispatch("player/playPause")
-      }
-      return this.$store.dispatch('player/playQueue', {
-        index,
-        queue: this.tracks,
-      })
+  export default Vue.extend({
+    components: {
+      TrackContextMenu,
     },
-    dragstart(id: string, event: any)  {
-      console.log("dragstart: " + id)
-      event.dataTransfer.setData("id", id);
+    props: {
+      tracks: { type: Array, required: true },
+      showAlbum: { type: Boolean, default: false },
     },
-  }
-});
+    computed: {
+      ...mapState('player', {
+        isPlaying: 'isPlaying',
+      }),
+      ...mapGetters({
+        playingTrackId: 'player/trackId',
+      }),
+    },
+    methods: {
+      ...mapActions({
+        playPause: 'player/playPause',
+      }),
+      play(index: number) {
+        if ((this.tracks as any)[index].id === this.playingTrackId) {
+          return this.$store.dispatch('player/playPause')
+        }
+        return this.$store.dispatch('player/playQueue', {
+          index,
+          queue: this.tracks,
+        })
+      },
+      dragstart(id: string, event: any) {
+        console.log('dragstart: ' + id)
+        event.dataTransfer.setData('id', id)
+      },
+    }
+  })
 </script>

src/library/album/AlbumDetails.vue

@@ -1,10 +1,11 @@
 <template>
   <div v-if="album">
     <div class="d-flex mb-3">
-      <b-img height="300" width="300" fluid :src="album.image"/>
+      <b-img height="300" width="300" fluid :src="album.image" />
       <div class="ml-3 ml-md-4">
         <h1>{{ album.name }}</h1>
-        <p>by 
+        <p>
+          by
           <router-link :to="{name: 'artist', params: { id: album.artistId }}">
             {{ album.artist }}
           </router-link>
@@ -15,7 +16,7 @@
     </div>
     <div class="row">
       <div class="col">
-        <TrackList :tracks="album.song"/>
+        <TrackList :tracks="album.song" />
       </div>
     </div>
   </div>
@@ -26,23 +27,23 @@
   }
 </style>
 <script lang="ts">
-import Vue from "vue";
-import TrackList from "@/library/TrackList.vue"
+  import Vue from 'vue'
+  import TrackList from '@/library/TrackList.vue'
 
-export default Vue.extend({
-  components: {
-    TrackList,
-  },
-  props: {
-    id: String
-  },
-  data() {
-    return {
-      album: null,
+  export default Vue.extend({
+    components: {
+      TrackList,
+    },
+    props: {
+      id: { type: String, required: true }
+    },
+    data() {
+      return {
+        album: null,
+      }
+    },
+    async mounted() {
+      this.album = await this.$api.getAlbumDetails(this.id)
     }
-  },
-  async mounted() {
-    this.album = await this.$api.getAlbumDetails(this.id);
-  }
-});
+  })
 </script>

src/library/album/AlbumLibrary.vue

@@ -1,50 +1,47 @@
 <template>
   <div>
-    <Spinner :data="albums" v-slot="{albums: data}">
-      <AlbumList :items="albums"/>
+    <Spinner v-slot="{ data }" :data="albums">
+      <AlbumList :items="data" />
     </Spinner>
   </div>
 </template>
 <script lang="ts">
-import Vue from "vue";
-import AlbumList from './AlbumList.vue';
-import { AlbumSort } from '@/shared/api';
+  import Vue from 'vue'
+  import AlbumList from './AlbumList.vue'
+  import { AlbumSort } from '@/shared/api'
 
-export default Vue.extend({
-  components: {
-    AlbumList,
-  },
-  props: {
-    msg: String
-  },
-  data() {
-    return {
-      sort: "newest",
-      albums: null,
-    };
-  },
-  computed: {
-    sortOptions() {
-      return [
-        { text: "A-Z", value: "alphabeticalByName" },
-        { text: "Date", value: "newest" },
-        { text: "frequent", value: "frequent" },
+  export default Vue.extend({
+    components: {
+      AlbumList,
+    },
+    data() {
+      return {
+        sort: 'newest',
+        albums: null,
+      }
+    },
+    computed: {
+      sortOptions() {
+        return [
+          { text: 'A-Z', value: 'alphabeticalByName' },
+          { text: 'Date', value: 'newest' },
+          { text: 'frequent', value: 'frequent' },
         // { text: "random", value: "random" },
         // { text: "recent", value: "recent" },
         // { text: "starred", value: "starred" },
-      ]
-    }
-  },
-  watch: {
-    sort: {
-      immediate: true,
-      handler(value: AlbumSort) {
-        this.albums = null;
-        this.$api.getAlbums(value).then(albums => {
-          this.albums = albums;
-        });
+        ]
       }
-    }
-  },
-});
+    },
+    watch: {
+      sort: {
+        immediate: true,
+        handler(value: AlbumSort) {
+          this.albums = null
+          this.$api.getAlbums(value).then(albums => {
+            this.albums = albums
+          })
+        }
+      }
+    },
+  })
 </script>

src/library/album/AlbumList.vue

@@ -1,9 +1,9 @@
 <template functional>
   <Tiles square>
     <Tile v-for="item in props.items" :key="item.id"
-      :image="item.image"
-      :to="{name: 'album', params: { id: item.id } }"
-      :title="item.name">
+          :image="item.image"
+          :to="{name: 'album', params: { id: item.id } }"
+          :title="item.name">
       <template v-slot:text>
         <router-link :to="{name: 'artist', params: { id: item.artistId } }" class="text-muted">
           {{ item.artist }}

src/library/artist/ArtistDetails.vue

@@ -7,46 +7,53 @@
         <ExternalLink v-if="item.lastFmUrl" :href="item.lastFmUrl" class="btn btn-secondary mr-2">
           Last.fm
         </ExternalLink>
-        <ExternalLink v-if="item.musicBrainzUrl" :href="item.musicBrainzUrl" class="btn btn-secondary">
+        <ExternalLink
+          v-if="item.musicBrainzUrl"
+          :href="item.musicBrainzUrl"
+          class="btn btn-secondary">
           MusicBrainz
         </ExternalLink>
       </div>
     </div>
-    <h3 class="pt-5">Albums</h3>
-    <AlbumList :items="item.albums"/>
+    <h3 class="pt-5">
+      Albums
+    </h3>
+    <AlbumList :items="item.albums" />
 
     <template v-if="item.similarArtist.length > 0">
-      <h3 class="pt-5">Similar artists</h3>
-      <ArtistList :items="item.similarArtist"/>
+      <h3 class="pt-5">
+        Similar artists
+      </h3>
+      <ArtistList :items="item.similarArtist" />
     </template>
   </div>
 </template>
 <script lang="ts">
-import Vue from "vue";
-import AlbumList from "@/library/album/AlbumList.vue";
-import ArtistList from "@/library/artist/ArtistList.vue";
+  import Vue from 'vue'
+  import AlbumList from '@/library/album/AlbumList.vue'
+  import ArtistList from '@/library/artist/ArtistList.vue'
 
-export default Vue.extend({
-  components: {
-    AlbumList,
-    ArtistList,
-  },
-  props: {
-    id: String
-  },
-  data() {
-    return {
-      item: null as any,
-    }
-  },
-  watch: {
-    id: {
-      immediate: true,
-      async handler(value: string) {
-        this.item = null,
-        this.item = await this.$api.getArtistDetails(this.id);
+  export default Vue.extend({
+    components: {
+      AlbumList,
+      ArtistList,
+    },
+    props: {
+      id: { type: String, required: true }
+    },
+    data() {
+      return {
+        item: null as any,
+      }
+    },
+    watch: {
+      id: {
+        immediate: true,
+        async handler(value: string) {
+          this.item = null
+          this.item = await this.$api.getArtistDetails(value)
+        }
       }
     }
-  }
-});
+  })
 </script>

src/library/artist/ArtistLibrary.vue

@@ -1,9 +1,9 @@
 <template>
-  <ArtistList :items="items"/>
+  <ArtistList :items="items" />
 </template>
 <script lang="ts">
-  import Vue from "vue";
-  import ArtistList from './ArtistList.vue';
+  import Vue from 'vue'
+  import ArtistList from './ArtistList.vue'
 
   export default Vue.extend({
     components: {
@@ -12,12 +12,12 @@
     data() {
       return {
         items: []
-      };
+      }
     },
     created() {
       this.$api.getArtists().then(items => {
-        this.items = items;
-      });
+        this.items = items
+      })
     }
-  });
+  })
 </script>

src/library/artist/ArtistList.vue

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

src/library/genre/GenreDetails.vue

@@ -1,27 +1,27 @@
 <template>
   <div v-if="item">
     <h1>{{ item.name }}</h1>
-    <TrackList :tracks="item.tracks" show-album/>
+    <TrackList :tracks="item.tracks" show-album />
   </div>
 </template>
 <script lang="ts">
-import Vue from "vue";
-import TrackList from "@/library/TrackList.vue"
+  import Vue from 'vue'
+  import TrackList from '@/library/TrackList.vue'
 
-export default Vue.extend({
-  components: {
-    TrackList,
-  },
-  props: {
-    id: String
-  },
-  data() {
-    return {
-      item: null as any,
+  export default Vue.extend({
+    components: {
+      TrackList,
+    },
+    props: {
+      id: { type: String, required: true }
+    },
+    data() {
+      return {
+        item: null as any,
+      }
+    },
+    async created() {
+      this.item = await this.$api.getGenreDetails(this.id)
     }
-  },
-  async created() {
-    this.item = await this.$api.getGenreDetails(this.id);
-  }
-});
+  })
 </script>

src/library/genre/GenreLibrary.vue

@@ -1,9 +1,9 @@
 <template>
   <Tiles>
     <Tile v-for="item in items" :key="item.id"
-      :image="item.image"
-      :to="{name: 'genre', params: { id: item.id } }"
-      :title="item.name">
+          :image="item.image"
+          :to="{name: 'genre', params: { id: item.id } }"
+          :title="item.name">
       <template v-slot:text>
         <strong>{{ item.albumCount }}</strong> albums ·
         <strong>{{ item.songCount }}</strong> songs
@@ -12,19 +12,19 @@
   </Tiles>
 </template>
 <script lang="ts">
-import Vue from "vue";
+  import Vue from 'vue'
 
-export default Vue.extend({
-  components: {},
-  data() {
-    return {
-      items: [],
-    };
-  },
-  created() {
-    this.$api.getGenres().then((items) => {
-      this.items = items;
-    });
-  },
-});
+  export default Vue.extend({
+    components: {},
+    data() {
+      return {
+        items: [],
+      }
+    },
+    created() {
+      this.$api.getGenres().then((items) => {
+        this.items = items
+      })
+    },
+  })
 </script>

src/library/starred/Starred.vue

@@ -1,9 +1,9 @@
 <template>
-  <TrackList v-if="items" :tracks="items"/>
+  <TrackList v-if="items" :tracks="items" />
 </template>
 <script lang="ts">
-  import Vue from "vue";
-  import TrackList from "@/library/TrackList.vue"
+  import Vue from 'vue'
+  import TrackList from '@/library/TrackList.vue'
 
   export default Vue.extend({
     components: {
@@ -16,8 +16,8 @@
     },
     created() {
       this.$api.getStarred().then(result => {
-        this.items = result;
+        this.items = result
       })
     }
-  });
+  })
 </script>