Add:Language code setting and translations #448

pages/localMedia/folders/_id.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="w-full h-full py-6 px-4">
     <div class="flex items-center mb-2">
-      <p class="text-base font-semibold">Folder: {{ folderName }}</p>
+      <p class="text-base font-semibold">{{ $strings.LabelFolder }}: {{ folderName }}</p>
       <div class="flex-grow" />
 
       <span v-if="dialogItems.length" class="material-icons" @click="showDialog = true">more_vert</span>
     </div>
 
-    <p class="text-sm mb-4 text-white text-opacity-60">Media Type: {{ mediaType }}</p>
+    <p class="text-sm mb-4 text-white text-opacity-60">{{ $strings.LabelMediaType }}: {{ mediaType }}</p>
 
-    <p class="mb-2 text-base text-white">Local Library Items ({{ localLibraryItems.length }})</p>
+    <p class="mb-2 text-base text-white">{{ $strings.HeaderLocalLibraryItems }} ({{ localLibraryItems.length }})</p>
 
     <div class="w-full media-item-container overflow-y-auto">
       <template v-for="localLibraryItem in localLibraryItems">
@@ -65,7 +65,7 @@ export default {
       if (this.isInternalStorage) return []
       const items = []
       items.push({
-        text: 'Remove',
+        text: this.$strings.ButtonRemove,
         value: 'remove'
       })
       return items
@@ -77,14 +77,14 @@ export default {
       if (localLibraryItem.mediaType == 'book') {
         const txts = []
         if (localLibraryItem.media.ebookFile) {
-          txts.push(`${localLibraryItem.media.ebookFile.ebookFormat} EBook`)
+          txts.push(`${localLibraryItem.media.ebookFile.ebookFormat} ${this.$strings.LabelEbook}`)
         }
         if (localLibraryItem.media.tracks?.length) {
-          txts.push(`${localLibraryItem.media.tracks.length} Tracks`)
+          txts.push(`${localLibraryItem.media.tracks.length} ${this.$strings.LabelTracks}`)
         }
         return txts.join(' • ')
       } else {
-        return `${localLibraryItem.media.episodes?.length || 0} Episodes`
+        return `${localLibraryItem.media.episodes?.length || 0} ${this.$strings.HeaderEpisodes}`
       }
     },
     dialogAction(action) {

pages/localMedia/folders/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full py-6">
-    <h1 class="text-base font-semibold px-2 mb-2">Local Folders</h1>
+    <h1 class="text-base font-semibold px-2 mb-2">{{ $strings.HeaderLocalFolders }}</h1>
 
     <div v-if="!isIos" class="w-full max-w-full px-2 py-2">
       <template v-for="folder in localFolders">
@@ -13,19 +13,19 @@
         </nuxt-link>
       </template>
       <div v-if="!localFolders.length" class="flex justify-center">
-        <p class="text-center">No Media Folders</p>
+        <p class="text-center">{{ $strings.MessageNoMediaFolders }}</p>
       </div>
       <div v-if="!isAndroid10OrBelow || overrideFolderRestriction" class="flex border-t border-white border-opacity-10 my-4 py-4">
         <div class="flex-grow pr-1">
           <ui-dropdown v-model="newFolderMediaType" placeholder="Select media type" :items="mediaTypeItems" />
         </div>
-        <ui-btn small class="w-28" color="success" @click="selectFolder">New Folder</ui-btn>
+        <ui-btn small class="w-28" color="success" @click="selectFolder">{{ $strings.ButtonNewFolder }}</ui-btn>
       </div>
       <div v-else class="flex border-t border-white border-opacity-10 my-4 py-4">
         <div class="flex-grow pr-1">
-          <p class="text-sm">Android 10 and below will use internal app storage for downloads.</p>
+          <p class="text-sm">{{ $strings.MessageAndroid10Downloads }}</p>
         </div>
-        <ui-btn small class="w-28" color="primary" @click="overrideFolderRestriction = true">Override</ui-btn>
+        <ui-btn small class="w-28" color="primary" @click="overrideFolderRestriction = true">{{ $strings.ButtonOverride }}</ui-btn>
       </div>
     </div>
   </div>
@@ -43,11 +43,11 @@ export default {
       mediaTypeItems: [
         {
           value: 'book',
-          text: 'Books'
+          text: this.$strings.LabelBooks
         },
         {
           value: 'podcast',
-          text: 'Podcasts'
+          text: this.$strings.LabelPodcasts
         }
       ],
       syncing: false,

pages/localMedia/item/_id.vue

@@ -11,7 +11,7 @@
         <span class="material-icons" @click="showItemDialog">more_vert</span>
       </div>
 
-      <p v-if="!isIos" class="px-2 text-sm mb-0.5 text-white text-opacity-75">Folder: {{ folderName }}</p>
+      <p v-if="!isIos" class="px-2 text-sm mb-0.5 text-white text-opacity-75">{{ $strings.LabelFolder }}: {{ folderName }}</p>
 
       <p class="px-2 mb-4 text-xs text-gray-400">{{ libraryItemId ? 'Linked to item on server ' + liServerAddress : 'Not linked to server item' }}</p>
 
@@ -107,7 +107,7 @@
 
     <div v-if="orderChanged" class="fixed left-0 w-full py-4 px-4 bg-bg box-shadow-book flex items-center" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <div class="flex-grow" />
-      <ui-btn small color="success" @click="saveTrackOrder">Save Order</ui-btn>
+      <ui-btn small color="success" @click="saveTrackOrder">{{ $strings.ButtonSaveOrder }}</ui-btn>
     </div>
 
     <modals-dialog v-model="showDialog" :items="dialogItems" @action="dialogAction" />
@@ -220,14 +220,14 @@ export default {
       if (this.selectedAudioTrack || this.selectedEpisode) {
         return [
           {
-            text: 'Delete local file',
+            text: this.$strings.ButtonDeleteLocalFile,
             value: 'track-delete'
           }
         ]
       } else {
         return [
           {
-            text: 'Delete local item',
+            text: this.$strings.ButtonDeleteLocalItem,
             value: 'delete'
           }
         ]
@@ -259,7 +259,7 @@ export default {
         this.localLibraryItem = response
         this.audioTracksCopy = this.audioTracks.map((at) => ({ ...at }))
       } else {
-        this.$toast.info(`No updates necessary`)
+        this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
       }
       this.orderChanged = false
     },