Merge pull request #101 from jellyfin/refactor/seasonTabsCard

refactor(season tabs): Use Card component in seasonTabs

components/Card.vue

@@ -73,6 +73,13 @@ export default Vue.extend({
       default: () => {
         return false;
       }
+    },
+    episode: {
+      type: Boolean,
+      required: false,
+      default: () => {
+        return false;
+      }
     }
   },
   computed: {
@@ -96,6 +103,8 @@ export default Vue.extend({
           case 'Playlist':
           case 'Video':
             return 'square-card';
+          case 'Episode':
+            return 'thumb-card';
           case 'Book':
           case 'BoxSet':
           case 'Movie':
@@ -137,10 +146,16 @@ export default Vue.extend({
       }
     },
     /**
-     * @returns {string} Either an empty string, or a string representing the production year(s) for the current item.
+     * @returns {string} Either an empty string, or a string representing the production year(s) for the current item or the relevant episode number of the item.
      */
     cardSubtitle(): string {
-      if (this.item.Type !== 'Series' && this.item.ProductionYear) {
+      if (this.episode) {
+        if (this.item.IndexNumber) {
+          return this.$t('episodeNumber', {
+            episodeNumber: this.item.IndexNumber
+          }).toString();
+        }
+      } else if (this.item.Type !== 'Series' && this.item.ProductionYear) {
         return this.item.ProductionYear;
       } else if (
         this.item.Status === 'Continuing' &&
@@ -155,9 +170,8 @@ export default Vue.extend({
           return this.item.ProductionYear;
         }
         return `${this.item.ProductionYear} - ${endYear}`;
-      } else {
-        return '';
       }
+      return '';
     }
   },
   mounted(): void {

components/SeasonTabs.vue

@@ -15,19 +15,12 @@
           :infinite="false"
           :disable-arrows-on-edges="true"
           :bullets="false"
+          :breakpoints="breakpoints"
           :dragging-distance="200"
         >
           <vueper-slide v-for="episode in season.Episodes" :key="episode.Id">
             <template v-slot:content>
-              <v-card>
-                <v-img :src="getImageUrl(episode.Id, 'primary')"></v-img>
-                <v-card-subtitle>
-                  {{
-                    $t('episodeNumber', { episodeNumber: episode.IndexNumber })
-                  }}
-                </v-card-subtitle>
-                <v-card-title>{{ episode.Name }}</v-card-title>
-              </v-card>
+              <card :item="episode" episode />
             </template>
           </vueper-slide>
         </vueper-slides>
@@ -39,14 +32,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import { BaseItemDto } from '~/api';
-import imageHelper from '~/mixins/imageHelper';
 
 interface Season extends BaseItemDto {
   Episodes?: Array<BaseItemDto>;
 }
 
 export default Vue.extend({
-  mixins: [imageHelper],
   props: {
     item: {
       type: Object,
@@ -56,7 +47,21 @@ export default Vue.extend({
   data() {
     return {
       seasons: [] as Season[],
-      seasonTabs: 1
+      seasonTabs: 1,
+      breakpoints: {
+        600: {
+          visibleSlides: 2
+        },
+        960: {
+          visibleSlides: 3
+        },
+        1264: {
+          visibleSlides: 4
+        },
+        1904: {
+          visibleSlides: 5
+        }
+      }
     };
   },
   async beforeMount() {