Make jump labels compatible with i18n/translation

components/app/AudioPlayer.vue

@@ -77,7 +77,7 @@
             @click.stop="jumpBackwards"
           >
             <span class="material-symbols text-3xl leading-none">{{ jumpBackwardsItem.icon }}</span>
-            <span class="jump-label text-[10px] font-semibold leading-tight">{{ jumpBackwardsItem.label }}</span>
+            <span class="jump-label text-[10px] font-semibold leading-tight">{{ jumpBackwardsLabel }}</span>
           </div>
           <div class="play-btn cursor-pointer shadow-sm flex items-center justify-center rounded-full text-primary mx-4 relative overflow-hidden" :style="{ backgroundColor: coverRgb }" :class="{ 'animate-spin': seekLoading }" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
             <div v-if="!coverBgIsLight" class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-20 pointer-events-none" />
@@ -92,7 +92,7 @@
             @click.stop="jumpForward"
           >
             <span class="material-symbols text-3xl leading-none">{{ jumpForwardItem.icon }}</span>
-            <span class="jump-label text-[10px] font-semibold leading-tight">{{ jumpForwardItem.label }}</span>
+            <span class="jump-label text-[10px] font-semibold leading-tight">{{ jumpForwardLabel }}</span>
           </div>
           <span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
         </div>
@@ -126,6 +126,7 @@ import { AbsAudioPlayer } from '@/plugins/capacitor'
 import { Dialog } from '@capacitor/dialog'
 import { FastAverageColor } from 'fast-average-color'
 import WrappingMarquee from '@/assets/WrappingMarquee.js'
+import jumpLabelMixin from '@/mixins/jumpLabel'
 
 export default {
   props: {
@@ -137,6 +138,7 @@ export default {
     sleepTimeRemaining: Number,
     serverLibraryItemId: String
   },
+  mixins: [jumpLabelMixin],
   data() {
     return {
       windowHeight: 0,
@@ -243,6 +245,12 @@ export default {
     jumpBackwardsItem() {
       return this.$store.getters['globals/getJumpBackwardsItem'](this.jumpBackwardsTime)
     },
+    jumpForwardLabel() {
+      return this.getJumpLabel(this.jumpForwardTime)
+    },
+    jumpBackwardsLabel() {
+      return this.getJumpLabel(this.jumpBackwardsTime)
+    },
     jumpForwardTime() {
       return this.$store.getters['getJumpForwardTime']
     },
@@ -959,7 +967,7 @@ export default {
     },
     showProgressSyncSuccess() {
       this.syncStatus = this.$constants.SyncStatus.SUCCESS
-    }
+    },
   },
   mounted() {
     this.updateScreenSize()

mixins/jumpLabel.js

@@ -0,0 +1,12 @@
+export default {
+  methods: {
+    getJumpLabel(seconds) {
+      const val = Number(seconds)
+      if (isNaN(val)) return ''
+      const useMinutes = val >= 120 // keep 60s as seconds
+      const key = useMinutes ? 'UnitMinutesShort' : 'UnitSecondsShort'
+      const unitValue = useMinutes ? val / 60 : val
+      return this.$getString(key, [this.$formatNumber(unitValue)])
+    }
+  }
+}

pages/settings.vue

@@ -187,8 +187,10 @@
 
 <script>
 import { Dialog } from '@capacitor/dialog'
+import jumpLabelMixin from '@/mixins/jumpLabel'
 
 export default {
+  mixins: [jumpLabelMixin],
   data() {
     return {
       loading: false,
@@ -362,10 +364,10 @@ export default {
       return this.$languageCodeOptions || []
     },
     jumpForwardOption() {
-      return this.currentJumpForwardItem.label || ''
+      return this.getJumpLabel(this.settings.jumpForwardTime)
     },
     jumpBackwardsOption() {
-      return this.currentJumpBackwardsItem.label || ''
+      return this.getJumpLabel(this.settings.jumpBackwardsTime)
     },
     themeOptionItems() {
       return [
@@ -448,13 +450,13 @@ export default {
       else if (this.moreMenuSetting === 'androidAutoBrowseSeriesSequenceOrder') return this.androidAutoBrowseSeriesSequenceOrderItems
       else if (this.moreMenuSetting === 'jumpForward')
         return this.jumpForwardItems.map((i) => ({
-          text: i.label,
+          text: this.getJumpLabel(i.value),
           value: i.value,
           icon: i.icon
         }))
       else if (this.moreMenuSetting === 'jumpBackwards')
         return this.jumpBackwardsItems.map((i) => ({
-          text: i.label,
+          text: this.getJumpLabel(i.value),
           value: i.value,
           icon: i.icon
         }))

store/globals.js

@@ -8,74 +8,60 @@ export const state = () => ({
   jumpForwardItems: [
     {
       icon: 'forward_media',
-      label: '5s',
       value: 5
     },
     {
       icon: 'forward_media',
-      label: '10s',
       value: 10
     },
     {
       icon: 'forward_media',
-      label: '15s',
       value: 15
     },
     {
       icon: 'forward_media',
-      label: '30s',
       value: 30
     },
     {
       icon: 'forward_media',
-      label: '60s',
       value: 60
     },
     {
       icon: 'forward_media',
-      label: '2m',
       value: 120
     },
     {
       icon: 'forward_media',
-      label: '5m',
       value: 300
     }
   ],
   jumpBackwardsItems: [
     {
       icon: 'replay',
-      label: '5s',
       value: 5
     },
     {
       icon: 'replay',
-      label: '10s',
       value: 10
     },
     {
       icon: 'replay',
-      label: '15s',
       value: 15
     },
     {
       icon: 'replay',
-      label: '30s',
       value: 30
     },
     {
       icon: 'replay',
-      label: '60s',
       value: 60
     },
     {
       icon: 'replay',
-      label: '2m',
       value: 120
     },
     {
       icon: 'replay',
-      label: '5m',
       value: 300
     }
   ],

strings/en-us.json

@@ -359,5 +359,7 @@
   "ToastPodcastCreateSuccess": "Podcast created successfully",
   "ToastRSSFeedCloseFailed": "Failed to close RSS feed",
   "ToastRSSFeedCloseSuccess": "RSS feed closed",
-  "ToastStreamingNotAllowedOnCellular": "Streaming is not allowed on cellular data"
+  "ToastStreamingNotAllowedOnCellular": "Streaming is not allowed on cellular data",
+  "UnitSecondsShort": "{0}s",
+  "UnitMinutesShort": "{0}m"
 }