From 8a9dae6ddc35d2ee035a31471bd3641b6e233c66 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 16 Dec 2019 17:21:09 +0200
Subject: [PATCH 01/21] Library sort param moved from query params to url
 params

---
 src/common/routesRegexp.js                |  4 ++--
 src/routes/Library/Library.js             |  8 ++++----
 src/routes/Library/useLibrary.js          | 11 ++++-------
 src/routes/Library/useSelectableInputs.js | 11 ++---------
 4 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/common/routesRegexp.js b/src/common/routesRegexp.js
index 113497ec5..f4128765b 100644
--- a/src/common/routesRegexp.js
+++ b/src/common/routesRegexp.js
@@ -12,8 +12,8 @@ const routesRegexp = {
         urlParamsNames: ['addonTransportUrl', 'type', 'catalogId']
     },
     library: {
-        regexp: /^\/library(?:\/([^/]*))?$/,
-        urlParamsNames: ['type']
+        regexp: /^\/library(?:\/([^/]*)\/([^/]*))?$/,
+        urlParamsNames: ['type', 'sort']
     },
     search: {
         regexp: /^\/search$/,
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index d3c081646..378612678 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -7,8 +7,8 @@ const useSelectableInputs = require('./useSelectableInputs');
 const useItemOptions = require('./useItemOptions');
 const styles = require('./styles');
 
-const Library = ({ urlParams, queryParams }) => {
-    const library = useLibrary(urlParams, queryParams);
+const Library = ({ urlParams }) => {
+    const library = useLibrary(urlParams);
     const [typeSelect, sortPropSelect] = useSelectableInputs(library);
     const [options, optionOnSelect] = useItemOptions();
     return (
@@ -73,8 +73,8 @@ const Library = ({ urlParams, queryParams }) => {
 Library.propTypes = {
     urlParams: PropTypes.exact({
         type: PropTypes.string,
-    }),
-    queryParams: PropTypes.instanceOf(URLSearchParams)
+        sort: PropTypes.string
+    })
 };
 
 module.exports = Library;
diff --git a/src/routes/Library/useLibrary.js b/src/routes/Library/useLibrary.js
index b2426e055..69c63f56e 100644
--- a/src/routes/Library/useLibrary.js
+++ b/src/routes/Library/useLibrary.js
@@ -46,20 +46,17 @@ const onNewLibraryState = (library) => {
     }
 };
 
-const useLibrary = (urlParams, queryParams) => {
+const useLibrary = (urlParams) => {
     const { core } = useServices();
     const loadLibraryAction = React.useMemo(() => {
-        if (typeof urlParams.type === 'string') {
+        if (typeof urlParams.type === 'string' && typeof urlParams.sort === 'string') {
             return {
                 action: 'Load',
                 args: {
                     load: 'LibraryFiltered',
                     args: {
                         type_name: urlParams.type,
-                        sort_prop: queryParams.has('sort_prop') ?
-                            queryParams.get('sort_prop')
-                            :
-                            null
+                        sort_prop: urlParams.sort
                     }
                 }
             };
@@ -82,7 +79,7 @@ const useLibrary = (urlParams, queryParams) => {
                 };
             }
         }
-    }, [urlParams, queryParams]);
+    }, [urlParams]);
     return useModelState({
         model: 'library',
         action: loadLibraryAction,
diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js
index 601ce9731..645db1457 100644
--- a/src/routes/Library/useSelectableInputs.js
+++ b/src/routes/Library/useSelectableInputs.js
@@ -16,13 +16,7 @@ const mapSelectableInputs = (library) => {
         options: library.type_names
             .map((type) => ({ label: type, value: type })),
         onSelect: (event) => {
-            const queryParams = new URLSearchParams(
-                library.selected !== null ?
-                    [['sort_prop', library.selected.sort_prop]]
-                    :
-                    []
-            );
-            window.location.replace(`#/library/${encodeURIComponent(event.value)}?${queryParams.toString()}`);
+            window.location.replace(`#/library/${encodeURIComponent(event.value)}/${encodeURIComponent(library.selected.sort_prop)}`);
         }
     };
     const sortPropSelect = {
@@ -33,9 +27,8 @@ const mapSelectableInputs = (library) => {
             [],
         options: SORT_PROP_OPTIONS,
         onSelect: (event) => {
-            const queryParams = new URLSearchParams([['sort_prop', event.value]]);
             if (library.selected !== null) {
-                window.location.replace(`#/library/${encodeURIComponent(library.selected.type_name)}?${queryParams.toString()}`);
+                window.location.replace(`#/library/${encodeURIComponent(library.selected.type_name)}/${encodeURIComponent(event.value)}`);
             }
         }
     };

From dd5e9c803bd14a3d2d81c6bc8a45774c83280eca Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 16 Dec 2019 17:41:33 +0200
Subject: [PATCH 02/21] add dev deps for tests

---
 package.json |   3 ++
 yarn.lock    | 107 +++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 106 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index da4427714..17da07d2d 100755
--- a/package.json
+++ b/package.json
@@ -41,6 +41,8 @@
         "@storybook/addon-console": "1.2.1",
         "@storybook/addons": "5.2.8",
         "@storybook/react": "5.2.8",
+        "@testing-library/react": "9.4.0",
+        "@testing-library/react-hooks": "3.2.1",
         "babel-loader": "8.0.6",
         "clean-webpack-plugin": "3.0.0",
         "copy-webpack-plugin": "5.0.5",
@@ -53,6 +55,7 @@
         "less-loader": "5.0.0",
         "mini-css-extract-plugin": "0.8.0",
         "postcss-loader": "3.0.0",
+        "react-test-renderer": "16.12.0",
         "storybook-addon-jsx": "7.1.13",
         "terser-webpack-plugin": "2.2.1",
         "webpack": "4.41.2",
diff --git a/yarn.lock b/yarn.lock
index 31faaf37c..a12499a80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -905,7 +905,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6":
   version "7.7.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
   integrity sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw==
@@ -1232,6 +1232,11 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
+"@sheerun/mutationobserver-shim@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"
+  integrity sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==
+
 "@storybook/addon-actions@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-5.2.8.tgz#f63c6e1afb59e94ca1ebc776b7cad9b815e7419e"
@@ -1660,6 +1665,35 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
+"@testing-library/dom@^6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.11.0.tgz#962a38f1a721fdb7c9e35e7579e33ff13a00eda4"
+  integrity sha512-Pkx9LMIGshyNbfmecjt18rrAp/ayMqGH674jYER0SXj0iG9xZc+zWRjk2Pg9JgPBDvwI//xGrI/oOQkAi4YEew==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@sheerun/mutationobserver-shim" "^0.3.2"
+    "@types/testing-library__dom" "^6.0.0"
+    aria-query "3.0.0"
+    pretty-format "^24.9.0"
+    wait-for-expect "^3.0.0"
+
+"@testing-library/react-hooks@3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-3.2.1.tgz#19b6caa048ef15faa69d439c469033873ea01294"
+  integrity sha512-1OB6Ksvlk6BCJA1xpj8/WWz0XVd1qRcgqdaFAq+xeC6l61Ucj0P6QpA5u+Db/x9gU4DCX8ziR5b66Mlfg0M2RA==
+  dependencies:
+    "@babel/runtime" "^7.5.4"
+    "@types/testing-library__react-hooks" "^3.0.0"
+
+"@testing-library/react@9.4.0":
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.4.0.tgz#b021ac8cb987c8dc54c6841875f745bf9b2e88e5"
+  integrity sha512-XdhDWkI4GktUPsz0AYyeQ8M9qS/JFie06kcSnUVcpgOwFjAu9vhwR83qBl+lw9yZWkbECjL8Hd+n5hH6C0oWqg==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+    "@testing-library/dom" "^6.11.0"
+    "@types/testing-library__react" "^9.1.2"
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -1775,6 +1809,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-dom@*":
+  version "16.9.4"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
+  integrity sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-syntax-highlighter@10.1.0":
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-10.1.0.tgz#9c534e29bbe05dba9beae1234f3ae944836685d4"
@@ -1782,6 +1823,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-test-renderer@*":
+  version "16.9.1"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.1.tgz#9d432c46c515ebe50c45fa92c6fb5acdc22e39c4"
+  integrity sha512-nCXQokZN1jp+QkoDNmDZwoWpKY8HDczqevIDO4Uv9/s9rbGPbSpy8Uaxa5ixHKkcm/Wt0Y9C3wCxZivh4Al+rQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-textarea-autosize@^4.3.3":
   version "4.3.5"
   resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz#6c4d2753fa1864c98c0b2b517f67bb1f6e4c46de"
@@ -1812,6 +1860,29 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
   integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==
 
+"@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.11.0.tgz#777e3ef44cb48f2430e3fad6a2053ec39004a5d3"
+  integrity sha512-qUmnGl6H0wajUaO3VCJJoAeN/bQwpUzCqE/hk96NiGjIh5H4b8LfmQTOj4cHfS/9hCwO0DJytC6osHYDYiouyA==
+  dependencies:
+    pretty-format "^24.3.0"
+
+"@types/testing-library__react-hooks@^3.0.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.1.0.tgz#04d174ce767fbcce3ccb5021d7f156e1b06008a9"
+  integrity sha512-QJc1sgH9DD6jbfybzugnP0sY8wPzzIq8sHDBuThzCr2ZEbyHIaAvN9ytx/tHzcWL5MqmeZJqiUm/GsythaGx3g==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-test-renderer" "*"
+
+"@types/testing-library__react@^9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.2.tgz#e33af9124c60a010fc03a34eff8f8a34a75c4351"
+  integrity sha512-CYaMqrswQ+cJACy268jsLAw355DZtPZGt3Jwmmotlcu8O/tkoXBI6AeZ84oZBJsIsesozPKzWzmv/0TIU+1E9Q==
+  dependencies:
+    "@types/react-dom" "*"
+    "@types/testing-library__dom" "*"
+
 "@types/uglify-js@*":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
@@ -2211,6 +2282,14 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+aria-query@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
+  integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=
+  dependencies:
+    ast-types-flow "0.0.7"
+    commander "^2.11.0"
+
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -2328,6 +2407,11 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+ast-types-flow@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+
 ast-types@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.3.tgz#c20757fe72ee71278ea0ff3d87e5c2ca30d9edf8"
@@ -3438,7 +3522,7 @@ commander@2.17.x:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.19.0, commander@^2.20.0, commander@~2.20.3:
+commander@^2.11.0, commander@^2.19.0, commander@^2.20.0, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -8601,7 +8685,7 @@ pretty-error@^2.0.2, pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^24.9.0:
+pretty-format@^24.3.0, pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
   integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
@@ -9004,7 +9088,7 @@ react-inspector@^3.0.2:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
-react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
@@ -9055,6 +9139,16 @@ react-syntax-highlighter@^8.0.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
+react-test-renderer@16.12.0:
+  version "16.12.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.12.0.tgz#11417ffda579306d4e841a794d32140f3da1b43f"
+  integrity sha512-Vj/teSqt2oayaWxkbhQ6gKis+t5JrknXfPVo+aIJ8QwYAqMPH77uptOdrlphyxl8eQI/rtkOYg86i/UWkpFu0w==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.6"
+    scheduler "^0.18.0"
+
 react-textarea-autosize@^7.1.0:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz#70fdb333ef86bcca72717e25e623e90c336e2cda"
@@ -10786,6 +10880,11 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
+wait-for-expect@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.1.tgz#ec204a76b0038f17711e575720aaf28505ac7185"
+  integrity sha512-3Ha7lu+zshEG/CeHdcpmQsZnnZpPj/UsG3DuKO8FskjuDbkx3jE3845H+CuwZjA2YWYDfKMU2KhnCaXMLd3wVw==
+
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"

From ad9db5095e5ae132988e1d63af3a5233273f1a40 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 16 Dec 2019 17:42:49 +0200
Subject: [PATCH 03/21] add tests for useSelectableSeasons hook

---
 tests/hooks.spec.js | 50 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 tests/hooks.spec.js

diff --git a/tests/hooks.spec.js b/tests/hooks.spec.js
new file mode 100644
index 000000000..af56f9a6e
--- /dev/null
+++ b/tests/hooks.spec.js
@@ -0,0 +1,50 @@
+const { renderHook, act } = require('@testing-library/react-hooks');
+const useSelectableSeasons = require('../src/routes/MetaDetails/VideosList/useSelectableSeasons');
+
+const videos = [{ 'season': 4 }, { 'season': 5 }, { 'season': 4 }, { 'season': 7 }];
+
+describe('hooks tests', () => {
+    describe('useSelectableSeasons hook', () => {
+        it('match 4', async () => {
+            const { result } = renderHook(() => useSelectableSeasons(videos));
+            const [, selectedSeason] = result.current;
+            expect(selectedSeason).toBe(4);
+        });
+
+        it('match 5', async () => {
+            const { result } = renderHook(() => useSelectableSeasons(videos));
+
+            act(() => {
+                const [, , , selectSeason] = result.current;
+                selectSeason(5);
+            });
+
+            const [, selectedSeason] = result.current;
+            expect(selectedSeason).toBe(5);
+        });
+
+        it('not match 6', async () => {
+            const { result } = renderHook(() => useSelectableSeasons(videos));
+
+            act(() => {
+                const [, , , selectSeason] = result.current;
+                selectSeason(6);
+            });
+
+            const [, selectedSeason] = result.current;
+            expect(selectedSeason).toBe(undefined);
+        });
+
+        it('not match $', async () => {
+            const { result } = renderHook(() => useSelectableSeasons(videos));
+
+            act(() => {
+                const [, , , selectSeason] = result.current;
+                selectSeason('$');
+            });
+
+            const [, selectedSeason] = result.current;
+            expect(selectedSeason).toBe(undefined);
+        });
+    });
+});

From 9de9a765207428a25e82c5d6427c26df125fa8d3 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 16 Dec 2019 18:19:49 +0200
Subject: [PATCH 04/21] installed flag moved to falgs in addon details

---
 src/routes/Addons/useAddonDetails.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/routes/Addons/useAddonDetails.js b/src/routes/Addons/useAddonDetails.js
index afa45eceb..016dd2ac4 100644
--- a/src/routes/Addons/useAddonDetails.js
+++ b/src/routes/Addons/useAddonDetails.js
@@ -11,7 +11,13 @@ const mapAddonDetailsStateWithCtx = (addonDetails, ctx) => {
             ...addonDetails.descriptor,
             content: {
                 ...addonDetails.descriptor.content,
-                installed: ctx.content.addons.some((addon) => addon.transportUrl === addonDetails.descriptor.transport_url),
+                content: {
+                    ...addonDetails.descriptor.content.content,
+                    flags: {
+                        ...addonDetails.descriptor.content.content.flags,
+                        installed: ctx.content.addons.some((addon) => addon.transportUrl === addonDetails.descriptor.transport_url),
+                    }
+                }
             }
         }
         :

From 3354f79cafc6834608b81fc4f2729322d27002d1 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 17 Dec 2019 11:03:00 +0200
Subject: [PATCH 05/21] library regexp tests added

---
 tests/routesRegexp.spec.js | 47 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/tests/routesRegexp.spec.js b/tests/routesRegexp.spec.js
index 2d688f82b..4f6387f81 100644
--- a/tests/routesRegexp.spec.js
+++ b/tests/routesRegexp.spec.js
@@ -112,7 +112,52 @@ describe('routesRegexp', () => {
         });
     });
 
-    //TODO library route regexp
+    describe('library route regexp', () => {
+        it('match /library', async () => {
+            expect(Array.from('/library'.match(routesRegexp.library.regexp)))
+                .toEqual(['/library', undefined, undefined]);
+        });
+
+        it('match /library//', async () => {
+            expect(Array.from('/library//'.match(routesRegexp.library.regexp)))
+                .toEqual(['/library//', '', '']);
+        });
+
+        it('match /library/1/', async () => {
+            expect(Array.from('/library/1/'.match(routesRegexp.library.regexp)))
+                .toEqual(['/library/1/', '1', '']);
+        });
+
+        it('match /library//2', async () => {
+            expect(Array.from('/library//2'.match(routesRegexp.library.regexp)))
+                .toEqual(['/library//2', '', '2']);
+        });
+
+        it('match /library/1/2', async () => {
+            expect(Array.from('/library/1/2'.match(routesRegexp.library.regexp)))
+                .toEqual(['/library/1/2', '1', '2']);
+        });
+
+        it('not match /library/', async () => {
+            expect('/library/'.match(routesRegexp.library.regexp))
+                .toBe(null);
+        });
+
+        it('not match /library///', async () => {
+            expect('/library///'.match(routesRegexp.library.regexp))
+                .toBe(null);
+        });
+
+        it('not match /library/1', async () => {
+            expect('/library/1'.match(routesRegexp.library.regexp))
+                .toBe(null);
+        });
+
+        it('not match /library/1/2/', async () => {
+            expect('/library/1/2/'.match(routesRegexp.library.regexp))
+                .toBe(null);
+        });
+    });
 
     describe('search route regexp', () => {
         it('match /search', async () => {

From 244551e815ea5c6c8b1b825b4f24af94ae611d6f Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 18 Dec 2019 15:22:44 +0200
Subject: [PATCH 06/21] addon details modal finalized

---
 .../AddonDetails/AddonDetails.js}             |  72 +++++------
 .../AddonDetailsModal/AddonDetails/index.js   |   3 +
 .../AddonDetails/styles.less                  |  48 +++++++
 .../AddonDetailsModal/AddonDetailsModal.js    | 121 ++++++++++++++++++
 src/common/AddonDetailsModal/index.js         |   3 +
 src/common/AddonDetailsModal/styles.less      |  34 +++++
 .../AddonDetailsModal}/useAddonDetails.js     |  15 +--
 src/common/index.js                           |   2 +
 src/routes/Addons/AddonPrompt/index.js        |   3 -
 src/routes/Addons/AddonPrompt/styles.less     |  55 --------
 src/routes/Addons/Addons.js                   |  30 ++++-
 11 files changed, 276 insertions(+), 110 deletions(-)
 rename src/{routes/Addons/AddonPrompt/AddonPrompt.js => common/AddonDetailsModal/AddonDetails/AddonDetails.js} (61%)
 create mode 100644 src/common/AddonDetailsModal/AddonDetails/index.js
 create mode 100644 src/common/AddonDetailsModal/AddonDetails/styles.less
 create mode 100644 src/common/AddonDetailsModal/AddonDetailsModal.js
 create mode 100644 src/common/AddonDetailsModal/index.js
 create mode 100644 src/common/AddonDetailsModal/styles.less
 rename src/{routes/Addons => common/AddonDetailsModal}/useAddonDetails.js (71%)
 delete mode 100644 src/routes/Addons/AddonPrompt/index.js
 delete mode 100644 src/routes/Addons/AddonPrompt/styles.less

diff --git a/src/routes/Addons/AddonPrompt/AddonPrompt.js b/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
similarity index 61%
rename from src/routes/Addons/AddonPrompt/AddonPrompt.js
rename to src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
index 4d6f9ffc8..d2c43e9c5 100644
--- a/src/routes/Addons/AddonPrompt/AddonPrompt.js
+++ b/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
@@ -1,28 +1,26 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const Image = require('stremio/common/Image');
 const styles = require('./styles');
 
-const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, official }) => {
+const AddonDetails = ({ className, id, name, version, logo, description, types, transportUrl, official }) => {
+    const renderLogoFallback = React.useMemo(() => () => {
+        return (
+            <Icon className={styles['icon']} icon={'ic_addons'} />
+        );
+    }, []);
     return (
-        <div className={classnames(className, styles['addon-prompt-container'])}>
-            <div className={classnames(styles['title-container'], { [styles['title-with-logo-container']]: typeof logo === 'string' && logo.length > 0 })}>
-                {
-                    typeof logo === 'string' && logo.length > 0 ?
-                        <div className={styles['logo-container']}>
-                            <img className={styles['logo']} src={logo} alt={' '} />
-                        </div>
-                        :
-                        null
-                }
-                {typeof name === 'string' && name.length > 0 ? name : id}
-                {' '}
-                {
-                    typeof version === 'string' && version.length > 0 ?
-                        <span className={styles['version-container']}>v.{version}</span>
-                        :
-                        null
-                }
+        <div className={classnames(className, styles['addon-details-container'])}>
+            <div className={styles['title-container']}>
+                <Image
+                    className={styles['logo']}
+                    src={logo}
+                    alt={' '}
+                    renderFallback={renderLogoFallback}
+                />
+                <span className={styles['name']}>{typeof name === 'string' && name.length > 0 ? name : id}</span>
             </div>
             {
                 typeof description === 'string' && description.length > 0 ?
@@ -32,6 +30,15 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
                     :
                     null
             }
+            {
+                typeof version === 'string' && version.length > 0 ?
+                    <div className={styles['section-container']}>
+                        <span className={styles['section-header']}>Version: </span>
+                        <span className={styles['section-label']}>{version}</span>
+                    </div>
+                    :
+                    null
+            }
             {
                 typeof transportUrl === 'string' && transportUrl.length > 0 ?
                     <div className={styles['section-container']}>
@@ -57,22 +64,6 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
                     :
                     null
             }
-            {
-                Array.isArray(catalogs) && catalogs.length > 0 ?
-                    <div className={styles['section-container']}>
-                        <span className={styles['section-header']}>Supported catalogs: </span>
-                        <span className={styles['section-label']}>
-                            {
-                                catalogs.length === 1 ?
-                                    catalogs[0].name
-                                    :
-                                    catalogs.slice(0, -1).map(({ name }) => name).join(', ') + ' & ' + catalogs[catalogs.length - 1].name
-                            }
-                        </span>
-                    </div>
-                    :
-                    null
-            }
             {
                 !official ?
                     <div className={styles['section-container']}>
@@ -85,19 +76,16 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
     );
 };
 
-AddonPrompt.propTypes = {
+AddonDetails.propTypes = {
     className: PropTypes.string,
     id: PropTypes.string,
     name: PropTypes.string,
+    version: PropTypes.string,
     logo: PropTypes.string,
     description: PropTypes.string,
     types: PropTypes.arrayOf(PropTypes.string),
-    catalogs: PropTypes.arrayOf(PropTypes.shape({
-        name: PropTypes.string
-    })),
-    version: PropTypes.string,
     transportUrl: PropTypes.string,
-    official: PropTypes.bool
+    official: PropTypes.bool,
 };
 
-module.exports = AddonPrompt;
+module.exports = AddonDetails;
diff --git a/src/common/AddonDetailsModal/AddonDetails/index.js b/src/common/AddonDetailsModal/AddonDetails/index.js
new file mode 100644
index 000000000..03cf009c7
--- /dev/null
+++ b/src/common/AddonDetailsModal/AddonDetails/index.js
@@ -0,0 +1,3 @@
+const AddonDetails = require('./AddonDetails');
+
+module.exports = AddonDetails;
diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/common/AddonDetailsModal/AddonDetails/styles.less
new file mode 100644
index 000000000..2d69af547
--- /dev/null
+++ b/src/common/AddonDetailsModal/AddonDetails/styles.less
@@ -0,0 +1,48 @@
+.addon-details-container {
+    .title-container {
+        .logo, .icon {
+            float: left;
+            width: 5rem;
+            height: 5rem;
+            margin-right: 1rem;
+            padding: 0.5rem;
+            background-color: var(--color-backgrounddarker);
+        }
+
+        .logo {
+            object-fit: contain;
+            object-position: center;
+        }
+
+        .icon {
+            fill: var(--color-surfacelighter);
+        }
+
+        .name {
+            font-size: 2.4rem;
+            font-weight: 300;
+            line-height: 5rem;
+        }
+    }
+
+    .section-container {
+        margin-top: 1rem;
+
+        .section-header {
+            font-size: 1.2rem;
+        }
+
+        .section-label {
+            font-size: 1.2rem;
+            font-weight: 300;
+
+            &.transport-url-label {
+                user-select: text;
+            }
+
+            &.disclaimer-label {
+                font-style: italic;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/common/AddonDetailsModal/AddonDetailsModal.js b/src/common/AddonDetailsModal/AddonDetailsModal.js
new file mode 100644
index 000000000..fd20da40f
--- /dev/null
+++ b/src/common/AddonDetailsModal/AddonDetailsModal.js
@@ -0,0 +1,121 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const ModalDialog = require('stremio/common/ModalDialog');
+const { useServices } = require('stremio/services');
+const AddonDetails = require('./AddonDetails');
+const useAddonDetails = require('./useAddonDetails');
+const styles = require('./styles');
+
+const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
+    const { core } = useServices();
+    const addonDetails = useAddonDetails(transportUrl);
+    const modalButtons = React.useMemo(() => {
+        if (addonDetails.descriptor === null || addonDetails.descriptor.content.type !== 'Ready') {
+            return null;
+        }
+
+        const cancelOnClick = (event) => {
+            if (typeof onCloseRequest === 'function') {
+                onCloseRequest({
+                    type: 'cancel',
+                    reactEvent: event,
+                    nativeEvent: event.nativeEvent
+                });
+            }
+        };
+        const installOnClick = (event) => {
+            core.dispatch({
+                action: 'AddonOp',
+                args: {
+                    addonOp: 'Install',
+                    args: addonDetails.descriptor.content.content
+                }
+            });
+            if (typeof onCloseRequest === 'function') {
+                onCloseRequest({
+                    type: 'install',
+                    reactEvent: event,
+                    nativeEvent: event.nativeEvent
+                });
+            }
+        };
+        const uninstallOnClick = (event) => {
+            core.dispatch({
+                action: 'AddonOp',
+                args: {
+                    addonOp: 'Uninstall',
+                    args: {
+                        transport_url: addonDetails.descriptor.content.content.transportUrl
+                    }
+                }
+            });
+            if (typeof onCloseRequest === 'function') {
+                onCloseRequest({
+                    type: 'uninstall',
+                    reactEvent: event,
+                    nativeEvent: event.nativeEvent
+                });
+            }
+        };
+        return [
+            {
+                className: styles['cancel-button'],
+                label: 'Cancel',
+                props: {
+                    onClick: cancelOnClick
+                }
+            },
+            addonDetails.descriptor.content.content.installed ?
+                {
+                    className: styles['uninstall-button'],
+                    label: 'Uninstall',
+                    props: {
+                        onClick: uninstallOnClick
+                    }
+                }
+                :
+                {
+
+                    className: styles['install-button'],
+                    label: 'Install',
+                    props: {
+                        onClick: installOnClick
+                    }
+                }
+        ];
+    }, [addonDetails, onCloseRequest]);
+    return (
+        <ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} onCloseRequest={onCloseRequest}>
+            {
+                addonDetails.descriptor === null || addonDetails.descriptor.content.type === 'Loading' ?
+                    <div className={styles['addon-details-message-container']}>
+                        Loading addon manifest from {transportUrl}
+                    </div>
+                    :
+                    addonDetails.descriptor.content.type === 'Err' ?
+                        <div className={styles['addon-details-message-container']}>
+                            Failed to get addon manifest from {transportUrl}
+                        </div>
+                        :
+                        <AddonDetails
+                            className={styles['addon-details-container']}
+                            id={addonDetails.descriptor.content.content.manifest.id}
+                            name={addonDetails.descriptor.content.content.manifest.name}
+                            version={addonDetails.descriptor.content.content.manifest.version}
+                            logo={addonDetails.descriptor.content.content.manifest.logo}
+                            description={addonDetails.descriptor.content.content.manifest.description}
+                            types={addonDetails.descriptor.content.content.manifest.types}
+                            transportUrl={addonDetails.descriptor.content.content.transportUrl}
+                            official={addonDetails.descriptor.content.content.flags.official}
+                        />
+            }
+        </ModalDialog>
+    );
+};
+
+AddonDetailsModal.propTypes = {
+    transportUrl: PropTypes.string,
+    onCloseRequest: PropTypes.func
+};
+
+module.exports = AddonDetailsModal;
diff --git a/src/common/AddonDetailsModal/index.js b/src/common/AddonDetailsModal/index.js
new file mode 100644
index 000000000..b2d5f6838
--- /dev/null
+++ b/src/common/AddonDetailsModal/index.js
@@ -0,0 +1,3 @@
+const AddonDetailsModal = require('./AddonDetailsModal');
+
+module.exports = AddonDetailsModal;
diff --git a/src/common/AddonDetailsModal/styles.less b/src/common/AddonDetailsModal/styles.less
new file mode 100644
index 000000000..146dc9a2f
--- /dev/null
+++ b/src/common/AddonDetailsModal/styles.less
@@ -0,0 +1,34 @@
+:import('~stremio/common/ModalDialog/styles.less') {
+    label: label;
+}
+
+.addon-details-modal-container {
+    .addon-details-container, .addon-details-message-container {
+        width: 60rem;
+        max-width: 100%;
+    }
+
+    .install-button, .uninstall-button, .cancel-button {
+        .label {
+            font-size: 1.2rem;
+            font-weight: 500;
+        }
+    }
+
+    .cancel-button, .uninstall-button {
+        background-color: transparent;
+        outline-width: var(--focus-outline-size);
+        outline-offset: calc(-1 * var(--focus-outline-size));
+        outline-color: var(--color-surfacedarker);
+        outline-style: solid;
+
+        &:hover, &:focus {
+            filter: none;
+            background: var(--color-surfacelight);
+        }
+
+        .label {
+            color: var(--color-surfacedarker);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Addons/useAddonDetails.js b/src/common/AddonDetailsModal/useAddonDetails.js
similarity index 71%
rename from src/routes/Addons/useAddonDetails.js
rename to src/common/AddonDetailsModal/useAddonDetails.js
index 016dd2ac4..71b9c2a9d 100644
--- a/src/routes/Addons/useAddonDetails.js
+++ b/src/common/AddonDetailsModal/useAddonDetails.js
@@ -1,5 +1,5 @@
 const React = require('react');
-const { useModelState } = require('stremio/common');
+const useModelState = require('stremio/common/useModelState');
 
 const initAddonDetailsState = () => ({
     descriptor: null
@@ -13,10 +13,7 @@ const mapAddonDetailsStateWithCtx = (addonDetails, ctx) => {
                 ...addonDetails.descriptor.content,
                 content: {
                     ...addonDetails.descriptor.content.content,
-                    flags: {
-                        ...addonDetails.descriptor.content.content.flags,
-                        installed: ctx.content.addons.some((addon) => addon.transportUrl === addonDetails.descriptor.transport_url),
-                    }
+                    installed: ctx.content.addons.some((addon) => addon.transportUrl === addonDetails.descriptor.transportUrl),
                 }
             }
         }
@@ -25,15 +22,15 @@ const mapAddonDetailsStateWithCtx = (addonDetails, ctx) => {
     return { descriptor };
 };
 
-const useAddonDetails = (queryParams) => {
+const useAddonDetails = (transportUrl) => {
     const loadAddonDetailsAction = React.useMemo(() => {
-        if (queryParams.has('addon')) {
+        if (typeof transportUrl === 'string') {
             return {
                 action: 'Load',
                 args: {
                     load: 'AddonDetails',
                     args: {
-                        transport_url: queryParams.get('addon')
+                        transport_url: transportUrl
                     }
                 }
             };
@@ -42,7 +39,7 @@ const useAddonDetails = (queryParams) => {
                 action: 'Unload'
             };
         }
-    }, [queryParams]);
+    }, [transportUrl]);
     return useModelState({
         model: 'addon_details',
         action: loadAddonDetailsAction,
diff --git a/src/common/index.js b/src/common/index.js
index e1d2437a8..7fedd9f36 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -1,3 +1,4 @@
+const AddonDetailsModal = require('./AddonDetailsModal');
 const Button = require('./Button');
 const Checkbox = require('./Checkbox');
 const ColorInput = require('./ColorInput');
@@ -29,6 +30,7 @@ const useSpreadState = require('./useSpreadState');
 const useUser = require('./useUser');
 
 module.exports = {
+    AddonDetailsModal,
     Button,
     Checkbox,
     ColorInput,
diff --git a/src/routes/Addons/AddonPrompt/index.js b/src/routes/Addons/AddonPrompt/index.js
deleted file mode 100644
index 43689ec70..000000000
--- a/src/routes/Addons/AddonPrompt/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const AddonPrompt = require('./AddonPrompt');
-
-module.exports = AddonPrompt;
diff --git a/src/routes/Addons/AddonPrompt/styles.less b/src/routes/Addons/AddonPrompt/styles.less
deleted file mode 100644
index b58aafceb..000000000
--- a/src/routes/Addons/AddonPrompt/styles.less
+++ /dev/null
@@ -1,55 +0,0 @@
-.addon-prompt-container {
-    .title-container {
-        font-size: 3rem;
-        font-weight: 300;
-        word-break: break-all;
-
-        &.title-with-logo-container {
-            &::first-line {
-                line-height: 5rem;
-            }
-        }
-
-        .logo-container {
-            width: 5rem;
-            height: 5rem;
-            margin-right: 0.5rem;
-            background-color: var(--color-surfacelight20);
-            float: left;
-
-            .logo {
-                display: block;
-                width: 100%;
-                height: 100%;
-                object-fit: contain;
-                object-position: center;
-            }
-        }
-
-        .version-container {
-            font-size: 1.5rem;
-            font-weight: 400;
-        }
-    }
-
-    .section-container {
-        margin-top: 1rem;
-
-        .section-header {
-            font-size: 1.2rem;
-        }
-
-        .section-label {
-            font-size: 1.2rem;
-            font-weight: 300;
-
-            &.transport-url-label {
-                user-select: text;
-            }
-
-            &.disclaimer-label {
-                font-style: italic;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 3f7874666..66c995b67 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -1,7 +1,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const Icon = require('stremio-icons/dom');
-const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
+const { AddonDetailsModal, Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
 const Addon = require('./Addon');
 const useAddons = require('./useAddons');
 const useSelectableInputs = require('./useSelectableInputs');
@@ -19,8 +19,20 @@ const navigateToAddonDetails = (addonsCatalogRequest, transportUrl) => {
     }
 };
 
+const clearAddonDetails = (addonsCatalogRequest) => {
+    if (addonsCatalogRequest !== null) {
+        const addonTransportUrl = encodeURIComponent(addonsCatalogRequest.base);
+        const catalogId = encodeURIComponent(addonsCatalogRequest.path.id);
+        const type = encodeURIComponent(addonsCatalogRequest.path.type_name);
+        window.location.replace(`#/addons/${addonTransportUrl}/${catalogId}/${type}`);
+    } else {
+        window.location.replace('#/addons');
+    }
+};
+
 const Addons = ({ urlParams, queryParams }) => {
     const addons = useAddons(urlParams);
+    const detailsTransportUrl = queryParams.get('addon');
     const selectInputs = useSelectableInputs(addons);
     const [addAddonModalOpen, openAddAddonModal, closeAddAddonModal] = useBinaryState(false);
     const addAddonUrlInputRef = React.useRef(null);
@@ -68,6 +80,13 @@ const Addons = ({ urlParams, queryParams }) => {
             null;
         navigateToAddonDetails(addonsCatalogRequest, event.dataset.transportUrl);
     }, [addons]);
+    const closeAddonDetails = React.useCallback(() => {
+        const addonsCatalogRequest = addons.catalog_resource !== null ?
+            addons.catalog_resource.request
+            :
+            null;
+        clearAddonDetails(addonsCatalogRequest);
+    }, [addons]);
     React.useLayoutEffect(() => {
         closeAddAddonModal();
         setSearch('');
@@ -183,6 +202,15 @@ const Addons = ({ urlParams, queryParams }) => {
                     :
                     null
             }
+            {
+                typeof detailsTransportUrl === 'string' ?
+                    <AddonDetailsModal
+                        transportUrl={detailsTransportUrl}
+                        onCloseRequest={closeAddonDetails}
+                    />
+                    :
+                    null
+            }
         </div>
     );
 };

From e1905f928d9f16857aca49378e4e896beb992660 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 18 Dec 2019 16:47:07 +0200
Subject: [PATCH 07/21] NavTabButton selected by bool prop instead of match
 against location hash

---
 src/common/MainNavBar/MainNavBar.js           | 18 ++++++++++++------
 src/common/NavBar/NavBar.js                   |  6 ++++--
 .../NavBar/NavTabButton/NavTabButton.js       | 19 +++----------------
 src/common/NavBar/NavTabButton/styles.less    |  2 +-
 src/routes/Board/Board.js                     |  2 +-
 src/routes/Discover/Discover.js               |  2 +-
 src/routes/Library/Library.js                 |  2 +-
 7 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/common/MainNavBar/MainNavBar.js b/src/common/MainNavBar/MainNavBar.js
index 507f8d229..55bdce638 100644
--- a/src/common/MainNavBar/MainNavBar.js
+++ b/src/common/MainNavBar/MainNavBar.js
@@ -3,17 +3,22 @@ const PropTypes = require('prop-types');
 const NavBar = require('stremio/common/NavBar');
 
 const TABS = [
-    { label: 'Board', icon: 'ic_board', href: '#/' },
-    { label: 'Discover', icon: 'ic_discover', href: '#/discover' },
-    { label: 'Library', icon: 'ic_library', href: '#/library' }
+    { id: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
+    { id: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
+    { id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
 ];
 
-const MainNavBar = React.memo(({ className }) => {
+const MainNavBar = React.memo(({ className, selected }) => {
     return (
         <NavBar
             className={className}
             backButton={false}
-            tabs={TABS}
+            tabs={TABS.map(({ id, label, icon, href }) => ({
+                label,
+                icon,
+                href,
+                selected: id === selected
+            }))}
             searchBar={true}
             addonsButton={true}
             fullscreenButton={true}
@@ -26,7 +31,8 @@ const MainNavBar = React.memo(({ className }) => {
 MainNavBar.displayName = 'MainNavBar';
 
 MainNavBar.propTypes = {
-    className: PropTypes.string
+    className: PropTypes.string,
+    selected: PropTypes.string
 };
 
 module.exports = MainNavBar;
diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js
index 92663af21..6fe9859ed 100644
--- a/src/common/NavBar/NavBar.js
+++ b/src/common/NavBar/NavBar.js
@@ -28,13 +28,14 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo
             }
             {
                 Array.isArray(tabs) && tabs.length > 0 ?
-                    tabs.slice(0, 4).map(({ href = '', icon = '', label = '', onClick }) => (
+                    tabs.slice(0, 4).map(({ href, icon, label, selected, onClick }, index) => (
                         <NavTabButton
-                            key={`${href}${icon}${label}`}
+                            key={index}
                             className={styles['nav-tab-button']}
                             href={href}
                             icon={icon}
                             label={label}
+                            selected={selected}
                             onClick={onClick}
                         />
                     ))
@@ -88,6 +89,7 @@ NavBar.propTypes = {
         icon: PropTypes.string,
         label: PropTypes.string,
         href: PropTypes.string,
+        selected: PropTypes.bool,
         onClick: PropTypes.func
     })),
     title: PropTypes.string,
diff --git a/src/common/NavBar/NavTabButton/NavTabButton.js b/src/common/NavBar/NavTabButton/NavTabButton.js
index 3af4bd7fb..7a525b868 100644
--- a/src/common/NavBar/NavTabButton/NavTabButton.js
+++ b/src/common/NavBar/NavTabButton/NavTabButton.js
@@ -3,25 +3,11 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
-const routesRegexp = require('stremio/common/routesRegexp');
-const useRouteActive = require('stremio/common/useRouteActive');
 const styles = require('./styles');
 
-const NavTabButton = ({ className, icon, label, href, onClick }) => {
-    const routeRegexp = React.useMemo(() => {
-        if (typeof href === 'string' && href.startsWith('#')) {
-            for (const { regexp } of Object.values(routesRegexp)) {
-                if (href.slice(1).match(regexp)) {
-                    return regexp;
-                }
-            }
-        }
-
-        return null;
-    }, [href]);
-    const routeActive = useRouteActive(routeRegexp);
+const NavTabButton = ({ className, icon, label, href, selected, onClick }) => {
     return (
-        <Button className={classnames(className, styles['nav-tab-button-container'], { 'active': routeActive })} title={label} tabIndex={-1} href={href} onClick={onClick}>
+        <Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
             {
                 typeof icon === 'string' && icon.length > 0 ?
                     <Icon className={styles['icon']} icon={icon} />
@@ -43,6 +29,7 @@ NavTabButton.propTypes = {
     icon: PropTypes.string,
     label: PropTypes.string,
     href: PropTypes.string,
+    selected: PropTypes.bool,
     onClick: PropTypes.func
 };
 
diff --git a/src/common/NavBar/NavTabButton/styles.less b/src/common/NavBar/NavTabButton/styles.less
index 8d1ef5e16..6409caa36 100644
--- a/src/common/NavBar/NavTabButton/styles.less
+++ b/src/common/NavBar/NavTabButton/styles.less
@@ -8,7 +8,7 @@
         background-color: var(--color-secondary);
     }
 
-    &:global(.active) {
+    &:global(.selected) {
         background-color: var(--color-background);
     }
 
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 47f293f45..356fab04f 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -11,7 +11,7 @@ const Board = () => {
     const [options, optionOnSelect] = useItemOptions();
     return (
         <div className={styles['board-container']}>
-            <MainNavBar className={styles['nav-bar']} />
+            <MainNavBar className={styles['nav-bar']} selected={'board'} />
             <div className={styles['board-content']}>
                 {
                     continueWatching.lib_items.length > 0 ?
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index 4f8358b32..ab6850333 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -45,7 +45,7 @@ const Discover = ({ urlParams, queryParams }) => {
     }, [urlParams, queryParams]);
     return (
         <div className={styles['discover-container']}>
-            <MainNavBar className={styles['nav-bar']} />
+            <MainNavBar className={styles['nav-bar']} selected={'discover'} />
             <div className={styles['discover-content']}>
                 <div className={styles['selectable-inputs-container']}>
                     {selectInputs.map((selectInput, index) => (
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index 378612678..6e48ef47c 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -13,7 +13,7 @@ const Library = ({ urlParams }) => {
     const [options, optionOnSelect] = useItemOptions();
     return (
         <div className={styles['library-container']}>
-            <MainNavBar className={styles['nav-bar']} />
+            <MainNavBar className={styles['nav-bar']} selected={'library'} />
             <div className={styles['library-content']}>
                 {
                     library.library_state.type === 'Ready' && library.library_state.content.uid !== null && library.type_names.length > 0 ?

From 7dbfce62b6debd2a18abc17c7633767ca6988af8 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 18 Dec 2019 16:59:24 +0200
Subject: [PATCH 08/21] useRouteActive dropped

---
 src/common/MainNavBar/MainNavBar.js      | 18 ++++++---------
 src/common/NavBar/NavBar.js              | 21 +++++++++---------
 src/common/NavBar/SearchBar/SearchBar.js | 28 +++++++++++-------------
 src/common/index.js                      |  2 --
 src/common/useRouteActive.js             | 14 ------------
 src/routes/Board/Board.js                |  2 +-
 src/routes/Discover/Discover.js          |  2 +-
 src/routes/Library/Library.js            |  2 +-
 src/routes/Search/Search.js              |  2 +-
 9 files changed, 35 insertions(+), 56 deletions(-)
 delete mode 100644 src/common/useRouteActive.js

diff --git a/src/common/MainNavBar/MainNavBar.js b/src/common/MainNavBar/MainNavBar.js
index 55bdce638..afbbce27b 100644
--- a/src/common/MainNavBar/MainNavBar.js
+++ b/src/common/MainNavBar/MainNavBar.js
@@ -3,22 +3,18 @@ const PropTypes = require('prop-types');
 const NavBar = require('stremio/common/NavBar');
 
 const TABS = [
-    { id: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
-    { id: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
-    { id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
+    { route: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
+    { route: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
+    { route: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
 ];
 
-const MainNavBar = React.memo(({ className, selected }) => {
+const MainNavBar = React.memo(({ className, route }) => {
     return (
         <NavBar
             className={className}
+            route={route}
             backButton={false}
-            tabs={TABS.map(({ id, label, icon, href }) => ({
-                label,
-                icon,
-                href,
-                selected: id === selected
-            }))}
+            tabs={TABS}
             searchBar={true}
             addonsButton={true}
             fullscreenButton={true}
@@ -32,7 +28,7 @@ MainNavBar.displayName = 'MainNavBar';
 
 MainNavBar.propTypes = {
     className: PropTypes.string,
-    selected: PropTypes.string
+    route: PropTypes.string
 };
 
 module.exports = MainNavBar;
diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js
index 6fe9859ed..c6ca83ac2 100644
--- a/src/common/NavBar/NavBar.js
+++ b/src/common/NavBar/NavBar.js
@@ -9,7 +9,7 @@ const NotificationsMenu = require('./NotificationsMenu');
 const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 
-const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
+const NavBar = React.memo(({ className, route, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -28,15 +28,15 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo
             }
             {
                 Array.isArray(tabs) && tabs.length > 0 ?
-                    tabs.slice(0, 4).map(({ href, icon, label, selected, onClick }, index) => (
+                    tabs.slice(0, 4).map((tab, index) => (
                         <NavTabButton
                             key={index}
                             className={styles['nav-tab-button']}
-                            href={href}
-                            icon={icon}
-                            label={label}
-                            selected={selected}
-                            onClick={onClick}
+                            selected={tab.route === route}
+                            href={tab.href}
+                            icon={tab.icon}
+                            label={tab.label}
+                            onClick={tab.onClick}
                         />
                     ))
                     :
@@ -46,7 +46,7 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo
                 searchBar ?
                     <React.Fragment>
                         <div className={styles['spacing']} />
-                        <SearchBar className={styles['search-bar']} />
+                        <SearchBar className={styles['search-bar']} active={route === 'search'} />
                         <div className={styles['spacing']} />
                     </React.Fragment>
                     :
@@ -84,12 +84,13 @@ NavBar.displayName = 'NavBar';
 
 NavBar.propTypes = {
     className: PropTypes.string,
+    route: PropTypes.string,
     backButton: PropTypes.bool,
     tabs: PropTypes.arrayOf(PropTypes.shape({
-        icon: PropTypes.string,
+        route: PropTypes.string,
         label: PropTypes.string,
+        icon: PropTypes.string,
         href: PropTypes.string,
-        selected: PropTypes.bool,
         onClick: PropTypes.func
     })),
     title: PropTypes.string,
diff --git a/src/common/NavBar/SearchBar/SearchBar.js b/src/common/NavBar/SearchBar/SearchBar.js
index 2097c79af..84a264bae 100644
--- a/src/common/NavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/SearchBar/SearchBar.js
@@ -6,44 +6,41 @@ const Icon = require('stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
 const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
-const routesRegexp = require('stremio/common/routesRegexp');
 const useLocationHash = require('stremio/common/useLocationHash');
-const useRouteActive = require('stremio/common/useRouteActive');
 const styles = require('./styles');
 
-const SearchBar = ({ className }) => {
+const SearchBar = ({ className, active }) => {
     const locationHash = useLocationHash();
     const routeFocused = useRouteFocused();
-    const routeActive = useRouteActive(routesRegexp.search.regexp);
     const searchInputRef = React.useRef(null);
     const query = React.useMemo(() => {
-        if (routeActive) {
+        if (active) {
             const { search: locationSearch } = UrlUtils.parse(locationHash.slice(1));
             const queryParams = new URLSearchParams(locationSearch);
             return queryParams.has('search') ? queryParams.get('search') : '';
         }
 
         return '';
-    }, [routeActive, locationHash]);
+    }, [active, locationHash]);
     const searchBarOnClick = React.useCallback(() => {
-        if (!routeActive) {
+        if (!active) {
             window.location = '#/search';
         }
-    }, [routeActive]);
+    }, [active]);
     const queryInputOnSubmit = React.useCallback(() => {
-        if (routeActive) {
+        if (active) {
             window.location.replace(`#/search?search=${searchInputRef.current.value}`);
         }
-    }, [routeActive]);
+    }, [active]);
     React.useEffect(() => {
-        if (routeActive && routeFocused) {
+        if (active && routeFocused) {
             searchInputRef.current.focus();
         }
-    }, [routeActive, routeFocused, query]);
+    }, [active, routeFocused, query]);
     return (
-        <label className={classnames(className, styles['search-bar-container'], { 'active': routeActive })} onClick={searchBarOnClick}>
+        <label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}>
             {
-                routeActive ?
+                active ?
                     <TextInput
                         key={query}
                         ref={searchInputRef}
@@ -67,7 +64,8 @@ const SearchBar = ({ className }) => {
 };
 
 SearchBar.propTypes = {
-    className: PropTypes.string
+    className: PropTypes.string,
+    active: PropTypes.bool
 };
 
 module.exports = SearchBar;
diff --git a/src/common/index.js b/src/common/index.js
index 7fedd9f36..232efbfe8 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -25,7 +25,6 @@ const useInLibrary = require('./useInLibrary');
 const useLiveRef = require('./useLiveRef');
 const useLocationHash = require('./useLocationHash');
 const useModelState = require('./useModelState');
-const useRouteActive = require('./useRouteActive');
 const useSpreadState = require('./useSpreadState');
 const useUser = require('./useUser');
 
@@ -57,7 +56,6 @@ module.exports = {
     useLiveRef,
     useLocationHash,
     useModelState,
-    useRouteActive,
     useSpreadState,
     useUser
 };
diff --git a/src/common/useRouteActive.js b/src/common/useRouteActive.js
deleted file mode 100644
index 1fde72466..000000000
--- a/src/common/useRouteActive.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const React = require('react');
-const UrlUtils = require('url');
-const useLocationHash = require('stremio/common/useLocationHash');
-
-const useRouteActive = (routeRegexp) => {
-    const locationHash = useLocationHash();
-    const active = React.useMemo(() => {
-        const { pathname } = UrlUtils.parse(locationHash.slice(1));
-        return typeof pathname === 'string' && routeRegexp instanceof RegExp && !!pathname.match(routeRegexp);
-    }, [locationHash, routeRegexp]);
-    return active;
-};
-
-module.exports = useRouteActive;
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 356fab04f..6209f077a 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -11,7 +11,7 @@ const Board = () => {
     const [options, optionOnSelect] = useItemOptions();
     return (
         <div className={styles['board-container']}>
-            <MainNavBar className={styles['nav-bar']} selected={'board'} />
+            <MainNavBar className={styles['nav-bar']} route={'board'} />
             <div className={styles['board-content']}>
                 {
                     continueWatching.lib_items.length > 0 ?
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index ab6850333..17f407876 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -45,7 +45,7 @@ const Discover = ({ urlParams, queryParams }) => {
     }, [urlParams, queryParams]);
     return (
         <div className={styles['discover-container']}>
-            <MainNavBar className={styles['nav-bar']} selected={'discover'} />
+            <MainNavBar className={styles['nav-bar']} route={'discover'} />
             <div className={styles['discover-content']}>
                 <div className={styles['selectable-inputs-container']}>
                     {selectInputs.map((selectInput, index) => (
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index 6e48ef47c..8667c67ae 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -13,7 +13,7 @@ const Library = ({ urlParams }) => {
     const [options, optionOnSelect] = useItemOptions();
     return (
         <div className={styles['library-container']}>
-            <MainNavBar className={styles['nav-bar']} selected={'library'} />
+            <MainNavBar className={styles['nav-bar']} route={'library'} />
             <div className={styles['library-content']}>
                 {
                     library.library_state.type === 'Ready' && library.library_state.content.uid !== null && library.type_names.length > 0 ?
diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js
index a860bce47..c5d7a9ed3 100644
--- a/src/routes/Search/Search.js
+++ b/src/routes/Search/Search.js
@@ -9,7 +9,7 @@ const Search = ({ queryParams }) => {
     const search = useSearch(queryParams);
     return (
         <div className={styles['search-container']}>
-            <MainNavBar className={styles['nav-bar']} />
+            <MainNavBar className={styles['nav-bar']} route={'search'} />
             <div className={styles['search-content']}>
                 {
                     search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?

From 4ef7b4a85a98afe14832ff8207a5d3e347530c4f Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 18 Dec 2019 18:00:56 +0200
Subject: [PATCH 09/21] searchbar uses query prop instead of parsing hash

---
 src/common/MainNavBar/MainNavBar.js      |  6 ++++--
 src/common/NavBar/NavBar.js              |  5 +++--
 src/common/NavBar/SearchBar/SearchBar.js | 23 ++++++-----------------
 src/routes/Search/Search.js              | 17 ++++++++++++++++-
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/common/MainNavBar/MainNavBar.js b/src/common/MainNavBar/MainNavBar.js
index afbbce27b..e3ce70436 100644
--- a/src/common/MainNavBar/MainNavBar.js
+++ b/src/common/MainNavBar/MainNavBar.js
@@ -8,11 +8,12 @@ const TABS = [
     { route: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
 ];
 
-const MainNavBar = React.memo(({ className, route }) => {
+const MainNavBar = React.memo(({ className, route, query }) => {
     return (
         <NavBar
             className={className}
             route={route}
+            query={query}
             backButton={false}
             tabs={TABS}
             searchBar={true}
@@ -28,7 +29,8 @@ MainNavBar.displayName = 'MainNavBar';
 
 MainNavBar.propTypes = {
     className: PropTypes.string,
-    route: PropTypes.string
+    route: PropTypes.string,
+    query: PropTypes.string
 };
 
 module.exports = MainNavBar;
diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js
index c6ca83ac2..0e946f3c4 100644
--- a/src/common/NavBar/NavBar.js
+++ b/src/common/NavBar/NavBar.js
@@ -9,7 +9,7 @@ const NotificationsMenu = require('./NotificationsMenu');
 const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 
-const NavBar = React.memo(({ className, route, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
+const NavBar = React.memo(({ className, route, query, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -46,7 +46,7 @@ const NavBar = React.memo(({ className, route, backButton, tabs, title, searchBa
                 searchBar ?
                     <React.Fragment>
                         <div className={styles['spacing']} />
-                        <SearchBar className={styles['search-bar']} active={route === 'search'} />
+                        <SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
                         <div className={styles['spacing']} />
                     </React.Fragment>
                     :
@@ -85,6 +85,7 @@ NavBar.displayName = 'NavBar';
 NavBar.propTypes = {
     className: PropTypes.string,
     route: PropTypes.string,
+    query: PropTypes.string,
     backButton: PropTypes.bool,
     tabs: PropTypes.arrayOf(PropTypes.shape({
         route: PropTypes.string,
diff --git a/src/common/NavBar/SearchBar/SearchBar.js b/src/common/NavBar/SearchBar/SearchBar.js
index 84a264bae..126f3b0cf 100644
--- a/src/common/NavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/SearchBar/SearchBar.js
@@ -1,42 +1,30 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const UrlUtils = require('url');
 const Icon = require('stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
 const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
-const useLocationHash = require('stremio/common/useLocationHash');
 const styles = require('./styles');
 
-const SearchBar = ({ className, active }) => {
-    const locationHash = useLocationHash();
+const SearchBar = ({ className, query, active }) => {
     const routeFocused = useRouteFocused();
     const searchInputRef = React.useRef(null);
-    const query = React.useMemo(() => {
-        if (active) {
-            const { search: locationSearch } = UrlUtils.parse(locationHash.slice(1));
-            const queryParams = new URLSearchParams(locationSearch);
-            return queryParams.has('search') ? queryParams.get('search') : '';
-        }
-
-        return '';
-    }, [active, locationHash]);
     const searchBarOnClick = React.useCallback(() => {
         if (!active) {
             window.location = '#/search';
         }
     }, [active]);
     const queryInputOnSubmit = React.useCallback(() => {
-        if (active) {
+        if (searchInputRef.current !== null) {
             window.location.replace(`#/search?search=${searchInputRef.current.value}`);
         }
-    }, [active]);
+    }, []);
     React.useEffect(() => {
-        if (active && routeFocused) {
+        if (routeFocused && active) {
             searchInputRef.current.focus();
         }
-    }, [active, routeFocused, query]);
+    }, [routeFocused, active, query]);
     return (
         <label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}>
             {
@@ -65,6 +53,7 @@ const SearchBar = ({ className, active }) => {
 
 SearchBar.propTypes = {
     className: PropTypes.string,
+    query: PropTypes.string,
     active: PropTypes.bool
 };
 
diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js
index c5d7a9ed3..b6669f298 100644
--- a/src/routes/Search/Search.js
+++ b/src/routes/Search/Search.js
@@ -9,7 +9,22 @@ const Search = ({ queryParams }) => {
     const search = useSearch(queryParams);
     return (
         <div className={styles['search-container']}>
-            <MainNavBar className={styles['nav-bar']} route={'search'} />
+            <MainNavBar
+                className={styles['nav-bar']}
+                query={
+                    search.selected !== null ?
+                        search.selected.extra.reduce((query, [name, value]) => {
+                            if (name === 'search') {
+                                return value;
+                            }
+
+                            return query;
+                        }, null)
+                        :
+                        null
+                }
+                route={'search'}
+            />
             <div className={styles['search-content']}>
                 {
                     search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?

From 494f48e23cbe89dba7cc7f4db6ba9dae94c61fd4 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 18 Dec 2019 18:01:24 +0200
Subject: [PATCH 10/21] useLocationHash dropped

---
 src/common/index.js           |  2 --
 src/common/useLocationHash.js | 17 -----------------
 2 files changed, 19 deletions(-)
 delete mode 100644 src/common/useLocationHash.js

diff --git a/src/common/index.js b/src/common/index.js
index 232efbfe8..51b38763a 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -23,7 +23,6 @@ const useDeepEqualState = require('./useDeepEqualState');
 const useFullscreen = require('./useFullscreen');
 const useInLibrary = require('./useInLibrary');
 const useLiveRef = require('./useLiveRef');
-const useLocationHash = require('./useLocationHash');
 const useModelState = require('./useModelState');
 const useSpreadState = require('./useSpreadState');
 const useUser = require('./useUser');
@@ -54,7 +53,6 @@ module.exports = {
     useFullscreen,
     useInLibrary,
     useLiveRef,
-    useLocationHash,
     useModelState,
     useSpreadState,
     useUser
diff --git a/src/common/useLocationHash.js b/src/common/useLocationHash.js
deleted file mode 100644
index 3079e57e1..000000000
--- a/src/common/useLocationHash.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const React = require('react');
-
-const useLocationHash = () => {
-    const [locationHash, setLocationHash] = React.useState(window.location.hash);
-    React.useEffect(() => {
-        const onLocationHashChange = () => {
-            setLocationHash(window.location.hash);
-        };
-        window.addEventListener('hashchange', onLocationHashChange);
-        return () => {
-            window.removeEventListener('hashchange', onLocationHashChange);
-        };
-    }, []);
-    return locationHash;
-};
-
-module.exports = useLocationHash;

From 3b7e68dc7f080b422b0860215480927054fab473 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 19 Dec 2019 10:32:38 +0200
Subject: [PATCH 11/21] deps updated

---
 package.json |  18 +--
 yarn.lock    | 415 ++++++++++++++++++---------------------------------
 2 files changed, 158 insertions(+), 275 deletions(-)

diff --git a/package.json b/package.json
index 46392dc00..53d6f78c6 100755
--- a/package.json
+++ b/package.json
@@ -32,12 +32,12 @@
         "vtt.js": "0.13.0"
     },
     "devDependencies": {
-        "@babel/core": "7.7.5",
+        "@babel/core": "7.7.7",
         "@babel/plugin-proposal-class-properties": "7.7.4",
-        "@babel/plugin-proposal-object-rest-spread": "7.7.4",
-        "@babel/preset-env": "7.7.6",
+        "@babel/plugin-proposal-object-rest-spread": "7.7.7",
+        "@babel/preset-env": "7.7.7",
         "@babel/preset-react": "7.7.4",
-        "@babel/runtime": "7.7.6",
+        "@babel/runtime": "7.7.7",
         "@storybook/addon-actions": "5.2.8",
         "@storybook/addon-console": "1.2.1",
         "@storybook/addons": "5.2.8",
@@ -47,7 +47,7 @@
         "babel-loader": "8.0.6",
         "clean-webpack-plugin": "3.0.0",
         "copy-webpack-plugin": "5.1.1",
-        "css-loader": "3.3.2",
+        "css-loader": "3.4.0",
         "cssnano": "4.1.10",
         "cssnano-preset-advanced": "4.0.7",
         "eslint": "6.7.2",
@@ -56,13 +56,13 @@
         "jest": "24.9.0",
         "less": "3.10.3",
         "less-loader": "5.0.0",
-        "mini-css-extract-plugin": "0.8.0",
+        "mini-css-extract-plugin": "0.8.2",
         "postcss-loader": "3.0.0",
         "react-test-renderer": "16.12.0",
         "storybook-addon-jsx": "7.1.13",
-        "terser-webpack-plugin": "2.3.0",
-        "webpack": "4.41.3",
+        "terser-webpack-plugin": "2.3.1",
+        "webpack": "4.41.4",
         "webpack-cli": "3.3.10",
-        "webpack-dev-server": "3.9.0"
+        "webpack-dev-server": "3.10.0"
     }
 }
diff --git a/yarn.lock b/yarn.lock
index 4e3b2fb12..6ed5ab0f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29,15 +29,15 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@7.7.5", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.4.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.5.tgz#ae1323cd035b5160293307f50647e83f8ba62f7e"
-  integrity sha512-M42+ScN4+1S9iB6f+TL7QBpoQETxbclx+KNoKJABghnKYE+fMzSGqst0BZJc8CpI625bwPwYgUyRvxZ+0mZzpw==
+"@babel/core@7.7.7", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.4.5":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9"
+  integrity sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ==
   dependencies:
     "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.7.4"
+    "@babel/generator" "^7.7.7"
     "@babel/helpers" "^7.7.4"
-    "@babel/parser" "^7.7.5"
+    "@babel/parser" "^7.7.7"
     "@babel/template" "^7.7.4"
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
@@ -49,10 +49,10 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.4.0", "@babel/generator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
-  integrity sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==
+"@babel/generator@^7.4.0", "@babel/generator@^7.7.4", "@babel/generator@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.7.tgz#859ac733c44c74148e1a72980a64ec84b85f4f45"
+  integrity sha512-/AOIBpHh/JU1l0ZFS4kiRCBnLi6OTHzh0RPk3h9isBxkkqELtQNFi1Vr/tiG9p1yfoUdKVwISuXWQR+hwwM4VQ==
   dependencies:
     "@babel/types" "^7.7.4"
     jsesc "^2.5.1"
@@ -260,10 +260,10 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.7.4", "@babel/parser@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.5.tgz#cbf45321619ac12d83363fcf9c94bb67fa646d71"
-  integrity sha512-KNlOe9+/nk4i29g0VXgl8PEXIRms5xKLJeuZ6UptN0fHv+jDiriG+y94X6qAgWTR0h3KaoM1wK5G5h7MHFRSig==
+"@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.7.4", "@babel/parser@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.7.tgz#1b886595419cf92d811316d5b715a53ff38b4937"
+  integrity sha512-WtTZMZAZLbeymhkd/sEaPD8IQyGAhmuTuvTzLiCFM7iXiVdY0gc0IaI+cW0fh1BnSMbJSzXX6/fHllgHKwHhXw==
 
 "@babel/plugin-proposal-async-generator-functions@^7.7.4":
   version "7.7.4"
@@ -323,7 +323,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-numeric-separator" "^7.7.4"
 
-"@babel/plugin-proposal-object-rest-spread@7.7.4", "@babel/plugin-proposal-object-rest-spread@^7.6.2", "@babel/plugin-proposal-object-rest-spread@^7.7.4":
+"@babel/plugin-proposal-object-rest-spread@7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.4.tgz#cc57849894a5c774214178c8ab64f6334ec8af71"
   integrity sha512-rnpnZR3/iWKmiQyJ3LKJpSwLDcX/nSXhdLk4Aq/tXOApIvyu7qoabrige0ylsAJffaUC51WiBu209Q0U+86OWQ==
@@ -331,6 +331,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.7.4"
 
+"@babel/plugin-proposal-object-rest-spread@7.7.7", "@babel/plugin-proposal-object-rest-spread@^7.6.2", "@babel/plugin-proposal-object-rest-spread@^7.7.4", "@babel/plugin-proposal-object-rest-spread@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.7.tgz#9f27075004ab99be08c5c1bd653a2985813cb370"
+  integrity sha512-3qp9I8lelgzNedI3hrhkvhaEYree6+WHnyA/q4Dza9z7iEIs1eyhWyJnetk3jJ69RT0AT4G0UhEGwyGFJ7GUuQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.7.4"
+
 "@babel/plugin-proposal-optional-catch-binding@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.7.4.tgz#ec21e8aeb09ec6711bc0a39ca49520abee1de379"
@@ -347,10 +355,10 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-optional-chaining" "^7.7.4"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.4.tgz#7c239ccaf09470dbe1d453d50057460e84517ebb"
-  integrity sha512-cHgqHgYvffluZk85dJ02vloErm3Y6xtH+2noOBOJ2kXOJH3aVCDnj5eR/lVNlTnYu4hndAPJD3rTFjW3qee0PA==
+"@babel/plugin-proposal-unicode-property-regex@^7.7.4", "@babel/plugin-proposal-unicode-property-regex@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.7.tgz#433fa9dac64f953c12578b29633f456b68831c4e"
+  integrity sha512-80PbkKyORBUVm1fbTLrHpYdJxMThzM1UqFGh0ALEhO9TYbG86Ah9zQYAB/84axz2vcxefDLdZwWwZNlYARlu9w==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
@@ -505,10 +513,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-dotall-regex@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.4.tgz#f7ccda61118c5b7a2599a72d5e3210884a021e96"
-  integrity sha512-mk0cH1zyMa/XHeb6LOTXTbG7uIJ8Rrjlzu91pUx/KS3JpcgaTDwMS8kM+ar8SLOvlL2Lofi4CGBAjCo3a2x+lw==
+"@babel/plugin-transform-dotall-regex@^7.7.4", "@babel/plugin-transform-dotall-regex@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.7.tgz#3e9713f1b69f339e87fa796b097d73ded16b937b"
+  integrity sha512-b4in+YlTeE/QmTgrllnb3bHA0HntYvjz8O3Mcbx75UBPJA2xhb5A8nle498VhxSXJHQefjtQxpnLPehDJ4TRlg==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
@@ -623,10 +631,10 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-replace-supers" "^7.7.4"
 
-"@babel/plugin-transform-parameters@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.7.4.tgz#da4555c97f39b51ac089d31c7380f03bca4075ce"
-  integrity sha512-VJwhVePWPa0DqE9vcfptaJSzNDKrWU/4FbYCjZERtmqEs05g3UMXnYMZoXja7JAJ7Y7sPZipwm/pGApZt7wHlw==
+"@babel/plugin-transform-parameters@^7.7.4", "@babel/plugin-transform-parameters@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.7.7.tgz#7a884b2460164dc5f194f668332736584c760007"
+  integrity sha512-OhGSrf9ZBrr1fw84oFXj5hgi8Nmg+E2w5L7NhnG0lPvpDtqd7dbyilM2/vR8CKbJ907RyxPh2kj6sBCSSfI9Ew==
   dependencies:
     "@babel/helper-call-delegate" "^7.7.4"
     "@babel/helper-get-function-arity" "^7.7.4"
@@ -671,9 +679,9 @@
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
 "@babel/plugin-transform-react-jsx@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.7.4.tgz#d91205717fae4e2f84d020cd3057ec02a10f11da"
-  integrity sha512-LixU4BS95ZTEAZdPaIuyg/k8FiiqN9laQ0dMHB4MlpydHY53uQdWCUrwjLr5o6ilS6fAgZey4Q14XBjl5tL6xw==
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.7.7.tgz#5cbaa7445b4a09f774029f3cc7bb448ff3122a5d"
+  integrity sha512-SlPjWPbva2+7/ZJbGcoqjl4LsQaLpKEzxW9hcxU7675s24JmdotJOSJ4cgAbV82W3FcZpHIGmRZIlUL8ayMvjw==
   dependencies:
     "@babel/helper-builder-react-jsx" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
@@ -814,19 +822,19 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
-"@babel/preset-env@7.7.6", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.7.1":
-  version "7.7.6"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.6.tgz#39ac600427bbb94eec6b27953f1dfa1d64d457b2"
-  integrity sha512-k5hO17iF/Q7tR9Jv8PdNBZWYW6RofxhnxKjBMc0nG4JTaWvOTiPoO/RLFwAKcA4FpmuBFm6jkoqaRJLGi0zdaQ==
+"@babel/preset-env@7.7.7", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.7.1":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.7.tgz#c294167b91e53e7e36d820e943ece8d0c7fe46ac"
+  integrity sha512-pCu0hrSSDVI7kCVUOdcMNQEbOPJ52E+LrQ14sN8uL2ALfSqePZQlKrOy+tM4uhEdYlCHi4imr8Zz2cZe9oSdIg==
   dependencies:
     "@babel/helper-module-imports" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-proposal-async-generator-functions" "^7.7.4"
     "@babel/plugin-proposal-dynamic-import" "^7.7.4"
     "@babel/plugin-proposal-json-strings" "^7.7.4"
-    "@babel/plugin-proposal-object-rest-spread" "^7.7.4"
+    "@babel/plugin-proposal-object-rest-spread" "^7.7.7"
     "@babel/plugin-proposal-optional-catch-binding" "^7.7.4"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.7.4"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.7.7"
     "@babel/plugin-syntax-async-generators" "^7.7.4"
     "@babel/plugin-syntax-dynamic-import" "^7.7.4"
     "@babel/plugin-syntax-json-strings" "^7.7.4"
@@ -840,7 +848,7 @@
     "@babel/plugin-transform-classes" "^7.7.4"
     "@babel/plugin-transform-computed-properties" "^7.7.4"
     "@babel/plugin-transform-destructuring" "^7.7.4"
-    "@babel/plugin-transform-dotall-regex" "^7.7.4"
+    "@babel/plugin-transform-dotall-regex" "^7.7.7"
     "@babel/plugin-transform-duplicate-keys" "^7.7.4"
     "@babel/plugin-transform-exponentiation-operator" "^7.7.4"
     "@babel/plugin-transform-for-of" "^7.7.4"
@@ -854,7 +862,7 @@
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.7.4"
     "@babel/plugin-transform-new-target" "^7.7.4"
     "@babel/plugin-transform-object-super" "^7.7.4"
-    "@babel/plugin-transform-parameters" "^7.7.4"
+    "@babel/plugin-transform-parameters" "^7.7.7"
     "@babel/plugin-transform-property-literals" "^7.7.4"
     "@babel/plugin-transform-regenerator" "^7.7.5"
     "@babel/plugin-transform-reserved-words" "^7.7.4"
@@ -866,7 +874,7 @@
     "@babel/plugin-transform-unicode-regex" "^7.7.4"
     "@babel/types" "^7.7.4"
     browserslist "^4.6.0"
-    core-js-compat "^3.4.7"
+    core-js-compat "^3.6.0"
     invariant "^2.2.2"
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
@@ -905,10 +913,10 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@7.7.6", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4":
-  version "7.7.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
-  integrity sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw==
+"@babel/runtime@7.7.7", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
+  integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
   dependencies:
     regenerator-runtime "^0.13.2"
 
@@ -1782,9 +1790,9 @@
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
 "@types/node@*":
-  version "12.12.18"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.18.tgz#8d16634797d63c2af5bc647ce879f8de20b56469"
-  integrity sha512-DBkZuIMFuAfjJHiunyRc+aNvmXYNwV1IPMgGKGlwCp6zh6MKrVtmvjSWK/axWcD25KJffkXgkfvFra8ndenXAw==
+  version "12.12.21"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.21.tgz#aa44a6363291c7037111c47e4661ad210aded23f"
+  integrity sha512-8sRGhbpU+ck1n0PGAUgVrWrWdjSW2aqNeyC15W88GRsMpSwzv6RJGlLhE7s2RhVSOdyDmxbqlWSeThq4/7xqlA==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -2385,12 +2393,12 @@ array.prototype.flatmap@^1.2.1:
     function-bind "^1.1.1"
 
 array.prototype.map@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.map/-/array.prototype.map-1.0.1.tgz#481519dd51f7658ddf2fbdbc1d0e986e2777f96c"
-  integrity sha512-qWw0c1MYCp8Ta2N5l5S1xdNPT5NE2KGzmPe6ZeuLFEwhtNTQGzQkT37r3RoDwZwc7nEPSQyp0ohWbwDTdIwvQg==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.map/-/array.prototype.map-1.0.2.tgz#9a4159f416458a23e9483078de1106b2ef68f8ec"
+  integrity sha512-Az3OYxgsa1g7xDYp86l0nnN4bcmuEITGe1rbdEBVkrqkzMgDcbdQ2R7r41pNzti+4NMces3H8gMmuioZUilLgw==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.16.0"
+    es-abstract "^1.17.0-next.1"
     es-array-method-boxes-properly "^1.0.0"
     is-string "^1.0.4"
 
@@ -3731,18 +3739,18 @@ copy-webpack-plugin@5.1.1:
     serialize-javascript "^2.1.2"
     webpack-log "^2.0.0"
 
-core-js-compat@^3.1.1, core-js-compat@^3.4.7:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.5.0.tgz#5a11a619a9e9dd2dcf1c742b2060bc4a2143e5b6"
-  integrity sha512-E7iJB72svRjJTnm9HDvujzNVMCm3ZcDYEedkJ/sDTNsy/0yooCd9Cg7GSzE7b4e0LfIkjijdB1tqg0pGwxWeWg==
+core-js-compat@^3.1.1, core-js-compat@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.0.tgz#4eb6cb69d03d99159ed7c860cd5fcf7d23a62ea9"
+  integrity sha512-Z3eCNjGgoYluH89Jt4wVkfYsc/VdLrA2/woX5lm0isO/pCT+P+Y+o65bOuEnjDJLthdwTBxbCVzptTXtc18fJg==
   dependencies:
     browserslist "^4.8.2"
-    semver "^6.3.0"
+    semver "7.0.0"
 
 core-js-pure@^3.0.1:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.5.0.tgz#f63c7f2b245e7d678e73f87ad28505480554d70e"
-  integrity sha512-wB0QtKAofWigiISuT1Tej3hKgq932fB//Lf1VoPbiLpTYlHY0nIDhgF+q1na0DAKFHH5wGCirkAknOmDN8ijXA==
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.0.tgz#c86e14d9316659af04dd54266addc9271f6164f8"
+  integrity sha512-+YSSo7UFDFuVvMUr1HVFYArb22pYIKRDISBo6V50kRuS0MsXgsuDWmJYFu6dJsJupr77S486xRnDkr/BWQQonw==
 
 core-js@^1.0.0:
   version "1.2.7"
@@ -3755,9 +3763,9 @@ core-js@^2.4.0:
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
 core-js@^3.0.1, core-js@^3.0.4:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.5.0.tgz#66df8e49be4bd775e6f952a9d083b756ad41c1ed"
-  integrity sha512-Ifh3kj78gzQ7NAoJXeTu+XwzDld0QRIwjBLRqAMhuLhP3d2Av5wmgE9ycfnvK6NAEjTkQ1sDPeoEZAWO3Hx1Uw==
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.0.tgz#2b854e451de1967d1e29896025cdc13a2518d9ea"
+  integrity sha512-AHPTNKzyB+YwgDWoSOCaid9PUSEF6781vsfiK8qUz62zRR448/XgK2NtCbpiUGizbep8Lrpt0Du19PpGGZvw3Q==
 
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
@@ -3890,10 +3898,10 @@ css-declaration-sorter@^4.0.1:
     postcss "^7.0.1"
     timsort "^0.3.0"
 
-css-loader@3.3.2, css-loader@^3.0.0:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.3.2.tgz#41b2086528aa4fbf8c0692e874bc14f081129b21"
-  integrity sha512-4XSiURS+YEK2fQhmSaM1onnUm0VKWNf6WWBYjkp9YbSDGCBTVZ5XOM6Gkxo8tLgQlzkZOBJvk9trHlDk4gjEYg==
+css-loader@3.4.0, css-loader@^3.0.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.4.0.tgz#9fb263436783117a41d014e45e8eaeba54dd6670"
+  integrity sha512-JornYo4RAXl1Mzt0lOSVPmArzAMV3rGY2VuwtaDc732WTWjdwTaeS19nCGWMcSCf305Q396lhhDAJEWWM0SgPQ==
   dependencies:
     camelcase "^5.3.1"
     cssesc "^3.0.0"
@@ -4098,7 +4106,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0:
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
+debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -4134,11 +4142,6 @@ deep-equal@^1.0.1, deep-equal@^1.1.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
-  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -4237,11 +4240,6 @@ detect-file@^1.0.0:
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@@ -4404,9 +4402,9 @@ dot-prop@^4.1.1:
     is-obj "^1.0.0"
 
 dotenv-defaults@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.0.2.tgz#441cf5f067653fca4bbdce9dd3b803f6f84c585d"
-  integrity sha512-iXFvHtXl/hZPiFj++1hBg4lbKwGM+t/GlvELDnRtOFdjXyWP7mubkVr+eZGWG62kdsbulXAef6v/j6kiWc/xGA==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.0.3.tgz#434a78209f2cab07f9ec9b86b79ae7e9ca5d818b"
+  integrity sha512-EHeXF8VZA/XhkGJCtRpJCTHC8GkoisPXjdvJMzxgFrlN6lTEW/eksRNsVKnW0BxR1pGZH8IEBO/D0mDkIrC6fA==
   dependencies:
     dotenv "^6.2.0"
 
@@ -4585,22 +4583,6 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.16.0, es-abstract@^1.16.2:
-  version "1.16.3"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.16.3.tgz#52490d978f96ff9f89ec15b5cf244304a5bca161"
-  integrity sha512-WtY7Fx5LiOnSYgF5eg/1T+GONaGmpvpPdCpSnYij+U2gDTL0UPfWrhDw7b2IYb+9NQJsYpCA0wOQvZfsd6YwRw==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.1.4"
-    is-regex "^1.0.4"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    string.prototype.trimleft "^2.1.0"
-    string.prototype.trimright "^2.1.0"
-
 es-abstract@^1.17.0-next.0, es-abstract@^1.17.0-next.1:
   version "1.17.0-next.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.0-next.1.tgz#94acc93e20b05a6e96dacb5ab2f1cb3a81fc2172"
@@ -4624,11 +4606,11 @@ es-array-method-boxes-properly@^1.0.0:
   integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
 
 es-get-iterator@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.0.1.tgz#ebc4d3bbc2d59dd95a0ecef441ca2dbce7d9e2cd"
-  integrity sha512-pswpctxWRElQDcP0RJy0qmNrpf6nH9SeQl8dra5fFHBPHKfpVIST27Kv4j5enE8JhIssRBI4QPMrNvcyIPhapQ==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.0.2.tgz#bc99065aa8c98ce52bc86ab282dedbba4120e0b3"
+  integrity sha512-ZHb4fuNK3HKHEOvDGyHPKf5cSWh/OvAMskeM/+21NMnTuvqFvz8uHatolu+7Kf6b6oK9C+3Uo1T37pSGPWv0MA==
   dependencies:
-    es-abstract "^1.16.2"
+    es-abstract "^1.17.0-next.1"
     has-symbols "^1.0.1"
     is-arguments "^1.0.4"
     is-map "^2.0.0"
@@ -5157,7 +5139,7 @@ find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.0.0, find-cache-dir@^3.1.0:
+find-cache-dir@^3.0.0, find-cache-dir@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.2.0.tgz#e7fe44c1abc1299f516146e563108fd1006c1874"
   integrity sha512-1JKclkYYsf1q9WIJKLZa9S9muC+08RIjzAlLrK4QcYLJMS6mk9yombQ9qf+zJ7H9LS800k0s44L4sDq9VYzqyg==
@@ -5332,13 +5314,6 @@ fs-extra@^8.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
 fs-minipass@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.0.0.tgz#a6415edab02fae4b9e9230bc87ee2e4472003cd1"
@@ -5535,13 +5510,11 @@ globals@^12.1.0:
     type-fest "^0.8.1"
 
 globalthis@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.0.tgz#c5fb98213a9b4595f59cf3e7074f141b4169daae"
-  integrity sha512-vcCAZTJ3r5Qcu5l8/2oyVdoFwxKgfYnMTR2vwWeux/NAVZK3PwcMaWkdUIn4GJbmKuRK7xcvDsLuK+CKcXyodg==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.1.tgz#40116f5d9c071f9e8fb0037654df1ab3a83b7ef9"
+  integrity sha512-mJPRTc/P39NH/iNG4mXa9aIhNymaQikTrnspeCa2ZuJ+mH2QN/rXwtX3XwKrHqWgUQFbNZKtHM105aHzJalElw==
   dependencies:
-    define-properties "^1.1.2"
-    function-bind "^1.1.1"
-    object-keys "^1.0.12"
+    define-properties "^1.1.3"
 
 globby@8.0.2:
   version "8.0.2"
@@ -5952,7 +5925,7 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -5976,13 +5949,6 @@ iferr@^0.1.5:
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
   integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
-ignore-walk@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
-  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
-  dependencies:
-    minimatch "^3.0.4"
-
 ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
@@ -6084,7 +6050,7 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
+ini@^1.3.4, ini@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
@@ -6294,9 +6260,9 @@ is-data-descriptor@^1.0.0:
     kind-of "^6.0.0"
 
 is-date-object@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
-  integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
+  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
 is-decimal@^1.0.0:
   version "1.0.3"
@@ -6398,9 +6364,9 @@ is-hexadecimal@^1.0.0:
   integrity sha512-zxQ9//Q3D/34poZf8fiy3m3XVpbQc7ren15iKqrTtLPwkPD/t3Scy9Imp63FujULGxuK0ZlCwoo5xNpktFgbOA==
 
 is-map@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.0.tgz#1d223ada48a1f5fdb7b3c5c21a45b6a4d48aec3c"
-  integrity sha512-ptj+FffEGJN9hLuakga2S3mYQt5PVN+w7+fL3SAgxKhlCePSt24Q3fiSozhvphbwCQ0+QPA1rJnLSoS2LnbCVw==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
 
 is-number@^3.0.0:
   version "3.0.0"
@@ -6480,9 +6446,9 @@ is-root@2.1.0:
   integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
 
 is-set@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.0.tgz#ae93342b1de5560c720b4b71599abc799d183cf4"
-  integrity sha512-So5/xwRDzU3X7kOt2vpvrsj/Asx5E7Q5IyX6itksB96FJgyydSe9tFwfCq7IZ8URDS4h45FhNgfENToTgBfmgw==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
 
 is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
@@ -6490,9 +6456,9 @@ is-stream@^1.0.1, is-stream@^1.1.0:
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
 is-string@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
-  integrity sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ=
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
 
 is-svg@^3.0.0:
   version "3.0.0"
@@ -7357,7 +7323,7 @@ lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-loglevel@^1.6.4:
+loglevel@^1.6.6:
   version "1.6.6"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.6.tgz#0ee6300cc058db6b3551fa1c4bf73b83bb771312"
   integrity sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==
@@ -7607,10 +7573,10 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
-mini-css-extract-plugin@0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
-  integrity sha512-MNpRGbNA52q6U92i0qbVpQNsgk7LExy41MdAlG84FeytfDOtRIf/mCHdEgG8rpTKOaNKiqUnZdlptF469hxqOw==
+mini-css-extract-plugin@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz#a875e169beb27c88af77dd962771c9eedc3da161"
+  integrity sha512-a3Y4of27Wz+mqK3qrcd3VhYz6cU0iW5x3Sgvqzbj+XmlrSizmvu8QQMl5oMYJjgHOC4iyt+w7l4umP+dQeW3bw==
   dependencies:
     loader-utils "^1.1.0"
     normalize-url "1.9.1"
@@ -7680,14 +7646,6 @@ minipass-pipeline@^1.2.2:
   dependencies:
     minipass "^3.0.0"
 
-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
 minipass@^3.0.0, minipass@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.1.tgz#7607ce778472a185ad6d89082aa2070f79cedcd5"
@@ -7695,13 +7653,6 @@ minipass@^3.0.0, minipass@^3.1.1:
   dependencies:
     yallist "^4.0.0"
 
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -7818,15 +7769,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-needle@^2.2.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
-  integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -7924,30 +7866,14 @@ node-notifier@^5.4.2:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.29, node-releases@^1.1.42:
-  version "1.1.42"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.42.tgz#a999f6a62f8746981f6da90627a8d2fc090bbad7"
-  integrity sha512-OQ/ESmUqGawI2PRX+XIRao44qWYBBfN54ImQYdWVTQqUckuejOg76ysSqDBK8NG3zwySRVnX36JwDQ6x+9GxzA==
+  version "1.1.43"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.43.tgz#2c6ca237f88ce11d49631f11190bb01f8d0549f2"
+  integrity sha512-Rmfnj52WNhvr83MvuAWHEqXVoZXCcDQssSOffU4n4XOL9sPrP61mSZ88g25NqmABDvH7PiAlFCzoSCSdzA293w==
   dependencies:
     semver "^6.3.0"
 
-nopt@^4.0.1, nopt@~4.0.1:
+nopt@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
   integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
@@ -7997,26 +7923,6 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-npm-bundled@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
-  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
-npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-packlist@^1.1.6:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.7.tgz#9e954365a06b80b18111ea900945af4f88ed4848"
-  integrity sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -8024,7 +7930,7 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npmlog@^4.0.2, npmlog@^4.1.2:
+npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -8990,9 +8896,9 @@ postcss-zindex@^4.0.1:
     uniqs "^2.0.0"
 
 postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.24.tgz#972c3c5be431b32e40caefe6c81b5a19117704c2"
-  integrity sha512-Xl0XvdNWg+CblAXzNvbSOUvgJXwSjmbAKORqyw9V2AlHrm1js2gFw9y3jibBAhpKZi8b5JzJCVh/FyzPsTtgTA==
+  version "7.0.25"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.25.tgz#dd2a2a753d50b13bed7a2009b4a18ac14d9db21e"
+  integrity sha512-NXXVvWq9icrm/TgQC0O6YVFi4StfJz46M1iNd/h6B26Nvh/HKI+q4YZtFN/EjcInZliEscO/WL10BXnc1E5nwg==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
@@ -9280,16 +9186,6 @@ raw-loader@^2.0.0:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
-rc@^1.2.7:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
-  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
 react-clientside-effect@^1.2.0, react-clientside-effect@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
@@ -9821,9 +9717,9 @@ resolve@1.1.7:
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
 resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.3.2, resolve@^1.8.1:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.13.1.tgz#be0aa4c06acd53083505abb35f4d66932ab35d16"
-  integrity sha512-CxqObCX8K8YtAhOBRg+lrcdn+LK+WYOS8tSjqSFbjtrI5PnS63QPhZl4+yKfrU9tdsbMu9Anr/amegT87M9Z6w==
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.14.1.tgz#9e018c540fcf0c427d678b9931cbf45e984bcaff"
+  integrity sha512-fn5Wobh4cxbLzuHaE+nphztHy43/b++4M6SsGFC2gB8uYwf0C8LcarfCz1un7UTW8OFQg9iNjZ4xpcFVGebDPg==
   dependencies:
     path-parse "^1.0.6"
 
@@ -9870,7 +9766,7 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3, rimraf@^2.7.1:
+rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.3, rimraf@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -10000,11 +9896,16 @@ selfsigned@^1.10.7:
   dependencies:
     node-forge "0.9.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
 semver@^6.0.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@@ -10576,17 +10477,17 @@ string.prototype.padstart@^3.0.0:
     es-abstract "^1.17.0-next.1"
 
 string.prototype.trimleft@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
-  integrity sha512-FJ6b7EgdKxxbDxc79cOlok6Afd++TTs5szo+zJTUyow3ycrRfJVE2pq3vcN53XexvKZu/DJMDfeI/qMiZTrjTw==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"
+  integrity sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==
   dependencies:
     define-properties "^1.1.3"
     function-bind "^1.1.1"
 
 string.prototype.trimright@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz#669d164be9df9b6f7559fa8e89945b168a5a6c58"
-  integrity sha512-fXZTSV55dNBwv16uw+hh5jkghxSnc5oHq+5K/gXgizHwAvMetdAJlHqqoFC1FSDVPYWLkAKl2cxpUT41sV7nSg==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz#440314b15996c866ce8a0341894d45186200c5d9"
+  integrity sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==
   dependencies:
     define-properties "^1.1.3"
     function-bind "^1.1.1"
@@ -10648,11 +10549,6 @@ strip-json-comments@^3.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
   integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
 
-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
 style-loader@^0.23.1:
   version "0.23.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
@@ -10741,19 +10637,6 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tar@^4.4.2:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 telejson@^3.0.2:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/telejson/-/telejson-3.3.0.tgz#6d814f3c0d254d5c4770085aad063e266b56ad03"
@@ -10775,18 +10658,18 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
-terser-webpack-plugin@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.0.tgz#00fd8f792a330dc572e2e2b468fd7cb5ffd7ea51"
-  integrity sha512-yez0HdpDf/iQVYGf+e/o8ZYWLb1g9d1nRRi5FIOZ4KfXbfSPT259UoqxPiSLhCnr0mlDoh+bucpYQSFbU0cEsQ==
+terser-webpack-plugin@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.1.tgz#6a63c27debc15b25ffd2588562ee2eeabdcab923"
+  integrity sha512-dNxivOXmDgZqrGxOttBH6B4xaxT4zNC+Xd+2K8jwGDMK5q2CZI+KZMA1AAnSRT+BTRvuzKsDx+fpxzPAmAMVcA==
   dependencies:
     cacache "^13.0.1"
-    find-cache-dir "^3.1.0"
+    find-cache-dir "^3.2.0"
     jest-worker "^24.9.0"
     schema-utils "^2.6.1"
     serialize-javascript "^2.1.2"
     source-map "^0.6.1"
-    terser "^4.4.2"
+    terser "^4.4.3"
     webpack-sources "^1.4.3"
 
 terser-webpack-plugin@^1.2.4, terser-webpack-plugin@^1.4.3:
@@ -10804,10 +10687,10 @@ terser-webpack-plugin@^1.2.4, terser-webpack-plugin@^1.4.3:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
-terser@^4.1.2, terser@^4.3.9, terser@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.4.2.tgz#448fffad0245f4c8a277ce89788b458bfd7706e8"
-  integrity sha512-Uufrsvhj9O1ikwgITGsZ5EZS6qPokUOkCegS7fYOdGTv+OA90vndUbU6PEjr5ePqHfNUbGyMO7xyIZv2MhsALQ==
+terser@^4.1.2, terser@^4.3.9, terser@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.4.3.tgz#401abc52b88869cf904412503b1eb7da093ae2f0"
+  integrity sha512-0ikKraVtRDKGzHrzkCv5rUNDzqlhmhowOBqC0XqUHFpW+vJ45+20/IFBcebwKfiS2Z9fJin6Eo+F1zLZsxi8RA==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"
@@ -11362,10 +11245,10 @@ webpack-dev-middleware@^3.7.0, webpack-dev-middleware@^3.7.2:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.9.0.tgz#27c3b5d0f6b6677c4304465ac817623c8b27b89c"
-  integrity sha512-E6uQ4kRrTX9URN9s/lIbqTAztwEPdvzVrcmHE8EQ9YnuT9J8Es5Wrd8n9BKg1a0oZ5EgEke/EQFgUsp18dSTBw==
+webpack-dev-server@3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.10.0.tgz#725d0bdfd70a56d266a5a0ee167df8e6a422d533"
+  integrity sha512-dPNu0Kz9lh5QrRef/ulknAtEEHoZ/p49sUPE+4KbknmxkDU6V4evB2LdTWlw/DnDavxQC499+2jLHlgFjA6TmQ==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
@@ -11382,7 +11265,7 @@ webpack-dev-server@3.9.0:
     ip "^1.1.5"
     is-absolute-url "^3.0.3"
     killable "^1.0.1"
-    loglevel "^1.6.4"
+    loglevel "^1.6.6"
     opn "^5.5.0"
     p-retry "^3.0.1"
     portfinder "^1.0.25"
@@ -11427,10 +11310,10 @@ webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@4.41.3, webpack@^4.33.0, webpack@^4.38.0:
-  version "4.41.3"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.3.tgz#cb7592c43080337dbc9be9e98fc6478eb3981026"
-  integrity sha512-EcNzP9jGoxpQAXq1VOoTet0ik7/VVU1MovIfcUSAjLowc7GhcQku/sOXALvq5nPpSei2HF6VRhibeJSC3i/Law==
+webpack@4.41.4, webpack@^4.33.0, webpack@^4.38.0:
+  version "4.41.4"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.4.tgz#4bec4125224bdf50efa8be6226c19047599cd034"
+  integrity sha512-Lc+2uB6NjpCWsHI3trkoISOI64h9QYIXenbEWj3bn3oyjfB1lEBXjWAfAyY2sM0rZn41oD5V91OLwKRwS6Wp8Q==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-module-context" "1.8.5"
@@ -11627,7 +11510,7 @@ yallist@^2.1.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
-yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
+yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==

From e9850ad498640e1e00aa0fa4f3cbe2bb002ed05d Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 19 Dec 2019 10:33:44 +0200
Subject: [PATCH 12/21] videos ordered by season than by episode

---
 .../MetaDetails/VideosList/useSelectableSeasons.js  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/useSelectableSeasons.js b/src/routes/MetaDetails/VideosList/useSelectableSeasons.js
index 4952f0d55..f0cc50f55 100644
--- a/src/routes/MetaDetails/VideosList/useSelectableSeasons.js
+++ b/src/routes/MetaDetails/VideosList/useSelectableSeasons.js
@@ -10,7 +10,8 @@ const reducer = (state, action) => {
                         !isNaN(season) &&
                         typeof season === 'number' &&
                         seasons.indexOf(season) === index;
-                });
+                })
+                .sort((a, b) => a - b);
             const selectedSeason = seasons.includes(state.selectedSeason) ?
                 state.selectedSeason
                 :
@@ -68,9 +69,13 @@ const useSelectableSeasons = (videos) => {
         });
     }, []);
     const videosForSeason = React.useMemo(() => {
-        return state.videos.filter((video) => {
-            return state.selectedSeason === null || video.season === state.selectedSeason;
-        });
+        return state.videos
+            .filter((video) => {
+                return state.selectedSeason === null || video.season === state.selectedSeason;
+            })
+            .sort((a, b) => {
+                return a.episode - b.episode;
+            });
     }, [state.videos, state.selectedSeason]);
     React.useEffect(() => {
         dispatch({

From b3997941666d4628f5143d5886381dda60ff36a9 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 19 Dec 2019 14:20:51 +0200
Subject: [PATCH 13/21] addon story updated

---
 storybook/stories/Addon/InstalledAddon.js    | 17 +++++++++--------
 storybook/stories/Addon/NotInstalledAddon.js | 17 +++++++++--------
 storybook/stories/Addon/styles.less          |  2 +-
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/storybook/stories/Addon/InstalledAddon.js b/storybook/stories/Addon/InstalledAddon.js
index 24400fdd7..e2626605b 100644
--- a/storybook/stories/Addon/InstalledAddon.js
+++ b/storybook/stories/Addon/InstalledAddon.js
@@ -5,16 +5,17 @@ const Addon = require('stremio/routes/Addons/Addon');
 const styles = require('./styles');
 
 storiesOf('Addon', module).add('Installed', () => (
-    <Addon 
+    <Addon
         className={styles['installed-addon-container']}
-        id={'addon-id'}
-        name={'Demo name'}
-        logo={'/images/intro_background.jpg'}
-        description={'Demo description'}
-        types={['Demo type']}
+        id={'addon.id'}
+        name={'Addon name'}
         version={'1.0.0'}
-        transportUrl={'Demo url'}
+        logo={'/images/intro_background.jpg'}
+        description={'Addon description ...'}
+        types={['movie', 'series']}
         installed={true}
-        toggle={action('Demo item uninstall button clicked')}
+        onToggle={action('Toggle')}
+        onShare={action('Share')}
+        dataset={{ transportUrl: 'http://www.com' }}
     />
 ));
diff --git a/storybook/stories/Addon/NotInstalledAddon.js b/storybook/stories/Addon/NotInstalledAddon.js
index 5d5130198..84e9606c2 100644
--- a/storybook/stories/Addon/NotInstalledAddon.js
+++ b/storybook/stories/Addon/NotInstalledAddon.js
@@ -6,15 +6,16 @@ const styles = require('./styles');
 
 storiesOf('Addon', module).add('NotInstalled', () => (
     <Addon
-        className={styles['not-installed-addon-container']}
-        id={'addon-id'}
-        name={'Demo name'}
-        logo={'/images/intro_background.jpg'}
-        description={'Demo description'}
-        types={['Demo type']}
+        className={styles['installed-addon-container']}
+        id={'addon.id'}
+        name={'Addon name'}
         version={'1.0.0'}
-        transportUrl={'Demo url'}
+        logo={'/images/intro_background.jpg'}
+        description={'Addon description ...'}
+        types={['movie', 'series']}
         installed={false}
-        toggle={action('Demo item install button clicked')}
+        onToggle={action('Toggle')}
+        onShare={action('Share')}
+        dataset={{ transportUrl: 'http://www.com' }}
     />
 ));
diff --git a/storybook/stories/Addon/styles.less b/storybook/stories/Addon/styles.less
index f300a05f0..30166b689 100644
--- a/storybook/stories/Addon/styles.less
+++ b/storybook/stories/Addon/styles.less
@@ -1,3 +1,3 @@
 .installed-addon-container, .not-installed-addon-container {
-    margin: 10px;
+    margin: 1rem;
 }
\ No newline at end of file

From 4d56fa3b5a6b709291035b72c7495d685d425e69 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 19 Dec 2019 14:30:58 +0200
Subject: [PATCH 14/21] Image stories updated

---
 .../ImageWithFallback/ImageWithFallback.js    | 23 +++++++++++--------
 .../Image/ImageWithFallback/styles.less       |  2 ++
 .../stories/Image/SampleImage/styles.less     |  1 +
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js b/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
index e18552e16..411e5deca 100644
--- a/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
+++ b/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
@@ -5,13 +5,16 @@ const Icon = require('stremio-icons/dom');
 const { Image } = require('stremio/common');
 const styles = require('./styles');
 
-storiesOf('Image', module).add('ImageWithFallback', () => (
-    <Image
-        className={styles['image']}
-        src={'/images/non_existing.png'}
-        onError={action('onError')}
-        renderFallback={() => (
-            <Icon className={styles['icon']} icon={'ic_broken_link'} />
-        )}
-    />
-));
+storiesOf('Image', module).add('ImageWithFallback', () => {
+    const renderFallback = React.useMemo(() => () => (
+        <Icon className={styles['icon']} icon={'ic_broken_link'} />
+    ));
+    return (
+        <Image
+            className={styles['image']}
+            src={'/images/non_existing.png'}
+            onError={action('onError')}
+            renderFallback={renderFallback}
+        />
+    );
+});
diff --git a/storybook/stories/Image/ImageWithFallback/styles.less b/storybook/stories/Image/ImageWithFallback/styles.less
index 69c02638a..26f22a491 100644
--- a/storybook/stories/Image/ImageWithFallback/styles.less
+++ b/storybook/stories/Image/ImageWithFallback/styles.less
@@ -2,11 +2,13 @@
     flex: none;
     width: 10rem;
     height: 10rem;
+    margin: 1rem;
 }
 
 .icon {
     flex: none;
     width: 10rem;
     height: 10rem;
+    margin: 1rem;
     fill: white;
 }
\ No newline at end of file
diff --git a/storybook/stories/Image/SampleImage/styles.less b/storybook/stories/Image/SampleImage/styles.less
index 0527ceb9d..18074a6fb 100644
--- a/storybook/stories/Image/SampleImage/styles.less
+++ b/storybook/stories/Image/SampleImage/styles.less
@@ -2,4 +2,5 @@
     flex: none;
     width: 10rem;
     height: 10rem;
+    margin: 1rem;
 }
\ No newline at end of file

From ed67a623b56e3cf30b3b89e7ffd6ad0bdb76e39c Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 20 Dec 2019 13:01:58 +0200
Subject: [PATCH 15/21] direction prop fixed in storybook

---
 .../MultiselectMultipleValues/MultiselectMultipleValues.js      | 2 +-
 .../MultiselectNotAutoClosing/MultiselectNotAutoClosing.js      | 2 +-
 .../MultiselectSingleValue/MultiselectSingleValue.js            | 2 +-
 storybook/stories/Popup/Popup.js                                | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/storybook/stories/Multiselect/MultiselectMultipleValues/MultiselectMultipleValues.js b/storybook/stories/Multiselect/MultiselectMultipleValues/MultiselectMultipleValues.js
index af613c04b..58f1177c1 100644
--- a/storybook/stories/Multiselect/MultiselectMultipleValues/MultiselectMultipleValues.js
+++ b/storybook/stories/Multiselect/MultiselectMultipleValues/MultiselectMultipleValues.js
@@ -17,7 +17,7 @@ storiesOf('Multiselect', module).add('MultiselectMultipleValues', () => {
     return (
         <Multiselect
             className={styles['label-container']}
-            direction={'bottom'}
+            direction={'bottom-right'}
             title={'MultiselectMultipleValues'}
             options={[
                 { value: 'a', label: 'A' },
diff --git a/storybook/stories/Multiselect/MultiselectNotAutoClosing/MultiselectNotAutoClosing.js b/storybook/stories/Multiselect/MultiselectNotAutoClosing/MultiselectNotAutoClosing.js
index 5074694dc..2730b27c8 100644
--- a/storybook/stories/Multiselect/MultiselectNotAutoClosing/MultiselectNotAutoClosing.js
+++ b/storybook/stories/Multiselect/MultiselectNotAutoClosing/MultiselectNotAutoClosing.js
@@ -19,7 +19,7 @@ storiesOf('Multiselect', module).add('MultiselectNotAutoClosing', () => {
     return (
         <Multiselect
             className={styles['label-container']}
-            direction={'bottom'}
+            direction={'bottom-right'}
             title={'MultiselectNotAutoClosing'}
             options={[
                 { value: 'a', label: 'A' },
diff --git a/storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js b/storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js
index 9bf58f2f9..83d500e5c 100644
--- a/storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js
+++ b/storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js
@@ -16,7 +16,7 @@ storiesOf('Multiselect', module).add('MultiselectSingleValue', () => {
     return (
         <Multiselect
             className={styles['label-container']}
-            direction={'bottom'}
+            direction={'bottom-right'}
             title={'MultiselectSingleValue'}
             options={[
                 { value: 'a', label: 'A' },
diff --git a/storybook/stories/Popup/Popup.js b/storybook/stories/Popup/Popup.js
index 66d0a27a3..64ee60f15 100644
--- a/storybook/stories/Popup/Popup.js
+++ b/storybook/stories/Popup/Popup.js
@@ -28,7 +28,7 @@ storiesOf('Popup', module).add('Popup', () => {
     return (
         <Popup
             open={menuOpen}
-            direction={'bottom'}
+            direction={'bottom-right'}
             renderLabel={({ className, children, ...props }) => (
                 <Button {...props} className={classnames(className, styles['popup-label-container'])} onClick={popupLabelOnClick}>
                     POPUP LABEL

From 263d1fe160c3b186b8b3a33c9245ae039140c9cd Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 23 Dec 2019 10:47:02 +0200
Subject: [PATCH 16/21] Router proptypes improved

---
 src/router/Modal/Modal.js                                  | 7 ++-----
 .../ModalsContainerContext/ModalsContainerProvider.js      | 5 +----
 src/router/Route/Route.js                                  | 5 +----
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/router/Modal/Modal.js b/src/router/Modal/Modal.js
index fcf65b15c..dc26b3f12 100644
--- a/src/router/Modal/Modal.js
+++ b/src/router/Modal/Modal.js
@@ -8,7 +8,7 @@ const { useModalsContainer } = require('../ModalsContainerContext');
 const Modal = ({ className, autoFocus, children, ...props }) => {
     const modalsContainer = useModalsContainer();
     return ReactDOM.createPortal(
-        <FocusLock className={classnames(className, 'modal-container')} autoFocus={!!autoFocus} lockProps={props}>
+        <FocusLock className={classnames(className, 'modal-container')} autoFocus={autoFocus} lockProps={props}>
             {children}
         </FocusLock>,
         modalsContainer
@@ -18,10 +18,7 @@ const Modal = ({ className, autoFocus, children, ...props }) => {
 Modal.propTypes = {
     className: PropTypes.string,
     autoFocus: PropTypes.bool,
-    children: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.node),
-        PropTypes.node
-    ])
+    children: PropTypes.node
 };
 
 module.exports = Modal;
diff --git a/src/router/ModalsContainerContext/ModalsContainerProvider.js b/src/router/ModalsContainerContext/ModalsContainerProvider.js
index 00e9c6928..3411f2bf4 100644
--- a/src/router/ModalsContainerContext/ModalsContainerProvider.js
+++ b/src/router/ModalsContainerContext/ModalsContainerProvider.js
@@ -13,10 +13,7 @@ const ModalsContainerProvider = ({ children }) => {
 };
 
 ModalsContainerProvider.propTypes = {
-    children: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.node),
-        PropTypes.node
-    ])
+    children: PropTypes.node
 };
 
 module.exports = ModalsContainerProvider;
diff --git a/src/router/Route/Route.js b/src/router/Route/Route.js
index 3b059c1a6..bae2f3080 100644
--- a/src/router/Route/Route.js
+++ b/src/router/Route/Route.js
@@ -15,10 +15,7 @@ const Route = ({ children }) => {
 };
 
 Route.propTypes = {
-    children: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.node),
-        PropTypes.node
-    ])
+    children: PropTypes.node
 };
 
 module.exports = Route;

From 02c20be5e90b50d48029b8f6f5b90a633ce07a9c Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 27 Dec 2019 16:24:28 +0200
Subject: [PATCH 17/21] rename addonTransportUrl param to transportUrl

---
 src/common/routesRegexp.js                 |  4 ++--
 src/routes/Addons/Addons.js                | 10 +++++-----
 src/routes/Addons/useAddons.js             |  4 ++--
 src/routes/Addons/useSelectableInputs.js   |  4 ++--
 src/routes/Discover/Discover.js            |  2 +-
 src/routes/Discover/useDiscover.js         |  4 ++--
 src/routes/Discover/useSelectableInputs.js |  4 ++--
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/common/routesRegexp.js b/src/common/routesRegexp.js
index f4128765b..6fde028a0 100644
--- a/src/common/routesRegexp.js
+++ b/src/common/routesRegexp.js
@@ -9,7 +9,7 @@ const routesRegexp = {
     },
     discover: {
         regexp: /^\/discover(?:\/([^/]*)\/([^/]*)\/([^/]*))?$/,
-        urlParamsNames: ['addonTransportUrl', 'type', 'catalogId']
+        urlParamsNames: ['transportUrl', 'type', 'catalogId']
     },
     library: {
         regexp: /^\/library(?:\/([^/]*)\/([^/]*))?$/,
@@ -25,7 +25,7 @@ const routesRegexp = {
     },
     addons: {
         regexp: /^\/addons(?:\/([^/]*)\/([^/]*)\/([^/]*))?$/,
-        urlParamsNames: ['addonTransportUrl', 'catalogId', 'type']
+        urlParamsNames: ['transportUrl', 'catalogId', 'type']
     },
     settings: {
         regexp: /^\/settings$/,
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 66c995b67..e8519ebec 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -10,10 +10,10 @@ const styles = require('./styles');
 const navigateToAddonDetails = (addonsCatalogRequest, transportUrl) => {
     const queryParams = new URLSearchParams([['addon', transportUrl]]);
     if (addonsCatalogRequest !== null) {
-        const addonTransportUrl = encodeURIComponent(addonsCatalogRequest.base);
+        const transportUrl = encodeURIComponent(addonsCatalogRequest.base);
         const catalogId = encodeURIComponent(addonsCatalogRequest.path.id);
         const type = encodeURIComponent(addonsCatalogRequest.path.type_name);
-        window.location.replace(`#/addons/${addonTransportUrl}/${catalogId}/${type}?${queryParams}`);
+        window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}?${queryParams}`);
     } else {
         window.location.replace(`#/addons?${queryParams}`);
     }
@@ -21,10 +21,10 @@ const navigateToAddonDetails = (addonsCatalogRequest, transportUrl) => {
 
 const clearAddonDetails = (addonsCatalogRequest) => {
     if (addonsCatalogRequest !== null) {
-        const addonTransportUrl = encodeURIComponent(addonsCatalogRequest.base);
+        const transportUrl = encodeURIComponent(addonsCatalogRequest.base);
         const catalogId = encodeURIComponent(addonsCatalogRequest.path.id);
         const type = encodeURIComponent(addonsCatalogRequest.path.type_name);
-        window.location.replace(`#/addons/${addonTransportUrl}/${catalogId}/${type}`);
+        window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}`);
     } else {
         window.location.replace('#/addons');
     }
@@ -217,7 +217,7 @@ const Addons = ({ urlParams, queryParams }) => {
 
 Addons.propTypes = {
     urlParams: PropTypes.exact({
-        addonTransportUrl: PropTypes.string,
+        transportUrl: PropTypes.string,
         catalogId: PropTypes.string,
         type: PropTypes.string
     }),
diff --git a/src/routes/Addons/useAddons.js b/src/routes/Addons/useAddons.js
index 57be65b45..cd0fae6f9 100644
--- a/src/routes/Addons/useAddons.js
+++ b/src/routes/Addons/useAddons.js
@@ -55,13 +55,13 @@ const onNewAddonsState = (addons) => {
 const useAddons = (urlParams) => {
     const { core } = useServices();
     const loadAddonsAction = React.useMemo(() => {
-        if (typeof urlParams.addonTransportUrl === 'string' && typeof urlParams.catalogId === 'string' && typeof urlParams.type === 'string') {
+        if (typeof urlParams.transportUrl === 'string' && typeof urlParams.catalogId === 'string' && typeof urlParams.type === 'string') {
             return {
                 action: 'Load',
                 args: {
                     load: 'CatalogFiltered',
                     args: {
-                        base: urlParams.addonTransportUrl,
+                        base: urlParams.transportUrl,
                         path: {
                             resource: 'addon_catalog',
                             type_name: urlParams.type,
diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js
index 1b1c4dd15..4db24b058 100644
--- a/src/routes/Addons/useSelectableInputs.js
+++ b/src/routes/Addons/useSelectableInputs.js
@@ -1,10 +1,10 @@
 const React = require('react');
 
 const navigateWithLoadRequest = (load_request) => {
-    const addonTransportUrl = encodeURIComponent(load_request.base);
+    const transportUrl = encodeURIComponent(load_request.base);
     const catalogId = encodeURIComponent(load_request.path.id);
     const type = encodeURIComponent(load_request.path.type_name);
-    window.location.replace(`#/addons/${addonTransportUrl}/${catalogId}/${type}`);
+    window.location.replace(`#/addons/${transportUrl}/${catalogId}/${type}`);
 };
 
 const equalWithouExtra = (request1, request2) => {
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index 17f407876..e2c1f7426 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -138,7 +138,7 @@ const Discover = ({ urlParams, queryParams }) => {
 
 Discover.propTypes = {
     urlParams: PropTypes.exact({
-        addonTransportUrl: PropTypes.string,
+        transportUrl: PropTypes.string,
         type: PropTypes.string,
         catalogId: PropTypes.string
     }),
diff --git a/src/routes/Discover/useDiscover.js b/src/routes/Discover/useDiscover.js
index 62ef18dbc..a40264ca0 100644
--- a/src/routes/Discover/useDiscover.js
+++ b/src/routes/Discover/useDiscover.js
@@ -57,13 +57,13 @@ const onNewDiscoverState = (discover) => {
 const useDiscover = (urlParams, queryParams) => {
     const { core } = useServices();
     const loadDiscoverAction = React.useMemo(() => {
-        if (typeof urlParams.addonTransportUrl === 'string' && typeof urlParams.type === 'string' && typeof urlParams.catalogId === 'string') {
+        if (typeof urlParams.transportUrl === 'string' && typeof urlParams.type === 'string' && typeof urlParams.catalogId === 'string') {
             return {
                 action: 'Load',
                 args: {
                     load: 'CatalogFiltered',
                     args: {
-                        base: urlParams.addonTransportUrl,
+                        base: urlParams.transportUrl,
                         path: {
                             resource: 'catalog',
                             type_name: urlParams.type,
diff --git a/src/routes/Discover/useSelectableInputs.js b/src/routes/Discover/useSelectableInputs.js
index 6ce6a4190..9493ad9d9 100644
--- a/src/routes/Discover/useSelectableInputs.js
+++ b/src/routes/Discover/useSelectableInputs.js
@@ -9,11 +9,11 @@ const SKIP_EXTRA = {
 };
 
 const navigateWithLoadRequest = (load_request) => {
-    const addonTransportUrl = encodeURIComponent(load_request.base);
+    const transportUrl = encodeURIComponent(load_request.base);
     const type = encodeURIComponent(load_request.path.type_name);
     const catalogId = encodeURIComponent(load_request.path.id);
     const extra = new URLSearchParams(load_request.path.extra).toString();
-    window.location.replace(`#/discover/${addonTransportUrl}/${type}/${catalogId}?${extra}`);
+    window.location.replace(`#/discover/${transportUrl}/${type}/${catalogId}?${extra}`);
 };
 
 const getNextExtra = (prevExtra, extraProp, extraValue) => {

From 0baf3d21cc4eb78f69bab387c5f0932270f2fad2 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 27 Dec 2019 16:51:44 +0200
Subject: [PATCH 18/21] player url params changed

---
 src/common/routesRegexp.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/routesRegexp.js b/src/common/routesRegexp.js
index 6fde028a0..d2bf19114 100644
--- a/src/common/routesRegexp.js
+++ b/src/common/routesRegexp.js
@@ -32,8 +32,8 @@ const routesRegexp = {
         urlParamsNames: []
     },
     player: {
-        regexp: /^\/player\/([^/]*)\/([^/]*)\/([^/]*)\/([^/]*)$/,
-        urlParamsNames: ['type', 'id', 'videoId', 'stream']
+        regexp: /^\/player\/([^/]*)\/([^/]*)\/([^/]*)\/([^/]*)\/([^/]*)$/,
+        urlParamsNames: ['transportUrl', 'type', 'id', 'videoId', 'stream']
     }
 };
 

From 87c7dc50d5b99702e6f3ab5b687925e49dc8c0c2 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 27 Dec 2019 22:33:49 +0200
Subject: [PATCH 19/21] usePlayer hook implemented

---
 src/routes/Player/usePlayer.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/routes/Player/usePlayer.js

diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
new file mode 100644
index 000000000..e18e59ea0
--- /dev/null
+++ b/src/routes/Player/usePlayer.js
@@ -0,0 +1,33 @@
+const React = require('react');
+const { useModelState } = require('stremio/common');
+
+const initPlayer = () => ({
+    selected: null,
+    meta_resource: null,
+    subtitles_resources: [],
+    next_video: null
+});
+
+const usePlayer = (urlParams) => {
+    const loadPlayerAction = React.useMemo(() => {
+        return {
+            action: 'Load',
+            args: {
+                load: 'Player',
+                args: {
+                    transport_url: urlParams.transportUrl,
+                    type_name: urlParams.type,
+                    id: urlParams.id,
+                    video_id: urlParams.videoId
+                }
+            }
+        };
+    }, [urlParams]);
+    return useModelState({
+        model: 'player',
+        action: loadPlayerAction,
+        init: initPlayer
+    });
+};
+
+module.exports = usePlayer;

From c94272e2e35b046ef928d810ed53aeab3a3df86c Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 28 Dec 2019 09:11:46 +0200
Subject: [PATCH 20/21] useSpreadState hook dropped

---
 src/common/index.js          |  2 --
 src/common/useSpreadState.js | 11 -----------
 2 files changed, 13 deletions(-)
 delete mode 100644 src/common/useSpreadState.js

diff --git a/src/common/index.js b/src/common/index.js
index 51b38763a..ac8270b8b 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -24,7 +24,6 @@ const useFullscreen = require('./useFullscreen');
 const useInLibrary = require('./useInLibrary');
 const useLiveRef = require('./useLiveRef');
 const useModelState = require('./useModelState');
-const useSpreadState = require('./useSpreadState');
 const useUser = require('./useUser');
 
 module.exports = {
@@ -54,6 +53,5 @@ module.exports = {
     useInLibrary,
     useLiveRef,
     useModelState,
-    useSpreadState,
     useUser
 };
diff --git a/src/common/useSpreadState.js b/src/common/useSpreadState.js
deleted file mode 100644
index 70455087e..000000000
--- a/src/common/useSpreadState.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const React = require('react');
-
-const useSpreadState = (initialState) => {
-    const [state, setState] = React.useReducer(
-        (state, nextState) => ({ ...state, ...nextState }),
-        initialState
-    );
-    return [state, setState];
-};
-
-module.exports = useSpreadState;

From 05b71ed27b46058486f306368a82c38f7d6da9e5 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Dec 2019 09:42:41 +0200
Subject: [PATCH 21/21] stream added to player load

---
 src/routes/Player/usePlayer.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index e18e59ea0..6a692b192 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -10,18 +10,26 @@ const initPlayer = () => ({
 
 const usePlayer = (urlParams) => {
     const loadPlayerAction = React.useMemo(() => {
-        return {
-            action: 'Load',
-            args: {
-                load: 'Player',
+        try {
+            const stream = JSON.parse(urlParams.stream);
+            return {
+                action: 'Load',
                 args: {
-                    transport_url: urlParams.transportUrl,
-                    type_name: urlParams.type,
-                    id: urlParams.id,
-                    video_id: urlParams.videoId
+                    load: 'Player',
+                    args: {
+                        transport_url: urlParams.transportUrl,
+                        type_name: urlParams.type,
+                        id: urlParams.id,
+                        video_id: urlParams.videoId,
+                        stream: stream
+                    }
                 }
-            }
-        };
+            };
+        } catch {
+            return {
+                action: 'Unload'
+            };
+        }
     }, [urlParams]);
     return useModelState({
         model: 'player',