Update localization for player settings

client/components/modals/PlayerSettingsModal.vue

@@ -1,10 +1,12 @@
 <template>
   <modals-modal v-model="show" name="player-settings" :width="500" :height="'unset'">
     <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-4" style="max-height: 80vh; min-height: 40vh">
-      <h3 class="text-xl font-semibold mb-8">Player Settings</h3>
+      <h3 class="text-xl font-semibold mb-8">{{ $strings.HeaderPlayerSettings }}</h3>
       <div class="flex items-center mb-4">
         <ui-toggle-switch v-model="useChapterTrack" @input="setUseChapterTrack" />
-        <div class="pl-4"><span>Use Chapter Track</span></div>
+        <div class="pl-4">
+          <span>{{ $strings.LabelUseChapterTrack }}</span>
+        </div>
       </div>
       <div class="flex items-center mb-4">
         <ui-select-input v-model="jumpForwardAmount" :label="$strings.LabelJumpForwardAmount" menuMaxHeight="250px" :items="jumpValues" @input="setJumpForwardAmount" />
@@ -25,12 +27,12 @@ export default {
     return {
       useChapterTrack: false,
       jumpValues: [
-        { text: '10 seconds', value: 10 },
+        { text: this.$getString('LabelJumpAmountSeconds', ['10']), value: 10 },
-        { text: '15 seconds', value: 15 },
+        { text: this.$getString('LabelJumpAmountSeconds', ['15']), value: 15 },
-        { text: '30 seconds', value: 30 },
+        { text: this.$getString('LabelJumpAmountSeconds', ['30']), value: 30 },
-        { text: '1 minute', value: 60 },
+        { text: this.$getString('LabelJumpAmountSeconds', ['60']), value: 60 },
-        { text: '2 minutes', value: 120 },
+        { text: this.$getString('LabelJumpAmountMinutes', ['2']), value: 120 },
-        { text: '5 minutes', value: 300 }
+        { text: this.$getString('LabelJumpAmountMinutes', ['5']), value: 300 }
       ],
       jumpForwardAmount: 10,
       jumpBackwardAmount: 10

client/components/player/PlayerPlaybackControls.vue

@@ -58,10 +58,10 @@ export default {
       }
     },
     jumpForwardText() {
-      return this.getJumpText('jumpForwardAmount', 'Jump Forward')
+      return this.getJumpText('jumpForwardAmount', this.$strings.ButtonJumpForward)
     },
     jumpBackwardText() {
-      return this.getJumpText('jumpBackwardAmount', 'Jump Backward')
+      return this.getJumpText('jumpBackwardAmount', this.$strings.ButtonJumpBackward)
     }
   },
   methods: {
@@ -92,18 +92,17 @@ export default {
     },
     getJumpText(setting, prefix) {
       const amount = this.$store.getters['user/getUserSetting'](setting)
-      const minutes = Math.floor(amount / 60)
+      if (!amount) return prefix
-      const seconds = amount % 60
+
       let formattedTime = ''
-      if (minutes > 0) {
+      if (amount <= 60) {
-        formattedTime += `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`
+        formattedTime = this.$getString('LabelJumpAmountSeconds', [amount])
+      } else {
+        const minutes = Math.floor(amount / 60)
+        formattedTime = this.$getString('LabelJumpAmountMinutes', [minutes])
       }
-      if (seconds > 0) {
+
-        formattedTime += ` ${seconds} seconds`
+      return `${prefix} - ${formattedTime}`
-      }
-      formattedTime = formattedTime.trim()
-      formattedTime = formattedTime.length > 0 ? `${prefix} - ${formattedTime}` : ''
-      return formattedTime
     }
   },
   mounted() {}

client/components/player/PlayerUi.vue

@@ -37,8 +37,8 @@
         </ui-tooltip>
 
         <ui-tooltip direction="top" :text="$strings.LabelViewPlayerSettings">
-          <button :aria-label="$strings.LabelViewPlaerkSettings" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerSettings')">
+          <button :aria-label="$strings.LabelViewPlayerSettings" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerSettings')">
-            <span class="material-symbols text-2.5xl sm:text-3xl">settings_slow_motion</span>
+            <span class="material-symbols text-2xl sm:text-2.5xl">settings_slow_motion</span>
           </button>
         </ui-tooltip>
       </div>

client/strings/en-us.json

@@ -154,6 +154,7 @@
   "HeaderOtherFiles": "Other Files",
   "HeaderPasswordAuthentication": "Password Authentication",
   "HeaderPermissions": "Permissions",
+  "HeaderPlayerSettings": "Player Settings",
   "HeaderPlayerQueue": "Player Queue",
   "HeaderPlaylist": "Playlist",
   "HeaderPlaylistItems": "Playlist Items",
@@ -343,6 +344,8 @@
   "LabelIntervalEveryHour": "Every hour",
   "LabelInvert": "Invert",
   "LabelItem": "Item",
+  "LabelJumpAmountMinutes": "{0} minutes",
+  "LabelJumpAmountSeconds": "{0} seconds",
   "LabelJumpBackwardAmount": "Jump backward amount",
   "LabelJumpForwardAmount": "Jump forward amount",
   "LabelLanguage": "Language",