add eslint

2020-08-10 11:11:40 +02:00
parent 9f842bcffe
commit 8e0cc715ab
50 changed files with 2493 additions and 1059 deletions
@@ -2,13 +2,13 @@
  <div class="d-flex player">
    <div v-if="track" class="d-none d-sm-block">
      <router-link :to="{name: 'album', params: {id: track.albumId}}">
-        <b-img :src="track.image" block width="80px" height="80px"></b-img>
+        <b-img :src="track.image" block width="80px" height="80px" />
      </router-link>
    </div>
    <div class="flex-fill">
      <!-- Progress --->
      <div class="progress2" @click="seek">
-        <b-progress :value="progress" :max="100" height="4px"></b-progress>
+        <b-progress :value="progress" :max="100" height="4px" />
      </div>
      <div class="row d-flex align-items-center p-2 m-0">
        <!-- Track info --->
@@ -26,13 +26,13 @@
        <!-- Controls--->
        <div class="col-auto p-0">
          <b-button variant="link" class="m-2" @click="previous">
-            <Icon icon="skip-start-fill"/>
+            <Icon icon="skip-start-fill" />
          </b-button>
          <b-button variant="link" size="lg" class="m-2" @click="playPause">
-            <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'"/>
+            <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" />
          </b-button>
          <b-button variant="link" class="m-2" @click="next">
-            <Icon icon="skip-end-fill"/>
+            <Icon icon="skip-end-fill" />
          </b-button>
        </div>
        <div class="col p-0 text-truncate">
@@ -50,39 +50,39 @@
  }
 </style>
 <script lang="ts">
-import Vue from "vue";
-import { mapMutations, mapState, mapGetters, mapActions } from 'vuex';
+  import Vue from 'vue'
+  import { mapState, mapGetters, mapActions } from 'vuex'

-export default Vue.extend({
-  data() {
-    return {
-      
-    };
-  },
-  computed: {
-    ...mapState("player", {
-      isPlaying: (state: any) => state.isPlaying,
-      currentTime: (state: any) => state.currentTime,
-      duration: (state: any) => state.duration,
-    }),
-    ...mapGetters("player", [
-      "track",
-      "progress",
-    ]),
-  },
-  methods: {
-    ...mapActions("player", [
-      "playPause",
-      "next",
-      "previous",
-    ]),
-    seek(event: any) {
-      if (event.target) {
-        const width = event.currentTarget.clientWidth;
-        const value = event.offsetX / width;
-        return this.$store.dispatch("player/seek", value);
+  export default Vue.extend({
+    data() {
+      return {
+
+      }
+    },
+    computed: {
+      ...mapState('player', {
+        isPlaying: (state: any) => state.isPlaying,
+        currentTime: (state: any) => state.currentTime,
+        duration: (state: any) => state.duration,
+      }),
+      ...mapGetters('player', [
+        'track',
+        'progress',
+      ]),
+    },
+    methods: {
+      ...mapActions('player', [
+        'playPause',
+        'next',
+        'previous',
+      ]),
+      seek(event: any) {
+        if (event.target) {
+          const width = event.currentTarget.clientWidth
+          const value = event.offsetX / width
+          return this.$store.dispatch('player/seek', value)
+        }
      }
    }
-  }
-});
+  })
 </script>
@@ -10,23 +10,23 @@
  </div>
 </template>
 <script lang="ts">
-import Vue from "vue";
-import { mapState, mapMutations, mapActions } from 'vuex';
-import TrackList from "@/library/TrackList.vue";
+  import Vue from 'vue'
+  import { mapState, mapMutations } from 'vuex'
+  import TrackList from '@/library/TrackList.vue'

-export default Vue.extend({
-  components: {
-    TrackList,
-  },
-  computed: {
-    ...mapState("player", {
-      tracks: (state: any) => state.queue,
-    })
-  },
-  methods: {
-    ...mapMutations("player", {
-      remove: "removeFromQueue",
-    }),
-  }
-});
+  export default Vue.extend({
+    components: {
+      TrackList,
+    },
+    computed: {
+      ...mapState('player', {
+        tracks: (state: any) => state.queue,
+      })
+    },
+    methods: {
+      ...mapMutations('player', {
+        remove: 'removeFromQueue',
+      }),
+    }
+  })
 </script>
@@ -1,9 +1,9 @@
 <template>
  <div>
    <div class="col" d-flex fill-height grow>
-          <h1>{{ track.name }}</h1>
-        <div>{{ track.artist }}</div>
-        <v-card color=blue tile height="100%" width="100%"></v-card>
+      <h1>{{ track.name }}</h1>
+      <div>{{ track.artist }}</div>
+      <v-card color="blue" tile height="100%" width="100%" />
    </div>
  </div>
 </template>
@@ -18,11 +18,11 @@

 </style>
 <script lang="ts">
-import Vue from "vue";
+  import Vue from 'vue'

-export default Vue.extend({
-  props: {
-    album: Object
-  }
-});
+  export default Vue.extend({
+    props: {
+      album: { type: Object, required: true }
+    }
+  })
 </script>
@@ -1,12 +1,12 @@
 import { Store, Module } from 'vuex'

-const audio = new Audio();
-const storedQueue = JSON.parse(localStorage.getItem("queue") || "[]");
-const storedQueueIndex = parseInt(localStorage.getItem("queueIndex") || "-1");
+const audio = new Audio()
+const storedQueue = JSON.parse(localStorage.getItem('queue') || '[]')
+const storedQueueIndex = parseInt(localStorage.getItem('queueIndex') || '-1')
 if (storedQueueIndex > -1 && storedQueueIndex < storedQueue.length) {
-  audio.src = storedQueue[storedQueueIndex].url;
+  audio.src = storedQueue[storedQueueIndex].url
 }
-const mediaSession: MediaSession | undefined = navigator.mediaSession;
+const mediaSession: MediaSession | undefined = navigator.mediaSession

 interface State {
  queue: any[];
@@ -28,177 +28,176 @@ export const playerModule: Module<State, any> = {

  mutations: {
    setPlaying(state) {
-      state.isPlaying = true;
+      state.isPlaying = true
      if (mediaSession) {
-        mediaSession.playbackState = "playing";
+        mediaSession.playbackState = 'playing'
      }
    },
    setPaused(state) {
-      state.isPlaying = false;
+      state.isPlaying = false
      if (mediaSession) {
-        mediaSession.playbackState = "paused";
+        mediaSession.playbackState = 'paused'
      }
    },
    setPosition(state, time: number) {
-      audio.currentTime = time;
+      audio.currentTime = time
    },
    setQueue(state, queue) {
-      state.queue = queue;
-      state.queueIndex = -1;
-      localStorage.setItem("queue", JSON.stringify(queue));
+      state.queue = queue
+      state.queueIndex = -1
+      localStorage.setItem('queue', JSON.stringify(queue))
    },
    setQueueIndex(state, index) {
      if (state.queue.length === 0) {
-        return;
+        return
      }
-      index = Math.max(0, index);
-      index = index < state.queue.length ? index : 0;
-      state.queueIndex = index;
-      localStorage.setItem("queueIndex", index);
-      const track = state.queue[index];
-      audio.src = track.url;
+      index = Math.max(0, index)
+      index = index < state.queue.length ? index : 0
+      state.queueIndex = index
+      localStorage.setItem('queueIndex', index)
+      const track = state.queue[index]
+      audio.src = track.url
      if (mediaSession) {
        mediaSession.metadata = new MediaMetadata({
          title: track.title,
          artist: track.artist,
          album: track.album,
-          artwork: track.image ? [{ src: track.image, sizes: "300x300" }] : undefined,
-        });
+          artwork: track.image ? [{ src: track.image, sizes: '300x300' }] : undefined,
+        })
      }
    },
    addToQueue(state, track) {
-      state.queue.push(track);
+      state.queue.push(track)
    },
    removeFromQueue(state, index) {
-      state.queue.splice(index, 1);
+      state.queue.splice(index, 1)
      if (index < state.queueIndex) {
-        state.queueIndex--;
+        state.queueIndex--
      }
    },
    setNextInQueue(state, track) {
-      state.queue.splice(state.queueIndex + 1, 0, track);
+      state.queue.splice(state.queueIndex + 1, 0, track)
    },
    setProgress(state, value: any) {
-      state.currentTime = value;
+      state.currentTime = value
    },
    setDuration(state, value: any) {
-      state.duration = value;
+      state.duration = value
    },
  },

  actions: {
    async playQueue({ commit }, { queue, index }) {
-      commit("setQueue", [...queue]);
-      commit("setQueueIndex", index);
-      commit("setPlaying");
-      await audio.play();
+      commit('setQueue', [...queue])
+      commit('setQueueIndex', index)
+      commit('setPlaying')
+      await audio.play()
    },
    async play({ commit }) {
-      commit("setPlaying");
-      await audio.play();
+      commit('setPlaying')
+      await audio.play()
    },
    pause({ commit }) {
-      audio.pause();
-      commit("setPaused");
+      audio.pause()
+      commit('setPaused')
    },
    async next({ commit, state }) {
-      commit("setQueueIndex", state.queueIndex + 1);
-      commit("setPlaying");
-      await audio.play();
+      commit('setQueueIndex', state.queueIndex + 1)
+      commit('setPlaying')
+      await audio.play()
    },
    async previous({ commit, state }) {
-      commit("setQueueIndex", state.queueIndex - 1);
-      commit("setPlaying");
-      await audio.play();
+      commit('setQueueIndex', state.queueIndex - 1)
+      commit('setPlaying')
+      await audio.play()
    },
    playPause({ state, dispatch }) {
      if (state.isPlaying) {
-        return dispatch("pause");
+        return dispatch('pause')
      }
-      return dispatch("play");
+      return dispatch('play')
    },
    seek({ commit, state }, value) {
-      commit("setPosition", state.duration * value);
+      commit('setPosition', state.duration * value)
    },
    playNext({ commit }, track) {
-      commit("setNextInQueue", track);
+      commit('setNextInQueue', track)
    },
    addToQueue({ commit }, track) {
-      commit("addToQueue", track);
+      commit('addToQueue', track)
    },
  },
-  
+
  getters: {
    track(state) {
-      if (state.queueIndex != -1) {
-        return state.queue[state.queueIndex];
+      if (state.queueIndex !== -1) {
+        return state.queue[state.queueIndex]
      }
-      return null;
+      return null
    },
    trackId(state, getters): number {
-      return getters.track ? getters.track.id : -1;
+      return getters.track ? getters.track.id : -1
    },
    progress(state) {
      if (state.currentTime > -1 && state.duration > 0) {
-        return (state.currentTime / state.duration) * 100;
+        return (state.currentTime / state.duration) * 100
      }
-      return 0;
+      return 0
    },
    hasNext(state) {
-      return state.queueIndex < state.queue.length - 1;
+      return state.queueIndex < state.queue.length - 1
    },
    hasPrevious(state) {
-      return state.queueIndex > 0;
+      return state.queueIndex > 0
    },
  },
-};
-
+}

 export function setupAudio(store: Store<any>) {
-  audio.ontimeupdate = (event) => {
-    store.commit("player/setProgress", audio.currentTime)
-  };
-  audio.ondurationchange = (event) => {
-    store.commit("player/setDuration", audio.duration);
+  audio.ontimeupdate = () => {
+    store.commit('player/setProgress', audio.currentTime)
  }
-  audio.onended = (event) => {
-    store.dispatch("player/next");
+  audio.ondurationchange = () => {
+    store.commit('player/setDuration', audio.duration)
  }
-  audio.onerror = (event) => {
-    store.commit("player/setPaused");
-    store.commit("setError", audio.error);
+  audio.onended = () => {
+    store.dispatch('player/next')
+  }
+  audio.onerror = () => {
+    store.commit('player/setPaused')
+    store.commit('setError', audio.error)
+  }
+  audio.onwaiting = () => {
+    console.log('audio is waiting for more data.')
  }
-  audio.onwaiting = (event) => {
-    console.log('audio is waiting for more data.');
-  };

  if (mediaSession) {
    mediaSession.setActionHandler('play', () => {
-      store.dispatch("player/play");
-    });
+      store.dispatch('player/play')
+    })
    mediaSession.setActionHandler('pause', () => {
-      store.dispatch("player/pause");
-    });
+      store.dispatch('player/pause')
+    })
    mediaSession.setActionHandler('nexttrack', () => {
-      store.dispatch("player/next");
-    });
+      store.dispatch('player/next')
+    })
    mediaSession.setActionHandler('previoustrack', () => {
-      store.dispatch("player/previous");
-    });
+      store.dispatch('player/previous')
+    })
    mediaSession.setActionHandler('stop', () => {
-      store.dispatch("player/pause");
-    });
-    mediaSession.setActionHandler("seekto", (details) => {
-      store.commit("player/setPosition", details.seekTime);
-    });
-    mediaSession.setActionHandler("seekforward", (details) => {
-      const offset = details.seekOffset || 10;
-      store.commit("player/setPosition", Math.min(audio.currentTime + offset, audio.duration));
-    });
-    mediaSession.setActionHandler("seekbackward", (details) => {
-      const offset = details.seekOffset || 10;
-      store.commit("player/setPosition", Math.max(audio.currentTime - offset, 0));
-    });
+      store.dispatch('player/pause')
+    })
+    mediaSession.setActionHandler('seekto', (details) => {
+      store.commit('player/setPosition', details.seekTime)
+    })
+    mediaSession.setActionHandler('seekforward', (details) => {
+      const offset = details.seekOffset || 10
+      store.commit('player/setPosition', Math.min(audio.currentTime + offset, audio.duration))
+    })
+    mediaSession.setActionHandler('seekbackward', (details) => {
+      const offset = details.seekOffset || 10
+      store.commit('player/setPosition', Math.max(audio.currentTime - offset, 0))
+    })
    // FIXME
    // function updatePositionState() {
    //   if (mediaSession && mediaSession.setPositionState) {