From a20f6a4e24e305536c6d666170c6a519fe7a7b13 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 31 Jan 2020 23:27:27 +0200
Subject: [PATCH 1/8] ModalsContainerContext exported from stremio-router

---
 src/router/ModalsContainerContext/index.js | 2 ++
 src/router/index.js                        | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/router/ModalsContainerContext/index.js b/src/router/ModalsContainerContext/index.js
index 2674313e1..794c897bf 100644
--- a/src/router/ModalsContainerContext/index.js
+++ b/src/router/ModalsContainerContext/index.js
@@ -1,7 +1,9 @@
+const ModalsContainerContext = require('./ModalsContainerContext');
 const ModalsContainerProvider = require('./ModalsContainerProvider');
 const useModalsContainer = require('./useModalsContainer');
 
 module.exports = {
+    ModalsContainerContext,
     ModalsContainerProvider,
     useModalsContainer
 };
diff --git a/src/router/index.js b/src/router/index.js
index 56eb8b422..343eaf951 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,9 +1,11 @@
 const { useRouteFocused } = require('./RouteFocusedContext');
 const Modal = require('./Modal');
+const { ModalsContainerContext } = require('./ModalsContainerContext');
 const Router = require('./Router');
 
 module.exports = {
     useRouteFocused,
     Modal,
+    ModalsContainerContext,
     Router
 };

From c2db27d938a911a14f6b0f6088d876cd686f18c7 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 31 Jan 2020 23:28:19 +0200
Subject: [PATCH 2/8] toasts container styles applied through props

---
 src/App/App.js                                   |  2 +-
 src/App/styles.less                              | 16 ++++++++++++++++
 src/common/Toasts/Toasts.js                      |  2 +-
 .../ToastsContainerProvider.js                   |  6 +++---
 .../Toasts/ToastsContainerContext/styles.less    |  9 ---------
 5 files changed, 21 insertions(+), 14 deletions(-)
 delete mode 100644 src/common/Toasts/ToastsContainerContext/styles.less

diff --git a/src/App/App.js b/src/App/App.js
index 09245c7d6..f601cf4ee 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -51,7 +51,7 @@ const App = () => {
             <ServicesProvider services={services}>
                 {
                     shellInitialized && coreInitialized ?
-                        <ToastsContainerProvider>
+                        <ToastsContainerProvider className={styles['toasts-container']}>
                             <Router
                                 className={styles['router']}
                                 homePath={'/'}
diff --git a/src/App/styles.less b/src/App/styles.less
index 87529fc59..0c89fe3e2 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -72,6 +72,22 @@ html {
             width: 100%;
             height: 100%;
 
+            .toasts-container {
+                position: absolute;
+                top: calc(1.2 * var(--nav-bar-size));
+                right: var(--nav-bar-size);
+                bottom: calc(1.2 * var(--nav-bar-size));
+                left: auto;
+                z-index: 0;
+                overflow-y: auto;
+                scrollbar-width: none;
+                pointer-events: none;
+
+                &::-webkit-scrollbar {
+                    width: var(--scroll-bar-width);
+                }
+            }
+
             .router {
                 width: 100%;
                 height: 100%;
diff --git a/src/common/Toasts/Toasts.js b/src/common/Toasts/Toasts.js
index d42a047cb..9c96ea25a 100644
--- a/src/common/Toasts/Toasts.js
+++ b/src/common/Toasts/Toasts.js
@@ -1,6 +1,6 @@
 const React = require('react');
 const { Modal } = require('stremio-router');
-const ModalsContainerContext = require('stremio-router/ModalsContainerContext/ModalsContainerContext');
+const { ModalsContainerContext } = require('stremio-router');
 const { useToastsContainer } = require('./ToastsContainerContext');
 const Toast = require('./Toast');
 
diff --git a/src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js b/src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
index f54635819..eb6f5dafa 100644
--- a/src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
+++ b/src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
@@ -1,19 +1,19 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const ToastsContainerContext = require('./ToastsContainerContext');
-const styles = require('./styles');
 
-const ToastsContainerProvider = ({ children }) => {
+const ToastsContainerProvider = ({ className, children }) => {
     const [container, setContainer] = React.useState(null);
     return (
         <ToastsContainerContext.Provider value={container}>
             {container instanceof HTMLElement ? children : null}
-            <div ref={setContainer} className={styles['toasts-container']} />
+            <div ref={setContainer} className={className} />
         </ToastsContainerContext.Provider>
     );
 };
 
 ToastsContainerProvider.propTypes = {
+    className: PropTypes.string,
     children: PropTypes.node
 };
 
diff --git a/src/common/Toasts/ToastsContainerContext/styles.less b/src/common/Toasts/ToastsContainerContext/styles.less
deleted file mode 100644
index 1afd990e6..000000000
--- a/src/common/Toasts/ToastsContainerContext/styles.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.toasts-container {
-    position: absolute;
-    top: var(--nav-bar-size);
-    right: 0;
-    bottom: 0;
-    left: auto !important;
-    z-index: 0;
-    pointer-events: none;
-}
\ No newline at end of file

From cd5d785ffcf10ee37657182aa9781adb239090ad Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 31 Jan 2020 23:35:20 +0200
Subject: [PATCH 3/8] ToastsContainerProvider exported through Toasts

---
 src/App/App.js              | 6 +++---
 src/common/Toasts/Toasts.js | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/App/App.js b/src/App/App.js
index f601cf4ee..82b12d898 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -2,7 +2,7 @@ require('spatial-navigation-polyfill');
 const React = require('react');
 const { Router } = require('stremio-router');
 const { Core, KeyboardNavigation, ServicesProvider, Shell } = require('stremio/services');
-const { ToastsContainerProvider } = require('stremio/common/Toasts/ToastsContainerContext');
+const { Toasts } = require('stremio/common');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 
@@ -51,14 +51,14 @@ const App = () => {
             <ServicesProvider services={services}>
                 {
                     shellInitialized && coreInitialized ?
-                        <ToastsContainerProvider className={styles['toasts-container']}>
+                        <Toasts.ContainerProvider className={styles['toasts-container']}>
                             <Router
                                 className={styles['router']}
                                 homePath={'/'}
                                 viewsConfig={routerViewsConfig}
                                 onPathNotMatch={onPathNotMatch}
                             />
-                        </ToastsContainerProvider>
+                        </Toasts.ContainerProvider>
                         :
                         <div className={styles['app-loader']} />
                 }
diff --git a/src/common/Toasts/Toasts.js b/src/common/Toasts/Toasts.js
index 9c96ea25a..be964f6b4 100644
--- a/src/common/Toasts/Toasts.js
+++ b/src/common/Toasts/Toasts.js
@@ -1,7 +1,7 @@
 const React = require('react');
 const { Modal } = require('stremio-router');
 const { ModalsContainerContext } = require('stremio-router');
-const { useToastsContainer } = require('./ToastsContainerContext');
+const { useToastsContainer, ToastsContainerProvider } = require('./ToastsContainerContext');
 const Toast = require('./Toast');
 
 const DEFAULT_TIMEOUT = 2000;
@@ -52,4 +52,6 @@ const Toasts = React.forwardRef(({ className }, ref) => {
     );
 });
 
+Toasts.ContainerProvider = ToastsContainerProvider;
+
 module.exports = Toasts;

From 88a2e0078bb20bbe7bb478ea3a5bad57c49a388d Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 1 Feb 2020 00:37:35 +0200
Subject: [PATCH 4/8] Toast redesigned

---
 src/common/Toasts/Toast/Toast.js    | 52 +++++++++++++++++++----------
 src/common/Toasts/Toast/index.js    |  2 +-
 src/common/Toasts/Toast/styles.less | 35 ++++++++++---------
 3 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/src/common/Toasts/Toast/Toast.js b/src/common/Toasts/Toast/Toast.js
index b667a6d55..8b4470c02 100644
--- a/src/common/Toasts/Toast/Toast.js
+++ b/src/common/Toasts/Toast/Toast.js
@@ -5,9 +5,30 @@ const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
-const Toast = ({ type, title, text, icon, closeButton, onClick, onClose }) => {
+const Toast = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
+    const toastOnClick = React.useCallback((event) => {
+        if (!event.nativeEvent.selectPrevented && typeof onSelect === 'function') {
+            onSelect({
+                type: 'select',
+                dataset: dataset,
+                reactEvent: event,
+                nativeEvent: event.nativeEvent
+            });
+        }
+    }, [dataset, onSelect]);
+    const closeButtonOnClick = React.useCallback((event) => {
+        event.nativeEvent.selectPrevented = true;
+        if (typeof onClose === 'function') {
+            onClose({
+                type: 'close',
+                dataset: dataset,
+                reactEvent: event,
+                nativeEvent: event.nativeEvent
+            });
+        }
+    }, [dataset, onClose]);
     return (
-        <div className={classnames(styles['toast-container'], styles[type])}>
+        <Button className={classnames(styles['toast-container'], styles['alert'], styles[type])} tabIndex={-1} onClick={toastOnClick}>
             {
                 typeof icon === 'string' && icon.length > 0 ?
                     <div className={styles['icon-container']}>
@@ -16,34 +37,29 @@ const Toast = ({ type, title, text, icon, closeButton, onClick, onClose }) => {
                     :
                     null
             }
-            <div className={classnames(styles['message-container'], { [styles.clickable]: typeof onClick === 'function' })} onClick={onClick}>
+            <div className={styles['info-container']}>
                 {
                     typeof title === 'string' && title.length > 0 ?
-                        <h1>{title}</h1>
+                        <div className={styles['title-container']}>{title}</div>
                         :
                         null
                 }
-                {text}
+                <div className={styles['message-container']}>{message}</div>
             </div>
-            {
-                closeButton ?
-                    <Button className={styles['close-button-container']} title={'Close'} onClick={onClose}>
-                        <Icon className={styles['icon']} icon={'ic_x'} />
-                    </Button>
-                    :
-                    null
-            }
-        </div>
+            <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={closeButtonOnClick}>
+                <Icon className={styles['icon']} icon={'ic_x'} />
+            </Button>
+        </Button>
     );
 };
 
 Toast.propTypes = {
-    type: PropTypes.string,
+    type: PropTypes.oneOf(['success', 'alert', 'error']),
     title: PropTypes.string,
-    text: PropTypes.string,
+    message: PropTypes.string,
     icon: PropTypes.string,
-    closeButton: PropTypes.bool,
-    onClick: PropTypes.func,
+    dataset: PropTypes.objectOf(PropTypes.string),
+    onSelect: PropTypes.func,
     onClose: PropTypes.func
 };
 
diff --git a/src/common/Toasts/Toast/index.js b/src/common/Toasts/Toast/index.js
index efe31724b..37050e200 100644
--- a/src/common/Toasts/Toast/index.js
+++ b/src/common/Toasts/Toast/index.js
@@ -1,3 +1,3 @@
 const Toast = require('./Toast');
 
-module.exports = Toast;
\ No newline at end of file
+module.exports = Toast;
diff --git a/src/common/Toasts/Toast/styles.less b/src/common/Toasts/Toast/styles.less
index 6bb5c6399..41ff0ca39 100644
--- a/src/common/Toasts/Toast/styles.less
+++ b/src/common/Toasts/Toast/styles.less
@@ -2,13 +2,14 @@
     display: flex;
     flex-direction: row;
     min-height: 6rem;
+    max-width: 25rem;
     margin-bottom: 1rem;
     border: thin solid;
-    color: var(--color-backgrounddarker);
-    fill: var(--color-backgrounddarker);
     background-color: var(--color-surfacelighter);
     overflow: visible;
-    pointer-events: all;
+    box-shadow: 0 0.3rem 0.5rem var(--color-backgrounddarker40),
+        0 0.6rem 1rem var(--color-backgrounddarker20);
+    pointer-events: auto;
 
     &.success {
         color: var(--color-signal5);
@@ -26,10 +27,10 @@
     }
 
     .icon-container {
-        width: 5rem;
-        padding: 1rem;
-        padding-right: 0;
-        overflow: visible;
+        flex: none;
+        align-self: stretch;
+        width: 4.5rem;
+        padding: 1.2rem 0 1.2rem 1.2rem;
 
         .icon {
             display: block;
@@ -38,33 +39,35 @@
         }
     }
 
-    .message-container {
+    .info-container {
         flex: 1;
+        align-self: stretch;
         padding: 1rem;
 
-        &.clickable {
-            cursor: pointer;
+        .title-container {
+            font-size: 1.2rem;
         }
 
-        .message-caption {
-            font-weight: bold;
+        .message-container {
+            font-size: 1.1rem;
         }
     }
 
     .close-button-container {
         flex: none;
+        align-self: flex-start;
         width: 3rem;
         height: 3rem;
         padding: 1rem;
 
+        &:hover {
+            background-color: var(--color-surfacelight);
+        }
+
         .icon {
             display: block;
             width: 100%;
             height: 100%;
         }
-
-        &:hover {
-            background-color: var(--color-surfacelight);
-        }
     }
 }
\ No newline at end of file

From 3bbcceb949687c745b7462b13a1369a85270fc82 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 1 Feb 2020 00:39:44 +0200
Subject: [PATCH 5/8] toast item shadow fixed

---
 src/App/styles.less | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App/styles.less b/src/App/styles.less
index 0c89fe3e2..8844fde5e 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -75,10 +75,11 @@ html {
             .toasts-container {
                 position: absolute;
                 top: calc(1.2 * var(--nav-bar-size));
-                right: var(--nav-bar-size);
+                right: 0;
                 bottom: calc(1.2 * var(--nav-bar-size));
                 left: auto;
-                z-index: 0;
+                z-index: 1;
+                padding: 0 calc(1.2 * var(--nav-bar-size));
                 overflow-y: auto;
                 scrollbar-width: none;
                 pointer-events: none;

From 0b7aa5068ab624babc7b5dbce8d67743c855baeb Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 1 Feb 2020 10:03:04 +0200
Subject: [PATCH 6/8] dataset prop type changed

---
 src/common/ColorInput/ColorInput.js           | 2 +-
 src/common/MetaItem/MetaItem.js               | 2 +-
 src/common/ModalDialog/ModalDialog.js         | 2 +-
 src/common/Multiselect/Multiselect.js         | 2 +-
 src/common/PaginationInput/PaginationInput.js | 2 +-
 src/common/Popup/Popup.js                     | 2 +-
 src/routes/Addons/Addon/Addon.js              | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js
index 7e846a4a8..d64d8938e 100644
--- a/src/common/ColorInput/ColorInput.js
+++ b/src/common/ColorInput/ColorInput.js
@@ -77,7 +77,7 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
 ColorInput.propTypes = {
     className: PropTypes.string,
     value: PropTypes.string,
-    dataset: PropTypes.objectOf(PropTypes.string),
+    dataset: PropTypes.object,
     onChange: PropTypes.func,
     onClick: PropTypes.func
 };
diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 4d4f6cb1f..ffd75a754 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -121,7 +121,7 @@ MetaItem.propTypes = {
     playIcon: PropTypes.bool,
     progress: PropTypes.number,
     options: PropTypes.array,
-    dataset: PropTypes.objectOf(PropTypes.string),
+    dataset: PropTypes.object,
     optionOnSelect: PropTypes.func,
     onClick: PropTypes.func
 };
diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index abb594c09..441907f10 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -112,7 +112,7 @@ ModalDialog.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node
     ]),
-    dataset: PropTypes.objectOf(PropTypes.string),
+    dataset: PropTypes.object,
     onCloseRequest: PropTypes.func
 };
 
diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js
index ff7b11eda..0ac42c2d1 100644
--- a/src/common/Multiselect/Multiselect.js
+++ b/src/common/Multiselect/Multiselect.js
@@ -143,7 +143,7 @@ Multiselect.propTypes = {
     })),
     selected: PropTypes.arrayOf(PropTypes.string),
     disabled: PropTypes.bool,
-    dataset: PropTypes.objectOf(PropTypes.string),
+    dataset: PropTypes.object,
     renderLabelContent: PropTypes.func,
     renderLabelText: PropTypes.func,
     onOpen: PropTypes.func,
diff --git a/src/common/PaginationInput/PaginationInput.js b/src/common/PaginationInput/PaginationInput.js
index 7358c55c7..dd5029117 100644
--- a/src/common/PaginationInput/PaginationInput.js
+++ b/src/common/PaginationInput/PaginationInput.js
@@ -35,7 +35,7 @@ const PaginationInput = ({ className, label, dataset, onSelect, ...props }) => {
 PaginationInput.propTypes = {
     className: PropTypes.string,
     label: PropTypes.string,
-    dataset: PropTypes.objectOf(PropTypes.string),
+    dataset: PropTypes.object,
     onSelect: PropTypes.func
 };
 
diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js
index 59b89f26e..1df4192b4 100644
--- a/src/common/Popup/Popup.js
+++ b/src/common/Popup/Popup.js
@@ -103,7 +103,7 @@ Popup.propTypes = {
     direction: PropTypes.oneOf(['top-left', 'bottom-left', 'top-right', 'bottom-right']),
     renderLabel: PropTypes.func.isRequired,
     renderMenu: PropTypes.func.isRequired,
-    dataset: PropTypes.objectOf(PropTypes.string),
+    dataset: PropTypes.object,
     onCloseRequest: PropTypes.func
 };
 
diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
index d646ed2b9..3c97cd1bb 100644
--- a/src/routes/Addons/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -105,7 +105,7 @@ Addon.propTypes = {
     installed: PropTypes.bool,
     onToggle: PropTypes.func,
     onShare: PropTypes.func,
-    dataset: PropTypes.objectOf(PropTypes.string)
+    dataset: PropTypes.object
 };
 
 module.exports = Addon;

From 56ebd9dafcf8b8417abd5948cd8f035ce8c565c2 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 1 Feb 2020 10:46:00 +0200
Subject: [PATCH 7/8] Toast refactored to not use modals context

---
 src/App/App.js                                |  6 +-
 src/common/Toast/ToastContext.js              | 10 +++
 .../Toast.js => Toast/ToastItem/ToastItem.js} | 17 +++--
 src/common/Toast/ToastItem/index.js           |  3 +
 .../Toast => Toast/ToastItem}/styles.less     |  4 +-
 src/common/Toast/ToastProvider.js             | 72 +++++++++++++++++++
 src/common/Toast/index.js                     |  7 ++
 src/common/Toast/useToast.js                  |  8 +++
 src/common/Toasts/Toast/index.js              |  3 -
 src/common/Toasts/Toasts.js                   | 57 ---------------
 .../ToastsContainerContext.js                 |  7 --
 .../ToastsContainerProvider.js                | 20 ------
 .../Toasts/ToastsContainerContext/index.js    |  7 --
 .../useToastsContainer.js                     |  8 ---
 src/common/Toasts/index.js                    |  3 -
 src/common/index.js                           |  5 +-
 16 files changed, 119 insertions(+), 118 deletions(-)
 create mode 100644 src/common/Toast/ToastContext.js
 rename src/common/{Toasts/Toast/Toast.js => Toast/ToastItem/ToastItem.js} (78%)
 create mode 100644 src/common/Toast/ToastItem/index.js
 rename src/common/{Toasts/Toast => Toast/ToastItem}/styles.less (97%)
 create mode 100644 src/common/Toast/ToastProvider.js
 create mode 100644 src/common/Toast/index.js
 create mode 100644 src/common/Toast/useToast.js
 delete mode 100644 src/common/Toasts/Toast/index.js
 delete mode 100644 src/common/Toasts/Toasts.js
 delete mode 100644 src/common/Toasts/ToastsContainerContext/ToastsContainerContext.js
 delete mode 100644 src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
 delete mode 100644 src/common/Toasts/ToastsContainerContext/index.js
 delete mode 100644 src/common/Toasts/ToastsContainerContext/useToastsContainer.js
 delete mode 100644 src/common/Toasts/index.js

diff --git a/src/App/App.js b/src/App/App.js
index 82b12d898..c7d23c300 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -2,7 +2,7 @@ require('spatial-navigation-polyfill');
 const React = require('react');
 const { Router } = require('stremio-router');
 const { Core, KeyboardNavigation, ServicesProvider, Shell } = require('stremio/services');
-const { Toasts } = require('stremio/common');
+const { ToastProvider } = require('stremio/common');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 
@@ -51,14 +51,14 @@ const App = () => {
             <ServicesProvider services={services}>
                 {
                     shellInitialized && coreInitialized ?
-                        <Toasts.ContainerProvider className={styles['toasts-container']}>
+                        <ToastProvider className={styles['toasts-container']}>
                             <Router
                                 className={styles['router']}
                                 homePath={'/'}
                                 viewsConfig={routerViewsConfig}
                                 onPathNotMatch={onPathNotMatch}
                             />
-                        </Toasts.ContainerProvider>
+                        </ToastProvider>
                         :
                         <div className={styles['app-loader']} />
                 }
diff --git a/src/common/Toast/ToastContext.js b/src/common/Toast/ToastContext.js
new file mode 100644
index 000000000..7418affbd
--- /dev/null
+++ b/src/common/Toast/ToastContext.js
@@ -0,0 +1,10 @@
+const React = require('react');
+
+const ToastContext = React.createContext({
+    show: () => { },
+    clear: () => { }
+});
+
+ToastContext.displayName = 'ToastContext';
+
+module.exports = ToastContext;
diff --git a/src/common/Toasts/Toast/Toast.js b/src/common/Toast/ToastItem/ToastItem.js
similarity index 78%
rename from src/common/Toasts/Toast/Toast.js
rename to src/common/Toast/ToastItem/ToastItem.js
index 8b4470c02..04ddbebe6 100644
--- a/src/common/Toasts/Toast/Toast.js
+++ b/src/common/Toast/ToastItem/ToastItem.js
@@ -5,7 +5,7 @@ const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
-const Toast = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
+const ToastItem = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
     const toastOnClick = React.useCallback((event) => {
         if (!event.nativeEvent.selectPrevented && typeof onSelect === 'function') {
             onSelect({
@@ -28,7 +28,7 @@ const Toast = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
         }
     }, [dataset, onClose]);
     return (
-        <Button className={classnames(styles['toast-container'], styles['alert'], styles[type])} tabIndex={-1} onClick={toastOnClick}>
+        <Button className={classnames(styles['toast-item-container'], styles['success'], styles[type])} tabIndex={-1} onClick={toastOnClick}>
             {
                 typeof icon === 'string' && icon.length > 0 ?
                     <div className={styles['icon-container']}>
@@ -44,7 +44,12 @@ const Toast = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
                         :
                         null
                 }
-                <div className={styles['message-container']}>{message}</div>
+                {
+                    typeof message === 'string' && message.length > 0 ?
+                        <div className={styles['message-container']}>{message}</div>
+                        :
+                        null
+                }
             </div>
             <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={closeButtonOnClick}>
                 <Icon className={styles['icon']} icon={'ic_x'} />
@@ -53,14 +58,14 @@ const Toast = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
     );
 };
 
-Toast.propTypes = {
+ToastItem.propTypes = {
     type: PropTypes.oneOf(['success', 'alert', 'error']),
     title: PropTypes.string,
     message: PropTypes.string,
     icon: PropTypes.string,
-    dataset: PropTypes.objectOf(PropTypes.string),
+    dataset: PropTypes.object,
     onSelect: PropTypes.func,
     onClose: PropTypes.func
 };
 
-module.exports = Toast;
+module.exports = ToastItem;
diff --git a/src/common/Toast/ToastItem/index.js b/src/common/Toast/ToastItem/index.js
new file mode 100644
index 000000000..c00d404b2
--- /dev/null
+++ b/src/common/Toast/ToastItem/index.js
@@ -0,0 +1,3 @@
+const ToastItem = require('./ToastItem');
+
+module.exports = ToastItem;
diff --git a/src/common/Toasts/Toast/styles.less b/src/common/Toast/ToastItem/styles.less
similarity index 97%
rename from src/common/Toasts/Toast/styles.less
rename to src/common/Toast/ToastItem/styles.less
index 41ff0ca39..4c09f6cff 100644
--- a/src/common/Toasts/Toast/styles.less
+++ b/src/common/Toast/ToastItem/styles.less
@@ -1,8 +1,8 @@
-.toast-container {
+.toast-item-container {
     display: flex;
     flex-direction: row;
+    width: 25rem;
     min-height: 6rem;
-    max-width: 25rem;
     margin-bottom: 1rem;
     border: thin solid;
     background-color: var(--color-surfacelighter);
diff --git a/src/common/Toast/ToastProvider.js b/src/common/Toast/ToastProvider.js
new file mode 100644
index 000000000..cb91f34ee
--- /dev/null
+++ b/src/common/Toast/ToastProvider.js
@@ -0,0 +1,72 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const ToastItem = require('./ToastItem');
+const ToastContext = require('./ToastContext');
+
+const DEFAULT_TIMEOUT = 3000;
+
+const ToastProvider = ({ className, children }) => {
+    const [container, setContainer] = React.useState(null);
+    const [items, dispatch] = React.useReducer(
+        (items, action) => {
+            switch (action.type) {
+                case 'add':
+                    return items.concat(action.item);
+                case 'remove':
+                    return items.filter((item) => item.id !== action.id);
+                case 'clear':
+                    return [];
+                default:
+                    return items;
+            }
+        },
+        []
+    );
+    const itemOnClose = React.useCallback((event) => {
+        clearTimeout(event.dataset.id);
+        dispatch({ type: 'remove', id: event.dataset.id });
+    }, []);
+    const toast = React.useMemo(() => ({
+        show: (item) => {
+            const timeout = typeof item.timeout === 'number' && !isNaN(item.timeout) ?
+                item.timeout
+                :
+                DEFAULT_TIMEOUT;
+            const id = setTimeout(() => {
+                dispatch({ type: 'remove', id });
+            }, timeout);
+            dispatch({
+                type: 'add',
+                item: {
+                    ...item,
+                    id,
+                    dataset: {
+                        ...item.dataset,
+                        id
+                    },
+                    onClose: itemOnClose
+                }
+            });
+        },
+        clear: () => {
+            dispatch({ type: 'clear' });
+        }
+    }), []);
+    return (
+        <ToastContext.Provider value={toast}>
+            {container instanceof HTMLElement ? children : null}
+            <div ref={setContainer} className={className}>
+                {items.map((item, index) => (
+                    <ToastItem key={index} {...item} />
+                ))}
+            </div>
+        </ToastContext.Provider>
+    );
+};
+
+ToastProvider.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node
+};
+
+module.exports = ToastProvider;
diff --git a/src/common/Toast/index.js b/src/common/Toast/index.js
new file mode 100644
index 000000000..516e30a1e
--- /dev/null
+++ b/src/common/Toast/index.js
@@ -0,0 +1,7 @@
+const ToastProvider = require('./ToastProvider');
+const useToast = require('./useToast');
+
+module.exports = {
+    ToastProvider,
+    useToast
+};
diff --git a/src/common/Toast/useToast.js b/src/common/Toast/useToast.js
new file mode 100644
index 000000000..76ba83914
--- /dev/null
+++ b/src/common/Toast/useToast.js
@@ -0,0 +1,8 @@
+const React = require('react');
+const ToastContext = require('./ToastContext');
+
+const useToast = () => {
+    return React.useContext(ToastContext);
+};
+
+module.exports = useToast;
diff --git a/src/common/Toasts/Toast/index.js b/src/common/Toasts/Toast/index.js
deleted file mode 100644
index 37050e200..000000000
--- a/src/common/Toasts/Toast/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const Toast = require('./Toast');
-
-module.exports = Toast;
diff --git a/src/common/Toasts/Toasts.js b/src/common/Toasts/Toasts.js
deleted file mode 100644
index be964f6b4..000000000
--- a/src/common/Toasts/Toasts.js
+++ /dev/null
@@ -1,57 +0,0 @@
-const React = require('react');
-const { Modal } = require('stremio-router');
-const { ModalsContainerContext } = require('stremio-router');
-const { useToastsContainer, ToastsContainerProvider } = require('./ToastsContainerContext');
-const Toast = require('./Toast');
-
-const DEFAULT_TIMEOUT = 2000;
-
-const Toasts = React.forwardRef(({ className }, ref) => {
-    const toastsContainer = useToastsContainer();
-    const [toasts, dispatch] = React.useReducer(
-        (state, action) => {
-            switch (action.type) {
-                case 'add':
-                    return state.concat([action.item]);
-                case 'remove':
-                    return state.filter(item => item !== action.item);
-                case 'removeAll':
-                    state.forEach(item => clearTimeout(item.timerId));
-                    return [];
-                default:
-                    return state;
-            }
-        }, []
-    );
-    const hideAll = React.useCallback(() => {
-        dispatch({ type: 'removeAll' });
-    }, []);
-    const show = React.useCallback(({ type, icon, title, text, closeButton, timeout, onClick }) => {
-        timeout = timeout !== null && !isNaN(timeout) ? timeout : DEFAULT_TIMEOUT;
-        const close = () => {
-            clearTimeout(newItem.timerId);
-            dispatch({ type: 'remove', item: newItem });
-        };
-
-        const newItem = { type, icon, title, text, closeButton, timeout, onClick, onClose: close };
-
-        if (timeout !== 0) {
-            newItem.timerId = setTimeout(close, timeout);
-        }
-        dispatch({ type: 'add', item: newItem });
-        return close;
-    }, []);
-    React.useImperativeHandle(ref, () => ({ show, hideAll }));
-
-    return toasts.length === 0 ? null : (
-        <ModalsContainerContext.Provider value={toastsContainer}>
-            <Modal className={className} disabled={true}>
-                {toasts.map((toast, index) => (<Toast {...toast} key={index} />))}
-            </Modal>
-        </ModalsContainerContext.Provider>
-    );
-});
-
-Toasts.ContainerProvider = ToastsContainerProvider;
-
-module.exports = Toasts;
diff --git a/src/common/Toasts/ToastsContainerContext/ToastsContainerContext.js b/src/common/Toasts/ToastsContainerContext/ToastsContainerContext.js
deleted file mode 100644
index fdff8212f..000000000
--- a/src/common/Toasts/ToastsContainerContext/ToastsContainerContext.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const React = require('react');
-
-const ToastsContainerContext = React.createContext(null);
-
-ToastsContainerContext.displayName = 'ToastsContainerContext';
-
-module.exports = ToastsContainerContext;
diff --git a/src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js b/src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
deleted file mode 100644
index eb6f5dafa..000000000
--- a/src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const ToastsContainerContext = require('./ToastsContainerContext');
-
-const ToastsContainerProvider = ({ className, children }) => {
-    const [container, setContainer] = React.useState(null);
-    return (
-        <ToastsContainerContext.Provider value={container}>
-            {container instanceof HTMLElement ? children : null}
-            <div ref={setContainer} className={className} />
-        </ToastsContainerContext.Provider>
-    );
-};
-
-ToastsContainerProvider.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-};
-
-module.exports = ToastsContainerProvider;
diff --git a/src/common/Toasts/ToastsContainerContext/index.js b/src/common/Toasts/ToastsContainerContext/index.js
deleted file mode 100644
index 55ef960ec..000000000
--- a/src/common/Toasts/ToastsContainerContext/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const ToastsContainerProvider = require('./ToastsContainerProvider');
-const useToastsContainer = require('./useToastsContainer');
-
-module.exports = {
-    ToastsContainerProvider,
-    useToastsContainer
-};
diff --git a/src/common/Toasts/ToastsContainerContext/useToastsContainer.js b/src/common/Toasts/ToastsContainerContext/useToastsContainer.js
deleted file mode 100644
index 0f32d0d4c..000000000
--- a/src/common/Toasts/ToastsContainerContext/useToastsContainer.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const React = require('react');
-const ToastsContainerContext = require('./ToastsContainerContext');
-
-const useToastsContainer = () => {
-    return React.useContext(ToastsContainerContext);
-};
-
-module.exports = useToastsContainer;
diff --git a/src/common/Toasts/index.js b/src/common/Toasts/index.js
deleted file mode 100644
index b06087a3a..000000000
--- a/src/common/Toasts/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const Toasts = require('./Toasts');
-
-module.exports = Toasts;
diff --git a/src/common/index.js b/src/common/index.js
index 40a3a9e90..bc5bb3c37 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -16,7 +16,7 @@ const Popup = require('./Popup');
 const SharePrompt = require('./SharePrompt');
 const Slider = require('./Slider');
 const TextInput = require('./TextInput');
-const Toasts = require('./Toasts');
+const { ToastProvider, useToast } = require('./Toast');
 const routesRegexp = require('./routesRegexp');
 const useAnimationFrame = require('./useAnimationFrame');
 const useBinaryState = require('./useBinaryState');
@@ -47,7 +47,8 @@ module.exports = {
     SharePrompt,
     Slider,
     TextInput,
-    Toasts,
+    ToastProvider,
+    useToast,
     routesRegexp,
     useAnimationFrame,
     useBinaryState,

From 3aa4bc19c8e39988308398f511a59d5dd59cfb1e Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 1 Feb 2020 10:46:15 +0200
Subject: [PATCH 8/8] modals context not exported from router package

---
 src/router/ModalsContainerContext/index.js | 2 --
 src/router/index.js                        | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/router/ModalsContainerContext/index.js b/src/router/ModalsContainerContext/index.js
index 794c897bf..2674313e1 100644
--- a/src/router/ModalsContainerContext/index.js
+++ b/src/router/ModalsContainerContext/index.js
@@ -1,9 +1,7 @@
-const ModalsContainerContext = require('./ModalsContainerContext');
 const ModalsContainerProvider = require('./ModalsContainerProvider');
 const useModalsContainer = require('./useModalsContainer');
 
 module.exports = {
-    ModalsContainerContext,
     ModalsContainerProvider,
     useModalsContainer
 };
diff --git a/src/router/index.js b/src/router/index.js
index 343eaf951..56eb8b422 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,11 +1,9 @@
 const { useRouteFocused } = require('./RouteFocusedContext');
 const Modal = require('./Modal');
-const { ModalsContainerContext } = require('./ModalsContainerContext');
 const Router = require('./Router');
 
 module.exports = {
     useRouteFocused,
     Modal,
-    ModalsContainerContext,
     Router
 };