Fix:Sleep timer volume reset #10, Change:Sleep timer resets to originally selected time only if less than 30s or finished within 2m #10, Add:Sleep timer +/- buttons

components/app/AudioPlayerContainer.vue

@@ -24,7 +24,7 @@
 
     <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="sleepTimeRemaining" :sleep-timer-running="isSleepTimerRunning" :current-end-of-chapter-time="currentEndOfChapterTime" @change="selectSleepTimeout" @cancel="cancelSleepTimer" />
+    <modals-sleep-timer-modal v-model="showSleepTimerModal" :current-time="sleepTimeRemaining" :sleep-timer-running="isSleepTimerRunning" :current-end-of-chapter-time="currentEndOfChapterTime" @change="selectSleepTimeout" @cancel="cancelSleepTimer" @increase="increaseSleepTimer" @decrease="decreaseSleepTimer" />
     <modals-bookmarks-modal v-model="showBookmarksModal" :audiobook-id="audiobookId" :bookmarks="bookmarks" :current-time="currentTime" @select="selectBookmark" />
   </div>
 </template>
@@ -192,6 +192,13 @@ export default {
         return this.$toast.error('Sleep timer did not set, invalid time')
       }
     },
+    increaseSleepTimer() {
+      // Default time to increase = 5 min
+      MyNativeAudio.increaseSleepTime({ time: '300000' })
+    },
+    decreaseSleepTimer() {
+      MyNativeAudio.decreaseSleepTime({ time: '300000' })
+    },
     async cancelSleepTimer() {
       console.log('Canceling sleep timer')
       await MyNativeAudio.cancelSleepTimer()

components/modals/SleepTimerModal.vue

@@ -23,7 +23,12 @@
           </li>
         </ul>
         <div v-else class="px-2 py-4">
-          <p class="mb-4 text-2xl font-mono text-center">{{ timeRemainingPretty }}</p>
+          <div class="flex my-2 justify-between">
+            <ui-btn @click="decreaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">remove</span></ui-btn>
+            <p class="text-2xl font-mono text-center">{{ timeRemainingPretty }}</p>
+            <ui-btn @click="increaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">add</span></ui-btn>
+          </div>
+
           <ui-btn @click="cancelSleepTimer" class="w-full">Cancel Timer</ui-btn>
         </div>
       </div>
@@ -52,7 +57,7 @@ export default {
       }
     },
     timeouts() {
-      return [1, 15, 30, 45, 60, 75, 90, 120]
+      return [1, 5, 10, 15, 30, 45, 60, 90]
     },
     timeRemainingPretty() {
       return this.$secondsToTimestamp(this.currentTime)
@@ -71,6 +76,12 @@ export default {
     cancelSleepTimer() {
       this.$emit('cancel')
       this.show = false
+    },
+    increaseSleepTime() {
+      this.$emit('increase')
+    },
+    decreaseSleepTime() {
+      this.$emit('decrease')
     }
   },
   mounted() {}