* Make sort option text translatable

PikachuEXE · Oct 21, 2023 · dbcd9fd · dbcd9fd
1 parent bf09e46
commit dbcd9fd
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 27 deletions.
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
@@ -21,16 +21,6 @@ const SORT_BY_VALUES = {
   LatestUpdatedFirst: 'latest_updated_first',
   EarliestUpdatedFirst: 'earliest_updated_first',
 }
-const SORT_BY_NAMES = {
-  NameAscending: 'A-Z',
-  NameDescending: 'Z-A',
-
-  LatestCreatedFirst: 'Recently Created',
-  EarliestCreatedFirst: 'Earliest Created',
-
-  LatestUpdatedFirst: 'Recently Updated',
-  EarliestUpdatedFirst: 'Earliest Updated',
-}
 
 export default Vue.extend({
   name: 'FtPlaylistAddVideoPrompt',
@@ -139,7 +129,25 @@ export default Vue.extend({
     },
 
     sortBySelectNames() {
-      return Object.keys(SORT_BY_VALUES).map(k => SORT_BY_NAMES[k])
+      return Object.values(SORT_BY_VALUES).map((k) => {
+        switch (k) {
+          case SORT_BY_VALUES.NameAscending:
+            return this.$t('User Playlists.Sort By.NameAscending')
+          case SORT_BY_VALUES.NameDescending:
+            return this.$t('User Playlists.Sort By.NameDescending')
+          case SORT_BY_VALUES.LatestCreatedFirst:
+            return this.$t('User Playlists.Sort By.LatestCreatedFirst')
+          case SORT_BY_VALUES.EarliestCreatedFirst:
+            return this.$t('User Playlists.Sort By.EarliestCreatedFirst')
+          case SORT_BY_VALUES.LatestUpdatedFirst:
+            return this.$t('User Playlists.Sort By.LatestUpdatedFirst')
+          case SORT_BY_VALUES.EarliestUpdatedFirst:
+            return this.$t('User Playlists.Sort By.EarliestUpdatedFirst')
+          default:
+            console.error(`Unknown sortBy: ${k}`)
+            return k
+        }
+      })
     },
     sortBySelectValues() {
       return Object.values(SORT_BY_VALUES)

diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
@@ -28,7 +28,7 @@
       :value="sortBy"
       :select-names="sortBySelectNames"
       :select-values="sortBySelectValues"
-      :placeholder="'Sort By'"
+      :placeholder="$t('User Playlists.Sort By.Sort By')"
       @change="sortBy = $event"
     />
     <div class="playlists-container">

diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.js b/src/renderer/views/UserPlaylists/UserPlaylists.js
@@ -24,19 +24,6 @@ const SORT_BY_VALUES = {
   LatestPlayedFirst: 'latest_played_first',
   EarliestPlayedFirst: 'earliest_played_first',
 }
-const SORT_BY_NAMES = {
-  NameAscending: 'A-Z',
-  NameDescending: 'Z-A',
-
-  LatestCreatedFirst: 'Recently Created',
-  EarliestCreatedFirst: 'Earliest Created',
-
-  LatestUpdatedFirst: 'Recently Updated',
-  EarliestUpdatedFirst: 'Earliest Updated',
-
-  LatestPlayedFirst: 'Recently Played',
-  EarliestPlayedFirst: 'Earliest Played',
-}
 
 export default defineComponent({
   name: 'UserPlaylists',
@@ -149,7 +136,29 @@ export default defineComponent({
     },
 
     sortBySelectNames() {
-      return Object.keys(SORT_BY_VALUES).map(k => SORT_BY_NAMES[k])
+      return Object.values(SORT_BY_VALUES).map((k) => {
+        switch (k) {
+          case SORT_BY_VALUES.NameAscending:
+            return this.$t('User Playlists.Sort By.NameAscending')
+          case SORT_BY_VALUES.NameDescending:
+            return this.$t('User Playlists.Sort By.NameDescending')
+          case SORT_BY_VALUES.LatestCreatedFirst:
+            return this.$t('User Playlists.Sort By.LatestCreatedFirst')
+          case SORT_BY_VALUES.EarliestCreatedFirst:
+            return this.$t('User Playlists.Sort By.EarliestCreatedFirst')
+          case SORT_BY_VALUES.LatestUpdatedFirst:
+            return this.$t('User Playlists.Sort By.LatestUpdatedFirst')
+          case SORT_BY_VALUES.EarliestUpdatedFirst:
+            return this.$t('User Playlists.Sort By.EarliestUpdatedFirst')
+          case SORT_BY_VALUES.LatestPlayedFirst:
+            return this.$t('User Playlists.Sort By.LatestPlayedFirst')
+          case SORT_BY_VALUES.EarliestPlayedFirst:
+            return this.$t('User Playlists.Sort By.EarliestPlayedFirst')
+          default:
+            console.error(`Unknown sortBy: ${k}`)
+            return k
+        }
+      })
     },
     sortBySelectValues() {
       return Object.values(SORT_BY_VALUES)

diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue
@@ -34,7 +34,7 @@
           :value="sortBy"
           :select-names="sortBySelectNames"
           :select-values="sortBySelectValues"
-          :placeholder="'Sort By'"
+          :placeholder="$t('User Playlists.Sort By.Sort By')"
           @change="sortBy = $event"
         />
       </div>

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -162,6 +162,21 @@ User Playlists:
   Delete Playlist: Delete Playlist
   Are you sure you want to delete this playlist? This cannot be undone.: Are you sure you want to delete this playlist? This cannot be undone.
 
+  Sort By:
+    Sort By: Sort By
+
+    NameAscending: 'A-Z'
+    NameDescending: 'Z-A'
+
+    LatestCreatedFirst: 'Recently Created'
+    EarliestCreatedFirst: 'Earliest Created'
+
+    LatestUpdatedFirst: 'Recently Updated'
+    EarliestUpdatedFirst: 'Earliest Updated'
+
+    LatestPlayedFirst: 'Recently Played'
+    EarliestPlayedFirst: 'Earliest Played'
+
   AddVideoPrompt:
     Select a playlist to add your N videos to: 'Select a playlist to add your video to | Select a playlist to add your {videoCount} videos to'
     N playlists selected: '{playlistCount} Selected'