From 92bedeac15ca8f29dafd9b15e505ce2b143b3177 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 30 Jul 2022 12:25:15 -0500
Subject: [PATCH] Update:Click chapter times in chapters table to jump to
 timestamp

---
 client/components/app/StreamContainer.vue     |  6 +++-
 .../modals/EditSeriesInputInnerModal.vue      |  2 --
 client/components/modals/Modal.vue            | 15 +++++++--
 client/components/prompt/Confirm.vue          | 18 ++++++++---
 client/components/prompt/Dialog.vue           |  2 --
 client/components/tables/ChaptersTable.vue    | 31 +++++++++++++++++--
 .../tables/podcast/EpisodeTableRow.vue        |  2 +-
 client/store/index.js                         |  3 +-
 client/tailwind.config.js                     |  3 +-
 9 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/client/components/app/StreamContainer.vue b/client/components/app/StreamContainer.vue
index e951dbfd..e27d7695 100644
--- a/client/components/app/StreamContainer.vue
+++ b/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
       }
 
diff --git a/client/components/modals/EditSeriesInputInnerModal.vue b/client/components/modals/EditSeriesInputInnerModal.vue
index e43ab4eb..fb540105 100644
--- a/client/components/modals/EditSeriesInputInnerModal.vue
+++ b/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)
diff --git a/client/components/modals/Modal.vue b/client/components/modals/Modal.vue
index 40593ed9..87185127 100644
--- a/client/components/modals/Modal.vue
+++ b/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>
\ No newline at end of file
diff --git a/client/components/prompt/Confirm.vue b/client/components/prompt/Confirm.vue
index e0e4e69b..b5ef8296 100644
--- a/client/components/prompt/Confirm.vue
+++ b/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>
\ No newline at end of file
diff --git a/client/components/prompt/Dialog.vue b/client/components/prompt/Dialog.vue
index c0b249b9..3d418996 100644
--- a/client/components/prompt/Dialog.vue
+++ b/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() {
diff --git a/client/components/tables/ChaptersTable.vue b/client/components/tables/ChaptersTable.vue
index 5be62d04..e51b53ed 100644
--- a/client/components/tables/ChaptersTable.vue
+++ b/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() {}
diff --git a/client/components/tables/podcast/EpisodeTableRow.vue b/client/components/tables/podcast/EpisodeTableRow.vue
index b7040098..6e76b44d 100644
--- a/client/components/tables/podcast/EpisodeTableRow.vue
+++ b/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
diff --git a/client/store/index.js b/client/store/index.js
index ef3915f1..723bfd05 100644
--- a/client/store/index.js
+++ b/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
   }
 }
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 1509f715..cde080f3 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -91,7 +91,8 @@ module.exports = {
         '2.5xl': '1.6875rem'
       },
       zIndex: {
-        '50': 50
+        '50': 50,
+        '60': 60
       }
     }
   },