Add a few toast messages

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;

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

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

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

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) {
+  showToast (_, payload) {
-    FtToastEvents.$emit('toast.open', message, action, time)
+    FtToastEvents.$emit('toast.open', payload.message, payload.action, payload.time)
   }
 }
 

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(
+            this.showToast('Falling back to Invidious API')
-              'Error getting data with local backend, falling back to Invidious'
-            )
             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(
+            this.showToast({
-              'Error getting data with Invidious, falling back to local backend'
+              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'
+    ])
   }
 })