From 898e5139748fa3f22a035abcf493d2ad1eaf4c0c Mon Sep 17 00:00:00 2001
From: Preston <freetubeapp@protonmail.com>
Date: Thu, 6 Aug 2020 20:20:42 -0400
Subject: [PATCH] Make some progress on incorporating the locale file into the
 app

---
 .../ft-search-filters/ft-search-filters.js    | 66 +++++++++--------
 .../ft-search-filters/ft-search-filters.vue   | 10 +--
 .../ft-share-button/ft-share-button.vue       | 18 ++---
 .../general-settings/general-settings.js      | 38 ++++++----
 .../general-settings/general-settings.vue     | 20 +++---
 .../player-settings/player-settings.js        | 41 ++++++-----
 .../player-settings/player-settings.vue       | 22 +++---
 src/renderer/components/side-nav/side-nav.vue | 14 ++--
 .../theme-settings/theme-settings.js          | 53 +++++++-------
 .../theme-settings/theme-settings.vue         | 10 +--
 src/renderer/components/top-nav/top-nav.vue   |  2 +-
 .../watch-video-info/watch-video-info.js      | 20 +++---
 .../watch-video-info/watch-video-info.vue     |  6 +-
 .../watch-video-recommendations.vue           |  2 +-
 src/renderer/views/History/History.vue        |  4 +-
 src/renderer/views/Popular/Popular.vue        |  2 +-
 .../views/Subscriptions/Subscriptions.vue     |  2 +-
 src/renderer/views/Trending/Trending.vue      |  2 +-
 .../views/UserPlaylists/UserPlaylists.vue     |  4 +-
 src/renderer/views/Watch/Watch.js             |  2 +-
 static/locales/en-US.yaml                     | 70 ++++++++++---------
 21 files changed, 221 insertions(+), 187 deletions(-)

diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.js b/src/renderer/components/ft-search-filters/ft-search-filters.js
index 56b55fea..49a66d3b 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.js
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.js
@@ -10,28 +10,12 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      sortByTitle: 'Sort By',
-      sortByLabels: [
-        'Most Relevant',
-        'Rating',
-        'Upload Date',
-        'View Count'
-      ],
       sortByValues: [
         'relevance',
         'rating',
         'upload_date',
         'view_count'
       ],
-      timeTitle: 'Time',
-      timeLabels: [
-        'Any Time',
-        'Last Hour',
-        'Today',
-        'This Week',
-        'This Month',
-        'This Year'
-      ],
       timeValues: [
         '',
         'hour',
@@ -40,25 +24,12 @@ export default Vue.extend({
         'month',
         'year'
       ],
-      typeTitle: 'Type',
-      typeLabels: [
-        'All Types',
-        'Videos',
-        'Channels',
-        'Playlists'
-      ],
       typeValues: [
         'all',
         'video',
         'channel',
         'playlist'
       ],
-      durationTitle: 'Duration',
-      durationLabels: [
-        'All Durations',
-        'Short (< 4 minutes)',
-        'Long (> 20 minutes)'
-      ],
       durationValues: [
         '',
         'short',
@@ -69,6 +40,43 @@ export default Vue.extend({
   computed: {
     searchSettings: function () {
       return this.$store.getters.getSearchSettings
+    },
+
+    sortByLabels: function () {
+      return [
+        this.$t('Search Filters.Sort By.Most Relevant'),
+        this.$t('Search Filters.Sort By.Rating'),
+        this.$t('Search Filters.Sort By.Upload Date'),
+        this.$t('Search Filters.Sort By.View Count')
+      ]
+    },
+
+    timeLabels: function () {
+      return [
+        this.$t('Search Filters.Time.Any Time'),
+        this.$t('Search Filters.Time.Last Hour'),
+        this.$t('Search Filters.Time.Today'),
+        this.$t('Search Filters.Time.This Week'),
+        this.$t('Search Filters.Time.This Month'),
+        this.$t('Search Filters.Time.This Year')
+      ]
+    },
+
+    typeLabels: function () {
+      return [
+        this.$t('Search Filters.Type.All Types'),
+        this.$t('Search Filters.Type.Videos'),
+        this.$t('Search Filters.Type.Channels'),
+        this.$t('Playlists')
+      ]
+    },
+
+    durationLabels: function () {
+      return [
+        this.$t('Search Filters.Duration.All Durations'),
+        this.$t('Search Filters.Duration.Short (< 4 minutes)'),
+        this.$t('Search Filters.Duration.Long (> 20 minutes)')
+      ]
     }
   },
   methods: {
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.vue b/src/renderer/components/ft-search-filters/ft-search-filters.vue
index e641548b..8b35d107 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.vue
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.vue
@@ -1,32 +1,32 @@
 <template>
   <div class="searchFilter">
     <h2 class="center">
-      Search Filters
+      {{ $t("Search Filters.Search Filters") }}
     </h2>
     <ft-flex-box class="radioFlexBox">
       <ft-radio-button
-        :title="sortByTitle"
+        :title="$t('Search Filters.Sort By.Sort By')"
         :labels="sortByLabels"
         :values="sortByValues"
         class="searchRadio"
         @change="updateSortBy"
       />
       <ft-radio-button
-        :title="timeTitle"
+        :title="$t('Search Filters.Time.Time')"
         :labels="timeLabels"
         :values="timeValues"
         class="searchRadio radioMargin"
         @change="updateTime"
       />
       <ft-radio-button
-        :title="typeTitle"
+        :title="$t('Search Filters.Type.Type')"
         :labels="typeLabels"
         :values="typeValues"
         class="searchRadio radioMargin"
         @change="updateType"
       />
       <ft-radio-button
-        :title="durationTitle"
+        :title="$t('Search Filters.Duration.Duration')"
         :labels="durationLabels"
         :values="durationValues"
         class="radioMargin"
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index 57fe6512..8022ae78 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -1,7 +1,7 @@
 <template>
   <ft-icon-button
     ref="iconButton"
-    title="Share Video"
+    :title="$t('Share.Share Video')"
     theme="secondary"
     icon="share-alt"
     dropdown-position-x="left"
@@ -24,14 +24,14 @@
           @click="copyYoutube()"
         >
           <font-awesome-icon icon="copy" />
-          Copy link
+          {{ $t("Share.Copy Link") }}
         </ft-button>
         <ft-button
           class="action"
           @click="openYoutube()"
         >
           <font-awesome-icon icon="globe" />
-          Open link
+          {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
           class="action"
@@ -39,7 +39,7 @@
           @click="copyYoutubeEmbed()"
         >
           <font-awesome-icon icon="copy" />
-          Copy embed
+          {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
           class="action"
@@ -47,7 +47,7 @@
           @click="openYoutubeEmbed()"
         >
           <font-awesome-icon icon="globe" />
-          Open embed
+          {{ $t("Share.Open Embed") }}
         </ft-button>
       </div>
 
@@ -63,14 +63,14 @@
           @click="copyInvidious()"
         >
           <font-awesome-icon icon="copy" />
-          Copy link
+          {{ $t("Share.Copy Link") }}
         </ft-button>
         <ft-button
           class="action"
           @click="openInvidious()"
         >
           <font-awesome-icon icon="globe" />
-          Open link
+          {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
           class="action"
@@ -78,7 +78,7 @@
           @click="copyInvidiousEmbed()"
         >
           <font-awesome-icon icon="copy" />
-          Copy embed
+          {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
           class="action"
@@ -86,7 +86,7 @@
           @click="openInvidiousEmbed()"
         >
           <font-awesome-icon icon="globe" />
-          Open embed
+          {{ $t("Share.Open Embed") }}
         </ft-button>
       </div>
     </div>
diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js
index 884f6bd3..a7bc3995 100644
--- a/src/renderer/components/general-settings/general-settings.js
+++ b/src/renderer/components/general-settings/general-settings.js
@@ -20,14 +20,9 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      title: 'General Settings',
       showInvidiousInstances: false,
       instanceNames: [],
       instanceValues: [],
-      backendNames: [
-        'Invidious API',
-        'Local API'
-      ],
       backendValues: [
         'invidious',
         'local'
@@ -46,20 +41,10 @@ export default Vue.extend({
         'playlists',
         'history'
       ],
-      viewTypeNames: [
-        'Grid',
-        'List'
-      ],
       viewTypeValues: [
         'grid',
         'list'
       ],
-      thumbnailTypeNames: [
-        'Default',
-        'Beginning',
-        'Middle',
-        'End'
-      ],
       thumbnailTypeValues: [
         '',
         'start',
@@ -575,6 +560,29 @@ export default Vue.extend({
     },
     thumbnailPreference: function () {
       return this.$store.getters.getThumbnailPreference
+    },
+
+    backendNames: function () {
+      return [
+        this.$t('Settings.General Settings.Preferred API Backend.Invidious API'),
+        this.$t('Settings.General Settings.Preferred API Backend.Local API')
+      ]
+    },
+
+    viewTypeNames: function () {
+      return [
+        this.$t('Settings.General Settings.Video View Type.Grid'),
+        this.$t('Settings.General Settings.Video View Type.List')
+      ]
+    },
+
+    thumbnailTypeNames: function () {
+      return [
+        this.$t('Settings.General Settings.Thumbnail Preference.Default'),
+        this.$t('Settings.General Settings.Thumbnail Preference.Beginning'),
+        this.$t('Settings.General Settings.Thumbnail Preference.Middle'),
+        this.$t('Settings.General Settings.Thumbnail Preference.End')
+      ]
     }
   },
   mounted: function () {
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index 6d58c7e5..985785d7 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -5,29 +5,29 @@
     <h3
       class="videoTitle"
     >
-      {{ title }}
+      {{ $t("Settings.General Settings.General Settings") }}
     </h3>
     <ft-flex-box class="generalSettingsFlexBox">
       <ft-toggle-switch
-        label="Fallback to Non-Preferred Backend on Failure"
+        :label="$t('Settings.General Settings.Fallback to Non-Preferred Backend on Failure')"
         :default-value="backendFallback"
         @change="updateBackendFallback"
       />
       <ft-toggle-switch
-        label="Enable Search Suggestions"
+        :label="$t('Settings.General Settings.Enable Search Suggestions')"
         :default-value="enableSearchSuggestions"
         @change="updateEnableSearchSuggestions"
       />
       <ft-toggle-switch
         v-if="false"
-        label="Check for Updates"
+        :label="$t('Settings.General Settings.Check for Updates')"
         :default-value="checkForUpdates"
         @change="updateCheckForUpdates"
       />
     </ft-flex-box>
     <div class="switchGrid">
       <ft-select
-        placeholder="Preferred API Backend"
+        :placeholder="$t('Settings.General Settings.Preferred API Backend.Preferred API Backend')"
         :value="backendPreference"
         :select-names="backendNames"
         :select-values="backendValues"
@@ -35,7 +35,7 @@
       />
       <ft-select
         v-if="false"
-        placeholder="Default Landing Page"
+        :placeholder="$t('Settings.General Settings.Default Landing Page')"
         :value="landingPage"
         :select-names="defaultPageNames"
         :select-values="defaultPageValues"
@@ -43,21 +43,21 @@
       />
       <ft-select
         v-if="false"
-        placeholder="Region for Trending"
+        :placeholder="$t('Settings.General Settings.Region for Trending')"
         :value="region"
         :select-names="regionNames"
         :select-values="regionValues"
         @change="updateRegion"
       />
       <ft-select
-        placeholder="Video View Type"
+        :placeholder="$t('Settings.General Settings.Video View Type.Video View Type')"
         :value="listType"
         :select-names="viewTypeNames"
         :select-values="viewTypeValues"
         @change="updateListType"
       />
       <ft-select
-        placeholder="Thumbnail Preference"
+        :placeholder="$t('Settings.General Settings.Thumbnail Preference.Thumbnail Preference')"
         :value="thumbnailPreference"
         :select-names="thumbnailTypeNames"
         :select-values="thumbnailTypeValues"
@@ -66,7 +66,7 @@
     </div>
     <ft-flex-box class="generalSettingsFlexBox">
       <ft-input
-        placeholder="Invidious Instance (Default is https://invidio.us)"
+        :placeholder="$t('Settings.General Settings[\'Invidious Instance (Default is https://invidio.us)\']')"
         :show-arrow="false"
         :show-label="true"
         :value="invidiousInstance"
diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js
index dfa05b46..75544e5b 100644
--- a/src/renderer/components/player-settings/player-settings.js
+++ b/src/renderer/components/player-settings/player-settings.js
@@ -17,29 +17,11 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      title: 'Player Settings',
-      formatNames: [
-        'Dash Formats',
-        'Legacy Formats',
-        'Audio Formats'
-      ],
       formatValues: [
         'dash',
         'legacy',
         'audio'
       ],
-      qualityNames: [
-        'Auto',
-        '144p',
-        '240p',
-        '360p',
-        '480p',
-        '720p',
-        '1080p',
-        '1440p',
-        '4k',
-        '8k'
-      ],
       qualityValues: [
         'auto',
         144,
@@ -101,6 +83,29 @@ export default Vue.extend({
 
     defaultTheatreMode: function () {
       return this.$store.getters.getDefaultTheatreMode
+    },
+
+    formatNames: function () {
+      return [
+        this.$t('Settings.Player Settings.Default Video Format.Dash Formats'),
+        this.$t('Settings.Player Settings.Default Video Format.Legacy Formats'),
+        this.$t('Settings.Player Settings.Default Video Format.Audio Formats')
+      ]
+    },
+
+    qualityNames: function () {
+      return [
+        this.$t('Settings.Player Settings.Default Quality.Auto'),
+        this.$t('Settings.Player Settings.Default Quality.144p'),
+        this.$t('Settings.Player Settings.Default Quality.240p'),
+        this.$t('Settings.Player Settings.Default Quality.360p'),
+        this.$t('Settings.Player Settings.Default Quality.480p'),
+        this.$t('Settings.Player Settings.Default Quality.720p'),
+        this.$t('Settings.Player Settings.Default Quality.1080p'),
+        this.$t('Settings.Player Settings.Default Quality.1440p'),
+        this.$t('Settings.Player Settings.Default Quality.4k'),
+        this.$t('Settings.Player Settings.Default Quality.8k')
+      ]
     }
   },
   methods: {
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index 5d4cfcae..af4c5666 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/src/renderer/components/player-settings/player-settings.vue
@@ -5,7 +5,7 @@
     <h3
       class="videoTitle"
     >
-      {{ title }}
+      {{ $t("Settings.Player Settings.Player Settings") }}
     </h3>
     <div class="switchColumnGrid">
       <div class="switchColumn">
@@ -24,13 +24,13 @@
           @change="updateEnableSubtitles"
         />
         <ft-toggle-switch
-          label="Force Local Backend for Legacy Formats"
+          :label="$t('Settings.Player Settings.Force Local Backend for Legacy Formats')"
           :compact="true"
           :default-value="forceLocalBackendForLegacy"
           @change="updateForceLocalBackendForLegacy"
         />
         <ft-toggle-switch
-          label="Proxy Videos Through Invidious"
+          :label="$t('Settings.Player Settings.Proxy Videos Through Invidious')"
           :compact="true"
           :default-value="proxyVideos"
           @change="updateProxyVideos"
@@ -38,26 +38,26 @@
       </div>
       <div class="switchColumn">
         <ft-toggle-switch
-          label="Autoplay Videos"
+          :label="$t('Settings.Player Settings.Autoplay Videos')"
           :compact="true"
           :default-value="autoplayVideos"
           @change="updateAutoplayVideos"
         />
         <ft-toggle-switch
-          label="Autoplay Playlists"
+          :label="$t('Settings.Player Settings.Autoplay Playlists')"
           :compact="true"
           :default-value="autoplayPlaylists"
           @change="updateAutoplayPlaylists"
         />
         <ft-toggle-switch
           v-if="false"
-          label="Play Next Video"
+          :label="$t('Settings.Player Settings.Play Next Video')"
           :compact="true"
           :default-value="playNextVideo"
           @change="updatePlayNextVideo"
         />
         <ft-toggle-switch
-          label="Enable Theatre Mode by Default"
+          :label="$t('Settings.Player Settings.Enable Theatre Mode by Default')"
           :compact="true"
           :default-value="defaultTheatreMode"
           @change="updateDefaultTheatreMode"
@@ -66,7 +66,7 @@
     </div>
     <ft-flex-box>
       <ft-slider
-        label="Default Volume"
+        :label="$t('Settings.Player Settings.Default Volume')"
         :default-value="defaultVolume"
         :min-value="0"
         :max-value="100"
@@ -75,7 +75,7 @@
         @change="parseVolumeBeforeUpdate"
       />
       <ft-slider
-        label="Default Playback Rate"
+        :label="$t('Settings.Player Settings.Default Playback Rate')"
         :default-value="defaultPlayback"
         :min-value="0.25"
         :max-value="3"
@@ -86,14 +86,14 @@
     </ft-flex-box>
     <ft-flex-box>
       <ft-select
-        placeholder="Default Video Format"
+        :placeholder="$t('Settings.Player Settings.Default Video Format.Default Video Format')"
         :value="defaultVideoFormat"
         :select-names="formatNames"
         :select-values="formatValues"
         @change="updateDefaultVideoFormat"
       />
       <ft-select
-        placeholder="Default Quality"
+        :placeholder="$t('Settings.Player Settings.Default Quality.Default Quality')"
         :value="defaultQuality"
         :select-names="qualityNames"
         :select-values="qualityValues"
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index b4d3e362..33f5d8d9 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -14,7 +14,7 @@
           class="navIcon"
         />
         <p class="navLabel">
-          Subscriptions
+          {{ $t("Subscriptions.Subscriptions") }}
         </p>
         <font-awesome-icon
           class="refreshIcon"
@@ -30,7 +30,7 @@
           class="navIcon"
         />
         <p class="navLabel">
-          Trending
+          {{ $t("Trending") }}
         </p>
       </div>
       <div
@@ -42,7 +42,7 @@
           class="navIcon"
         />
         <p class="navLabel">
-          Most Popular
+          {{ $t("Most Popular") }}
         </p>
       </div>
       <div
@@ -54,7 +54,7 @@
           class="navIcon"
         />
         <p class="navLabel">
-          Playlists
+          {{ $t("Playlists") }}
         </p>
       </div>
       <side-nav-more-options
@@ -69,7 +69,7 @@
           class="navIcon"
         />
         <p class="navLabel">
-          History
+          {{ $t("History.History") }}
         </p>
       </div>
       <hr>
@@ -82,7 +82,7 @@
           class="navIcon"
         />
         <p class="navLabel">
-          Settings
+          {{ $t("Settings.Settings") }}
         </p>
       </div>
       <div
@@ -94,7 +94,7 @@
           class="navIcon"
         />
         <p class="navLabel">
-          About
+          {{ $t("About.About") }}
         </p>
       </div>
       <hr>
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 7b080638..b3838a69 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -15,38 +15,14 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      title: 'Theme Settings',
       currentBaseTheme: '',
       currentMainColor: '',
       currentSecColor: '',
-      baseThemeNames: [
-        'Light',
-        'Dark',
-        'Black'
-      ],
       baseThemeValues: [
         'light',
         'dark',
         'black'
       ],
-      colorNames: [
-        'Red',
-        'Pink',
-        'Purple',
-        'Deep Purple',
-        'Indigo',
-        'Blue',
-        'Light Blue',
-        'Cyan',
-        'Teal',
-        'Green',
-        'Light Green',
-        'Lime',
-        'Yellow',
-        'Amber',
-        'Orange',
-        'Deep Orange'
-      ],
       colorValues: [
         'Red',
         'Pink',
@@ -70,6 +46,35 @@ export default Vue.extend({
   computed: {
     barColor: function () {
       return this.$store.getters.getBarColor
+    },
+
+    baseThemeNames: function () {
+      return [
+        this.$t('Settings.Theme Settings.Base Theme.Light'),
+        this.$t('Settings.Theme Settings.Base Theme.Dark'),
+        this.$t('Settings.Theme Settings.Base Theme.Black')
+      ]
+    },
+
+    colorNames: function () {
+      return [
+        this.$t('Settings.Theme Settings.Main Color Theme.Red'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Pink'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Purple'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Deep Purple'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Indigo'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Blue'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Light Blue'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Cyan'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Teal'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Green'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Light Green'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Lime'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Yellow'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Amber'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Orange'),
+        this.$t('Settings.Theme Settings.Main Color Theme.Deep Orange')
+      ]
     }
   },
   mounted: function () {
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index 4566521e..3ac2c750 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -3,11 +3,11 @@
     class="relative card"
   >
     <h3>
-      {{ title }}
+      {{ $t("Settings.Theme Settings.Theme Settings") }}
     </h3>
     <ft-flex-box>
       <ft-toggle-switch
-        label="Match Top Bar with Main Color"
+        :label="$t('Settings.Theme Settings.Match Top Bar with Main Color')"
         :default-value="barColor"
         @change="updateBarColor"
       />
@@ -15,21 +15,21 @@
     <br>
     <ft-flex-box>
       <ft-select
-        placeholder="Base Theme"
+        :placeholder="$t('Settings.Theme Settings.Base Theme.Base Theme')"
         :value="currentBaseTheme"
         :select-names="baseThemeNames"
         :select-values="baseThemeValues"
         @change="updateBaseTheme"
       />
       <ft-select
-        placeholder="Main Color Theme"
+        :placeholder="$t('Settings.Theme Settings.Main Color Theme.Main Color Theme')"
         :value="currentMainColor"
         :select-names="colorNames"
         :select-values="colorValues"
         @change="updateMainColor"
       />
       <ft-select
-        placeholder="Secondary Color Theme"
+        :placeholder="$t('Settings.Theme Settings.Secondary Color Theme')"
         :value="currentSecColor"
         :select-names="colorNames"
         :select-values="colorValues"
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 6e7b2584..e04cf8c4 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -36,7 +36,7 @@
     <div class="middle">
       <div class="searchContainer">
         <ft-input
-          placeholder="Search / Go to URL"
+          :placeholder="$t('Search / Go to URL')"
           class="searchInput"
           :is-search="true"
           :data-list="searchSuggestionsDataList"
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index d4c8440c..fccdd3ed 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -63,11 +63,6 @@ export default Vue.extend({
   data: function () {
     return {
       formatTypeLabel: 'VIDEO FORMATS',
-      formatTypeNames: [
-        'USE DASH FORMATS',
-        'USE LEGACY FORMATS',
-        'USE AUDIO FORMATS'
-      ],
       formatTypeValues: [
         'dash',
         'legacy',
@@ -84,6 +79,14 @@ export default Vue.extend({
       return this.$store.getters.getUsingElectron
     },
 
+    formatTypeNames: function () {
+      return [
+        this.$t('Change Format.Use Dash Formats').toUpperCase(),
+        this.$t('Change Format.Use Legacy Formats').toUpperCase(),
+        this.$t('Change Format.Use Audio Formats').toUpperCase()
+      ]
+    },
+
     totalLikeCount: function () {
       return this.likeCount + this.dislikeCount
     },
@@ -93,17 +96,18 @@ export default Vue.extend({
     },
 
     parsedViewCount: function () {
-      return this.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' views'
+      return this.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ` ${this.$t('Video.Views').toLowerCase()}`
     },
 
     subscribedText: function () {
-      return `SUBSCRIBE ${this.subscriptionCountText}`
+      return `${this.$t('Subscribe').toUpperCase()} ${this.subscriptionCountText}`
     },
 
     dateString() {
       const date = new Date(this.published)
       const dateSplit = date.toDateString().split(' ')
-      return `${dateSplit[1]} ${dateSplit[2]}, ${dateSplit[3]}`
+      const localeDateString = `Video.Published.${dateSplit[1]}`
+      return `${this.$t(localeDateString)} ${dateSplit[2]}, ${dateSplit[3]}`
     }
   },
   methods: {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 829c3dfe..965b4988 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -38,7 +38,7 @@
     </div>
     <div>
       <div class="datePublished">
-        Published {{ dateString }}
+        {{ $t("Video.Published on") }} {{ dateString }}
       </div>
       <div class="viewCount">
         {{ parsedViewCount }}
@@ -59,14 +59,14 @@
       </div>
       <div class="videoOptions">
         <ft-icon-button
-          title="Toggle Theatre Mode"
+          :title="$t('Toggle Theatre Mode')"
           class="theatreModeButton option"
           icon="expand-alt"
           theme="secondary"
           @click="$emit('theatreMode')"
         />
         <ft-icon-button
-          title="Change Video Formats"
+          :title="$t('Change Format.Change Video Formats')"
           class="option"
           theme="secondary"
           icon="file-video"
diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue
index bdec1920..8dbabd64 100644
--- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue
+++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue
@@ -1,7 +1,7 @@
 <template>
   <ft-card class="relative watchVideoRecommendations">
     <h3>
-      Up Next
+      {{ $t("Up Next") }}
     </h3>
     <ft-list-video
       v-for="(video, index) in data"
diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue
index 150112c5..24b5cf42 100644
--- a/src/renderer/views/History/History.vue
+++ b/src/renderer/views/History/History.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <ft-card class="card">
-      <h3>History</h3>
+      <h3>{{ $t("History.History") }}</h3>
       <ft-flex-box>
         <p class="message">
-          This part of the app is not ready yet. Come back later when progress has been made.
+          {{ $t("This part of the app is not ready yet. Come back later when progress has been made.") }}
         </p>
       </ft-flex-box>
     </ft-card>
diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue
index 9181ab48..c148cd79 100644
--- a/src/renderer/views/Popular/Popular.vue
+++ b/src/renderer/views/Popular/Popular.vue
@@ -8,7 +8,7 @@
       v-else
       class="card"
     >
-      <h3>Most Popular</h3>
+      <h3>{{ $t("Most Popular") }}</h3>
       <ft-element-list
         :data="shownResults"
       />
diff --git a/src/renderer/views/Subscriptions/Subscriptions.vue b/src/renderer/views/Subscriptions/Subscriptions.vue
index f2ee3130..ad990d1f 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.vue
+++ b/src/renderer/views/Subscriptions/Subscriptions.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ft-card class="card">
-      <h3>Subscriptions</h3>
+      <h3>{{ $t("Subscriptions.Subscriptions") }}</h3>
       <ft-flex-box>
         <p class="message">
           {{ $t("This part of the app is not ready yet. Come back later when progress has been made.") }}
diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue
index 48651268..54eef065 100644
--- a/src/renderer/views/Trending/Trending.vue
+++ b/src/renderer/views/Trending/Trending.vue
@@ -8,7 +8,7 @@
       v-else
       class="card"
     >
-      <h3>Trending</h3>
+      <h3>{{ $t("Trending") }}</h3>
       <ft-element-list
         :data="shownResults"
       />
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue
index 59161a2d..77fe35b1 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.vue
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <ft-card class="card">
-      <h3>Your Playlists</h3>
+      <h3>{{ $t("User Playlists.Your Playlists") }}</h3>
       <ft-flex-box>
         <p class="message">
-          This part of the app is not ready yet. Come back later when progress has been made.
+          {{ $t("This part of the app is not ready yet. Come back later when progress has been made.") }}
         </p>
       </ft-flex-box>
     </ft-card>
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 703c5ee2..2f372cf0 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -213,7 +213,7 @@ export default Vue.extend({
           this.recommendedVideos = result.related_videos
           this.videoLikeCount = result.videoDetails.likes
           this.videoDislikeCount = result.videoDetails.dislikes
-          this.isLive = result.player_response.videoDetails.isLive
+          this.isLive = result.player_response.videoDetails.isLiveContent
 
           if (this.videoDislikeCount === null) {
             this.videoDislikeCount = 0
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index d836ed60..32fd8138 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -89,35 +89,11 @@ Subscriptions:
       Your Subscription list is currently empty. Start adding subscriptions to see them here.
 
     'Getting Subscriptions.  Please wait...': Getting Subscriptions.  Please wait…
-    Live Now: Live Now
-    Published:
-        Jan: Jan
-        Feb: Feb
-        Mar: Mar
-        Apr: Apr
-        May: May
-        Jun: Jun
-        Jul: Jul
-        Aug: Aug
-        Sep: Sep
-        Oct: Oct
-        Nov: Nov
-        Dec: Dec
-        Hour: Hour
-        Hours: Hours
-        Day: Day
-        Days: Days
-        Week: Week
-        Weeks: Weeks
-        Month: Month
-        Months: Months
-        Year: Year
-        Years: Years
-        Ago: Ago
-    Published on: Published on
-Featured: Featured
+Trending: Trending
 Most Popular: Most Popular
 Playlists: Playlists
+User Playlists:
+  Your Playlists: Your Playlists
 History:
   # On History Page
   History: History
@@ -130,8 +106,8 @@ Settings:
     Fallback to Non-Preferred Backend on Failure: Fallback to Non-Preferred Backend on Failure
     Enable Search Suggestions: Enable Search Suggestions
     Default Landing Page: Default Landing Page
-    Perferred API Backend:
-      Perferred API Backend: Perferred API Backend
+    Preferred API Backend:
+      Preferred API Backend: Preferred API Backend
       Local API: Local API
       Invidious API: Invidious API
     Video View Type:
@@ -160,7 +136,7 @@ Settings:
       Red: Red
       Pink: Pink
       Purple: Purple
-      Dark Purple: Dark Purple
+      Deep Purple: Deep Purple
       Indigo: Indigo
       Blue: Blue
       Light Blue: Light Blue
@@ -272,7 +248,34 @@ Subscriber: Subscriber
 Subscribers: Subscribers
 Subscribe: Subscribe
 Unsubscribe: Unsubscribe
-Video: Video
+Video:
+  Views: Views
+  Live Now: Live Now
+  Published:
+      Jan: Jan
+      Feb: Feb
+      Mar: Mar
+      Apr: Apr
+      May: May
+      Jun: Jun
+      Jul: Jul
+      Aug: Aug
+      Sep: Sep
+      Oct: Oct
+      Nov: Nov
+      Dec: Dec
+      Hour: Hour
+      Hours: Hours
+      Day: Day
+      Days: Days
+      Week: Week
+      Weeks: Weeks
+      Month: Month
+      Months: Months
+      Year: Year
+      Years: Years
+      Ago: Ago
+  Published on: Published on
 #& Videos
 Videos:
   #& Sort By
@@ -299,13 +302,14 @@ Share Playlist:
 # On Video Watch Page
 #* Published
 #& Views
+Toggle Theatre Mode: Toggle Theatre Mode
 Change Format:
-  Change Format: Change Format
+  Change Video Formats: Change Video Formats
   Use Dash Formats: Use Dash Formats
   Use Legacy Formats: Use Legacy Formats
   Use Audio Formats: Use Audio Formats
 Share:
-  Share: Share
+  Share Video: Share Video
   Copy Link: Copy Link
   Open Link: Open Link
   Copy Embed: Copy Embed