From 11be6d8f8c2c70ac0a07b356f7a017e1073e44e7 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 6 Jul 2022 17:16:33 +0300
Subject: [PATCH 01/57] use async api of getState

---
 package-lock.json                             | 461 +++++++++++-------
 package.json                                  |   7 +-
 .../AddonDetailsModal/useAddonDetails.js      |  10 +-
 src/common/index.js                           |   3 +-
 src/common/useModelState.js                   |  72 ++-
 src/common/useProfile.js                      |  11 +-
 src/common/useStreamingServer.js              |  10 +-
 src/index.js                                  |   5 +-
 src/router/Modal/Modal.js                     |   2 +-
 src/routes/Addons/useInstalledAddons.js       |   7 +-
 src/routes/Addons/useRemoteAddons.js          |  11 +-
 src/routes/Board/useBoard.js                  |   7 +-
 .../Board/useContinueWatchingPreview.js       |   8 +-
 src/routes/Discover/useDiscover.js            |  33 +-
 src/routes/Library/useLibrary.js              |  13 +-
 src/routes/MetaDetails/useMetaDetails.js      |  10 +-
 src/routes/Player/usePlayer.js                |  13 +-
 src/routes/Search/useSearch.js                |  56 +--
 src/services/Core/CoreTransport.js            |   4 +-
 webpack.config.js                             |   4 +-
 20 files changed, 423 insertions(+), 324 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 14b0f2e61..40723c50b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,15 +25,16 @@
                 "lodash.isequal": "4.5.0",
                 "lodash.throttle": "4.1.1",
                 "prop-types": "15.7.2",
-                "react": "16.12.0",
-                "react-dom": "16.12.0",
-                "react-focus-lock": "2.2.1",
+                "react": "18.2.0",
+                "react-dom": "18.2.0",
+                "react-focus-lock": "2.9.1",
                 "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6"
             },
             "devDependencies": {
                 "@babel/core": "7.16.0",
                 "@babel/plugin-proposal-class-properties": "7.16.0",
                 "@babel/plugin-proposal-object-rest-spread": "7.16.0",
+                "@babel/plugin-transform-runtime": "7.16.0",
                 "@babel/preset-env": "7.16.0",
                 "@babel/preset-react": "7.16.0",
                 "babel-loader": "8.2.3",
@@ -283,12 +284,12 @@
             }
         },
         "node_modules/@babel/helper-module-imports": {
-            "version": "7.16.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
-            "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+            "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.16.0"
+                "@babel/types": "^7.18.6"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -326,9 +327,9 @@
             }
         },
         "node_modules/@babel/helper-plugin-utils": {
-            "version": "7.14.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-            "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz",
+            "integrity": "sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
@@ -400,9 +401,9 @@
             }
         },
         "node_modules/@babel/helper-validator-identifier": {
-            "version": "7.15.7",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
-            "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==",
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
+            "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
@@ -1445,6 +1446,26 @@
                 "@babel/core": "^7.0.0-0"
             }
         },
+        "node_modules/@babel/plugin-transform-runtime": {
+            "version": "7.16.0",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.16.0.tgz",
+            "integrity": "sha512-zlPf1/XFn5+vWdve3AAhf+Sxl+MVa5VlwTwWgnLx23u4GlatSRQJ3Eoo9vllf0a9il3woQsT4SK+5Z7c06h8ag==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.16.0",
+                "@babel/helper-plugin-utils": "^7.14.5",
+                "babel-plugin-polyfill-corejs2": "^0.2.3",
+                "babel-plugin-polyfill-corejs3": "^0.3.0",
+                "babel-plugin-polyfill-regenerator": "^0.2.3",
+                "semver": "^6.3.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
         "node_modules/@babel/plugin-transform-shorthand-properties": {
             "version": "7.16.0",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.0.tgz",
@@ -1722,12 +1743,12 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.16.0",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
-            "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
+            "version": "7.18.7",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.7.tgz",
+            "integrity": "sha512-QG3yxTcTIBoAcQmkCs+wAPYZhu7Dk9rXKacINfNbdJDNERTbLQbHGyVG8q/YGMPeCJRIhSY0+fTc5+xuh6WPSQ==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-validator-identifier": "^7.15.7",
+                "@babel/helper-validator-identifier": "^7.18.6",
                 "to-fast-properties": "^2.0.0"
             },
             "engines": {
@@ -3970,26 +3991,31 @@
             "dev": true
         },
         "node_modules/browserslist": {
-            "version": "4.17.5",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.5.tgz",
-            "integrity": "sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==",
+            "version": "4.21.1",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz",
+            "integrity": "sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==",
             "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/browserslist"
+                }
+            ],
             "dependencies": {
-                "caniuse-lite": "^1.0.30001271",
-                "electron-to-chromium": "^1.3.878",
-                "escalade": "^3.1.1",
-                "node-releases": "^2.0.1",
-                "picocolors": "^1.0.0"
+                "caniuse-lite": "^1.0.30001359",
+                "electron-to-chromium": "^1.4.172",
+                "node-releases": "^2.0.5",
+                "update-browserslist-db": "^1.0.4"
             },
             "bin": {
                 "browserslist": "cli.js"
             },
             "engines": {
                 "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/browserslist"
             }
         },
         "node_modules/bser": {
@@ -4105,14 +4131,20 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001274",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001274.tgz",
-            "integrity": "sha512-+Nkvv0fHyhISkiMIjnyjmf5YJcQ1IQHZN6U9TLUMroWR38FNwpsC51Gb68yueafX1V6ifOisInSgP9WJFS13ew==",
+            "version": "1.0.30001363",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz",
+            "integrity": "sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==",
             "dev": true,
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/browserslist"
-            }
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+                }
+            ]
         },
         "node_modules/chalk": {
             "version": "2.4.2",
@@ -4600,12 +4632,12 @@
             }
         },
         "node_modules/core-js-compat": {
-            "version": "3.19.0",
-            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.19.0.tgz",
-            "integrity": "sha512-R09rKZ56ccGBebjTLZHvzDxhz93YPT37gBm6qUhnwj3Kt7aCjjZWD1injyNbyeFHxNKfeZBSyds6O9n3MKq1sw==",
+            "version": "3.23.3",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.23.3.tgz",
+            "integrity": "sha512-WSzUs2h2vvmKsacLHNTdpyOC9k43AEhcGoFlVgCY4L7aw98oSBKtPL6vD0/TqZjRWRQYdDSLkzZIni4Crbbiqw==",
             "dev": true,
             "dependencies": {
-                "browserslist": "^4.17.5",
+                "browserslist": "^4.21.0",
                 "semver": "7.0.0"
             },
             "funding": {
@@ -5259,9 +5291,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.3.885",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.885.tgz",
-            "integrity": "sha512-JXKFJcVWrdHa09n4CNZYfYaK6EW5aAew7/wr3L1OnsD1L+JHL+RCtd7QgIsxUbFPeTwPlvnpqNNTOLkoefmtXg==",
+            "version": "1.4.180",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.180.tgz",
+            "integrity": "sha512-7at5ash3FD9U5gPa3/wPr6OdiZd/zBjvDZaaHBpcqFOFUhZiWnb7stkqk8xUFL9H9nk7Yok5vCCNK8wyC/+f8A==",
             "dev": true
         },
         "node_modules/emittery": {
@@ -6334,9 +6366,20 @@
             "dev": true
         },
         "node_modules/focus-lock": {
-            "version": "0.6.8",
-            "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.6.8.tgz",
-            "integrity": "sha512-vkHTluRCoq9FcsrldC0ulQHiyBYgVJB2CX53I8r0nTC6KnEij7Of0jpBspjt3/CuNb6fyoj3aOh9J2HgQUM0og=="
+            "version": "0.11.2",
+            "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.11.2.tgz",
+            "integrity": "sha512-pZ2bO++NWLHhiKkgP1bEXHhR1/OjVcSvlCJ98aNJDFeb7H5OOQaO+SKOZle6041O9rv2tmbrO4JzClAvDUHf0g==",
+            "dependencies": {
+                "tslib": "^2.0.3"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/focus-lock/node_modules/tslib": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+            "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
         },
         "node_modules/follow-redirects": {
             "version": "1.14.8",
@@ -10032,9 +10075,9 @@
             }
         },
         "node_modules/node-releases": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-            "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
+            "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==",
             "dev": true
         },
         "node_modules/normalize-path": {
@@ -11417,57 +11460,59 @@
             }
         },
         "node_modules/react": {
-            "version": "16.12.0",
-            "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz",
-            "integrity": "sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==",
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+            "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
             "dependencies": {
-                "loose-envify": "^1.1.0",
-                "object-assign": "^4.1.1",
-                "prop-types": "^15.6.2"
+                "loose-envify": "^1.1.0"
             },
             "engines": {
                 "node": ">=0.10.0"
             }
         },
         "node_modules/react-clientside-effect": {
-            "version": "1.2.5",
-            "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz",
-            "integrity": "sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==",
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
+            "integrity": "sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==",
             "dependencies": {
                 "@babel/runtime": "^7.12.13"
             },
             "peerDependencies": {
-                "react": "^15.3.0 || ^16.0.0 || ^17.0.0"
+                "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
             }
         },
         "node_modules/react-dom": {
-            "version": "16.12.0",
-            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz",
-            "integrity": "sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==",
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+            "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
             "dependencies": {
                 "loose-envify": "^1.1.0",
-                "object-assign": "^4.1.1",
-                "prop-types": "^15.6.2",
-                "scheduler": "^0.18.0"
+                "scheduler": "^0.23.0"
             },
             "peerDependencies": {
-                "react": "^16.0.0"
+                "react": "^18.2.0"
             }
         },
         "node_modules/react-focus-lock": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.2.1.tgz",
-            "integrity": "sha512-47g0xYcCTZccdzKRGufepY8oZ3W1Qg+2hn6u9SHZ0zUB6uz/4K4xJe7yYFNZ1qT6m+2JDm82F6QgKeBTbjW4PQ==",
+            "version": "2.9.1",
+            "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.1.tgz",
+            "integrity": "sha512-pSWOQrUmiKLkffPO6BpMXN7SNKXMsuOakl652IBuALAu1esk+IcpJyM+ALcYzPTTFz1rD0R54aB9A4HuP5t1Wg==",
             "dependencies": {
                 "@babel/runtime": "^7.0.0",
-                "focus-lock": "^0.6.6",
+                "focus-lock": "^0.11.2",
                 "prop-types": "^15.6.2",
-                "react-clientside-effect": "^1.2.2",
-                "use-callback-ref": "^1.2.1",
-                "use-sidecar": "^1.0.1"
+                "react-clientside-effect": "^1.2.6",
+                "use-callback-ref": "^1.3.0",
+                "use-sidecar": "^1.1.2"
             },
             "peerDependencies": {
-                "react": "^16.8.0"
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
             }
         },
         "node_modules/react-is": {
@@ -11801,12 +11846,11 @@
             }
         },
         "node_modules/scheduler": {
-            "version": "0.18.0",
-            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz",
-            "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==",
+            "version": "0.23.0",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+            "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
             "dependencies": {
-                "loose-envify": "^1.1.0",
-                "object-assign": "^4.1.1"
+                "loose-envify": "^1.1.0"
             }
         },
         "node_modules/schema-utils": {
@@ -12896,6 +12940,32 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/update-browserslist-db": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz",
+            "integrity": "sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/browserslist"
+                }
+            ],
+            "dependencies": {
+                "escalade": "^3.1.1",
+                "picocolors": "^1.0.0"
+            },
+            "bin": {
+                "browserslist-lint": "cli.js"
+            },
+            "peerDependencies": {
+                "browserslist": ">= 4.21.0"
+            }
+        },
         "node_modules/uri-js": {
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -12924,15 +12994,18 @@
             }
         },
         "node_modules/use-callback-ref": {
-            "version": "1.2.5",
-            "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-            "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+            "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
             "engines": {
-                "node": ">=8.5.0"
+                "node": ">=10"
             },
             "peerDependencies": {
-                "@types/react": "^16.8.0 || ^17.0.0",
-                "react": "^16.8.0 || ^17.0.0"
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
             },
             "peerDependenciesMeta": {
                 "@types/react": {
@@ -12940,21 +13013,37 @@
                 }
             }
         },
+        "node_modules/use-callback-ref/node_modules/tslib": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+            "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        },
         "node_modules/use-sidecar": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.5.tgz",
-            "integrity": "sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==",
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+            "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
             "dependencies": {
                 "detect-node-es": "^1.1.0",
-                "tslib": "^1.9.3"
+                "tslib": "^2.0.0"
             },
             "engines": {
-                "node": ">=8.5.0"
+                "node": ">=10"
             },
             "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0"
+                "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
             }
         },
+        "node_modules/use-sidecar/node_modules/tslib": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+            "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -14023,12 +14112,12 @@
             }
         },
         "@babel/helper-module-imports": {
-            "version": "7.16.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
-            "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+            "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.16.0"
+                "@babel/types": "^7.18.6"
             }
         },
         "@babel/helper-module-transforms": {
@@ -14057,9 +14146,9 @@
             }
         },
         "@babel/helper-plugin-utils": {
-            "version": "7.14.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-            "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz",
+            "integrity": "sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==",
             "dev": true
         },
         "@babel/helper-remap-async-to-generator": {
@@ -14113,9 +14202,9 @@
             }
         },
         "@babel/helper-validator-identifier": {
-            "version": "7.15.7",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
-            "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==",
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
+            "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==",
             "dev": true
         },
         "@babel/helper-validator-option": {
@@ -14792,6 +14881,20 @@
                 "@babel/helper-plugin-utils": "^7.14.5"
             }
         },
+        "@babel/plugin-transform-runtime": {
+            "version": "7.16.0",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.16.0.tgz",
+            "integrity": "sha512-zlPf1/XFn5+vWdve3AAhf+Sxl+MVa5VlwTwWgnLx23u4GlatSRQJ3Eoo9vllf0a9il3woQsT4SK+5Z7c06h8ag==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-module-imports": "^7.16.0",
+                "@babel/helper-plugin-utils": "^7.14.5",
+                "babel-plugin-polyfill-corejs2": "^0.2.3",
+                "babel-plugin-polyfill-corejs3": "^0.3.0",
+                "babel-plugin-polyfill-regenerator": "^0.2.3",
+                "semver": "^6.3.0"
+            }
+        },
         "@babel/plugin-transform-shorthand-properties": {
             "version": "7.16.0",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.0.tgz",
@@ -15003,12 +15106,12 @@
             }
         },
         "@babel/types": {
-            "version": "7.16.0",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
-            "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
+            "version": "7.18.7",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.7.tgz",
+            "integrity": "sha512-QG3yxTcTIBoAcQmkCs+wAPYZhu7Dk9rXKacINfNbdJDNERTbLQbHGyVG8q/YGMPeCJRIhSY0+fTc5+xuh6WPSQ==",
             "dev": true,
             "requires": {
-                "@babel/helper-validator-identifier": "^7.15.7",
+                "@babel/helper-validator-identifier": "^7.18.6",
                 "to-fast-properties": "^2.0.0"
             }
         },
@@ -16829,16 +16932,15 @@
             "dev": true
         },
         "browserslist": {
-            "version": "4.17.5",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.5.tgz",
-            "integrity": "sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==",
+            "version": "4.21.1",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz",
+            "integrity": "sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==",
             "dev": true,
             "requires": {
-                "caniuse-lite": "^1.0.30001271",
-                "electron-to-chromium": "^1.3.878",
-                "escalade": "^3.1.1",
-                "node-releases": "^2.0.1",
-                "picocolors": "^1.0.0"
+                "caniuse-lite": "^1.0.30001359",
+                "electron-to-chromium": "^1.4.172",
+                "node-releases": "^2.0.5",
+                "update-browserslist-db": "^1.0.4"
             }
         },
         "bser": {
@@ -16930,9 +17032,9 @@
             }
         },
         "caniuse-lite": {
-            "version": "1.0.30001274",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001274.tgz",
-            "integrity": "sha512-+Nkvv0fHyhISkiMIjnyjmf5YJcQ1IQHZN6U9TLUMroWR38FNwpsC51Gb68yueafX1V6ifOisInSgP9WJFS13ew==",
+            "version": "1.0.30001363",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz",
+            "integrity": "sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==",
             "dev": true
         },
         "chalk": {
@@ -17312,12 +17414,12 @@
             }
         },
         "core-js-compat": {
-            "version": "3.19.0",
-            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.19.0.tgz",
-            "integrity": "sha512-R09rKZ56ccGBebjTLZHvzDxhz93YPT37gBm6qUhnwj3Kt7aCjjZWD1injyNbyeFHxNKfeZBSyds6O9n3MKq1sw==",
+            "version": "3.23.3",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.23.3.tgz",
+            "integrity": "sha512-WSzUs2h2vvmKsacLHNTdpyOC9k43AEhcGoFlVgCY4L7aw98oSBKtPL6vD0/TqZjRWRQYdDSLkzZIni4Crbbiqw==",
             "dev": true,
             "requires": {
-                "browserslist": "^4.17.5",
+                "browserslist": "^4.21.0",
                 "semver": "7.0.0"
             },
             "dependencies": {
@@ -17820,9 +17922,9 @@
             "dev": true
         },
         "electron-to-chromium": {
-            "version": "1.3.885",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.885.tgz",
-            "integrity": "sha512-JXKFJcVWrdHa09n4CNZYfYaK6EW5aAew7/wr3L1OnsD1L+JHL+RCtd7QgIsxUbFPeTwPlvnpqNNTOLkoefmtXg==",
+            "version": "1.4.180",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.180.tgz",
+            "integrity": "sha512-7at5ash3FD9U5gPa3/wPr6OdiZd/zBjvDZaaHBpcqFOFUhZiWnb7stkqk8xUFL9H9nk7Yok5vCCNK8wyC/+f8A==",
             "dev": true
         },
         "emittery": {
@@ -18646,9 +18748,19 @@
             "dev": true
         },
         "focus-lock": {
-            "version": "0.6.8",
-            "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.6.8.tgz",
-            "integrity": "sha512-vkHTluRCoq9FcsrldC0ulQHiyBYgVJB2CX53I8r0nTC6KnEij7Of0jpBspjt3/CuNb6fyoj3aOh9J2HgQUM0og=="
+            "version": "0.11.2",
+            "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.11.2.tgz",
+            "integrity": "sha512-pZ2bO++NWLHhiKkgP1bEXHhR1/OjVcSvlCJ98aNJDFeb7H5OOQaO+SKOZle6041O9rv2tmbrO4JzClAvDUHf0g==",
+            "requires": {
+                "tslib": "^2.0.3"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.4.0",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+                    "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+                }
+            }
         },
         "follow-redirects": {
             "version": "1.14.8",
@@ -21372,9 +21484,9 @@
             "dev": true
         },
         "node-releases": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-            "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
+            "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==",
             "dev": true
         },
         "normalize-path": {
@@ -22340,45 +22452,41 @@
             }
         },
         "react": {
-            "version": "16.12.0",
-            "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz",
-            "integrity": "sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==",
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+            "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
             "requires": {
-                "loose-envify": "^1.1.0",
-                "object-assign": "^4.1.1",
-                "prop-types": "^15.6.2"
+                "loose-envify": "^1.1.0"
             }
         },
         "react-clientside-effect": {
-            "version": "1.2.5",
-            "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz",
-            "integrity": "sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==",
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
+            "integrity": "sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==",
             "requires": {
                 "@babel/runtime": "^7.12.13"
             }
         },
         "react-dom": {
-            "version": "16.12.0",
-            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz",
-            "integrity": "sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==",
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+            "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
             "requires": {
                 "loose-envify": "^1.1.0",
-                "object-assign": "^4.1.1",
-                "prop-types": "^15.6.2",
-                "scheduler": "^0.18.0"
+                "scheduler": "^0.23.0"
             }
         },
         "react-focus-lock": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.2.1.tgz",
-            "integrity": "sha512-47g0xYcCTZccdzKRGufepY8oZ3W1Qg+2hn6u9SHZ0zUB6uz/4K4xJe7yYFNZ1qT6m+2JDm82F6QgKeBTbjW4PQ==",
+            "version": "2.9.1",
+            "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.1.tgz",
+            "integrity": "sha512-pSWOQrUmiKLkffPO6BpMXN7SNKXMsuOakl652IBuALAu1esk+IcpJyM+ALcYzPTTFz1rD0R54aB9A4HuP5t1Wg==",
             "requires": {
                 "@babel/runtime": "^7.0.0",
-                "focus-lock": "^0.6.6",
+                "focus-lock": "^0.11.2",
                 "prop-types": "^15.6.2",
-                "react-clientside-effect": "^1.2.2",
-                "use-callback-ref": "^1.2.1",
-                "use-sidecar": "^1.0.1"
+                "react-clientside-effect": "^1.2.6",
+                "use-callback-ref": "^1.3.0",
+                "use-sidecar": "^1.1.2"
             }
         },
         "react-is": {
@@ -22632,12 +22740,11 @@
             }
         },
         "scheduler": {
-            "version": "0.18.0",
-            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz",
-            "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==",
+            "version": "0.23.0",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+            "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
             "requires": {
-                "loose-envify": "^1.1.0",
-                "object-assign": "^4.1.1"
+                "loose-envify": "^1.1.0"
             }
         },
         "schema-utils": {
@@ -23497,6 +23604,16 @@
             "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
             "dev": true
         },
+        "update-browserslist-db": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz",
+            "integrity": "sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==",
+            "dev": true,
+            "requires": {
+                "escalade": "^3.1.1",
+                "picocolors": "^1.0.0"
+            }
+        },
         "uri-js": {
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -23524,18 +23641,34 @@
             }
         },
         "use-callback-ref": {
-            "version": "1.2.5",
-            "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-            "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
-            "requires": {}
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+            "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+            "requires": {
+                "tslib": "^2.0.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.4.0",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+                    "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+                }
+            }
         },
         "use-sidecar": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.5.tgz",
-            "integrity": "sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==",
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+            "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
             "requires": {
                 "detect-node-es": "^1.1.0",
-                "tslib": "^1.9.3"
+                "tslib": "^2.0.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.4.0",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+                    "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+                }
             }
         },
         "util-deprecate": {
diff --git a/package.json b/package.json
index 73a234313..7d16b78ef 100755
--- a/package.json
+++ b/package.json
@@ -28,15 +28,16 @@
         "lodash.isequal": "4.5.0",
         "lodash.throttle": "4.1.1",
         "prop-types": "15.7.2",
-        "react": "16.12.0",
-        "react-dom": "16.12.0",
-        "react-focus-lock": "2.2.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-focus-lock": "2.9.1",
         "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6"
     },
     "devDependencies": {
         "@babel/core": "7.16.0",
         "@babel/plugin-proposal-class-properties": "7.16.0",
         "@babel/plugin-proposal-object-rest-spread": "7.16.0",
+        "@babel/plugin-transform-runtime": "7.16.0",
         "@babel/preset-env": "7.16.0",
         "@babel/preset-react": "7.16.0",
         "babel-loader": "8.2.3",
diff --git a/src/common/AddonDetailsModal/useAddonDetails.js b/src/common/AddonDetailsModal/useAddonDetails.js
index b0bf251d3..91ded0f77 100644
--- a/src/common/AddonDetailsModal/useAddonDetails.js
+++ b/src/common/AddonDetailsModal/useAddonDetails.js
@@ -1,13 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 const React = require('react');
-const useModelState = require('stremio/common/useModelState');
-
-const init = () => ({
-    selected: null,
-    localAddon: null,
-    remoteAddon: null
-});
+const { useModelState } = require('stremio/common/useModelState');
 
 const useAddonDetails = (transportUrl) => {
     const action = React.useMemo(() => {
@@ -27,7 +21,7 @@ const useAddonDetails = (transportUrl) => {
             };
         }
     }, [transportUrl]);
-    return useModelState({ model: 'addon_details', action, init });
+    return useModelState({ model: 'addon_details', action });
 };
 
 module.exports = useAddonDetails;
diff --git a/src/common/index.js b/src/common/index.js
index 1ee08108c..70069d78b 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -35,7 +35,7 @@ const useDeepEqualMemo = require('./useDeepEqualMemo');
 const useDeepEqualState = require('./useDeepEqualState');
 const useFullscreen = require('./useFullscreen');
 const useLiveRef = require('./useLiveRef');
-const useModelState = require('./useModelState');
+const { withGetInitState, useModelState } = require('./useModelState');
 const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
@@ -78,6 +78,7 @@ module.exports = {
     useDeepEqualState,
     useFullscreen,
     useLiveRef,
+    withGetInitState,
     useModelState,
     useOnScrollToBottom,
     useProfile,
diff --git a/src/common/useModelState.js b/src/common/useModelState.js
index 75e2ab634..5f1339345 100644
--- a/src/common/useModelState.js
+++ b/src/common/useModelState.js
@@ -6,13 +6,65 @@ const isEqual = require('lodash.isequal');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 
-const useModelState = ({ init, action, ...args }) => {
+const GetInitStateContext = React.createContext();
+
+GetInitStateContext.displayName = 'GetInitStateContext';
+
+function wrapPromise(promise) {
+    let status = 'pending';
+    let result;
+    const suspender = promise.then(
+        (resp) => {
+            status = 'success';
+            result = resp;
+        },
+        (error) => {
+            status = 'error';
+            result = error;
+        }
+    );
+    return {
+        read() {
+            if (status === 'pending') {
+                throw suspender;
+            } else if (status === 'error') {
+                throw result;
+            } else if (status === 'success') {
+                return result;
+            }
+        }
+    };
+}
+
+const withGetInitState = (Component) => {
+    return function WithGetInitState(props) {
+        const { core } = useServices();
+        const initStateRef = React.useRef({});
+        const getInitState = React.useCallback((model) => {
+            if (!initStateRef.current[model]) {
+                initStateRef.current[model] = wrapPromise(core.transport.getState(model));
+            }
+
+            return initStateRef.current[model].read();
+        }, []);
+        return (
+            <React.Suspense>
+                <GetInitStateContext.Provider value={getInitState}>
+                    <Component {...props} />
+                </GetInitStateContext.Provider>
+            </React.Suspense>
+        );
+    };
+};
+
+const useModelState = ({ action, ...args }) => {
     const { core } = useServices();
     const routeFocused = useRouteFocused();
     const mountedRef = React.useRef(false);
     const [model, timeout, map] = React.useMemo(() => {
         return [args.model, args.timeout, args.map];
     }, []);
+    const getInitState = React.useContext(GetInitStateContext);
     const [state, setState] = React.useReducer(
         (prevState, nextState) => {
             return Object.keys(prevState).reduce((result, key) => {
@@ -22,10 +74,11 @@ const useModelState = ({ init, action, ...args }) => {
         },
         undefined,
         () => {
-            return typeof init === 'function' ?
-                init()
-                :
-                init;
+            if (typeof map === 'function') {
+                return map(getInitState(model));
+            } else {
+                return getInitState(model);
+            }
         }
     );
     React.useLayoutEffect(() => {
@@ -39,8 +92,8 @@ const useModelState = ({ init, action, ...args }) => {
         };
     }, []);
     React.useLayoutEffect(() => {
-        const onNewStateThrottled = throttle(() => {
-            const state = core.transport.getState(model);
+        const onNewStateThrottled = throttle(async () => {
+            const state = await core.transport.getState(model);
             if (typeof map === 'function') {
                 setState(map(state));
             } else {
@@ -64,4 +117,7 @@ const useModelState = ({ init, action, ...args }) => {
     return state;
 };
 
-module.exports = useModelState;
+module.exports = {
+    withGetInitState,
+    useModelState
+};
diff --git a/src/common/useProfile.js b/src/common/useProfile.js
index cbd60b36c..d67b17838 100644
--- a/src/common/useProfile.js
+++ b/src/common/useProfile.js
@@ -1,8 +1,6 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
-const React = require('react');
-const { useServices } = require('stremio/services');
-const useModelState = require('stremio/common/useModelState');
+const { useModelState } = require('stremio/common/useModelState');
 
 const map = (ctx) => ({
     ...ctx.profile,
@@ -18,12 +16,7 @@ const map = (ctx) => ({
 });
 
 const useProfile = () => {
-    const { core } = useServices();
-    const init = React.useCallback(() => {
-        const ctx = core.transport.getState('ctx');
-        return map(ctx);
-    }, []);
-    return useModelState({ model: 'ctx', init, map });
+    return useModelState({ model: 'ctx', map });
 };
 
 module.exports = useProfile;
diff --git a/src/common/useStreamingServer.js b/src/common/useStreamingServer.js
index a8cf71596..354261d25 100644
--- a/src/common/useStreamingServer.js
+++ b/src/common/useStreamingServer.js
@@ -1,15 +1,9 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
-const React = require('react');
-const { useServices } = require('stremio/services');
-const useModelState = require('stremio/common/useModelState');
+const { useModelState } = require('stremio/common/useModelState');
 
 const useStreamingServer = () => {
-    const { core } = useServices();
-    const init = React.useCallback(() => {
-        return core.transport.getState('streaming_server');
-    }, []);
-    return useModelState({ model: 'streaming_server', init });
+    return useModelState({ model: 'streaming_server' });
 };
 
 module.exports = useStreamingServer;
diff --git a/src/index.js b/src/index.js
index c7af67f8b..d716b0b2e 100755
--- a/src/index.js
+++ b/src/index.js
@@ -12,7 +12,8 @@ if (browser?.platform?.type === 'desktop') {
 }
 
 const React = require('react');
-const ReactDOM = require('react-dom');
+const ReactDOM = require('react-dom/client');
 const App = require('./App');
 
-ReactDOM.render(<App />, document.getElementById('app'));
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(<App />);
diff --git a/src/router/Modal/Modal.js b/src/router/Modal/Modal.js
index ed76f2e71..2af54244a 100644
--- a/src/router/Modal/Modal.js
+++ b/src/router/Modal/Modal.js
@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 const React = require('react');
-const ReactDOM = require('react-dom');
+const ReactDOM = require('react-dom/client');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const FocusLock = require('react-focus-lock').default;
diff --git a/src/routes/Addons/useInstalledAddons.js b/src/routes/Addons/useInstalledAddons.js
index 8be193982..fc649c772 100644
--- a/src/routes/Addons/useInstalledAddons.js
+++ b/src/routes/Addons/useInstalledAddons.js
@@ -1,14 +1,9 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 const React = require('react');
-const { useServices } = require('stremio/services');
 const { useModelState } = require('stremio/common');
 
 const useInstalledAddons = (urlParams) => {
-    const { core } = useServices();
-    const init = React.useMemo(() => {
-        return core.transport.getState('installed_addons');
-    }, []);
     const action = React.useMemo(() => {
         if (typeof urlParams.transportUrl !== 'string' && typeof urlParams.catalogId !== 'string') {
             return {
@@ -28,7 +23,7 @@ const useInstalledAddons = (urlParams) => {
             };
         }
     }, [urlParams]);
-    return useModelState({ model: 'installed_addons', action, init });
+    return useModelState({ model: 'installed_addons', action });
 };
 
 module.exports = useInstalledAddons;
diff --git a/src/routes/Addons/useRemoteAddons.js b/src/routes/Addons/useRemoteAddons.js
index f6bc023d1..c816072da 100644
--- a/src/routes/Addons/useRemoteAddons.js
+++ b/src/routes/Addons/useRemoteAddons.js
@@ -3,15 +3,6 @@
 const React = require('react');
 const { useModelState } = require('stremio/common');
 
-const init = () => ({
-    selected: null,
-    selectable: {
-        catalogs: [],
-        types: []
-    },
-    catalog: null,
-});
-
 const useRemoteAddons = (urlParams) => {
     const action = React.useMemo(() => {
         if (typeof urlParams.type === 'string' && typeof urlParams.transportUrl === 'string' && typeof urlParams.catalogId === 'string') {
@@ -38,7 +29,7 @@ const useRemoteAddons = (urlParams) => {
             };
         }
     }, [urlParams]);
-    return useModelState({ model: 'remote_addons', action, init });
+    return useModelState({ model: 'remote_addons', action });
 };
 
 module.exports = useRemoteAddons;
diff --git a/src/routes/Board/useBoard.js b/src/routes/Board/useBoard.js
index 1233b9a10..6e3540ab6 100644
--- a/src/routes/Board/useBoard.js
+++ b/src/routes/Board/useBoard.js
@@ -4,11 +4,6 @@ const React = require('react');
 const { useServices } = require('stremio/services');
 const { useModelState } = require('stremio/common');
 
-const init = () => ({
-    selected: null,
-    catalogs: []
-});
-
 const useBoard = () => {
     const { core } = useServices();
     const action = React.useMemo(() => ({
@@ -27,7 +22,7 @@ const useBoard = () => {
             }
         }, 'board');
     }, []);
-    const board = useModelState({ model: 'board', timeout: 1500, action, init });
+    const board = useModelState({ model: 'board', timeout: 1500, action });
     return [board, loadRange];
 };
 
diff --git a/src/routes/Board/useContinueWatchingPreview.js b/src/routes/Board/useContinueWatchingPreview.js
index a505ef737..f7f623587 100644
--- a/src/routes/Board/useContinueWatchingPreview.js
+++ b/src/routes/Board/useContinueWatchingPreview.js
@@ -1,15 +1,9 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
-const React = require('react');
-const { useServices } = require('stremio/services');
 const { useModelState } = require('stremio/common');
 
 const useContinueWatchingPreview = () => {
-    const { core } = useServices();
-    const init = React.useMemo(() => {
-        return core.transport.getState('continue_watching_preview');
-    }, []);
-    return useModelState({ model: 'continue_watching_preview', init });
+    return useModelState({ model: 'continue_watching_preview' });
 };
 
 module.exports = useContinueWatchingPreview;
diff --git a/src/routes/Discover/useDiscover.js b/src/routes/Discover/useDiscover.js
index 895b98910..7ba62c576 100644
--- a/src/routes/Discover/useDiscover.js
+++ b/src/routes/Discover/useDiscover.js
@@ -5,18 +5,6 @@ const UrlUtils = require('url');
 const { useServices } = require('stremio/services');
 const { useModelState } = require('stremio/common');
 
-const init = () => ({
-    selected: null,
-    selectable: {
-        types: [],
-        catalogs: [],
-        extra: [],
-        nextPage: false
-    },
-    catalog: null,
-    defaultRequest: null,
-});
-
 const map = (discover) => ({
     ...discover,
     catalog: discover.catalog !== null && discover.catalog.content.type === 'Ready' ?
@@ -67,25 +55,20 @@ const useDiscover = (urlParams, queryParams) => {
                 };
             }
         } else {
-            const discover = core.transport.getState('discover');
-            if (discover.defaultRequest !== null) {
-                return {
-                    action: 'Load',
-                    args: {
-                        model: 'CatalogWithFilters',
-                        args: {
-                            request: discover.defaultRequest
-                        }
-                    }
-                };
-            }
+            return {
+                action: 'Load',
+                args: {
+                    model: 'CatalogWithFilters',
+                    args: null
+                }
+            };
         }
 
         return {
             action: 'Unload'
         };
     }, [urlParams, queryParams]);
-    const discover = useModelState({ model: 'discover', action, map, init });
+    const discover = useModelState({ model: 'discover', action, map });
     return [discover, loadNextPage];
 };
 
diff --git a/src/routes/Library/useLibrary.js b/src/routes/Library/useLibrary.js
index cff44771d..d882d889b 100644
--- a/src/routes/Library/useLibrary.js
+++ b/src/routes/Library/useLibrary.js
@@ -3,17 +3,6 @@
 const React = require('react');
 const { useModelState } = require('stremio/common');
 
-const init = () => ({
-    selected: null,
-    selectable: {
-        types: [],
-        sorts: [],
-        prevPage: null,
-        nextPage: null
-    },
-    catalog: []
-});
-
 const useLibrary = (model, urlParams, queryParams) => {
     const action = React.useMemo(() => ({
         action: 'Load',
@@ -28,7 +17,7 @@ const useLibrary = (model, urlParams, queryParams) => {
             }
         }
     }), [urlParams, queryParams]);
-    return useModelState({ model, action, init });
+    return useModelState({ model, action });
 };
 
 module.exports = useLibrary;
diff --git a/src/routes/MetaDetails/useMetaDetails.js b/src/routes/MetaDetails/useMetaDetails.js
index fb9f270c5..f2c10d10f 100644
--- a/src/routes/MetaDetails/useMetaDetails.js
+++ b/src/routes/MetaDetails/useMetaDetails.js
@@ -3,14 +3,6 @@
 const React = require('react');
 const { useModelState } = require('stremio/common');
 
-const init = () => ({
-    selected: null,
-    metaItem: null,
-    streams: [],
-    metaExtensions: [],
-    title: null
-});
-
 const map = (metaDetails) => ({
     ...metaDetails,
     metaItem: metaDetails.metaItem !== null && metaDetails.metaItem.content.type === 'Ready' ?
@@ -74,7 +66,7 @@ const useMetaDetails = (urlParams) => {
             };
         }
     }, [urlParams]);
-    return useModelState({ model: 'meta_details', action, map, init });
+    return useModelState({ model: 'meta_details', action, map });
 };
 
 module.exports = useMetaDetails;
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 0e728b51f..2e3a12af4 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -4,17 +4,6 @@ const React = require('react');
 const { useServices } = require('stremio/services');
 const { useModelState } = require('stremio/common');
 
-const init = () => ({
-    selected: null,
-    metaItem: null,
-    subtitles: [],
-    nextVideo: null,
-    seriesInfo: null,
-    libraryItem: null,
-    title: null,
-    addon: null,
-});
-
 const map = (player) => ({
     ...player,
     metaItem: player.metaItem !== null && player.metaItem.type === 'Ready' ?
@@ -113,7 +102,7 @@ const usePlayer = (urlParams) => {
             }
         }, 'player');
     }, []);
-    const player = useModelState({ model: 'player', action, init, map });
+    const player = useModelState({ model: 'player', action, map });
     return [player, updateLibraryItemState, pushToLibrary];
 };
 
diff --git a/src/routes/Search/useSearch.js b/src/routes/Search/useSearch.js
index d1ff8e79c..40a46fb76 100644
--- a/src/routes/Search/useSearch.js
+++ b/src/routes/Search/useSearch.js
@@ -4,37 +4,33 @@ const React = require('react');
 const { useModelState } = require('stremio/common');
 const { useServices } = require('stremio/services');
 
-const init = () => ({
-    selected: null,
-    catalogs: []
-});
-
 const useSearch = (queryParams) => {
     const { core } = useServices();
-    React.useEffect(() => {
-        let timerId = setTimeout(emitSearchEvent, 500);
-        function emitSearchEvent() {
-            timerId = null;
-            const state = core.transport.getState('search');
-            if (state.selected !== null) {
-                const [, query] = state.selected.extra.find(([name]) => name === 'search');
-                const responses = state.catalogs.filter((catalog) => catalog.content?.type === 'Ready');
-                core.transport.analytics({
-                    event: 'Search',
-                    args: {
-                        query,
-                        responsesCount: responses.length
-                    }
-                });
-            }
-        }
-        return () => {
-            if (timerId !== null) {
-                clearTimeout(timerId);
-                emitSearchEvent();
-            }
-        };
-    }, [queryParams.get('search')]);
+    // TODO: refactor this to be in stremio-core-web
+    // React.useEffect(() => {
+    //     let timerId = setTimeout(emitSearchEvent, 500);
+    //     function emitSearchEvent() {
+    //         timerId = null;
+    //         const state = core.transport.getState('search');
+    //         if (state.selected !== null) {
+    //             const [, query] = state.selected.extra.find(([name]) => name === 'search');
+    //             const responses = state.catalogs.filter((catalog) => catalog.content?.type === 'Ready');
+    //             core.transport.analytics({
+    //                 event: 'Search',
+    //                 args: {
+    //                     query,
+    //                     responsesCount: responses.length
+    //                 }
+    //             });
+    //         }
+    //     }
+    //     return () => {
+    //         if (timerId !== null) {
+    //             clearTimeout(timerId);
+    //             emitSearchEvent();
+    //         }
+    //     };
+    // }, [queryParams.get('search')]);
     const action = React.useMemo(() => {
         if (queryParams.has('search') && queryParams.get('search').length > 0) {
             return {
@@ -63,7 +59,7 @@ const useSearch = (queryParams) => {
             }
         }, 'search');
     }, []);
-    const search = useModelState({ model: 'search', action, init });
+    const search = useModelState({ model: 'search', action });
     return [search, loadRange];
 };
 
diff --git a/src/services/Core/CoreTransport.js b/src/services/Core/CoreTransport.js
index 95a8cff34..488b730f1 100644
--- a/src/services/Core/CoreTransport.js
+++ b/src/services/Core/CoreTransport.js
@@ -34,8 +34,8 @@ function CoreTransport() {
     this.removeAllListeners = function() {
         events.removeAllListeners();
     };
-    this.getState = function(field) {
-        return get_state(field);
+    this.getState = async function(field) {
+        return Promise.resolve(get_state(field));
     };
     this.getDebugState = function() {
         return get_debug_state();
diff --git a/webpack.config.js b/webpack.config.js
index 7fd65fcfa..f9e53bfb8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -28,13 +28,15 @@ module.exports = (env, argv) => ({
                 use: {
                     loader: 'babel-loader',
                     options: {
+                        sourceType: 'unambiguous',
                         presets: [
                             '@babel/preset-env',
                             '@babel/preset-react'
                         ],
                         plugins: [
                             '@babel/plugin-proposal-class-properties',
-                            '@babel/plugin-proposal-object-rest-spread'
+                            '@babel/plugin-proposal-object-rest-spread',
+                            '@babel/plugin-transform-runtime'
                         ]
                     }
                 }

From 5889b422c3ff1a68ae84330ef5fe5b1b9048f584 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 7 Jul 2022 18:41:57 +0300
Subject: [PATCH 02/57] filter models that actually updated

---
 src/common/useModelState.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/common/useModelState.js b/src/common/useModelState.js
index 5f1339345..36d2f9a51 100644
--- a/src/common/useModelState.js
+++ b/src/common/useModelState.js
@@ -81,18 +81,22 @@ const useModelState = ({ action, ...args }) => {
             }
         }
     );
-    React.useLayoutEffect(() => {
+    React.useInsertionEffect(() => {
         if (action) {
             core.transport.dispatch(action, model);
         }
     }, [action]);
-    React.useLayoutEffect(() => {
+    React.useInsertionEffect(() => {
         return () => {
             core.transport.dispatch({ action: 'Unload' }, model);
         };
     }, []);
-    React.useLayoutEffect(() => {
-        const onNewStateThrottled = throttle(async () => {
+    React.useInsertionEffect(() => {
+        const onNewStateThrottled = throttle(async (models) => {
+            if (models.indexOf(model) === -1) {
+                return;
+            }
+
             const state = await core.transport.getState(model);
             if (typeof map === 'function') {
                 setState(map(state));
@@ -111,7 +115,7 @@ const useModelState = ({ action, ...args }) => {
             core.transport.off('NewState', onNewStateThrottled);
         };
     }, [routeFocused]);
-    React.useLayoutEffect(() => {
+    React.useInsertionEffect(() => {
         mountedRef.current = true;
     }, []);
     return state;

From 94c0016caddb300fc7fccf2cb4cbd99e161d0d4e Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 7 Jul 2022 18:42:21 +0300
Subject: [PATCH 03/57] added fallback

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

diff --git a/src/common/useModelState.js b/src/common/useModelState.js
index 36d2f9a51..c552e7455 100644
--- a/src/common/useModelState.js
+++ b/src/common/useModelState.js
@@ -36,7 +36,7 @@ function wrapPromise(promise) {
     };
 }
 
-const withGetInitState = (Component) => {
+const withGetInitState = (Component, Fallback = () => { }) => {
     return function WithGetInitState(props) {
         const { core } = useServices();
         const initStateRef = React.useRef({});
@@ -48,7 +48,7 @@ const withGetInitState = (Component) => {
             return initStateRef.current[model].read();
         }, []);
         return (
-            <React.Suspense>
+            <React.Suspense fallback={<Fallback {...props} />}>
                 <GetInitStateContext.Provider value={getInitState}>
                     <Component {...props} />
                 </GetInitStateContext.Provider>

From 6b20949f68e8ff4a6d024d58c3a56de1f4430b92 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 7 Jul 2022 22:38:11 +0300
Subject: [PATCH 04/57] onNewState changes the state based on which model
 actually changes

---
 src/common/useModelState.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/common/useModelState.js b/src/common/useModelState.js
index c552e7455..2b9584874 100644
--- a/src/common/useModelState.js
+++ b/src/common/useModelState.js
@@ -92,7 +92,7 @@ const useModelState = ({ action, ...args }) => {
         };
     }, []);
     React.useInsertionEffect(() => {
-        const onNewStateThrottled = throttle(async (models) => {
+        const onNewState = async (models) => {
             if (models.indexOf(model) === -1) {
                 return;
             }
@@ -103,11 +103,12 @@ const useModelState = ({ action, ...args }) => {
             } else {
                 setState(state);
             }
-        }, timeout);
+        };
+        const onNewStateThrottled = throttle(onNewState, timeout);
         if (routeFocused) {
             core.transport.on('NewState', onNewStateThrottled);
             if (mountedRef.current) {
-                onNewStateThrottled.call();
+                onNewState([model]);
             }
         }
         return () => {

From e4486ea8e016067bd2be4f8aa8f06637ad41f635 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 7 Jul 2022 23:00:40 +0300
Subject: [PATCH 05/57] DelayedRenderer component implemented

---
 src/common/DelayedRenderer/DelayedRenderer.js | 21 +++++++++++++++++++
 src/common/DelayedRenderer/index.js           |  3 +++
 src/common/index.js                           |  2 ++
 3 files changed, 26 insertions(+)
 create mode 100644 src/common/DelayedRenderer/DelayedRenderer.js
 create mode 100644 src/common/DelayedRenderer/index.js

diff --git a/src/common/DelayedRenderer/DelayedRenderer.js b/src/common/DelayedRenderer/DelayedRenderer.js
new file mode 100644
index 000000000..05cfa1d67
--- /dev/null
+++ b/src/common/DelayedRenderer/DelayedRenderer.js
@@ -0,0 +1,21 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+
+const DelayedRenderer = ({ children, delay }) => {
+    const [render, setRender] = React.useState(false);
+    React.useEffect(() => {
+        const timeout = setTimeout(() => {
+            setRender(true);
+        }, delay);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, []);
+    return render ? children : null;
+};
+
+DelayedRenderer.propTypes = {
+    children: PropTypes.node
+};
+
+module.exports = DelayedRenderer;
diff --git a/src/common/DelayedRenderer/index.js b/src/common/DelayedRenderer/index.js
new file mode 100644
index 000000000..ccc264048
--- /dev/null
+++ b/src/common/DelayedRenderer/index.js
@@ -0,0 +1,3 @@
+const DelayedRenderer = require('./DelayedRenderer');
+
+module.exports = DelayedRenderer;
diff --git a/src/common/index.js b/src/common/index.js
index 70069d78b..4a6924e45 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -4,6 +4,7 @@ const AddonDetailsModal = require('./AddonDetailsModal');
 const Button = require('./Button');
 const Checkbox = require('./Checkbox');
 const ColorInput = require('./ColorInput');
+const DelayedRenderer = require('./DelayedRenderer');
 const Image = require('./Image');
 const LibItem = require('./LibItem');
 const MainNavBars = require('./MainNavBars');
@@ -45,6 +46,7 @@ module.exports = {
     Button,
     Checkbox,
     ColorInput,
+    DelayedRenderer,
     Image,
     LibItem,
     MainNavBars,

From e20d2a1b5393b64e83c6ff114e5c05d1de9d029f Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 7 Jul 2022 23:04:48 +0300
Subject: [PATCH 06/57] fix modals

---
 src/router/Modal/Modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/Modal/Modal.js b/src/router/Modal/Modal.js
index 2af54244a..ed76f2e71 100644
--- a/src/router/Modal/Modal.js
+++ b/src/router/Modal/Modal.js
@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 const React = require('react');
-const ReactDOM = require('react-dom/client');
+const ReactDOM = require('react-dom');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const FocusLock = require('react-focus-lock').default;

From 362081bfe6a65f5d30810ffcfc422e9e9f6ed67f Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 7 Jul 2022 23:11:16 +0300
Subject: [PATCH 07/57] rename model suspender hoc

---
 src/common/index.js         |  4 ++--
 src/common/useModelState.js | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/common/index.js b/src/common/index.js
index 4a6924e45..02f8ac9ab 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -36,7 +36,7 @@ const useDeepEqualMemo = require('./useDeepEqualMemo');
 const useDeepEqualState = require('./useDeepEqualState');
 const useFullscreen = require('./useFullscreen');
 const useLiveRef = require('./useLiveRef');
-const { withGetInitState, useModelState } = require('./useModelState');
+const { withModelSuspender, useModelState } = require('./useModelState');
 const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
@@ -80,7 +80,7 @@ module.exports = {
     useDeepEqualState,
     useFullscreen,
     useLiveRef,
-    withGetInitState,
+    withModelSuspender,
     useModelState,
     useOnScrollToBottom,
     useProfile,
diff --git a/src/common/useModelState.js b/src/common/useModelState.js
index 2b9584874..9158beec1 100644
--- a/src/common/useModelState.js
+++ b/src/common/useModelState.js
@@ -6,9 +6,9 @@ const isEqual = require('lodash.isequal');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 
-const GetInitStateContext = React.createContext();
+const ModelSuspenderContext = React.createContext();
 
-GetInitStateContext.displayName = 'GetInitStateContext';
+ModelSuspenderContext.displayName = 'ModelSuspenderContext';
 
 function wrapPromise(promise) {
     let status = 'pending';
@@ -36,8 +36,8 @@ function wrapPromise(promise) {
     };
 }
 
-const withGetInitState = (Component, Fallback = () => { }) => {
-    return function WithGetInitState(props) {
+const withModelSuspender = (Component, Fallback = () => { }) => {
+    return function WithModelSuspender(props) {
         const { core } = useServices();
         const initStateRef = React.useRef({});
         const getInitState = React.useCallback((model) => {
@@ -49,9 +49,9 @@ const withGetInitState = (Component, Fallback = () => { }) => {
         }, []);
         return (
             <React.Suspense fallback={<Fallback {...props} />}>
-                <GetInitStateContext.Provider value={getInitState}>
+                <ModelSuspenderContext.Provider value={getInitState}>
                     <Component {...props} />
-                </GetInitStateContext.Provider>
+                </ModelSuspenderContext.Provider>
             </React.Suspense>
         );
     };
@@ -64,7 +64,7 @@ const useModelState = ({ action, ...args }) => {
     const [model, timeout, map] = React.useMemo(() => {
         return [args.model, args.timeout, args.map];
     }, []);
-    const getInitState = React.useContext(GetInitStateContext);
+    const getInitState = React.useContext(ModelSuspenderContext);
     const [state, setState] = React.useReducer(
         (prevState, nextState) => {
             return Object.keys(prevState).reduce((result, key) => {
@@ -123,6 +123,6 @@ const useModelState = ({ action, ...args }) => {
 };
 
 module.exports = {
-    withGetInitState,
+    withModelSuspender,
     useModelState
 };

From 2bd249187391cd25f2ca9db06c348db1058b4ec6 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 8 Jul 2022 11:52:18 +0300
Subject: [PATCH 08/57] use sourceType module

---
 .eslintrc | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.eslintrc b/.eslintrc
index 88fa22404..41d4591dd 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -21,6 +21,8 @@
         "es6": true
     },
     "parserOptions": {
+        "sourceType": "module",
+        "allowImportExportEverywhere": true,
         "ecmaVersion": 11,
         "ecmaFeatures": {
             "jsx": true

From 73d6213427dde91da0da5d10b86ba45251edbb03 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 8 Jul 2022 11:52:47 +0300
Subject: [PATCH 09/57] impl fade-in animation

---
 src/App/styles.less        |  1 +
 src/common/animations.less | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 src/common/animations.less

diff --git a/src/App/styles.less b/src/App/styles.less
index e9a01575a..1d24672ab 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -5,6 +5,7 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
 :global {
+    @import (once, less) '~stremio/common/animations.less';
     @import (once, less) '~stremio-router/styles.css';
 }
 
diff --git a/src/common/animations.less b/src/common/animations.less
new file mode 100644
index 000000000..02b19b340
--- /dev/null
+++ b/src/common/animations.less
@@ -0,0 +1,20 @@
+:global(.animation-fade-in) {
+    :local {
+        animation-name: fade-in;
+    }
+
+    animation-timing-function: ease-in-out;
+    animation-duration: 100ms;
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0.6;
+        transform: translateY(0.2vh);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
\ No newline at end of file

From de9577efe5c34ddc9d9e49d0699bca3ccddca232 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 9 Jul 2022 23:16:43 +0300
Subject: [PATCH 10/57] core ran in a worker thread

---
 src/App/App.js                     | 14 ++++-----
 src/services/Core/Core.js          |  4 +--
 src/services/Core/CoreTransport.js | 49 ++++++++++++++----------------
 src/services/Core/bridge.js        | 45 +++++++++++++++++++++++++++
 src/services/Core/worker.js        | 23 ++++++++++++++
 webpack.config.js                  |  5 ++-
 6 files changed, 102 insertions(+), 38 deletions(-)
 create mode 100644 src/services/Core/bridge.js
 create mode 100644 src/services/Core/worker.js

diff --git a/src/App/App.js b/src/App/App.js
index a07435d2b..570c655f0 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -5,24 +5,22 @@ const React = require('react');
 const { Router } = require('stremio-router');
 const { Core, Shell, Chromecast, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
 const { NotFound } = require('stremio/routes');
-const { ToastProvider, sanitizeLocationPath, CONSTANTS } = require('stremio/common');
+const { ToastProvider, CONSTANTS } = require('stremio/common');
 const CoreEventsToaster = require('./CoreEventsToaster');
 const ErrorDialog = require('./ErrorDialog');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 
-window.core_imports = {
-    app_version: process.env.VERSION,
-    shell_version: null,
-    sanitize_location_path: sanitizeLocationPath
-};
-
 const App = () => {
     const onPathNotMatch = React.useCallback(() => {
         return NotFound;
     }, []);
     const services = React.useMemo(() => ({
-        core: new Core(),
+        core: new Core({
+            baseURI: document.baseURI,
+            appVersion: process.env.VERSION,
+            shellVersion: null
+        }),
         shell: new Shell(),
         chromecast: new Chromecast(),
         keyboardShortcuts: new KeyboardShortcuts()
diff --git a/src/services/Core/Core.js b/src/services/Core/Core.js
index 9716cf2b3..e033396d5 100644
--- a/src/services/Core/Core.js
+++ b/src/services/Core/Core.js
@@ -3,7 +3,7 @@
 const EventEmitter = require('eventemitter3');
 const CoreTransport = require('./CoreTransport');
 
-function Core() {
+function Core(args) {
     let active = false;
     let error = null;
     let starting = false;
@@ -66,7 +66,7 @@ function Core() {
         }
 
         starting = true;
-        transport = new CoreTransport();
+        transport = new CoreTransport(args);
         transport.on('init', onTransportInit);
         transport.on('error', onTransportError);
         onStateChanged();
diff --git a/src/services/Core/CoreTransport.js b/src/services/Core/CoreTransport.js
index 488b730f1..7a3a0c0ea 100644
--- a/src/services/Core/CoreTransport.js
+++ b/src/services/Core/CoreTransport.js
@@ -1,19 +1,22 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 const EventEmitter = require('eventemitter3');
-const { default: initialize_api, initialize_runtime, get_state, get_debug_state, dispatch, analytics, decode_stream } = require('@stremio/stremio-core-web');
+const Bridge = require('./bridge');
 
-function CoreTransport() {
+function CoreTransport(args) {
     const events = new EventEmitter();
+    const worker = new Worker(`${process.env.COMMIT_HASH}/scripts/worker.js`);
+    const bridge = new Bridge(worker, window);
 
-    initialize_api(require('@stremio/stremio-core-web/stremio_core_web_bg.wasm'))
-        .then(() => initialize_runtime(({ name, args }) => {
-            try {
-                events.emit(name, args);
-            } catch (error) {
-                console.error('CoreTransport', error);
-            }
-        }))
+    window.onCoreEvent = ({ name, args }) => {
+        try {
+            events.emit(name, args);
+        } catch (error) {
+            console.error('CoreTransport', error);
+        }
+    };
+
+    bridge.call(['init'], [args])
         .then(() => {
             try {
                 events.emit('init');
@@ -35,27 +38,19 @@ function CoreTransport() {
         events.removeAllListeners();
     };
     this.getState = async function(field) {
-        return Promise.resolve(get_state(field));
+        return bridge.call(['getState'], [field]);
     };
-    this.getDebugState = function() {
-        return get_debug_state();
+    this.getDebugState = async function() {
+        return bridge.call(['getDebugState'], []);
     };
-    this.dispatch = function(action, field) {
-        try {
-            dispatch(action, field);
-        } catch (error) {
-            console.error('CoreTransport', error);
-        }
+    this.dispatch = async function(action, field) {
+        return bridge.call(['dispatch'], [action, field, location.hash]);
     };
-    this.analytics = function(event) {
-        try {
-            analytics(event);
-        } catch (error) {
-            console.error('CoreTransport', error);
-        }
+    this.analytics = async function(event) {
+        return bridge.call(['analytics'], [event, location.hash]);
     };
-    this.decodeStream = function(stream) {
-        return decode_stream(stream);
+    this.decodeStream = async function(stream) {
+        return bridge.call(['decodeStream'], [stream]);
     };
 }
 
diff --git a/src/services/Core/bridge.js b/src/services/Core/bridge.js
new file mode 100644
index 000000000..e9fda2d63
--- /dev/null
+++ b/src/services/Core/bridge.js
@@ -0,0 +1,45 @@
+function getId() {
+    return Math.random().toString(32).slice(2);
+}
+
+function Bridge(context, scope) {
+    context.addEventListener('message', async ({ data: { request } }) => {
+        if (!request) return;
+
+        const { id, path, args } = request;
+        try {
+            const object = path.reduce((obj, prop) => obj[prop], scope);
+            let data;
+            if (typeof object === 'function') {
+                const thisArg = path.slice(0, path.length - 1).reduce((obj, prop) => obj[prop], scope);
+                data = await object.apply(thisArg, args);
+            } else {
+                data = await object;
+            }
+
+            context.postMessage({ response: { id, result: { data } } });
+        } catch (error) {
+            context.postMessage({ response: { id, result: { error } } });
+        }
+    });
+
+    this.call = async (path, args) => {
+        const id = getId();
+        return new Promise((resolve, reject) => {
+            const onMessage = ({ data: { response } }) => {
+                if (!response || response.id !== id) return;
+
+                context.removeEventListener('message', onMessage);
+                if ('error' in response.result) {
+                    reject(response.result.error);
+                } else {
+                    resolve(response.result.data);
+                }
+            };
+            context.addEventListener('message', onMessage);
+            context.postMessage({ request: { id, path, args } });
+        });
+    };
+}
+
+module.exports = Bridge;
diff --git a/src/services/Core/worker.js b/src/services/Core/worker.js
new file mode 100644
index 000000000..017a283c3
--- /dev/null
+++ b/src/services/Core/worker.js
@@ -0,0 +1,23 @@
+const sanitizeLocationPath = require('stremio/common/sanitizeLocationPath');
+const Bridge = require('./bridge');
+
+const bridge = new Bridge(self, self);
+
+self.init = async ({ baseURI, appVersion, shellVersion }) => {
+    self.document = { baseURI };
+    self.app_version = appVersion;
+    self.shell_version = shellVersion;
+    self.sanitize_location_path = sanitizeLocationPath;
+    self.get_location_hash = async () => bridge.call(['location', 'hash'], []);
+    self.local_storage_get_item = async (key) => bridge.call(['localStorage', 'getItem'], [key]);
+    self.local_storage_set_item = async (key, value) => bridge.call(['localStorage', 'setItem'], [key, value]);
+    self.local_storage_remove_item = async (key) => bridge.call(['localStorage', 'removeItem'], [key]);
+    const { default: initialize_api, initialize_runtime, get_state, get_debug_state, dispatch, analytics, decode_stream } = require('@stremio/stremio-core-web');
+    self.getState = get_state;
+    self.getDebugState = get_debug_state;
+    self.dispatch = dispatch;
+    self.analytics = analytics;
+    self.decodeStream = decode_stream;
+    await initialize_api(require('@stremio/stremio-core-web/stremio_core_web_bg.wasm'));
+    await initialize_runtime((event) => bridge.call(['onCoreEvent'], [event]));
+};
diff --git a/webpack.config.js b/webpack.config.js
index f9e53bfb8..29fd80ca4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,7 +15,10 @@ const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
 module.exports = (env, argv) => ({
     mode: argv.mode,
     devtool: argv.mode === 'production' ? 'source-map' : 'eval-source-map',
-    entry: './src/index.js',
+    entry: {
+        main: './src/index.js',
+        worker: './src/services/Core/worker.js'
+    },
     output: {
         path: path.join(__dirname, 'build'),
         filename: `${COMMIT_HASH}/scripts/[name].js`

From dd1ef55c9ffa97d85406c37a8fcc16b0f4da9fcf Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 9 Jul 2022 23:20:11 +0300
Subject: [PATCH 11/57] not needed lint rules removed

---
 .eslintrc | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 41d4591dd..88fa22404 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -21,8 +21,6 @@
         "es6": true
     },
     "parserOptions": {
-        "sourceType": "module",
-        "allowImportExportEverywhere": true,
         "ecmaVersion": 11,
         "ecmaFeatures": {
             "jsx": true

From 62ae99282faca420d06afda69d36a88f60532d30 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sun, 10 Jul 2022 10:11:31 +0300
Subject: [PATCH 12/57] copytight header added

---
 src/common/DelayedRenderer/DelayedRenderer.js | 2 ++
 src/common/DelayedRenderer/index.js           | 2 ++
 src/common/animations.less                    | 2 ++
 src/services/Core/bridge.js                   | 2 ++
 src/services/Core/worker.js                   | 2 ++
 5 files changed, 10 insertions(+)

diff --git a/src/common/DelayedRenderer/DelayedRenderer.js b/src/common/DelayedRenderer/DelayedRenderer.js
index 05cfa1d67..eb4bea81f 100644
--- a/src/common/DelayedRenderer/DelayedRenderer.js
+++ b/src/common/DelayedRenderer/DelayedRenderer.js
@@ -1,3 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
 const React = require('react');
 const PropTypes = require('prop-types');
 
diff --git a/src/common/DelayedRenderer/index.js b/src/common/DelayedRenderer/index.js
index ccc264048..97d3811dd 100644
--- a/src/common/DelayedRenderer/index.js
+++ b/src/common/DelayedRenderer/index.js
@@ -1,3 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
 const DelayedRenderer = require('./DelayedRenderer');
 
 module.exports = DelayedRenderer;
diff --git a/src/common/animations.less b/src/common/animations.less
index 02b19b340..9173a625b 100644
--- a/src/common/animations.less
+++ b/src/common/animations.less
@@ -1,3 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
 :global(.animation-fade-in) {
     :local {
         animation-name: fade-in;
diff --git a/src/services/Core/bridge.js b/src/services/Core/bridge.js
index e9fda2d63..5d12ae44e 100644
--- a/src/services/Core/bridge.js
+++ b/src/services/Core/bridge.js
@@ -1,3 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
 function getId() {
     return Math.random().toString(32).slice(2);
 }
diff --git a/src/services/Core/worker.js b/src/services/Core/worker.js
index 017a283c3..393bc1a46 100644
--- a/src/services/Core/worker.js
+++ b/src/services/Core/worker.js
@@ -1,3 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
 const sanitizeLocationPath = require('stremio/common/sanitizeLocationPath');
 const Bridge = require('./bridge');
 

From 38210ef52b1d8848d5be4f9312d4d0e7d0110f4b Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sun, 10 Jul 2022 10:50:16 +0300
Subject: [PATCH 13/57] AddonDetailsModal wrapped with model suspender

---
 .../AddonDetailsModal/AddonDetailsModal.js      | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/common/AddonDetailsModal/AddonDetailsModal.js b/src/common/AddonDetailsModal/AddonDetailsModal.js
index 25a4acd54..727504b6c 100644
--- a/src/common/AddonDetailsModal/AddonDetailsModal.js
+++ b/src/common/AddonDetailsModal/AddonDetailsModal.js
@@ -3,6 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const ModalDialog = require('stremio/common/ModalDialog');
+const { withModelSuspender } = require('stremio/common/useModelState');
 const { useServices } = require('stremio/services');
 const AddonDetailsWithRemoteAndLocalAddon = withRemoteAndLocalAddon(require('./AddonDetails'));
 const useAddonDetails = require('./useAddonDetails');
@@ -144,4 +145,18 @@ AddonDetailsModal.propTypes = {
     onCloseRequest: PropTypes.func
 };
 
-module.exports = AddonDetailsModal;
+const AddonDetailsModalFallback = ({ onCloseRequest }) => (
+    <ModalDialog
+        className={styles['addon-details-modal-container']}
+        title={'Stremio addon'}
+        onCloseRequest={onCloseRequest}
+    >
+        <div className={styles['addon-details-message-container']}>
+            Loading addon manifest
+        </div>
+    </ModalDialog>
+);
+
+AddonDetailsModalFallback.propTypes = AddonDetailsModal.propTypes;
+
+module.exports = withModelSuspender(AddonDetailsModal, AddonDetailsModalFallback);

From 951a8c0fff620d150fa9c9360ed761e95c91256b Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sun, 10 Jul 2022 11:24:27 +0300
Subject: [PATCH 14/57] NavMenu wrapped with model suspender

---
 .../HorizontalNavBar/NavMenu/NavMenu.js       | 79 +--------------
 .../NavMenu/NavMenuContent.js                 | 96 +++++++++++++++++++
 2 files changed, 99 insertions(+), 76 deletions(-)
 create mode 100644 src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js

diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
index 3a7b3a73c..362b8736f 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
@@ -3,22 +3,14 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
-const { useServices } = require('stremio/services');
-const Button = require('stremio/common/Button');
 const Popup = require('stremio/common/Popup');
 const useBinaryState = require('stremio/common/useBinaryState');
-const useFullscreen = require('stremio/common/useFullscreen');
-const useProfile = require('stremio/common/useProfile');
-const styles = require('./styles');
+const NavMenuContent = require('./NavMenuContent');
 
 const NavMenu = (props) => {
-    const { core } = useServices();
     const routeFocused = useRouteFocused();
-    const profile = useProfile();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
-    const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
     const popupLabelOnClick = React.useCallback((event) => {
         if (!event.nativeEvent.togglePopupPrevented) {
             toggleMenu();
@@ -27,14 +19,6 @@ const NavMenu = (props) => {
     const popupMenuOnClick = React.useCallback((event) => {
         event.nativeEvent.togglePopupPrevented = true;
     }, []);
-    const logoutButtonOnClick = React.useCallback(() => {
-        core.transport.dispatch({
-            action: 'Ctx',
-            args: {
-                action: 'Logout'
-            }
-        });
-    }, []);
     const renderLabel = React.useMemo(() => ({ ref, className, children }) => (
         props.renderLabel({
             ref,
@@ -44,65 +28,8 @@ const NavMenu = (props) => {
         })
     ), [menuOpen, popupLabelOnClick, props.renderLabel]);
     const renderMenu = React.useCallback(() => (
-        <div className={styles['nav-menu-container']} onClick={popupMenuOnClick}>
-            <div className={styles['user-info-container']}>
-                <div
-                    className={styles['avatar-container']}
-                    style={{
-                        backgroundImage: profile.auth === null ?
-                            `url('${require('/images/anonymous.png')}')`
-                            :
-                            `url('${profile.auth.user.avatar}'), url('${require('/images/default_avatar.png')}')`
-                    }}
-                />
-                <div className={styles['email-container']}>
-                    <div className={styles['email-label']}>{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}</div>
-                </div>
-                <Button className={styles['logout-button-container']} title={profile.auth === null ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
-                    <div className={styles['logout-label']}>{profile.auth === null ? 'Log in / Sign up' : 'Log out'}</div>
-                </Button>
-            </div>
-            <div className={styles['nav-menu-section']}>
-                <Button className={styles['nav-menu-option-container']} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
-                    <Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
-                    <div className={styles['nav-menu-option-label']}>{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</div>
-                </Button>
-            </div>
-            <div className={styles['nav-menu-section']}>
-                <Button className={styles['nav-menu-option-container']} title={'Settings'} href={'#/settings'}>
-                    <Icon className={styles['icon']} icon={'ic_settings'} />
-                    <div className={styles['nav-menu-option-label']}>Settings</div>
-                </Button>
-                <Button className={styles['nav-menu-option-container']} title={'Addons'} href={'#/addons'}>
-                    <Icon className={styles['icon']} icon={'ic_addons'} />
-                    <div className={styles['nav-menu-option-label']}>Addons</div>
-                </Button>
-                <Button className={styles['nav-menu-option-container']} title={'Remote Control'} disabled={true}>
-                    <Icon className={styles['icon']} icon={'ic_remote'} />
-                    <div className={styles['nav-menu-option-label']}>Remote Control</div>
-                </Button>
-                <Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'} disabled={true}>
-                    <Icon className={styles['icon']} icon={'ic_magnet'} />
-                    <div className={styles['nav-menu-option-label']}>Play Magnet Link</div>
-                </Button>
-                <Button className={styles['nav-menu-option-container']} title={'Help & Feedback'} href={'https://stremio.zendesk.com/'} target={'_blank'}>
-                    <Icon className={styles['icon']} icon={'ic_help'} />
-                    <div className={styles['nav-menu-option-label']}>Help & Feedback</div>
-                </Button>
-            </div>
-            <div className={styles['nav-menu-section']}>
-                <Button className={styles['nav-menu-option-container']} title={'Terms of Service'} href={'https://www.stremio.com/tos'} target={'_blank'}>
-                    <div className={styles['nav-menu-option-label']}>Terms of Service</div>
-                </Button>
-                <Button className={styles['nav-menu-option-container']} title={'Privacy Policy'} href={'https://www.stremio.com/privacy'} target={'_blank'}>
-                    <div className={styles['nav-menu-option-label']}>Privacy Policy</div>
-                </Button>
-                <Button className={styles['nav-menu-option-container']} title={'About Stremio'} href={'https://www.stremio.com/'} target={'_blank'}>
-                    <div className={styles['nav-menu-option-label']}>About Stremio</div>
-                </Button>
-            </div>
-        </div>
-    ), [profile, fullscreen]);
+        <NavMenuContent onClick={popupMenuOnClick} />
+    ), []);
     React.useEffect(() => {
         if (!routeFocused) {
             closeMenu();
diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
new file mode 100644
index 000000000..bc680c4d9
--- /dev/null
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
@@ -0,0 +1,96 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Icon = require('@stremio/stremio-icons/dom');
+const { useServices } = require('stremio/services');
+const Button = require('stremio/common/Button');
+const useFullscreen = require('stremio/common/useFullscreen');
+const useProfile = require('stremio/common/useProfile');
+const { withModelSuspender } = require('stremio/common/useModelState');
+const styles = require('./styles');
+
+const NavMenuContent = ({ onClick }) => {
+    const { core } = useServices();
+    const profile = useProfile();
+    const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
+    const logoutButtonOnClick = React.useCallback(() => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'Logout'
+            }
+        });
+    }, []);
+    return (
+        <div className={classnames(styles['nav-menu-container'], 'animation-fade-in')} onClick={onClick}>
+            <div className={styles['user-info-container']}>
+                <div
+                    className={styles['avatar-container']}
+                    style={{
+                        backgroundImage: profile.auth === null ?
+                            `url('${require('/images/anonymous.png')}')`
+                            :
+                            `url('${profile.auth.user.avatar}'), url('${require('/images/default_avatar.png')}')`
+                    }}
+                />
+                <div className={styles['email-container']}>
+                    <div className={styles['email-label']}>{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}</div>
+                </div>
+                <Button className={styles['logout-button-container']} title={profile.auth === null ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
+                    <div className={styles['logout-label']}>{profile.auth === null ? 'Log in / Sign up' : 'Log out'}</div>
+                </Button>
+            </div>
+            <div className={styles['nav-menu-section']}>
+                <Button className={styles['nav-menu-option-container']} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
+                    <Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
+                    <div className={styles['nav-menu-option-label']}>{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</div>
+                </Button>
+            </div>
+            <div className={styles['nav-menu-section']}>
+                <Button className={styles['nav-menu-option-container']} title={'Settings'} href={'#/settings'}>
+                    <Icon className={styles['icon']} icon={'ic_settings'} />
+                    <div className={styles['nav-menu-option-label']}>Settings</div>
+                </Button>
+                <Button className={styles['nav-menu-option-container']} title={'Addons'} href={'#/addons'}>
+                    <Icon className={styles['icon']} icon={'ic_addons'} />
+                    <div className={styles['nav-menu-option-label']}>Addons</div>
+                </Button>
+                <Button className={styles['nav-menu-option-container']} title={'Remote Control'} disabled={true}>
+                    <Icon className={styles['icon']} icon={'ic_remote'} />
+                    <div className={styles['nav-menu-option-label']}>Remote Control</div>
+                </Button>
+                <Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'} disabled={true}>
+                    <Icon className={styles['icon']} icon={'ic_magnet'} />
+                    <div className={styles['nav-menu-option-label']}>Play Magnet Link</div>
+                </Button>
+                <Button className={styles['nav-menu-option-container']} title={'Help & Feedback'} href={'https://stremio.zendesk.com/'} target={'_blank'}>
+                    <Icon className={styles['icon']} icon={'ic_help'} />
+                    <div className={styles['nav-menu-option-label']}>Help & Feedback</div>
+                </Button>
+            </div>
+            <div className={styles['nav-menu-section']}>
+                <Button className={styles['nav-menu-option-container']} title={'Terms of Service'} href={'https://www.stremio.com/tos'} target={'_blank'}>
+                    <div className={styles['nav-menu-option-label']}>Terms of Service</div>
+                </Button>
+                <Button className={styles['nav-menu-option-container']} title={'Privacy Policy'} href={'https://www.stremio.com/privacy'} target={'_blank'}>
+                    <div className={styles['nav-menu-option-label']}>Privacy Policy</div>
+                </Button>
+                <Button className={styles['nav-menu-option-container']} title={'About Stremio'} href={'https://www.stremio.com/'} target={'_blank'}>
+                    <div className={styles['nav-menu-option-label']}>About Stremio</div>
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+NavMenuContent.propTypes = {
+    onClick: PropTypes.func
+};
+
+const NavMenuContentFallback = () => (
+    <div className={styles['nav-menu-container']} />
+);
+
+module.exports = withModelSuspender(NavMenuContent, NavMenuContentFallback);

From 268fcd76f22f6ad87b193d748250354590a3e051 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sun, 10 Jul 2022 11:55:23 +0300
Subject: [PATCH 15/57] StreamingServerWarning wrapped with model suspender

---
 .../StreamingServerWarning/StreamingServerWarning.js     | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/common/StreamingServerWarning/StreamingServerWarning.js b/src/common/StreamingServerWarning/StreamingServerWarning.js
index 3ffff03c4..9c6d7277a 100644
--- a/src/common/StreamingServerWarning/StreamingServerWarning.js
+++ b/src/common/StreamingServerWarning/StreamingServerWarning.js
@@ -6,6 +6,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Button = require('stremio/common/Button');
 const useProfile = require('stremio/common/useProfile');
+const { withModelSuspender } = require('stremio/common/useModelState');
 const styles = require('./styles');
 
 const StreamingServerWarning = ({ className }) => {
@@ -39,6 +40,12 @@ const StreamingServerWarning = ({ className }) => {
             }
         });
     }, [profile.settings]);
+
+    if (!isNaN(profile.settings.streamingServerWarningDismissed.getTime()) &&
+        profile.settings.streamingServerWarningDismissed.getTime() > Date.now()) {
+        return null;
+    }
+
     return (
         <div className={classnames(className, styles['warning-container'])}>
             <div className={styles['warning-statement']}>Streaming server is not available.</div>
@@ -56,4 +63,4 @@ StreamingServerWarning.propTypes = {
     className: PropTypes.string
 };
 
-module.exports = StreamingServerWarning;
+module.exports = withModelSuspender(StreamingServerWarning);

From 0f2c9c98d51ce6a5a0c58e29fb35b028e81323c7 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sun, 10 Jul 2022 12:17:27 +0300
Subject: [PATCH 16/57] lodash.intersection installed

---
 package-lock.json | 11 +++++++++++
 package.json      |  1 +
 2 files changed, 12 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 40723c50b..e56e911c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
                 "eventemitter3": "4.0.7",
                 "filter-invalid-dom-props": "2.1.0",
                 "lodash.debounce": "4.0.8",
+                "lodash.intersection": "4.4.0",
                 "lodash.isequal": "4.5.0",
                 "lodash.throttle": "4.1.1",
                 "prop-types": "15.7.2",
@@ -9638,6 +9639,11 @@
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
             "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
         },
+        "node_modules/lodash.intersection": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/lodash.intersection/-/lodash.intersection-4.4.0.tgz",
+            "integrity": "sha512-N+L0cCfnqMv6mxXtSPeKt+IavbOBBSiAEkKyLasZ8BVcP9YXQgxLO12oPR8OyURwKV8l5vJKiE1M8aS70heuMg=="
+        },
         "node_modules/lodash.isequal": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -21142,6 +21148,11 @@
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
             "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
         },
+        "lodash.intersection": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/lodash.intersection/-/lodash.intersection-4.4.0.tgz",
+            "integrity": "sha512-N+L0cCfnqMv6mxXtSPeKt+IavbOBBSiAEkKyLasZ8BVcP9YXQgxLO12oPR8OyURwKV8l5vJKiE1M8aS70heuMg=="
+        },
         "lodash.isequal": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
diff --git a/package.json b/package.json
index 7d16b78ef..b108ae4c0 100755
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
         "eventemitter3": "4.0.7",
         "filter-invalid-dom-props": "2.1.0",
         "lodash.debounce": "4.0.8",
+        "lodash.intersection": "4.4.0",
         "lodash.isequal": "4.5.0",
         "lodash.throttle": "4.1.1",
         "prop-types": "15.7.2",

From 659a6f7531aa1073c40d0c48db2bc9c6fc053d28 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sun, 10 Jul 2022 12:28:44 +0300
Subject: [PATCH 17/57] check for deps intersection

---
 src/common/useModelState.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/common/useModelState.js b/src/common/useModelState.js
index 9158beec1..5f03bf49a 100644
--- a/src/common/useModelState.js
+++ b/src/common/useModelState.js
@@ -3,6 +3,7 @@
 const React = require('react');
 const throttle = require('lodash.throttle');
 const isEqual = require('lodash.isequal');
+const intersection = require('lodash.intersection');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 
@@ -61,8 +62,8 @@ const useModelState = ({ action, ...args }) => {
     const { core } = useServices();
     const routeFocused = useRouteFocused();
     const mountedRef = React.useRef(false);
-    const [model, timeout, map] = React.useMemo(() => {
-        return [args.model, args.timeout, args.map];
+    const [model, timeout, map, deps] = React.useMemo(() => {
+        return [args.model, args.timeout, args.map, args.deps];
     }, []);
     const getInitState = React.useContext(ModelSuspenderContext);
     const [state, setState] = React.useReducer(
@@ -93,7 +94,7 @@ const useModelState = ({ action, ...args }) => {
     }, []);
     React.useInsertionEffect(() => {
         const onNewState = async (models) => {
-            if (models.indexOf(model) === -1) {
+            if (models.indexOf(model) === -1 && (!Array.isArray(deps) || intersection(deps, models).length === 0)) {
                 return;
             }
 

From 22ac3b68f7a04609851dacff6170567e7a9cfb0b Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sun, 10 Jul 2022 12:38:13 +0300
Subject: [PATCH 18/57] Library wrapped with model suspender

---
 src/routes/Library/Library.js | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index b350ce170..6bc72cd60 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('@stremio/stremio-icons/dom');
 const NotFound = require('stremio/routes/NotFound');
-const { Button, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState } = require('stremio/common');
+const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState, withModelSuspender } = require('stremio/common');
 const useLibrary = require('./useLibrary');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
@@ -85,14 +85,16 @@ const Library = ({ model, urlParams, queryParams }) => {
                         </div>
                         :
                         library.selected === null ?
-                            <div className={styles['message-container']}>
-                                <Image
-                                    className={styles['image']}
-                                    src={require('/images/empty.png')}
-                                    alt={' '}
-                                />
-                                <div className={styles['message-label']}>{model === 'library' ? 'Library' : 'Continue Watching'} not loaded!</div>
-                            </div>
+                            <DelayedRenderer delay={500}>
+                                <div className={styles['message-container']}>
+                                    <Image
+                                        className={styles['image']}
+                                        src={require('/images/empty.png')}
+                                        alt={' '}
+                                    />
+                                    <div className={styles['message-label']}>{model === 'library' ? 'Library' : 'Continue Watching'} not loaded!</div>
+                                </div>
+                            </DelayedRenderer>
                             :
                             library.catalog.length === 0 ?
                                 <div className={styles['message-container']}>
@@ -104,7 +106,7 @@ const Library = ({ model, urlParams, queryParams }) => {
                                     <div className={styles['message-label']}>Empty {model === 'library' ? 'Library' : 'Continue Watching'}</div>
                                 </div>
                                 :
-                                <div className={styles['meta-items-container']}>
+                                <div className={classnames(styles['meta-items-container'], 'animation-fade-in')}>
                                     {library.catalog.map((libItem, index) => (
                                         <LibItem {...libItem} removable={model === 'library'} key={index} />
                                     ))}
@@ -132,4 +134,10 @@ Library.propTypes = {
     queryParams: PropTypes.instanceOf(URLSearchParams)
 };
 
-module.exports = withModel(Library);
+const LibraryFallback = ({ model }) => (
+    <MainNavBars className={styles['library-container']} route={model} />
+);
+
+LibraryFallback.propTypes = Library.propTypes;
+
+module.exports = withModel(withModelSuspender(Library, LibraryFallback));

From 27a41ae9aba17326468494d01dbb2521f07c3986 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sun, 10 Jul 2022 12:40:14 +0300
Subject: [PATCH 19/57] Settings wrapped with model suspender

---
 src/routes/Settings/Settings.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index bffa9da66..3386d877a 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -6,7 +6,7 @@ const throttle = require('lodash.throttle');
 const Icon = require('@stremio/stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { Button, Checkbox, MainNavBars, Multiselect, ColorInput, TextInput, ModalDialog, useProfile, useStreamingServer, useBinaryState } = require('stremio/common');
+const { Button, Checkbox, MainNavBars, Multiselect, ColorInput, TextInput, ModalDialog, useProfile, useStreamingServer, useBinaryState, withModelSuspender } = require('stremio/common');
 const useProfileSettingsInputs = require('./useProfileSettingsInputs');
 const useStreamingServerSettingsInputs = require('./useStreamingServerSettingsInputs');
 const styles = require('./styles');
@@ -131,7 +131,7 @@ const Settings = () => {
     }, [routeFocused]);
     return (
         <MainNavBars className={styles['settings-container']} route={'settings'}>
-            <div className={styles['settings-content']}>
+            <div className={classnames(styles['settings-content'], 'animation-fade-in')}>
                 <div className={styles['side-menu-container']}>
                     <Button className={classnames(styles['side-menu-button'], { [styles['selected']]: selectedSectionId === GENERAL_SECTION })} title={'General'} data-section={GENERAL_SECTION} onClick={sideMenuButtonOnClick}>
                         General
@@ -449,4 +449,8 @@ const Settings = () => {
     );
 };
 
-module.exports = Settings;
+const SettingsFallback = () => (
+    <MainNavBars className={styles['settings-container']} route={'settings'} />
+);
+
+module.exports = withModelSuspender(Settings, SettingsFallback);

From b9a25a4f58cd8ac496b92ec8772404d9e32389d2 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sun, 10 Jul 2022 12:47:39 +0300
Subject: [PATCH 20/57] rename CoreSuspender

---
 .../AddonDetailsModal/AddonDetailsModal.js       |  4 ++--
 .../HorizontalNavBar/NavMenu/NavMenuContent.js   |  4 ++--
 .../StreamingServerWarning.js                    |  4 ++--
 src/common/index.js                              |  4 ++--
 src/common/useModelState.js                      | 16 ++++++++--------
 src/routes/Library/Library.js                    |  4 ++--
 src/routes/Settings/Settings.js                  |  4 ++--
 7 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/common/AddonDetailsModal/AddonDetailsModal.js b/src/common/AddonDetailsModal/AddonDetailsModal.js
index 727504b6c..c6cefc7cd 100644
--- a/src/common/AddonDetailsModal/AddonDetailsModal.js
+++ b/src/common/AddonDetailsModal/AddonDetailsModal.js
@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const ModalDialog = require('stremio/common/ModalDialog');
-const { withModelSuspender } = require('stremio/common/useModelState');
+const { withCoreSuspender } = require('stremio/common/useModelState');
 const { useServices } = require('stremio/services');
 const AddonDetailsWithRemoteAndLocalAddon = withRemoteAndLocalAddon(require('./AddonDetails'));
 const useAddonDetails = require('./useAddonDetails');
@@ -159,4 +159,4 @@ const AddonDetailsModalFallback = ({ onCloseRequest }) => (
 
 AddonDetailsModalFallback.propTypes = AddonDetailsModal.propTypes;
 
-module.exports = withModelSuspender(AddonDetailsModal, AddonDetailsModalFallback);
+module.exports = withCoreSuspender(AddonDetailsModal, AddonDetailsModalFallback);
diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
index bc680c4d9..5a8983b1f 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
@@ -8,7 +8,7 @@ const { useServices } = require('stremio/services');
 const Button = require('stremio/common/Button');
 const useFullscreen = require('stremio/common/useFullscreen');
 const useProfile = require('stremio/common/useProfile');
-const { withModelSuspender } = require('stremio/common/useModelState');
+const { withCoreSuspender } = require('stremio/common/useModelState');
 const styles = require('./styles');
 
 const NavMenuContent = ({ onClick }) => {
@@ -93,4 +93,4 @@ const NavMenuContentFallback = () => (
     <div className={styles['nav-menu-container']} />
 );
 
-module.exports = withModelSuspender(NavMenuContent, NavMenuContentFallback);
+module.exports = withCoreSuspender(NavMenuContent, NavMenuContentFallback);
diff --git a/src/common/StreamingServerWarning/StreamingServerWarning.js b/src/common/StreamingServerWarning/StreamingServerWarning.js
index 9c6d7277a..be87bad66 100644
--- a/src/common/StreamingServerWarning/StreamingServerWarning.js
+++ b/src/common/StreamingServerWarning/StreamingServerWarning.js
@@ -6,7 +6,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Button = require('stremio/common/Button');
 const useProfile = require('stremio/common/useProfile');
-const { withModelSuspender } = require('stremio/common/useModelState');
+const { withCoreSuspender } = require('stremio/common/useModelState');
 const styles = require('./styles');
 
 const StreamingServerWarning = ({ className }) => {
@@ -63,4 +63,4 @@ StreamingServerWarning.propTypes = {
     className: PropTypes.string
 };
 
-module.exports = withModelSuspender(StreamingServerWarning);
+module.exports = withCoreSuspender(StreamingServerWarning);
diff --git a/src/common/index.js b/src/common/index.js
index 02f8ac9ab..edb69b446 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -36,7 +36,7 @@ const useDeepEqualMemo = require('./useDeepEqualMemo');
 const useDeepEqualState = require('./useDeepEqualState');
 const useFullscreen = require('./useFullscreen');
 const useLiveRef = require('./useLiveRef');
-const { withModelSuspender, useModelState } = require('./useModelState');
+const { withCoreSuspender, useModelState } = require('./useModelState');
 const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
@@ -80,7 +80,7 @@ module.exports = {
     useDeepEqualState,
     useFullscreen,
     useLiveRef,
-    withModelSuspender,
+    withCoreSuspender,
     useModelState,
     useOnScrollToBottom,
     useProfile,
diff --git a/src/common/useModelState.js b/src/common/useModelState.js
index 5f03bf49a..97c8ee588 100644
--- a/src/common/useModelState.js
+++ b/src/common/useModelState.js
@@ -7,9 +7,9 @@ const intersection = require('lodash.intersection');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 
-const ModelSuspenderContext = React.createContext();
+const CoreSuspenderContext = React.createContext();
 
-ModelSuspenderContext.displayName = 'ModelSuspenderContext';
+CoreSuspenderContext.displayName = 'CoreSuspenderContext';
 
 function wrapPromise(promise) {
     let status = 'pending';
@@ -37,8 +37,8 @@ function wrapPromise(promise) {
     };
 }
 
-const withModelSuspender = (Component, Fallback = () => { }) => {
-    return function WithModelSuspender(props) {
+const withCoreSuspender = (Component, Fallback = () => { }) => {
+    return function withCoreSuspender(props) {
         const { core } = useServices();
         const initStateRef = React.useRef({});
         const getInitState = React.useCallback((model) => {
@@ -50,9 +50,9 @@ const withModelSuspender = (Component, Fallback = () => { }) => {
         }, []);
         return (
             <React.Suspense fallback={<Fallback {...props} />}>
-                <ModelSuspenderContext.Provider value={getInitState}>
+                <CoreSuspenderContext.Provider value={getInitState}>
                     <Component {...props} />
-                </ModelSuspenderContext.Provider>
+                </CoreSuspenderContext.Provider>
             </React.Suspense>
         );
     };
@@ -65,7 +65,7 @@ const useModelState = ({ action, ...args }) => {
     const [model, timeout, map, deps] = React.useMemo(() => {
         return [args.model, args.timeout, args.map, args.deps];
     }, []);
-    const getInitState = React.useContext(ModelSuspenderContext);
+    const getInitState = React.useContext(CoreSuspenderContext);
     const [state, setState] = React.useReducer(
         (prevState, nextState) => {
             return Object.keys(prevState).reduce((result, key) => {
@@ -124,6 +124,6 @@ const useModelState = ({ action, ...args }) => {
 };
 
 module.exports = {
-    withModelSuspender,
+    withCoreSuspender,
     useModelState
 };
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index 6bc72cd60..c2790824e 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('@stremio/stremio-icons/dom');
 const NotFound = require('stremio/routes/NotFound');
-const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState, withModelSuspender } = require('stremio/common');
+const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState, withCoreSuspender } = require('stremio/common');
 const useLibrary = require('./useLibrary');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
@@ -140,4 +140,4 @@ const LibraryFallback = ({ model }) => (
 
 LibraryFallback.propTypes = Library.propTypes;
 
-module.exports = withModel(withModelSuspender(Library, LibraryFallback));
+module.exports = withModel(withCoreSuspender(Library, LibraryFallback));
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index 3386d877a..44550794e 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -6,7 +6,7 @@ const throttle = require('lodash.throttle');
 const Icon = require('@stremio/stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { Button, Checkbox, MainNavBars, Multiselect, ColorInput, TextInput, ModalDialog, useProfile, useStreamingServer, useBinaryState, withModelSuspender } = require('stremio/common');
+const { Button, Checkbox, MainNavBars, Multiselect, ColorInput, TextInput, ModalDialog, useProfile, useStreamingServer, useBinaryState, withCoreSuspender } = require('stremio/common');
 const useProfileSettingsInputs = require('./useProfileSettingsInputs');
 const useStreamingServerSettingsInputs = require('./useStreamingServerSettingsInputs');
 const styles = require('./styles');
@@ -453,4 +453,4 @@ const SettingsFallback = () => (
     <MainNavBars className={styles['settings-container']} route={'settings'} />
 );
 
-module.exports = withModelSuspender(Settings, SettingsFallback);
+module.exports = withCoreSuspender(Settings, SettingsFallback);

From dc98a9931fb6d78dbfc5b80593171772b7acc152 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 09:45:00 +0300
Subject: [PATCH 21/57] more core suspender to separate file

---
 .../AddonDetailsModal/AddonDetailsModal.js    |  2 +-
 .../AddonDetailsModal/useAddonDetails.js      |  2 +-
 .../NavMenu/NavMenuContent.js                 |  2 +-
 .../StreamingServerWarning.js                 |  2 +-
 src/common/coreSuspender.js                   | 67 +++++++++++++++++++
 src/common/index.js                           |  6 +-
 src/common/useModelState.js                   | 63 ++---------------
 src/common/useProfile.js                      |  2 +-
 src/common/useStreamingServer.js              |  2 +-
 9 files changed, 82 insertions(+), 66 deletions(-)
 create mode 100644 src/common/coreSuspender.js

diff --git a/src/common/AddonDetailsModal/AddonDetailsModal.js b/src/common/AddonDetailsModal/AddonDetailsModal.js
index c6cefc7cd..a79e13a31 100644
--- a/src/common/AddonDetailsModal/AddonDetailsModal.js
+++ b/src/common/AddonDetailsModal/AddonDetailsModal.js
@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const ModalDialog = require('stremio/common/ModalDialog');
-const { withCoreSuspender } = require('stremio/common/useModelState');
+const { withCoreSuspender } = require('stremio/common/coreSuspender');
 const { useServices } = require('stremio/services');
 const AddonDetailsWithRemoteAndLocalAddon = withRemoteAndLocalAddon(require('./AddonDetails'));
 const useAddonDetails = require('./useAddonDetails');
diff --git a/src/common/AddonDetailsModal/useAddonDetails.js b/src/common/AddonDetailsModal/useAddonDetails.js
index 91ded0f77..e13ac1007 100644
--- a/src/common/AddonDetailsModal/useAddonDetails.js
+++ b/src/common/AddonDetailsModal/useAddonDetails.js
@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 const React = require('react');
-const { useModelState } = require('stremio/common/useModelState');
+const useModelState = require('stremio/common/useModelState');
 
 const useAddonDetails = (transportUrl) => {
     const action = React.useMemo(() => {
diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
index 5a8983b1f..669e91df6 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
@@ -8,7 +8,7 @@ const { useServices } = require('stremio/services');
 const Button = require('stremio/common/Button');
 const useFullscreen = require('stremio/common/useFullscreen');
 const useProfile = require('stremio/common/useProfile');
-const { withCoreSuspender } = require('stremio/common/useModelState');
+const { withCoreSuspender } = require('stremio/common/coreSuspender');
 const styles = require('./styles');
 
 const NavMenuContent = ({ onClick }) => {
diff --git a/src/common/StreamingServerWarning/StreamingServerWarning.js b/src/common/StreamingServerWarning/StreamingServerWarning.js
index be87bad66..7a99333e8 100644
--- a/src/common/StreamingServerWarning/StreamingServerWarning.js
+++ b/src/common/StreamingServerWarning/StreamingServerWarning.js
@@ -6,7 +6,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Button = require('stremio/common/Button');
 const useProfile = require('stremio/common/useProfile');
-const { withCoreSuspender } = require('stremio/common/useModelState');
+const { withCoreSuspender } = require('stremio/common/coreSuspender');
 const styles = require('./styles');
 
 const StreamingServerWarning = ({ className }) => {
diff --git a/src/common/coreSuspender.js b/src/common/coreSuspender.js
new file mode 100644
index 000000000..bfb8d1893
--- /dev/null
+++ b/src/common/coreSuspender.js
@@ -0,0 +1,67 @@
+const React = require('react');
+const { useServices } = require('stremio/services');
+
+const CoreSuspenderContext = React.createContext();
+
+CoreSuspenderContext.displayName = 'CoreSuspenderContext';
+
+function wrapPromise(promise) {
+    let status = 'pending';
+    let result;
+    const suspender = promise.then(
+        (resp) => {
+            status = 'success';
+            result = resp;
+        },
+        (error) => {
+            status = 'error';
+            result = error;
+        }
+    );
+    return {
+        read() {
+            if (status === 'pending') {
+                throw suspender;
+            } else if (status === 'error') {
+                throw result;
+            } else if (status === 'success') {
+                return result;
+            }
+        }
+    };
+}
+
+const withCoreSuspender = (Component, Fallback = () => { }) => {
+    return function withCoreSuspender(props) {
+        const { core } = useServices();
+        const statesRef = React.useRef({});
+        const streamsRef = React.useRef({});
+        const getState = React.useCallback((model) => {
+            if (!statesRef.current[model]) {
+                statesRef.current[model] = wrapPromise(core.transport.getState(model));
+            }
+
+            return statesRef.current[model].read();
+        }, []);
+        const decodeStream = React.useCallback((stream) => {
+            if (!streamsRef.current[stream]) {
+                streamsRef.current[stream] = wrapPromise(core.transport.decodeStream(stream));
+            }
+
+            return streamsRef.current[stream].read();
+        }, []);
+        return (
+            <React.Suspense fallback={<Fallback {...props} />}>
+                <CoreSuspenderContext.Provider value={{ getState, decodeStream }}>
+                    <Component {...props} />
+                </CoreSuspenderContext.Provider>
+            </React.Suspense>
+        );
+    };
+};
+
+const useCoreSuspender = () => {
+    return React.useContext(CoreSuspenderContext);
+};
+
+module.exports = { withCoreSuspender, useCoreSuspender };
diff --git a/src/common/index.js b/src/common/index.js
index edb69b446..5912eb8f9 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -25,6 +25,7 @@ const TextInput = require('./TextInput');
 const { ToastProvider, useToast } = require('./Toast');
 const comparatorWithPriorities = require('./comparatorWithPriorities');
 const CONSTANTS = require('./CONSTANTS');
+const { withCoreSuspender, useCoreSuspender } = require('./coreSuspender');
 const getVisibleChildrenRange = require('./getVisibleChildrenRange');
 const languageNames = require('./languageNames');
 const routesRegexp = require('./routesRegexp');
@@ -36,7 +37,7 @@ const useDeepEqualMemo = require('./useDeepEqualMemo');
 const useDeepEqualState = require('./useDeepEqualState');
 const useFullscreen = require('./useFullscreen');
 const useLiveRef = require('./useLiveRef');
-const { withCoreSuspender, useModelState } = require('./useModelState');
+const useModelState = require('./useModelState');
 const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
@@ -69,6 +70,8 @@ module.exports = {
     useToast,
     comparatorWithPriorities,
     CONSTANTS,
+    withCoreSuspender,
+    useCoreSuspender,
     getVisibleChildrenRange,
     languageNames,
     routesRegexp,
@@ -80,7 +83,6 @@ module.exports = {
     useDeepEqualState,
     useFullscreen,
     useLiveRef,
-    withCoreSuspender,
     useModelState,
     useOnScrollToBottom,
     useProfile,
diff --git a/src/common/useModelState.js b/src/common/useModelState.js
index 97c8ee588..2bdb414af 100644
--- a/src/common/useModelState.js
+++ b/src/common/useModelState.js
@@ -4,60 +4,10 @@ const React = require('react');
 const throttle = require('lodash.throttle');
 const isEqual = require('lodash.isequal');
 const intersection = require('lodash.intersection');
+const { useCoreSuspender } = require('stremio/common/coreSuspender');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 
-const CoreSuspenderContext = React.createContext();
-
-CoreSuspenderContext.displayName = 'CoreSuspenderContext';
-
-function wrapPromise(promise) {
-    let status = 'pending';
-    let result;
-    const suspender = promise.then(
-        (resp) => {
-            status = 'success';
-            result = resp;
-        },
-        (error) => {
-            status = 'error';
-            result = error;
-        }
-    );
-    return {
-        read() {
-            if (status === 'pending') {
-                throw suspender;
-            } else if (status === 'error') {
-                throw result;
-            } else if (status === 'success') {
-                return result;
-            }
-        }
-    };
-}
-
-const withCoreSuspender = (Component, Fallback = () => { }) => {
-    return function withCoreSuspender(props) {
-        const { core } = useServices();
-        const initStateRef = React.useRef({});
-        const getInitState = React.useCallback((model) => {
-            if (!initStateRef.current[model]) {
-                initStateRef.current[model] = wrapPromise(core.transport.getState(model));
-            }
-
-            return initStateRef.current[model].read();
-        }, []);
-        return (
-            <React.Suspense fallback={<Fallback {...props} />}>
-                <CoreSuspenderContext.Provider value={getInitState}>
-                    <Component {...props} />
-                </CoreSuspenderContext.Provider>
-            </React.Suspense>
-        );
-    };
-};
-
 const useModelState = ({ action, ...args }) => {
     const { core } = useServices();
     const routeFocused = useRouteFocused();
@@ -65,7 +15,7 @@ const useModelState = ({ action, ...args }) => {
     const [model, timeout, map, deps] = React.useMemo(() => {
         return [args.model, args.timeout, args.map, args.deps];
     }, []);
-    const getInitState = React.useContext(CoreSuspenderContext);
+    const { getState } = useCoreSuspender();
     const [state, setState] = React.useReducer(
         (prevState, nextState) => {
             return Object.keys(prevState).reduce((result, key) => {
@@ -76,9 +26,9 @@ const useModelState = ({ action, ...args }) => {
         undefined,
         () => {
             if (typeof map === 'function') {
-                return map(getInitState(model));
+                return map(getState(model));
             } else {
-                return getInitState(model);
+                return getState(model);
             }
         }
     );
@@ -123,7 +73,4 @@ const useModelState = ({ action, ...args }) => {
     return state;
 };
 
-module.exports = {
-    withCoreSuspender,
-    useModelState
-};
+module.exports = useModelState;
diff --git a/src/common/useProfile.js b/src/common/useProfile.js
index d67b17838..371a4df12 100644
--- a/src/common/useProfile.js
+++ b/src/common/useProfile.js
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
-const { useModelState } = require('stremio/common/useModelState');
+const useModelState = require('stremio/common/useModelState');
 
 const map = (ctx) => ({
     ...ctx.profile,
diff --git a/src/common/useStreamingServer.js b/src/common/useStreamingServer.js
index 354261d25..00dd0cee1 100644
--- a/src/common/useStreamingServer.js
+++ b/src/common/useStreamingServer.js
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
-const { useModelState } = require('stremio/common/useModelState');
+const useModelState = require('stremio/common/useModelState');
 
 const useStreamingServer = () => {
     return useModelState({ model: 'streaming_server' });

From b20e197baf24e46a66de836204619b804ed5b595 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 09:50:01 +0300
Subject: [PATCH 22/57] Board wrapped with model suspender

---
 src/routes/Board/Board.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 0aca6964b..d01666448 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -3,7 +3,7 @@
 const React = require('react');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
-const { MainNavBars, MetaRow, LibItem, MetaItem, StreamingServerWarning, useProfile, useStreamingServer, getVisibleChildrenRange } = require('stremio/common');
+const { MainNavBars, MetaRow, LibItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
@@ -11,7 +11,6 @@ const styles = require('./styles');
 const THRESHOLD = 5;
 
 const Board = () => {
-    const profile = useProfile();
     const streamingServer = useStreamingServer();
     const continueWatchingPreview = useContinueWatchingPreview();
     const [board, loadBoardRows] = useBoard();
@@ -42,7 +41,7 @@ const Board = () => {
                     {
                         continueWatchingPreview.libraryItems.length > 0 ?
                             <MetaRow
-                                className={classnames(styles['board-row'], styles['continue-watching-row'])}
+                                className={classnames(styles['board-row'], styles['continue-watching-row'], 'animation-fade-in')}
                                 title={'Continue Watching'}
                                 items={continueWatchingPreview.libraryItems}
                                 itemComponent={LibItem}
@@ -57,7 +56,7 @@ const Board = () => {
                                 return (
                                     <MetaRow
                                         key={index}
-                                        className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`])}
+                                        className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`], 'animation-fade-in')}
                                         title={catalog.title}
                                         items={catalog.content.content}
                                         itemComponent={MetaItem}
@@ -69,7 +68,7 @@ const Board = () => {
                                 return (
                                     <MetaRow
                                         key={index}
-                                        className={styles['board-row']}
+                                        className={classnames(styles['board-row'], 'animation-fade-in')}
                                         title={catalog.title}
                                         message={catalog.content.content}
                                         deepLinks={catalog.deepLinks}
@@ -80,7 +79,7 @@ const Board = () => {
                                 return (
                                     <MetaRow.Placeholder
                                         key={index}
-                                        className={classnames(styles['board-row'], styles['board-row-poster'])}
+                                        className={classnames(styles['board-row'], styles['board-row-poster'], 'animation-fade-in')}
                                         title={catalog.title}
                                         deepLinks={catalog.deepLinks}
                                     />
@@ -91,8 +90,7 @@ const Board = () => {
                 </div>
             </MainNavBars>
             {
-                streamingServer.settings !== null && streamingServer.settings.type === 'Err' &&
-                    (isNaN(profile.settings.streamingServerWarningDismissed.getTime()) || profile.settings.streamingServerWarningDismissed.getTime() < Date.now()) ?
+                streamingServer.settings !== null && streamingServer.settings.type === 'Err' ?
                     <StreamingServerWarning className={styles['board-warning-container']} />
                     :
                     null
@@ -101,4 +99,10 @@ const Board = () => {
     );
 };
 
-module.exports = Board;
+const BoardFallback = () => (
+    <div className={styles['board-container']}>
+        <MainNavBars className={styles['board-content-container']} route={'board'} />
+    </div>
+);
+
+module.exports = withCoreSuspender(Board, BoardFallback);

From 7632d39e1dc09015a5e7a0fbfc7d218bdfda9785 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 11:40:36 +0300
Subject: [PATCH 23/57] delay render of nested suspenders

---
 src/common/coreSuspender.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/common/coreSuspender.js b/src/common/coreSuspender.js
index bfb8d1893..fead5ae1f 100644
--- a/src/common/coreSuspender.js
+++ b/src/common/coreSuspender.js
@@ -1,7 +1,7 @@
 const React = require('react');
 const { useServices } = require('stremio/services');
 
-const CoreSuspenderContext = React.createContext();
+const CoreSuspenderContext = React.createContext(null);
 
 CoreSuspenderContext.displayName = 'CoreSuspenderContext';
 
@@ -31,9 +31,15 @@ function wrapPromise(promise) {
     };
 }
 
+const useCoreSuspender = () => {
+    return React.useContext(CoreSuspenderContext);
+};
+
 const withCoreSuspender = (Component, Fallback = () => { }) => {
     return function withCoreSuspender(props) {
         const { core } = useServices();
+        const parentSuspender = useCoreSuspender();
+        const [render, setRender] = React.useState(parentSuspender === null);
         const statesRef = React.useRef({});
         const streamsRef = React.useRef({});
         const getState = React.useCallback((model) => {
@@ -50,18 +56,20 @@ const withCoreSuspender = (Component, Fallback = () => { }) => {
 
             return streamsRef.current[stream].read();
         }, []);
-        return (
+        React.useLayoutEffect(() => {
+            if (!render) {
+                setRender(true);
+            }
+        }, []);
+        return render ?
             <React.Suspense fallback={<Fallback {...props} />}>
                 <CoreSuspenderContext.Provider value={{ getState, decodeStream }}>
                     <Component {...props} />
                 </CoreSuspenderContext.Provider>
             </React.Suspense>
-        );
+            :
+            null;
     };
 };
 
-const useCoreSuspender = () => {
-    return React.useContext(CoreSuspenderContext);
-};
-
 module.exports = { withCoreSuspender, useCoreSuspender };

From abec5d8b6b504cd99e9bf776214ca5f68de319ba Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 11:50:21 +0300
Subject: [PATCH 24/57] NavMenu uses fixed direction

---
 src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
index 362b8736f..7e511ee0d 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
@@ -38,6 +38,7 @@ const NavMenu = (props) => {
     return (
         <Popup
             open={menuOpen}
+            direction={'bottom-left'}
             onCloseRequest={closeMenu}
             renderLabel={renderLabel}
             renderMenu={renderMenu}

From 538d3c65c0a452797de96c4e282f964b928ca180 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 11:51:25 +0300
Subject: [PATCH 25/57] memoize suspender ref

---
 src/common/coreSuspender.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/common/coreSuspender.js b/src/common/coreSuspender.js
index fead5ae1f..a3e71430b 100644
--- a/src/common/coreSuspender.js
+++ b/src/common/coreSuspender.js
@@ -56,6 +56,7 @@ const withCoreSuspender = (Component, Fallback = () => { }) => {
 
             return streamsRef.current[stream].read();
         }, []);
+        const suspender = React.useMemo(() => ({ getState, decodeStream }), []);
         React.useLayoutEffect(() => {
             if (!render) {
                 setRender(true);
@@ -63,7 +64,7 @@ const withCoreSuspender = (Component, Fallback = () => { }) => {
         }, []);
         return render ?
             <React.Suspense fallback={<Fallback {...props} />}>
-                <CoreSuspenderContext.Provider value={{ getState, decodeStream }}>
+                <CoreSuspenderContext.Provider value={suspender}>
                     <Component {...props} />
                 </CoreSuspenderContext.Provider>
             </React.Suspense>

From 7dc83e34dc60003c216e5e151c8c0869b1a62535 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 11:55:18 +0300
Subject: [PATCH 26/57] CoreSuspender file renamed

---
 src/common/AddonDetailsModal/AddonDetailsModal.js            | 2 +-
 src/common/{coreSuspender.js => CoreSuspender.js}            | 0
 src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js | 2 +-
 src/common/StreamingServerWarning/StreamingServerWarning.js  | 2 +-
 src/common/index.js                                          | 2 +-
 src/common/useModelState.js                                  | 2 +-
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename src/common/{coreSuspender.js => CoreSuspender.js} (100%)

diff --git a/src/common/AddonDetailsModal/AddonDetailsModal.js b/src/common/AddonDetailsModal/AddonDetailsModal.js
index a79e13a31..2c417a142 100644
--- a/src/common/AddonDetailsModal/AddonDetailsModal.js
+++ b/src/common/AddonDetailsModal/AddonDetailsModal.js
@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const ModalDialog = require('stremio/common/ModalDialog');
-const { withCoreSuspender } = require('stremio/common/coreSuspender');
+const { withCoreSuspender } = require('stremio/common/CoreSuspender');
 const { useServices } = require('stremio/services');
 const AddonDetailsWithRemoteAndLocalAddon = withRemoteAndLocalAddon(require('./AddonDetails'));
 const useAddonDetails = require('./useAddonDetails');
diff --git a/src/common/coreSuspender.js b/src/common/CoreSuspender.js
similarity index 100%
rename from src/common/coreSuspender.js
rename to src/common/CoreSuspender.js
diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
index 669e91df6..7dce73962 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
@@ -8,7 +8,7 @@ const { useServices } = require('stremio/services');
 const Button = require('stremio/common/Button');
 const useFullscreen = require('stremio/common/useFullscreen');
 const useProfile = require('stremio/common/useProfile');
-const { withCoreSuspender } = require('stremio/common/coreSuspender');
+const { withCoreSuspender } = require('stremio/common/CoreSuspender');
 const styles = require('./styles');
 
 const NavMenuContent = ({ onClick }) => {
diff --git a/src/common/StreamingServerWarning/StreamingServerWarning.js b/src/common/StreamingServerWarning/StreamingServerWarning.js
index 7a99333e8..b0775b2e6 100644
--- a/src/common/StreamingServerWarning/StreamingServerWarning.js
+++ b/src/common/StreamingServerWarning/StreamingServerWarning.js
@@ -6,7 +6,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Button = require('stremio/common/Button');
 const useProfile = require('stremio/common/useProfile');
-const { withCoreSuspender } = require('stremio/common/coreSuspender');
+const { withCoreSuspender } = require('stremio/common/CoreSuspender');
 const styles = require('./styles');
 
 const StreamingServerWarning = ({ className }) => {
diff --git a/src/common/index.js b/src/common/index.js
index 5912eb8f9..9ce9476b5 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -25,7 +25,7 @@ const TextInput = require('./TextInput');
 const { ToastProvider, useToast } = require('./Toast');
 const comparatorWithPriorities = require('./comparatorWithPriorities');
 const CONSTANTS = require('./CONSTANTS');
-const { withCoreSuspender, useCoreSuspender } = require('./coreSuspender');
+const { withCoreSuspender, useCoreSuspender } = require('./CoreSuspender');
 const getVisibleChildrenRange = require('./getVisibleChildrenRange');
 const languageNames = require('./languageNames');
 const routesRegexp = require('./routesRegexp');
diff --git a/src/common/useModelState.js b/src/common/useModelState.js
index 2bdb414af..a2a630237 100644
--- a/src/common/useModelState.js
+++ b/src/common/useModelState.js
@@ -4,7 +4,7 @@ const React = require('react');
 const throttle = require('lodash.throttle');
 const isEqual = require('lodash.isequal');
 const intersection = require('lodash.intersection');
-const { useCoreSuspender } = require('stremio/common/coreSuspender');
+const { useCoreSuspender } = require('stremio/common/CoreSuspender');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 

From 16d938fbe4856ab6640b52ed254006778bbd68d7 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 11:59:04 +0300
Subject: [PATCH 27/57] copyright header added

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

diff --git a/src/common/CoreSuspender.js b/src/common/CoreSuspender.js
index a3e71430b..94ec7475f 100644
--- a/src/common/CoreSuspender.js
+++ b/src/common/CoreSuspender.js
@@ -1,3 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
 const React = require('react');
 const { useServices } = require('stremio/services');
 

From e3c186b233f642340645754bfa6845701352fcf3 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 12:48:18 +0300
Subject: [PATCH 28/57] Player wrapped with core suspender

---
 src/routes/Player/Player.js    | 8 ++++++--
 src/routes/Player/usePlayer.js | 5 +++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 913037b0e..e8e34a5fc 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -6,7 +6,7 @@ const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer } = require('stremio/common');
+const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
 const Icon = require('@stremio/stremio-icons/dom');
 const BufferingLoader = require('./BufferingLoader');
 const ControlBar = require('./ControlBar');
@@ -567,4 +567,8 @@ Player.propTypes = {
     queryParams: PropTypes.instanceOf(URLSearchParams)
 };
 
-module.exports = Player;
+const PlayerFallback = () => (
+    <div className={classnames(styles['player-container'])} />
+);
+
+module.exports = withCoreSuspender(Player, PlayerFallback);
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 2e3a12af4..f9c18e9d5 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -2,7 +2,7 @@
 
 const React = require('react');
 const { useServices } = require('stremio/services');
-const { useModelState } = require('stremio/common');
+const { useModelState, useCoreSuspender } = require('stremio/common');
 
 const map = (player) => ({
     ...player,
@@ -34,8 +34,9 @@ const map = (player) => ({
 
 const usePlayer = (urlParams) => {
     const { core } = useServices();
+    const { decodeStream } = useCoreSuspender();
+    const stream = decodeStream(urlParams.stream);
     const action = React.useMemo(() => {
-        const stream = core.transport.decodeStream(urlParams.stream);
         if (stream !== null) {
             return {
                 action: 'Load',

From 3a179931c2ddd0df6bdb3156c7096a5ebf731ab9 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 12:48:30 +0300
Subject: [PATCH 29/57] fix trailers playback

---
 src/routes/Player/Player.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index e8e34a5fc..1778c4089 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -224,7 +224,8 @@ const Player = ({ urlParams, queryParams }) => {
         setError(null);
         if (player.selected === null) {
             dispatch({ type: 'command', commandName: 'unload' });
-        } else if (streamingServer.baseUrl !== null && streamingServer.baseUrl.type !== 'Loading' && player.metaItem !== null && player.metaItem.type !== 'Loading') {
+        } else if (streamingServer.baseUrl !== null && streamingServer.baseUrl.type !== 'Loading' &&
+            (player.selected.metaRequest === null || (player.metaItem !== null && player.metaItem.type !== 'Loading'))) {
             dispatch({
                 type: 'command',
                 commandName: 'load',

From 864b52c60e0e49678f2d9777ed334d8ab7e1223a Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 12:50:02 +0300
Subject: [PATCH 30/57] ctx added to discover deps

---
 src/routes/Discover/useDiscover.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Discover/useDiscover.js b/src/routes/Discover/useDiscover.js
index 7ba62c576..c1555646c 100644
--- a/src/routes/Discover/useDiscover.js
+++ b/src/routes/Discover/useDiscover.js
@@ -68,7 +68,7 @@ const useDiscover = (urlParams, queryParams) => {
             action: 'Unload'
         };
     }, [urlParams, queryParams]);
-    const discover = useModelState({ model: 'discover', action, map });
+    const discover = useModelState({ model: 'discover', action, map, deps: ['ctx'] });
     return [discover, loadNextPage];
 };
 

From b758ab3888f507a76821014f6f1ef3349bcc1883 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 12:54:10 +0300
Subject: [PATCH 31/57] Discover wrapped with core suspender

---
 src/routes/Discover/Discover.js | 67 +++++++++++++++------------------
 1 file changed, 31 insertions(+), 36 deletions(-)

diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index d2e2ce462..688eb072a 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('@stremio/stremio-icons/dom');
 const { useServices } = require('stremio/services');
-const { AddonDetailsModal, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, CONSTANTS, useBinaryState, useOnScrollToBottom } = require('stremio/common');
+const { AddonDetailsModal, DelayedRenderer, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
 const useDiscover = require('./useDiscover');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
@@ -75,37 +75,26 @@ const Discover = ({ urlParams, queryParams }) => {
         closeAddonModal();
         setSelectedMetaItemIndex(0);
     }, [discover.selected]);
-    const metaItemsContainerRef = React.useRef();
-    React.useEffect(() => {
-        if (discover.catalog?.content.type === 'Loading') {
-            metaItemsContainerRef.current.scrollTop = 0;
-        }
-    }, [discover.catalog]);
     return (
         <MainNavBars className={styles['discover-container']} route={'discover'}>
             <div className={styles['discover-content']}>
                 <div className={styles['catalog-container']}>
-                    {
-                        discover.defaultRequest ?
-                            <div className={styles['selectable-inputs-container']}>
-                                {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
-                                    <Multiselect
-                                        key={index}
-                                        className={styles['select-input']}
-                                        title={title}
-                                        options={options}
-                                        selected={selected}
-                                        renderLabelText={renderLabelText}
-                                        onSelect={onSelect}
-                                    />
-                                ))}
-                                <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
-                                    <Icon className={styles['filter-icon']} icon={'ic_filter'} />
-                                </Button>
-                            </div>
-                            :
-                            null
-                    }
+                    <div className={styles['selectable-inputs-container']}>
+                        {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
+                            <Multiselect
+                                key={index}
+                                className={styles['select-input']}
+                                title={title}
+                                options={options}
+                                selected={selected}
+                                renderLabelText={renderLabelText}
+                                onSelect={onSelect}
+                            />
+                        ))}
+                        <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
+                            <Icon className={styles['filter-icon']} icon={'ic_filter'} />
+                        </Button>
+                    </div>
                     {
                         discover.catalog !== null && !discover.catalog.installed ?
                             <div className={styles['missing-addon-warning-container']}>
@@ -119,10 +108,12 @@ const Discover = ({ urlParams, queryParams }) => {
                     }
                     {
                         discover.catalog === null ?
-                            <div className={styles['message-container']}>
-                                <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
-                                <div className={styles['message-label']}>No catalog selected!</div>
-                            </div>
+                            <DelayedRenderer delay={500}>
+                                <div className={styles['message-container']}>
+                                    <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                                    <div className={styles['message-label']}>No catalog selected!</div>
+                                </div>
+                            </DelayedRenderer>
                             :
                             discover.catalog.content.type === 'Err' ?
                                 <div className={styles['message-container']}>
@@ -131,7 +122,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                 </div>
                                 :
                                 discover.catalog.content.type === 'Loading' ?
-                                    <div ref={metaItemsContainerRef} className={styles['meta-items-container']}>
+                                    <div className={classnames(styles['meta-items-container'], 'animation-fade-in')}>
                                         {Array(CONSTANTS.CATALOG_PAGE_SIZE).fill(null).map((_, index) => (
                                             <div key={index} className={styles['meta-item-placeholder']}>
                                                 <div className={styles['poster-container']} />
@@ -142,7 +133,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                         ))}
                                     </div>
                                     :
-                                    <div ref={metaItemsContainerRef} className={styles['meta-items-container']} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}>
+                                    <div className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}>
                                         {discover.catalog.content.content.map((metaItem, index) => (
                                             <MetaItem
                                                 key={index}
@@ -185,7 +176,7 @@ const Discover = ({ urlParams, queryParams }) => {
                 }
             </div>
             {
-                inputsModalOpen && discover.defaultRequest ?
+                inputsModalOpen ?
                     <ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
                         {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
                             <Multiselect
@@ -221,4 +212,8 @@ Discover.propTypes = {
     queryParams: PropTypes.instanceOf(URLSearchParams)
 };
 
-module.exports = Discover;
+const DiscoverFallback = () => (
+    <MainNavBars className={styles['discover-container']} route={'discover'} />
+);
+
+module.exports = withCoreSuspender(Discover, DiscoverFallback);

From 65c36b13562e6bae586200e63e415e5ac9823ed3 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 13:39:07 +0300
Subject: [PATCH 32/57] Search wrapped with core suspender

---
 src/routes/Search/Search.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js
index 47fb15cba..c0580083c 100644
--- a/src/routes/Search/Search.js
+++ b/src/routes/Search/Search.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const Icon = require('@stremio/stremio-icons/dom');
-const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo, getVisibleChildrenRange } = require('stremio/common');
+const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
 const useSearch = require('./useSearch');
 const styles = require('./styles');
 
@@ -115,4 +115,10 @@ Search.propTypes = {
     queryParams: PropTypes.instanceOf(URLSearchParams)
 };
 
-module.exports = Search;
+const SearchFallback = ({ queryParams }) => (
+    <MainNavBars className={styles['search-container']} route={'search'} query={queryParams.get('search')} />
+);
+
+SearchFallback.propTypes = Search.propTypes;
+
+module.exports = withCoreSuspender(Search, SearchFallback);

From da2eaa002721976d1fdbf264e3b9596b71c9e63f Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 13:43:09 +0300
Subject: [PATCH 33/57] fade in effect added to search

---
 src/routes/Search/Search.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js
index c0580083c..bea2e7606 100644
--- a/src/routes/Search/Search.js
+++ b/src/routes/Search/Search.js
@@ -47,7 +47,7 @@ const Search = ({ queryParams }) => {
             <div ref={scrollContainerRef} className={styles['search-content']} onScroll={onScroll}>
                 {
                     query === null ?
-                        <div className={styles['search-hints-container']}>
+                        <div className={classnames(styles['search-hints-container'], 'animation-fade-in')}>
                             <div className={styles['search-hint-container']}>
                                 <Icon className={styles['icon']} icon={'ic_movies'} />
                                 <div className={styles['label']}>Search for movies, series, YouTube and TV channels</div>
@@ -74,7 +74,7 @@ const Search = ({ queryParams }) => {
                                         return (
                                             <MetaRow
                                                 key={index}
-                                                className={classnames(styles['search-row'], styles[`search-row-${catalog.content.content[0].posterShape}`])}
+                                                className={classnames(styles['search-row'], styles[`search-row-${catalog.content.content[0].posterShape}`], 'animation-fade-in')}
                                                 title={catalog.title}
                                                 items={catalog.content.content}
                                                 itemComponent={MetaItem}
@@ -86,7 +86,7 @@ const Search = ({ queryParams }) => {
                                         return (
                                             <MetaRow
                                                 key={index}
-                                                className={styles['search-row']}
+                                                className={classnames(styles['search-row'], 'animation-fade-in')}
                                                 title={catalog.title}
                                                 message={catalog.content.content}
                                                 deepLinks={catalog.deepLinks}
@@ -97,7 +97,7 @@ const Search = ({ queryParams }) => {
                                         return (
                                             <MetaRow.Placeholder
                                                 key={index}
-                                                className={classnames(styles['search-row'], styles['search-row-poster'])}
+                                                className={classnames(styles['search-row'], styles['search-row-poster'], 'animation-fade-in')}
                                                 title={catalog.title}
                                                 deepLinks={catalog.deepLinks}
                                             />

From 09dfeb1d427cfba553a47f38cdb98a23ca241923 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 13:44:52 +0300
Subject: [PATCH 34/57] Addons wrapped with core suspender

---
 src/routes/Addons/Addons.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 1a889ae50..aa513daaf 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -2,8 +2,9 @@
 
 const React = require('react');
 const PropTypes = require('prop-types');
+const classnames = require('classnames');
 const Icon = require('@stremio/stremio-icons/dom');
-const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
+const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, useBinaryState, withCoreSuspender } = require('stremio/common');
 const Addon = require('./Addon');
 const useInstalledAddons = require('./useInstalledAddons');
 const useRemoteAddons = require('./useRemoteAddons');
@@ -118,7 +119,7 @@ const Addons = ({ urlParams, queryParams }) => {
                                             .map((addon, index) => (
                                                 <Addon
                                                     key={index}
-                                                    className={styles['addon']}
+                                                    className={classnames(styles['addon'], 'animation-fade-in')}
                                                     id={addon.manifest.id}
                                                     name={addon.manifest.name}
                                                     version={addon.manifest.version}
@@ -152,7 +153,7 @@ const Addons = ({ urlParams, queryParams }) => {
                                                 .map((addon, index) => (
                                                     <Addon
                                                         key={index}
-                                                        className={styles['addon']}
+                                                        className={classnames(styles['addon'], 'animation-fade-in')}
                                                         id={addon.manifest.id}
                                                         name={addon.manifest.name}
                                                         version={addon.manifest.version}
@@ -261,4 +262,8 @@ Addons.propTypes = {
     queryParams: PropTypes.instanceOf(URLSearchParams)
 };
 
-module.exports = Addons;
+const AddonsFallback = () => (
+    <MainNavBars className={styles['addons-container']} route={'addons'} />
+);
+
+module.exports = withCoreSuspender(Addons, AddonsFallback);

From 064bae9a584aaf4725e77e233a8851f7d23881df Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 13:47:11 +0300
Subject: [PATCH 35/57] ctx dep added to addons hooks

---
 src/routes/Addons/useInstalledAddons.js | 2 +-
 src/routes/Addons/useRemoteAddons.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/Addons/useInstalledAddons.js b/src/routes/Addons/useInstalledAddons.js
index fc649c772..295e54382 100644
--- a/src/routes/Addons/useInstalledAddons.js
+++ b/src/routes/Addons/useInstalledAddons.js
@@ -23,7 +23,7 @@ const useInstalledAddons = (urlParams) => {
             };
         }
     }, [urlParams]);
-    return useModelState({ model: 'installed_addons', action });
+    return useModelState({ model: 'installed_addons', action, deps: ['ctx'] });
 };
 
 module.exports = useInstalledAddons;
diff --git a/src/routes/Addons/useRemoteAddons.js b/src/routes/Addons/useRemoteAddons.js
index c816072da..b3f74516e 100644
--- a/src/routes/Addons/useRemoteAddons.js
+++ b/src/routes/Addons/useRemoteAddons.js
@@ -29,7 +29,7 @@ const useRemoteAddons = (urlParams) => {
             };
         }
     }, [urlParams]);
-    return useModelState({ model: 'remote_addons', action });
+    return useModelState({ model: 'remote_addons', action, deps: ['ctx'] });
 };
 
 module.exports = useRemoteAddons;

From 9f6ee43c719b1012ce383640a417dfca62d8cea5 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 13:49:31 +0300
Subject: [PATCH 36/57] installed addons does not depend on ctx

---
 src/routes/Addons/useInstalledAddons.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Addons/useInstalledAddons.js b/src/routes/Addons/useInstalledAddons.js
index 295e54382..fc649c772 100644
--- a/src/routes/Addons/useInstalledAddons.js
+++ b/src/routes/Addons/useInstalledAddons.js
@@ -23,7 +23,7 @@ const useInstalledAddons = (urlParams) => {
             };
         }
     }, [urlParams]);
-    return useModelState({ model: 'installed_addons', action, deps: ['ctx'] });
+    return useModelState({ model: 'installed_addons', action });
 };
 
 module.exports = useInstalledAddons;

From f6bc7e61d5de8985c8c7cef2b8a39d6d87239a9d Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 11 Jul 2022 13:55:38 +0300
Subject: [PATCH 37/57] MetaDetails wrapped with core suspender

---
 src/routes/MetaDetails/MetaDetails.js    | 29 ++++++++++++++++++------
 src/routes/MetaDetails/useMetaDetails.js |  2 +-
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index 602bdd3c8..144ef6c6c 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -2,8 +2,9 @@
 
 const React = require('react');
 const PropTypes = require('prop-types');
+const classnames = require('classnames');
 const { useServices } = require('stremio/services');
-const { VerticalNavBar, HorizontalNavBar, MetaPreview, ModalDialog, Image } = require('stremio/common');
+const { VerticalNavBar, HorizontalNavBar, MetaPreview, ModalDialog, Image, DelayedRenderer, withCoreSuspender } = require('stremio/common');
 const StreamsList = require('./StreamsList');
 const VideosList = require('./VideosList');
 const useMetaDetails = require('./useMetaDetails');
@@ -86,10 +87,12 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                 }
                 {
                     metaPath === null ?
-                        <div className={styles['meta-message-container']}>
-                            <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
-                            <div className={styles['message-label']}>No meta was selected!</div>
-                        </div>
+                        <DelayedRenderer delay={500}>
+                            <div className={styles['meta-message-container']}>
+                                <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                                <div className={styles['message-label']}>No meta was selected!</div>
+                            </div>
+                        </DelayedRenderer>
                         :
                         metaDetails.metaItem === null ?
                             <div className={styles['meta-message-container']}>
@@ -122,7 +125,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                                 null
                                         }
                                         <MetaPreview
-                                            className={styles['meta-preview']}
+                                            className={classnames(styles['meta-preview'], 'animation-fade-in')}
                                             name={metaDetails.metaItem.content.content.name}
                                             logo={metaDetails.metaItem.content.content.logo}
                                             runtime={metaDetails.metaItem.content.content.runtime}
@@ -188,4 +191,16 @@ MetaDetails.propTypes = {
     queryParams: PropTypes.instanceOf(URLSearchParams)
 };
 
-module.exports = MetaDetails;
+const MetaDetailsFallback = () => (
+    <div className={styles['metadetails-container']}>
+        <HorizontalNavBar
+            className={styles['nav-bar']}
+            backButton={true}
+            addonsButton={true}
+            fullscreenButton={true}
+            navMenu={true}
+        />
+    </div>
+);
+
+module.exports = withCoreSuspender(MetaDetails, MetaDetailsFallback);
diff --git a/src/routes/MetaDetails/useMetaDetails.js b/src/routes/MetaDetails/useMetaDetails.js
index f2c10d10f..f7eb7ac6b 100644
--- a/src/routes/MetaDetails/useMetaDetails.js
+++ b/src/routes/MetaDetails/useMetaDetails.js
@@ -66,7 +66,7 @@ const useMetaDetails = (urlParams) => {
             };
         }
     }, [urlParams]);
-    return useModelState({ model: 'meta_details', action, map });
+    return useModelState({ model: 'meta_details', action, map, deps: ['ctx'] });
 };
 
 module.exports = useMetaDetails;

From 183a0816fa7774bb8f1fb7df3c049dfaefad2de2 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 12 Jul 2022 11:05:24 +0300
Subject: [PATCH 38/57] remove not used deep_equal hooks

---
 src/common/index.js                           |  4 ----
 src/common/useDeepEqualEffect.js              | 10 --------
 src/common/useDeepEqualState.js               | 24 -------------------
 .../Settings/useProfileSettingsInputs.js      |  1 +
 .../useStreamingServerSettingsInputs.js       |  1 +
 5 files changed, 2 insertions(+), 38 deletions(-)
 delete mode 100644 src/common/useDeepEqualEffect.js
 delete mode 100644 src/common/useDeepEqualState.js

diff --git a/src/common/index.js b/src/common/index.js
index 9ce9476b5..38ce7ab6c 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -32,9 +32,7 @@ const routesRegexp = require('./routesRegexp');
 const sanitizeLocationPath = require('./sanitizeLocationPath');
 const useAnimationFrame = require('./useAnimationFrame');
 const useBinaryState = require('./useBinaryState');
-const useDeepEqualEffect = require('./useDeepEqualEffect');
 const useDeepEqualMemo = require('./useDeepEqualMemo');
-const useDeepEqualState = require('./useDeepEqualState');
 const useFullscreen = require('./useFullscreen');
 const useLiveRef = require('./useLiveRef');
 const useModelState = require('./useModelState');
@@ -78,9 +76,7 @@ module.exports = {
     sanitizeLocationPath,
     useAnimationFrame,
     useBinaryState,
-    useDeepEqualEffect,
     useDeepEqualMemo,
-    useDeepEqualState,
     useFullscreen,
     useLiveRef,
     useModelState,
diff --git a/src/common/useDeepEqualEffect.js b/src/common/useDeepEqualEffect.js
deleted file mode 100644
index 095576356..000000000
--- a/src/common/useDeepEqualEffect.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright (C) 2017-2022 Smart code 203358507
-
-const React = require('react');
-const useDeepEqualMemo = require('stremio/common/useDeepEqualMemo');
-
-const useDeepEqualEffect = (cb, deps) => {
-    React.useEffect(cb, [useDeepEqualMemo(() => ({}), deps)]);
-};
-
-module.exports = useDeepEqualEffect;
diff --git a/src/common/useDeepEqualState.js b/src/common/useDeepEqualState.js
deleted file mode 100644
index edd762b46..000000000
--- a/src/common/useDeepEqualState.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright (C) 2017-2022 Smart code 203358507
-
-const React = require('react');
-const isEqual = require('lodash.isequal');
-
-const useDeepEqualState = (initialState) => {
-    return React.useReducer(
-        (prevState, nextState) => {
-            return isEqual(prevState, nextState) ?
-                prevState
-                :
-                nextState;
-        },
-        undefined,
-        () => {
-            return typeof initialState === 'function' ?
-                initialState()
-                :
-                initialState;
-        }
-    );
-};
-
-module.exports = useDeepEqualState;
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js
index 5534fd6e4..57f444d01 100644
--- a/src/routes/Settings/useProfileSettingsInputs.js
+++ b/src/routes/Settings/useProfileSettingsInputs.js
@@ -5,6 +5,7 @@ const { CONSTANTS, languageNames, useDeepEqualMemo } = require('stremio/common')
 
 const useProfileSettingsInputs = (profile) => {
     const { core } = useServices();
+    // TODO combine those useDeepEqualMemo in one
     const interfaceLanguageSelect = useDeepEqualMemo(() => ({
         options: Object.keys(languageNames).map((code) => ({
             value: code,
diff --git a/src/routes/Settings/useStreamingServerSettingsInputs.js b/src/routes/Settings/useStreamingServerSettingsInputs.js
index 0318d0f49..608a8390e 100644
--- a/src/routes/Settings/useStreamingServerSettingsInputs.js
+++ b/src/routes/Settings/useStreamingServerSettingsInputs.js
@@ -45,6 +45,7 @@ const TORRENT_PROFILES = {
 
 const useStreamingServerSettingsInputs = (streamingServer) => {
     const { core } = useServices();
+    // TODO combine those useDeepEqualMemo in one
     const cacheSizeSelect = useDeepEqualMemo(() => {
         if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
             return null;

From ab0a8d69380daf07132718d3b21f71607a123a1c Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 29 Jul 2022 10:47:11 +0300
Subject: [PATCH 39/57] install react-is

---
 package-lock.json | 25 +++++++++++++++++++------
 package.json      |  1 +
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e56e911c5..bb2f52e4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
                 "react": "18.2.0",
                 "react-dom": "18.2.0",
                 "react-focus-lock": "2.9.1",
+                "react-is": "18.2.0",
                 "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6"
             },
             "devDependencies": {
@@ -11342,6 +11343,11 @@
                 "react-is": "^16.8.1"
             }
         },
+        "node_modules/prop-types/node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        },
         "node_modules/proxy-addr": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -11522,9 +11528,9 @@
             }
         },
         "node_modules/react-is": {
-            "version": "16.13.1",
-            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
         },
         "node_modules/readable-stream": {
             "version": "3.6.0",
@@ -22372,6 +22378,13 @@
                 "loose-envify": "^1.4.0",
                 "object-assign": "^4.1.1",
                 "react-is": "^16.8.1"
+            },
+            "dependencies": {
+                "react-is": {
+                    "version": "16.13.1",
+                    "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+                    "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+                }
             }
         },
         "proxy-addr": {
@@ -22501,9 +22514,9 @@
             }
         },
         "react-is": {
-            "version": "16.13.1",
-            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
         },
         "readable-stream": {
             "version": "3.6.0",
diff --git a/package.json b/package.json
index b108ae4c0..f8898c5dd 100755
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
         "prop-types": "15.7.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-is": "18.2.0",
         "react-focus-lock": "2.9.1",
         "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6"
     },

From 852a6fc80f8b76bdd9910c552ca6e1c243ed2d97 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 29 Jul 2022 17:59:45 +0300
Subject: [PATCH 40/57] render full year in videos released date

---
 src/routes/MetaDetails/VideosList/Video/Video.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js
index bc9210346..a8113be4e 100644
--- a/src/routes/MetaDetails/VideosList/Video/Video.js
+++ b/src/routes/MetaDetails/VideosList/Video/Video.js
@@ -88,7 +88,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
                         {
                             released instanceof Date && !isNaN(released.getTime()) ?
                                 <div className={styles['released-container']}>
-                                    {released.toLocaleString(undefined, { year: '2-digit', month: 'short', day: 'numeric' })}
+                                    {released.toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })}
                                 </div>
                                 :
                                 scheduled ?

From 3c529e33665972fb1ec28b2928878cda6cb21496 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 2 Aug 2022 18:12:45 +0300
Subject: [PATCH 41/57] handle /detail as /metadetails page

---
 src/common/routesRegexp.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/routesRegexp.js b/src/common/routesRegexp.js
index d15bc7d46..21ad98662 100644
--- a/src/common/routesRegexp.js
+++ b/src/common/routesRegexp.js
@@ -26,7 +26,7 @@ const routesRegexp = {
         urlParamsNames: []
     },
     metadetails: {
-        regexp: /^\/metadetails\/([^/]*)\/([^/]*)(?:\/([^/]*))?$/,
+        regexp: /^\/(?:metadetails|detail)\/([^/]*)\/([^/]*)(?:\/([^/]*))?$/,
         urlParamsNames: ['type', 'id', 'videoId']
     },
     addons: {

From 7657bad07c15de33fdc78adeacdca7ce21868422 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 4 Aug 2022 17:07:00 +0300
Subject: [PATCH 42/57] worker & bridge moved to core-web

---
 src/App/App.js                     |  5 ++--
 src/services/Core/CoreTransport.js |  2 +-
 src/services/Core/bridge.js        | 47 ------------------------------
 src/services/Core/worker.js        | 25 ----------------
 webpack.config.js                  |  2 +-
 5 files changed, 5 insertions(+), 76 deletions(-)
 delete mode 100644 src/services/Core/bridge.js
 delete mode 100644 src/services/Core/worker.js

diff --git a/src/App/App.js b/src/App/App.js
index 570c655f0..248f553df 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -5,7 +5,7 @@ const React = require('react');
 const { Router } = require('stremio-router');
 const { Core, Shell, Chromecast, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
 const { NotFound } = require('stremio/routes');
-const { ToastProvider, CONSTANTS } = require('stremio/common');
+const { ToastProvider, sanitizeLocationPath, CONSTANTS } = require('stremio/common');
 const CoreEventsToaster = require('./CoreEventsToaster');
 const ErrorDialog = require('./ErrorDialog');
 const routerViewsConfig = require('./routerViewsConfig');
@@ -19,7 +19,8 @@ const App = () => {
         core: new Core({
             baseURI: document.baseURI,
             appVersion: process.env.VERSION,
-            shellVersion: null
+            shellVersion: null,
+            sanitizeLocationPath
         }),
         shell: new Shell(),
         chromecast: new Chromecast(),
diff --git a/src/services/Core/CoreTransport.js b/src/services/Core/CoreTransport.js
index 7a3a0c0ea..809a55fb4 100644
--- a/src/services/Core/CoreTransport.js
+++ b/src/services/Core/CoreTransport.js
@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 const EventEmitter = require('eventemitter3');
-const Bridge = require('./bridge');
+const Bridge = require('@stremio/stremio-core-web/bridge');
 
 function CoreTransport(args) {
     const events = new EventEmitter();
diff --git a/src/services/Core/bridge.js b/src/services/Core/bridge.js
deleted file mode 100644
index 5d12ae44e..000000000
--- a/src/services/Core/bridge.js
+++ /dev/null
@@ -1,47 +0,0 @@
-// Copyright (C) 2017-2022 Smart code 203358507
-
-function getId() {
-    return Math.random().toString(32).slice(2);
-}
-
-function Bridge(context, scope) {
-    context.addEventListener('message', async ({ data: { request } }) => {
-        if (!request) return;
-
-        const { id, path, args } = request;
-        try {
-            const object = path.reduce((obj, prop) => obj[prop], scope);
-            let data;
-            if (typeof object === 'function') {
-                const thisArg = path.slice(0, path.length - 1).reduce((obj, prop) => obj[prop], scope);
-                data = await object.apply(thisArg, args);
-            } else {
-                data = await object;
-            }
-
-            context.postMessage({ response: { id, result: { data } } });
-        } catch (error) {
-            context.postMessage({ response: { id, result: { error } } });
-        }
-    });
-
-    this.call = async (path, args) => {
-        const id = getId();
-        return new Promise((resolve, reject) => {
-            const onMessage = ({ data: { response } }) => {
-                if (!response || response.id !== id) return;
-
-                context.removeEventListener('message', onMessage);
-                if ('error' in response.result) {
-                    reject(response.result.error);
-                } else {
-                    resolve(response.result.data);
-                }
-            };
-            context.addEventListener('message', onMessage);
-            context.postMessage({ request: { id, path, args } });
-        });
-    };
-}
-
-module.exports = Bridge;
diff --git a/src/services/Core/worker.js b/src/services/Core/worker.js
deleted file mode 100644
index 393bc1a46..000000000
--- a/src/services/Core/worker.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright (C) 2017-2022 Smart code 203358507
-
-const sanitizeLocationPath = require('stremio/common/sanitizeLocationPath');
-const Bridge = require('./bridge');
-
-const bridge = new Bridge(self, self);
-
-self.init = async ({ baseURI, appVersion, shellVersion }) => {
-    self.document = { baseURI };
-    self.app_version = appVersion;
-    self.shell_version = shellVersion;
-    self.sanitize_location_path = sanitizeLocationPath;
-    self.get_location_hash = async () => bridge.call(['location', 'hash'], []);
-    self.local_storage_get_item = async (key) => bridge.call(['localStorage', 'getItem'], [key]);
-    self.local_storage_set_item = async (key, value) => bridge.call(['localStorage', 'setItem'], [key, value]);
-    self.local_storage_remove_item = async (key) => bridge.call(['localStorage', 'removeItem'], [key]);
-    const { default: initialize_api, initialize_runtime, get_state, get_debug_state, dispatch, analytics, decode_stream } = require('@stremio/stremio-core-web');
-    self.getState = get_state;
-    self.getDebugState = get_debug_state;
-    self.dispatch = dispatch;
-    self.analytics = analytics;
-    self.decodeStream = decode_stream;
-    await initialize_api(require('@stremio/stremio-core-web/stremio_core_web_bg.wasm'));
-    await initialize_runtime((event) => bridge.call(['onCoreEvent'], [event]));
-};
diff --git a/webpack.config.js b/webpack.config.js
index 29fd80ca4..873679d58 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,7 +17,7 @@ module.exports = (env, argv) => ({
     devtool: argv.mode === 'production' ? 'source-map' : 'eval-source-map',
     entry: {
         main: './src/index.js',
-        worker: './src/services/Core/worker.js'
+        worker: './node_modules/@stremio/stremio-core-web/worker.js'
     },
     output: {
         path: path.join(__dirname, 'build'),

From 84a3a79bc9ba6b11ddd6c0aa911688c11d6eebf5 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 4 Aug 2022 17:29:56 +0300
Subject: [PATCH 43/57] remove sanitizeLocationPath

---
 src/App/App.js                     |  5 ++---
 src/common/index.js                |  2 --
 src/common/sanitizeLocationPath.js | 22 ----------------------
 3 files changed, 2 insertions(+), 27 deletions(-)
 delete mode 100644 src/common/sanitizeLocationPath.js

diff --git a/src/App/App.js b/src/App/App.js
index 248f553df..570c655f0 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -5,7 +5,7 @@ const React = require('react');
 const { Router } = require('stremio-router');
 const { Core, Shell, Chromecast, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
 const { NotFound } = require('stremio/routes');
-const { ToastProvider, sanitizeLocationPath, CONSTANTS } = require('stremio/common');
+const { ToastProvider, CONSTANTS } = require('stremio/common');
 const CoreEventsToaster = require('./CoreEventsToaster');
 const ErrorDialog = require('./ErrorDialog');
 const routerViewsConfig = require('./routerViewsConfig');
@@ -19,8 +19,7 @@ const App = () => {
         core: new Core({
             baseURI: document.baseURI,
             appVersion: process.env.VERSION,
-            shellVersion: null,
-            sanitizeLocationPath
+            shellVersion: null
         }),
         shell: new Shell(),
         chromecast: new Chromecast(),
diff --git a/src/common/index.js b/src/common/index.js
index 38ce7ab6c..54fac3a83 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -29,7 +29,6 @@ const { withCoreSuspender, useCoreSuspender } = require('./CoreSuspender');
 const getVisibleChildrenRange = require('./getVisibleChildrenRange');
 const languageNames = require('./languageNames');
 const routesRegexp = require('./routesRegexp');
-const sanitizeLocationPath = require('./sanitizeLocationPath');
 const useAnimationFrame = require('./useAnimationFrame');
 const useBinaryState = require('./useBinaryState');
 const useDeepEqualMemo = require('./useDeepEqualMemo');
@@ -73,7 +72,6 @@ module.exports = {
     getVisibleChildrenRange,
     languageNames,
     routesRegexp,
-    sanitizeLocationPath,
     useAnimationFrame,
     useBinaryState,
     useDeepEqualMemo,
diff --git a/src/common/sanitizeLocationPath.js b/src/common/sanitizeLocationPath.js
deleted file mode 100644
index e45f1e15b..000000000
--- a/src/common/sanitizeLocationPath.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright (C) 2017-2022 Smart code 203358507
-
-const UrlUtils = require('url');
-const routesRegexp = require('stremio/common/routesRegexp');
-
-const sanitizeLocationPath = (path) => {
-    const { href, pathname, search } = UrlUtils.parse(path);
-    if (typeof pathname === 'string') {
-        const matches = pathname.match(routesRegexp.player.regexp);
-        if (matches) {
-            if (typeof matches[2] === 'string') {
-                return `/player/***/***/${matches[3]}/${matches[4]}/${matches[5]}/${matches[6]}${typeof search === 'string' ? search : ''}`;
-            } else {
-                return `/player/***${typeof search === 'string' ? search : ''}`;
-            }
-        }
-    }
-
-    return href;
-};
-
-module.exports = sanitizeLocationPath;

From 1d43da60c2b5467ced79e874be8298e79b8f0c78 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 5 Aug 2022 08:48:01 +0300
Subject: [PATCH 44/57] change the bridge api

---
 src/services/Core/CoreTransport.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/Core/CoreTransport.js b/src/services/Core/CoreTransport.js
index 809a55fb4..954dc88dd 100644
--- a/src/services/Core/CoreTransport.js
+++ b/src/services/Core/CoreTransport.js
@@ -6,7 +6,7 @@ const Bridge = require('@stremio/stremio-core-web/bridge');
 function CoreTransport(args) {
     const events = new EventEmitter();
     const worker = new Worker(`${process.env.COMMIT_HASH}/scripts/worker.js`);
-    const bridge = new Bridge(worker, window);
+    const bridge = new Bridge(window, worker);
 
     window.onCoreEvent = ({ name, args }) => {
         try {

From 3f2c5a202c33c6fc4e6a70f7869c829e97c9886b Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 5 Aug 2022 11:59:02 +0300
Subject: [PATCH 45/57] remove baseURI argument for core

---
 src/App/App.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App/App.js b/src/App/App.js
index 570c655f0..d7a8ef54a 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -17,7 +17,6 @@ const App = () => {
     }, []);
     const services = React.useMemo(() => ({
         core: new Core({
-            baseURI: document.baseURI,
             appVersion: process.env.VERSION,
             shellVersion: null
         }),

From d2e5b45702c9ed5614ca2abb4fa473c0ca086a67 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 5 Aug 2022 16:00:05 +0300
Subject: [PATCH 46/57] remove plugin-transform-runtime

---
 package-lock.json | 35 -----------------------------------
 package.json      |  1 -
 webpack.config.js |  3 +--
 3 files changed, 1 insertion(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bb2f52e4f..4acbc6101 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,6 @@
                 "@babel/core": "7.16.0",
                 "@babel/plugin-proposal-class-properties": "7.16.0",
                 "@babel/plugin-proposal-object-rest-spread": "7.16.0",
-                "@babel/plugin-transform-runtime": "7.16.0",
                 "@babel/preset-env": "7.16.0",
                 "@babel/preset-react": "7.16.0",
                 "babel-loader": "8.2.3",
@@ -1448,26 +1447,6 @@
                 "@babel/core": "^7.0.0-0"
             }
         },
-        "node_modules/@babel/plugin-transform-runtime": {
-            "version": "7.16.0",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.16.0.tgz",
-            "integrity": "sha512-zlPf1/XFn5+vWdve3AAhf+Sxl+MVa5VlwTwWgnLx23u4GlatSRQJ3Eoo9vllf0a9il3woQsT4SK+5Z7c06h8ag==",
-            "dev": true,
-            "dependencies": {
-                "@babel/helper-module-imports": "^7.16.0",
-                "@babel/helper-plugin-utils": "^7.14.5",
-                "babel-plugin-polyfill-corejs2": "^0.2.3",
-                "babel-plugin-polyfill-corejs3": "^0.3.0",
-                "babel-plugin-polyfill-regenerator": "^0.2.3",
-                "semver": "^6.3.0"
-            },
-            "engines": {
-                "node": ">=6.9.0"
-            },
-            "peerDependencies": {
-                "@babel/core": "^7.0.0-0"
-            }
-        },
         "node_modules/@babel/plugin-transform-shorthand-properties": {
             "version": "7.16.0",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.0.tgz",
@@ -14893,20 +14872,6 @@
                 "@babel/helper-plugin-utils": "^7.14.5"
             }
         },
-        "@babel/plugin-transform-runtime": {
-            "version": "7.16.0",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.16.0.tgz",
-            "integrity": "sha512-zlPf1/XFn5+vWdve3AAhf+Sxl+MVa5VlwTwWgnLx23u4GlatSRQJ3Eoo9vllf0a9il3woQsT4SK+5Z7c06h8ag==",
-            "dev": true,
-            "requires": {
-                "@babel/helper-module-imports": "^7.16.0",
-                "@babel/helper-plugin-utils": "^7.14.5",
-                "babel-plugin-polyfill-corejs2": "^0.2.3",
-                "babel-plugin-polyfill-corejs3": "^0.3.0",
-                "babel-plugin-polyfill-regenerator": "^0.2.3",
-                "semver": "^6.3.0"
-            }
-        },
         "@babel/plugin-transform-shorthand-properties": {
             "version": "7.16.0",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.0.tgz",
diff --git a/package.json b/package.json
index f8898c5dd..7a0572f05 100755
--- a/package.json
+++ b/package.json
@@ -39,7 +39,6 @@
         "@babel/core": "7.16.0",
         "@babel/plugin-proposal-class-properties": "7.16.0",
         "@babel/plugin-proposal-object-rest-spread": "7.16.0",
-        "@babel/plugin-transform-runtime": "7.16.0",
         "@babel/preset-env": "7.16.0",
         "@babel/preset-react": "7.16.0",
         "babel-loader": "8.2.3",
diff --git a/webpack.config.js b/webpack.config.js
index 873679d58..833c5ed66 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -38,8 +38,7 @@ module.exports = (env, argv) => ({
                         ],
                         plugins: [
                             '@babel/plugin-proposal-class-properties',
-                            '@babel/plugin-proposal-object-rest-spread',
-                            '@babel/plugin-transform-runtime'
+                            '@babel/plugin-proposal-object-rest-spread'
                         ]
                     }
                 }

From 190b4fa9412a0f2a0ac2efb73f7d28bea3d41176 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 5 Aug 2022 16:06:12 +0300
Subject: [PATCH 47/57] not needed sourceType specified removed

---
 webpack.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webpack.config.js b/webpack.config.js
index 833c5ed66..522aa1048 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -31,7 +31,6 @@ module.exports = (env, argv) => ({
                 use: {
                     loader: 'babel-loader',
                     options: {
-                        sourceType: 'unambiguous',
                         presets: [
                             '@babel/preset-env',
                             '@babel/preset-react'

From 353334651e13bb43cf36f00fe6f3a45ce97b7a8d Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 5 Aug 2022 16:57:51 +0300
Subject: [PATCH 48/57] no need for meta details to depend on ctx

---
 src/routes/MetaDetails/useMetaDetails.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/useMetaDetails.js b/src/routes/MetaDetails/useMetaDetails.js
index f7eb7ac6b..f2c10d10f 100644
--- a/src/routes/MetaDetails/useMetaDetails.js
+++ b/src/routes/MetaDetails/useMetaDetails.js
@@ -66,7 +66,7 @@ const useMetaDetails = (urlParams) => {
             };
         }
     }, [urlParams]);
-    return useModelState({ model: 'meta_details', action, map, deps: ['ctx'] });
+    return useModelState({ model: 'meta_details', action, map });
 };
 
 module.exports = useMetaDetails;

From 832379ff98981e2bb8e9ce655a3f553c8880162c Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 15 Aug 2022 16:49:59 +0300
Subject: [PATCH 49/57] add url to dependencies

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

diff --git a/package-lock.json b/package-lock.json
index 4acbc6101..bef6b08a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,8 @@
                 "react-dom": "18.2.0",
                 "react-focus-lock": "2.9.1",
                 "react-is": "18.2.0",
-                "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6"
+                "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
+                "url": "0.11.0"
             },
             "devDependencies": {
                 "@babel/core": "7.16.0",
diff --git a/package.json b/package.json
index 7a0572f05..5014e319b 100755
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
         "react-dom": "18.2.0",
         "react-is": "18.2.0",
         "react-focus-lock": "2.9.1",
-        "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6"
+        "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
+        "url": "0.11.0"
     },
     "devDependencies": {
         "@babel/core": "7.16.0",

From dfc5626f0dd35f15df307c734d6c4e9741d99588 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 18 Aug 2022 16:31:57 +0300
Subject: [PATCH 50/57] time removed from gdpr_consent

---
 src/routes/Intro/Intro.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index a97a113f8..4e2fb74cd 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -186,7 +186,6 @@ const Intro = ({ queryParams }) => {
                         tos: state.termsAccepted,
                         privacy: state.privacyPolicyAccepted,
                         marketing: state.marketingAccepted,
-                        time: new Date(),
                         from: 'web'
                     }
                 }

From a7feff94587f5213732e46752c113ab6141caf25 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 19 Aug 2022 18:09:39 +0300
Subject: [PATCH 51/57] send device type to core

---
 src/routes/Player/Player.js    | 12 ++++++++----
 src/routes/Player/usePlayer.js |  8 ++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 1778c4089..243de7ef4 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -25,7 +25,7 @@ const Player = ({ urlParams, queryParams }) => {
             queryParams.has('maxAudioChannels') ? parseInt(queryParams.get('maxAudioChannels'), 10) : null
         ];
     }, [queryParams]);
-    const [player, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams);
+    const [player, timeUpdate, pushToLibrary] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const streamingServer = useStreamingServer();
     const routeFocused = useRouteFocused();
@@ -42,6 +42,7 @@ const Player = ({ urlParams, queryParams }) => {
     const [videoState, setVideoState] = React.useReducer(
         (videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
         {
+            manifest: null,
             stream: null,
             paused: null,
             time: null,
@@ -75,6 +76,7 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, []);
     const onImplementationChanged = React.useCallback((manifest) => {
+        setVideoState({ manifest });
         manifest.props.forEach((propName) => {
             dispatch({ type: 'observeProp', propName });
         });
@@ -302,10 +304,12 @@ const Player = ({ urlParams, queryParams }) => {
         dispatch({ type: 'setProp', propName: 'extraSubtitlesOutlineColor', propValue: settings.subtitlesOutlineColor });
     }, [settings.subtitlesOutlineColor]);
     React.useEffect(() => {
-        if (videoState.time !== null && !isNaN(videoState.time) && videoState.duration !== null && !isNaN(videoState.duration)) {
-            updateLibraryItemState(videoState.time, videoState.duration);
+        if (videoState.time !== null && !isNaN(videoState.time) &&
+            videoState.duration !== null && !isNaN(videoState.duration) &&
+            videoState.manifest !== null && typeof videoState.manifest.name === 'string') {
+            timeUpdate(videoState.time, videoState.duration, videoState.manifest.name);
         }
-    }, [videoState.time, videoState.duration]);
+    }, [videoState.time, videoState.duration, videoState.manifest]);
     React.useEffect(() => {
         if ((!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) &&
             (!Array.isArray(videoState.extraSubtitlesTracks) || videoState.extraSubtitlesTracks.length === 0) &&
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index f9c18e9d5..503562c5f 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -86,12 +86,12 @@ const usePlayer = (urlParams) => {
             };
         }
     }, [urlParams]);
-    const updateLibraryItemState = React.useCallback((time, duration) => {
+    const timeUpdate = React.useCallback((time, duration, device) => {
         core.transport.dispatch({
             action: 'Player',
             args: {
-                action: 'UpdateLibraryItemState',
-                args: { time, duration }
+                action: 'TimeUpdate',
+                args: { time, duration, device }
             }
         }, 'player');
     }, []);
@@ -104,7 +104,7 @@ const usePlayer = (urlParams) => {
         }, 'player');
     }, []);
     const player = useModelState({ model: 'player', action, map });
-    return [player, updateLibraryItemState, pushToLibrary];
+    return [player, timeUpdate, pushToLibrary];
 };
 
 module.exports = usePlayer;

From 53954876cda0f9defe3c83a34e26d19d99d2e549 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 19 Aug 2022 18:11:19 +0300
Subject: [PATCH 52/57] not needed rewind removed from player

---
 src/routes/Player/Player.js | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 243de7ef4..9e685a95a 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -18,7 +18,7 @@ const useSettings = require('./useSettings');
 const styles = require('./styles');
 
 const Player = ({ urlParams, queryParams }) => {
-    const { core, chromecast } = useServices();
+    const { chromecast } = useServices();
     const [forceTranscoding, maxAudioChannels] = React.useMemo(() => {
         return [
             queryParams.has('forceTranscoding'),
@@ -96,15 +96,6 @@ const Player = ({ urlParams, queryParams }) => {
     }, []);
     const onEnded = React.useCallback(() => {
         pushToLibrary();
-        if (player.libraryItem !== null) {
-            core.transport.dispatch({
-                action: 'Ctx',
-                args: {
-                    action: 'RewindLibraryItem',
-                    args: player.libraryItem._id
-                }
-            });
-        }
         if (player.nextVideo !== null) {
             window.location.replace(
                 typeof player.nextVideo.deepLinks.player === 'string' ?

From 3710d10e298879a1ba8a6c841b38bdf09ac9b64f Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 19 Aug 2022 19:10:30 +0300
Subject: [PATCH 53/57] dispatch Ended action

---
 src/routes/Player/Player.js    |  3 ++-
 src/routes/Player/usePlayer.js | 10 +++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 9e685a95a..631964691 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -25,7 +25,7 @@ const Player = ({ urlParams, queryParams }) => {
             queryParams.has('maxAudioChannels') ? parseInt(queryParams.get('maxAudioChannels'), 10) : null
         ];
     }, [queryParams]);
-    const [player, timeUpdate, pushToLibrary] = usePlayer(urlParams);
+    const [player, timeUpdate, pushToLibrary, ended] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const streamingServer = useStreamingServer();
     const routeFocused = useRouteFocused();
@@ -95,6 +95,7 @@ const Player = ({ urlParams, queryParams }) => {
         setVideoState({ [propName]: propValue });
     }, []);
     const onEnded = React.useCallback(() => {
+        ended();
         pushToLibrary();
         if (player.nextVideo !== null) {
             window.location.replace(
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 503562c5f..e0e735bd8 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -103,8 +103,16 @@ const usePlayer = (urlParams) => {
             }
         }, 'player');
     }, []);
+    const ended = React.useCallback(() => {
+        core.transport.dispatch({
+            action: 'Player',
+            args: {
+                action: 'Ended'
+            }
+        }, 'player');
+    }, []);
     const player = useModelState({ model: 'player', action, map });
-    return [player, timeUpdate, pushToLibrary];
+    return [player, timeUpdate, pushToLibrary, ended];
 };
 
 module.exports = usePlayer;

From 0101c015ddd86b8ed5871f07413d4524e150ef0e Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 22 Aug 2022 13:00:13 +0300
Subject: [PATCH 54/57] timechanged renamed

---
 src/routes/Player/Player.js    | 4 ++--
 src/routes/Player/usePlayer.js | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 631964691..fe6481657 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -25,7 +25,7 @@ const Player = ({ urlParams, queryParams }) => {
             queryParams.has('maxAudioChannels') ? parseInt(queryParams.get('maxAudioChannels'), 10) : null
         ];
     }, [queryParams]);
-    const [player, timeUpdate, pushToLibrary, ended] = usePlayer(urlParams);
+    const [player, timeChanged, pushToLibrary, ended] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const streamingServer = useStreamingServer();
     const routeFocused = useRouteFocused();
@@ -299,7 +299,7 @@ const Player = ({ urlParams, queryParams }) => {
         if (videoState.time !== null && !isNaN(videoState.time) &&
             videoState.duration !== null && !isNaN(videoState.duration) &&
             videoState.manifest !== null && typeof videoState.manifest.name === 'string') {
-            timeUpdate(videoState.time, videoState.duration, videoState.manifest.name);
+            timeChanged(videoState.time, videoState.duration, videoState.manifest.name);
         }
     }, [videoState.time, videoState.duration, videoState.manifest]);
     React.useEffect(() => {
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index e0e735bd8..b2e3185ab 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -86,11 +86,11 @@ const usePlayer = (urlParams) => {
             };
         }
     }, [urlParams]);
-    const timeUpdate = React.useCallback((time, duration, device) => {
+    const timeChanged = React.useCallback((time, duration, device) => {
         core.transport.dispatch({
             action: 'Player',
             args: {
-                action: 'TimeUpdate',
+                action: 'TimeChanged',
                 args: { time, duration, device }
             }
         }, 'player');
@@ -112,7 +112,7 @@ const usePlayer = (urlParams) => {
         }, 'player');
     }, []);
     const player = useModelState({ model: 'player', action, map });
-    return [player, timeUpdate, pushToLibrary, ended];
+    return [player, timeChanged, pushToLibrary, ended];
 };
 
 module.exports = usePlayer;

From 28a8c9cdfafa0b216e2d95350e8ec12b7133fe67 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 22 Aug 2022 13:03:19 +0300
Subject: [PATCH 55/57] pausedChanged action sent to core

---
 src/routes/Player/Player.js    |  7 ++++++-
 src/routes/Player/usePlayer.js | 11 ++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index fe6481657..e08157426 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -25,7 +25,7 @@ const Player = ({ urlParams, queryParams }) => {
             queryParams.has('maxAudioChannels') ? parseInt(queryParams.get('maxAudioChannels'), 10) : null
         ];
     }, [queryParams]);
-    const [player, timeChanged, pushToLibrary, ended] = usePlayer(urlParams);
+    const [player, timeChanged, pausedChanged, ended, pushToLibrary] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const streamingServer = useStreamingServer();
     const routeFocused = useRouteFocused();
@@ -302,6 +302,11 @@ const Player = ({ urlParams, queryParams }) => {
             timeChanged(videoState.time, videoState.duration, videoState.manifest.name);
         }
     }, [videoState.time, videoState.duration, videoState.manifest]);
+    React.useEffect(() => {
+        if (videoState.paused !== null) {
+            pausedChanged(videoState.paused);
+        }
+    }, [videoState.paused]);
     React.useEffect(() => {
         if ((!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) &&
             (!Array.isArray(videoState.extraSubtitlesTracks) || videoState.extraSubtitlesTracks.length === 0) &&
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index b2e3185ab..9acd16396 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -111,8 +111,17 @@ const usePlayer = (urlParams) => {
             }
         }, 'player');
     }, []);
+    const pausedChanged = React.useCallback((paused) => {
+        core.transport.dispatch({
+            action: 'Player',
+            args: {
+                action: 'PausedChanged',
+                args: { paused }
+            }
+        }, 'player');
+    }, []);
     const player = useModelState({ model: 'player', action, map });
-    return [player, timeChanged, pushToLibrary, ended];
+    return [player, timeChanged, pausedChanged, ended, pushToLibrary];
 };
 
 module.exports = usePlayer;

From 5c8538a4a76a47f33f32e6128444285e8e2c1341 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 22 Aug 2022 13:07:39 +0300
Subject: [PATCH 56/57] PullUserFromAPI on init

---
 src/App/App.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/App/App.js b/src/App/App.js
index d7a8ef54a..1c39635a2 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -90,6 +90,12 @@ const App = () => {
                     action: 'PullAddonsFromAPI'
                 }
             });
+            services.core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'PullUserFromAPI'
+                }
+            });
         }
     }, [initialized]);
     return (

From 0b7659b8a4811a7cb3ec0b505f28e6b060ae9142 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 12 Sep 2022 19:43:03 +0300
Subject: [PATCH 57/57] update core-web

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bef6b08a1..211ba679e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.16.0",
                 "@sentry/browser": "6.13.3",
                 "@stremio/stremio-colors": "4.0.1",
-                "@stremio/stremio-core-web": "0.43.0",
+                "@stremio/stremio-core-web": "0.44.0",
                 "@stremio/stremio-icons": "3.0.5",
                 "@stremio/stremio-video": "0.0.20-rc.4",
                 "a-color-picker": "1.2.1",
@@ -2616,9 +2616,9 @@
             "integrity": "sha512-yT3No1gIWKLV2BhQIeSgG94EzXxmEqXJLulO+pFpziqWNUbmmEKeE+nRvW5wtoIK4SLy+v0bLd0b6HBH3KFfWw=="
         },
         "node_modules/@stremio/stremio-core-web": {
-            "version": "0.43.0",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.43.0.tgz",
-            "integrity": "sha512-EXr2PQpviUS4kF7gRUnTFDshsDh4gh/pp/ACaIgqXe6qZS4YlmPhLtXDxDKdBnulhjABW29GVul/vuuiEtff3w==",
+            "version": "0.44.0",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.44.0.tgz",
+            "integrity": "sha512-zTUS6J1RAj6OiFnSD9gTfP8Va4MsgAz9QAynP1T1rO3nVJLCy8PolJf0qZWl/KERoeWuL1IE3X8Zjk+VPMkkeA==",
             "dependencies": {
                 "@babel/runtime": "7.15.4"
             }
@@ -15765,9 +15765,9 @@
             "integrity": "sha512-yT3No1gIWKLV2BhQIeSgG94EzXxmEqXJLulO+pFpziqWNUbmmEKeE+nRvW5wtoIK4SLy+v0bLd0b6HBH3KFfWw=="
         },
         "@stremio/stremio-core-web": {
-            "version": "0.43.0",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.43.0.tgz",
-            "integrity": "sha512-EXr2PQpviUS4kF7gRUnTFDshsDh4gh/pp/ACaIgqXe6qZS4YlmPhLtXDxDKdBnulhjABW29GVul/vuuiEtff3w==",
+            "version": "0.44.0",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.44.0.tgz",
+            "integrity": "sha512-zTUS6J1RAj6OiFnSD9gTfP8Va4MsgAz9QAynP1T1rO3nVJLCy8PolJf0qZWl/KERoeWuL1IE3X8Zjk+VPMkkeA==",
             "requires": {
                 "@babel/runtime": "7.15.4"
             },
diff --git a/package.json b/package.json
index 5014e319b..ab8b42ff1 100755
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
         "@babel/runtime": "7.16.0",
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "4.0.1",
-        "@stremio/stremio-core-web": "0.43.0",
+        "@stremio/stremio-core-web": "0.44.0",
         "@stremio/stremio-icons": "3.0.5",
         "@stremio/stremio-video": "0.0.20-rc.4",
         "a-color-picker": "1.2.1",