Move invidious out of stores (#3045)

* move invidious out of stores * fix getting more replies & local api fallback for comments * throw error if error message found in invidious response * fix issue with data setting * fix issue with replacing thumbnails * add bank line, remove slash * Apply suggestions from code review Co-authored-by: absidue <[email protected]> Co-authored-by: absidue <[email protected]>
FreeTubeApp · Jan 12, 2023 · 03f73c5 · 03f73c5
1 parent 0c69fc2
commit 03f73c5
Show file tree

Hide file tree

Showing 22 changed files with 201 additions and 232 deletions.
diff --git a/src/main/index.js b/src/main/index.js
@@ -457,7 +457,7 @@ function runApp() {
       darkTheme: nativeTheme.shouldUseDarkColors,
       icon: process.env.NODE_ENV === 'development'
         ? path.join(__dirname, '../../_icons/iconColor.png')
-        /* eslint-disable-next-line */
+        /* eslint-disable-next-line n/no-path-concat */
         : `${__dirname}/_icons/iconColor.png`,
       autoHideMenuBar: true,
       // useContentSize: true,
@@ -548,7 +548,7 @@ function runApp() {
       if (windowStartupUrl != null) {
         newWindow.loadURL(windowStartupUrl)
       } else {
-        /* eslint-disable-next-line */
+        /* eslint-disable-next-line n/no-path-concat */
         newWindow.loadFile(`${__dirname}/index.html`)
       }
     }

diff --git a/src/renderer/components/data-settings/data-settings.js b/src/renderer/components/data-settings/data-settings.js
@@ -16,6 +16,7 @@ import {
   showToast,
   writeFileFromDialog
 } from '../../helpers/utils'
+import { invidiousAPICall } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'DataSettings',
@@ -1018,7 +1019,7 @@ export default Vue.extend({
           params: {}
         }
 
-        this.invidiousAPICall(subscriptionsPayload).then((response) => {
+        invidiousAPICall(subscriptionsPayload).then((response) => {
           resolve(response)
         }).catch((err) => {
           console.error(err)
@@ -1116,7 +1117,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'invidiousAPICall',
       'updateProfile',
       'compactProfiles',
       'updateShowProgressBar',

diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.js b/src/renderer/components/ft-list-channel/ft-list-channel.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import i18n from '../../i18n/index'
+import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'FtListChannel',
@@ -76,14 +77,9 @@ export default Vue.extend({
 
     parseInvidiousData: function () {
       // Can be prefixed with `https://` or `//` (protocol relative)
-      let thumbnailUrl = this.data.authorThumbnails[2].url
+      const thumbnailUrl = this.data.authorThumbnails[2].url
 
-      // Update protocol relative URL to be prefixed with `https://`
-      if (thumbnailUrl.startsWith('//')) {
-        thumbnailUrl = `https:${thumbnailUrl}`
-      }
-
-      this.thumbnail = thumbnailUrl.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+      this.thumbnail = youtubeImageUrlToInvidious(thumbnailUrl, this.currentInvidiousInstance)
 
       this.channelName = this.data.author
       this.id = this.data.authorId

diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
@@ -7,6 +7,7 @@ import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubbl
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
 import { showToast } from '../../helpers/utils'
+import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'FtProfileChannelList',
@@ -80,7 +81,7 @@ export default Vue.extend({
         return 0
       }).map((channel) => {
         if (this.backendPreference === 'invidious') {
-          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
         channel.selected = false
         return channel
@@ -101,7 +102,7 @@ export default Vue.extend({
         return 0
       }).map((channel) => {
         if (this.backendPreference === 'invidious') {
-          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
         channel.selected = false
         return channel

diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
@@ -7,6 +7,7 @@ import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubbl
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import { showToast } from '../../helpers/utils'
+import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'FtProfileFilterChannelsList',
@@ -71,7 +72,7 @@ export default Vue.extend({
         return index === -1
       }).map((channel) => {
         if (this.backendPreference === 'invidious') {
-          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
         channel.selected = false
         return channel
@@ -98,7 +99,7 @@ export default Vue.extend({
         return index === -1
       }).map((channel) => {
         if (this.backendPreference === 'invidious') {
-          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
         channel.selected = false
         return channel

diff --git a/src/renderer/components/side-nav/side-nav.js b/src/renderer/components/side-nav/side-nav.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import SideNavMoreOptions from '../side-nav-more-options/side-nav-more-options.vue'
+import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'SideNav',
@@ -41,7 +42,7 @@ export default Vue.extend({
         return 0
       }).map((channel) => {
         if (this.backendPreference === 'invidious') {
-          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
 
         return channel

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
@@ -8,6 +8,7 @@ import debounce from 'lodash.debounce'
 import { IpcChannels } from '../../../constants'
 import { openInternalPath, showToast } from '../../helpers/utils'
 import { clearLocalSearchSuggestionsSession, getLocalSearchSuggestions } from '../../helpers/api/local'
+import { invidiousAPICall } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'TopNav',
@@ -257,7 +258,7 @@ export default Vue.extend({
         }
       }
 
-      this.invidiousAPICall(searchPayload).then((results) => {
+      invidiousAPICall(searchPayload).then((results) => {
         this.searchSuggestionsDataList = results.suggestions
       }).catch((err) => {
         console.error(err)
@@ -339,7 +340,6 @@ export default Vue.extend({
     },
     ...mapActions([
       'getYoutubeUrlInfo',
-      'invidiousAPICall'
     ])
   }
 })
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js
@@ -1,5 +1,4 @@
 import Vue from 'vue'
-import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtSelect from '../../components/ft-select/ft-select.vue'
@@ -12,6 +11,7 @@ import {
   stripHTML,
   toLocalePublicationString
 } from '../../helpers/utils'
+import { invidiousGetCommentReplies, invidiousGetComments } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'WatchVideoComments',
@@ -245,50 +245,12 @@ export default Vue.extend({
       }
     },
 
-    parseInvidiousCommentData: function (response) {
-      return response.comments.map((comment) => {
-        comment.showReplies = false
-        comment.authorLink = comment.authorId
-        comment.authorThumb = comment.authorThumbnails[1].url.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
-        if (this.hideCommentLikes) {
-          comment.likes = null
-        } else {
-          comment.likes = comment.likeCount
-        }
-        comment.text = autolinker.link(stripHTML(comment.content))
-        comment.dataType = 'invidious'
-        comment.isOwner = comment.authorIsChannelOwner
-
-        if (typeof (comment.replies) !== 'undefined' && typeof (comment.replies.replyCount) !== 'undefined') {
-          comment.numReplies = comment.replies.replyCount
-          comment.replyContinuation = comment.replies.continuation
-        } else {
-          comment.numReplies = 0
-          comment.replyContinuation = ''
-        }
-
-        comment.replies = []
-        comment.time = toLocalePublicationString({
-          publishText: comment.publishedText
-        })
-
-        return comment
-      })
-    },
-
     getCommentDataInvidious: function () {
-      const payload = {
-        resource: 'comments',
+      invidiousGetComments({
         id: this.id,
-        params: {
-          continuation: this.nextPageToken ?? '',
-          sort_by: this.sortNewest ? 'new' : 'top'
-        }
-      }
-
-      this.invidiousAPICall(payload).then((response) => {
-        const commentData = this.parseInvidiousCommentData(response)
-
+        nextPageToken: this.nextPageToken,
+        sortNewest: this.sortNewest
+      }).then(({ response, commentData }) => {
         this.commentData = this.commentData.concat(commentData)
         this.nextPageToken = response.continuation
         this.isLoading = false
@@ -301,7 +263,12 @@ export default Vue.extend({
         })
         if (process.env.IS_ELECTRON && this.backendFallback && this.backendPreference === 'invidious') {
           showToast(this.$t('Falling back to local API'))
-          this.getCommentDataLocal()
+          this.getCommentDataLocal({
+            videoId: this.id,
+            setCookie: false,
+            sortByNewest: this.sortNewest,
+            continuation: this.nextPageToken ? this.nextPageToken : undefined
+          })
         } else {
           this.isLoading = false
         }
@@ -310,32 +277,21 @@ export default Vue.extend({
 
     getCommentRepliesInvidious: function (index) {
       showToast(this.$t('Comments.Getting comment replies, please wait'))
-      const payload = {
-        resource: 'comments',
-        id: this.id,
-        params: {
-          continuation: this.commentData[index].replyContinuation
-        }
-      }
-
-      this.invidiousAPICall(payload).then((response) => {
-        const commentData = this.parseInvidiousCommentData(response)
-
-        this.commentData[index].replies = commentData
-        this.commentData[index].showReplies = true
-        this.isLoading = false
-      }).catch((xhr) => {
-        console.error(xhr)
-        const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        showToast(`${errorMessage}: ${xhr.responseText}`, 10000, () => {
-          copyToClipboard(xhr.responseText)
+      const replyToken = this.commentData[index].replyToken
+      invidiousGetCommentReplies({ id: this.id, replyToken: replyToken })
+        .then(({ commentData, continuation }) => {
+          this.commentData[index].replies = commentData
+          this.commentData[index].showReplies = true
+          this.commentData[index].replyToken = continuation
+          this.isLoading = false
+        }).catch((xhr) => {
+          console.error(xhr)
+          const errorMessage = this.$t('Invidious API Error (Click to copy)')
+          showToast(`${errorMessage}: ${xhr.responseText}`, 10000, () => {
+            copyToClipboard(xhr.responseText)
+          })
+          this.isLoading = false
         })
-        this.isLoading = false
-      })
-    },
-
-    ...mapActions([
-      'invidiousAPICall'
-    ])
+    }
   }
 })
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -287,7 +287,6 @@ export default Vue.extend({
   },
   mounted: function () {
     if ('mediaSession' in navigator) {
-      /* eslint-disable-next-line */
       navigator.mediaSession.metadata = new MediaMetadata({
         title: this.title,
         artist: this.channelName,

diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js
@@ -1,10 +1,11 @@
 import Vue from 'vue'
-import { mapActions, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
 import FtLoader from '../ft-loader/ft-loader.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtListVideoLazy from '../ft-list-video-lazy/ft-list-video-lazy.vue'
 import { copyToClipboard, showToast } from '../../helpers/utils'
 import { getLocalPlaylist, parseLocalPlaylistVideo } from '../../helpers/api/local'
+import { invidiousGetPlaylistInfo } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'WatchVideoPlaylist',
@@ -316,12 +317,7 @@ export default Vue.extend({
     getPlaylistInformationInvidious: function () {
       this.isLoading = true
 
-      const payload = {
-        resource: 'playlists',
-        id: this.playlistId
-      }
-
-      this.invidiousGetPlaylistInfo(payload).then((result) => {
+      invidiousGetPlaylistInfo({ playlistId: this.playlistId }).then((result) => {
         this.playlistTitle = result.title
         this.channelName = result.author
         this.channelId = result.authorId
@@ -364,10 +360,6 @@ export default Vue.extend({
       this.randomizedPlaylistItems = items
     },
 
-    ...mapActions([
-      'invidiousGetPlaylistInfo'
-    ]),
-
     ...mapMutations([
       'setCachedPlaylist'
     ])