From 6ccc7e9fa428199d9cc3f95aad7a5b82dcae1932 Mon Sep 17 00:00:00 2001 From: Svallinn <41585298+Svallinn@users.noreply.github.com> Date: Sat, 22 May 2021 00:56:32 +0100 Subject: [PATCH] Refactor: Swap `dispatch`/`commit` calls with mapped actions/mutations --- src/renderer/App.js | 28 +++++++++++++------ .../ft-video-player/ft-video-player.js | 5 ++-- src/renderer/components/top-nav/top-nav.js | 8 ++++-- .../watch-video-comments.js | 2 +- .../watch-video-live-chat.js | 11 ++++++-- .../watch-video-playlist.js | 8 ++++-- src/renderer/views/Channel/Channel.js | 12 ++++---- src/renderer/views/Playlist/Playlist.js | 12 ++++++-- src/renderer/views/Popular/Popular.js | 14 +++++++--- src/renderer/views/Search/Search.js | 8 ++++-- src/renderer/views/Trending/Trending.js | 5 ++-- src/renderer/views/Watch/Watch.js | 13 ++++----- 12 files changed, 81 insertions(+), 45 deletions(-) diff --git a/src/renderer/App.js b/src/renderer/App.js index 4ae67086..0d58afbf 100644 --- a/src/renderer/App.js +++ b/src/renderer/App.js @@ -1,5 +1,5 @@ import Vue from 'vue' -import { mapActions } from 'vuex' +import { mapActions, mapMutations } from 'vuex' import { ObserveVisibility } from 'vue-observe-visibility' import FtFlexBox from './components/ft-flex-box/ft-flex-box.vue' import TopNav from './components/top-nav/top-nav.vue' @@ -82,11 +82,11 @@ export default Vue.extend({ } }, mounted: function () { - this.$store.dispatch('grabUserSettings').then(() => { - this.$store.dispatch('grabAllProfiles', this.$t('Profile.All Channels')).then(async () => { - this.$store.dispatch('grabHistory') - this.$store.dispatch('grabAllPlaylists') - this.$store.commit('setUsingElectron', useElectron) + this.grabUserSettings().then(() => { + this.grabAllProfiles(this.$t('Profile.All Channels')).then(async () => { + this.grabHistory() + this.grabAllPlaylists() + this.setUsingElectron(useElectron) this.checkThemeSettings() await this.checkLocale() @@ -134,7 +134,7 @@ export default Vue.extend({ locale: this.$i18n.locale } - this.$store.dispatch('getRegionData', payload) + this.getRegionData(payload) }, checkThemeSettings: function () { @@ -301,7 +301,7 @@ export default Vue.extend({ }, handleYoutubeLink: function (href) { - this.$store.dispatch('getYoutubeUrlInfo', href).then((result) => { + this.getYoutubeUrlInfo(href).then((result) => { switch (result.urlType) { case 'video': { const { videoId, timestamp } = result @@ -393,7 +393,17 @@ export default Vue.extend({ ...mapActions([ 'showToast', - 'openExternalLink' + 'openExternalLink', + 'grabUserSettings', + 'grabAllProfiles', + 'grabHistory', + 'grabAllPlaylists', + 'getRegionData', + 'getYoutubeUrlInfo' + ]), + + ...mapMutations([ + 'setUsingElectron' ]) } }) diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js index 421b9fdf..4df9f2c4 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -291,7 +291,7 @@ export default Vue.extend({ }, initializeSponsorBlock() { - this.$store.dispatch('sponsorBlockSkipSegments', { + this.sponsorBlockSkipSegments({ videoId: this.videoId, categories: ['sponsor'] }).then((skipSegments) => { @@ -1341,7 +1341,8 @@ export default Vue.extend({ ...mapActions([ 'showToast', - 'calculateColorLuminance' + 'calculateColorLuminance', + 'sponsorBlockSkipSegments' ]) } }) diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js index 8d0d4e02..6f38110a 100644 --- a/src/renderer/components/top-nav/top-nav.js +++ b/src/renderer/components/top-nav/top-nav.js @@ -105,7 +105,7 @@ export default Vue.extend({ searchInput.blur() } - this.$store.dispatch('getYoutubeUrlInfo', query).then((result) => { + this.getYoutubeUrlInfo(query).then((result) => { switch (result.urlType) { case 'video': { const { videoId, timestamp } = result @@ -220,7 +220,7 @@ export default Vue.extend({ } } - this.$store.dispatch('invidiousAPICall', searchPayload).then((results) => { + this.invidiousAPICall(searchPayload).then((results) => { this.searchSuggestionsDataList = results.suggestions }).catch((err) => { console.log(err) @@ -267,7 +267,9 @@ export default Vue.extend({ }, ...mapActions([ - 'showToast' + 'showToast', + '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 index 6a8bb9b5..46cfbf8e 100644 --- a/src/renderer/components/watch-video-comments/watch-video-comments.js +++ b/src/renderer/components/watch-video-comments/watch-video-comments.js @@ -337,7 +337,7 @@ export default Vue.extend({ } } - this.$store.dispatch('invidiousAPICall', payload).then((response) => { + this.invidiousAPICall(payload).then((response) => { const commentData = response.comments.map((comment) => { comment.showReplies = false comment.authorLink = comment.authorId diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js index e2e11966..c2ddccb9 100644 --- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js +++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js @@ -1,4 +1,5 @@ import Vue from 'vue' +import { mapActions } from 'vuex' import FtLoader from '../ft-loader/ft-loader.vue' import FtCard from '../ft-card/ft-card.vue' import FtButton from '../ft-button/ft-button.vue' @@ -183,7 +184,7 @@ export default Vue.extend({ console.log(this.comments.length) if (typeof (comment.superchat) !== 'undefined') { - this.$store.dispatch('getRandomColorClass').then((data) => { + this.getRandomColorClass().then((data) => { comment.superchat.colorClass = data this.superChatComments.unshift(comment) @@ -195,7 +196,7 @@ export default Vue.extend({ } if (comment.author.name[0] === 'Ge' || comment.author.name[0] === 'Ne') { - this.$store.dispatch('getRandomColorClass').then((data) => { + this.getRandomColorClass().then((data) => { comment.superChat = { amount: '$5.00', colorClass: data @@ -260,6 +261,10 @@ export default Vue.extend({ preventDefault: function (event) { event.stopPropagation() event.preventDefault() - } + }, + + ...mapActions([ + 'getRandomColorClass' + ]) } }) diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js index bd333d04..348601e4 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.js +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.js @@ -277,7 +277,7 @@ export default Vue.extend({ getPlaylistInformationLocal: function () { this.isLoading = true - this.$store.dispatch('ytGetPlaylistInfo', this.playlistId).then((result) => { + this.ytGetPlaylistInfo(this.playlistId).then((result) => { console.log('done') console.log(result) @@ -338,7 +338,7 @@ export default Vue.extend({ } } - this.$store.dispatch('invidiousGetPlaylistInfo', payload).then((result) => { + this.invidiousGetPlaylistInfo(payload).then((result) => { console.log('done') console.log(result) @@ -399,7 +399,9 @@ export default Vue.extend({ }, ...mapActions([ - 'showToast' + 'showToast', + 'ytGetPlaylistInfo', + 'invidiousGetPlaylistInfo' ]) } }) diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js index 75155ca5..74a8f3c7 100644 --- a/src/renderer/views/Channel/Channel.js +++ b/src/renderer/views/Channel/Channel.js @@ -341,7 +341,7 @@ export default Vue.extend({ this.isLoading = true this.apiUsed = 'invidious' - this.$store.dispatch('invidiousGetChannelInfo', this.id).then((response) => { + this.invidiousGetChannelInfo(this.id).then((response) => { console.log(response) this.channelName = response.author this.id = response.authorId @@ -388,7 +388,7 @@ export default Vue.extend({ } } - this.$store.dispatch('invidiousAPICall', payload).then((response) => { + this.invidiousAPICall(payload).then((response) => { this.latestVideos = this.latestVideos.concat(response) this.latestVideosPage++ this.isElementListLoading = false @@ -471,7 +471,7 @@ export default Vue.extend({ payload.params.continuation = this.playlistContinuationString } - this.$store.dispatch('invidiousAPICall', payload).then((response) => { + this.invidiousAPICall(payload).then((response) => { this.playlistContinuationString = response.continuation this.latestPlaylists = this.latestPlaylists.concat(response.playlists) this.isElementListLoading = false @@ -680,7 +680,7 @@ export default Vue.extend({ } } - this.$store.dispatch('invidiousAPICall', payload).then((response) => { + this.invidiousAPICall(payload).then((response) => { this.searchResults = this.searchResults.concat(response) this.isElementListLoading = false this.searchPage++ @@ -707,7 +707,9 @@ export default Vue.extend({ ...mapActions([ 'showToast', - 'updateProfile' + 'updateProfile', + 'invidiousGetChannelInfo', + 'invidiousAPICall' ]) } }) diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js index 8122d57a..a2cbe79d 100644 --- a/src/renderer/views/Playlist/Playlist.js +++ b/src/renderer/views/Playlist/Playlist.js @@ -1,4 +1,5 @@ import Vue from 'vue' +import { mapActions } from 'vuex' import dateFormat from 'dateformat' import FtLoader from '../../components/ft-loader/ft-loader.vue' import FtCard from '../../components/ft-card/ft-card.vue' @@ -62,7 +63,7 @@ export default Vue.extend({ getPlaylistLocal: function () { this.isLoading = true - this.$store.dispatch('ytGetPlaylistInfo', this.playlistId).then((result) => { + this.ytGetPlaylistInfo(this.playlistId).then((result) => { console.log('done') console.log(result) @@ -120,7 +121,7 @@ export default Vue.extend({ } } - this.$store.dispatch('invidiousGetPlaylistInfo', payload).then((result) => { + this.invidiousGetPlaylistInfo(payload).then((result) => { console.log('done') console.log(result) @@ -180,6 +181,11 @@ export default Vue.extend({ this.shownResults = history.data this.nextPageRef = history.nextPageRef this.isLoading = false - } + }, + + ...mapActions([ + 'ytGetPlaylistInfo', + 'invidiousGetPlaylistInfo' + ]) } }) diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js index e45b4a9c..e56dcecc 100644 --- a/src/renderer/views/Popular/Popular.js +++ b/src/renderer/views/Popular/Popular.js @@ -1,4 +1,5 @@ import Vue from 'vue' +import { mapActions } from 'vuex' import FtLoader from '../../components/ft-loader/ft-loader.vue' import FtCard from '../../components/ft-card/ft-card.vue' import FtElementList from '../../components/ft-element-list/ft-element-list.vue' @@ -38,9 +39,10 @@ export default Vue.extend({ } this.isLoading = true - const result = await this.$store.dispatch('invidiousAPICall', searchPayload).catch((err) => { - console.log(err) - }) + const result = await this.invidiousAPICall(searchPayload) + .catch((err) => { + console.log(err) + }) if (!result) { this.isLoading = false @@ -54,6 +56,10 @@ export default Vue.extend({ }) this.isLoading = false this.$store.commit('setPopularCache', this.shownResults) - } + }, + + ...mapActions([ + 'invidiousAPICall' + ]) } }) diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js index 01d2e065..c7f93076 100644 --- a/src/renderer/views/Search/Search.js +++ b/src/renderer/views/Search/Search.js @@ -118,7 +118,7 @@ export default Vue.extend({ payload.options.pages = 1 } - this.$store.dispatch('ytSearch', payload).then((result) => { + this.ytSearch(payload).then((result) => { console.log(result) if (!result) { return @@ -230,7 +230,7 @@ export default Vue.extend({ } } - this.$store.dispatch('invidiousAPICall', searchPayload).then((result) => { + this.invidiousAPICall(searchPayload).then((result) => { if (!result) { return } @@ -333,7 +333,9 @@ export default Vue.extend({ }, ...mapActions([ - 'showToast' + 'showToast', + 'ytSearch', + 'invidiousAPICall' ]) } }) diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js index 9a84bbf6..8581acf6 100644 --- a/src/renderer/views/Trending/Trending.js +++ b/src/renderer/views/Trending/Trending.js @@ -112,7 +112,7 @@ export default Vue.extend({ params: { region: this.region } } - this.$store.dispatch('invidiousAPICall', trendingPayload).then((result) => { + this.invidiousAPICall(trendingPayload).then((result) => { if (!result) { return } @@ -149,7 +149,8 @@ export default Vue.extend({ }, ...mapActions([ - 'showToast' + 'showToast', + 'invidiousAPICall' ]) } }) diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index c9697005..103c06bf 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/src/renderer/views/Watch/Watch.js @@ -211,8 +211,7 @@ export default Vue.extend({ this.isLoading = true } - this.$store - .dispatch('ytGetVideoInformation', this.videoId) + this.ytGetVideoInformation(this.videoId) .then(async result => { console.log(result) @@ -516,8 +515,7 @@ export default Vue.extend({ this.dashSrc = this.createInvidiousDashManifest() this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90` - this.$store - .dispatch('invidiousGetVideoInformation', this.videoId) + this.invidiousGetVideoInformation(this.videoId) .then(result => { console.log(result) @@ -776,8 +774,7 @@ export default Vue.extend({ }, getLegacyFormats: function () { - this.$store - .dispatch('ytGetVideoInformation', this.videoId) + this.ytGetVideoInformation(this.videoId) .then(result => { this.videoSourceList = result.player_response.streamingData.formats }) @@ -1194,7 +1191,9 @@ export default Vue.extend({ 'buildVTTFileLocally', 'updateHistory', 'updateWatchProgress', - 'getUserDataPath' + 'getUserDataPath', + 'ytGetVideoInformation', + 'invidiousGetVideoInformation' ]) } })