Add: Sleep Timer set to end of chapter #24, Change: Scroll to current chapter in modal

components/AudioPlayerMini.vue

@@ -33,7 +33,8 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
         </svg>
         <div v-else class="h-5 w-5 flex items-center justify-around">
-          <p class="text-sm font-mono text-warning">{{ Math.ceil(sleepTimeoutCurrentTime / 1000 / 60) }}m</p>
+          <p v-if="sleepTimerEndOfChapterTime" class="text-sm font-mono text-warning">EOC</p>
+          <p v-else class="text-sm font-mono text-warning">{{ Math.ceil(sleepTimeoutCurrentTime / 1000 / 60) }}m</p>
         </div>
       </div>
 
@@ -65,7 +66,8 @@ export default {
   props: {
     loading: Boolean,
     sleepTimerRunning: Boolean,
-    sleepTimeoutCurrentTime: Number
+    sleepTimeoutCurrentTime: Number,
+    sleepTimerEndOfChapterTime: Number
   },
   data() {
     return {

components/app/StreamContainer.vue

@@ -15,11 +15,13 @@
       <div class="absolute left-2 -top-10 bookCoverWrapper">
         <cards-book-cover :audiobook="audiobook" :download-cover="downloadedCover" :width="64" />
       </div>
-      <audio-player-mini ref="audioPlayerMini" :loading="isLoading" :sleep-timer-running="isSleepTimerRunning" :sleep-timeout-current-time="sleepTimeoutCurrentTime" @updateTime="updateTime" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @showSleepTimer="showSleepTimer" @hook:mounted="audioPlayerMounted" />
+      <audio-player-mini ref="audioPlayerMini" :loading="isLoading" :sleep-timer-running="isSleepTimerRunning" :sleep-timer-end-of-chapter-time="sleepTimerEndOfChapterTime" :sleep-timeout-current-time="sleepTimeoutCurrentTime" @updateTime="updateTime" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @showSleepTimer="showSleepTimer" @hook:mounted="audioPlayerMounted" />
     </div>
     <modals-playback-speed-modal v-model="showPlaybackSpeedModal" :playback-speed.sync="playbackSpeed" @change="changePlaybackSpeed" />
+
     <modals-chapters-modal v-model="showChapterModal" :current-chapter="currentChapter" :chapters="chapters" @select="selectChapter" />
-    <modals-sleep-timer-modal v-model="showSleepTimerModal" :current-time="sleepTimeoutCurrentTime" :sleep-timer-running="isSleepTimerRunning" @change="selectSleepTimeout" @cancel="cancelSleepTimer" />
+
+    <modals-sleep-timer-modal v-model="showSleepTimerModal" :current-time="sleepTimeoutCurrentTime" :sleep-timer-running="isSleepTimerRunning" :current-end-of-chapter-time="currentEndOfChapterTime" :end-of-chapter-time-set="sleepTimerEndOfChapterTime" @change="selectSleepTimeout" @cancel="cancelSleepTimer" />
   </div>
 </template>
 
@@ -41,8 +43,10 @@ export default {
       currentTime: 0,
       sleepTimeoutCurrentTime: 0,
       isSleepTimerRunning: false,
+      sleepTimerEndOfChapterTime: false,
       onSleepTimerEndedListener: null,
-      sleepInterval: null
+      sleepInterval: null,
+      currentEndOfChapterTime: 0
     }
   },
   watch: {
@@ -124,12 +128,22 @@ export default {
     }
   },
   methods: {
-    onSleepTimerEnded() {
+    onSleepTimerEnded({ value: currentPosition }) {
       this.isSleepTimerRunning = false
       if (this.sleepInterval) clearInterval(this.sleepInterval)
+
+      if (currentPosition) {
+        console.log('Sleep Timer Ended Current Position: ' + currentPosition)
+        var currentTime = Math.floor(currentPosition / 1000)
+        this.updateTime(currentTime)
+      }
     },
     showSleepTimer() {
-      this.getSleepTimerTime()
+      if (this.currentChapter) {
+        this.currentEndOfChapterTime = Math.floor(this.currentChapter.end)
+      } else {
+        this.currentEndOfChapterTime = 0
+      }
       this.showSleepTimerModal = true
     },
     async getSleepTimerTime() {
@@ -140,15 +154,25 @@ export default {
       }
       return 0
     },
-    async selectSleepTimeout(timeout) {
-      console.log('Setting sleep timer', timeout)
-      await MyNativeAudio.setSleepTimer({ timeout: String(timeout) })
-      this.setSleepTimeoutTimer(timeout)
+    async selectSleepTimeout({ time, isChapterTime }) {
+      console.log('Setting sleep timer', time, isChapterTime)
+      var res = await MyNativeAudio.setSleepTimer({ time: String(time), isChapterTime })
+      if (!res.success) {
+        return this.$toast.error('Sleep timer did not set, invalid time')
+      }
+      if (isChapterTime) {
+        this.sleepTimerEndOfChapterTime = time
+        this.isSleepTimerRunning = true
+      } else {
+        this.sleepTimerEndOfChapterTime = 0
+        this.setSleepTimeoutTimer(time)
+      }
     },
     async cancelSleepTimer() {
       console.log('Canceling sleep timer')
       await MyNativeAudio.cancelSleepTimer()
       this.isSleepTimerRunning = false
+      this.sleepTimerEndOfChapterTime = 0
       if (this.sleepInterval) clearInterval(this.sleepInterval)
     },
     async syncSleepTimer() {

components/modals/ChaptersModal.vue

@@ -7,15 +7,17 @@
     </template>
 
     <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" style="max-height: 75%" @click.stop>
+      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
         <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="chapter in chapters">
-            <li :key="chapter.id" class="text-gray-50 select-none relative py-3 cursor-pointer hover:bg-black-400" :class="currentChapterId === chapter.id ? 'bg-bg bg-opacity-80' : ''" role="option" @click="clickedOption(chapter)">
+            <li :key="chapter.id" :id="`chapter-row-${chapter.id}`" class="text-gray-50 select-none relative py-3 cursor-pointer hover:bg-black-400" :class="currentChapterId === chapter.id ? 'bg-bg bg-opacity-80' : ''" role="option" @click="clickedOption(chapter)">
               <div class="flex items-center justify-center px-3">
                 <span class="font-normal block truncate text-lg">{{ chapter.title }}</span>
                 <div class="flex-grow" />
                 <span class="font-mono text-gray-300">{{ $secondsToTimestamp(chapter.start) }}</span>
               </div>
+
+              <div v-show="chapter.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
             </li>
           </template>
         </ul>
@@ -40,6 +42,11 @@ export default {
   data() {
     return {}
   },
+  watch: {
+    value(newVal) {
+      this.$nextTick(this.scrollToChapter)
+    }
+  },
   computed: {
     show: {
       get() {
@@ -59,6 +66,19 @@ export default {
   methods: {
     clickedOption(chapter) {
       this.$emit('select', chapter)
+    },
+    scrollToChapter() {
+      if (!this.currentChapterId) return
+
+      var container = this.$refs.container
+      if (container) {
+        var currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`)
+        if (currChapterEl) {
+          var offsetTop = currChapterEl.offsetTop
+          var containerHeight = container.clientHeight
+          container.scrollTo({ top: offsetTop - containerHeight / 2 })
+        }
+      }
     }
   },
   mounted() {}

components/modals/SleepTimerModal.vue

@@ -10,15 +10,21 @@
       <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
         <ul v-if="!sleepTimerRunning" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="timeout in timeouts">
-            <li :key="timeout" class="text-gray-50 select-none relative py-4 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(timeout)">
+            <li :key="timeout" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(timeout)">
               <div class="flex items-center justify-center">
-                <span class="font-normal ml-3 block truncate text-lg">{{ timeout }} min</span>
+                <span class="font-normal block truncate text-lg">{{ timeout }} min</span>
               </div>
             </li>
           </template>
+          <li v-if="currentEndOfChapterTime" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedChapterOption(timeout)">
+            <div class="flex items-center justify-center">
+              <span class="font-normal block truncate text-lg text-center">End of Chapter</span>
+            </div>
+          </li>
         </ul>
         <div v-else class="px-2 py-4">
-          <p class="mb-4 text-2xl font-mono text-center">{{ timeRemainingPretty }}</p>
+          <p v-if="endOfChapterTimeSet" class="mb-4 text-2xl font-mono text-center">EOC: {{ endOfChapterTimePretty }}</p>
+          <p v-else class="mb-4 text-2xl font-mono text-center">{{ timeRemainingPretty }}</p>
           <ui-btn @click="cancelSleepTimer" class="w-full">Cancel Timer</ui-btn>
         </div>
       </div>
@@ -31,7 +37,9 @@ export default {
   props: {
     value: Boolean,
     currentTime: Number,
-    sleepTimerRunning: Boolean
+    sleepTimerRunning: Boolean,
+    currentEndOfChapterTime: Boolean,
+    endOfChapterTimeSet: Number
   },
   data() {
     return {}
@@ -50,13 +58,20 @@ export default {
     },
     timeRemainingPretty() {
       return this.$secondsToTimestamp(this.currentTime / 1000)
+    },
+    endOfChapterTimePretty() {
+      return this.$secondsToTimestamp(this.endOfChapterTimeSet / 1000)
     }
   },
   methods: {
+    clickedChapterOption() {
+      this.show = false
+      this.$nextTick(() => this.$emit('change', { time: this.currentEndOfChapterTime * 1000, isChapterTime: true }))
+    },
     clickedOption(timeoutMin) {
       var timeout = timeoutMin * 1000 * 60
       this.show = false
-      this.$nextTick(() => this.$emit('change', timeout))
+      this.$nextTick(() => this.$emit('change', { time: timeout, isChapterTime: false }))
     },
     cancelSleepTimer() {
       this.$emit('cancel')