diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css index 79ce9f80..fa88336f 100644 --- a/src/renderer/components/ft-toast/ft-toast.css +++ b/src/renderer/components/ft-toast/ft-toast.css @@ -12,6 +12,7 @@ .toast { padding: 10px; margin: 5px; + text-align: center; overflow-y: auto; background-color: rgba(0, 0, 0, 0.7); color: white; 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 9b686092..4e19c42e 100644 --- a/src/renderer/components/watch-video-comments/watch-video-comments.js +++ b/src/renderer/components/watch-video-comments/watch-video-comments.js @@ -1,4 +1,5 @@ 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 ytct from 'youtube-comments-task' @@ -65,11 +66,20 @@ export default Vue.extend({ }, getCommentDataLocal: function () { - console.log('Getting comment data please wait...') + console.log('Getting comment data please wait..') ytct(this.id, this.nextPageToken).fork(e => { + this.showToast({ + message: `Local API Error (Click to copy): ${e.message}`, + time: 10000, + action: () => { + navigator.clipboard.writeText(e.message) + } + }) console.error('ERROR', e) if (this.backendFallback && this.backendPreference === 'local') { - console.log('Falling back to Invidious API') + this.showToast({ + message: 'Falling back to Invidious API' + }) this.getCommentDataInvidious() } else { this.isLoading = false @@ -178,6 +188,10 @@ export default Vue.extend({ console.log(xhr) this.isLoading = false }) - } + }, + + ...mapActions([ + 'showToast' + ]) } }) diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js index 803c7bef..d4c8440c 100644 --- a/src/renderer/components/watch-video-info/watch-video-info.js +++ b/src/renderer/components/watch-video-info/watch-video-info.js @@ -1,4 +1,5 @@ import Vue from 'vue' +import { mapActions } from 'vuex' import FtCard from '../ft-card/ft-card.vue' import FtButton from '../ft-button/ft-button.vue' import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue' @@ -111,7 +112,9 @@ export default Vue.extend({ }, handleSubscription: function () { - console.log('TODO: Handle subscription logic') + this.showToast({ + message: 'Subscriptions have not yet been implemented' + }) }, handleFormatChange: function (format) { @@ -126,6 +129,10 @@ export default Vue.extend({ this.$parent.enableAudioFormat() break } - } + }, + + ...mapActions([ + 'showToast' + ]) } }) 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 28cd4704..964413ce 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.js +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.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 FtFlexBox from '../ft-flex-box/ft-flex-box.vue' @@ -91,24 +92,36 @@ export default Vue.extend({ toggleLoop: function () { if (this.loopEnabled) { this.loopEnabled = false - console.log('Disabling loop') + this.showToast({ + message: 'Loop is now disabled' + }) } else { this.loopEnabled = true - console.log('Enabling loop') + this.showToast({ + message: 'Loop is now enabled' + }) } }, toggleShuffle: function () { if (this.shuffleEnabled) { this.shuffleEnabled = false - console.log('Disabling shuffle') + this.showToast({ + message: 'Shuffle is now disabled' + }) } else { this.shuffleEnabled = true - console.log('Enabling shuffle') + this.showToast({ + message: 'Shuffle is now enabled' + }) } }, playNextVideo: function () { + this.showToast({ + message: 'Playing Next Video' + }) + const playlistInfo = { playlistId: this.playlistId } @@ -178,6 +191,10 @@ export default Vue.extend({ }, playPreviousVideo: function () { + this.showToast({ + message: 'Playing previous video' + }) + const playlistInfo = { playlistId: this.playlistId } @@ -284,6 +301,10 @@ export default Vue.extend({ // TODO: Show toast with error message } }) - } + }, + + ...mapActions([ + 'showToast' + ]) } }) diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js index 19243798..c92cdba4 100644 --- a/src/renderer/store/modules/utils.js +++ b/src/renderer/store/modules/utils.js @@ -86,8 +86,8 @@ const actions = { return extractors.reduce((a, c) => a || c(), null) || false }, - showToast (_, message, action, time) { - FtToastEvents.$emit('toast.open', message, action, time) + showToast (_, payload) { + FtToastEvents.$emit('toast.open', payload.message, payload.action, payload.time) } } diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index 9d6d75c7..703c5ee2 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/src/renderer/views/Watch/Watch.js @@ -1,4 +1,5 @@ import Vue from 'vue' +import { mapActions } from 'vuex' import xml2vtt from 'yt-xml2vtt' import $ from 'jquery' import FtLoader from '../../components/ft-loader/ft-loader.vue' @@ -323,16 +324,19 @@ export default Vue.extend({ this.isLoading = false }) .catch(err => { - console.log('Error grabbing video data through local API') + this.showToast({ + message: `Local API Error (Click to copy): ${err}`, + time: 10000, + action: () => { + navigator.clipboard.writeText(err) + } + }) console.log(err) if (!this.usingElectron || (this.backendPreference === 'local' && this.backendFallback)) { - console.log( - 'Error getting data with local backend, falling back to Invidious' - ) + this.showToast('Falling back to Invidious API') this.getVideoInformationInvidious() } else { this.isLoading = false - // TODO: Show toast with error message } }) }, @@ -424,11 +428,18 @@ export default Vue.extend({ this.isLoading = false }) .catch(err => { + this.showToast({ + message: `Invidious API Error (Click to copy): ${err}`, + time: 10000, + action: () => { + navigator.clipboard.writeText(err) + } + }) console.log(err) if (this.backendPreference === 'invidious' && this.backendFallback) { - console.log( - 'Error getting data with Invidious, falling back to local backend' - ) + this.showToast({ + message: 'Falling back to the local API' + }) this.getVideoInformationLocal() } else { this.isLoading = false @@ -457,6 +468,20 @@ export default Vue.extend({ .then(result => { this.videoSourceList = result.player_response.streamingData.formats }) + .catch(err => { + this.showToast({ + message: `Local API Error (Click to copy): ${err}`, + time: 10000, + action: () => { + navigator.clipboard.writeText(err) + } + }) + console.log(err) + if (!this.usingElectron || (this.backendPreference === 'local' && this.backendFallback)) { + this.showToast('Falling back to Invidious API') + this.getVideoInformationInvidious() + } + }) }, enableDashFormat: function () { @@ -503,9 +528,20 @@ export default Vue.extend({ handleVideoEnded: function () { if (this.watchingPlaylist) { console.log('Playlist next video in 5 seconds') - setTimeout(() => { + const timeout = setTimeout(() => { this.$refs.watchVideoPlaylist.playNextVideo() }, 5000) + + this.showToast({ + message: 'Playing next video in 5 seconds. Click to cancel', + time: 5500, + action: () => { + clearTimeout(timeout) + this.showToast({ + message: 'Canceled next video autoplay' + }) + } + }) } }, @@ -525,6 +561,10 @@ export default Vue.extend({ this.enableDashFormat() } } - } + }, + + ...mapActions([ + 'showToast' + ]) } })