From cb1be0007b7d9ce8f3748a2a28605af31ff12c78 Mon Sep 17 00:00:00 2001
From: "kyle.watson" <kyle.watson@samsonvt.com>
Date: Sun, 14 Jun 2020 22:13:35 +0100
Subject: [PATCH 01/13] Added toast component

---
 src/renderer/App.js                           |  4 ++-
 src/renderer/App.vue                          |  1 +
 src/renderer/components/ft-toast/ft-toast.css | 31 +++++++++++++++++
 src/renderer/components/ft-toast/ft-toast.js  | 33 +++++++++++++++++++
 src/renderer/components/ft-toast/ft-toast.vue | 12 +++++++
 5 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/components/ft-toast/ft-toast.css
 create mode 100644 src/renderer/components/ft-toast/ft-toast.js
 create mode 100644 src/renderer/components/ft-toast/ft-toast.vue

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 4930836f..f7d45d8f 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import TopNav from './components/top-nav/top-nav.vue'
 import SideNav from './components/side-nav/side-nav.vue'
+import FtToast from './components/ft-toast/ft-toast.vue'
 import $ from 'jquery'
 
 let useElectron
@@ -18,7 +19,8 @@ export default Vue.extend({
   name: 'App',
   components: {
     TopNav,
-    SideNav
+    SideNav,
+    FtToast,
   },
   computed: {
     isOpen: function () {
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 187e4b0d..2393a4c2 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -14,6 +14,7 @@
       />
       <!-- </keep-alive> -->
     </Transition>
+    <ft-toast ref="toast" message="hello world" :action="toastAction" />
   </div>
 </template>
 
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
new file mode 100644
index 00000000..4098ac3c
--- /dev/null
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -0,0 +1,31 @@
+.toast {
+  display: flex;
+  height: 60px;
+  width: 200px;
+  overflow-y: auto;
+  position: fixed;
+  left: calc(50vw - 100px);
+  bottom: 100px;
+  text-align: center;
+  z-index: 100;
+  background-color: var(--card-bg-color);
+  opacity: 0;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.message {
+  margin: auto;
+}
+
+.open {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0s linear 0s, opacity 300ms;
+}
+
+.closed {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s linear 300ms, opacity 300ms;
+}
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
new file mode 100644
index 00000000..b835370a
--- /dev/null
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'FtToast',
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+    action: {
+      type: Function,
+      default: function () {},
+    },
+  },
+  data: function () {
+    return {
+      isOpen: false,
+    }
+  },
+  methods: {
+    performAction: function () {
+      this.action()
+      this.close()
+    },
+    close: function () {
+      this.isOpen = false
+    },
+    open: function () {
+      this.isOpen = true
+      setTimeout(this.close, 2000)
+    },
+  },
+})
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
new file mode 100644
index 00000000..23f95ecb
--- /dev/null
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -0,0 +1,12 @@
+<template>
+  <div
+    ref="toast"
+    class="toast"
+    :class="{ closed: !isOpen, open: isOpen }"
+    @click="performAction()"
+  >
+  <p class="message"> {{ message }} </p></div>
+</template>
+
+<script src="./ft-toast.js" />
+<style scoped src="./ft-toast.css" />
\ No newline at end of file

From 23488369d2703ab7e17c41398a7b7c902fb21124 Mon Sep 17 00:00:00 2001
From: "kyle.watson" <kyle.watson@samsonvt.com>
Date: Mon, 15 Jun 2020 20:08:42 +0100
Subject: [PATCH 02/13] Added event queue, Added example to share buttons

---
 src/renderer/App.vue                          |  2 +-
 .../components/ft-toast/ft-toast-events.js    |  4 +++
 src/renderer/components/ft-toast/ft-toast.js  | 32 ++++++++++++-------
 .../watch-video-info/watch-video-info.js      |  4 +++
 4 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 src/renderer/components/ft-toast/ft-toast-events.js

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 2393a4c2..2bb16c04 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -14,7 +14,7 @@
       />
       <!-- </keep-alive> -->
     </Transition>
-    <ft-toast ref="toast" message="hello world" :action="toastAction" />
+    <ft-toast />
   </div>
 </template>
 
diff --git a/src/renderer/components/ft-toast/ft-toast-events.js b/src/renderer/components/ft-toast/ft-toast-events.js
new file mode 100644
index 00000000..657c8034
--- /dev/null
+++ b/src/renderer/components/ft-toast/ft-toast-events.js
@@ -0,0 +1,4 @@
+import Vue from 'vue';
+
+const events = new Vue();
+export default events;
\ No newline at end of file
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index b835370a..27c87c36 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -1,22 +1,19 @@
 import Vue from 'vue'
+import FtToastEvents from './ft-toast-events.js'
 
 export default Vue.extend({
   name: 'FtToast',
-  props: {
-    message: {
-      type: String,
-      required: true,
-    },
-    action: {
-      type: Function,
-      default: function () {},
-    },
-  },
   data: function () {
     return {
       isOpen: false,
+      message: '',
+      action: () => {},
+      queue: [],
     }
   },
+  mounted: function () {
+    FtToastEvents.$on('toast.open', this.open)
+  },
   methods: {
     performAction: function () {
       this.action()
@@ -24,10 +21,23 @@ export default Vue.extend({
     },
     close: function () {
       this.isOpen = false
+      if(this.queue.length !== 0) {
+        const toast = this.queue.shift()
+        this.open(toast.message, toast.action)
+      }
     },
-    open: function () {
+    open: function (message, action) {
+      if (this.isOpen) {
+        this.queue.push({ message: message, action: action })
+        return
+      }
+      this.message = message
+      this.action = action || (() => {});
       this.isOpen = true
       setTimeout(this.close, 2000)
     },
   },
+  beforeDestroy: function () {
+    FtToastEvents.$off('toast.open', this.open)
+  },
 })
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 550b0067..e72fba59 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -4,6 +4,7 @@ import FtButton from '../ft-button/ft-button.vue'
 import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import FtToastEvents from '../ft-toast/ft-toast-events'
 // import { shell } from 'electron'
 
 export default Vue.extend({
@@ -146,6 +147,7 @@ export default Vue.extend({
 
       switch (method) {
         case 'copyYoutube':
+          FtToastEvents.$emit('toast.open', "YouTube URL copied to clipboard")
           navigator.clipboard.writeText(this.youtubeUrl)
           break
         case 'openYoutube':
@@ -155,6 +157,7 @@ export default Vue.extend({
           }
           break
         case 'copyYoutubeEmbed':
+          FtToastEvents.$emit('toast.open', "YouTube Embed URL copied to clipboard")
           navigator.clipboard.writeText(this.youtubeEmbedUrl)
           break
         case 'openYoutubeEmbed':
@@ -164,6 +167,7 @@ export default Vue.extend({
           }
           break
         case 'copyInvidious':
+          FtToastEvents.$emit('toast.open', "Invidious URL copied to clipboard")
           navigator.clipboard.writeText(this.invidiousUrl)
           break
         case 'openInvidious':

From 1c1257f3dbbf8516a45d3fa2773be59333ccc11d Mon Sep 17 00:00:00 2001
From: "kyle.watson" <kyle.watson@samsonvt.com>
Date: Mon, 15 Jun 2020 20:26:35 +0100
Subject: [PATCH 03/13] Fixed some styling

---
 src/renderer/components/ft-toast/ft-toast.css | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 4098ac3c..4c1e5309 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -1,14 +1,13 @@
 .toast {
   display: flex;
-  height: 60px;
-  width: 200px;
+  padding: 10px;
   overflow-y: auto;
   position: fixed;
-  left: calc(50vw - 100px);
+  left: 50vw;
+  transform: translate(-50%, 0);
   bottom: 100px;
-  text-align: center;
-  z-index: 100;
-  background-color: var(--card-bg-color);
+  z-index: 1;
+  background-color: var(--primary-input-color);
   opacity: 0;
   border-radius: 20px;
   cursor: pointer;

From 4cbb445301d89e9a35a9e13cea414c810f8cfc62 Mon Sep 17 00:00:00 2001
From: "kyle.watson" <kyle.watson@samsonvt.com>
Date: Sat, 27 Jun 2020 11:41:34 +0100
Subject: [PATCH 04/13] Added 5 toast max shown

---
 src/renderer/components/ft-toast/ft-toast.css | 13 ++++---
 src/renderer/components/ft-toast/ft-toast.js  | 39 ++++++++++++-------
 src/renderer/components/ft-toast/ft-toast.vue | 18 +++++----
 3 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 4c1e5309..3540f99c 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -1,12 +1,15 @@
+.toast-holder {
+  position: fixed;
+  left: 50vw;
+  transform: translate(-50%, 0);
+  bottom: 50px;
+  z-index: 1;
+}
+
 .toast {
   display: flex;
   padding: 10px;
   overflow-y: auto;
-  position: fixed;
-  left: 50vw;
-  transform: translate(-50%, 0);
-  bottom: 100px;
-  z-index: 1;
   background-color: var(--primary-input-color);
   opacity: 0;
   border-radius: 20px;
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 27c87c36..431ea3ee 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -5,9 +5,13 @@ export default Vue.extend({
   name: 'FtToast',
   data: function () {
     return {
-      isOpen: false,
-      message: '',
-      action: () => {},
+      toasts: [
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null}
+      ],
       queue: [],
     }
   },
@@ -15,27 +19,32 @@ export default Vue.extend({
     FtToastEvents.$on('toast.open', this.open)
   },
   methods: {
-    performAction: function () {
-      this.action()
-      this.close()
+    performAction: function (index) {
+      this.toasts[index].action()
+      this.close(index)
     },
-    close: function () {
-      this.isOpen = false
+    close: function (index) {
+      clearTimeout(this.toasts[index].timeout);
+      this.toasts[index].isOpen = false
       if(this.queue.length !== 0) {
         const toast = this.queue.shift()
         this.open(toast.message, toast.action)
       }
     },
     open: function (message, action) {
-      if (this.isOpen) {
-        this.queue.push({ message: message, action: action })
-        return
+      for(let i = this.toasts.length - 1; i >= 0 ; i--){
+        if (!this.toasts[i].isOpen) {
+          return this.showToast(message, action, i)
+        }
       }
-      this.message = message
-      this.action = action || (() => {});
-      this.isOpen = true
-      setTimeout(this.close, 2000)
+      this.queue.push({ message: message, action: action })
     },
+    showToast: function(message, action, index) {
+      this.toasts[index].message = message
+      this.toasts[index].action = action || (() => {})
+      this.toasts[index].isOpen = true
+      this.toasts[index].timeout = setTimeout(this.close, 2000, index)
+    }
   },
   beforeDestroy: function () {
     FtToastEvents.$off('toast.open', this.open)
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
index 23f95ecb..b0e33953 100644
--- a/src/renderer/components/ft-toast/ft-toast.vue
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -1,11 +1,15 @@
 <template>
-  <div
-    ref="toast"
-    class="toast"
-    :class="{ closed: !isOpen, open: isOpen }"
-    @click="performAction()"
-  >
-  <p class="message"> {{ message }} </p></div>
+  <div class="toast-holder">
+    <div
+      v-for="(toast, index) in toasts"
+      :key="'toast-' + index"
+      class="toast"
+      :class="{ closed: !toast.isOpen, open: toast.isOpen }"
+      @click="performAction(index)"
+    >
+      <p class="message">{{ toast.message }}</p>
+    </div>
+  </div>
 </template>
 
 <script src="./ft-toast.js" />

From 38644a76e3f5773076c39645cdde669a20021a35 Mon Sep 17 00:00:00 2001
From: "kyle.watson" <kyle.watson@samsonvt.com>
Date: Sat, 27 Jun 2020 16:06:42 +0100
Subject: [PATCH 05/13] Pass toast object rather than index, styled correctly

---
 src/renderer/components/ft-toast/ft-toast.css |  4 ++-
 src/renderer/components/ft-toast/ft-toast.js  | 31 ++++++++++---------
 src/renderer/components/ft-toast/ft-toast.vue |  2 +-
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 3540f99c..1e95bb60 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -9,8 +9,10 @@
 .toast {
   display: flex;
   padding: 10px;
+  margin: 5px;
   overflow-y: auto;
-  background-color: var(--primary-input-color);
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
   opacity: 0;
   border-radius: 20px;
   cursor: pointer;
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 431ea3ee..d8ea4487 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -19,31 +19,32 @@ export default Vue.extend({
     FtToastEvents.$on('toast.open', this.open)
   },
   methods: {
-    performAction: function (index) {
-      this.toasts[index].action()
-      this.close(index)
+    performAction: function (toast) {
+      toast.action()
+      this.close(toast)
     },
-    close: function (index) {
-      clearTimeout(this.toasts[index].timeout);
-      this.toasts[index].isOpen = false
+    close: function (toast) {
+      clearTimeout(toast.timeout);
+      toast.isOpen = false
       if(this.queue.length !== 0) {
-        const toast = this.queue.shift()
-        this.open(toast.message, toast.action)
+        const nexToast = this.queue.shift()
+        this.open(nexToast.message, nexToast.action)
       }
     },
     open: function (message, action) {
       for(let i = this.toasts.length - 1; i >= 0 ; i--){
-        if (!this.toasts[i].isOpen) {
-          return this.showToast(message, action, i)
+        const toast = this.toasts[i]
+        if (!toast.isOpen) {
+          return this.showToast(message, action, toast)
         }
       }
       this.queue.push({ message: message, action: action })
     },
-    showToast: function(message, action, index) {
-      this.toasts[index].message = message
-      this.toasts[index].action = action || (() => {})
-      this.toasts[index].isOpen = true
-      this.toasts[index].timeout = setTimeout(this.close, 2000, index)
+    showToast: function(message, action, toast) {
+      toast.message = message
+      toast.action = action || (() => {})
+      toast.isOpen = true
+      toast.timeout = setTimeout(this.close, 2000, toast)
     }
   },
   beforeDestroy: function () {
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
index b0e33953..5159cf9e 100644
--- a/src/renderer/components/ft-toast/ft-toast.vue
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -5,7 +5,7 @@
       :key="'toast-' + index"
       class="toast"
       :class="{ closed: !toast.isOpen, open: toast.isOpen }"
-      @click="performAction(index)"
+      @click="performAction(toast)"
     >
       <p class="message">{{ toast.message }}</p>
     </div>

From ee1d8f3c8ae3291acb397cf9d7947f062ec4bf65 Mon Sep 17 00:00:00 2001
From: "kyle.watson" <kyle.watson@samsonvt.com>
Date: Sat, 27 Jun 2020 16:22:27 +0100
Subject: [PATCH 06/13] Added toast to new share button

---
 package-lock.json                                          | 3 ++-
 src/renderer/components/ft-share-button/ft-share-button.js | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index fa0046b8..036cfc1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17571,7 +17571,8 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
         "schema-utils": {
diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index ac9799c0..5d86f872 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import FtButton from '../ft-button/ft-button.vue'
+import FtToastEvents from '../ft-toast/ft-toast-events'
 
 export default Vue.extend({
   name: 'FtShareButton',
@@ -59,6 +60,7 @@ export default Vue.extend({
     },
 
     copyInvidious() {
+      FtToastEvents.$emit('toast.open', "Invidious URL copied to clipboard")
       this.copy(this.invidiousURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -69,6 +71,7 @@ export default Vue.extend({
     },
 
     copyYoutube() {
+      FtToastEvents.$emit('toast.open', "YouTube URL copied to clipboard")
       this.copy(this.youtubeURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -79,6 +82,7 @@ export default Vue.extend({
     },
 
     copyYoutubeEmbed() {
+      FtToastEvents.$emit('toast.open', "YouTube Embed URL copied to clipboard")
       this.copy(this.youtubeEmbedURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -89,6 +93,7 @@ export default Vue.extend({
     },
 
     copyInvidiousEmbed() {
+      FtToastEvents.$emit('toast.open', "Invidious Embed URL copied to clipboard")
       this.copy(this.invidiousEmbedURL)
       this.$refs.iconButton.toggleDropdown()
     },

From 48deb375cbccfe1381458a7e36c1f0486b135fd2 Mon Sep 17 00:00:00 2001
From: "kyle.watson" <kyle.watson@samsonvt.com>
Date: Sat, 27 Jun 2020 16:27:03 +0100
Subject: [PATCH 07/13] Linted

---
 .../ft-share-button/ft-share-button.js        |  8 +++----
 .../components/ft-toast/ft-toast-events.js    |  6 ++---
 src/renderer/components/ft-toast/ft-toast.js  | 22 +++++++++----------
 src/renderer/components/ft-toast/ft-toast.vue |  6 +++--
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index 5d86f872..cc897cd7 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -60,7 +60,7 @@ export default Vue.extend({
     },
 
     copyInvidious() {
-      FtToastEvents.$emit('toast.open', "Invidious URL copied to clipboard")
+      FtToastEvents.$emit('toast.open', 'Invidious URL copied to clipboard')
       this.copy(this.invidiousURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -71,7 +71,7 @@ export default Vue.extend({
     },
 
     copyYoutube() {
-      FtToastEvents.$emit('toast.open', "YouTube URL copied to clipboard")
+      FtToastEvents.$emit('toast.open', 'YouTube URL copied to clipboard')
       this.copy(this.youtubeURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -82,7 +82,7 @@ export default Vue.extend({
     },
 
     copyYoutubeEmbed() {
-      FtToastEvents.$emit('toast.open', "YouTube Embed URL copied to clipboard")
+      FtToastEvents.$emit('toast.open', 'YouTube Embed URL copied to clipboard')
       this.copy(this.youtubeEmbedURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -93,7 +93,7 @@ export default Vue.extend({
     },
 
     copyInvidiousEmbed() {
-      FtToastEvents.$emit('toast.open', "Invidious Embed URL copied to clipboard")
+      FtToastEvents.$emit('toast.open', 'Invidious Embed URL copied to clipboard')
       this.copy(this.invidiousEmbedURL)
       this.$refs.iconButton.toggleDropdown()
     },
diff --git a/src/renderer/components/ft-toast/ft-toast-events.js b/src/renderer/components/ft-toast/ft-toast-events.js
index 657c8034..c32b0e13 100644
--- a/src/renderer/components/ft-toast/ft-toast-events.js
+++ b/src/renderer/components/ft-toast/ft-toast-events.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue from 'vue'
 
-const events = new Vue();
-export default events;
\ No newline at end of file
+const events = new Vue()
+export default events
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index d8ea4487..adcec349 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -6,11 +6,11 @@ export default Vue.extend({
   data: function () {
     return {
       toasts: [
-        {isOpen: false, message: '', action: null, timeout: null},
-        {isOpen: false, message: '', action: null, timeout: null},
-        {isOpen: false, message: '', action: null, timeout: null},
-        {isOpen: false, message: '', action: null, timeout: null},
-        {isOpen: false, message: '', action: null, timeout: null}
+        { isOpen: false, message: '', action: null, timeout: null },
+        { isOpen: false, message: '', action: null, timeout: null },
+        { isOpen: false, message: '', action: null, timeout: null },
+        { isOpen: false, message: '', action: null, timeout: null },
+        { isOpen: false, message: '', action: null, timeout: null }
       ],
       queue: [],
     }
@@ -18,21 +18,24 @@ export default Vue.extend({
   mounted: function () {
     FtToastEvents.$on('toast.open', this.open)
   },
+  beforeDestroy: function () {
+    FtToastEvents.$off('toast.open', this.open)
+  },
   methods: {
     performAction: function (toast) {
       toast.action()
       this.close(toast)
     },
     close: function (toast) {
-      clearTimeout(toast.timeout);
+      clearTimeout(toast.timeout)
       toast.isOpen = false
-      if(this.queue.length !== 0) {
+      if (this.queue.length !== 0) {
         const nexToast = this.queue.shift()
         this.open(nexToast.message, nexToast.action)
       }
     },
     open: function (message, action) {
-      for(let i = this.toasts.length - 1; i >= 0 ; i--){
+      for (let i = this.toasts.length - 1; i >= 0; i--) {
         const toast = this.toasts[i]
         if (!toast.isOpen) {
           return this.showToast(message, action, toast)
@@ -47,7 +50,4 @@ export default Vue.extend({
       toast.timeout = setTimeout(this.close, 2000, toast)
     }
   },
-  beforeDestroy: function () {
-    FtToastEvents.$off('toast.open', this.open)
-  },
 })
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
index 5159cf9e..fd7cf3c6 100644
--- a/src/renderer/components/ft-toast/ft-toast.vue
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -7,10 +7,12 @@
       :class="{ closed: !toast.isOpen, open: toast.isOpen }"
       @click="performAction(toast)"
     >
-      <p class="message">{{ toast.message }}</p>
+      <p class="message">
+        {{ toast.message }}
+      </p>
     </div>
   </div>
 </template>
 
 <script src="./ft-toast.js" />
-<style scoped src="./ft-toast.css" />
\ No newline at end of file
+<style scoped src="./ft-toast.css" />

From cc101fd1191166820247e3dd44b1f8aed514ddd6 Mon Sep 17 00:00:00 2001
From: kylejwatson <mail@watsonk.me>
Date: Sat, 4 Jul 2020 16:13:47 +0100
Subject: [PATCH 08/13] Removed queue, destroy elements once all toasts are
 hidden

---
 src/renderer/components/ft-toast/ft-toast.js | 42 ++++++++++----------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index adcec349..16cd4aca 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -6,13 +6,7 @@ export default Vue.extend({
   data: function () {
     return {
       toasts: [
-        { isOpen: false, message: '', action: null, timeout: null },
-        { isOpen: false, message: '', action: null, timeout: null },
-        { isOpen: false, message: '', action: null, timeout: null },
-        { isOpen: false, message: '', action: null, timeout: null },
-        { isOpen: false, message: '', action: null, timeout: null }
       ],
-      queue: [],
     }
   },
   mounted: function () {
@@ -28,26 +22,34 @@ export default Vue.extend({
     },
     close: function (toast) {
       clearTimeout(toast.timeout)
-      toast.isOpen = false
-      if (this.queue.length !== 0) {
-        const nexToast = this.queue.shift()
-        this.open(nexToast.message, nexToast.action)
+      // Remove toasts when most recent toast has finished to avoid re-render
+      if (this.toasts.filter(toast => toast.isOpen).length === 1) {
+        // Wait for fade-out to finish
+        setTimeout(this.clear, 300)
       }
+      toast.isOpen = false
+
     },
     open: function (message, action) {
-      for (let i = this.toasts.length - 1; i >= 0; i--) {
-        const toast = this.toasts[i]
-        if (!toast.isOpen) {
-          return this.showToast(message, action, toast)
+      const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
+      toast.timeout = setTimeout(this.close, 5000, toast)
+      setImmediate(() => toast.isOpen = true)
+      if (this.toasts.length > 4) {
+        for (let i = this.toasts.length - 1; i >= 0; i--) {
+          if (!this.toasts[i].isOpen) {
+            // Replace the first hidden toast starting from the bottom
+            return this.toasts.splice(i, 1, toast)
+          }
         }
+        // Else replace the most recent
+        return this.toasts.splice(4, 1, toast)
       }
-      this.queue.push({ message: message, action: action })
+      this.toasts.push(toast)
     },
-    showToast: function(message, action, toast) {
-      toast.message = message
-      toast.action = action || (() => {})
-      toast.isOpen = true
-      toast.timeout = setTimeout(this.close, 2000, toast)
+    clear: function () {
+      if (this.toasts.every(toast => !toast.isOpen)) {
+        this.toasts = []
+      }
     }
   },
 })

From 0b988e72b907f52c52ddc4f746514e67004a7795 Mon Sep 17 00:00:00 2001
From: kylejwatson <mail@watsonk.me>
Date: Sat, 4 Jul 2020 16:44:35 +0100
Subject: [PATCH 09/13] Change syntax to a utils action

---
 .../components/ft-share-button/ft-share-button.js  | 14 +++++++++-----
 src/renderer/components/ft-toast/ft-toast.js       |  4 ++--
 src/renderer/store/modules/utils.js                |  6 +++++-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index cc897cd7..8da6f680 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import FtButton from '../ft-button/ft-button.vue'
-import FtToastEvents from '../ft-toast/ft-toast-events'
+import { mapActions } from 'vuex'
 
 export default Vue.extend({
   name: 'FtShareButton',
@@ -60,7 +60,7 @@ export default Vue.extend({
     },
 
     copyInvidious() {
-      FtToastEvents.$emit('toast.open', 'Invidious URL copied to clipboard')
+      this.showToast('Invidious URL copied to clipboard')
       this.copy(this.invidiousURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -71,7 +71,7 @@ export default Vue.extend({
     },
 
     copyYoutube() {
-      FtToastEvents.$emit('toast.open', 'YouTube URL copied to clipboard')
+      this.showToast('YouTube URL copied to clipboard')
       this.copy(this.youtubeURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -82,7 +82,7 @@ export default Vue.extend({
     },
 
     copyYoutubeEmbed() {
-      FtToastEvents.$emit('toast.open', 'YouTube Embed URL copied to clipboard')
+      this.showToast('YouTube Embed URL copied to clipboard')
       this.copy(this.youtubeEmbedURL)
       this.$refs.iconButton.toggleDropdown()
     },
@@ -93,9 +93,13 @@ export default Vue.extend({
     },
 
     copyInvidiousEmbed() {
-      FtToastEvents.$emit('toast.open', 'Invidious Embed URL copied to clipboard')
+      this.showToast('Invidious Embed URL copied to clipboard')
       this.copy(this.invidiousEmbedURL)
       this.$refs.iconButton.toggleDropdown()
     },
+
+    ...mapActions([
+      'showToast'
+    ])
   }
 })
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 16cd4aca..14dc3c8a 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -30,9 +30,9 @@ export default Vue.extend({
       toast.isOpen = false
 
     },
-    open: function (message, action) {
+    open: function (message, action, time) {
       const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
-      toast.timeout = setTimeout(this.close, 5000, toast)
+      toast.timeout = setTimeout(this.close, time || 3000, toast)
       setImmediate(() => toast.isOpen = true)
       if (this.toasts.length > 4) {
         for (let i = this.toasts.length - 1; i >= 0; i--) {
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 680fb7c8..19243798 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -1,5 +1,5 @@
 import IsEqual from 'lodash.isequal'
-
+import FtToastEvents from '../../components/ft-toast/ft-toast-events'
 const state = {
   isSideNavOpen: false,
   sessionSearchHistory: [],
@@ -84,6 +84,10 @@ const actions = {
     ]
 
     return extractors.reduce((a, c) => a || c(), null) || false
+  },
+
+  showToast (_, message, action, time) {
+    FtToastEvents.$emit('toast.open', message, action, time)
   }
 }
 

From a26690b5be2df2db77f2145fc255dbb5f680ec96 Mon Sep 17 00:00:00 2001
From: kylejwatson <mail@watsonk.me>
Date: Sat, 4 Jul 2020 16:54:49 +0100
Subject: [PATCH 10/13] Fix linting, Make toasts fit content rather than having
 the same width

---
 src/renderer/components/ft-toast/ft-toast.css | 4 +++-
 src/renderer/components/ft-toast/ft-toast.js  | 3 +--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 1e95bb60..79ce9f80 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -4,10 +4,12 @@
   transform: translate(-50%, 0);
   bottom: 50px;
   z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .toast {
-  display: flex;
   padding: 10px;
   margin: 5px;
   overflow-y: auto;
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 14dc3c8a..94f5044d 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -28,12 +28,11 @@ export default Vue.extend({
         setTimeout(this.clear, 300)
       }
       toast.isOpen = false
-
     },
     open: function (message, action, time) {
       const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
       toast.timeout = setTimeout(this.close, time || 3000, toast)
-      setImmediate(() => toast.isOpen = true)
+      setImmediate(() => { toast.isOpen = true })
       if (this.toasts.length > 4) {
         for (let i = this.toasts.length - 1; i >= 0; i--) {
           if (!this.toasts[i].isOpen) {

From 8c510b7c3c21c392e5de7361a0c4806c9b12cc25 Mon Sep 17 00:00:00 2001
From: kylejwatson <mail@watsonk.me>
Date: Sun, 2 Aug 2020 12:28:10 +0100
Subject: [PATCH 11/13] Simplified closing and replacement functionality

---
 src/renderer/components/ft-toast/ft-toast.js  | 36 +++++++------------
 src/renderer/components/ft-toast/ft-toast.vue |  2 +-
 2 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 94f5044d..26262028 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -5,8 +5,7 @@ export default Vue.extend({
   name: 'FtToast',
   data: function () {
     return {
-      toasts: [
-      ],
+      toasts: [],
     }
   },
   mounted: function () {
@@ -16,39 +15,28 @@ export default Vue.extend({
     FtToastEvents.$off('toast.open', this.open)
   },
   methods: {
-    performAction: function (toast) {
-      toast.action()
-      this.close(toast)
+    performAction: function (index) {
+      this.toasts[index].action()
+      this.remove(index)
     },
     close: function (toast) {
-      clearTimeout(toast.timeout)
-      // Remove toasts when most recent toast has finished to avoid re-render
-      if (this.toasts.filter(toast => toast.isOpen).length === 1) {
-        // Wait for fade-out to finish
-        setTimeout(this.clear, 300)
-      }
+      // Wait for fade-out to finish
+      setTimeout(this.remove, 300, this.toasts.length)
+
       toast.isOpen = false
     },
     open: function (message, action, time) {
       const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
-      toast.timeout = setTimeout(this.close, time || 3000, toast)
+      toast.timeout = setTimeout(this.close, time || 6000, toast)
       setImmediate(() => { toast.isOpen = true })
       if (this.toasts.length > 4) {
-        for (let i = this.toasts.length - 1; i >= 0; i--) {
-          if (!this.toasts[i].isOpen) {
-            // Replace the first hidden toast starting from the bottom
-            return this.toasts.splice(i, 1, toast)
-          }
-        }
-        // Else replace the most recent
-        return this.toasts.splice(4, 1, toast)
+        this.remove(0)
       }
       this.toasts.push(toast)
     },
-    clear: function () {
-      if (this.toasts.every(toast => !toast.isOpen)) {
-        this.toasts = []
-      }
+    remove: function(index) {
+      const removed = this.toasts.splice(index, 1)
+      clearTimeout(removed.timeout)
     }
   },
 })
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
index fd7cf3c6..efcd91a8 100644
--- a/src/renderer/components/ft-toast/ft-toast.vue
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -5,7 +5,7 @@
       :key="'toast-' + index"
       class="toast"
       :class="{ closed: !toast.isOpen, open: toast.isOpen }"
-      @click="performAction(toast)"
+      @click="performAction(index)"
     >
       <p class="message">
         {{ toast.message }}

From bfadb5769463d5eca16d9ca9f30c339f81dd46a9 Mon Sep 17 00:00:00 2001
From: kylejwatson <mail@watsonk.me>
Date: Sun, 2 Aug 2020 12:34:51 +0100
Subject: [PATCH 12/13] Reverted default delay

---
 src/renderer/components/ft-toast/ft-toast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 26262028..370325f7 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -27,7 +27,7 @@ export default Vue.extend({
     },
     open: function (message, action, time) {
       const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
-      toast.timeout = setTimeout(this.close, time || 6000, toast)
+      toast.timeout = setTimeout(this.close, time || 3000, toast)
       setImmediate(() => { toast.isOpen = true })
       if (this.toasts.length > 4) {
         this.remove(0)

From 56e13c79ca8377de55eb9b0c1aad90acd9dda74f Mon Sep 17 00:00:00 2001
From: kylejwatson <mail@watsonk.me>
Date: Sun, 2 Aug 2020 15:52:48 +0100
Subject: [PATCH 13/13] Splice fix

---
 src/renderer/components/ft-toast/ft-toast.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 370325f7..79a49c50 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -21,7 +21,7 @@ export default Vue.extend({
     },
     close: function (toast) {
       // Wait for fade-out to finish
-      setTimeout(this.remove, 300, this.toasts.length)
+      setTimeout(this.remove, 300, 0)
 
       toast.isOpen = false
     },
@@ -36,7 +36,7 @@ export default Vue.extend({
     },
     remove: function(index) {
       const removed = this.toasts.splice(index, 1)
-      clearTimeout(removed.timeout)
+      clearTimeout(removed[0].timeout)
     }
   },
 })