Make showToast a helper (#2695)

src/renderer/App.js

@@ -13,6 +13,7 @@ import { marked } from 'marked'
 import Parser from 'rss-parser'
 import { IpcChannels } from '../constants'
 import packageDetails from '../../package.json'
+import { showToast } from './helpers/utils'
 
 let ipcRenderer = null
 
@@ -352,9 +353,7 @@ export default Vue.extend({
         })
       } else if (this.externalLinkHandling === 'doNothing') {
         // Let user know opening external link is disabled via setting
-        this.showToast({
+        showToast(this.$t('External link opening has been disabled in the general settings'))
-          message: this.$t('External link opening has been disabled in the general settings')
-        })
       } else if (this.externalLinkHandling === 'openLinkAfterPrompt') {
         // Storing the URL is necessary as
         // there is no other way to pass the URL to click callback
@@ -420,9 +419,7 @@ export default Vue.extend({
               message = this.$t(message)
             }
 
-            this.showToast({
+            showToast(message)
-              message: message
-            })
             break
           }
 
@@ -449,9 +446,7 @@ export default Vue.extend({
               message = this.$t(message)
             }
 
-            this.showToast({
+            showToast(message)
-              message: message
-            })
           }
         }
       })
@@ -532,7 +527,6 @@ export default Vue.extend({
     ]),
 
     ...mapActions([
-      'showToast',
       'openExternalLink',
       'grabUserSettings',
       'grabAllProfiles',

src/renderer/components/data-settings/data-settings.js

@@ -11,7 +11,7 @@ import { MAIN_PROFILE_ID } from '../../../constants'
 import fs from 'fs'
 import { opmlToJSON } from 'opml-to-json'
 import ytch from 'yt-channel-info'
-import { calculateColorLuminance, getRandomColor } from '../../helpers/utils'
+import { calculateColorLuminance, getRandomColor, showToast } from '../../helpers/utils'
 
 // FIXME: Missing web logic branching
 
@@ -106,9 +106,7 @@ export default Vue.extend({
         textDecode = await this.readFileFromDialog({ response })
       } catch (err) {
         const message = this.$t('Settings.Data Settings.Unable to read file')
-        this.showToast({
+        showToast(`${message}: ${err}`)
-          message: `${message}: ${err}`
-        })
         return
       }
       response.filePaths.forEach(filePath => {
@@ -157,9 +155,7 @@ export default Vue.extend({
         Object.keys(profileData).forEach((key) => {
           if (!requiredKeys.includes(key)) {
             const message = this.$t('Settings.Data Settings.Unknown data key')
-            this.showToast({
+            showToast(`${message}: ${key}`)
-              message: `${message}: ${key}`
-            })
           } else {
             profileObject[key] = profileData[key]
           }
@@ -167,9 +163,7 @@ export default Vue.extend({
 
         if (Object.keys(profileObject).length < requiredKeys.length) {
           const message = this.$t('Settings.Data Settings.Profile object has insufficient data, skipping item')
-          this.showToast({
+          showToast(message)
-            message: message
-          })
         } else {
           if (profileObject.name === 'All Channels' || profileObject._id === MAIN_PROFILE_ID) {
             this.primaryProfile.subscriptions = this.primaryProfile.subscriptions.concat(profileObject.subscriptions)
@@ -214,9 +208,7 @@ export default Vue.extend({
         }
       })
 
-      this.showToast({
+      showToast(this.$t('Settings.Data Settings.All subscriptions and profiles have been successfully imported'))
-        message: this.$t('Settings.Data Settings.All subscriptions and profiles have been successfully imported')
-      })
     },
 
     importCsvYouTubeSubscriptions: async function(textDecode) { // first row = header, last row = empty
@@ -226,9 +218,7 @@ export default Vue.extend({
       const subscriptions = []
       const errorList = []
 
-      this.showToast({
+      showToast(this.$t('Settings.Data Settings.This might take a while, please wait'))
-        message: this.$t('Settings.Data Settings.This might take a while, please wait')
-      })
 
       this.updateShowProgressBar(true)
       this.setProgressBarPercentage(0)
@@ -273,13 +263,9 @@ export default Vue.extend({
           errorList.forEach(e => { // log it to console for now, dedicated tab for 'error' channels needed
             console.error(`failed to import ${e[2]}. Url to channel: ${e[1]}.`)
           })
-          this.showToast({
+          showToast(this.$t('Settings.Data Settings.One or more subscriptions were unable to be imported'))
-            message: this.$t('Settings.Data Settings.One or more subscriptions were unable to be imported')
-          })
         } else {
-          this.showToast({
+          showToast(this.$t('Settings.Data Settings.All subscriptions have been successfully imported'))
-            message: this.$t('Settings.Data Settings.All subscriptions have been successfully imported')
-          })
         }
       }).finally(_ => {
         this.updateShowProgressBar(false)
@@ -290,9 +276,7 @@ export default Vue.extend({
       const subscriptions = []
       const errorList = []
 
-      this.showToast({
+      showToast(this.$t('Settings.Data Settings.This might take a while, please wait'))
-        message: this.$t('Settings.Data Settings.This might take a while, please wait')
-      })
 
       this.updateShowProgressBar(true)
       this.setProgressBarPercentage(0)
@@ -304,9 +288,7 @@ export default Vue.extend({
           const snippet = channel.snippet
           if (typeof snippet === 'undefined') {
             const message = this.$t('Settings.Data Settings.Invalid subscriptions file')
-            this.showToast({
+            showToast(message)
-              message: message
-            })
             throw new Error('Unable to find channel data')
           }
           const { subscription, result } = await this.subscribeToChannel({
@@ -334,13 +316,9 @@ export default Vue.extend({
           errorList.forEach(e => { // log it to console for now, dedicated tab for 'error' channels needed
             console.error(`failed to import ${e[2]}. Url to channel: ${e[1]}.`)
           })
-          this.showToast({
+          showToast(this.$t('Settings.Data Settings.One or more subscriptions were unable to be imported'))
-            message: this.$t('Settings.Data Settings.One or more subscriptions were unable to be imported')
-          })
         } else {
-          this.showToast({
+          showToast(this.$t('Settings.Data Settings.All subscriptions have been successfully imported'))
-            message: this.$t('Settings.Data Settings.All subscriptions have been successfully imported')
-          })
         }
       }).finally(_ => {
         this.updateShowProgressBar(false)
@@ -355,9 +333,7 @@ export default Vue.extend({
         console.error(err)
         console.error('error reading')
         const message = this.$t('Settings.Data Settings.Invalid subscriptions file')
-        this.showToast({
+        showToast(`${message}: ${err}`)
-          message: `${message}: ${err}`
-        })
       }
 
       if (json !== undefined) {
@@ -367,18 +343,14 @@ export default Vue.extend({
             feedData = json.children
           } else {
             const message = this.$t('Settings.Data Settings.Invalid subscriptions file')
-            this.showToast({
+            showToast(message)
-              message: message
-            })
             return
           }
         }
 
         const subscriptions = []
 
-        this.showToast({
+        showToast(this.$t('Settings.Data Settings.This might take a while, please wait'))
-          message: this.$t('Settings.Data Settings.This might take a while, please wait')
-        })
 
         this.updateShowProgressBar(true)
         this.setProgressBarPercentage(0)
@@ -418,13 +390,9 @@ export default Vue.extend({
             this.updateProfile(this.primaryProfile)
 
             if (subscriptions.length < count) {
-              this.showToast({
+              showToast(this.$t('Settings.Data Settings.One or more subscriptions were unable to be imported'))
-                message: this.$t('Settings.Data Settings.One or more subscriptions were unable to be imported')
-              })
             } else {
-              this.showToast({
+              showToast(this.$t('Settings.Data Settings.All subscriptions have been successfully imported'))
-                message: this.$t('Settings.Data Settings.All subscriptions have been successfully imported')
-              })
             }
 
             this.updateShowProgressBar(false)
@@ -435,9 +403,7 @@ export default Vue.extend({
 
     importNewPipeSubscriptions: async function (newPipeData) {
       if (typeof newPipeData.subscriptions === 'undefined') {
-        this.showToast({
+        showToast(this.$t('Settings.Data Settings.Invalid subscriptions file'))
-          message: this.$t('Settings.Data Settings.Invalid subscriptions file')
-        })
 
         return
       }
@@ -449,9 +415,7 @@ export default Vue.extend({
       const subscriptions = []
       const errorList = []
 
-      this.showToast({
+      showToast(this.$t('Settings.Data Settings.This might take a while, please wait'))
-        message: this.$t('Settings.Data Settings.This might take a while, please wait')
-      })
 
       this.updateShowProgressBar(true)
       this.setProgressBarPercentage(0)
@@ -487,13 +451,9 @@ export default Vue.extend({
           errorList.forEach(e => { // log it to console for now, dedicated tab for 'error' channels needed
             console.error(`failed to import ${e[2]}. Url to channel: ${e[1]}.`)
           })
-          this.showToast({
+          showToast(this.$t('Settings.Data Settings.One or more subscriptions were unable to be imported'))
-            message: this.$t('Settings.Data Settings.One or more subscriptions were unable to be imported')
-          })
         } else {
-          this.showToast({
+          showToast(this.$t('Settings.Data Settings.All subscriptions have been successfully imported'))
-            message: this.$t('Settings.Data Settings.All subscriptions have been successfully imported')
-          })
         }
       }).finally(_ => {
         this.updateShowProgressBar(false)
@@ -554,24 +514,18 @@ export default Vue.extend({
       fs.readFile(subscriptionsDb, (readErr, data) => {
         if (readErr) {
           const message = this.$t('Settings.Data Settings.Unable to read file')
-          this.showToast({
+          showToast(`${message}: ${readErr}`)
-            message: `${message}: ${readErr}`
-          })
           return
         }
 
         fs.writeFile(filePath, data, (writeErr) => {
           if (writeErr) {
             const message = this.$t('Settings.Data Settings.Unable to write file')
-            this.showToast({
+            showToast(`${message}: ${writeErr}`)
-              message: `${message}: ${writeErr}`
-            })
             return
           }
 
-          this.showToast({
+          showToast(this.$t('Settings.Data Settings.Subscriptions have been successfully exported'))
-            message: this.$t('Settings.Data Settings.Subscriptions have been successfully exported')
-          })
         })
       })
     },
@@ -637,15 +591,11 @@ export default Vue.extend({
       fs.writeFile(filePath, JSON.stringify(subscriptionsObject), (writeErr) => {
         if (writeErr) {
           const message = this.$t('Settings.Data Settings.Unable to write file')
-          this.showToast({
+          showToast(`${message}: ${writeErr}`)
-            message: `${message}: ${writeErr}`
-          })
           return
         }
 
-        this.showToast({
+        showToast(this.$t('Settings.Data Settings.Subscriptions have been successfully exported'))
-          message: this.$t('Settings.Data Settings.Subscriptions have been successfully exported')
-        })
       })
     },
 
@@ -689,15 +639,11 @@ export default Vue.extend({
       fs.writeFile(filePath, opmlData, (writeErr) => {
         if (writeErr) {
           const message = this.$t('Settings.Data Settings.Unable to write file')
-          this.showToast({
+          showToast(`${message}: ${writeErr}`)
-            message: `${message}: ${writeErr}`
-          })
           return
         }
 
-        this.showToast({
+        showToast(this.$t('Settings.Data Settings.Subscriptions have been successfully exported'))
-          message: this.$t('Settings.Data Settings.Subscriptions have been successfully exported')
-        })
       })
     },
 
@@ -734,15 +680,11 @@ export default Vue.extend({
       fs.writeFile(filePath, exportText, (writeErr) => {
         if (writeErr) {
           const message = this.$t('Settings.Data Settings.Unable to write file')
-          this.showToast({
+          showToast(`${message}: ${writeErr}`)
-            message: `${message}: ${writeErr}`
-          })
           return
         }
 
-        this.showToast({
+        showToast(this.$t('Settings.Data Settings.Subscriptions have been successfully exported'))
-          message: this.$t('Settings.Data Settings.Subscriptions have been successfully exported')
-        })
       })
     },
 
@@ -788,15 +730,11 @@ export default Vue.extend({
       fs.writeFile(filePath, JSON.stringify(newPipeObject), (writeErr) => {
         if (writeErr) {
           const message = this.$t('Settings.Data Settings.Unable to write file')
-          this.showToast({
+          showToast(`${message}: ${writeErr}`)
-            message: `${message}: ${writeErr}`
-          })
           return
         }
 
-        this.showToast({
+        showToast(this.$t('Settings.Data Settings.Subscriptions have been successfully exported'))
-          message: this.$t('Settings.Data Settings.Subscriptions have been successfully exported')
-        })
       })
     },
 
@@ -820,9 +758,7 @@ export default Vue.extend({
         textDecode = await this.readFileFromDialog({ response })
       } catch (err) {
         const message = this.$t('Settings.Data Settings.Unable to read file')
-        this.showToast({
+        showToast(`${message}: ${err}`)
-          message: `${message}: ${err}`
-        })
         return
       }
       textDecode = textDecode.split('\n')
@@ -854,26 +790,20 @@ export default Vue.extend({
 
         Object.keys(historyData).forEach((key) => {
           if (!requiredKeys.includes(key)) {
-            this.showToast({
+            showToast(`Unknown data key: ${key}`)
-              message: `Unknown data key: ${key}`
-            })
           } else {
             historyObject[key] = historyData[key]
           }
         })
 
         if (Object.keys(historyObject).length < (requiredKeys.length - 2)) {
-          this.showToast({
+          showToast(this.$t('Settings.Data Settings.History object has insufficient data, skipping item'))
-            message: this.$t('Settings.Data Settings.History object has insufficient data, skipping item')
-          })
         } else {
           this.updateHistory(historyObject)
         }
       })
 
-      this.showToast({
+      showToast(this.$t('Settings.Data Settings.All watched history has been successfully imported'))
-        message: this.$t('Settings.Data Settings.All watched history has been successfully imported')
-      })
     },
 
     exportHistory: async function () {
@@ -904,24 +834,18 @@ export default Vue.extend({
       fs.readFile(historyDb, (readErr, data) => {
         if (readErr) {
           const message = this.$t('Settings.Data Settings.Unable to read file')
-          this.showToast({
+          showToast(`${message}: ${readErr}`)
-            message: `${message}: ${readErr}`
-          })
           return
         }
 
         fs.writeFile(filePath, data, (writeErr) => {
           if (writeErr) {
             const message = this.$t('Settings.Data Settings.Unable to write file')
-            this.showToast({
+            showToast(`${message}: ${writeErr}`)
-              message: `${message}: ${writeErr}`
-            })
             return
           }
 
-          this.showToast({
+          showToast(this.$t('Settings.Data Settings.All watched history has been successfully exported'))
-            message: this.$t('Settings.Data Settings.All watched history has been successfully exported')
-          })
         })
       })
     },
@@ -946,9 +870,7 @@ export default Vue.extend({
         data = await this.readFileFromDialog({ response })
       } catch (err) {
         const message = this.$t('Settings.Data Settings.Unable to read file')
-        this.showToast({
+        showToast(`${message}: ${err}`)
-          message: `${message}: ${err}`
-        })
         return
       }
       const playlists = JSON.parse(data)
@@ -986,9 +908,7 @@ export default Vue.extend({
         Object.keys(playlistData).forEach((key) => {
           if (!requiredKeys.includes(key) && !optionalKeys.includes(key)) {
             const message = `${this.$t('Settings.Data Settings.Unknown data key')}: ${key}`
-            this.showToast({
+            showToast(message)
-              message: message
-            })
           } else if (key === 'videos') {
             const videoArray = []
             playlistData.videos.forEach((video) => {
@@ -1014,9 +934,7 @@ export default Vue.extend({
 
         if ((objectKeys.length < requiredKeys.length) || playlistObject.videos.length === 0) {
           const message = this.$t('Settings.Data Settings.Playlist insufficient data', { playlist: playlistData.playlistName })
-          this.showToast({
+          showToast(message)
-            message: message
-          })
         } else {
           const existingPlaylist = this.allPlaylists.find((playlist) => {
             return playlist.playlistName === playlistObject.playlistName
@@ -1043,9 +961,7 @@ export default Vue.extend({
         }
       })
 
-      this.showToast({
+      showToast(this.$t('Settings.Data Settings.All playlists has been successfully imported'))
-        message: this.$t('Settings.Data Settings.All playlists has been successfully imported')
-      })
     },
 
     exportPlaylists: async function () {
@@ -1073,15 +989,11 @@ export default Vue.extend({
       fs.writeFile(filePath, JSON.stringify(this.allPlaylists), (writeErr) => {
         if (writeErr) {
           const message = this.$t('Settings.Data Settings.Unable to write file')
-          this.showToast({
+          showToast(`${message}: ${writeErr}`)
-            message: `${message}: ${writeErr}`
-          })
           return
         }
 
-        this.showToast({
+        showToast(this.$t('Settings.Data Settings.All playlists has been successfully exported'))
-          message: this.$t('Settings.Data Settings.All playlists has been successfully exported')
-        })
       })
     },
 
@@ -1129,18 +1041,12 @@ export default Vue.extend({
         }).catch((err) => {
           console.error(err)
           const errorMessage = this.$t('Invidious API Error (Click to copy)')
-          this.showToast({
+          showToast(`${errorMessage}: ${err.responseJSON.error}`, 10000, () => {
-            message: `${errorMessage}: ${err.responseJSON.error}`,
-            time: 10000,
-            action: () => {
             this.copyToClipboard({ content: err.responseJSON.error })
-            }
           })
 
           if (this.backendFallback && this.backendPreference === 'invidious') {
-            this.showToast({
+            showToast(this.$t('Falling back to the local API'))
-              message: this.$t('Falling back to the local API')
-            })
             resolve(this.getChannelInfoLocal(channelId))
           } else {
             resolve([])
@@ -1156,18 +1062,12 @@ export default Vue.extend({
         }).catch((err) => {
           console.error(err)
           const errorMessage = this.$t('Local API Error (Click to copy)')
-          this.showToast({
+          showToast(`${errorMessage}: ${err}`, 10000, () => {
-            message: `${errorMessage}: ${err}`,
-            time: 10000,
-            action: () => {
             this.copyToClipboard({ content: err })
-            }
           })
 
           if (this.backendFallback && this.backendPreference === 'local') {
-            this.showToast({
+            showToast(this.$t('Falling back to the Invidious API'))
-              message: this.$t('Falling back to the Invidious API')
-            })
             resolve(this.getChannelInfoInvidious(channelId))
           } else {
             resolve([])
@@ -1240,7 +1140,6 @@ export default Vue.extend({
       'updateShowProgressBar',
       'updateHistory',
       'compactHistory',
-      'showToast',
       'showOpenDialog',
       'readFileFromDialog',
       'showSaveDialog',

src/renderer/components/ft-list-video/ft-list-video.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import { mapActions } from 'vuex'
 import i18n from '../../i18n/index'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'FtListVideo',
@@ -450,9 +451,7 @@ export default Vue.extend({
         type: 'video'
       }
       this.updateHistory(videoData)
-      this.showToast({
+      showToast(this.$t('Video.Video has been marked as watched'))
-        message: this.$t('Video.Video has been marked as watched')
-      })
 
       this.watched = true
     },
@@ -460,9 +459,7 @@ export default Vue.extend({
     removeFromWatched: function () {
       this.removeFromHistory(this.id)
 
-      this.showToast({
+      showToast(this.$t('Video.Video has been removed from your history'))
-        message: this.$t('Video.Video has been removed from your history')
-      })
 
       this.watched = false
       this.watchProgress = 0
@@ -491,9 +488,7 @@ export default Vue.extend({
 
       this.addVideo(payload)
 
-      this.showToast({
+      showToast(this.$t('Video.Video has been saved'))
-        message: this.$t('Video.Video has been saved')
-      })
     },
 
     removeFromPlaylist: function () {
@@ -504,13 +499,10 @@ export default Vue.extend({
 
       this.removeVideo(payload)
 
-      this.showToast({
+      showToast(this.$t('Video.Video has been removed from your saved list'))
-        message: this.$t('Video.Video has been removed from your saved list')
-      })
     },
 
     ...mapActions([
-      'showToast',
       'toLocalePublicationString',
       'openInExternalPlayer',
       'updateHistory',

src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js

@@ -6,6 +6,7 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubble.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'FtProfileChannelList',
@@ -110,9 +111,7 @@ export default Vue.extend({
   methods: {
     displayDeletePrompt: function () {
       if (this.selectedLength === 0) {
-        this.showToast({
+        showToast(this.$t('Profile.No channel(s) have been selected'))
-          message: this.$t('Profile.No channel(s) have been selected')
-        })
       } else {
         this.showDeletePrompt = true
       }
@@ -141,9 +140,7 @@ export default Vue.extend({
             this.updateProfile(profile)
           })
 
-          this.showToast({
+          showToast(this.$t('Profile.Profile has been updated'))
-            message: this.$t('Profile.Profile has been updated')
-          })
           this.selectNone()
         } else {
           const profile = JSON.parse(JSON.stringify(this.profile))
@@ -157,9 +154,7 @@ export default Vue.extend({
 
           this.updateProfile(profile)
 
-          this.showToast({
+          showToast(this.$t('Profile.Profile has been updated'))
-            message: this.$t('Profile.Profile has been updated')
-          })
           this.selectNone()
         }
       }
@@ -208,7 +203,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'updateProfile'
     ])
   }

src/renderer/components/ft-profile-edit/ft-profile-edit.js

@@ -6,7 +6,7 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
 import { MAIN_PROFILE_ID } from '../../../constants'
-import { calculateColorLuminance, colors } from '../../helpers/utils'
+import { calculateColorLuminance, colors, showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'FtProfileEdit',
@@ -96,9 +96,7 @@ export default Vue.extend({
 
     saveProfile: function () {
       if (this.profileName === '') {
-        this.showToast({
+        showToast(this.$t('Profile.Your profile name cannot be empty'))
-          message: this.$t('Profile.Your profile name cannot be empty')
-        })
         return
       }
       const profile = {
@@ -114,26 +112,20 @@ export default Vue.extend({
 
       if (this.isNew) {
         this.createProfile(profile)
-        this.showToast({
+        showToast(this.$t('Profile.Profile has been created'))
-          message: this.$t('Profile.Profile has been created')
-        })
         this.$router.push({
           path: '/settings/profile/'
         })
       } else {
         this.updateProfile(profile)
-        this.showToast({
+        showToast(this.$t('Profile.Profile has been updated'))
-          message: this.$t('Profile.Profile has been updated')
-        })
       }
     },
 
     setDefaultProfile: function () {
       this.updateDefaultProfile(this.profileId)
       const message = this.$t('Profile.Your default profile has been set to {profile}', { profile: this.profileName })
-      this.showToast({
+      showToast(message)
-        message: message
-      })
     },
 
     deleteProfile: function () {
@@ -144,13 +136,11 @@ export default Vue.extend({
       this.removeProfile(this.profileId)
 
       const message = this.$t('Profile.Removed {profile} from your profiles', { profile: this.profileName })
-      this.showToast({ message })
+      showToast(message)
 
       if (this.defaultProfile === this.profileId) {
         this.updateDefaultProfile(MAIN_PROFILE_ID)
-        this.showToast({
+        showToast(this.$t('Profile.Your default profile has been changed to your primary profile'))
-          message: this.$t('Profile.Your default profile has been changed to your primary profile')
-        })
       }
 
       this.$router.push({
@@ -159,7 +149,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'createProfile',
       'updateProfile',
       'removeProfile',

src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js

@@ -7,6 +7,7 @@ import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubbl
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
 import FtSelect from '../ft-select/ft-select.vue'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'FtProfileFilterChannelsList',
@@ -119,9 +120,7 @@ export default Vue.extend({
 
     addChannelToProfile: function () {
       if (this.selectedLength === 0) {
-        this.showToast({
+        showToast(this.$t('Profile.No channel(s) have been selected'))
-          message: this.$t('Profile.No channel(s) have been selected')
-        })
       } else {
         const subscriptions = this.channels.filter((channel) => {
           return channel.selected
@@ -130,9 +129,7 @@ export default Vue.extend({
         const profile = JSON.parse(JSON.stringify(this.profile))
         profile.subscriptions = profile.subscriptions.concat(subscriptions)
         this.updateProfile(profile)
-        this.showToast({
+        showToast(this.$t('Profile.Profile has been updated'))
-          message: this.$t('Profile.Profile has been updated')
-        })
         this.selectNone()
       }
     },
@@ -172,7 +169,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'updateProfile'
     ])
   }

src/renderer/components/ft-profile-selector/ft-profile-selector.js

@@ -3,6 +3,7 @@ import { mapActions } from 'vuex'
 
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'FtProfileSelector',
@@ -78,8 +79,7 @@ export default Vue.extend({
         if (targetProfile) {
           this.updateActiveProfile(targetProfile._id)
 
-          const message = this.$t('Profile.{profile} is now the active profile', { profile: profile.name })
+          showToast(this.$t('Profile.{profile} is now the active profile', { profile: profile.name }))
-          this.showToast({ message })
         }
       }
 
@@ -87,7 +87,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'updateActiveProfile'
     ])
   }

src/renderer/components/ft-share-button/ft-share-button.js

@@ -129,7 +129,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'openExternalLink',
       'copyToClipboard'
     ])

src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js

@@ -128,7 +128,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'openExternalLink',
       'updateSponsorBlockSponsor',
       'updateSponsorBlockSelfPromo',

src/renderer/components/ft-toast/ft-toast.js

@@ -25,7 +25,7 @@ export default Vue.extend({
 
       toast.isOpen = false
     },
-    open: function (message, action, time) {
+    open: function (message, time, action) {
       const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
       toast.timeout = setTimeout(this.close, time || 3000, toast)
       setTimeout(() => { toast.isOpen = true })

src/renderer/components/ft-video-player/ft-video-player.js

@@ -14,7 +14,7 @@ import 'videojs-http-source-selector'
 
 import { IpcChannels } from '../../../constants'
 import { sponsorBlockSkipSegments } from '../../helpers/sponsorblock'
-import { calculateColorLuminance, colors } from '../../helpers/utils'
+import { calculateColorLuminance, colors, showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'FtVideoPlayer',
@@ -598,9 +598,7 @@ export default Vue.extend({
 
     showSkippedSponsorSegmentInformation(category) {
       const translatedCategory = this.sponsorBlockTranslatedCategory(category)
-      this.showToast({
+      showToast(`${this.$t('Video.Skipped segment')} ${translatedCategory}`)
-        message: `${this.$t('Video.Skipped segment')} ${translatedCategory}`
-      })
     },
 
     sponsorBlockTranslatedCategory(category) {
@@ -1343,9 +1341,7 @@ export default Vue.extend({
         })
       } catch (err) {
         console.error(`Parse failed: ${err.message}`)
-        this.showToast({
+        showToast(this.$t('Screenshot Error', { error: err.message }))
-          message: this.$t('Screenshot Error', { error: err.message })
-        })
         canvas.remove()
         return
       }
@@ -1411,9 +1407,7 @@ export default Vue.extend({
             fs.mkdirSync(dirPath, { recursive: true })
           } catch (err) {
             console.error(err)
-            this.showToast({
+            showToast(this.$t('Screenshot Error', { error: err }))
-              message: this.$t('Screenshot Error', { error: err })
-            })
             canvas.remove()
             return
           }
@@ -1428,13 +1422,9 @@ export default Vue.extend({
           fs.writeFile(filePath, arr, (err) => {
             if (err) {
               console.error(err)
-              this.showToast({
+              showToast(this.$t('Screenshot Error', { error: err }))
-                message: this.$t('Screenshot Error', { error: err })
-              })
             } else {
-              this.showToast({
+              showToast(this.$t('Screenshot Success', { filePath }))
-                message: this.$t('Screenshot Success', { filePath })
-              })
             }
           })
         })
@@ -1707,9 +1697,7 @@ export default Vue.extend({
     },
     toggleShowStatsModal: function() {
       if (this.format !== 'dash') {
-        this.showToast({
+        showToast(this.$t('Video.Stats.Video statistics are not available for legacy videos'))
-          message: this.$t('Video.Stats.Video statistics are not available for legacy videos')
-        })
       } else {
         this.showStatsModal = !this.showStatsModal
       }
@@ -1921,7 +1909,6 @@ export default Vue.extend({
 
     ...mapActions([
       'updateDefaultCaptionSettings',
-      'showToast',
       'parseScreenshotCustomFileName',
       'updateScreenshotFolderPath',
       'getPicturesPath',

src/renderer/components/general-settings/general-settings.js

@@ -9,6 +9,7 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtButton from '../ft-button/ft-button.vue'
 
 import debounce from 'lodash.debounce'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'GeneralSettings',
@@ -193,16 +194,13 @@ export default Vue.extend({
       const instance = this.currentInvidiousInstance
       this.updateDefaultInvidiousInstance(instance)
 
-      this.showToast({
+      const message = this.$t('Default Invidious instance has been set to {instance}', { instance })
-        message: this.$t('Default Invidious instance has been set to {instance}', { instance })
+      showToast(message)
-      })
     },
 
     handleClearDefaultInstanceClick: function () {
       this.updateDefaultInvidiousInstance('')
-      this.showToast({
+      showToast(this.$t('Default Invidious instance has been cleared'))
-        message: this.$t('Default Invidious instance has been cleared')
-      })
     },
 
     handlePreferredApiBackend: function (backend) {
@@ -218,7 +216,6 @@ export default Vue.extend({
     ]),
 
     ...mapActions([
-      'showToast',
       'updateEnableSearchSuggestions',
       'updateBackendFallback',
       'updateCheckForUpdates',

src/renderer/components/playlist-info/playlist-info.js

@@ -142,7 +142,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'openExternalLink',
       'copyToClipboard'
     ])

src/renderer/components/privacy-settings/privacy-settings.js

@@ -7,6 +7,7 @@ import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { MAIN_PROFILE_ID } from '../../../constants'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'PrivacySettings',
@@ -59,9 +60,7 @@ export default Vue.extend({
 
       if (option === 'yes') {
         this.clearSessionSearchHistory()
-        this.showToast({
+        showToast(this.$t('Settings.Privacy Settings.Search cache has been cleared'))
-          message: this.$t('Settings.Privacy Settings.Search cache has been cleared')
-        })
       }
     },
 
@@ -85,9 +84,7 @@ export default Vue.extend({
 
       if (option === 'yes') {
         this.removeAllHistory()
-        this.showToast({
+        showToast(this.$t('Settings.Privacy Settings.Watch history has been cleared'))
-          message: this.$t('Settings.Privacy Settings.Watch history has been cleared')
-        })
       }
     },
 
@@ -122,8 +119,7 @@ export default Vue.extend({
       'clearSessionSearchHistory',
       'updateProfile',
       'removeProfile',
-      'updateActiveProfile',
+      'updateActiveProfile'
-      'showToast'
     ])
   }
 })

src/renderer/components/proxy-settings/proxy-settings.js

@@ -15,6 +15,7 @@ import { ipcRenderer } from 'electron'
 import debounce from 'lodash.debounce'
 
 import { IpcChannels } from '../../../constants'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'ProxySettings',
@@ -136,9 +137,7 @@ export default Vue.extend({
         })
         .catch((error) => {
           console.error('errored while testing proxy:', error)
-          this.showToast({
+          showToast(this.$t('Settings.Proxy Settings["Error getting network information. Is your proxy configured properly?"]'))
-            message: this.$t('Settings.Proxy Settings["Error getting network information. Is your proxy configured properly?"]')
-          })
           this.dataAvailable = false
         })
         .finally(() => {
@@ -150,7 +149,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'updateUseProxy',
       'updateProxyProtocol',
       'updateProxyHostname',

src/renderer/components/top-nav/top-nav.js

@@ -7,6 +7,7 @@ import debounce from 'lodash.debounce'
 import ytSuggest from 'youtube-suggest'
 
 import { IpcChannels } from '../../../constants'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'TopNav',
@@ -159,9 +160,7 @@ export default Vue.extend({
               message = this.$t(message)
             }
 
-            this.showToast({
+            showToast(message)
-              message: message
-            })
             break
           }
 
@@ -348,7 +347,6 @@ export default Vue.extend({
       this.$refs.searchInput.updateInputData(text)
     },
     ...mapActions([
-      'showToast',
       'getYoutubeUrlInfo',
       'invidiousAPICall'
     ])

src/renderer/components/watch-video-comments/watch-video-comments.js

@@ -6,6 +6,7 @@ import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtTimestampCatcher from '../../components/ft-timestamp-catcher/ft-timestamp-catcher.vue'
 import autolinker from 'autolinker'
 import ytcm from '@freetube/yt-comment-scraper'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'WatchVideoComments',
@@ -141,9 +142,7 @@ export default Vue.extend({
 
     getMoreComments: function () {
       if (this.commentData.length === 0 || this.nextPageToken === null || typeof this.nextPageToken === 'undefined') {
-        this.showToast({
+        showToast(this.$t('Comments.There are no more comments for this video'))
-          message: this.$t('Comments.There are no more comments for this video')
-        })
       } else {
         this.getCommentData()
       }
@@ -180,17 +179,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendFallback && this.backendPreference === 'local') {
-          this.showToast({
+          showToast(this.$t('Falling back to Invidious API'))
-            message: this.$t('Falling back to Invidious API')
-          })
           this.getCommentDataInvidious({
             resource: 'comments',
             id: this.id,
@@ -206,26 +199,18 @@ export default Vue.extend({
     },
 
     getCommentRepliesLocal: function (payload) {
-      this.showToast({
+      showToast(this.$t('Comments.Getting comment replies, please wait'))
-        message: this.$t('Comments.Getting comment replies, please wait')
-      })
 
       ytcm.getCommentReplies(payload).then((response) => {
         this.parseLocalCommentData(response, payload.index)
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendFallback && this.backendPreference === 'local') {
-          this.showToast({
+          showToast(this.$t('Falling back to Invidious API'))
-            message: this.$t('Falling back to Invidious API')
-          })
           this.getCommentDataInvidious({
             resource: 'comments',
             id: this.id,
@@ -326,17 +311,11 @@ export default Vue.extend({
       }).catch((xhr) => {
         console.error(xhr)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${xhr.responseText}`, 10000, () => {
-          message: `${errorMessage}: ${xhr.responseText}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: xhr.responseText })
-          }
         })
         if (this.backendFallback && this.backendPreference === 'invidious') {
-          this.showToast({
+          showToast(this.$t('Falling back to local API'))
-            message: this.$t('Falling back to local API')
-          })
           this.getCommentDataLocal()
         } else {
           this.isLoading = false
@@ -345,9 +324,7 @@ export default Vue.extend({
     },
 
     getCommentRepliesInvidious: function (index) {
-      this.showToast({
+      showToast(this.$t('Comments.Getting comment replies, please wait'))
-        message: this.$t('Comments.Getting comment replies, please wait')
-      })
       const payload = {
         resource: 'comments',
         id: this.id,
@@ -382,12 +359,8 @@ export default Vue.extend({
       }).catch((xhr) => {
         console.error(xhr)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${xhr.responseText}`, 10000, () => {
-          message: `${errorMessage}: ${xhr.responseText}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: xhr.responseText })
-          }
         })
         this.isLoading = false
       })
@@ -398,7 +371,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'toLocalePublicationString',
       'invidiousAPICall',
       'copyToClipboard'

src/renderer/components/watch-video-info/watch-video-info.js

@@ -7,6 +7,7 @@ import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import FtShareButton from '../ft-share-button/ft-share-button.vue'
 import { MAIN_PROFILE_ID } from '../../../constants'
 import i18n from '../../i18n/index'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'WatchVideoInfo',
@@ -356,9 +357,7 @@ export default Vue.extend({
         })
 
         this.updateProfile(currentProfile)
-        this.showToast({
+        showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
-          message: this.$t('Channel.Channel has been removed from your subscriptions')
-        })
 
         if (this.activeProfile._id === MAIN_PROFILE_ID) {
           // Check if a subscription exists in a different profile.
@@ -386,9 +385,8 @@ export default Vue.extend({
           })
 
           if (duplicateSubscriptions > 0) {
-            this.showToast({
+            const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
-              message: this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
+            showToast(message)
-            })
           }
         }
       } else {
@@ -400,9 +398,7 @@ export default Vue.extend({
         currentProfile.subscriptions.push(subscription)
 
         this.updateProfile(currentProfile)
-        this.showToast({
+        showToast(this.$t('Channel.Added channel to your subscriptions'))
-          message: this.$t('Channel.Added channel to your subscriptions')
-        })
 
         if (this.activeProfile._id !== MAIN_PROFILE_ID) {
           const index = primaryProfile.subscriptions.findIndex((channel) => {
@@ -480,9 +476,7 @@ export default Vue.extend({
 
       this.addVideo(payload)
 
-      this.showToast({
+      showToast(this.$t('Video.Video has been saved'))
-        message: this.$t('Video.Video has been saved')
-      })
     },
 
     removeFromPlaylist: function () {
@@ -493,13 +487,10 @@ export default Vue.extend({
 
       this.removeVideo(payload)
 
-      this.showToast({
+      showToast(this.$t('Video.Video has been removed from your saved list'))
-        message: this.$t('Video.Video has been removed from your saved list')
-      })
     },
 
     ...mapActions([
-      'showToast',
       'openInExternalPlayer',
       'updateProfile',
       'addVideo',

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -4,6 +4,7 @@ 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'
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'WatchVideoPlaylist',
@@ -111,37 +112,27 @@ export default Vue.extend({
     toggleLoop: function () {
       if (this.loopEnabled) {
         this.loopEnabled = false
-        this.showToast({
+        showToast(this.$t('Loop is now disabled'))
-          message: this.$t('Loop is now disabled')
-        })
       } else {
         this.loopEnabled = true
-        this.showToast({
+        showToast(this.$t('Loop is now enabled'))
-          message: this.$t('Loop is now enabled')
-        })
       }
     },
 
     toggleShuffle: function () {
       if (this.shuffleEnabled) {
         this.shuffleEnabled = false
-        this.showToast({
+        showToast(this.$t('Shuffle is now disabled'))
-          message: this.$t('Shuffle is now disabled')
-        })
       } else {
         this.shuffleEnabled = true
-        this.showToast({
+        showToast(this.$t('Shuffle is now enabled'))
-          message: this.$t('Shuffle is now enabled')
-        })
         this.shufflePlaylistItems()
       }
     },
 
     toggleReversePlaylist: function () {
       this.isLoading = true
-      this.showToast({
+      showToast(this.$t('The playlist has been reversed'))
-        message: this.$t('The playlist has been reversed')
-      })
 
       this.reversePlaylist = !this.reversePlaylist
       this.playlistItems = this.playlistItems.reverse()
@@ -168,14 +159,10 @@ export default Vue.extend({
                 query: playlistInfo
               }
             )
-            this.showToast({
+            showToast(this.$t('Playing Next Video'))
-              message: this.$t('Playing Next Video')
-            })
             this.shufflePlaylistItems()
           } else {
-            this.showToast({
+            showToast(this.$t('The playlist has ended.  Enable loop to continue playing'))
-              message: this.$t('The playlist has ended.  Enable loop to continue playing')
-            })
           }
         } else {
           this.$router.push(
@@ -184,9 +171,7 @@ export default Vue.extend({
               query: playlistInfo
             }
           )
-          this.showToast({
+          showToast(this.$t('Playing Next Video'))
-            message: this.$t('Playing Next Video')
-          })
         }
       } else {
         const videoIndex = this.playlistItems.findIndex((item) => {
@@ -201,13 +186,9 @@ export default Vue.extend({
                 query: playlistInfo
               }
             )
-            this.showToast({
+            showToast(this.$t('Playing Next Video'))
-              message: this.$t('Playing Next Video')
-            })
           }
-          this.showToast({
+          showToast(this.$t('The playlist has ended.  Enable loop to continue playing'))
-            message: this.$t('The playlist has ended.  Enable loop to continue playing')
-          })
         } else {
           this.$router.push(
             {
@@ -215,17 +196,13 @@ export default Vue.extend({
               query: playlistInfo
             }
           )
-          this.showToast({
+          showToast(this.$t('Playing Next Video'))
-            message: this.$t('Playing Next Video')
-          })
         }
       }
     },
 
     playPreviousVideo: function () {
-      this.showToast({
+      showToast('Playing previous video')
-        message: 'Playing previous video'
-      })
 
       const playlistInfo = {
         playlistId: this.playlistId
@@ -306,17 +283,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendPreference === 'local' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Invidious API'))
-            message: this.$t('Falling back to Invidious API')
-          })
           this.getPlaylistInformationInvidious()
         } else {
           this.isLoading = false
@@ -344,17 +315,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendPreference === 'invidious' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Local API'))
-            message: this.$t('Falling back to Local API')
-          })
           this.getPlaylistInformationLocal()
         } else {
           this.isLoading = false
@@ -384,7 +349,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'ytGetPlaylistInfo',
       'invidiousGetPlaylistInfo',
       'copyToClipboard'

src/renderer/helpers/utils.js

@@ -1,3 +1,5 @@
+import FtToastEvents from '../components/ft-toast/ft-toast-events'
+
 export const colors = [
   { name: 'Red', value: '#d50000' },
   { name: 'Pink', value: '#C51162' },
@@ -151,3 +153,7 @@ export function buildVTTFileLocally(storyboard) {
   }
   return vttString
 }
+
+export function showToast(message, time = null, action = null) {
+  FtToastEvents.$emit('toast-open', message, time, action)
+}

src/renderer/store/modules/settings.js

@@ -1,6 +1,7 @@
 import i18n from '../../i18n/index'
 import { MAIN_PROFILE_ID, IpcChannels, SyncEvents } from '../../../constants'
 import { DBSettingHandlers } from '../../../datastores/handlers/index'
+import { showToast } from '../../helpers/utils'
 
 /*
  * Due to the complexity of the settings module in FreeTube, a more
@@ -313,9 +314,7 @@ const stateWithSideEffects = {
           // Translating this string isn't necessary
           // because the user will always see it in the default locale
           // (in this case, English (US))
-          dispatch('showToast',
+          showToast(`Locale not found, defaulting to ${defaultLocale}`)
-            { message: `Locale not found, defaulting to ${defaultLocale}` }
-          )
         }
       }
 

src/renderer/store/modules/utils.js

@@ -1,10 +1,10 @@
 import IsEqual from 'lodash.isequal'
-import FtToastEvents from '../../components/ft-toast/ft-toast-events'
 import fs from 'fs'
 import path from 'path'
 import i18n from '../../i18n/index'
 
 import { IpcChannels } from '../../../constants'
+import { showToast } from '../../helpers/utils'
 
 const state = {
   isSideNavOpen: false,
@@ -172,29 +172,18 @@ const actions = {
       try {
         await navigator.clipboard.writeText(content)
         if (messageOnSuccess !== undefined) {
-          dispatch('showToast', {
+          showToast(messageOnSuccess)
-            message: messageOnSuccess
-          })
         }
       } catch (error) {
         console.error(`Failed to copy ${content} to clipboard`, error)
         if (messageOnError !== undefined) {
-          dispatch('showToast', {
+          showToast(`${messageOnError}: ${error}`, 5000)
-            message: `${messageOnError}: ${error}`,
-            time: 5000
-          })
         } else {
-          dispatch('showToast', {
+          showToast(`${i18n.t('Clipboard.Copy failed')}: ${error}`, 5000)
-            message: `${i18n.t('Clipboard.Copy failed')}: ${error}`,
-            time: 5000
-          })
         }
       }
     } else {
-      dispatch('showToast', {
+      showToast(i18n.t('Clipboard.Cannot access clipboard without a secure connection'), 5000)
-        message: i18n.t('Clipboard.Cannot access clipboard without a secure connection'),
-        time: 5000
-      })
     }
   },
 
@@ -232,24 +221,18 @@ const actions = {
           fs.mkdirSync(folderPath, { recursive: true })
         } catch (err) {
           console.error(err)
-          dispatch('showToast', {
+          showToast(err)
-            message: err
-          })
           return
         }
       }
       folderPath = path.join(folderPath, fileName)
     }
 
-    dispatch('showToast', {
+    showToast(i18n.t('Starting download', { videoTitle: title }))
-      message: i18n.t('Starting download', { videoTitle: title })
-    })
 
     const response = await fetch(url).catch((error) => {
       console.error(error)
-      dispatch('showToast', {
+      showToast(errorMessage)
-        message: errorMessage
-      })
     })
 
     const reader = response.body.getReader()
@@ -257,9 +240,7 @@ const actions = {
 
     const handleError = (err) => {
       console.error(err)
-      dispatch('showToast', {
+      showToast(errorMessage)
-        message: errorMessage
-      })
     }
 
     const processText = async ({ done, value }) => {
@@ -283,13 +264,9 @@ const actions = {
     fs.writeFile(folderPath, new DataView(buffer), (err) => {
       if (err) {
         console.error(err)
-        dispatch('showToast', {
+        showToast(errorMessage)
-          message: errorMessage
-        })
       } else {
-        dispatch('showToast', {
+        showToast(i18n.t('Downloading has completed', { videoTitle: title }))
-          message: i18n.t('Downloading has completed', { videoTitle: title })
-        })
       }
     })
   },
@@ -777,14 +754,8 @@ const actions = {
     commit('setSessionSearchHistory', [])
   },
 
-  showToast (_, payload) {
+  showExternalPlayerUnsupportedActionToast: function (_, { externalPlayer, action }) {
-    FtToastEvents.$emit('toast-open', payload.message, payload.action, payload.time)
+    showToast(i18n.t('Video.External Player.UnsupportedActionTemplate', { externalPlayer, action }))
-  },
-
-  showExternalPlayerUnsupportedActionToast: function ({ dispatch }, { externalPlayer, action }) {
-    dispatch('showToast', {
-      message: i18n.t('Video.External Player.UnsupportedActionTemplate', { externalPlayer, action })
-    })
   },
 
   getExternalPlayerCmdArgumentsData ({ commit }, payload) {
@@ -929,9 +900,7 @@ const actions = {
       ? i18n.t('Video.External Player.video')
       : i18n.t('Video.External Player.playlist')
 
-    dispatch('showToast', {
+    showToast(i18n.t('Video.External Player.OpeningTemplate', { videoOrPlaylist, externalPlayer }))
-      message: i18n.t('Video.External Player.OpeningTemplate', { videoOrPlaylist, externalPlayer })
-    })
 
     const { ipcRenderer } = require('electron')
     ipcRenderer.send(IpcChannels.OPEN_IN_EXTERNAL_PLAYER, { executable, args })

src/renderer/views/Channel/Channel.js

@@ -14,6 +14,7 @@ import ytch from 'yt-channel-info'
 import autolinker from 'autolinker'
 import { MAIN_PROFILE_ID } from '../../../constants'
 import i18n from '../../i18n/index'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'Search',
@@ -306,17 +307,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendPreference === 'local' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Invidious API'))
-            message: this.$t('Falling back to Invidious API')
-          })
           this.getChannelInfoInvidious()
         } else {
           this.isLoading = false
@@ -338,17 +333,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendPreference === 'local' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Invidious API'))
-            message: this.$t('Falling back to Invidious API')
-          })
           this.getChannelInfoInvidious()
         } else {
           this.isLoading = false
@@ -363,12 +352,8 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
       })
     },
@@ -417,12 +402,8 @@ export default Vue.extend({
         this.setErrorMessage(err.responseJSON.error)
         console.error(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err.responseJSON.error}`, 10000, () => {
-          message: `${errorMessage}: ${err.responseJSON.error}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err.responseJSON.error })
-          }
         })
         this.isLoading = false
       })
@@ -445,12 +426,8 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
       })
     },
@@ -471,17 +448,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendPreference === 'local' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Invidious API'))
-            message: this.$t('Falling back to Invidious API')
-          })
           this.getPlaylistsInvidious()
         } else {
           this.isLoading = false
@@ -496,12 +467,8 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
       })
     },
@@ -522,17 +489,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err.responseJSON.error}`, 10000, () => {
-          message: `${errorMessage}: ${err.responseJSON.error}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err.responseJSON.error })
-          }
         })
         if (this.backendPreference === 'invidious' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Local API'))
-            message: this.$t('Falling back to Local API')
-          })
           this.getPlaylistsLocal()
         } else {
           this.isLoading = false
@@ -565,17 +526,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err.responseJSON.error}`, 10000, () => {
-          message: `${errorMessage}: ${err.responseJSON.error}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err.responseJSON.error })
-          }
         })
         if (this.backendPreference === 'invidious' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Local API'))
-            message: this.$t('Falling back to Local API')
-          })
           this.getPlaylistsLocal()
         } else {
           this.isLoading = false
@@ -593,9 +548,7 @@ export default Vue.extend({
         })
 
         this.updateProfile(currentProfile)
-        this.showToast({
+        showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
-          message: this.$t('Channel.Channel has been removed from your subscriptions')
-        })
 
         if (this.activeProfile._id === MAIN_PROFILE_ID) {
           // Check if a subscription exists in a different profile.
@@ -623,9 +576,8 @@ export default Vue.extend({
           })
 
           if (duplicateSubscriptions > 0) {
-            this.showToast({
+            const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
-              message: this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
+            showToast(message)
-            })
           }
         }
       } else {
@@ -637,9 +589,7 @@ export default Vue.extend({
         currentProfile.subscriptions.push(subscription)
 
         this.updateProfile(currentProfile)
-        this.showToast({
+        showToast(this.$t('Channel.Added channel to your subscriptions'))
-          message: this.$t('Channel.Added channel to your subscriptions')
-        })
 
         if (this.activeProfile._id !== MAIN_PROFILE_ID) {
           const index = primaryProfile.subscriptions.findIndex((channel) => {
@@ -729,17 +679,11 @@ export default Vue.extend({
         }).catch((err) => {
           console.error(err)
           const errorMessage = this.$t('Local API Error (Click to copy)')
-          this.showToast({
+          showToast(`${errorMessage}: ${err}`, 10000, () => {
-            message: `${errorMessage}: ${err}`,
-            time: 10000,
-            action: () => {
             this.copyToClipboard({ content: err })
-            }
           })
           if (this.backendPreference === 'local' && this.backendFallback) {
-            this.showToast({
+            showToast(this.$t('Falling back to Invidious API'))
-              message: this.$t('Falling back to Invidious API')
-            })
             this.searchChannelInvidious()
           } else {
             this.isLoading = false
@@ -753,12 +697,8 @@ export default Vue.extend({
         }).catch((err) => {
           console.error(err)
           const errorMessage = this.$t('Local API Error (Click to copy)')
-          this.showToast({
+          showToast(`${errorMessage}: ${err}`, 10000, () => {
-            message: `${errorMessage}: ${err}`,
-            time: 10000,
-            action: () => {
             this.copyToClipboard({ content: err })
-            }
           })
         })
       }
@@ -781,17 +721,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendPreference === 'invidious' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Local API'))
-            message: this.$t('Falling back to Local API')
-          })
           this.searchChannelLocal()
         } else {
           this.isLoading = false
@@ -800,7 +734,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'updateProfile',
       'invidiousGetChannelInfo',
       'invidiousAPICall',

src/renderer/views/ProfileEdit/ProfileEdit.js

@@ -1,11 +1,11 @@
 import Vue from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtProfileEdit from '../../components/ft-profile-edit/ft-profile-edit.vue'
 import FtProfileChannelList from '../../components/ft-profile-channel-list/ft-profile-channel-list.vue'
 import FtProfileFilterChannelsList from '../../components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue'
 import { MAIN_PROFILE_ID } from '../../../constants'
-import { calculateColorLuminance, getRandomColor } from '../../helpers/utils'
+import { calculateColorLuminance, getRandomColor, showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'ProfileEdit',
@@ -41,9 +41,7 @@ export default Vue.extend({
       handler: function () {
         const profile = this.profileById(this.profileId)
         if (!profile) {
-          this.showToast({
+          showToast(this.$t('Profile.Profile could not be found'))
-            message: this.$t('Profile.Profile could not be found')
-          })
           this.$router.push({
             path: '/settings/profile/'
           })
@@ -74,9 +72,7 @@ export default Vue.extend({
 
       const profile = this.profileById(this.profileId)
       if (!profile) {
-        this.showToast({
+        showToast(this.$t('Profile.Profile could not be found'))
-          message: this.$t('Profile.Profile could not be found')
-        })
         this.$router.push({
           path: '/settings/profile/'
         })
@@ -85,10 +81,5 @@ export default Vue.extend({
     }
 
     this.isLoading = false
-  },
-  methods: {
-    ...mapActions([
-      'showToast'
-    ])
   }
 })

src/renderer/views/Search/Search.js

@@ -5,6 +5,7 @@ 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'
 import { calculateLengthInSeconds } from '@freetube/yt-trending-scraper/src/HtmlParser'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'Search',
@@ -199,17 +200,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendPreference === 'local' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Invidious API'))
-            message: this.$t('Falling back to Invidious API')
-          })
           this.performSearchInvidious(payload)
         } else {
           this.isLoading = false
@@ -266,17 +261,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendPreference === 'invidious' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Local API'))
-            message: this.$t('Falling back to Local API')
-          })
           this.performSearchLocal(payload)
         } else {
           this.isLoading = false
@@ -297,19 +286,13 @@ export default Vue.extend({
 
       if (this.apiUsed === 'local') {
         if (this.amountOfResults <= this.shownResults.length) {
-          this.showToast({
+          showToast(this.$t('Search Filters.There are no more results for this search'))
-            message: this.$t('Search Filters.There are no more results for this search')
-          })
         } else {
-          this.showToast({
+          showToast(this.$t('Search Filters["Fetching results. Please wait"]'))
-            message: this.$t('Search Filters["Fetching results. Please wait"]')
-          })
           this.performSearchLocal(payload)
         }
       } else {
-        this.showToast({
+        showToast(this.$t('Search Filters["Fetching results. Please wait"]'))
-          message: this.$t('Search Filters["Fetching results. Please wait"]')
-        })
         this.performSearchInvidious(payload)
       }
     },
@@ -332,7 +315,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'ytSearch',
       'invidiousAPICall',
       'copyToClipboard'

src/renderer/views/SubscribedChannels/SubscribedChannels.js

@@ -6,6 +6,7 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
 import ytch from 'yt-channel-info'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'SubscribedChannels',
@@ -139,9 +140,7 @@ export default Vue.extend({
       currentProfile.subscriptions.splice(index, 1)
 
       this.updateProfile(currentProfile)
-      this.showToast({
+      showToast(this.$t('Channels.Unsubscribed', { channelName: this.channelToUnsubscribe.name }))
-        message: this.$t('Channels.Unsubscribed', { channelName: this.channelToUnsubscribe.name })
-      })
 
       index = this.subscribedChannels.findIndex(channel => {
         return channel.id === this.channelToUnsubscribe.id
@@ -206,7 +205,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'updateProfile',
       'updateSubscriptionDetails',
       'invidiousGetChannelInfo'

src/renderer/views/Subscriptions/Subscriptions.js

@@ -11,7 +11,7 @@ import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubbl
 import ytch from 'yt-channel-info'
 import Parser from 'rss-parser'
 import { MAIN_PROFILE_ID } from '../../../constants'
-import { calculatePublishedDate } from '../../helpers/utils'
+import { calculatePublishedDate, showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'Subscriptions',
@@ -152,10 +152,10 @@ export default Vue.extend({
 
       let useRss = this.useRssFeeds
       if (this.activeSubscriptionList.length >= 125 && !useRss) {
-        this.showToast({
+        showToast(
-          message: this.$t('Subscriptions["This profile has a large number of subscriptions.  Forcing RSS to avoid rate limiting"]'),
+          this.$t('Subscriptions["This profile has a large number of subscriptions.  Forcing RSS to avoid rate limiting"]'),
-          time: 10000
+          10000
-        })
+        )
         useRss = true
       }
       this.isLoading = true
@@ -274,12 +274,8 @@ export default Vue.extend({
         }).catch((err) => {
           console.error(err)
           const errorMessage = this.$t('Local API Error (Click to copy)')
-          this.showToast({
+          showToast(`${errorMessage}: ${err}`, 10000, () => {
-            message: `${errorMessage}: ${err}`,
-            time: 10000,
-            action: () => {
             this.copyToClipboard({ content: err })
-            }
           })
           switch (failedAttempts) {
             case 0:
@@ -287,9 +283,7 @@ export default Vue.extend({
               break
             case 1:
               if (this.backendFallback) {
-                this.showToast({
+                showToast(this.$t('Falling back to Invidious API'))
-                  message: this.$t('Falling back to Invidious API')
-                })
                 resolve(this.getChannelVideosInvidiousScraper(channel, failedAttempts + 1))
               } else {
                 resolve([])
@@ -337,12 +331,8 @@ export default Vue.extend({
             resolve([])
           } else {
             const errorMessage = this.$t('Local API Error (Click to copy)')
-            this.showToast({
+            showToast(`${errorMessage}: ${err}`, 10000, () => {
-              message: `${errorMessage}: ${err}`,
-              time: 10000,
-              action: () => {
               this.copyToClipboard({ content: err })
-              }
             })
             switch (failedAttempts) {
               case 0:
@@ -350,9 +340,7 @@ export default Vue.extend({
                 break
               case 1:
                 if (this.backendFallback) {
-                  this.showToast({
+                  showToast(this.$t('Falling back to Invidious API'))
-                    message: this.$t('Falling back to Invidious API')
-                  })
                   resolve(this.getChannelVideosInvidiousRSS(channel, failedAttempts + 1))
                 } else {
                   resolve([])
@@ -385,12 +373,8 @@ export default Vue.extend({
         }).catch((err) => {
           console.error(err)
           const errorMessage = this.$t('Invidious API Error (Click to copy)')
-          this.showToast({
+          showToast(`${errorMessage}: ${err.responseText}`, 10000, () => {
-            message: `${errorMessage}: ${err.responseText}`,
-            time: 10000,
-            action: () => {
             this.copyToClipboard({ content: err.responseText })
-            }
           })
           switch (failedAttempts) {
             case 0:
@@ -398,9 +382,7 @@ export default Vue.extend({
               break
             case 1:
               if (this.backendFallback) {
-                this.showToast({
+                showToast(this.$t('Falling back to the local API'))
-                  message: this.$t('Falling back to the local API')
-                })
                 resolve(this.getChannelVideosLocalScraper(channel, failedAttempts + 1))
               } else {
                 resolve([])
@@ -436,12 +418,8 @@ export default Vue.extend({
         }).catch((err) => {
           console.error(err)
           const errorMessage = this.$t('Invidious API Error (Click to copy)')
-          this.showToast({
+          showToast(`${errorMessage}: ${err}`, 10000, () => {
-            message: `${errorMessage}: ${err}`,
-            time: 10000,
-            action: () => {
             this.copyToClipboard({ content: err })
-            }
           })
           if (err.toString().match(/500/)) {
             this.errorChannels.push(channel)
@@ -453,9 +431,7 @@ export default Vue.extend({
                 break
               case 1:
                 if (this.backendFallback) {
-                  this.showToast({
+                  showToast(this.$t('Falling back to the local API'))
-                    message: this.$t('Falling back to the local API')
-                  })
                   resolve(this.getChannelVideosLocalRSS(channel, failedAttempts + 1))
                 } else {
                   resolve([])
@@ -493,7 +469,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'invidiousAPICall',
       'updateShowProgressBar',
       'updateProfileSubscriptions',

src/renderer/views/Trending/Trending.js

@@ -7,6 +7,7 @@ import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 
 import { scrapeTrendingPage } from '@freetube/yt-trending-scraper'
+import { showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'Trending',
@@ -99,17 +100,11 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
-          message: `${errorMessage}: ${err}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err })
-          }
         })
         if (this.backendPreference === 'local' && this.backendFallback) {
-          this.showToast({
+          showToast(this.$t('Falling back to Invidious API'))
-            message: this.$t('Falling back to Invidious API')
-          })
           this.getTrendingInfoInvidious()
         } else {
           this.isLoading = false
@@ -161,18 +156,12 @@ export default Vue.extend({
       }).catch((err) => {
         console.error(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        this.showToast({
+        showToast(`${errorMessage}: ${err.responseText}`, 10000, () => {
-          message: `${errorMessage}: ${err.responseText}`,
-          time: 10000,
-          action: () => {
           this.copyToClipboard({ content: err.responseText })
-          }
         })
 
         if (process.env.IS_ELECTRON && (this.backendPreference === 'invidious' && this.backendFallback)) {
-          this.showToast({
+          showToast(this.$t('Falling back to Local API'))
-            message: this.$t('Falling back to Local API')
-          })
           this.getTrendingInfoLocal()
         } else {
           this.isLoading = false
@@ -196,7 +185,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'invidiousAPICall',
       'copyToClipboard'
     ])

src/renderer/views/Watch/Watch.js

@@ -15,7 +15,7 @@ import WatchVideoPlaylist from '../../components/watch-video-playlist/watch-vide
 import WatchVideoRecommendations from '../../components/watch-video-recommendations/watch-video-recommendations.vue'
 import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricted.vue'
 import i18n from '../../i18n/index'
-import { buildVTTFileLocally } from '../../helpers/utils'
+import { buildVTTFileLocally, showToast } from '../../helpers/utils'
 
 const isDev = process.env.NODE_ENV === 'development'
 
@@ -560,10 +560,10 @@ export default Vue.extend({
               }
             } else {
               // video might be region locked or something else. This leads to no formats being available
-              this.showToast({
+              showToast(
-                message: this.$t('This video is unavailable because of missing formats. This can happen due to country unavailability.'),
+                this.$t('This video is unavailable because of missing formats. This can happen due to country unavailability.'),
-                time: 7000
+                7000
-              })
+              )
               this.handleVideoEnded()
               return
             }
@@ -627,7 +627,7 @@ export default Vue.extend({
         })
         .catch(err => {
           const errorMessage = this.$t('Local API Error (Click to copy)')
-          this.showToast({
+          showToast({
             message: `${errorMessage}: ${err}`,
             time: 10000,
             action: () => {
@@ -636,9 +636,7 @@ export default Vue.extend({
           })
           console.error(err)
           if (this.backendPreference === 'local' && this.backendFallback && !err.toString().includes('private')) {
-            this.showToast({
+            showToast(this.$t('Falling back to Invidious API'))
-              message: this.$t('Falling back to Invidious API')
-            })
             this.getVideoInformationInvidious()
           } else {
             this.isLoading = false
@@ -853,7 +851,7 @@ export default Vue.extend({
         .catch(err => {
           console.error(err)
           const errorMessage = this.$t('Invidious API Error (Click to copy)')
-          this.showToast({
+          showToast({
             message: `${errorMessage}: ${err.responseText}`,
             time: 10000,
             action: () => {
@@ -862,9 +860,7 @@ export default Vue.extend({
           })
           console.error(err)
           if (this.backendPreference === 'invidious' && this.backendFallback) {
-            this.showToast({
+            showToast(this.$t('Falling back to Local API'))
-              message: this.$t('Falling back to Local API')
-            })
             this.getVideoInformationLocal()
           } else {
             this.isLoading = false
@@ -1046,7 +1042,7 @@ export default Vue.extend({
         })
         .catch(err => {
           const errorMessage = this.$t('Local API Error (Click to copy)')
-          this.showToast({
+          showToast({
             message: `${errorMessage}: ${err}`,
             time: 10000,
             action: () => {
@@ -1055,9 +1051,7 @@ export default Vue.extend({
           })
           console.error(err)
           if (!process.env.IS_ELECTRON || (this.backendPreference === 'local' && this.backendFallback)) {
-            this.showToast({
+            showToast(this.$t('Falling back to Invidious API'))
-              message: this.$t('Falling back to Invidious API')
-            })
             this.getVideoInformationInvidious()
           }
         })
@@ -1069,9 +1063,7 @@ export default Vue.extend({
       }
 
       if (this.dashSrc === null) {
-        this.showToast({
+        showToast(this.$t('Change Format.Dash formats are not available for this video'))
-          message: this.$t('Change Format.Dash formats are not available for this video')
-        })
         return
       }
       const watchedProgress = this.getWatchedProgress()
@@ -1116,9 +1108,7 @@ export default Vue.extend({
       }
 
       if (this.audioSourceList === null) {
-        this.showToast({
+        showToast(this.$t('Change Format.Audio formats are not available for this video'))
-          message: this.$t('Change Format.Audio formats are not available for this video')
-        })
         return
       }
 
@@ -1154,9 +1144,7 @@ export default Vue.extend({
             this.$router.push({
               path: `/watch/${nextVideoId}`
             })
-            this.showToast({
+            showToast(this.$t('Playing Next Video'))
-              message: this.$t('Playing Next Video')
-            })
           }
         }
       }, nextVideoInterval * 1000)
@@ -1170,18 +1158,13 @@ export default Vue.extend({
           return
         }
 
-        this.showToast({
-          message: this.$tc('Playing Next Video Interval', countDownTimeLeftInSecond, { nextVideoInterval: countDownTimeLeftInSecond }),
         // To avoid message flashing
         // `time` is manually tested to be 700
-          time: 700,
+        const message = this.$tc('Playing Next Video Interval', countDownTimeLeftInSecond, { nextVideoInterval: countDownTimeLeftInSecond })
-          action: () => {
+        showToast(message, 700, () => {
           clearTimeout(this.playNextTimeout)
           clearInterval(this.playNextCountDownIntervalId)
-            this.showToast({
+          showToast(this.$t('Canceled next video autoplay'))
-              message: this.$t('Canceled next video autoplay')
-            })
-          }
         })
 
         // At least this var should be updated AFTER showing the message
@@ -1536,7 +1519,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'showToast',
       'updateHistory',
       'updateWatchProgress',
       'getUserDataPath',