From 6551ae0a69c5324a861c722e8377496d683c7189 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga.fer@gmail.com>
Date: Fri, 8 Jan 2021 15:33:15 +0100
Subject: [PATCH] refactor: address review comments

---
 components/Item/Metadata/ImageEditor.vue | 10 +++--
 components/Item/TimeSlider.vue           | 23 ++--------
 components/Layout/AudioControls.vue      | 57 +++++++++---------------
 pages/playback/index.vue                 | 47 +++++++++++--------
 store/playbackManager.ts                 | 12 +++++
 5 files changed, 72 insertions(+), 77 deletions(-)

diff --git a/components/Item/Metadata/ImageEditor.vue b/components/Item/Metadata/ImageEditor.vue
index cf225e6e..11fb0bca 100644
--- a/components/Item/Metadata/ImageEditor.vue
+++ b/components/Item/Metadata/ImageEditor.vue
@@ -128,10 +128,12 @@ export default Vue.extend({
       ).data;
     },
     imageFormat(imageInfo: ImageInfo): string | undefined {
-      return this.getImageUrlForElement(imageInfo.ImageType as ImageType, {
-        itemId: this.metadata.Id,
-        tag: imageInfo.ImageTag as string
-      });
+      if (imageInfo.ImageType) {
+        return this.getImageUrlForElement(imageInfo.ImageType, {
+          itemId: this.metadata.Id,
+          tag: imageInfo.ImageTag as string
+        });
+      }
     },
     handleSearch(): void {
       this.dialog = true;
diff --git a/components/Item/TimeSlider.vue b/components/Item/TimeSlider.vue
index abd8a4d4..86873784 100644
--- a/components/Item/TimeSlider.vue
+++ b/components/Item/TimeSlider.vue
@@ -14,15 +14,15 @@
   >
     <template #prepend>
       <span class="mt-1">
-        {{ getRuntime(realPosition) }}
+        {{ formatTime(realPosition) }}
       </span>
     </template>
     <template #thumb-label>
-      {{ getRuntime(sliderValue) }}
+      {{ formatTime(sliderValue) }}
     </template>
     <template #append>
       <span class="mt-1">
-        {{ getRuntime(runtime) }}
+        {{ formatTime(runtime) }}
       </span>
     </template>
   </v-slider>
@@ -62,23 +62,6 @@ export default Vue.extend({
   },
   methods: {
     ...mapActions('playbackManager', ['changeCurrentTime']),
-    getRuntime(seconds: number): string {
-      const minutes = Math.floor(seconds / 60);
-      seconds = Math.floor(seconds - minutes * 60);
-
-      /**
-       * Formats the second number
-       * E.g. 7 -> 07
-       *
-       * @param {string} seconds - Number to format
-       * @returns {string} Formatted seconds number
-       */
-      function formatSeconds(seconds: string): string {
-        return ('0' + seconds).slice(-2);
-      }
-
-      return `${minutes}:${formatSeconds(seconds.toString())}`;
-    },
     onPositionChange(value: number): void {
       if (!this.clicked) {
         this.changeCurrentTime({ time: value });
diff --git a/components/Layout/AudioControls.vue b/components/Layout/AudioControls.vue
index e97a71d2..08c4cf74 100644
--- a/components/Layout/AudioControls.vue
+++ b/components/Layout/AudioControls.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="fade" mode="in-out">
     <v-footer
-      v-if="isPlaying && getCurrentlyPlayingMediaType() === 'Audio'"
+      v-if="isPlaying && getCurrentlyPlayingMediaType === 'Audio'"
       key="audioControls-footer"
       app
       :color="footerColor"
@@ -19,7 +19,7 @@
               size="72"
               color="primary"
             >
-              <v-img :src="getImageUrl(getCurrentItem())">
+              <v-img :src="getImageUrl(getCurrentItem)">
                 <template #placeholder>
                   <v-icon dark>mdi-album</v-icon>
                 </template>
@@ -30,13 +30,13 @@
                 <nuxt-link
                   tag="span"
                   class="text-truncate link"
-                  :to="`/item/${getCurrentItem()}`"
+                  :to="`/item/${getCurrentItem.Id}`"
                 >
-                  {{ getCurrentItem().Name }}
+                  {{ getCurrentItem.Name }}
                 </nuxt-link>
                 <v-btn class="d-none d-md-inline-flex" icon disabled>
                   <v-icon size="18">{{
-                    getCurrentItem().UserData.IsFavorite
+                    getCurrentItem.UserData.IsFavorite
                       ? 'mdi-heart'
                       : 'mdi-heart-outline'
                   }}</v-icon>
@@ -45,9 +45,9 @@
               <nuxt-link
                 tag="span"
                 class="text--secondary text-caption text-truncate mt-md-n2 link"
-                :to="`/artist/${getCurrentItem().AlbumArtists[0].Id}`"
+                :to="`/artist/${getCurrentItem.AlbumArtists[0].Id}`"
               >
-                {{ getCurrentItem().AlbumArtist }}
+                {{ getCurrentItem.AlbumArtist }}
               </nuxt-link>
             </div>
           </v-col>
@@ -60,9 +60,9 @@
                   class="mx-1"
                   @click="toggleShuffle"
                 >
-                  <v-icon>{{
-                    isShuffling ? 'mdi-shuffle' : 'mdi-shuffle-disabled'
-                  }}</v-icon>
+                  <v-icon>
+                    {{ isShuffling ? 'mdi-shuffle' : 'mdi-shuffle-disabled' }}
+                  </v-icon>
                 </v-btn>
                 <v-btn icon class="mx-1" @click="setPreviousTrack">
                   <v-icon>mdi-skip-previous</v-icon>
@@ -112,7 +112,7 @@
             cols="3"
             class="d-flex d-md-none px-0 align-center justify-end"
           >
-            <v-btn icon>
+            <v-btn icon disabled>
               <v-icon>mdi-heart</v-icon>
             </v-btn>
             <v-btn icon @click="togglePause">
@@ -132,12 +132,14 @@
           </v-col>
         </v-row>
         <div
-          v-if="isFullScreenPlayer && nextTrackName"
+          v-if="isFullScreenPlayer && getNextItem"
           class="d-flex justify-center align-center"
         >
-          <h4 class="text-h6 font-weight-thin font-italic">
-            {{ $t('upNext') }}: {{ nextTrackName }}
-          </h4>
+          <div>
+            <h4 class="text-overline font-italic">
+              {{ $t('upNext') }}: {{ getNextItem.Name }}
+            </h4>
+          </div>
         </div>
       </v-container>
     </v-footer>
@@ -155,6 +157,11 @@ import { PlaybackStatus } from '~/store/playbackManager';
 export default Vue.extend({
   mixins: [timeUtils, imageHelper],
   computed: {
+    ...mapGetters('playbackManager', [
+      'getCurrentItem',
+      'getCurrentlyPlayingMediaType',
+      'getNextItem'
+    ]),
     footerColor(): string | undefined {
       if (this.isFullScreenPlayer) {
         return 'rgba(0,0,0,0.15)';
@@ -188,22 +195,6 @@ export default Vue.extend({
     },
     isFullScreenPlayer(): boolean {
       return this.$route.name === 'playback';
-    },
-    nextTrackName(): string | undefined {
-      const state = this.$store.state.playbackManager;
-      const queue = this.$store.state.playbackManager.queue;
-      if (
-        state.currentItemIndex !== null &&
-        state.currentItemIndex + 1 < state.queue.length
-      ) {
-        return queue[state.currentItemIndex + 1].Name;
-      } else if (
-        this.$store.state.playbackManager.repeatMode === RepeatMode.RepeatAll
-      ) {
-        return queue[0].Name;
-      } else {
-        return undefined;
-      }
     }
   },
   methods: {
@@ -217,10 +208,6 @@ export default Vue.extend({
       'toggleShuffle',
       'toggleRepeatMode'
     ]),
-    ...mapGetters('playbackManager', [
-      'getCurrentItem',
-      'getCurrentlyPlayingMediaType'
-    ]),
     getImageUrl(item: BaseItemDto): string | undefined {
       const imageUrl = this.getImageUrlForElement(ImageType.Primary, { item });
       if (imageUrl) {
diff --git a/pages/playback/index.vue b/pages/playback/index.vue
index b7e9ba41..e29e02cf 100644
--- a/pages/playback/index.vue
+++ b/pages/playback/index.vue
@@ -1,22 +1,25 @@
 <template>
-  <v-container v-if="currentQueue && currentQueue.length" fluid>
-    <swiper
-      ref="playbackSwiper"
-      class="swiper"
-      :options="swiperOptions"
-      @slideChange="onSlideChange"
+  <swiper
+    v-if="currentQueue"
+    ref="playbackSwiper"
+    class="swiper"
+    :options="swiperOptions"
+    @slideChange="onSlideChange"
+  >
+    <swiper-slide
+      v-for="item in currentQueue"
+      :key="item.Id"
+      class="albumSlide"
     >
-      <swiper-slide v-for="item in currentQueue" :key="item.Id">
-        <v-avatar ref="albumCover" tile size="65vh" color="primary">
-          <v-img :src="getImageUrl(item)">
-            <template #placeholder>
-              <v-icon dark large>mdi-album</v-icon>
-            </template>
-          </v-img>
-        </v-avatar>
-      </swiper-slide>
-    </swiper>
-  </v-container>
+      <v-avatar ref="albumCover" tile size="65vh" color="primary">
+        <v-img :src="getImageUrl(item)">
+          <template #placeholder>
+            <v-icon dark large>mdi-album</v-icon>
+          </template>
+        </v-img>
+      </v-avatar>
+    </swiper-slide>
+  </swiper>
 </template>
 
 <script lang="ts">
@@ -35,7 +38,6 @@ export default Vue.extend({
         slidesPerView: 4,
         centeredSlides: true,
         initialSlide: 0,
-        parallax: true,
         autoplay: false,
         effect: 'coverflow',
         coverflowEffect: {
@@ -91,6 +93,9 @@ export default Vue.extend({
       this.swiper?.update();
       this.setBackdrop({ hash: this.backdropHash });
     },
+    currentQueue(): void {
+      this.swiper?.update();
+    },
     isPlaying(newValue: boolean): void {
       if (!newValue) {
         this.$router.back();
@@ -150,3 +155,9 @@ export default Vue.extend({
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.albumSlide {
+  margin: 0 auto !important;
+}
+</style>
diff --git a/store/playbackManager.ts b/store/playbackManager.ts
index bce61df8..f2f3948c 100644
--- a/store/playbackManager.ts
+++ b/store/playbackManager.ts
@@ -84,6 +84,18 @@ export const getters: GetterTree<PlaybackManagerState, PlaybackManagerState> = {
       return null;
     }
   },
+  getNextItem: (state) => {
+    if (
+      state.currentItemIndex !== null &&
+      state.currentItemIndex + 1 < state.queue.length
+    ) {
+      return state.queue[state.currentItemIndex + 1];
+    } else if (state.repeatMode === RepeatMode.RepeatAll) {
+      return state.queue[0];
+    } else {
+      return null;
+    }
+  },
   getCurrentlyPlayingType: (state) => {
     if (state.currentItemIndex !== null) {
       return state.queue?.[state.currentItemIndex].Type;