Update:More localization strings #1103

client/pages/config/users/_id/index.vue

@@ -6,7 +6,7 @@
           <div class="h-10 w-10 flex items-center justify-center">
             <span class="material-icons text-2xl">arrow_back</span>
           </div>
-          <p class="pl-1">All Users</p>
+          <p class="pl-1">{{ $strings.LabelAllUsers }}</p>
         </div>
       </nuxt-link>
       <div class="flex items-center mb-2 mt-4 px-2 sm:px-0">
@@ -22,22 +22,22 @@
       </div>
       <div class="w-full h-px bg-white bg-opacity-10 my-2" />
       <div class="py-2">
-        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Listening Stats</h1>
+        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">{{ $strings.HeaderListeningStats }}</h1>
         <div class="flex items-center">
-          <p class="text-sm text-gray-300">{{ listeningSessions.length }} Listening Sessions</p>
-          <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs mx-2" :padding-x="1.5" :padding-y="1">View All</ui-btn>
+          <p class="text-sm text-gray-300">{{ listeningSessions.length }} {{ $strings.HeaderListeningSessions }}</p>
+          <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs mx-2" :padding-x="1.5" :padding-y="1">{{ $strings.ButtonViewAll }}</ui-btn>
         </div>
         <p class="text-sm text-gray-300">
-          Total Time Listened:&nbsp;
+          {{ $strings.LabelTotalTimeListened }}:&nbsp;
           <span class="font-mono text-base">{{ listeningTimePretty }}</span>
         </p>
         <p v-if="timeListenedToday" class="text-sm text-gray-300">
-          Time Listened Today:&nbsp;
+          {{ $strings.LabelTimeListenedToday }}:&nbsp;
           <span class="font-mono text-base">{{ $elapsedPrettyExtended(timeListenedToday) }}</span>
         </p>
 
         <div v-if="latestSession" class="mt-4">
-          <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Last Listening Session</h1>
+          <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">{{ $strings.HeaderLastListeningSession }}</h1>
           <p class="text-sm text-gray-300">
             <strong>{{ latestSession.displayTitle }}</strong> {{ $dateDistanceFromNow(latestSession.updatedAt) }} for <span class="font-mono text-base">{{ $elapsedPrettyExtended(this.latestSession.timeListening) }}</span>
           </p>
@@ -45,21 +45,21 @@
       </div>
       <div class="w-full h-px bg-white bg-opacity-10 my-2" />
       <div class="py-2">
-        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Saved Media Progress</h1>
+        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">{{ $strings.HeaderSavedMediaProgress }}</h1>
 
         <div v-if="mediaProgressWithoutMedia.length" class="flex items-center py-2 mb-2">
           <p class="text-error">User has media progress for {{ mediaProgressWithoutMedia.length }} items that no longer exist.</p>
           <div class="flex-grow" />
-          <ui-btn small :loading="purgingMediaProgress" @click.stop="purgeMediaProgress">Purge Media Progress</ui-btn>
+          <ui-btn small :loading="purgingMediaProgress" @click.stop="purgeMediaProgress">{{ $strings.ButtonPurgeMediaProgress }}</ui-btn>
         </div>
 
         <table v-if="mediaProgressWithMedia.length" class="userAudiobooksTable">
           <tr class="bg-primary bg-opacity-40">
-            <th class="w-16 text-left">Item</th>
+            <th class="w-16 text-left">{{ $strings.LabelItem }}</th>
             <th class="text-left"></th>
-            <th class="w-32">Progress</th>
-            <th class="w-40 hidden sm:table-cell">Started At</th>
-            <th class="w-40 hidden sm:table-cell">Last Update</th>
+            <th class="w-32">{{ $strings.LabelProgress }}</th>
+            <th class="w-40 hidden sm:table-cell">{{ $strings.LabelStartedAt }}</th>
+            <th class="w-40 hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
           </tr>
           <tr v-for="item in mediaProgressWithMedia" :key="item.id" :class="!item.isFinished ? '' : 'isFinished'">
             <td>
@@ -90,7 +90,7 @@
             </td>
           </tr>
         </table>
-        <p v-else class="text-white text-opacity-50">Nothing listened to yet...</p>
+        <p v-else class="text-white text-opacity-50">{{ $strings.MessageNoMediaProgress }}</p>
       </div>
     </div>
   </div>

client/pages/config/users/_id/sessions.vue

@@ -6,7 +6,7 @@
           <div class="h-10 w-10 flex items-center justify-center">
             <span class="material-icons text-2xl">arrow_back</span>
           </div>
-          <p class="pl-1">Back to User</p>
+          <p class="pl-1">{{ $strings.LabelBackToUser }}</p>
         </div>
       </nuxt-link>
       <div class="flex items-center mb-2 mt-4 px-2 sm:px-0">
@@ -17,16 +17,16 @@
       <div class="w-full h-px bg-white bg-opacity-10 my-2" />
 
       <div class="py-2">
-        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Listening Sessions</h1>
+        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">{{ $strings.HeaderListeningSessions }}</h1>
         <div v-if="listeningSessions.length">
           <table class="userSessionsTable">
             <tr class="bg-primary bg-opacity-40">
-              <th class="w-48 min-w-48 text-left">Item</th>
-              <th class="w-32 min-w-32 text-left hidden md:table-cell">Play Method</th>
-              <th class="w-32 min-w-32 text-left hidden sm:table-cell">Device Info</th>
-              <th class="w-32 min-w-32">Listened</th>
-              <th class="w-16 min-w-16">Last Time</th>
-              <th class="flex-grow hidden sm:table-cell">Last Update</th>
+              <th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th>
+              <th class="w-32 min-w-32 text-left hidden md:table-cell">{{ $strings.LabelPlayMethod }}</th>
+              <th class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
+              <th class="w-32 min-w-32">{{ $strings.LabelTimeListened }}</th>
+              <th class="w-16 min-w-16">{{ $strings.LabelLastTime }}</th>
+              <th class="flex-grow hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
             </tr>
             <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
               <td class="py-1 max-w-48">
@@ -121,7 +121,7 @@ export default {
       }
 
       const payload = {
-        message: `Start playback for "${session.displayTitle}" at ${this.$secondsToTimestamp(session.currentTime)}?`,
+        message: this.$getString('MessageStartPlaybackAtTime', [session.displayTitle, this.$secondsToTimestamp(session.currentTime)]),
         callback: (confirmed) => {
           if (confirmed) {
             this.$eventBus.$emit('play-item', {