Add Locale Strings to Channel and Search pages

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

@@ -274,9 +274,9 @@ export default Vue.extend({
         this.isLoading = false
       }).catch((err) => {
         console.log(err)
-        const errorMessage = this.$t('Local API Error (Click to copy):')
+        const errorMessage = this.$t('Local API Error (Click to copy)')
         this.showToast({
-          message: `${errorMessage} ${err}`,
+          message: `${errorMessage}: ${err}`,
           time: 10000,
           action: () => {
             navigator.clipboard.writeText(err)
@@ -324,9 +324,9 @@ export default Vue.extend({
         }
       }).catch((err) => {
         console.log(err)
-        const errorMessage = this.$t('Invidious API Error (Click to copy):')
+        const errorMessage = this.$t('Invidious API Error (Click to copy)')
         this.showToast({
-          message: `${errorMessage} ${err}`,
+          message: `${errorMessage}: ${err}`,
           time: 10000,
           action: () => {
             navigator.clipboard.writeText(err)

src/renderer/views/Channel/Channel.js

@@ -47,21 +47,11 @@ export default Vue.extend({
       searchResults: [],
       shownElementList: [],
       apiUsed: '',
-      videoSelectNames: [
-        'Newest',
-        'Oldest',
-        'Most Popular'
-      ],
       videoSelectValues: [
         'newest',
         'oldest',
         'popular'
       ],
-      playlistSelectNames: [
-        'Last Video Added',
-        'Newest',
-        'Oldest'
-      ],
       playlistSelectValues: [
         'last',
         'newest',
@@ -86,6 +76,22 @@ export default Vue.extend({
       return this.$store.getters.getSessionSearchHistory
     },
 
+    videoSelectNames: function () {
+      return [
+        this.$t('Channel.Videos.Sort Types.Newest'),
+        this.$t('Channel.Videos.Sort Types.Oldest'),
+        this.$t('Channel.Videos.Sort Types.Most Popular')
+      ]
+    },
+
+    playlistSelectNames: function () {
+      return [
+        this.$t('Channel.Playlists.Sort Types.Last Video Added'),
+        this.$t('Channel.Playlists.Sort Types.Newest'),
+        this.$t('Channel.Playlists.Sort Types.Oldest')
+      ]
+    },
+
     formattedSubCount: function () {
       return this.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
     },
@@ -191,12 +197,21 @@ export default Vue.extend({
         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.getChannelInfoInvidious()
         } else {
           this.isLoading = false
-          // TODO: Show toast with error message
         }
       })
     },
@@ -209,12 +224,21 @@ export default Vue.extend({
         this.isElementListLoading = 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.getChannelInfoInvidious()
         } else {
           this.isLoading = false
-          // TODO: Show toast with error message
         }
       })
     },
@@ -225,6 +249,14 @@ export default Vue.extend({
         this.videoContinuationString = response.continuation
       }).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)
+          }
+        })
       })
     },
 
@@ -247,8 +279,16 @@ export default Vue.extend({
         }
 
         this.isLoading = false
-      }).catch((error) => {
+      }).catch((err) => {
-        console.log(error)
+        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)
+          }
+        })
         this.isLoading = false
       })
     },
@@ -267,6 +307,16 @@ export default Vue.extend({
         this.latestVideos = this.latestVideos.concat(response)
         this.latestVideosPage++
         this.isElementListLoading = 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)
+          }
+        })
       })
     },
 
@@ -278,12 +328,21 @@ export default Vue.extend({
         this.isElementListLoading = 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.getPlaylistsInvidious()
         } else {
           this.isLoading = false
-          // TODO: Show toast with error message
         }
       })
     },
@@ -295,6 +354,14 @@ export default Vue.extend({
         this.playlistContinuationString = response.continuation
       }).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)
+          }
+        })
       })
     },
 
@@ -319,12 +386,21 @@ export default Vue.extend({
         this.isElementListLoading = 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('Falling back to Local API')
+          this.showToast({
+            message: this.$t('Falling back to Local API')
+          })
           this.getPlaylistsLocal()
         } else {
           this.isLoading = false
-          // TODO: Show toast with error message
         }
       })
     },
@@ -398,12 +474,21 @@ export default Vue.extend({
           this.searchContinuationString = response.continuation
         }).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.searchChannelInvidious()
           } else {
             this.isLoading = false
-            // TODO: Show toast with error message
           }
         })
       } else {
@@ -414,6 +499,14 @@ export default Vue.extend({
           this.searchContinuationString = response.continuation
         }).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)
+            }
+          })
         })
       }
     },
@@ -434,12 +527,21 @@ export default Vue.extend({
         this.searchPage++
       }).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('Falling back to Local API')
+          this.showToast({
+            message: this.$t('Falling back to Local API')
+          })
           this.searchChannelLocal()
         } else {
           this.isLoading = false
-          // TODO: Show toast with error message
         }
       })
     }

src/renderer/views/Channel/Channel.vue

@@ -34,7 +34,9 @@
           <span
             class="channelSubCount"
           >
-            {{ formattedSubCount }} Subscribers
+            {{ formattedSubCount }}
+            <span v-if="subCount === 1">{{ $t("Channel.Subscriber") }}</span>
+            <span v-else>{{ $t("Channel.Subscribers") }}</span>
           </span>
         </div>
         <ft-button
@@ -51,19 +53,19 @@
             class="tab"
             @click="changeTab('videos')"
           >
-            VIDEOS
+            {{ $t("Channel.Videos.Videos").toUpperCase() }}
           </div>
           <div
             class="tab"
             @click="changeTab('playlists')"
           >
-            PLAYLISTS
+            {{ $t("Channel.Playlists.Playlists").toUpperCase() }}
           </div>
           <div
             class="tab"
             @click="changeTab('about')"
           >
-            ABOUT
+            {{ $t("Channel.About.About").toUpperCase() }}
           </div>
           <ft-input
             placeholder="Search Channel"
@@ -100,7 +102,7 @@
         class="aboutTab"
       >
         <h2>
-          Channel Description
+          {{ $t("Channel.About.Channel Description") }}
         </h2>
         <div
           class="aboutInfo"
@@ -110,7 +112,7 @@
         <h2
           v-if="relatedChannels.length > 0"
         >
-          Featured Channels
+          {{ $t("Channel.About.Featured Channels") }}
         </h2>
         <ft-flex-box
           v-if="relatedChannels.length > 0"
@@ -139,7 +141,7 @@
           v-if="currentTab === 'videos' && latestVideos.length === 0"
         >
           <p class="message">
-            This channel does not currently have any videos
+            {{ $t("Channel.Videos.This channel does not currently have any videos") }}
           </p>
         </ft-flex-box>
         <ft-element-list
@@ -150,7 +152,7 @@
           v-if="currentTab === 'playlists' && latestPlaylists.length === 0"
         >
           <p class="message">
-            This channel does not currently have any playlists
+            {{ $t("Channel.Playlists.This channel does not currently have any playlists") }}
           </p>
         </ft-flex-box>
         <ft-element-list
@@ -161,7 +163,7 @@
           v-if="currentTab === 'search' && searchResults.length === 0"
         >
           <p class="message">
-            Your search results have returned 0 results
+            {{ $t("Channel.Your search results have returned 0 results") }}
           </p>
         </ft-flex-box>
         <div

src/renderer/views/Search/Search.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { mapActions } from 'vuex'
 import IsEqual from 'lodash.isequal'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -144,8 +145,18 @@ export default Vue.extend({
         this.$store.commit('addToSessionSearchHistory', historyPayload)
       }).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('Error getting data with local backend, falling back to Invidious')
+          this.showToast({
+            message: this.$t('Falling back to Invidious API')
+          })
           this.performSearchInvidious(payload)
         } else {
           this.isLoading = false
@@ -206,8 +217,18 @@ export default Vue.extend({
         this.$store.commit('addToSessionSearchHistory', historyPayload)
       }).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.performSearchLocal(payload)
         } else {
           this.isLoading = false
@@ -228,6 +249,10 @@ export default Vue.extend({
 
       console.log(payload)
 
+      this.showToast({
+        message: this.$t('Search Filters["Fetching results. Please wait"]')
+      })
+
       if (this.nextPageRef !== '') {
         this.performSearchLocal(payload)
       } else {
@@ -249,6 +274,10 @@ export default Vue.extend({
       }
 
       this.isLoading = false
-    }
+    },
+
+    ...mapActions([
+      'showToast'
+    ])
   }
 })

src/renderer/views/Search/Search.vue

@@ -10,7 +10,7 @@
       v-else
       class="card"
     >
-      <h3>Search Results</h3>
+      <h3>{{ $t("Search Filters.Search Results") }}</h3>
       <ft-element-list
         :data="shownResults"
       />
@@ -18,7 +18,7 @@
         class="getNextPage"
         @click="nextPage"
       >
-        <font-awesome-icon icon="search" /> Fetch more results…
+        <font-awesome-icon icon="search" /> {{ $t("Search Filters.Fetch more results") }}
       </div>
     </ft-card>
   </div>

src/renderer/views/Watch/Watch.js

@@ -328,8 +328,9 @@ export default Vue.extend({
           this.isLoading = false
         })
         .catch(err => {
+          const errorMessage = this.$t('Local API Error (Click to copy)')
           this.showToast({
-            message: `Local API Error (Click to copy): ${err}`,
+            message: `${errorMessage}: ${err}`,
             time: 10000,
             action: () => {
               navigator.clipboard.writeText(err)
@@ -337,7 +338,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()
           } else {
             this.isLoading = false
@@ -432,8 +435,9 @@ export default Vue.extend({
           this.isLoading = false
         })
         .catch(err => {
+          const errorMessage = this.$t('Invidious API Error (Click to copy)')
           this.showToast({
-            message: `Invidious API Error (Click to copy): ${err}`,
+            message: `${errorMessage}: ${err}`,
             time: 10000,
             action: () => {
               navigator.clipboard.writeText(err)
@@ -442,7 +446,7 @@ export default Vue.extend({
           console.log(err)
           if (this.backendPreference === 'invidious' && this.backendFallback) {
             this.showToast({
-              message: 'Falling back to the local API'
+              message: this.$t('Falling back to Local API')
             })
             this.getVideoInformationLocal()
           } else {
@@ -473,8 +477,9 @@ export default Vue.extend({
           this.videoSourceList = result.player_response.streamingData.formats
         })
         .catch(err => {
+          const errorMessage = this.$t('Local API Error (Click to copy)')
           this.showToast({
-            message: `Local API Error (Click to copy): ${err}`,
+            message: `${errorMessage}: ${err}`,
             time: 10000,
             action: () => {
               navigator.clipboard.writeText(err)
@@ -533,18 +538,17 @@ export default Vue.extend({
 
     handleVideoEnded: function () {
       if (this.watchingPlaylist) {
-        console.log('Playlist next video in 5 seconds')
         const timeout = setTimeout(() => {
           this.$refs.watchVideoPlaylist.playNextVideo()
         }, 5000)
 
         this.showToast({
-          message: 'Playing next video in 5 seconds.  Click to cancel',
+          message: this.$t('Playing next video in 5 seconds.  Click to cancel'),
           time: 5500,
           action: () => {
             clearTimeout(timeout)
             this.showToast({
-              message: 'Canceled next video autoplay'
+              message: this.$t('Canceled next video autoplay')
             })
           }
         })

static/locales/en-US.yaml

@@ -244,10 +244,32 @@ About:
   Latest FreeTube News: Latest FreeTube News
 
 #On Channel Page
+Channel:
   Subscriber: Subscriber
   Subscribers: Subscribers
   Subscribe: Subscribe
   Unsubscribe: Unsubscribe
+  Search Channel: Search Channel
+  Your search results have returned 0 results: Your search results have returned 0 results
+  Sort By: Sort By
+  Videos:
+    Videos: Videos
+    This channel does not currently have any videos: This channel does not currently have any videos
+    Sort Types:
+      Newest: Newest
+      Oldest: Oldest
+      Most Popular: Most Popular
+  Playlists:
+    Playlists: Playlists
+    This channel does not currently have any playlists: This channel does not currently have any playlists
+    Sort Types:
+      Last Video Added: Last Video Added
+      Newest: Newest
+      Oldest: Oldest
+  About:
+    About: About
+    Channel Description: Channel Description
+    Featured Channels: Featured Channels
 Video:
   Views: Views
   Live Now: Live Now
@@ -291,9 +313,6 @@ Videos:
 #& Playlists
 Playlist:
   #& About
-  Channel Description: Channel Description
-  Featured Channels: Featured Channels
-  Search Channel: Search Channel
   View Full Playlist: View Full Playlist
 
 # On Channel Playlist Page
@@ -351,7 +370,7 @@ Loop is now enabled: Loop is now enabled
 Shuffle is now disabled: Shuffle is now disabled
 Shuffle is now enabled: Shuffle is now enabled
 Playing Next Video: Playing Next Video
-Playing previous video: Playing previous 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'