Update Dependencies and Add More Locales Strings to App

package-lock.json

@@ -6035,9 +6035,9 @@
       "dev": true
     },
     "css-loader": {
-      "version": "4.2.0",
+      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.2.1.tgz",
-      "integrity": "sha512-ko7a9b0iFpWtk9eSI/C8IICvZeGtYnjxYjw45rJprokXj/+kBd/siX4vAIBq9Uij8Jubc4jL1EvSnTjCEwaHSw==",
+      "integrity": "sha512-MoqmF1if7Z0pZIEXA4ZF9PgtCXxWbfzfJM+3p+OYfhcrwcqhaCRb74DSnfzRl7e024xEiCRn5hCvfUbTf2sgFA==",
       "dev": true,
       "requires": {
         "camelcase": "^6.0.0",
@@ -6834,9 +6834,9 @@
       }
     },
     "electron": {
-      "version": "9.1.2",
+      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-9.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-9.2.0.tgz",
-      "integrity": "sha512-xEYadr3XqIqJ4ktBPo0lhzPdovv4jLCpiUUGc2M1frUhFhwqXokwhPaTUcE+zfu5+uf/ONDnQApwjzznBsRrgQ==",
+      "integrity": "sha512-4ecZ3rcGg//Gk4fAK3Jo61T+uh36JhU6HHR/PTujQqQiBw1g4tNPd4R2hGGth2d+7FkRIs5GdRNef7h64fQEMw==",
       "dev": true,
       "requires": {
         "@electron/get": "^1.0.1",
@@ -7181,9 +7181,9 @@
       }
     },
     "electron-context-menu": {
-      "version": "2.2.0",
+      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/electron-context-menu/-/electron-context-menu-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/electron-context-menu/-/electron-context-menu-2.3.0.tgz",
-      "integrity": "sha512-ArnzPlGqBrkOFOAWbq4aVWMtN6ZfYxVNon8s+akOm7ffnNv8yqYi4EPiMeQ5UU894dPi7I1PhTGVKBlOQM4a1g==",
+      "integrity": "sha512-XYsYkNY+jvX4C5o09qMuZoKL6e9frnQzBFehZSIiKp6zK0u3XYowJYDyK3vDKKZxYsOIGiE/Gbx40jERC03Ctw==",
       "requires": {
         "cli-truncate": "^2.0.0",
         "electron-dl": "^3.0.0",
@@ -7201,9 +7201,9 @@
       }
     },
     "electron-dl": {
-      "version": "3.0.1",
+      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-3.0.2.tgz",
-      "integrity": "sha512-JHEsUCusT7x/i682LNl1gJYWTiic71Sp3ykdvwbgywGuY19dLUd3VqkE5zI905e4Wy+G/pDcLjoeFo0SgCm3CA==",
+      "integrity": "sha512-pRgE9Jbhoo5z6Vk3qi+vIrfpMDlCp2oB1UeR96SMnsfz073jj0AZGQwp69EdIcEvlUlwBSGyJK8Jt6OB6JLn+g==",
       "requires": {
         "ext-name": "^5.0.0",
         "pupa": "^2.0.1",
@@ -16363,14 +16363,14 @@
       }
     },
     "sass-loader": {
-      "version": "9.0.2",
+      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-9.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-9.0.3.tgz",
-      "integrity": "sha512-nphcum3jNI442njnrZ5wJgSNX5lfEOHOKHCLf+PrTIaleploKqAMUuT9CVKjf+lyi6c2MCGPHh1vb9nGsjnZJA==",
+      "integrity": "sha512-fOwsP98ac1VMme+V3+o0HaaMHp8Q/C9P+MUazLFVi3Jl7ORGHQXL1XeRZt3zLSGZQQPC8xE42Y2WptItvGjDQg==",
       "dev": true,
       "requires": {
-        "klona": "^1.1.1",
+        "klona": "^1.1.2",
         "loader-utils": "^2.0.0",
-        "neo-async": "^2.6.1",
+        "neo-async": "^2.6.2",
         "schema-utils": "^2.7.0",
         "semver": "^7.3.2"
       },
@@ -16388,9 +16388,9 @@
           }
         },
         "ajv-keywords": {
-          "version": "3.5.1",
+          "version": "3.5.2",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.1.tgz",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-          "integrity": "sha512-KWcq3xN8fDjSB+IMoh2VaXVhRI0BBGxoYp3rx7Pkb6z0cFjYR9Q9l4yZqqals0/zsioCmocC5H6UvsGD4MoIBA==",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
           "dev": true
         },
         "big.js": {
@@ -16422,6 +16422,12 @@
             "json5": "^2.1.2"
           }
         },
+        "neo-async": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+          "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+          "dev": true
+        },
         "schema-utils": {
           "version": "2.7.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -18820,9 +18826,9 @@
       }
     },
     "vue-router": {
-      "version": "3.3.4",
+      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.2.tgz",
-      "integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg=="
+      "integrity": "sha512-n3Ok70hW0EpcJF4lcWIwSHAQbFTnIOLl/fhO8+oTs4jHNtBNsovcVvPZeTOyKEd8C3xF1Crft2ASuOiVT5K1mw=="
     },
     "vue-style-loader": {
       "version": "4.1.2",
@@ -20042,9 +20048,9 @@
       }
     },
     "yt-channel-info": {
-      "version": "1.0.2",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/yt-channel-info/-/yt-channel-info-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/yt-channel-info/-/yt-channel-info-1.0.3.tgz",
-      "integrity": "sha512-zY7+wrBVrooI1jbEsiIMrjf+/kD0V7XpiewoPpu0uwkGUzyboNYtgxRJ1808YutyW5F+2vfAfEMDQv19k0jJ5g==",
+      "integrity": "sha512-AFFh403fCX+vRei+bExIwgO7OPDydbLdq57HtZIQ1bn7/f4w7Vv7Vh/G+HT9s5yIApbqrbR9uPetPWofG0KDuw==",
       "requires": {
         "axios": "^0.18.0",
         "querystring": "^0.2.0"
@@ -20099,17 +20105,17 @@
       }
     },
     "ytpl": {
-      "version": "0.2.3",
+      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/ytpl/-/ytpl-0.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/ytpl/-/ytpl-0.2.4.tgz",
-      "integrity": "sha512-UfPAGj8RIQoWqa1nTB6leqkBUBVKg36Tv5gtSKtnT4vy7AvGL9iUnVIBkzII6lrds5oBS8e+hxciz/nEqx0ztw==",
+      "integrity": "sha512-ExjaGdNucs9mjWZ+6BT4c/LV0B2NmLv0gcLoX9DnY2Qfq1fWAEYZQ1PE3E820BVlPcX5mF39guNXeFk/APT9ew==",
       "requires": {
         "html-entities": "^1.1.3"
       }
     },
     "ytsr": {
-      "version": "0.1.20",
+      "version": "0.1.21",
-      "resolved": "https://registry.npmjs.org/ytsr/-/ytsr-0.1.20.tgz",
+      "resolved": "https://registry.npmjs.org/ytsr/-/ytsr-0.1.21.tgz",
-      "integrity": "sha512-enrGr+JQEFXzEo1jvGbdaw7odAemHl6sR3Wyi50ympb/k46kKZ16gqxHgwf8RD3+pLzv1aZea2kJ3iURQXEvfw==",
+      "integrity": "sha512-JbHqd/0LdzqfxblyAx1Nh+/YOhkGmXnf/w6djqPYeCRlyRgH2um3yyfZ+lJVIvCn431fEOfPvX6byg2wJM8YJA==",
       "requires": {
         "html-entities": "^1.1.3"
       }

package.json

@@ -15,7 +15,7 @@
     "autolinker": "^3.14.1",
     "bulma-pro": "^0.2.0",
     "dateformat": "^3.0.3",
-    "electron-context-menu": "^2.2.0",
+    "electron-context-menu": "^2.3.0",
     "jquery": "^3.5.1",
     "js-yaml": "^3.14.0",
     "lodash.debounce": "^4.0.8",
@@ -33,18 +33,18 @@
     "vue": "^2.6.11",
     "vue-electron": "^1.0.6",
     "vue-i18n": "^8.20.0",
-    "vue-router": "^3.3.4",
+    "vue-router": "^3.4.2",
     "vuex": "^3.5.1",
     "xml2json": "^0.12.0",
     "youtube-chat": "^1.1.0",
     "youtube-comments-fetch": "^1.0.1",
     "youtube-comments-task": "^1.3.15",
     "youtube-suggest": "^1.1.0",
-    "yt-channel-info": "^1.0.2",
+    "yt-channel-info": "^1.0.3",
     "yt-xml2vtt": "^1.1.1",
     "ytdl-core": "^3.2.0",
-    "ytpl": "^0.2.3",
+    "ytpl": "^0.2.4",
-    "ytsr": "^0.1.20"
+    "ytsr": "^0.1.21"
   },
   "description": "A private YouTube client",
   "devDependencies": {
@@ -59,9 +59,9 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "copy-webpack-plugin": "^6.0.3",
-    "css-loader": "^4.2.0",
+    "css-loader": "^4.2.1",
     "devtron": "^1.4.0",
-    "electron": "^9.1.2",
+    "electron": "^9.2.0",
     "electron-builder": "^22.8.0",
     "electron-builder-squirrel-windows": "^22.8.1",
     "electron-debug": "^3.1.0",
@@ -85,7 +85,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",
     "sass": "^1.26.10",
-    "sass-loader": "^9.0.2",
+    "sass-loader": "^9.0.3",
     "style-loader": "^1.2.1",
     "tree-kill": "1.2.2",
     "typescript": "^3.9.7",

src/renderer/components/ft-share-button/ft-share-button.js

@@ -60,7 +60,9 @@ export default Vue.extend({
     },
 
     copyInvidious() {
-      this.showToast('Invidious URL copied to clipboard')
+      this.showToast({
+        message: this.$t('Share.Invidious URL copied to clipboard')
+      })
       this.copy(this.invidiousURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -71,7 +73,9 @@ export default Vue.extend({
     },
 
     copyYoutube() {
-      this.showToast('YouTube URL copied to clipboard')
+      this.showToast({
+        message: this.$t('Share.YouTube URL copied to clipboard')
+      })
       this.copy(this.youtubeURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -82,7 +86,9 @@ export default Vue.extend({
     },
 
     copyYoutubeEmbed() {
-      this.showToast('YouTube Embed URL copied to clipboard')
+      this.showToast({
+        message: this.$t('Share.YouTube Embed URL copied to clipboard')
+      })
       this.copy(this.youtubeEmbedURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -93,7 +99,9 @@ export default Vue.extend({
     },
 
     copyInvidiousEmbed() {
-      this.showToast('Invidious Embed URL copied to clipboard')
+      this.showToast({
+        message: this.$t('Share.Invidious Embed URL copied to clipboard')
+      })
       this.copy(this.invidiousEmbedURL)
       this.$refs.iconButton.toggleDropdown()
     },

src/renderer/components/watch-video-comments/watch-video-comments.js

@@ -68,8 +68,9 @@ export default Vue.extend({
     getCommentDataLocal: function () {
       console.log('Getting comment data please wait..')
       ytct(this.id, this.nextPageToken).fork(e => {
+        const errorMessage = this.$t('Local API Error (Click to copy)')
         this.showToast({
-          message: `Local API Error (Click to copy): ${e.message}`,
+          message: `${errorMessage}: ${e.message}`,
           time: 10000,
           action: () => {
             navigator.clipboard.writeText(e.message)
@@ -78,7 +79,7 @@ export default Vue.extend({
         console.error('ERROR', e)
         if (this.backendFallback && this.backendPreference === 'local') {
           this.showToast({
-            message: 'Falling back to Invidious API'
+            message: this.$t('Falling back to Invidious API')
           })
           this.getCommentDataInvidious()
         } else {
@@ -143,8 +144,18 @@ export default Vue.extend({
       }).catch((xhr) => {
         console.log('found an error')
         console.log(xhr)
+        const errorMessage = this.$t('Invidious API Error (Click to copy)')
+        this.showToast({
+          message: `${errorMessage}: ${xhr.responseText}`,
+          time: 10000,
+          action: () => {
+            navigator.clipboard.writeText(xhr.responseText)
+          }
+        })
         if (this.backendFallback && this.backendPreference === 'invidious') {
-          console.log('Falling back to local API')
+          this.showToast({
+            message: this.$t('Falling back to Local API')
+          })
           this.getCommentDataLocal()
         } else {
           this.isLoading = false
@@ -153,7 +164,9 @@ export default Vue.extend({
     },
 
     getCommentRepliesInvidious: function (index) {
-      console.log('Getting comment replies')
+      this.showToast({
+        message: this.$t('Getting comment replies, please wait')
+      })
       const payload = {
         resource: 'comments',
         id: this.id,
@@ -186,6 +199,14 @@ export default Vue.extend({
       }).catch((xhr) => {
         console.log('found an error')
         console.log(xhr)
+        const errorMessage = this.$t('Invidious API Error (Click to copy)')
+        this.showToast({
+          message: `${errorMessage}: ${xhr.responseText}`,
+          time: 10000,
+          action: () => {
+            navigator.clipboard.writeText(xhr.responseText)
+          }
+        })
         this.isLoading = false
       })
     },

src/renderer/components/watch-video-comments/watch-video-comments.vue

@@ -8,24 +8,24 @@
       class="getCommentsTitle"
       @click="getCommentData"
     >
-      Click to view comments
+      {{ $t("Comments.Click to View Comments") }}
     </h4>
     <h4
       v-if="commentData.length > 0 && !isLoading && !showComments"
       class="getCommentsTitle"
       @click="showComments = true"
     >
-      Click to view comments
+      {{ $t("Comments.Click to View Comments") }}
     </h4>
     <h3
       v-if="commentData.length > 0 && !isLoading && showComments"
     >
-      Comments
+      {{ $t("Comments.Comments") }}
       <span
         class="hideComments"
         @click="showComments = false"
       >
-        Hide Comments
+        {{ $t("Comments.Hide Comments") }}
       </span>
     </h3>
     <div
@@ -60,9 +60,11 @@
           class="commentMoreReplies"
           @click="getCommentReplies(index)"
         >
-          <span v-if="!comment.showReplies">View</span>
+          <span v-if="!comment.showReplies">{{ $t("Comments.View") }}</span>
           <span v-else>Hide</span>
-          {{ comment.numReplies }} replies
+          {{ comment.numReplies }}
+          <span v-if="comment.numReplies === 1">{{ $t("Comments.Reply").toLowerCase() }}</span>
+          <span v-else>{{ $t("Comments.Replies").toLowerCase() }}</span>
         </p>
         <div
           v-if="comment.showReplies"
@@ -106,7 +108,7 @@
       v-else-if="showComments && !isLoading"
     >
       <h3 class="center">
-        There are no comments available for this video.
+        {{ $t("There are no comments available for this video") }}
       </h3>
     </div>
     <h4
@@ -114,7 +116,7 @@
       class="getMoreComments"
       @click="getCommentData"
     >
-      Load More Comments
+      {{ $t("Load More Comments") }}
     </h4>
   </ft-card>
 </template>

src/renderer/components/watch-video-live-chat/watch-video-live-chat.js

@@ -77,7 +77,7 @@ export default Vue.extend({
   created: function () {
     if (!this.usingElectron) {
       this.hasError = true
-      this.errorMessage = 'Live Chat is currently not supported in this build.'
+      this.errorMessage = this.$t('Video["Live Chat is currently not supported in this build."]')
     } else {
       switch (this.backendPreference) {
         case 'local':
@@ -89,7 +89,7 @@ export default Vue.extend({
             this.getLiveChatLocal()
           } else {
             this.hasError = true
-            this.errorMessage = 'Live Chat is currently not supported with the Invidious API.  A direct connection to YouTube is required.'
+            this.errorMessage = this.$t('Video["Live Chat is currently not supported with the Invidious API.  A direct connection to YouTube is required."]')
             this.showEnableChat = true
             this.isLoading = false
           }
@@ -120,7 +120,7 @@ export default Vue.extend({
         console.log(reason)
         this.hasError = true
         this.showEnableChat = false
-        this.errorMessage = 'Chat is disabled or the Live Stream has ended.'
+        this.errorMessage = this.$t('Video["Chat is disabled or the Live Stream has ended."]')
       })
 
       this.liveChat.on('error', (err) => {

src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue

@@ -18,7 +18,7 @@
       />
       <ft-button
         v-if="showEnableChat"
-        label="Enable Live Chat"
+        :label="$t('Video.Enable Live Chat')"
         class="enableLiveChat"
         @click="enableLiveChat"
       />
@@ -30,7 +30,7 @@
       <p
         class="message"
       >
-        Live chat is enabled.  Chat messages will appear here once sent.
+        {{ $t("Video['Live chat is enabled.  Chat messages will appear here once sent.']") }}
       </p>
     </div>
     <div

src/renderer/components/watch-video-playlist/watch-video-playlist.css

@@ -36,7 +36,7 @@
 
 .playlistItems {
   overflow-y: auto;
-  height: 395px;
+  height: 380px;
 }
 
 .playlistItem {

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -51,7 +51,7 @@ export default Vue.extend({
 
     currentVideoIndex: function () {
       const index = this.playlistItems.findIndex((item) => {
-        return item.videoId === this.videoId
+        return item.id === this.videoId
       })
 
       return index + 1
@@ -61,13 +61,10 @@ export default Vue.extend({
       return this.playlistItems.length
     }
   },
-  watch: {
-    videoId () {
-      this.playlistWatchedVideoList.push(this.videoId)
-    }
-  },
   mounted: function () {
-    if (this.usingElectron) {
+    console.log('mount')
+    if (!this.usingElectron) {
+      console.log('wha')
       this.getPlaylistInformationInvidious()
     } else {
       switch (this.backendPreference) {
@@ -93,12 +90,12 @@ export default Vue.extend({
       if (this.loopEnabled) {
         this.loopEnabled = false
         this.showToast({
-          message: 'Loop is now disabled'
+          message: this.$t('Loop is now disabled')
         })
       } else {
         this.loopEnabled = true
         this.showToast({
-          message: 'Loop is now enabled'
+          message: this.$t('Loop is now enabled')
         })
       }
     },
@@ -107,12 +104,12 @@ export default Vue.extend({
       if (this.shuffleEnabled) {
         this.shuffleEnabled = false
         this.showToast({
-          message: 'Shuffle is now disabled'
+          message: this.$t('Shuffle is now disabled')
         })
       } else {
         this.shuffleEnabled = true
         this.showToast({
-          message: 'Shuffle is now enabled'
+          message: this.$t('Shuffle is now enabled')
         })
         this.shufflePlaylistItems()
       }
@@ -125,7 +122,7 @@ export default Vue.extend({
 
       if (this.shuffleEnabled) {
         const videoIndex = this.randomizedPlaylistItems.findIndex((item) => {
-          return item === this.videoId
+          return item.id === this.videoId
         })
 
         if (videoIndex === this.randomizedPlaylistItems.length - 1) {
@@ -137,12 +134,12 @@ export default Vue.extend({
               }
             )
             this.showToast({
-              message: 'Playing Next Video'
+              message: this.$t('Playing Next Video')
             })
             this.shufflePlaylistItems()
           } else {
             this.showToast({
-              message: 'The playlist has ended.  Enable loop to continue playing'
+              message: this.$t('The playlist has ended.  Enable loop to continue playing')
             })
           }
         } else {
@@ -153,38 +150,38 @@ export default Vue.extend({
             }
           )
           this.showToast({
-            message: 'Playing Next Video'
+            message: this.$t('Playing Next Video')
           })
         }
       } else {
         const videoIndex = this.playlistItems.findIndex((item) => {
-          return item.videoId === this.videoId
+          return item.id === this.videoId
         })
 
         if (videoIndex === this.playlistItems.length - 1) {
           if (this.loopEnabled) {
             this.$router.push(
               {
-                path: `/watch/${this.playlistItems[0].videoId}`,
+                path: `/watch/${this.playlistItems[0].id}`,
                 query: playlistInfo
               }
             )
             this.showToast({
-              message: 'Playing Next Video'
+              message: this.$t('Playing Next Video')
             })
           }
           this.showToast({
-            message: 'The playlist has ended.  Enable loop to continue playing'
+            message: this.$t('The playlist has ended.  Enable loop to continue playing')
           })
         } else {
           this.$router.push(
             {
-              path: `/watch/${this.playlistItems[videoIndex + 1].videoId}`,
+              path: `/watch/${this.playlistItems[videoIndex + 1].id}`,
               query: playlistInfo
             }
           )
           this.showToast({
-            message: 'Playing Next Video'
+            message: this.$t('Playing Next Video')
           })
         }
       }
@@ -201,7 +198,7 @@ export default Vue.extend({
 
       if (this.shuffleEnabled) {
         const videoIndex = this.randomizedPlaylistItems.findIndex((item) => {
-          return item.videoId === this.videoId
+          return item.id === this.videoId
         })
 
         if (videoIndex === 0) {
@@ -221,20 +218,20 @@ export default Vue.extend({
         }
       } else {
         const videoIndex = this.playlistItems.findIndex((item) => {
-          return item.videoId === this.videoId
+          return item.id === this.videoId
         })
 
         if (videoIndex === 0) {
           this.$router.push(
             {
-              path: `/watch/${this.playlistItems[this.randomizedPlaylistItems.length - 1].videoId}`,
+              path: `/watch/${this.playlistItems[this.randomizedPlaylistItems.length - 1].id}`,
               query: playlistInfo
             }
           )
         } else {
           this.$router.push(
             {
-              path: `/watch/${this.playlistItems[videoIndex - 1].videoId}`,
+              path: `/watch/${this.playlistItems[videoIndex - 1].id}`,
               query: playlistInfo
             }
           )
@@ -245,6 +242,8 @@ export default Vue.extend({
     getPlaylistInformationLocal: function () {
       this.isLoading = true
 
+      console.log(this.playlistId)
+
       this.$store.dispatch('ytGetPlaylistInfo', this.playlistId).then((result) => {
         console.log('done')
         console.log(result)
@@ -257,17 +256,24 @@ export default Vue.extend({
         this.channelId = result.author.id
 
         this.playlistItems = result.items
-
-        this.playlistWatchedVideoList.push(this.videoId)
         this.isLoading = false
       }).catch((err) => {
         console.log(err)
+        const errorMessage = this.$t('Local API Error (Click to copy):')
+        this.showToast({
+          message: `${errorMessage} ${err}`,
+          time: 10000,
+          action: () => {
+            navigator.clipboard.writeText(err)
+          }
+        })
         if (this.backendPreference === 'local' && this.backendFallback) {
-          console.log('Falling back to Invidious API')
+          this.showToast({
+            message: this.$t('Falling back to Invidious API')
+          })
           this.getPlaylistInformationInvidious()
         } else {
           this.isLoading = false
-          // TODO: Show toast with error message
         }
       })
     },
@@ -299,13 +305,23 @@ export default Vue.extend({
           this.playlistPage++
           this.getPlaylistInformationInvidious()
         } else {
-          this.playlistWatchedVideoList.push(this.videoId)
           this.isLoading = false
         }
       }).catch((err) => {
         console.log(err)
+        const errorMessage = this.$t('Invidious API Error (Click to copy):')
+        this.showToast({
+          message: `${errorMessage} ${err}`,
+          time: 10000,
+          action: () => {
+            navigator.clipboard.writeText(err)
+          }
+        })
         if (this.backendPreference === 'invidious' && this.backendFallback) {
           console.log('Error getting data with Invidious, falling back to local backend')
+          this.showToast({
+            message: this.$t('Falling back to Local API')
+          })
           this.getPlaylistInformationLocal()
         } else {
           this.isLoading = false
@@ -324,8 +340,8 @@ export default Vue.extend({
       this.playlistItems.forEach((item) => {
         const randomInt = Math.floor(Math.random() * remainingItems.length)
 
-        if (remainingItems[randomInt].videoId !== this.videoId) {
+        if (remainingItems[randomInt].id !== this.videoId) {
-          items.push(remainingItems[randomInt].videoId)
+          items.push(remainingItems[randomInt].id)
         }
 
         remainingItems.splice(randomInt, 1)

src/renderer/components/watch-video-playlist/watch-video-playlist.vue

@@ -58,7 +58,7 @@
         >
           <div class="videoIndexContainer">
             <font-awesome-icon
-              v-if="item.videoId === videoId"
+              v-if="item.id === videoId"
               class="videoIndexIcon"
               icon="play"
             />

src/renderer/views/Watch/Watch.js

@@ -482,7 +482,9 @@ export default Vue.extend({
           })
           console.log(err)
           if (!this.usingElectron || (this.backendPreference === 'local' && this.backendFallback)) {
-            this.showToast('Falling back to Invidious API')
+            this.showToast({
+              message: this.$t('Falling back to Invidious API')
+            })
             this.getVideoInformationInvidious()
           }
         })

src/renderer/views/Watch/Watch.sass

@@ -52,7 +52,7 @@
   .watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
     margin: 0 8px 16px
 
-  .watchVideoSidebar, .theatrePlaylist
+  .watchVideoSidebar, .watchVideoPlaylist
     height: 500px
 
   .watchVideoRecommendations, .theatreRecommendations

static/locales/en-US.yaml

@@ -251,6 +251,11 @@ Unsubscribe: Unsubscribe
 Video:
   Views: Views
   Live Now: Live Now
+  Enable Live Chat: Enable Live Chat
+  Live Chat is currently not supported in this build.: Live Chat is currently not supported in this build.
+  'Chat is disabled or the Live Stream has ended.': Chat is disabled or the Live Stream has ended.
+  Live chat is enabled.  Chat messages will appear here once sent.: Live chat is enabled.  Chat messages will appear here once sent.
+  'Live Chat is currently not supported with the Invidious API.  A direct connection to YouTube is required.': Live Chat is currently not supported with the Invidious API.  A direct connection to YouTube is required.
   Published:
       Jan: Jan
       Feb: Feb
@@ -315,14 +320,29 @@ Share:
   Copy Embed: Copy Embed
   Open Embed: Open Embed
   # On Click
-  URL has been copied to the clipboard: URL has been copied to clipboard
+  Invidious URL copied to clipboard: Invidious URL copied to clipboard
+  Invidious Embed URL copied to clipboard: Invidious Embed URL copied to clipboard
+  YouTube URL copied to clipboard: YouTube URL copied to clipboard
+  YouTube Embed URL copied to clipboard: YouTube Embed URL copied to clipboard
 Mini Player: Mini Player
+Comments:
+  Comments: Comments
   Click to View Comments: Click to View Comments
+  Getting comment replies, please wait: Getting comment replies, please wait
   Show Comments: Show Comments
+  Hide Comments: Hide Comments
+  # Context: View 10 Replies, View 1 Reply
+  View: View
+  Hide: Hide
+  Replies: Replies
+  Reply: Reply
+  There are no comments available for this video: There are no comments available for this video
+  Load More Comments: Load More Comments
 Up Next: Up Next
 
 # Toast Messages
 Local API Error (Click to copy): Local API Error (Click to copy)
+Invidious API Error (Click to copy): Invidious API Error (Click to copy)
 Falling back to Invidious API: Falling back to Invidious API
 Falling back to the local API: Falling back to the local API
 Subscriptions have not yet been implemented: Subscriptions have not yet been implemented
@@ -334,6 +354,7 @@ Playing Next Video: Playing Next Video
 Playing previous video: Playing previous video
 Playing next video in 5 seconds.  Click to cancel: Playing next video in 5 seconds.  Click to cancel
 Canceled next video autoplay: Canceled next video autoplay
+'The playlist has ended.  Enable loop to continue playing': 'The playlist has ended.  Enable loop to continue playing'
 
 Yes: Yes
 No: No