Localization for sleep timer modal, UI updates

client/components/app/MediaPlayerContainer.vue

@@ -58,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-type="sleepTimerType" :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" />
 
@@ -302,7 +302,7 @@ export default {
       }
 
       if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER && this.sleepTimerSet) {
-        this.checkChapterEnd(newTime)
+        this.checkChapterEnd(time)
       }
     },
     setDuration(duration) {

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('LabelTimeDurationXSeconds', ['10']), value: 10 },
-        { text: this.$getString('LabelJumpAmountSeconds', ['15']), value: 15 },
+        { text: this.$getString('LabelTimeDurationXSeconds', ['15']), value: 15 },
-        { text: this.$getString('LabelJumpAmountSeconds', ['30']), value: 30 },
+        { text: this.$getString('LabelTimeDurationXSeconds', ['30']), value: 30 },
-        { text: this.$getString('LabelJumpAmountSeconds', ['60']), value: 60 },
+        { text: this.$getString('LabelTimeDurationXSeconds', ['60']), value: 60 },
-        { text: this.$getString('LabelJumpAmountMinutes', ['2']), value: 120 },
+        { text: this.$getString('LabelTimeDurationXMinutes', ['2']), value: 120 },
-        { text: this.$getString('LabelJumpAmountMinutes', ['5']), value: 300 }
+        { text: this.$getString('LabelTimeDurationXMinutes', ['5']), value: 300 }
       ],
       jumpForwardAmount: 10,
       jumpBackwardAmount: 10

client/components/modals/SleepTimerModal.vue

@@ -6,37 +6,39 @@
       </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 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)">
+          <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-xl text-center">{{ time.text }}</p>
+            <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 class="w-full p-4">
+      <div v-if="timerSet" class="w-full p-4">
-        <div v-if="timerType === $constants.SleepTimerTypes.COUNTDOWN" class="mb-4 flex items-center justify-center">
+        <div class="mb-4 h-px w-full bg-white/10" />
-          <ui-btn :padding-x="2" small :disabled="remaining < 30 * 60" class="flex items-center mr-4" @click="decrement(30 * 60)">
+
+        <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 v-if="timerSet" class="w-full" @click="$emit('cancel')">{{ $strings.ButtonCancel }}</ui-btn>
+        <ui-btn class="w-full" @click="$emit('cancel')">{{ $strings.ButtonCancel }}</ui-btn>
       </div>
     </div>
   </modals-modal>
@@ -48,54 +50,12 @@ export default {
     value: Boolean,
     timerSet: Boolean,
     timerType: String,
-    remaining: Number
+    remaining: Number,
+    hasChapters: Boolean
   },
   data() {
     return {
-      customTime: null,
+      customTime: null
-      sleepTimes: [
-        {
-          seconds: 60 * 5,
-          text: '5 minutes',
-          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
-        },
-        {
-          seconds: 60 * 15,
-          text: '15 minutes',
-          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
-        },
-        {
-          seconds: 60 * 20,
-          text: '20 minutes',
-          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
-        },
-        {
-          seconds: 60 * 30,
-          text: '30 minutes',
-          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
-        },
-        {
-          seconds: 60 * 45,
-          text: '45 minutes',
-          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
-        },
-        {
-          seconds: 60 * 60,
-          text: '60 minutes',
-          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
-        },
-        {
-          seconds: 60 * 90,
-          text: '90 minutes',
-          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
-        },
-        {
-          seconds: 60 * 120,
-          text: '2 hours',
-          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
-        },
-        { seconds: -1, text: 'End of chapter', timerType: this.$constants.SleepTimerTypes.CHAPTER }
-      ]
     }
   },
   computed: {
@@ -106,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: {

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}`

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>
@@ -107,14 +107,14 @@ export default {
   computed: {
     sleepTimerRemainingString() {
       if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER) {
-        return this.$strings.LabelEndOfChapter
+        return 'EoC'
       } else {
         var rounded = Math.round(this.sleepTimerRemaining)
         if (rounded < 90) {
           return `${rounded}s`
         }
         var minutesRounded = Math.round(rounded / 60)
-        if (minutesRounded < 90) {
+        if (minutesRounded <= 90) {
           return `${minutesRounded}m`
         }
         var hoursRounded = Math.round(minutesRounded / 60)

client/strings/en-us.json

@@ -346,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",
@@ -566,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",