Update:More localization strings #1103

client/components/modals/libraries/EditLibrary.vue

@@ -3,21 +3,21 @@
     <div v-if="!showDirectoryPicker" class="w-full h-full py-4">
       <div class="flex flex-wrap md:flex-nowrap -mx-1">
         <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">
-          <ui-dropdown v-model="mediaType" :items="mediaTypes" label="Media Type" :disabled="!isNew" small @input="changedMediaType" />
+          <ui-dropdown v-model="mediaType" :items="mediaTypes" :label="$strings.LabelMediaType" :disabled="!isNew" small @input="changedMediaType" />
         </div>
         <div class="w-full md:flex-grow px-1 py-1 md:py-0">
-          <ui-text-input-with-label v-model="name" label="Library Name" @blur="nameBlurred" />
+          <ui-text-input-with-label v-model="name" :label="$strings.LabelLibraryName" @blur="nameBlurred" />
         </div>
         <div class="w-1/5 md:w-18 px-1 py-1 md:py-0">
-          <ui-media-icon-picker v-model="icon" @input="iconChanged" />
+          <ui-media-icon-picker v-model="icon" :label="$strings.LabelIcon" @input="iconChanged" />
         </div>
         <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">
-          <ui-dropdown v-model="provider" :items="providers" label="Metadata Provider" small @input="formUpdated" />
+          <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelMetadataProvider" small @input="formUpdated" />
         </div>
       </div>
 
       <div class="w-full py-4">
-        <p class="px-1 text-sm font-semibold">Folders</p>
+        <p class="px-1 text-sm font-semibold">{{ $strings.LabelFolders }}</p>
         <div v-for="(folder, index) in folders" :key="index" class="w-full flex items-center py-1 px-2">
           <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <ui-editable-text v-model="folder.fullPath" readonly type="text" class="w-full" />
@@ -25,10 +25,10 @@
         </div>
         <div class="flex py-1 px-2 items-center w-full">
           <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
-          <ui-editable-text v-model="newFolderPath" placeholder="New folder path" type="text" class="w-full" @blur="newFolderInputBlurred" />
+          <ui-editable-text v-model="newFolderPath" :placeholder="$strings.PlaceholderNewFolderPath" type="text" class="w-full" @blur="newFolderInputBlurred" />
         </div>
 
-        <ui-btn class="w-full mt-2" color="primary" @click="browseForFolder">Browse for Folder</ui-btn>
+        <ui-btn class="w-full mt-2" color="primary" @click="browseForFolder">{{ $strings.ButtonBrowseForFolder }}</ui-btn>
       </div>
     </div>
     <modals-libraries-folder-chooser v-else :paths="folderPaths" @back="showDirectoryPicker = false" @select="selectFolder" />

client/components/modals/libraries/EditModal.vue

@@ -36,23 +36,6 @@ export default {
     return {
       processing: false,
       selectedTab: 'details',
-      tabs: [
-        {
-          id: 'details',
-          title: 'Details',
-          component: 'modals-libraries-edit-library'
-        },
-        {
-          id: 'settings',
-          title: 'Settings',
-          component: 'modals-libraries-library-settings'
-        },
-        {
-          id: 'schedule',
-          title: 'Schedule',
-          component: 'modals-libraries-schedule-scan'
-        }
-      ],
       libraryCopy: null
     }
   },
@@ -66,10 +49,29 @@ export default {
       }
     },
     title() {
-      return this.library ? 'Update Library' : 'New Library'
+      return this.library ? this.$strings.HeaderUpdateLibrary : this.$strings.HeaderNewLibrary
     },
     buttonText() {
-      return this.library ? 'Update Library' : 'Create New Library'
+      return this.library ? this.$strings.ButtonSave : this.$strings.ButtonCreate
+    },
+    tabs() {
+      return [
+        {
+          id: 'details',
+          title: this.$strings.HeaderDetails,
+          component: 'modals-libraries-edit-library'
+        },
+        {
+          id: 'settings',
+          title: this.$strings.HeaderSettings,
+          component: 'modals-libraries-library-settings'
+        },
+        {
+          id: 'schedule',
+          title: this.$strings.HeaderSchedule,
+          component: 'modals-libraries-schedule-scan'
+        }
+      ]
     },
     tabName() {
       var _tab = this.tabs.find((t) => t.id === this.selectedTab)

client/components/modals/libraries/FolderChooser.vue

@@ -2,7 +2,7 @@
   <div class="w-full h-full bg-bg absolute top-0 left-0 px-4 py-4 z-10">
     <div class="flex items-center py-1 mb-2">
       <span class="material-icons text-3xl cursor-pointer hover:text-gray-300" @click="$emit('back')">arrow_back</span>
-      <p class="px-4 text-xl">Choose a Folder</p>
+      <p class="px-4 text-xl">{{ $strings.HeaderChooseAFolder }}</p>
     </div>
     <div v-if="allFolders.length" class="w-full bg-primary bg-opacity-70 py-1 px-4 mb-2">
       <p class="font-mono truncate">{{ selectedPath || '\\' }}</p>
@@ -27,16 +27,16 @@
       </div>
     </div>
     <div v-else-if="loadingFolders" class="py-12 text-center">
-      <p>Loading folders...</p>
+      <p>{{ $strings.MessageLoadingFolders }}</p>
     </div>
     <div v-else class="py-12 text-center max-w-sm mx-auto">
-      <p class="text-lg mb-2">No Folders Available</p>
-      <p class="text-gray-300 mb-2">Note: folders already mapped will not be shown</p>
-      <p v-if="isDebian" class="text-red-400">Note: Folder picker for the debian install is not fully implemented. You should enter the path to your library directly.</p>
+      <p class="text-lg mb-2">{{ $strings.MessageNoFoldersAvailable }}</p>
+      <p class="text-gray-300 mb-2">{{ $strings.NoteFolderPicker }}</p>
+      <p v-if="isDebian" class="text-red-400">{{ $strings.NoteFolderPickerDebian }}</p>
     </div>
 
     <div class="w-full py-2">
-      <ui-btn :disabled="!selectedPath" color="primary" class="w-full mt-2" @click="selectFolder">Select Folder Path</ui-btn>
+      <ui-btn :disabled="!selectedPath" color="primary" class="w-full mt-2" @click="selectFolder">{{ $strings.ButtonSelectFolderPath }}</ui-btn>
     </div>
   </div>
 </template>

client/components/modals/libraries/LibrarySettings.vue

@@ -2,9 +2,9 @@
   <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
     <div class="flex items-center py-2">
       <ui-toggle-switch v-model="useSquareBookCovers" @input="formUpdated" />
-      <ui-tooltip :text="tooltips.coverAspectRatio">
+      <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
         <p class="pl-4 text-base">
-          Use square book covers
+          {{ $strings.LabelSettingsSquareBookCovers }}
           <span class="material-icons icon-text text-sm">info_outlined</span>
         </p>
       </ui-tooltip>
@@ -13,20 +13,20 @@
       <div class="flex items-center">
         <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="disableWatcher" @input="formUpdated" />
         <ui-toggle-switch v-else disabled :value="false" />
-        <p class="pl-4 text-base">Disable folder watcher for library</p>
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsDisableWatcherForLibrary }}</p>
       </div>
-      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*Watcher is disabled globally in server settings</p>
+      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
     </div>
     <div v-if="mediaType == 'book'" class="py-3">
       <div class="flex items-center">
         <ui-toggle-switch v-model="skipMatchingMediaWithAsin" @input="formUpdated" />
-        <p class="pl-4 text-base">Skip matching books that already have an ASIN</p>
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
       </div>
     </div>
     <div v-if="mediaType == 'book'" class="py-3">
       <div class="flex items-center">
         <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" @input="formUpdated" />
-        <p class="pl-4 text-base">Skip matching books that already have an ISBN</p>
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
       </div>
     </div>
   </div>
@@ -47,10 +47,7 @@ export default {
       useSquareBookCovers: false,
       disableWatcher: false,
       skipMatchingMediaWithAsin: false,
-      skipMatchingMediaWithIsbn: false,
-      tooltips: {
-        coverAspectRatio: 'Prefer to use square covers over standard 1.6:1 book covers'
-      }
+      skipMatchingMediaWithIsbn: false
     }
   },
   computed: {

client/components/modals/libraries/ScheduleScan.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
     <div class="flex items-center justify-between mb-4">
-      <p class="text-base md:text-xl font-semibold">Schedule Automatic Library Scans</p>
-      <ui-checkbox v-model="enableAutoScan" @input="toggleEnableAutoScan" label="Enable" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" />
+      <p class="text-base md:text-xl font-semibold">{{ $strings.HeaderScheduleLibraryScans }}</p>
+      <ui-checkbox v-model="enableAutoScan" @input="toggleEnableAutoScan" :label="$strings.LabelEnable" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" />
     </div>
     <widgets-cron-expression-builder ref="cronExpressionBuilder" v-if="enableAutoScan" v-model="cronExpression" @input="updatedCron" />
   </div>