Update:Click chapter times in chapters table to jump to timestamp

client/components/app/StreamContainer.vue

@@ -364,7 +364,11 @@ export default {
       var episodeId = payload.episodeId || null
 
       if (this.playerHandler.libraryItemId == libraryItemId && this.playerHandler.episodeId == episodeId) {
-        this.playerHandler.play()
+        if (payload.startTime !== null && !isNaN(payload.startTime)) {
+          this.seek(payload.startTime)
+        } else {
+           this.playerHandler.play()
+        }
         return
       }
 

client/components/modals/EditSeriesInputInnerModal.vue

@@ -89,7 +89,6 @@ export default {
       setTimeout(() => {
         this.content.style.transform = 'scale(1)'
       }, 10)
-      document.documentElement.classList.add('modal-open')
 
       this.$store.commit('setInnerModalOpen', true)
       this.$eventBus.$on('modal-hotkey', this.hotkey)
@@ -97,7 +96,6 @@ export default {
     setHide() {
       if (this.content) this.content.style.transform = 'scale(0)'
       if (this.el) this.el.remove()
-      document.documentElement.classList.remove('modal-open')
 
       this.$store.commit('setInnerModalOpen', false)
       this.$eventBus.$off('modal-hotkey', this.hotkey)

client/components/modals/Modal.vue

@@ -50,7 +50,8 @@ export default {
     return {
       el: null,
       content: null,
-      preventClickoutside: false
+      preventClickoutside: false,
+      isShowingPrompt: false
     }
   },
   watch: {
@@ -93,7 +94,7 @@ export default {
       this.show = false
     },
     clickBg(ev) {
-      if (!this.show) return
+      if (!this.show || this.isShowingPrompt) return
       if (this.preventClickoutside) {
         this.preventClickoutside = false
         return
@@ -147,8 +148,16 @@ export default {
       } else {
         console.warn('Invalid modal init', this.name)
       }
+    },
+    showingPrompt(isShowing) {
+      this.isShowingPrompt = isShowing
     }
   },
-  mounted() {}
+  mounted() {
+    this.$eventBus.$on('showing-prompt', this.showingPrompt)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('showing-prompt', this.showingPrompt)
+  }
 }
 </script>

client/components/prompt/Confirm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-50 opacity-0">
+  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-60 opacity-0">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
     <div ref="content" style="min-width: 400px; min-height: 200px" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickedOutside">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
@@ -68,7 +68,12 @@ export default {
     }
   },
   methods: {
-    clickedOutside() {
+    clickedOutside(evt) {
+      if (evt) {
+        evt.stopPropagation()
+        evt.preventDefault()
+      }
+
       if (this.persistent) return
       if (this.callback) this.callback(false)
       this.show = false
@@ -82,16 +87,16 @@ export default {
       this.show = false
     },
     setShow() {
+      this.$eventBus.$emit('showing-prompt', true)
       document.body.appendChild(this.el)
       setTimeout(() => {
         this.content.style.transform = 'scale(1)'
       }, 10)
-      document.documentElement.classList.add('modal-open')
     },
     setHide() {
+      this.$eventBus.$emit('showing-prompt', false)
       this.content.style.transform = 'scale(0)'
       this.el.remove()
-      document.documentElement.classList.remove('modal-open')
     }
   },
   mounted() {
@@ -101,6 +106,11 @@ export default {
     this.content.style.transition = 'transform 0.25s cubic-bezier(0.16, 1, 0.3, 1)'
     this.el.style.opacity = 1
     this.el.remove()
+  },
+  beforeDestroy() {
+    if (this.show) {
+      this.$eventBus.$emit('showing-prompt', false)
+    }
   }
 }
 </script>

client/components/prompt/Dialog.vue

@@ -65,12 +65,10 @@ export default {
       setTimeout(() => {
         this.content.style.transform = 'scale(1)'
       }, 10)
-      document.documentElement.classList.add('modal-open')
     },
     setHide() {
       this.content.style.transform = 'scale(0)'
       this.el.remove()
-      document.documentElement.classList.remove('modal-open')
     }
   },
   mounted() {

client/components/tables/ChaptersTable.vue

@@ -24,10 +24,10 @@
           <td class="font-book">
             {{ chapter.title }}
           </td>
-          <td class="font-mono text-center">
+          <td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
             {{ $secondsToTimestamp(chapter.start) }}
           </td>
-          <td class="font-mono text-center">
+          <td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
             {{ $secondsToTimestamp(chapter.end) }}
           </td>
         </tr>
@@ -57,6 +57,9 @@ export default {
     media() {
       return this.libraryItem ? this.libraryItem.media || {} : {}
     },
+    metadata() {
+      return this.media.metadata || {}
+    },
     chapters() {
       return this.media.chapters || []
     },
@@ -67,6 +70,30 @@ export default {
   methods: {
     clickBar() {
       this.expanded = !this.expanded
+    },
+    goToTimestamp(time) {
+      if (this.$store.getters['getIsMediaStreaming'](this.libraryItemId)) {
+        this.$eventBus.$emit('play-item', {
+          libraryItemId: this.libraryItemId,
+          episodeId: null,
+          startTime: time
+        })
+      } else {
+        const payload = {
+          message: `Start playback for "${this.metadata.title}" at ${this.$secondsToTimestamp(time)}?`,
+          callback: (confirmed) => {
+            if (confirmed) {
+              this.$eventBus.$emit('play-item', {
+                libraryItemId: this.libraryItemId,
+                episodeId: null,
+                startTime: time
+              })
+            }
+          },
+          type: 'yesNo'
+        }
+        this.$store.commit('globals/setConfirmPrompt', payload)
+      }
     }
   },
   mounted() {}

client/components/tables/podcast/EpisodeTableRow.vue

@@ -78,7 +78,7 @@ export default {
       return this.$secondsToTimestamp(this.episode.duration)
     },
     isStreaming() {
-      return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId, this.episode.id)
+      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episode.id)
     },
     streamIsPlaying() {
       return this.$store.state.streamIsPlaying && this.isStreaming

client/store/index.js

@@ -41,8 +41,9 @@ export const getters = {
   getLibraryItemIdStreaming: state => {
     return state.streamLibraryItem ? state.streamLibraryItem.id : null
   },
-  getIsEpisodeStreaming: state => (libraryItemId, episodeId) => {
+  getIsMediaStreaming: state => (libraryItemId, episodeId) => {
     if (!state.streamLibraryItem) return null
+    if (!episodeId) return state.streamLibraryItem.id == libraryItemId
     return state.streamLibraryItem.id == libraryItemId && state.streamEpisodeId == episodeId
   }
 }

client/tailwind.config.js

@@ -91,7 +91,8 @@ module.exports = {
         '2.5xl': '1.6875rem'
       },
       zIndex: {
-        '50': 50
+        '50': 50,
+        '60': 60
       }
     }
   },