Add Locale Strings to Channel and Search pages

2020-08-08 23:15:00 -04:00 · 2020-08-08 23:15:00 -04:00 · 99524f3556
parent 4a82822c69
commit 99524f3556
7 changed files with 214 additions and 58 deletions
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.js
+++ b/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)
--- a/src/renderer/views/Channel/Channel.js
+++ b/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) => {
-        console.log(error)
+      }).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)
+          }
+        })
        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
        }
      })
    }
--- a/src/renderer/views/Channel/Channel.vue
+++ b/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
--- a/src/renderer/views/Search/Search.js
+++ b/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'
+    ])
  }
 })
--- a/src/renderer/views/Search/Search.vue
+++ b/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>
--- a/src/renderer/views/Watch/Watch.js
+++ b/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')
            })
          }
        })
--- a/static/locales/en-US.yaml
+++ b/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'