Add:Start of localization i18n #1103

client/pages/account.vue

@@ -1,35 +1,35 @@
 <template>
   <div id="page-wrapper" class="page p-6 overflow-y-auto relative" :class="streamLibraryItem ? 'streaming' : ''">
     <div class="w-full max-w-xl mx-auto">
-      <h1 class="text-2xl">Account</h1>
+      <h1 class="text-2xl">{{ $strings.HeaderAccount }}</h1>
 
       <div class="my-4">
         <div class="flex -mx-2">
           <div class="w-2/3 px-2">
-            <ui-text-input-with-label disabled :value="username" label="Username" />
+            <ui-text-input-with-label disabled :value="username" :label="$strings.LabelUsername" />
           </div>
           <div class="w-1/3 px-2">
-            <ui-text-input-with-label disabled :value="usertype" label="Account Type" />
+            <ui-text-input-with-label disabled :value="usertype" :label="$strings.LabelAccountType" />
           </div>
         </div>
 
         <div class="w-full h-px bg-primary my-4" />
 
-        <p v-if="!isGuest" class="mb-4 text-lg">Change Password</p>
+        <p v-if="!isGuest" class="mb-4 text-lg">{{ $strings.HeaderChangePassword }}</p>
         <form v-if="!isGuest" @submit.prevent="submitChangePassword">
-          <ui-text-input-with-label v-model="password" :disabled="changingPassword" type="password" label="Password" class="my-2" />
-          <ui-text-input-with-label v-model="newPassword" :disabled="changingPassword" type="password" label="New Password" class="my-2" />
-          <ui-text-input-with-label v-model="confirmPassword" :disabled="changingPassword" type="password" label="Confirm Password" class="my-2" />
+          <ui-text-input-with-label v-model="password" :disabled="changingPassword" type="password" :label="$strings.LabelPassword" class="my-2" />
+          <ui-text-input-with-label v-model="newPassword" :disabled="changingPassword" type="password" :label="$strings.LabelNewPassword" class="my-2" />
+          <ui-text-input-with-label v-model="confirmPassword" :disabled="changingPassword" type="password" :label="$strings.LabelConfirmPassword" class="my-2" />
           <div class="flex items-center py-2">
-            <p v-if="isRoot" class="text-error py-2 text-xs">* Root user is the only user that can have an empty password</p>
+            <p v-if="isRoot" class="text-error py-2 text-xs">* {{ $strings.NoteChangeRootPassword }}</p>
             <div class="flex-grow" />
-            <ui-btn v-show="(password && newPassword && confirmPassword) || isRoot" type="submit" :loading="changingPassword" color="success">Submit</ui-btn>
+            <ui-btn v-show="(password && newPassword && confirmPassword) || isRoot" type="submit" :loading="changingPassword" color="success">{{ $strings.ButtonChangePasswordSubmit }}</ui-btn>
           </div>
         </form>
       </div>
 
       <div class="py-4 mt-8 flex">
-        <ui-btn color="primary flex items-center text-lg" @click="logout"><span class="material-icons mr-4 icon-text">logout</span>Logout</ui-btn>
+        <ui-btn color="primary flex items-center text-lg" @click="logout"><span class="material-icons mr-4 icon-text">logout</span>{{ $strings.ButtonLogout }}</ui-btn>
       </div>
     </div>
   </div>

client/pages/config/index.vue

@@ -2,19 +2,19 @@
   <div>
     <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-2">
       <div class="mb-2">
-        <h1 class="text-xl">Settings</h1>
+        <h1 class="text-xl">{{ $strings.HeaderSettings }}</h1>
       </div>
 
       <div class="lg:flex">
         <div class="flex-1">
           <div class="pt-4">
-            <h2 class="font-semibold">General</h2>
+            <h2 class="font-semibold">{{ $strings.HeaderSettingsGeneral }}</h2>
           </div>
           <div class="flex items-end py-2">
             <ui-toggle-switch v-model="newServerSettings.storeCoverWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeCoverWithItem', val)" />
-            <ui-tooltip :text="tooltips.storeCoverWithItem">
+            <ui-tooltip :text="$strings.LabelSettingsStoreCoversWithItemHelp">
               <p class="pl-4">
-                Store covers with item
+                {{ $strings.LabelSettingsStoreCoversWithItem }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
@@ -22,9 +22,9 @@
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.storeMetadataWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeMetadataWithItem', val)" />
-            <ui-tooltip :text="tooltips.storeMetadataWithItem">
+            <ui-tooltip :text="$strings.LabelSettingsStoreMetadataWithItemHelp">
               <p class="pl-4">
-                Store metadata with item
+                {{ $strings.LabelSettingsStoreMetadataWithItem }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
@@ -32,31 +32,31 @@
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.sortingIgnorePrefix" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('sortingIgnorePrefix', val)" />
-            <ui-tooltip :text="tooltips.sortingIgnorePrefix">
+            <ui-tooltip :text="$strings.LabelSettingsSortingIgnorePrefixesHelp">
               <p class="pl-4">
-                Ignore prefixes when sorting
+                {{ $strings.LabelSettingsSortingIgnorePrefixes }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
           <div v-if="newServerSettings.sortingIgnorePrefix" class="w-72 ml-14 mb-2">
-            <ui-multi-select v-model="newServerSettings.sortingPrefixes" small :items="newServerSettings.sortingPrefixes" label="Prefixes to Ignore (case insensitive)" @input="updateSortingPrefixes" :disabled="updatingServerSettings" />
+            <ui-multi-select v-model="newServerSettings.sortingPrefixes" small :items="newServerSettings.sortingPrefixes" :label="$strings.LabelPrefixesToIgnore" @input="updateSortingPrefixes" :disabled="updatingServerSettings" />
           </div>
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.chromecastEnabled" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('chromecastEnabled', val)" />
-            <p class="pl-4">Chromecast support</p>
+            <p class="pl-4">{{ $strings.LabelSettingsChromecastSupport }}</p>
           </div>
 
           <div class="pt-4">
-            <h2 class="font-semibold">Display</h2>
+            <h2 class="font-semibold">{{ $strings.HeaderSettingsDisplay }}</h2>
           </div>
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="homepageUseBookshelfView" :disabled="updatingServerSettings" @input="updateHomeUseBookshelfView" />
-            <ui-tooltip :text="tooltips.bookshelfView">
+            <ui-tooltip :text="$strings.LabelSettingsBookshelfViewHelp">
               <p class="pl-4">
-                Home page use bookshelf view
+                {{ $strings.LabelSettingsHomePageBookshelfView }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
@@ -64,30 +64,30 @@
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="useBookshelfView" :disabled="updatingServerSettings" @input="updateUseBookshelfView" />
-            <ui-tooltip :text="tooltips.bookshelfView">
+            <ui-tooltip :text="$strings.LabelSettingsBookshelfViewHelp">
               <p class="pl-4">
-                Library use bookshelf view
+                {{ $strings.LabelSettingsLibraryBookshelfView }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
 
           <div class="flex items-center py-2">
-            <p class="pr-4">Date Format</p>
+            <p class="pr-4">{{ $strings.LabelSettingsDateFormat }}</p>
             <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-40" @input="(val) => updateSettingsKey('dateFormat', val)" />
           </div>
         </div>
 
         <div class="flex-1">
           <div class="pt-4">
-            <h2 class="font-semibold">Scanner</h2>
+            <h2 class="font-semibold">{{ $strings.HeaderSettingsScanner }}</h2>
           </div>
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.scannerParseSubtitle" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerParseSubtitle', val)" />
-            <ui-tooltip :text="tooltips.scannerParseSubtitle">
+            <ui-tooltip :text="$strings.LabelSettingsParseSubtitlesHelp">
               <p class="pl-4">
-                Parse subtitles
+                {{ $strings.LabelSettingsParseSubtitles }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
@@ -95,9 +95,9 @@
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.scannerFindCovers" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerFindCovers', val)" />
-            <ui-tooltip :text="tooltips.scannerFindCovers">
+            <ui-tooltip :text="$strings.LabelSettingsFindCoversHelp">
               <p class="pl-4">
-                Find covers
+                {{ $strings.LabelSettingsFindCovers }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
@@ -168,14 +168,14 @@
           </div> -->
 
           <div class="pt-4">
-            <h2 class="font-semibold">Experimental Features</h2>
+            <h2 class="font-semibold">{{ $strings.HeaderSettingsExperimental }}</h2>
           </div>
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="showExperimentalFeatures" />
             <ui-tooltip :text="tooltips.experimentalFeatures">
               <p class="pl-4">
-                Experimental Features
+                Experimental features
                 <a href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank">
                   <span class="material-icons icon-text text-sm">info_outlined</span>
                 </a>
@@ -210,14 +210,14 @@
 
     <div class="flex items-center py-4">
       <div class="flex-grow" />
-      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeCache">Purge All Cache</ui-btn>
-      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeItemsCache">Purge Items Cache</ui-btn>
-      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isResettingLibraryItems" @click="resetLibraryItems">Remove All Library Items</ui-btn>
+      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeCache">{{ $strings.ButtonPurgeAllCache }}</ui-btn>
+      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeItemsCache">{{ $strings.ButtonPurgeItemsCache }}</ui-btn>
+      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isResettingLibraryItems" @click="resetLibraryItems">{{ $strings.ButtonRemoveAllLibraryItems }}</ui-btn>
     </div>
     <div class="flex items-center py-4">
       <div class="flex-grow" />
       <p class="pr-2 text-sm font-book text-yellow-400">
-        Report bugs, request features, and contribute on
+        {{ $strings.MessageReportBugsAndContribute }}
         <a class="underline" href="https://github.com/advplyr/audiobookshelf" target="_blank">github</a>
       </p>
       <a href="https://github.com/advplyr/audiobookshelf" target="_blank" class="text-white hover:text-gray-200 hover:scale-150 hover:rotate-6 transform duration-500">
@@ -282,12 +282,6 @@ export default {
         scannerPreferOpfMetadata: 'OPF file metadata will be used for book details over folder names',
         scannerPreferMatchedMetadata: 'Matched data will overide book details when using Quick Match',
         scannerPreferAudioMetadata: 'Audio file ID3 meta tags will be used for book details over folder names',
-        scannerParseSubtitle: 'Extract subtitles from audiobook folder names.<br>Subtitle must be seperated by " - "<br>i.e. "Book Title - A Subtitle Here" has the subtitle "A Subtitle Here"',
-        sortingIgnorePrefix: 'i.e. for prefix "the" book title "The Book Title" would sort as "Book Title, The"',
-        scannerFindCovers: 'If your audiobook does not have an embedded cover or a cover image inside the folder, the scanner will attempt to find a cover.<br>Note: This will extend scan time',
-        bookshelfView: 'Skeumorphic design with wooden shelves',
-        storeCoverWithItem: 'By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named "cover" will be kept',
-        storeMetadataWithItem: 'By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension',
         enableEReader: 'E-reader is still a work in progress, but use this setting to open it up to all your users (or use the "Experimental Features" toggle just for use by you)',
         scannerPreferOverdriveMediaMarker: 'MP3 files from Overdrive come with chapter timings embedded as custom metadata. Enabling this will use these tags for chapter timings automatically',
         scannerUseSingleThreadedProber: 'The old scanner used a single thread. Leaving it in to use as a comparison for now.',