From bf1fc5e84d004e16f084643ba12ea87769d081d9 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Fri, 14 Jan 2022 02:54:27 +0000
Subject: [PATCH] Translation component improvements.

---
 src/App.vue                      |  2 +-
 src/components/SearchResults.vue | 12 ++++++------
 src/components/WatchVideo.vue    |  9 +++++----
 src/locales/en.json              |  6 +++---
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index dc3314c2..77d0bddb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -112,7 +112,7 @@ b {
 }
 
 .video-grid {
-    @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 col-auto <md:gap-x-2.5 md:gap-x-1vw gap-y-1.5 mx-3;
+    @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 col-auto <md:gap-x-2.5 md:gap-x-1vw gap-y-1.5;
 }
 
 .btn {
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index cfecba67..3528a9f9 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -16,12 +16,12 @@
 
     <hr />
 
-    <div v-if="results && results.corrected" style="height: 7vh">
-        <span v-text="$t('search.did_you_mean')" />
-
-        <router-link :to="{ name: 'SearchResults', query: { search_query: results.suggestion } }">
-            <em v-text="results.suggestion" />
-        </router-link>
+    <div v-if="results && results.corrected">
+        <i18n-t keypath="search.did_you_mean" tag="div" class="text-lg">
+            <router-link :to="{ name: 'SearchResults', query: { search_query: results.suggestion } }">
+                <em v-text="results.suggestion" />
+            </router-link>
+        </i18n-t>
     </div>
 
     <div v-if="results" class="video-grid">
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index af7536ce..4a231514 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -24,7 +24,7 @@
             <div class="font-bold mt-2 text-2xl break-words" v-text="video.title" />
 
             <div class="flex mb-1.5">
-                <span v-text="`${addCommas(video.views)} views`" />
+                <span v-t="{ path: 'video.views', args: { views: addCommas(video.views) } }" />
                 <span class="ml-2" v-text="uploadDate" />
 
                 <div class="flex items-center relative ml-auto children:ml-2">
@@ -44,11 +44,12 @@
                         </div>
                     </template>
                     <a :href="`https://youtu.be/${getVideoId()}`" class="btn">
-                        <strong v-text="$t('player.watch_on')" />
-                        <font-awesome-icon class="ml-1.5" :icon="['fab', 'youtube']" />
+                        <i18n-t keypath="player.watch_on" tag="strong">
+                            <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
+                        </i18n-t>
                     </a>
                     <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
-                        <strong v-text="`${$t('player.watch_on')} LBRY`" />
+                        <i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t>
                     </a>
                     <router-link
                         :to="toggleListenUrl"
diff --git a/src/locales/en.json b/src/locales/en.json
index dce3615e..7988a868 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -9,7 +9,7 @@
         "subscriptions": "Subscriptions"
     },
     "player": {
-        "watch_on": "Watch on"
+        "watch_on": "Watch on {0}"
     },
     "actions": {
         "subscribe": "Subscribe",
@@ -87,13 +87,13 @@
     },
     "video": {
         "videos": "Videos",
-        "views": "views",
+        "views": "{views} views",
         "watched": "Watched",
         "sponsor_segments": "Sponsors Segments",
         "ratings_disabled": "Ratings Disabled",
         "chapters": "Chapters"
     },
     "search": {
-        "did_you_mean": "Did you mean: "
+        "did_you_mean": "Did you mean: {0}?"
     }
 }