Add a few toast messages

This commit is contained in:
Preston 2020-08-04 23:44:34 -04:00
parent cd71c35013
commit 998f5c2688
6 changed files with 105 additions and 22 deletions

View File

@ -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;

View File

@ -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'
])
}
})

View File

@ -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'
])
}
})

View File

@ -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'
])
}
})

View File

@ -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)
}
}

View File

@ -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'
])
}
})