refactor: rework details page and make responsive

jellyfin · Feb 9, 2021 · 1f7eac6 · 1f7eac6
1 parent cd668fe
commit 1f7eac6
Show file tree

Hide file tree

Showing 12 changed files with 975 additions and 389 deletions.
diff --git a/components/Item/Card/Card.vue b/components/Item/Card/Card.vue
@@ -1,7 +1,7 @@
 <template>
   <nuxt-link
     :event="link ? 'click' : null"
-    :to="itemLink"
+    :to="getItemDetailsLink(item)"
     :class="link ? null : 'link-disabled'"
     class="nuxt-link"
   >
@@ -70,7 +70,7 @@
           />
         </div>
         <div
-          v-if="overlay"
+          v-if="overlay && !$browser.isMobile()"
           class="card-overlay d-flex justify-center align-center"
         >
           <play-button fab :item="item" />
@@ -99,7 +99,7 @@ import { mapActions } from 'vuex';
 import { BaseItemDto, ImageType } from '@jellyfin/client-axios';
 import imageHelper from '~/mixins/imageHelper';
 import itemHelper from '~/mixins/itemHelper';
-import { getShapeFromItemType, validLibraryTypes } from '~/utils/items';
+import { getShapeFromItemType } from '~/utils/items';
 
 export default Vue.extend({
   mixins: [imageHelper, itemHelper],
@@ -152,21 +152,6 @@ export default Vue.extend({
     };
   },
   computed: {
-    itemLink: {
-      get(): string {
-        if (this.item.Type && validLibraryTypes.includes(this.item.Type)) {
-          return `/library/${this.item.Id}`;
-        } else if (this.item.Type === 'Person') {
-          return `/person/${this.item.Id}`;
-        } else if (this.item.Type === 'MusicArtist') {
-          return `/artist/${this.item.Id}`;
-        } else if (this.item.Type === 'Genre') {
-          return `/genre/${this.item.Id}`;
-        } else {
-          return `/item/${this.item.Id}`;
-        }
-      }
-    },
     cardType: {
       get(): string {
         // Otherwise, figure out the shape based on the type of the item

diff --git a/components/Item/RelatedItems.vue b/components/Item/RelatedItems.vue
@@ -10,7 +10,7 @@
       </client-only>
     </div>
     <div v-else-if="vertical">
-      <h2 v-if="!loading && relatedItems.length > 0">
+      <h2 v-if="!loading && relatedItems.length > 0" class="text-h6 text-sm-h5">
         <slot>
           {{ $t('youMayAlsoLike') }}
         </slot>

diff --git a/components/Layout/ItemCols.vue b/components/Layout/ItemCols.vue
@@ -0,0 +1,12 @@
+<template>
+  <v-container class="px-6">
+    <v-row>
+      <v-col cols="12" sm="8" md="9">
+        <slot name="left" />
+      </v-col>
+      <v-col cols="12" sm="4" md="3">
+        <slot name="right" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/components/Layout/SwiperSection.vue b/components/Layout/SwiperSection.vue
@@ -1,10 +1,10 @@
 <template>
   <div :class="`swiper-section-${uuid}`" style="width: 100%">
     <skeleton-home-section v-if="loading" :card-shape="shape" />
-    <v-col v-show="items && items.length > 0" class="swiper-section">
+    <v-col v-show="items && items.length > 0" class="swiper-section pa-0">
       <div class="d-flex">
         <h1
-          class="text-h5 font-weight-light header mt-1 pl-3 pb-2"
+          class="text-h6 text-sm-h5 font-weight-light header mt-1 pl-3 pb-2"
           :class="{ 'header-white-mode': !$vuetify.theme.dark }"
         >
           <span class="pl-3">{{ title }}</span>

diff --git a/components/Players/TrackList.vue b/components/Players/TrackList.vue
@@ -2,7 +2,7 @@
   <v-simple-table dense class="track-table no-select">
     <thead>
       <tr>
-        <th style="width: 6em" class="pr-0 text-center" scope="col">#</th>
+        <th style="width: 4em" class="pr-0 text-center" scope="col">#</th>
         <th style="width: 3em" class="pr-0 pl-0" scope="col" />
         <th scope="col">{{ $t('item.tracklist.title') }}</th>
         <th style="width: 6.5em" class="text-center" scope="col">
@@ -31,9 +31,9 @@
             :class="{ 'primary--text': isPlaying(track) }"
             @dblclick="playTracks(track)"
           >
-            <td style="width: 6em" class="pr-0 text-center">
+            <td style="width: 4em" class="pr-0 text-center">
               <span v-if="hover">
-                <v-btn icon @click="playTracks(track)">
+                <v-btn small icon @click="playTracks(track)">
                   <v-icon>mdi-play-circle-outline</v-icon>
                 </v-btn>
               </span>
@@ -59,6 +59,7 @@
                     {{ artist.Name }}
                   </nuxt-link>
                 </div>
+                <v-spacer />
                 <item-menu v-show="hover" :item="item" />
               </div>
             </td>

diff --git a/locales/en-US.json b/locales/en-US.json
@@ -1,5 +1,6 @@
 {
   "3DFormat": "3D format",
+  "about": "About",
   "actor": "Actor",
   "actors": "Actors",
   "addNewPerson": "Add a new person",

diff --git a/mixins/itemHelper.ts b/mixins/itemHelper.ts
@@ -1,27 +1,31 @@
-import { BaseItemDto } from '@jellyfin/client-axios';
 /**
  * Item and playback helpers
  *
  * @mixin
  */
+import { BaseItemDto } from '@jellyfin/client-axios';
 import Vue from 'vue';
+import { validLibraryTypes } from '~/utils/items';
 
 declare module '@nuxt/types' {
   interface Context {
     canPlay: (item: BaseItemDto) => boolean;
     canResume: (item: BaseItemDto) => boolean;
+    getItemDetailsLink: (item: BaseItemDto) => string;
   }
 
   interface NuxtAppOptions {
     canPlay: (item: BaseItemDto) => boolean;
     canResume: (item: BaseItemDto) => boolean;
+    getItemDetailsLink: (item: BaseItemDto) => string;
   }
 }
 
 declare module 'vue/types/vue' {
   interface Vue {
     canPlay: (item: BaseItemDto) => boolean;
     canResume: (item: BaseItemDto) => boolean;
+    getItemDetailsLink: (item: BaseItemDto) => string;
   }
 }
 
@@ -63,6 +67,53 @@ const itemHelper = Vue.extend({
       } else {
         return false;
       }
+    },
+    /**
+     * Generate a link to the item's details page route
+     *
+     * @param {BaseItemDto} item - The item used to generate the route
+     * @returns {string} A valid route to the item's details page
+     */
+    getItemDetailsLink(item: BaseItemDto): string {
+      let routeName: string;
+      let routeParams: Record<never, never>;
+
+      if (item.Type && validLibraryTypes.includes(item.Type)) {
+        routeName = 'library-viewId';
+        routeParams = { viewId: item.Id };
+      } else {
+        switch (item.Type) {
+          case 'Series':
+            routeName = 'series-itemId';
+            routeParams = { itemId: item.Id };
+            break;
+          case 'Person':
+            routeName = 'person-itemId';
+            routeParams = { itemId: item.Id };
+            break;
+          case 'MusicArtist':
+            routeName = 'artist-itemId';
+            routeParams = { itemId: item.Id };
+            break;
+          case 'MusicAlbum':
+            routeName = 'musicalbum-itemId';
+            routeParams = { itemId: item.Id };
+            break;
+          case 'Genre':
+            routeName = 'genre-itemId';
+            routeParams = { itemId: item.Id };
+            break;
+          default:
+            routeName = 'item-itemId';
+            routeParams = { itemId: item.Id };
+            break;
+        }
+      }
+
+      return this.$router.resolve({
+        name: routeName,
+        params: routeParams
+      }).href;
     }
   }
 });