From da66691145697c7985c4114841456ff68467c717 Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Sun, 29 Aug 2021 04:35:39 +0530
Subject: [PATCH] Internationalization

Closes #3

Squashed commit of the following:

commit 86ffbbc5601f0856e10a01943ff17dfffcc438e9
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 22:23:47 2021 +0530

    Trim counts.views

commit b779b95bfd372a7e733249f02bb310f69aace1d7
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 11:02:11 2021 +0530

    Update translations

commit bd7f4d3098c58333bd57e841fa1cd3a20071f95d
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 08:18:34 2021 +0530

    Minor translation fix

commit 0e1b52488e7bf11e78b91a1a99d8dcb953761d45
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 08:10:24 2021 +0530

    i18n searchbar

commit a72917a2aa021888c3a8426f28448d03f5b4c13d
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 08:07:19 2021 +0530

    Enable Bengali in Bengali Script

commit be2bb6aa3decea24f553beae07b774f2feabd97e
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 07:57:47 2021 +0530

    Improve Bengali (Bengali script) translations

commit 3367e55bb29d13a6f5ee16b8b240e552a9847fbb
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 07:11:32 2021 +0530

    Mark Bengali translations as incomplete

commit 4487c90c0ab9369eb8a761a74ddbd1abc0a7af26
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 07:11:03 2021 +0530

    Translate history

commit 70404a15a2e63e071f1b2b498c52e71ee6ff905a
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 07:05:08 2021 +0530

    Translate preferences and move prefs to its own keys

commit 753fd408311d6735c6ab7df4eae69062467e4d30
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 06:49:50 2021 +0530

    Cleanup deadcode

commit 4cc0d7679c66055ff44d750e7d0e56f447e1d358
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 06:42:24 2021 +0530

    A few more translations

commit e60833db736c7f46ea6f1fd02ec2cbcdd3fe2bbd
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 06:28:46 2021 +0530

    Translate and use the count system for counts.videos

commit 7f119adacf5a20cd16f7257d19e8fe246ed64ec9
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 06:23:17 2021 +0530

    Eliminate deadcode

commit f9d075225cc5be8122111c17386e56158ad4eb43
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 06:20:01 2021 +0530

    Entirely eliminate offsets

commit 846a0b476e34d6e009e591b62796dabd35262617
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 06:18:59 2021 +0530

    Fixup a few things and use fontsource instead of Google Fonts

commit 722369df15cb79df96b899f5cc0e9f66347228e5
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 05:27:13 2021 +0530

    Fix translation and allow for widely disparate size requirements

commit 474e442d5a3d0a7a1bae592366a5cfaa2c38f32d
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 05:09:55 2021 +0530

    Implement i18n and change design around a little bit

commit 2c46f3af6c781d4fc59c91ef47b58348dc3ff5a3
Author: root <root@git.maharshi.ninja>
Date:   Sat Aug 28 04:39:12 2021 +0530

    Implement i18n with a WIP Bengali Latin translation
---
 package.json                          |  7 ++-
 public/index.html                     |  1 -
 src/App.vue                           | 87 +++++++++++++++++++--------
 src/components/GenericDisplayItem.vue |  2 +-
 src/components/Player.vue             |  5 +-
 src/components/VideoItem.vue          |  2 +-
 src/main.js                           | 13 +++-
 src/plugins/i18n.js                   | 74 +++++++++++++++++++++++
 src/routes/Channel.vue                |  2 +-
 src/routes/Playlist.vue               | 44 +-------------
 src/routes/Preferences.vue            | 84 +++-----------------------
 src/routes/SearchMenu.vue             |  3 +-
 src/routes/SearchResults.vue          |  2 +-
 src/routes/TrendingPage.vue           |  8 ++-
 src/routes/WatchHistory.vue           |  6 ++
 src/routes/WatchVideo.vue             |  9 +--
 src/styles/main.scss                  | 22 +++++++
 src/translations/bn_beng.json         | 55 +++++++++++++++++
 src/translations/bn_latn.json         | 46 ++++++++++++++
 src/translations/de.json              | 47 +++++++++++++++
 src/translations/el.json              | 47 +++++++++++++++
 src/translations/en.json              | 57 ++++++++++++++++++
 src/translations/fr.json              | 47 +++++++++++++++
 src/translations/lt.json              | 47 +++++++++++++++
 src/translations/ml.json              | 43 +++++++++++++
 src/translations/nb_NO.json           | 47 +++++++++++++++
 src/translations/tr.json              | 47 +++++++++++++++
 src/translations/zh_Hant.json         | 25 ++++++++
 yarn.lock                             | 48 +++++++++------
 29 files changed, 749 insertions(+), 178 deletions(-)
 create mode 100644 src/plugins/i18n.js
 create mode 100644 src/styles/main.scss
 create mode 100644 src/translations/bn_beng.json
 create mode 100644 src/translations/bn_latn.json
 create mode 100644 src/translations/de.json
 create mode 100644 src/translations/el.json
 create mode 100644 src/translations/en.json
 create mode 100644 src/translations/fr.json
 create mode 100644 src/translations/lt.json
 create mode 100644 src/translations/ml.json
 create mode 100644 src/translations/nb_NO.json
 create mode 100644 src/translations/tr.json
 create mode 100644 src/translations/zh_Hant.json

diff --git a/package.json b/package.json
index 80a2d32..01db144 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@babel/eslint-parser": "^7.15.0",
+    "@fontsource/baloo-da-2": "^4.5.0",
+    "@fontsource/roboto": "^4.5.0",
     "core-js": "^3.16.1",
     "dompurify": "^2.3.1",
     "hotkeys-js": "^3.8.7",
@@ -19,6 +22,7 @@
     "sass-loader": "^10",
     "shaka-player": "^3.2.0",
     "vue": "^2.6.14",
+    "vue-i18n": "^8.25.0",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.5.2",
     "vuetify": "^2.5.8",
@@ -33,7 +37,6 @@
     "@vue/cli-plugin-vuex": "~4.5.13",
     "@vue/cli-service": "~4.5.13",
     "@vue/eslint-config-standard": "^6.1.0",
-    "babel-eslint": "^10.1.0",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-node": "^11.1.0",
@@ -57,7 +60,7 @@
       "@vue/standard"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     },
     "rules": {}
   },
diff --git a/public/index.html b/public/index.html
index 5ebacfd..73ceb8d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
   </head>
   <body>
diff --git a/src/App.vue b/src/App.vue
index d55b622..2d4e7ff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,24 +4,36 @@
       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="6">
+            <v-btn
+              text
+              link
+              v-for="link in links"
+              :key="link.id"
+              :to="link.to"
+              class="mr-1"
+            >
+              {{ $t(link.name) }}
+            </v-btn>
+          </v-col>
+          <v-col md="1">
+            <v-select
+              dense
+              :items="languageOptions"
+              label="Language"
+              :value="$i18n.locale"
+              @input="changeLocale"
+              outlined
+            />
+          </v-col>
+          <v-col md="5">
+            <SearchMenu />
+          </v-col>
+        </v-row>
       </v-container>
     </v-app-bar>
 
@@ -33,37 +45,62 @@
 
 <script>
 import SearchMenu from '@/routes/SearchMenu'
+import { changeLocale } from '@/plugins/i18n'
 
 export default {
   name: 'App',
   components: {
     SearchMenu
   },
-  metaInfo: {
-    title: 'Homepage',
-    // all titles will be injected into this template
-    titleTemplate: '%s - Piped'
+  metaInfo () {
+    return {
+      title: this.$t('titles.homepage'),
+      // all titles will be injected into this template
+      titleTemplate: '%s - Piped'
+    }
   },
 
   data: () => ({
     links: [
       {
         id: 'prefs',
-        name: 'Preferences',
+        name: 'titles.preferences',
         to: '/preferences'
       },
       {
         id: 'trending',
-        name: 'Trending',
+        name: 'titles.trending',
         to: '/'
       },
       {
         id: 'watch-history',
-        name: 'Watch History',
+        name: 'titles.history',
         to: '/watch-history'
       }
-    ]
+    ],
+    languageOptions: [
+      { value: 'zh_Hant', text: 'Chinese (Traditional)' },
+      { value: 'en', text: 'English' },
+      { value: 'fr', text: 'French' },
+      { value: 'de', text: 'German' },
+      { value: 'el', text: 'Greek' },
+      { value: 'lt', text: 'Lithuanian' },
+      { value: 'ml', text: 'Malayalam' },
+      { value: 'nb_NO', text: 'Norwegian Bokmål' },
+      { value: 'tr', text: 'Turkish' },
+      { value: 'bn_beng', text: 'Bengali (বাংলা)' }
+      // Incomplete, DO NOT USE
+      /* { value: 'bn_latn', text: 'Bengali (Latin)' }, */
+    ].sort((a, b) => {
+      return a.text.localeCompare(b.text)
+    })
   }),
+
+  methods: {
+    changeLocale (lang) {
+      return changeLocale(lang)
+    }
+  },
   created () {
     this.$store.dispatch('loadState')
   }
diff --git a/src/components/GenericDisplayItem.vue b/src/components/GenericDisplayItem.vue
index 442c40d..6b25629 100644
--- a/src/components/GenericDisplayItem.vue
+++ b/src/components/GenericDisplayItem.vue
@@ -13,7 +13,7 @@
           <h5 @click="navigate" @keypress.enter="navigate" role="link">{{ item.uploaderName }}</h5>
         </router-link>
         <span v-else-if="item.uploaderName">{{ item.uploaderName }}<br /></span>
-        <span v-if="isNumber(item.videos)">{{ item.videos }} Videos<br /></span>
+        <span v-if="isNumber(item.videos)">{{ $tc('counts.videos', item.videos ) }}</span>
       </v-card-text>
     </v-card>
 </template>
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/components/VideoItem.vue b/src/components/VideoItem.vue
index 955a0b4..21910b2 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -13,7 +13,7 @@
           <h5 @click="navigate" @keypress.enter="navigate" role="link">{{ video.uploaderName || video.uploader }}</h5>
         </router-link>
         <slot />
-        {{ numberFormat(video.views) }} views <br />
+        {{ $tc('counts.views', video.views, { n: numberFormat(video.views) }) }}<br />
         {{ video.uploadedDate }} <br />
         {{ timeFormat(video.duration) }}
       </v-card-text>
diff --git a/src/main.js b/src/main.js
index 93afec9..913a416 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,21 @@
 import Vue from 'vue'
 import App from './App.vue'
-import vuetify from './plugins/vuetify'
-import store from './store'
-import router from './router'
+
+import '@fontsource/roboto/latin.css'
+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
new file mode 100644
index 0000000..36c786c
--- /dev/null
+++ b/src/plugins/i18n.js
@@ -0,0 +1,74 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+import ENTranslations from '@/translations/en.json'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: ENTranslations
+}
+
+export const i18n = new VueI18n({
+  locale: 'en', // set default locale
+  fallbackLocale: 'en',
+  messages
+})
+
+async function syncStylesPerLanguage (locale) {
+  switch (locale) {
+    // All the latin languages
+    case 'de':
+    case 'en':
+    case 'el':
+    case 'fr':
+    case 'lt':
+    case 'ml':
+    case 'tr':
+    case 'bn_latn':
+      // Don't need to import fonts because Latin fonts are always loaded
+      document.body.classList.remove(...document.body.classList)
+      document.body.classList.add('latin')
+      break
+    // Bengali script
+    case 'bn_beng':
+      await import('@fontsource/baloo-da-2/bengali.css')
+      document.body.classList.remove(...document.body.classList)
+      document.body.classList.add('bengali')
+      break
+    // Chinese languages
+    case 'zh_Hant':
+      // NOTE: if you are Chinese and want to see a different font, just email me
+      document.body.classList.remove(...document.body.classList)
+      document.body.classList.add('chinese')
+  }
+}
+
+export async function loadLocale (locale) {
+  if (i18n.availableLocales.includes(locale)) {
+    return
+  }
+  // load locale messages with dynamic import
+  const messages = await import(/* webpackChunkName: "locale-[request]" */ `@/translations/${locale}.json`)
+
+  // set locale and locale message
+  i18n.setLocaleMessage(locale, messages.default)
+
+  return Vue.nextTick()
+}
+
+export async function changeLocale (lang) {
+  await loadLocale(lang)
+  await syncStylesPerLanguage(lang)
+  i18n.locale = lang
+  window.localStorage.setItem('LOCALE', lang)
+}
+
+function initializeLocalLocale () {
+  const lang = window.localStorage.getItem('LOCALE')
+  if (lang != null) {
+    changeLocale(lang).catch(e => console.error(e))
+  }
+}
+
+initializeLocalLocale()
diff --git a/src/routes/Channel.vue b/src/routes/Channel.vue
index ea8848a..9c8ba6a 100644
--- a/src/routes/Channel.vue
+++ b/src/routes/Channel.vue
@@ -25,7 +25,7 @@
             <VideoItem :height="270" :width="480" :video="video" />
           </v-col>
         </v-row>
-        <v-progress-linear indeterminate v-intersect="onRelatedStreamsEndIntersect" />
+        <v-progress-linear v-if="channel.nextpage != null" indeterminate v-intersect="onRelatedStreamsEndIntersect" />
       </div>
     </v-container>
 </template>
diff --git a/src/routes/Playlist.vue b/src/routes/Playlist.vue
index fbbd720..75d688c 100644
--- a/src/routes/Playlist.vue
+++ b/src/routes/Playlist.vue
@@ -6,7 +6,7 @@
         <v-col md="8" offset-md="2">
           <v-card>
             <v-img v-if="playlist.avatarUrl" :src="playlist.avatarUrl" />
-            <v-card-title class="display-1">
+            <v-card-title class="text-h4">
               {{ playlist.name }}
             </v-card-title>
             <v-card-text>
@@ -21,18 +21,9 @@
                   <div class="text-h5 ml-4">
                     {{ playlist.uploader }}
                   </div>
-                  <div class="ml-4">
-                    <v-btn
-                      v-if="$store.state.isAuthenticated"
-                      @click="subscribeHandler"
-                      color="primary"
-                    >
-                      {{ subscribed ? "Unsubscribe" : "Subscribe" }}
-                    </v-btn>
-                  </div>
                 </div>
               </router-link>
-              <h5 class="text-h5 ml-16">{{ playlist.videos }} Videos</h5>
+              <h5 class="text-h5 ml-16">{{ $tc('counts.videos', playlist.videos) }}</h5>
             </v-card-text>
             <v-card-actions>
               <v-btn icon x-large link :href="getRssUrl"><v-icon x-large>mdi-rss-box</v-icon></v-btn>
@@ -47,37 +38,6 @@
         </v-col>
       </v-row>
     </v-container>
-    <div v-else-if="playlist" v-show="!playlist.error">
-        <h1 class="uk-text-center">
-            <img v-bind:src="playlist.avatarUrl" height="48" width="48" loading="lazy" />
-            {{ playlist.name }}
-        </h1>
-
-        <b
-            ><router-link class="uk-text-justify" v-bind:to="playlist.uploaderUrl || '/'">
-                <img v-bind:src="playlist.uploaderAvatar" loading="lazy" />
-                {{ playlist.uploader }}</router-link
-            ></b
-        >
-
-        <div class="uk-align-right">
-            <b>{{ playlist.videos }} Videos</b>
-            <br />
-            <a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
-        </div>
-
-        <hr />
-
-        <div class="uk-grid-xl" uk-grid="parallax: 0">
-            <div
-                class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
-                v-bind:key="video.url"
-                v-for="video in this.playlist.relatedStreams"
-            >
-                <VideoItem :video="video" height="94" width="168" />
-            </div>
-        </div>
-    </div>
 </template>
 
 <script>
diff --git a/src/routes/Preferences.vue b/src/routes/Preferences.vue
index 47f3a3a..1237c51 100644
--- a/src/routes/Preferences.vue
+++ b/src/routes/Preferences.vue
@@ -1,77 +1,14 @@
 <template>
   <v-container fluid>
-    <h1 class="display-1 text-center">Preferences</h1>
+    <h1 class="text-h4 text-center">{{ $t('titles.preferences') }}</h1>
     <v-divider class="ma-4" />
     <div style="display: flex;" v-for="(opt, optId) in options" :key="optId">
       <v-simple-checkbox v-if="opt.type === 'bool'" :value="$store.getters.getPreferenceBoolean(opt.id, opt.default)" @input="setValue(opt.id, $event)" />
-      <v-select v-else-if="opt.type === 'select'" :label="opt.label" :value="$store.getters.getPreferenceString(opt.id, opt.default)" @input="setValue(opt.id, $event)" :items="opt.options" />
-      <p v-if="opt.type === 'bool'">{{ opt.label }}</p><br />
+      <v-select v-else-if="opt.type === 'select'" :label="$t('preferences.' + opt.id)" :value="$store.getters.getPreferenceString(opt.id, opt.default)" @input="setValue(opt.id, $event)" :items="opt.options" />
+      <p v-if="opt.type === 'bool'">{{ $t('preferences.' + opt.id) }}</p><br />
     </div>
-    <h5 class="text-h5">Instances</h5>
+    <h5 class="text-h5">{{ $t('actions.instances_list') }}</h5>
     <v-data-table :headers="tableHeaders" :items="instances" />
-    <!-- <br />
-    <b>Audio Only</b>
-    <br />
-    <input class="uk-checkbox" v-model="listen" @change="onChange($event)" type="checkbox" />
-    <br />
-    <b>Default Quality</b>
-    <br />
-    <select class="uk-select uk-width-auto" v-model="defaultQuality" @change="onChange($event)">
-      <option value="0">Auto</option>
-      <option :key="resolution" v-for="resolution in resolutions" :value="resolution">{{ resolution }}p</option>
-    </select>
-    <br />
-    <b>Buffering Goal</b>
-    <br />
-    <input class="uk-input uk-width-auto" v-model="bufferingGoal" @change="onChange($event)" type="text" />
-    <br />
-    <b>Country Selection</b>
-    <br />
-    <select class="uk-select uk-width-auto" v-model="country" @change="onChange($event)">
-      <option :key="country.code" v-for="country in countryMap" :value="country.code">{{ country.name }}</option>
-    </select>
-    <br />
-    <b>Default Homepage</b>
-    <br />
-    <select class="uk-select uk-width-auto" v-model="defaultHomepage" @change="onChange($event)">
-      <option value="trending">Trending</option>
-      <option value="feed">Feed</option>
-    </select>
-    <br />
-    <b>Show Comments</b>
-    <br />
-    <input class="uk-checkbox" v-model="showComments" @change="onChange($event)" type="checkbox" />
-    <h2>Instances List</h2>
-    <table class="uk-table">
-      <thead>
-      <tr>
-        <th>Instance Name</th>
-        <th>Instance Locations</th>
-        <th>Has CDN?</th>
-        <th>SSL Score</th>
-      </tr>
-      </thead>
-      <tbody v-bind:key="instance.name" v-for="instance in instances">
-      <tr>
-        <td>{{ instance.name }}</td>
-        <td>{{ instance.locations }}</td>
-        <td>{{ instance.cdn }}</td>
-        <td>
-          <a :href="sslScore(instance.apiurl)" target="_blank">Click Here</a>
-        </td>
-      </tr>
-      </tbody>
-    </table>
-
-    <hr />
-
-    <b>Instance Selection:</b>
-    <br />
-    <select class="uk-select uk-width-auto" v-model="selectedInstance" @change="onChange($event)">
-      <option v-bind:key="instance.name" v-for="instance in instances" v-bind:value="instance.apiurl">
-        {{ instance.name }}
-      </option>
-    </select> -->
   </v-container>
 </template>
 
@@ -88,19 +25,16 @@ export default {
         {
           id: 'playerAutoplay',
           type: 'bool',
-          default: true,
-          label: 'Autoplay Video'
+          default: true
         },
         {
           id: 'listen',
           type: 'bool',
-          default: false,
-          label: 'Audio Only'
+          default: false
         },
         {
           id: 'quality',
           type: 'select',
-          label: 'Default resolution',
           default: 0,
           options: [
             {
@@ -162,8 +96,10 @@ export default {
       ]
     }
   },
-  metaInfo: {
-    title: 'Preferences'
+  metaInfo () {
+    return {
+      title: this.$t('titles.preferences')
+    }
   },
 
   mounted () {
diff --git a/src/routes/SearchMenu.vue b/src/routes/SearchMenu.vue
index c4becc1..c879b2b 100644
--- a/src/routes/SearchMenu.vue
+++ b/src/routes/SearchMenu.vue
@@ -7,9 +7,10 @@
     cache-items
     class="mx-4"
     flat
+    dense
     hide-no-data
     hide-details
-    label="What are you looking for?"
+    :label="$t('misc.searchBarLabel')"
     solo-inverted
   ></v-autocomplete>
 </template>
diff --git a/src/routes/SearchResults.vue b/src/routes/SearchResults.vue
index bb74c84..cbbb106 100644
--- a/src/routes/SearchResults.vue
+++ b/src/routes/SearchResults.vue
@@ -18,7 +18,7 @@
           <GenericDisplayItem :height="270" :width="480" :item="video" v-else />
         </v-col>
       </v-row>
-      <v-progress-linear indeterminate v-intersect="onSearchResultsEndIntersect" />
+      <v-progress-linear indeterminate v-intersect="onSearchResultsEndIntersect" v-if="results.nextpage != null" />
     </div>
   </v-container>
 </template>
diff --git a/src/routes/TrendingPage.vue b/src/routes/TrendingPage.vue
index d628579..04978da 100644
--- a/src/routes/TrendingPage.vue
+++ b/src/routes/TrendingPage.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container fluid>
-    <h3 class="display-1 justify-center">Trending</h3>
+    <h3 class="text-h4 justify-center">{{ $t('titles.trending') }}</h3>
 
     <v-divider class="my-4" />
 
@@ -24,8 +24,10 @@ export default {
     }
   },
 
-  metaInfo: {
-    title: 'Trending'
+  metaInfo () {
+    return {
+      title: this.$t('titles.trending')
+    }
   },
 
   mounted () {
diff --git a/src/routes/WatchHistory.vue b/src/routes/WatchHistory.vue
index 8ab9ee2..32e5302 100644
--- a/src/routes/WatchHistory.vue
+++ b/src/routes/WatchHistory.vue
@@ -53,6 +53,12 @@ export default {
     ]
   }),
 
+  metaInfo () {
+    return {
+      title: this.$t('titles.history')
+    }
+  },
+
   methods: {
     async loadData () {
       this.data = (await getWatchedVideos()).map(doc => {
diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue
index 0c16c63..f925c8c 100644
--- a/src/routes/WatchVideo.vue
+++ b/src/routes/WatchVideo.vue
@@ -16,7 +16,7 @@
           <v-card-subtitle class="subtitle-1">
             <v-row>
               <v-col md="4" align-self="start">
-                {{ addCommas(video.views) }} views
+                {{ $tc('counts.views', video.views, { n: addCommas(video.views) }) }}
                 •
                 {{ video.uploadDate }}
               </v-col>
@@ -66,6 +66,7 @@
               Sponsors Segments: {{ sponsors.segments.length }}
             </div>
             <div>
+              <!-- TODO translate -->
               <v-checkbox dense :value="this.$store.getters.getPreferenceBoolean('autoplay')" @change="onAutoplayChg" label="Autoplay next video" />
               <v-checkbox dense v-model="selectedAutoLoop" label="Loop this video" />
             </div>
@@ -76,12 +77,12 @@
 
     <v-row>
       <v-col md="8" offset-md="1" v-if="comments && comments.comments">
-        <h5 class="display-1 text-center my-4">Comments</h5>
+        <h5 class="text-h4 text-center my-4">Comments</h5>
         <VideoComment v-for="comment in comments.comments" :key="comment.commentId" :comment="comment" :video="video" class="my-4" />
-        <v-progress-linear indeterminate v-intersect="onCommentsProgressIntersect" v-if="comments.comments.length !== 0" />
+        <v-progress-linear indeterminate v-intersect="onCommentsProgressIntersect" v-if="comments.comments.length !== 0 && comments.nextpage != null" />
       </v-col>
       <v-col md="2" v-if="video && video.relatedStreams">
-        <h5 class="display-1 text-center my-4">Related Videos</h5>
+        <h5 class="text-h4 text-center my-4">Related Videos</h5>
         <VideoItem class="my-4" v-for="related in video.relatedStreams" :video="related" :key="related.url" />
       </v-col>
     </v-row>
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..313c1e8
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,22 @@
+@mixin addFonts ($font-primary) {
+  .v-application {
+    [class*='text-'],[class*='body-'] {
+      color: #36405a;
+      font-family: $font-primary, sans-serif !important;
+    }
+    .headline, .title {
+      font-family: $font-primary, sans-serif !important;
+    }
+
+    font-family: $font-primary, sans-serif !important;
+  }
+}
+
+.bengali {
+  @include addFonts('Baloo Da 2');
+}
+/*
+.latin {
+  @include addFonts('Some Font');
+}
+*/
diff --git a/src/translations/bn_beng.json b/src/translations/bn_beng.json
new file mode 100644
index 0000000..d933615
--- /dev/null
+++ b/src/translations/bn_beng.json
@@ -0,0 +1,55 @@
+{
+    "titles": {
+        "trending": "জনপ্রিয় ভিডিও",
+        "login": "একাউন্ট লগইন",
+        "register": "একাউন্ট বানান",
+        "feed": "আপনার ফিড",
+        "preferences": "পছন্দ অনুযায়ী মানিয়ে নিন",
+        "history": "দেখার ইতিহাস"
+    },
+    "counts": {
+        "videos": "কোনো ভিডিও নেই | একটা ভিডিও | {count}টি ভিডিও",
+        "views": "কেউ দেখে নি এখন পর্যন্ত  | একবার মাত্র দেখা হয়েছে এই ভিডিওটি কে  | {n} বার দেখা হয়েছে এই ভিডিওটি কে"
+    },
+    "misc": {
+        "searchBarLabel": "কি সন্ধান করছেন বলুন?"
+    },
+    "actions": {
+        "subscribe": "সদস্যতা নিন",
+        "unsubscribe": "সদস্যতা পরিত্যাগ",
+        "view_subscriptions": "সদস্যতার তালিকা",
+        "sort_by": "কোন ক্রমানুযায়ী ভিডিও গুলো আসবে ",
+        "most_recent": "সবচেয়ে নতুন আগে",
+        "least_recent": "সবচেয়ে পুরোনো আগে",
+        "channel_name_asc": "চ্যানেলের নাম অনুসারে (A-Z)",
+        "channel_name_desc": "চ্যানেলের নাম অনুসারে (Z-A)",
+        "back": " ফেরত যাবেন? ",
+        "uses_api_from": "এই পরিষেবাটি  ব্যবহার  করে : ",
+        "enable_sponsorblock": "আপনি কি স্পনসরব্লক সক্রিয় করতে চান ?",
+        "skip_sponsors": "আপনি কি স্পনসর এড়িয়ে যেতে চান ?",
+        "skip_intro": "আপনি কি সূচনা এবং সাময়িক বিরতি এড়িয়ে যেতে চান ?",
+        "skip_outro": "আপনি কি কৃতিত্ব তালিকা (Credits) এড়িয়ে যেতে চান ?",
+        "skip_preview": "আপনি কি পূর্বদৃশ্য/আগের পর্বের সংক্ষিপ্তসার এড়িয়ে যেতে চান ?",
+        "skip_interaction": "Skip Interaction Reminder (Subscribe)",
+        "skip_self_promo": "আপনি কি আত্মসম্প্রচার এড়িয়ে যেতে চান?",
+        "skip_non_music": "আপনি কি গানের মধ্যে গানহীন অংশ এড়িয়ে যেতে চান?",
+        "theme": "থিম",
+        "auto": "আপনার কম্পিউটার অনুযায়ী । ",
+        "dark": "কৃষ্ণাভ ।",
+        "light": "উজ্জ্বল ।",
+        "buffering_goal": "Buffering Goal (in seconds)",
+        "show_comments": "আপনি কি মন্তব্য দেখতে চান ?",
+        "minimize_description": "আপনি কি স্বাভাবিক ভাবে বিবরণটিকে সংক্ষিপ্ত রাখতে চান ?",
+        "store_watch_history": "আপনি কি দেখার ইতিহাস মজুত রাখতে চান?",
+        "language_selection": "আপনি কোন ভাষায় দেখতে চান ?",
+        "enabled_codecs": "Enabled Codecs (Multiple)"
+    },
+    "preferences": {
+        "playerAutoplay": "ভিডিও নিজে থেকে চলবে কি না",
+        "listen": "শুধু আওয়াজ শুনবেন কি না",
+        "quality": "এই উৎকর্ষের ভিডিওটি লোড করা হবে যদি না আপনি অন্য কোনো পছন্দ করেন । ",
+        "region": "দেশ",
+        "homepage": "ওয়েবসাইট খোলার পর গতানুগতিক কি দেখবেন",
+        "instance": "Instance"
+    }
+}
diff --git a/src/translations/bn_latn.json b/src/translations/bn_latn.json
new file mode 100644
index 0000000..24059c7
--- /dev/null
+++ b/src/translations/bn_latn.json
@@ -0,0 +1,46 @@
+{
+    "titles": {
+        "trending": "Trending",
+        "login": "Login",
+        "register": "Register",
+        "feed": "Āpanāra phiḍ",
+        "preferences": "Pachanda anuyāẏī māniẏē nin",
+        "history": "Ēkhana paryanta ki dēkhēchēn"
+    },
+    "actions": {
+        "subscribe": "Sadasyatā nin",
+        "unsubscribe": "Sadasyatā parityāga",
+        "view_subscriptions": "Sadasyatāra tālikā",
+        "sort_by": "Sort by:",
+        "most_recent": "Most Recent",
+        "least_recent": "Least Recent",
+        "channel_name_asc": "Channel Name (A-Z)",
+        "channel_name_desc": "Channel Name (Z-A)",
+        "back": "Back",
+        "uses_api_from": "Uses the API from ",
+        "enable_sponsorblock": "Enable Sponsorblock",
+        "skip_sponsors": "Skip Sponsors",
+        "skip_intro": "Skip Intermission/Intro Animation",
+        "skip_outro": "Skip Endcards/Credits",
+        "skip_preview": "Skip Preview/Recap",
+        "skip_interaction": "Skip Interaction Reminder (Subscribe)",
+        "skip_self_promo": "Skip Unpaid/Self Promotion",
+        "skip_non_music": "Skip Music: Non-Music Section",
+        "theme": "Theme",
+        "auto": "Auto",
+        "dark": "Dark",
+        "light": "Light",
+        "playerAutoplay": "Autoplay Video",
+        "listen": "Audio Only",
+        "quality": "Default Quality",
+        "buffering_goal": "Buffering Goal (in seconds)",
+        "region": "Country Selection",
+        "homepage": "Default Homepage",
+        "show_comments": "Show Comments",
+        "minimize_description": "Minimize Description by default",
+        "store_watch_history": "Store Watch History",
+        "language_selection": "Language Selection",
+        "instances_list": "Instances List",
+        "enabled_codecs": "Enabled Codecs (Multiple)"
+    }
+}
diff --git a/src/translations/de.json b/src/translations/de.json
new file mode 100644
index 0000000..1859ee3
--- /dev/null
+++ b/src/translations/de.json
@@ -0,0 +1,47 @@
+{
+    "actions": {
+        "skip_outro": "Nachspann überspringen",
+        "skip_non_music": "Musik überspringen: Nicht-Musik-Bereich",
+        "skip_self_promo": "Unbezahlte Werbung/Eigenwerbung überspringen",
+        "skip_interaction": "Interaktionserinnerung überspringen (Abonnieren)",
+        "skip_preview": "Vorschau/Zusammenfassung überspringen",
+        "instances_list": "Liste der Instanzen",
+        "language_selection": "Sprachauswahl",
+        "store_watch_history": "Wiedergabeverlauf speichern",
+        "minimize_description": "Beschreibung standardmäßig minimieren",
+        "show_comments": "Kommentare anzeigen",
+        "buffering_goal": "Pufferungsziel (in Sekunden)",
+        "light": "Hell",
+        "dark": "Dunkel",
+        "auto": "Automatisch",
+        "theme": "Design",
+        "skip_intro": "Pausen-/Einführungsanimation überspringen",
+        "skip_sponsors": "Sponsoren überspringen",
+        "enable_sponsorblock": "Sponsorblock einschalten",
+        "uses_api_from": "Verwendet die API von ",
+        "back": "Zurück",
+        "channel_name_desc": "Kanalname (Z-A)",
+        "channel_name_asc": "Kanalname (A-Z)",
+        "least_recent": "Am wenigsten neu",
+        "most_recent": "Am Neuesten",
+        "sort_by": "Sortieren nach:",
+        "view_subscriptions": "Abonnements anzeigen",
+        "unsubscribe": "Deabonnieren",
+        "subscribe": "Abonnieren"
+    },
+    "titles": {
+        "history": "Verlauf",
+        "preferences": "Einstellungen",
+        "feed": "Feed",
+        "register": "Registrieren",
+        "login": "Anmelden",
+        "trending": "Trends"
+    },
+    "preferences": {
+        "homepage": "Standard-Startseite",
+        "region": "Länderauswahl",
+        "quality": "Standardqualität",
+        "listen": "Nur Audio",
+        "playerAutoplay": "Video automatisch abspielen"
+    }
+}
diff --git a/src/translations/el.json b/src/translations/el.json
new file mode 100644
index 0000000..b602549
--- /dev/null
+++ b/src/translations/el.json
@@ -0,0 +1,47 @@
+{
+    "actions": {
+        "instances_list": "Λίστα διακομιστών",
+        "store_watch_history": "Αποθήκευση ιστορικού παρακολούθησης",
+        "skip_non_music": "Παράλειψη μουσικής: Μη-μουσικό τμήμα",
+        "skip_self_promo": "Παράλειψη μη-χορηγούμενης/προσωπικής προώθησης",
+        "skip_preview": "Παράλειψη προεπισκόπησης/ανακεφαλαίωσης",
+        "skip_outro": "Παράλειψη τίτλων τέλους/ευσημάτων",
+        "skip_intro": "Παράλειψη διακοπών/εισαγωγής",
+        "skip_sponsors": "Παράλειψη χορηγών",
+        "channel_name_desc": "Όνομα καναλιού (Ζ-Α)",
+        "channel_name_asc": "Όνομα καναλιού (Α-Ζ)",
+        "least_recent": "Λιγότερο πρόσφατα",
+        "most_recent": "Πιο πρόσφατα",
+        "skip_interaction": "Παράλειψη υπενθύμισης αλληλεπίδρασης (Εγγραφή)",
+        "uses_api_from": "Χρήση API από ",
+        "view_subscriptions": "Προβολή συνδρομών",
+        "language_selection": "Επιλογή γλώσσας",
+        "minimize_description": "Ελαχιστοποίηση περιγραφής από προεπιλογή",
+        "show_comments": "Εμφάνιση σχολίων",
+        "buffering_goal": "Στόχος Buffering (σε δευτερόλεπτα)",
+        "dark": "Σκούρο",
+        "light": "Φωτεινό",
+        "auto": "Αυτόματο",
+        "theme": "Θέμα",
+        "enable_sponsorblock": "Ενεργοποίηση Sponsorblock",
+        "back": "Επιστροφή",
+        "sort_by": "Ταξινόμηση κατά:",
+        "unsubscribe": "Απεγγραφή",
+        "subscribe": "Εγγραφή"
+    },
+    "titles": {
+        "feed": "Τροφοδοσία",
+        "history": "Ιστορικό",
+        "preferences": "Ρυθμίσεις",
+        "register": "Εγγραφή",
+        "login": "Σύνδεση",
+        "trending": "Τάσεις"
+    },
+    "preferences": {
+        "homepage": "Προεπιλεγμένη αρχική σελίδα",
+        "region": "Επιλογή χώρας",
+        "listen": "Ήχος μόνο",
+        "quality": "Προεπιλεγμένη ποιότητα",
+        "playerAutoplay": "Αυτόματη αναπαραγωγή βίντεο"
+    }
+}
diff --git a/src/translations/en.json b/src/translations/en.json
new file mode 100644
index 0000000..014f5bd
--- /dev/null
+++ b/src/translations/en.json
@@ -0,0 +1,57 @@
+{
+    "titles": {
+        "homepage": "Homepage",
+        "trending": "Trending",
+        "login": "Login",
+        "register": "Register",
+        "feed": "Feed",
+        "preferences": "Preferences",
+        "history": "Watch History"
+    },
+    "counts": {
+        "videos": "No videos | One Video | {count} Videos",
+        "views": "No views | One view | {n} views"
+    },
+    "misc": {
+        "searchBarLabel": "What are you looking for?"
+    },
+    "actions": {
+        "subscribe": "Subscribe",
+        "unsubscribe": "Unsubscribe",
+        "view_subscriptions": "View Subscriptions",
+        "sort_by": "Sort by:",
+        "most_recent": "Most Recent",
+        "least_recent": "Least Recent",
+        "channel_name_asc": "Channel Name (A-Z)",
+        "channel_name_desc": "Channel Name (Z-A)",
+        "back": "Back",
+        "uses_api_from": "Uses the API from ",
+        "enable_sponsorblock": "Enable Sponsorblock",
+        "skip_sponsors": "Skip Sponsors",
+        "skip_intro": "Skip Intermission/Intro Animation",
+        "skip_outro": "Skip Endcards/Credits",
+        "skip_preview": "Skip Preview/Recap",
+        "skip_interaction": "Skip Interaction Reminder (Subscribe)",
+        "skip_self_promo": "Skip Unpaid/Self Promotion",
+        "skip_non_music": "Skip Music: Non-Music Section",
+        "theme": "Theme",
+        "auto": "Auto",
+        "dark": "Dark",
+        "light": "Light",
+        "buffering_goal": "Buffering Goal (in seconds)",
+        "show_comments": "Show Comments",
+        "minimize_description": "Minimize Description by default",
+        "store_watch_history": "Store Watch History",
+        "language_selection": "Language Selection",
+        "instances_list": "Instances List",
+        "enabled_codecs": "Enabled Codecs (Multiple)"
+    },
+    "preferences": {
+        "playerAutoplay": "Autoplay Video",
+        "listen": "Audio Only",
+        "quality": "Default Quality",
+        "region": "Country Selection",
+        "homepage": "Default Homepage",
+        "instance": "Instance"
+    }
+}
diff --git a/src/translations/fr.json b/src/translations/fr.json
new file mode 100644
index 0000000..62de671
--- /dev/null
+++ b/src/translations/fr.json
@@ -0,0 +1,47 @@
+{
+    "titles": {
+        "trending": "Tendances",
+        "login": "Se connecter",
+        "register": "S'inscrire",
+        "feed": "Abonnements",
+        "preferences": "Préférences",
+        "history": "Historique"
+    },
+    "actions": {
+        "subscribe": "S'abonner",
+        "unsubscribe": "Se désabonner",
+        "buffering_goal": "Objectif de mise en mémoire tampon (en secondes)",
+        "skip_non_music": "Ignorer la musique : section non musicale",
+        "skip_self_promo": "Ignorer la promotion non rémunérée / l'autopromotion",
+        "skip_interaction": "Ignorer les rappels d'interaction (S'abonner)",
+        "skip_preview": "Ignorer l'aperçu / le récapitulatif",
+        "skip_outro": "Ignorer les crédits de fin",
+        "skip_intro": "Ignorer l'animation de l'entracte/Intro",
+        "skip_sponsors": "Ignorer les sponsors",
+        "instances_list": "Liste des instances",
+        "language_selection": "Sélection de la langue",
+        "store_watch_history": "Conserver l'historique de visionnage",
+        "minimize_description": "Minimiser la description par défaut",
+        "show_comments": "Afficher les commentaires",
+        "light": "Clair",
+        "dark": "Sombre",
+        "auto": "Auto",
+        "theme": "Thème",
+        "enable_sponsorblock": "Activer Sponsorblock",
+        "channel_name_desc": "Nom de la chaîne (Z-A)",
+        "view_subscriptions": "Voir les abonnements",
+        "back": "Retour",
+        "uses_api_from": "Utilise l'API de ",
+        "sort_by": "Trier par :",
+        "channel_name_asc": "Nom de la chaîne (A-Z)",
+        "least_recent": "Le moins récent",
+        "most_recent": "Le plus récent"
+    },
+    "preferences": {
+        "homepage": "Page d'accueil par défaut",
+        "region": "Sélection du pays",
+        "playerAutoplay": "Lire automatique la vidéo",
+        "quality": "Qualité par défaut",
+        "listen": "Audio seulement"
+    }
+}
diff --git a/src/translations/lt.json b/src/translations/lt.json
new file mode 100644
index 0000000..f4b0e5a
--- /dev/null
+++ b/src/translations/lt.json
@@ -0,0 +1,47 @@
+{
+    "actions": {
+        "unsubscribe": "Atšaukti prenumeratą",
+        "subscribe": "Prenumeruoti",
+        "instances_list": "Perdavimo šaltinių sąrašas",
+        "language_selection": "Kalbos pasirinkimas",
+        "store_watch_history": "Saugoti žiūrėjimo istoriją",
+        "minimize_description": "Suskleisti aprašymą automatiškai",
+        "show_comments": "Rodyti komentarus",
+        "buffering_goal": "Užkrovimo tikslas (sekundėmis)",
+        "light": "Šviesi",
+        "auto": "Automatinė",
+        "dark": "Tamsi",
+        "theme": "Tema",
+        "skip_non_music": "Praleisti muziką: ne muzikos įkėlimų pasirinkimas",
+        "skip_self_promo": "Praleisti nemokamą/savireklamą",
+        "skip_interaction": "Praleisti sąveikos priminimą (prenumeruoti)",
+        "skip_preview": "Praleisti peržiūrą/apibendrinimą",
+        "skip_outro": "Praleisti pabaigos užsklandas/padėkas",
+        "skip_intro": "Praleisti pertrauką/įžanginę animaciją",
+        "skip_sponsors": "Praleisti rėmėjus",
+        "enable_sponsorblock": "Įjungti SponsorBlock",
+        "uses_api_from": "Naudoja API iš ",
+        "back": "Atgal",
+        "channel_name_desc": "Kanalo pavadinimas (Z-A)",
+        "channel_name_asc": "Kanalo pavadinimas (A-Z)",
+        "least_recent": "Seniausi",
+        "most_recent": "Naujausi",
+        "sort_by": "Rikiuoti pagal:",
+        "view_subscriptions": "Peržiūrėti prenumeratas"
+    },
+    "titles": {
+        "preferences": "Nuostatos",
+        "feed": "Sklaidos kanalas",
+        "register": "Registruotis",
+        "login": "Prisijungti",
+        "trending": "Tendencijos",
+        "history": "Istorija"
+    },
+    "preferences": {
+        "homepage": "Numatytasis pagrindinis puslapis",
+        "region": "Šalies pasirinkimas",
+        "quality": "Numatytoji kokybė",
+        "listen": "Tik garsas",
+        "playerAutoplay": "Automatiškai leisti vaizdo įrašus"
+    }
+}
diff --git a/src/translations/ml.json b/src/translations/ml.json
new file mode 100644
index 0000000..5ea722c
--- /dev/null
+++ b/src/translations/ml.json
@@ -0,0 +1,43 @@
+{
+    "titles": {
+        "trending": "പ്രചരിക്കുന്നത്",
+        "register": "രജിസ്റ്റർ ചെയ്യുക",
+        "history": "ചരിത്രം",
+        "preferences": "ക്രമീകരണങ്ങൾ",
+        "feed": "ഫീഡ്",
+        "login": "പ്രവേശിക്കുക"
+    },
+    "actions": {
+        "view_subscriptions": "സബ്സ്ക്രിപ്ഷനുകൾ കാണുക",
+        "unsubscribe": "സബ്സ്ക്രൈബ് ചെയ്യേണ്ട",
+        "subscribe": "സബ്സ്ക്രൈബ് ചെയ്യുക",
+        "instances_list": "ഇൻസ്റ്റൻസുകളുടെ പട്ടിക",
+        "minimize_description": "സ്ഥിരമായി വിവരണം ചെറുതാക്കുക",
+        "skip_intro": "ഇടവേള/ആമുഖ ആനിമേഷൻ ഒഴിവാക്കുക",
+        "skip_sponsors": "സ്പോൺസർമാരെ ഒഴിവാക്കുക",
+        "skip_outro": "എൻഡ്കാർഡുകൾ/ക്രെഡിറ്റുകൾ ഒഴിവാക്കുക",
+        "skip_preview": "പ്രിവ്യൂ/റീക്യാപ്പ് ഒഴിവാക്കുക",
+        "skip_interaction": "ഇടപെടൽ ഓർമ്മപ്പെടുത്തൽ ഒഴിവാക്കുക (സബ്സ്ക്രൈബ് ചെയ്യുക)",
+        "skip_self_promo": "പണം അടയ്ക്കാത്ത/സ്വയം പ്രമോഷൻ ഒഴിവാക്കുക",
+        "auto": "സ്വയം തിരഞ്ഞെടുക്കുക",
+        "theme": "തീം",
+        "dark": "കറുപ്പ് നിറം",
+        "light": "വെള്ള നിറം",
+        "show_comments": "അഭിപ്രായങ്ങൾ കാണിക്കുക",
+        "language_selection": "ഭാഷ തിരഞ്ഞെടുക്കുക",
+        "store_watch_history": "വീഡിയോ ചരിത്രം സംരക്ഷിക്കുക",
+        "enable_sponsorblock": "Sponsorblock സജ്ജമാക്കുക",
+        "uses_api_from": "ഇതിൽ നിന്ന് എപിഐ ഉപയോഗിക്കുന്നു ",
+        "back": "തിരികെ പോവുക",
+        "channel_name_desc": "ചാനലിൻ്റെ പേര് (Z-A)",
+        "channel_name_asc": "ചാനലിന്റെ പേര് (A-Z)",
+        "most_recent": "ഏറ്റവും പുതിയത്",
+        "sort_by": "ഇങ്ങനെ അടുക്കുക:"
+    },
+    "preferences": {
+        "quality": "സ്ഥിര വീഡിയോ നിലവാരം",
+        "homepage": "സ്ഥിര ഹോംപേജ്",
+        "region": "രാജ്യം തിരഞ്ഞെടുക്കുക",
+        "listen": "ശബ്ദം മാത്രം"
+    }
+}
diff --git a/src/translations/nb_NO.json b/src/translations/nb_NO.json
new file mode 100644
index 0000000..f28cc6b
--- /dev/null
+++ b/src/translations/nb_NO.json
@@ -0,0 +1,47 @@
+{
+    "actions": {
+        "instances_list": "Liste over instanser",
+        "minimize_description": "Minimer beskrivelse som forvalg",
+        "buffering_goal": "Mellomlagringsmål (i sekunder)",
+        "skip_non_music": "Hopp over musikk:Del uten musikk",
+        "auto": "Auto",
+        "skip_self_promo": "Hopp over ubetalt/selvpromotering",
+        "skip_interaction": "Hopp over interaksjonspåminnelse (abonnering)",
+        "skip_preview": "Hopp over forhåndsvisning/reintroduksjon",
+        "skip_outro": "Skru av rulletekst/sluttpresentasjon",
+        "skip_intro": "Hopp over forvideo/introanimasjon",
+        "enable_sponsorblock": "Skru på sponsorblokkering",
+        "language_selection": "Språk",
+        "store_watch_history": "Lagre visningshistorikk",
+        "show_comments": "Vis kommentarer",
+        "light": "Lys",
+        "dark": "Mørk",
+        "theme": "Drakt",
+        "skip_sponsors": "Hopp over sponsorer",
+        "uses_api_from": "Bruker API-et fra ",
+        "back": "Tilbake",
+        "channel_name_desc": "Kanalnavn (Å-A)",
+        "channel_name_asc": "Kanalnavn (A-Å)",
+        "least_recent": "Eldst",
+        "most_recent": "Nyligst",
+        "sort_by": "Sorter etter:",
+        "view_subscriptions": "Vis abonnementer",
+        "unsubscribe": "Opphev abonnement",
+        "subscribe": "Abonner"
+    },
+    "titles": {
+        "feed": "Strøm",
+        "history": "HIstorikk",
+        "preferences": "Innstillinger",
+        "register": "Registrering",
+        "login": "Logg inn",
+        "trending": "På vei opp"
+    },
+    "preferences": {
+        "region": "Land",
+        "playerAutoplay": "Spill video automatisk",
+        "homepage": "Forvalgt hjemmeside",
+        "quality": "Forvalgt kvalitet",
+        "listen": "Kun lyd"
+    }
+}
diff --git a/src/translations/tr.json b/src/translations/tr.json
new file mode 100644
index 0000000..2e42f6b
--- /dev/null
+++ b/src/translations/tr.json
@@ -0,0 +1,47 @@
+{
+    "actions": {
+        "instances_list": "Örnek Listesi",
+        "language_selection": "Dil Seçimi",
+        "store_watch_history": "İzleme Geçmişini Sakla",
+        "minimize_description": "Açıklamayı öntanımlı olarak küçült",
+        "show_comments": "Yorumları Göster",
+        "buffering_goal": "Arabelleğe Alma Hedefi (saniye cinsinden)",
+        "light": "Açık",
+        "dark": "Koyu",
+        "auto": "Otomatik",
+        "theme": "Tema",
+        "skip_non_music": "Müziği Atla: Müzik Dışı Bölüm",
+        "skip_self_promo": "Ücretsiz/Kendini Tanıtmayı Atla",
+        "skip_interaction": "Etkileşim Hatırlatıcısını (Abone Ol) Atla",
+        "skip_preview": "Ön İzlemeyi/Özetlemeyi Atla",
+        "skip_outro": "Bitiş/Teşekkür Bölümlerini Atla",
+        "skip_intro": "Ara/Giriş Animasyonunu Atla",
+        "skip_sponsors": "Sponsorları Atla",
+        "enable_sponsorblock": "Sponsorblock'u Etkinleştir",
+        "uses_api_from": "Kullanılan API: ",
+        "back": "Geri",
+        "channel_name_desc": "Kanal Adı (Z-A)",
+        "channel_name_asc": "Kanal Adı (A-Z)",
+        "least_recent": "En Eski",
+        "most_recent": "En Yeni",
+        "sort_by": "Sıralama ölçütü:",
+        "view_subscriptions": "Abonelikleri Görüntüle",
+        "unsubscribe": "Abonelikten çık",
+        "subscribe": "Abone ol"
+    },
+    "titles": {
+        "history": "Geçmiş",
+        "preferences": "Tercihler",
+        "feed": "Akış",
+        "register": "Kaydol",
+        "login": "Oturum Aç",
+        "trending": "Öne Çıkanlar"
+    },
+    "preferences": {
+        "homepage": "Öntanımlı Ana Sayfa",
+        "region": "Ülke Seçimi",
+        "quality": "Öntanımlı Kalite",
+        "listen": "Yalnızca Ses",
+        "playerAutoplay": "Videoyu Otomatik Oynat"
+    }
+}
diff --git a/src/translations/zh_Hant.json b/src/translations/zh_Hant.json
new file mode 100644
index 0000000..b774dfe
--- /dev/null
+++ b/src/translations/zh_Hant.json
@@ -0,0 +1,25 @@
+{
+    "actions": {
+        "skip_intro": "跳過中場休息/介紹動畫",
+        "skip_sponsors": "跳過贊助商",
+        "enable_sponsorblock": "啟用 SponsorBlock",
+        "channel_name_desc": "通道名稱 (Z-A)",
+        "channel_name_asc": "通道名稱 (A-Z)",
+        "unsubscribe": "取消訂閱",
+        "subscribe": "訂閱",
+        "sort_by": "排序方式:",
+        "view_subscriptions": "查看訂閱",
+        "language_selection": "語言選擇"
+    },
+    "titles": {
+        "history": "歷史記錄",
+        "preferences": "偏好設定",
+        "feed": "摘要",
+        "trending": "趨勢",
+        "register": "註冊",
+        "login": "登錄"
+    },
+    "preferences": {
+        "region": "國家/地區選擇"
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index 5283b24..7a6be65 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -42,6 +42,15 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
+"@babel/eslint-parser@^7.15.0":
+  version "7.15.0"
+  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.15.0.tgz#b54f06e04d0e93aebcba99f89251e3bf0ee39f21"
+  integrity sha512-+gSPtjSBxOZz4Uh8Ggqu7HbfpB8cT1LwW0DnVVLZEJvzXauiD0Di3zszcBkRmfGGrLdYeHUwcflG7i3tr9kQlw==
+  dependencies:
+    eslint-scope "^5.1.1"
+    eslint-visitor-keys "^2.1.0"
+    semver "^6.3.0"
+
 "@babel/generator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.5.tgz#848d7b9f031caca9d0cd0af01b063f226f52d785"
@@ -258,7 +267,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.14.5", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.7.0":
+"@babel/parser@^7.14.5", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.7.tgz#6099720c8839ca865a2637e6c85852ead0bdb595"
   integrity sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==
@@ -894,7 +903,7 @@
     "@babel/parser" "^7.14.5"
     "@babel/types" "^7.14.5"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.14.5", "@babel/traverse@^7.7.0":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.14.5":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.7.tgz#64007c9774cfdc3abd23b0780bc18a3ce3631753"
   integrity sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==
@@ -909,7 +918,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.14.5", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.14.5", "@babel/types@^7.4.4":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
   integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==
@@ -932,6 +941,16 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/baloo-da-2@^4.5.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/baloo-da-2/-/baloo-da-2-4.5.0.tgz#2174da30951e71103859cee9661e80f81d72fed8"
+  integrity sha512-M3eJ9rXCYt83ENTIpYqy7OuA/Epqd8LYfqUEerT2XVEVXkHMfb+J7BJu8OIv+fq1COegntL1YyznkJuDzF40RQ==
+
+"@fontsource/roboto@^4.5.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.0.tgz#d6f925668ba6af46707f1040c43aff498ba204bb"
+  integrity sha512-ja4XYw/9kNRFM5Ndk9vwzHWsdBMXczyBazFkTXJQ74QQBnT0BbSsHn0pF60AU0Iznig1Wt9x3rADfG8LANvMpw==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1984,18 +2003,6 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
-babel-eslint@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
-  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
-    "@babel/types" "^7.7.0"
-    eslint-visitor-keys "^1.0.0"
-    resolve "^1.12.0"
-
 babel-extract-comments@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
@@ -3877,12 +3884,12 @@ eslint-utils@^2.0.0, eslint-utils@^2.1.0:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
-eslint-visitor-keys@^2.0.0:
+eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
@@ -7868,7 +7875,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.20.0:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -9218,6 +9225,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-i18n@^8.25.0:
+  version "8.25.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.25.0.tgz#1037d9295fa2845a230b771de473481edb2cfc4c"
+  integrity sha512-ynhcL+PmTxuuSE1T10htiSXzjBozxYIE3ffbM1RfgAkVbr/v1SP+9Mi/7/uv8ZVV1yGuKjFAYp9BXq+X7op6MQ==
+
 "vue-loader-v16@npm:vue-loader@^16.1.0":
   version "16.3.1"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.3.1.tgz#5b675ae28ac97080111e93b26d22adca36dd57aa"