WIP: Add "End of chapter" option for sleep timer (#3151)

* Add SleepTimerTypes for countdown and chapter * Add functionality for 'end of chapter' sleep timer * Fix custom time for sleep timer * Include end of chapter string for sleep timer * Increase chapter end tolerance to 0.75 * Show sleep time options in modal when timer is active * Add SleepTimerTypes for countdown and chapter * Add functionality for 'end of chapter' sleep timer * Fix custom time for sleep timer * Include end of chapter string for sleep timer * Increase chapter end tolerance to 0.75 * Show sleep time options in modal when timer is active * Sleep timer cleanup * Localization for sleep timer modal, UI updates --------- Co-authored-by: advplyr <advplyr@protonmail.com>
2024-10-05 09:42:20 +02:00 · 2024-07-14 11:56:48 -07:00 · 2024-07-14 11:56:48 -07:00 · 733f61075f
commit 733f61075f
parent eabfa90121
7 changed files with 147 additions and 95 deletions
--- a/client/components/app/MediaPlayerContainer.vue
+++ b/client/components/app/MediaPlayerContainer.vue
@ -35,11 +35,13 @@
    <player-ui
      ref="audioPlayer"
      :chapters="chapters"
+      :current-chapter="currentChapter"
      :paused="!isPlaying"
      :loading="playerLoading"
      :bookmarks="bookmarks"
      :sleep-timer-set="sleepTimerSet"
      :sleep-timer-remaining="sleepTimerRemaining"
+      :sleep-timer-type="sleepTimerType"
      :is-podcast="isPodcast"
      @playPause="playPause"
      @jumpForward="jumpForward"
@ -56,7 +58,7 @@

    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :library-item-id="libraryItemId" @select="selectBookmark" />

-    <modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-time="sleepTimerTime" :remaining="sleepTimerRemaining" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />
+    <modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-type="sleepTimerType" :remaining="sleepTimerRemaining" :has-chapters="!!chapters.length" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />

    <modals-player-queue-items-modal v-model="showPlayerQueueItemsModal" :library-item-id="libraryItemId" />

@ -81,8 +83,8 @@ export default {
      showPlayerQueueItemsModal: false,
      showPlayerSettingsModal: false,
      sleepTimerSet: false,
-      sleepTimerTime: 0,
      sleepTimerRemaining: 0,
+      sleepTimerType: null,
      sleepTimer: null,
      displayTitle: null,
      currentPlaybackRate: 1,
@ -149,6 +151,9 @@ export default {
      if (this.streamEpisode) return this.streamEpisode.chapters || []
      return this.media.chapters || []
    },
+    currentChapter() {
+      return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
+    },
    title() {
      if (this.playerHandler.displayTitle) return this.playerHandler.displayTitle
      return this.mediaMetadata.title || 'No Title'
@ -208,14 +213,18 @@ export default {
      this.$store.commit('setIsPlaying', isPlaying)
      this.updateMediaSessionPlaybackState()
    },
-    setSleepTimer(seconds) {
+    setSleepTimer(time) {
      this.sleepTimerSet = true
-      this.sleepTimerTime = seconds
-      this.sleepTimerRemaining = seconds
-      this.runSleepTimer()
      this.showSleepTimerModal = false
+
+      this.sleepTimerType = time.timerType
+      if (this.sleepTimerType === this.$constants.SleepTimerTypes.COUNTDOWN) {
+        this.runSleepTimer(time)
+      }
    },
-    runSleepTimer() {
+    runSleepTimer(time) {
+      this.sleepTimerRemaining = time.seconds
+
      var lastTick = Date.now()
      clearInterval(this.sleepTimer)
      this.sleepTimer = setInterval(() => {
@ -224,12 +233,23 @@ export default {
        this.sleepTimerRemaining -= elapsed / 1000

        if (this.sleepTimerRemaining <= 0) {
-          this.clearSleepTimer()
-          this.playerHandler.pause()
-          this.$toast.info('Sleep Timer Done.. zZzzZz')
+          this.sleepTimerEnd()
        }
      }, 1000)
    },
+    checkChapterEnd(time) {
+      if (!this.currentChapter) return
+      const chapterEndTime = this.currentChapter.end
+      const tolerance = 0.75
+      if (time >= chapterEndTime - tolerance) {
+        this.sleepTimerEnd()
+      }
+    },
+    sleepTimerEnd() {
+      this.clearSleepTimer()
+      this.playerHandler.pause()
+      this.$toast.info('Sleep Timer Done.. zZzzZz')
+    },
    cancelSleepTimer() {
      this.showSleepTimerModal = false
      this.clearSleepTimer()
@ -239,6 +259,7 @@ export default {
      this.sleepTimerRemaining = 0
      this.sleepTimer = null
      this.sleepTimerSet = false
+      this.sleepTimerType = null
    },
    incrementSleepTimer(amount) {
      if (!this.sleepTimerSet) return
@ -279,6 +300,10 @@ export default {
      if (this.$refs.audioPlayer) {
        this.$refs.audioPlayer.setCurrentTime(time)
      }
+
+      if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER && this.sleepTimerSet) {
+        this.checkChapterEnd(time)
+      }
    },
    setDuration(duration) {
      this.totalDuration = duration
--- a/client/components/modals/PlayerSettingsModal.vue
+++ b/client/components/modals/PlayerSettingsModal.vue
@ -27,12 +27,12 @@ export default {
    return {
      useChapterTrack: false,
      jumpValues: [
-        { text: this.$getString('LabelJumpAmountSeconds', ['10']), value: 10 },
-        { text: this.$getString('LabelJumpAmountSeconds', ['15']), value: 15 },
-        { text: this.$getString('LabelJumpAmountSeconds', ['30']), value: 30 },
-        { text: this.$getString('LabelJumpAmountSeconds', ['60']), value: 60 },
-        { text: this.$getString('LabelJumpAmountMinutes', ['2']), value: 120 },
-        { text: this.$getString('LabelJumpAmountMinutes', ['5']), value: 300 }
+        { text: this.$getString('LabelTimeDurationXSeconds', ['10']), value: 10 },
+        { text: this.$getString('LabelTimeDurationXSeconds', ['15']), value: 15 },
+        { text: this.$getString('LabelTimeDurationXSeconds', ['30']), value: 30 },
+        { text: this.$getString('LabelTimeDurationXSeconds', ['60']), value: 60 },
+        { text: this.$getString('LabelTimeDurationXMinutes', ['2']), value: 120 },
+        { text: this.$getString('LabelTimeDurationXMinutes', ['5']), value: 300 }
      ],
      jumpForwardAmount: 10,
      jumpBackwardAmount: 10
--- a/client/components/modals/SleepTimerModal.vue
+++ b/client/components/modals/SleepTimerModal.vue
@ -6,34 +6,36 @@
      </div>
    </template>

-    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
-      <div v-if="!timerSet" class="w-full">
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div class="w-full">
        <template v-for="time in sleepTimes">
-          <div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-bg relative" @click="setTime(time.seconds)">
-            <p class="text-xl text-center">{{ time.text }}</p>
+          <div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-primary/25 relative" @click="setTime(time)">
+            <p class="text-lg text-center">{{ time.text }}</p>
          </div>
        </template>
        <form class="flex items-center justify-center px-6 py-3" @submit.prevent="submitCustomTime">
-          <ui-text-input v-model="customTime" type="number" step="any" min="0.1" placeholder="Time in minutes" class="w-48" />
+          <ui-text-input v-model="customTime" type="number" step="any" min="0.1" :placeholder="$strings.LabelTimeInMinutes" class="w-48" />
          <ui-btn color="success" type="submit" :padding-x="0" class="h-9 w-12 flex items-center justify-center ml-1">Set</ui-btn>
        </form>
      </div>
-      <div v-else class="w-full p-4">
-        <div class="mb-4 flex items-center justify-center">
-          <ui-btn :padding-x="2" small :disabled="remaining < 30 * 60" class="flex items-center mr-4" @click="decrement(30 * 60)">
+      <div v-if="timerSet" class="w-full p-4">
+        <div class="mb-4 h-px w-full bg-white/10" />
+
+        <div v-if="timerType === $constants.SleepTimerTypes.COUNTDOWN" class="mb-4 flex items-center justify-center space-x-4">
+          <ui-btn :padding-x="2" small :disabled="remaining < 30 * 60" class="flex items-center h-9" @click="decrement(30 * 60)">
            <span class="material-symbols text-lg">remove</span>
-            <span class="pl-1 text-base font-mono">30m</span>
+            <span class="pl-1 text-sm">30m</span>
          </ui-btn>

-          <ui-icon-btn icon="remove" @click="decrement(60 * 5)" />
+          <ui-icon-btn icon="remove" class="min-w-9" @click="decrement(60 * 5)" />

-          <p class="mx-6 text-2xl font-mono">{{ $secondsToTimestamp(remaining) }}</p>
+          <p class="text-2xl font-mono">{{ $secondsToTimestamp(remaining) }}</p>

-          <ui-icon-btn icon="add" @click="increment(60 * 5)" />
+          <ui-icon-btn icon="add" class="min-w-9" @click="increment(60 * 5)" />

-          <ui-btn :padding-x="2" small class="flex items-center ml-4" @click="increment(30 * 60)">
+          <ui-btn :padding-x="2" small class="flex items-center h-9" @click="increment(30 * 60)">
            <span class="material-symbols text-lg">add</span>
-            <span class="pl-1 text-base font-mono">30m</span>
+            <span class="pl-1 text-sm">30m</span>
          </ui-btn>
        </div>
        <ui-btn class="w-full" @click="$emit('cancel')">{{ $strings.ButtonCancel }}</ui-btn>
@ -47,52 +49,13 @@ export default {
  props: {
    value: Boolean,
    timerSet: Boolean,
-    timerTime: Number,
-    remaining: Number
+    timerType: String,
+    remaining: Number,
+    hasChapters: Boolean
  },
  data() {
    return {
-      customTime: null,
-      sleepTimes: [
-        {
-          seconds: 60 * 5,
-          text: '5 minutes'
-        },
-        {
-          seconds: 60 * 15,
-          text: '15 minutes'
-        },
-        {
-          seconds: 60 * 20,
-          text: '20 minutes'
-        },
-        {
-          seconds: 60 * 30,
-          text: '30 minutes'
-        },
-        {
-          seconds: 60 * 45,
-          text: '45 minutes'
-        },
-        {
-          seconds: 60 * 60,
-          text: '60 minutes'
-        },
-        {
-          seconds: 60 * 90,
-          text: '90 minutes'
-        },
-        {
-          seconds: 60 * 120,
-          text: '2 hours'
-        }
-      ]
-    }
-  },
-  watch: {
-    show(newVal) {
-      if (newVal) {
-      }
+      customTime: null
    }
  },
  computed: {
@ -103,6 +66,54 @@ export default {
      set(val) {
        this.$emit('input', val)
      }
+    },
+    sleepTimes() {
+      const times = [
+        {
+          seconds: 60 * 5,
+          text: this.$getString('LabelTimeDurationXMinutes', ['5']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 15,
+          text: this.$getString('LabelTimeDurationXMinutes', ['15']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 20,
+          text: this.$getString('LabelTimeDurationXMinutes', ['20']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 30,
+          text: this.$getString('LabelTimeDurationXMinutes', ['30']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 45,
+          text: this.$getString('LabelTimeDurationXMinutes', ['45']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 60,
+          text: this.$getString('LabelTimeDurationXMinutes', ['60']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 90,
+          text: this.$getString('LabelTimeDurationXMinutes', ['90']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 120,
+          text: this.$getString('LabelTimeDurationXHours', ['2']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        }
+      ]
+      if (this.hasChapters) {
+        times.push({ seconds: -1, text: this.$strings.LabelEndOfChapter, timerType: this.$constants.SleepTimerTypes.CHAPTER })
+      }
+      return times
    }
  },
  methods: {
@ -113,10 +124,14 @@ export default {
      }

      const timeInSeconds = Math.round(Number(this.customTime) * 60)
-      this.setTime(timeInSeconds)
+      const time = {
+        seconds: timeInSeconds,
+        timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+      }
+      this.setTime(time)
    },
-    setTime(seconds) {
-      this.$emit('set', seconds)
+    setTime(time) {
+      this.$emit('set', time)
    },
    increment(amount) {
      this.$emit('increment', amount)
@ -130,4 +145,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/player/PlayerPlaybackControls.vue
+++ b/client/components/player/PlayerPlaybackControls.vue
@ -96,10 +96,10 @@ export default {

      let formattedTime = ''
      if (amount <= 60) {
-        formattedTime = this.$getString('LabelJumpAmountSeconds', [amount])
+        formattedTime = this.$getString('LabelTimeDurationXSeconds', [amount])
      } else {
        const minutes = Math.floor(amount / 60)
-        formattedTime = this.$getString('LabelJumpAmountMinutes', [minutes])
+        formattedTime = this.$getString('LabelTimeDurationXMinutes', [minutes])
      }

      return `${prefix} - ${formattedTime}`
--- a/client/components/player/PlayerUi.vue
+++ b/client/components/player/PlayerUi.vue
@ -13,7 +13,7 @@
            <span v-if="!sleepTimerSet" class="material-symbols text-2xl">snooze</span>
            <div v-else class="flex items-center">
              <span class="material-symbols text-lg text-warning">snooze</span>
-              <p class="text-xl text-warning font-mono font-semibold text-center px-0.5 pb-0.5" style="min-width: 30px">{{ sleepTimerRemainingString }}</p>
+              <p class="text-sm sm:text-lg text-warning font-mono font-semibold text-center px-0.5 sm:pb-0.5 sm:min-w-8">{{ sleepTimerRemainingString }}</p>
            </div>
          </button>
        </ui-tooltip>
@ -72,12 +72,14 @@ export default {
      type: Array,
      default: () => []
    },
+    currentChapter: Object,
    bookmarks: {
      type: Array,
      default: () => []
    },
    sleepTimerSet: Boolean,
    sleepTimerRemaining: Number,
+    sleepTimerType: String,
    isPodcast: Boolean,
    hideBookmarks: Boolean,
    hideSleepTimer: Boolean
@ -104,16 +106,20 @@ export default {
  },
  computed: {
    sleepTimerRemainingString() {
-      var rounded = Math.round(this.sleepTimerRemaining)
-      if (rounded < 90) {
-        return `${rounded}s`
+      if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER) {
+        return 'EoC'
+      } else {
+        var rounded = Math.round(this.sleepTimerRemaining)
+        if (rounded < 90) {
+          return `${rounded}s`
+        }
+        var minutesRounded = Math.round(rounded / 60)
+        if (minutesRounded <= 90) {
+          return `${minutesRounded}m`
+        }
+        var hoursRounded = Math.round(minutesRounded / 60)
+        return `${hoursRounded}h`
      }
-      var minutesRounded = Math.round(rounded / 60)
-      if (minutesRounded < 90) {
-        return `${minutesRounded}m`
-      }
-      var hoursRounded = Math.round(minutesRounded / 60)
-      return `${hoursRounded}h`
    },
    token() {
      return this.$store.getters['user/getToken']
@ -138,9 +144,6 @@ export default {
      if (!duration) return 0
      return Math.round((100 * time) / duration)
    },
-    currentChapter() {
-      return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
-    },
    currentChapterName() {
      return this.currentChapter ? this.currentChapter.title : ''
    },
--- a/client/plugins/constants.js
+++ b/client/plugins/constants.js
@ -32,12 +32,18 @@ const PlayMethod = {
  LOCAL: 3
 }

+const SleepTimerTypes = {
+  COUNTDOWN: 'countdown',
+  CHAPTER: 'chapter'
+}
+
 const Constants = {
  SupportedFileTypes,
  DownloadStatus,
  BookCoverAspectRatio,
  BookshelfView,
-  PlayMethod
+  PlayMethod,
+  SleepTimerTypes
 }

 const KeyNames = {
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@ -292,6 +292,7 @@
  "LabelEmbeddedCover": "Embedded Cover",
  "LabelEnable": "Enable",
  "LabelEnd": "End",
+  "LabelEndOfChapter": "End of Chapter",
  "LabelEpisode": "Episode",
  "LabelEpisodeTitle": "Episode Title",
  "LabelEpisodeType": "Episode Type",
@ -345,8 +346,6 @@
  "LabelIntervalEveryHour": "Every hour",
  "LabelInvert": "Invert",
  "LabelItem": "Item",
-  "LabelJumpAmountMinutes": "{0} minutes",
-  "LabelJumpAmountSeconds": "{0} seconds",
  "LabelJumpBackwardAmount": "Jump backward amount",
  "LabelJumpForwardAmount": "Jump forward amount",
  "LabelLanguage": "Language",
@ -565,6 +564,10 @@
  "LabelThemeDark": "Dark",
  "LabelThemeLight": "Light",
  "LabelTimeBase": "Time Base",
+  "LabelTimeDurationXHours": "{0} hours",
+  "LabelTimeDurationXMinutes": "{0} minutes",
+  "LabelTimeDurationXSeconds": "{0} seconds",
+  "LabelTimeInMinutes": "Time in minutes",
  "LabelTimeListened": "Time Listened",
  "LabelTimeListenedToday": "Time Listened Today",
  "LabelTimeRemaining": "{0} remaining",