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 <48293849+absidue@users.noreply.github.com> Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
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'
  ])