Add chapters & tracks table. Clamp description to 4 lines. Move size to more info modal

assets/app.css

@@ -123,3 +123,10 @@ Bookshelf Label
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
+.line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}

components/modals/ItemDetailsModal.vue

@@ -8,7 +8,10 @@
 
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
       <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20 p-2" style="max-height: 75%" @click.stop>
-        <p class="mb-1">{{ mediaMetadata.title }}</p>
+        <p class="mb-2">{{ mediaMetadata.title }}</p>
+
+        <div v-if="size" class="text-sm mb-2">Size: {{ $bytesPretty(size) }}</div>
+
         <p class="mb-1 text-xs text-gray-200">ID: {{ _libraryItem.id }}</p>
       </div>
     </div>
@@ -44,6 +47,9 @@ export default {
     },
     mediaMetadata() {
       return this.media.metadata || {}
+    },
+    size() {
+      return this.media.size
     }
   },
   methods: {},

components/tables/ChaptersTable.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="w-full my-4">
+    <div class="w-full bg-primary px-4 py-2 flex items-center" :class="expanded ? 'rounded-t-md' : 'rounded-md'" @click.stop="clickBar">
+      <p class="pr-2">Chapters</p>
+      <div class="h-6 w-6 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+        <span class="text-xs font-mono">{{ chapters.length }}</span>
+      </div>
+      <div class="flex-grow" />
+      <div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="expanded ? 'transform rotate-180' : ''">
+        <span class="material-icons text-3xl">expand_more</span>
+      </div>
+    </div>
+    <transition name="slide">
+      <table class="text-xs tracksTable" v-show="expanded">
+        <tr>
+          <th class="text-left">Title</th>
+          <th class="text-center w-16">Start</th>
+        </tr>
+        <tr v-for="chapter in chapters" :key="chapter.id">
+          <td>
+            {{ chapter.title }}
+          </td>
+          <td class="font-mono text-center underline w-16" @click.stop="goToTimestamp(chapter.start)">
+            {{ $secondsToTimestamp(chapter.start) }}
+          </td>
+        </tr>
+      </table>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      expanded: false
+    }
+  },
+  computed: {
+    libraryItemId() {
+      return this.libraryItem.id
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    metadata() {
+      return this.media.metadata || {}
+    },
+    chapters() {
+      return this.media.chapters || []
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    }
+  },
+  methods: {
+    clickBar() {
+      this.expanded = !this.expanded
+    },
+    goToTimestamp(time) {
+      this.$emit('playAtTimestamp', time)
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.tracksTable {
+  border-collapse: collapse;
+  width: 100%;
+  border: 1px solid #474747;
+}
+
+.tracksTable tr:nth-child(even) {
+  background-color: #2e2e2e;
+}
+
+.tracksTable tr {
+  background-color: #373838;
+}
+
+.tracksTable td {
+  padding: 8px 8px;
+}
+
+.tracksTable th {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+</style>

components/tables/TracksTable.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="w-full my-4">
+    <div class="w-full bg-primary px-4 py-2 flex items-center" :class="showTracks ? 'rounded-t-md' : 'rounded-md'" @click.stop="clickBar">
+      <p class="pr-2">{{ title }}</p>
+      <div class="h-6 w-6 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+        <span class="text-xs font-mono">{{ tracks.length }}</span>
+      </div>
+      <div class="flex-grow" />
+      <div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="showTracks ? 'transform rotate-180' : ''">
+        <span class="material-icons text-3xl">expand_more</span>
+      </div>
+    </div>
+    <transition name="slide">
+      <div class="w-full" v-show="showTracks">
+        <table class="text-xs tracksTable">
+          <tr>
+            <th class="text-left">Filename</th>
+            <th class="text-center w-16">Duration</th>
+          </tr>
+          <template v-for="track in tracks">
+            <tr :key="track.index">
+              <td>{{ track.metadata.filename }}</td>
+              <td class="font-mono text-center w-16">
+                {{ $secondsToTimestamp(track.duration) }}
+              </td>
+            </tr>
+          </template>
+        </table>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: 'Audio Tracks'
+    },
+    tracks: {
+      type: Array,
+      default: () => []
+    },
+    libraryItemId: String
+  },
+  data() {
+    return {
+      showTracks: false
+    }
+  },
+  computed: {},
+  methods: {
+    clickBar() {
+      this.showTracks = !this.showTracks
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.tracksTable {
+  border-collapse: collapse;
+  width: 100%;
+  border: 1px solid #474747;
+}
+
+.tracksTable tr:nth-child(even) {
+  background-color: #2e2e2e;
+}
+
+.tracksTable tr {
+  background-color: #373838;
+}
+
+.tracksTable td {
+  padding: 8px 8px;
+}
+
+.tracksTable th {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+</style>

pages/item/_id/index.vue

@@ -6,7 +6,6 @@
     </div>
 
     <div class="z-10 relative">
-
       <!-- cover -->
       <div class="w-full flex justify-center relative mb-4">
         <div style="width: 0; transform: translateX(-50vw); overflow: visible">
@@ -78,8 +77,7 @@
 
       <!-- metadata -->
       <div id="metadata" class="grid gap-2 my-2" style="">
-
-        <div v-if="podcastAuthor || (bookAuthors && bookAuthors.length)" class="text-white text-opacity-60 uppercase text-sm">{{ bookAuthors.length === 1 ? 'Author' : 'Authors' }}</div>
+        <div v-if="podcastAuthor || (bookAuthors && bookAuthors.length)" class="text-white text-opacity-60 uppercase text-sm">Author</div>
         <div v-if="podcastAuthor" class="text-sm">{{ podcastAuthor }}</div>
         <div v-else-if="bookAuthors && bookAuthors.length" class="text-sm">
           <template v-for="(author, index) in bookAuthors">
@@ -99,48 +97,43 @@
         <div v-if="numTracks" class="text-white text-opacity-60 uppercase text-sm">Duration</div>
         <div v-if="numTracks" class="text-sm">{{ $elapsedPretty(duration) }}</div>
 
-        <!-- hidden by default -->
-
-        <div v-if="allMetadata && narrators && narrators.length" class="text-white text-opacity-60 uppercase text-sm">{{ narrators.length === 1 ? 'Narrator' : 'Narrators' }}</div>
-        <div v-if="allMetadata && narrators && narrators.length" class="truncate text-sm">
+        <div v-if="narrators && narrators.length" class="text-white text-opacity-60 uppercase text-sm">{{ narrators.length === 1 ? 'Narrator' : 'Narrators' }}</div>
+        <div v-if="narrators && narrators.length" class="truncate text-sm">
           <template v-for="(narrator, index) in narrators">
             <nuxt-link :key="narrator" :to="`/bookshelf/library?filter=narrators.${$encode(narrator)}`" class="underline">{{ narrator }}</nuxt-link
             ><span :key="index" v-if="index < narrators.length - 1">, </span>
           </template>
         </div>
 
-        <div v-if="allMetadata && genres.length" class="text-white text-opacity-60 uppercase text-sm">{{ genres.length === 1 ? 'Genre' : 'Genres' }}</div>
-        <div v-if="allMetadata && genres.length" class="truncate text-sm">
+        <div v-if="genres.length" class="text-white text-opacity-60 uppercase text-sm">{{ genres.length === 1 ? 'Genre' : 'Genres' }}</div>
+        <div v-if="genres.length" class="truncate text-sm">
           <template v-for="(genre, index) in genres">
             <nuxt-link :key="genre" :to="`/bookshelf/library?filter=genres.${$encode(genre)}`" class="underline">{{ genre }}</nuxt-link
             ><span :key="index" v-if="index < genres.length - 1">, </span>
           </template>
         </div>
 
-        <div v-if="allMetadata && publishedYear" class="text-white text-opacity-60 uppercase text-sm">Published</div>
-        <div v-if="allMetadata && publishedYear" class="text-sm">{{ publishedYear }}</div>
-
-        <div v-if="allMetadata && numTracks && size" class="text-white text-opacity-60 uppercase text-sm">Size</div>
-        <div v-if="allMetadata && numTracks && size" class="text-sm">{{ $bytesPretty(size) }}</div>
-
-        <div v-if="allMetadata && numTracks" class="text-white text-opacity-60 uppercase text-sm">Tracks</div>
-        <div v-if="allMetadata && numTracks" class="text-sm">{{ numTracks }} {{ numTracks == 1 ? 'track' : 'tracks' }}</div>
-
-        <div v-if="allMetadata && numTracks && numChapters" class="text-white text-opacity-60 uppercase text-sm">Chapters</div>
-        <div v-if="allMetadata && numTracks && numChapters" class="text-sm">{{ numChapters }} {{ numChapters == 1 ? 'chapter' : 'chapters' }}</div>
-
-        <div v-if="!isPodcast && windowWidth < 500" class="col-span-full text-center text-white text-opacity-60 text-sm" @click="toggleMetadata()">
-          {{ allMetadata ? 'less' : 'more' }}
-          <span class="material-icons align-middle">{{ allMetadata ? 'expand_less' : 'expand_more' }}</span>
-        </div>
+        <div v-if="publishedYear" class="text-white text-opacity-60 uppercase text-sm">Published</div>
+        <div v-if="publishedYear" class="text-sm">{{ publishedYear }}</div>
       </div>
 
       <div class="w-full py-2">
-        <p class="text-sm text-justify whitespace-pre-line" style="hyphens: auto;">{{ description }}</p>
+        <p ref="description" class="text-sm text-justify whitespace-pre-line font-light" :class="{ 'line-clamp-4': !showFullDescription }" style="hyphens: auto">{{ description }}</p>
+
+        <div class="text-white text-sm py-2" @click="showFullDescription = !showFullDescription">
+          {{ showFullDescription ? 'Read less' : 'Read more' }}
+          <span class="material-icons align-middle text-base -mt-px">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
+        </div>
       </div>
 
+      <!-- tables -->
       <tables-podcast-episodes-table v-if="isPodcast" :library-item="libraryItem" :local-library-item-id="localLibraryItemId" :episodes="episodes" :local-episodes="localLibraryItemEpisodes" :is-local="isLocal" />
 
+      <tables-chapters-table v-if="numChapters" :library-item="libraryItem" @playAtTimestamp="playAtTimestamp" />
+
+      <tables-tracks-table v-if="numTracks" :tracks="tracks" :library-item-id="libraryItemId" />
+
+      <!-- modals -->
       <modals-select-local-folder-modal v-model="showSelectLocalFolder" :media-type="mediaType" @select="selectedLocalFolder" />
 
       <modals-dialog v-model="showMoreMenu" :items="moreMenuItems" @action="moreMenuAction" />
@@ -198,13 +191,11 @@ export default {
       coverRgb: 'rgb(55, 56, 56)',
       coverBgIsLight: false,
       windowWidth: 0,
-      hideMetadata: true
+      descriptionClamped: false,
+      showFullDescription: false
     }
   },
   computed: {
-    allMetadata() {
-      return this.isPodcast || this.windowWidth >= 500 || !this.hideMetadata
-    },
     isIos() {
       return this.$platform === 'ios'
     },
@@ -301,9 +292,6 @@ export default {
     duration() {
       return this.media.duration
     },
-    size() {
-      return this.media.size
-    },
     user() {
       return this.$store.state.user.user
     },
@@ -336,9 +324,11 @@ export default {
       if (this.localLibraryItemId && this.$store.getters['getIsItemStreaming'](this.localLibraryItemId)) return true
       return this.$store.getters['getIsItemStreaming'](this.libraryItemId)
     },
+    tracks() {
+      return this.media.tracks || []
+    },
     numTracks() {
-      if (!this.media.tracks) return 0
-      return this.media.tracks.length || 0
+      return this.tracks.length || 0
     },
     numChapters() {
       if (!this.media.chapters) return 0
@@ -484,8 +474,10 @@ export default {
     readBook() {
       this.$store.commit('openReader', this.libraryItem)
     },
-    async playClick() {
-      let episodeId = null
+    playAtTimestamp(seconds) {
+      this.playClick(seconds)
+    },
+    async playClick(startTime = null) {
       await this.$hapticsImpact()
 
       if (this.isPodcast) {
@@ -505,7 +497,7 @@ export default {
 
         if (!episode) episode = this.episodes[0]
 
-        episodeId = episode.id
+        const episodeId = episode.id
 
         let localEpisode = null
         if (this.hasLocal && !this.isLocal) {
@@ -518,26 +510,33 @@ export default {
         if (serverEpisodeId && this.serverLibraryItemId && this.isCasting) {
           // If casting and connected to server for local library item then send server library item id
           this.$eventBus.$emit('play-item', { libraryItemId: this.serverLibraryItemId, episodeId: serverEpisodeId })
-          return
-        }
-        if (localEpisode) {
+        } else if (localEpisode) {
           this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItem.id, episodeId: localEpisode.id, serverLibraryItemId: this.serverLibraryItemId, serverEpisodeId })
-          return
+        } else {
+          this.$eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId })
         }
       } else {
         // Audiobook
+        let libraryItemId = this.libraryItemId
+
+        // When casting use server library item
         if (this.hasLocal && this.serverLibraryItemId && this.isCasting) {
-          // If casting and connected to server for local library item then send server library item id
-          this.$eventBus.$emit('play-item', { libraryItemId: this.serverLibraryItemId })
-          return
-        }
-        if (this.hasLocal) {
-          this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItem.id, serverLibraryItemId: this.serverLibraryItemId })
-          return
-        }
+          libraryItemId = this.serverLibraryItemId
+        } else if (this.hasLocal) {
+          libraryItemId = this.localLibraryItem.id
         }
 
-      this.$eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId })
+        // If start time and is not already streaming then ask for confirmation
+        if (startTime !== null && startTime !== undefined && !this.$store.getters['getIsMediaStreaming'](libraryItemId, null)) {
+          const { value } = await Dialog.confirm({
+            title: 'Confirm',
+            message: `Start playback for "${this.title}" at ${this.$secondsToTimestamp(startTime)}?`
+          })
+          if (!value) return
+        }
+
+        this.$eventBus.$emit('play-item', { libraryItemId, serverLibraryItemId: this.serverLibraryItemId, startTime })
+      }
     },
     async clearProgressClick() {
       await this.$hapticsImpact()
@@ -573,6 +572,7 @@ export default {
       if (libraryItem.id === this.libraryItemId) {
         console.log('Item Updated')
         this.libraryItem = libraryItem
+        this.checkDescriptionClamped()
       }
     },
     async selectFolder() {
@@ -721,11 +721,13 @@ export default {
         this.$router.replace('/bookshelf')
       }
     },
+    checkDescriptionClamped() {
+      if (!this.$refs.description || this.showFullDescription) return
+      this.descriptionClamped = this.$refs.description.scrollHeight > this.$refs.description.clientHeight
+    },
     windowResized() {
       this.windowWidth = window.innerWidth
-    },
-    toggleMetadata() {
-      this.hideMetadata = !this.hideMetadata
+      this.checkDescriptionClamped()
     }
   },
   mounted() {
@@ -734,6 +736,7 @@ export default {
     this.$eventBus.$on('library-changed', this.libraryChanged)
     this.$eventBus.$on('new-local-library-item', this.newLocalLibraryItem)
     this.$socket.$on('item_updated', this.itemUpdated)
+    this.checkDescriptionClamped()
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.windowResized)