Add a few toast messages
This commit is contained in:
		
							parent
							
								
									cd71c35013
								
							
						
					
					
						commit
						998f5c2688
					
				| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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'
 | 
			
		||||
    ])
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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'
 | 
			
		||||
    ])
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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'
 | 
			
		||||
    ])
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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)
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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'
 | 
			
		||||
    ])
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue