From 474e442d5a3d0a7a1bae592366a5cfaa2c38f32d Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Sat, 28 Aug 2021 05:09:55 +0530
Subject: [PATCH] Implement i18n and change design around a little bit

---
 src/App.vue                   | 60 +++++++++++++++++++++++++----------
 src/components/Player.vue     |  5 ++-
 src/main.js                   | 12 +++++--
 src/plugins/i18n.js           |  7 ++--
 src/routes/SearchMenu.vue     |  1 +
 src/translations/bn-latn.json |  3 --
 src/translations/de.json      |  3 --
 src/translations/el.json      |  3 --
 src/translations/en.json      |  3 --
 src/translations/fr.json      |  3 --
 src/translations/lt.json      |  3 --
 src/translations/ml.json      |  3 --
 src/translations/nb_NO.json   |  3 --
 src/translations/tr.json      |  3 --
 14 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d55b622..9e6146c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,24 +4,37 @@
       app
       color="primary"
       dark
-      flat
     >
-      <v-container class="py-0 fill-height">
-        <v-btn
-          v-for="link in links"
-          :key="link.id"
-          text
-          link
-          :to="link.to"
-        >
-          {{ link.name }}
-        </v-btn>
-
-        <v-spacer></v-spacer>
-
-        <v-responsive max-width="720">
-          <SearchMenu />
-        </v-responsive>
+      <!-- Someone help me fix this horrid design -->
+      <v-container class="py-2 fill-height">
+        <v-row>
+          <v-col md="1"
+                 v-for="link in links"
+                 :key="link.id"
+          >
+            <v-btn
+              text
+              link
+              min-width="100%"
+              :to="link.to"
+            >
+              {{ link.name }}
+            </v-btn>
+          </v-col>
+          <v-col md="1" offset="3">
+            <v-select
+              dense
+              :items="languageOptions"
+              label="Language"
+              :value="$i18n.locale"
+              @input="changeLocale($event)"
+              outlined
+            />
+          </v-col>
+          <v-col md="5">
+            <SearchMenu />
+          </v-col>
+        </v-row>
       </v-container>
     </v-app-bar>
 
@@ -33,6 +46,7 @@
 
 <script>
 import SearchMenu from '@/routes/SearchMenu'
+import { changeLocale } from '@/plugins/i18n'
 
 export default {
   name: 'App',
@@ -62,8 +76,20 @@ export default {
         name: 'Watch History',
         to: '/watch-history'
       }
+    ],
+    languageOptions: [
+      {
+        text: 'English',
+        value: 'en'
+      }
     ]
   }),
+
+  methods: {
+    changeLocale (lang) {
+      return changeLocale(lang.value)
+    }
+  },
   created () {
     this.$store.dispatch('loadState')
   }
diff --git a/src/components/Player.vue b/src/components/Player.vue
index cffd213..a9bc610 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -146,7 +146,10 @@ export default {
         })
 
         videoEl.addEventListener('volumechange', () => {
-          this.setPreference('volume', videoEl.volume)
+          this.$store.commit('setPrefs', {
+            id: 'volume',
+            value: videoEl.volume
+          })
         })
 
         videoEl.addEventListener('ended', () => {
diff --git a/src/main.js b/src/main.js
index 93afec9..895a194 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,20 @@
 import Vue from 'vue'
 import App from './App.vue'
-import vuetify from './plugins/vuetify'
-import store from './store'
-import router from './router'
+
+import '@/styles/main.scss'
+
+import { i18n } from '@/plugins/i18n'
+import vuetify from '@/plugins/vuetify'
+import store from '@/store'
+import router from '@/router'
+
 import './registerServiceWorker'
 
 Vue.config.productionTip = false
 
 new Vue({
   vuetify,
+  i18n,
   store,
   router,
   render: h => h(App)
diff --git a/src/plugins/i18n.js b/src/plugins/i18n.js
index 142565d..9b3a0f1 100644
--- a/src/plugins/i18n.js
+++ b/src/plugins/i18n.js
@@ -9,8 +9,9 @@ const messages = {
   en: ENTranslations
 }
 
-export const i18n = VueI18n.createI18n({
+export const i18n = new VueI18n({
   locale: 'en', // set default locale
+  fallbackLocale: 'en',
   messages
 })
 
@@ -51,7 +52,7 @@ export async function loadLocale (locale) {
   const messages = await import(/* webpackChunkName: "locale-[request]" */ `@/translations/${locale}.json`)
 
   // set locale and locale message
-  i18n.global.setLocaleMessage(locale, messages.default)
+  i18n.setLocaleMessage(locale, messages.default)
 
   return Vue.nextTick()
 }
@@ -59,7 +60,7 @@ export async function loadLocale (locale) {
 export async function changeLocale (lang) {
   await loadLocale(lang)
   await syncStylesPerLanguage(lang)
-  i18n.locale.value = lang
+  i18n.locale = lang
   window.localStorage.setItem('LOCALE', lang)
 }
 
diff --git a/src/routes/SearchMenu.vue b/src/routes/SearchMenu.vue
index c4becc1..be6f313 100644
--- a/src/routes/SearchMenu.vue
+++ b/src/routes/SearchMenu.vue
@@ -7,6 +7,7 @@
     cache-items
     class="mx-4"
     flat
+    dense
     hide-no-data
     hide-details
     label="What are you looking for?"
diff --git a/src/translations/bn-latn.json b/src/translations/bn-latn.json
index bf279f0..e2ce743 100644
--- a/src/translations/bn-latn.json
+++ b/src/translations/bn-latn.json
@@ -7,9 +7,6 @@
         "preferences": "Āpanāra pachanda anuyāẏī māniẏē nin",
         "watchHistory": "Ēkhana paryanta ki dēkhēchēn"
     },
-    "player": {
-        "watchOnYT": "YouTube ē dēkhun"
-    },
     "actions": {
         "subscribe": "Subscribe",
         "unsubscribe": "Unsubscribe",
diff --git a/src/translations/de.json b/src/translations/de.json
index 8afc435..5f7bc0d 100644
--- a/src/translations/de.json
+++ b/src/translations/de.json
@@ -34,9 +34,6 @@
         "unsubscribe": "Deabonnieren",
         "subscribe": "Abonnieren"
     },
-    "player": {
-        "watch_on": "Ansehen auf"
-    },
     "titles": {
         "history": "Verlauf",
         "preferences": "Einstellungen",
diff --git a/src/translations/el.json b/src/translations/el.json
index 7368384..a00b334 100644
--- a/src/translations/el.json
+++ b/src/translations/el.json
@@ -41,8 +41,5 @@
         "register": "Εγγραφή",
         "login": "Σύνδεση",
         "trending": "Τάσεις"
-    },
-    "player": {
-        "watch_on": "Παρακολούθηση σε"
     }
 }
diff --git a/src/translations/en.json b/src/translations/en.json
index 79c9c85..a58e63d 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -7,9 +7,6 @@
         "preferences": "Preferences",
         "history": "History"
     },
-    "player": {
-        "watch_on": "Watch on"
-    },
     "actions": {
         "subscribe": "Subscribe",
         "unsubscribe": "Unsubscribe",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index f0f1d5d..b024e31 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -41,8 +41,5 @@
         "channel_name_asc": "Nom de la chaîne (A-Z)",
         "least_recent": "Le moins récent",
         "most_recent": "Le plus récent"
-    },
-    "player": {
-        "watch_on": "Regarder sur"
     }
 }
diff --git a/src/translations/lt.json b/src/translations/lt.json
index c48830c..69feadb 100644
--- a/src/translations/lt.json
+++ b/src/translations/lt.json
@@ -34,9 +34,6 @@
         "sort_by": "Rikiuoti pagal:",
         "view_subscriptions": "Peržiūrėti prenumeratas"
     },
-    "player": {
-        "watch_on": "Žiūrėti per"
-    },
     "titles": {
         "preferences": "Nuostatos",
         "feed": "Sklaidos kanalas",
diff --git a/src/translations/ml.json b/src/translations/ml.json
index f00ef36..0bfdc99 100644
--- a/src/translations/ml.json
+++ b/src/translations/ml.json
@@ -37,8 +37,5 @@
         "channel_name_asc": "ചാനലിന്റെ പേര് (A-Z)",
         "most_recent": "ഏറ്റവും പുതിയത്",
         "sort_by": "ഇങ്ങനെ അടുക്കുക:"
-    },
-    "player": {
-        "watch_on": "ൽ കാണുക"
     }
 }
diff --git a/src/translations/nb_NO.json b/src/translations/nb_NO.json
index d821c8c..58a9d76 100644
--- a/src/translations/nb_NO.json
+++ b/src/translations/nb_NO.json
@@ -34,9 +34,6 @@
         "unsubscribe": "Opphev abonnement",
         "subscribe": "Abonner"
     },
-    "player": {
-        "watch_on": "Vis på"
-    },
     "titles": {
         "feed": "Strøm",
         "history": "HIstorikk",
diff --git a/src/translations/tr.json b/src/translations/tr.json
index 821756a..a3f2777 100644
--- a/src/translations/tr.json
+++ b/src/translations/tr.json
@@ -34,9 +34,6 @@
         "unsubscribe": "Abonelikten çık",
         "subscribe": "Abone ol"
     },
-    "player": {
-        "watch_on": "İzle"
-    },
     "titles": {
         "history": "Geçmiş",
         "preferences": "Tercihler",