Implement i18n and change design around a little bit

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')
   }

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', () => {

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)

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)
 }
 

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?"

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",

src/translations/de.json

@@ -34,9 +34,6 @@
         "unsubscribe": "Deabonnieren",
         "subscribe": "Abonnieren"
     },
-    "player": {
-        "watch_on": "Ansehen auf"
-    },
     "titles": {
         "history": "Verlauf",
         "preferences": "Einstellungen",

src/translations/el.json

@@ -41,8 +41,5 @@
         "register": "Εγγραφή",
         "login": "Σύνδεση",
         "trending": "Τάσεις"
-    },
-    "player": {
-        "watch_on": "Παρακολούθηση σε"
     }
 }

src/translations/en.json

@@ -7,9 +7,6 @@
         "preferences": "Preferences",
         "history": "History"
     },
-    "player": {
-        "watch_on": "Watch on"
-    },
     "actions": {
         "subscribe": "Subscribe",
         "unsubscribe": "Unsubscribe",

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"
     }
 }

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",

src/translations/ml.json

@@ -37,8 +37,5 @@
         "channel_name_asc": "ചാനലിന്റെ പേര് (A-Z)",
         "most_recent": "ഏറ്റവും പുതിയത്",
         "sort_by": "ഇങ്ങനെ അടുക്കുക:"
-    },
-    "player": {
-        "watch_on": "ൽ കാണുക"
     }
 }

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",

src/translations/tr.json

@@ -34,9 +34,6 @@
         "unsubscribe": "Abonelikten çık",
         "subscribe": "Abone ol"
     },
-    "player": {
-        "watch_on": "İzle"
-    },
     "titles": {
         "history": "Geçmiş",
         "preferences": "Tercihler",