Merge branch 'development' into feature-toast-type-info

package-lock.json

@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.16.0",
                 "@sentry/browser": "6.13.3",
                 "@stremio/stremio-colors": "5.0.1",
-                "@stremio/stremio-core-web": "0.46.0",
+                "@stremio/stremio-core-web": "0.46.1",
                 "@stremio/stremio-icons": "5.2.0",
                 "@stremio/stremio-video": "0.0.30",
                 "a-color-picker": "1.2.1",
@@ -36,7 +36,7 @@
                 "react-i18next": "^12.1.1",
                 "react-is": "18.2.0",
                 "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
-                "stremio-translations": "github:Stremio/stremio-translations#12b1307f95249496960d2a257b371db5700721e6",
+                "stremio-translations": "github:Stremio/stremio-translations#38d283adf4bbe6d29657b5023778e30af7f6b05a",
                 "url": "0.11.0",
                 "use-long-press": "^3.1.5"
             },
@@ -2969,8 +2969,9 @@
             "license": "MIT"
         },
         "node_modules/@stremio/stremio-core-web": {
-            "version": "0.46.0",
+            "version": "0.46.1",
-            "license": "MIT",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.46.1.tgz",
+            "integrity": "sha512-Xlhc0kdAkOdrEwUifMf3WiWavF9Pa5lJtxbujJsu/q6cZSuP2NptuJU8dYPSGr1Mkw2g//KYrtOl5++xGAyTQg==",
             "dependencies": {
                 "@babel/runtime": "7.16.0"
             }
@@ -12452,8 +12453,8 @@
         },
         "node_modules/stremio-translations": {
             "version": "1.44.5",
-            "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#12b1307f95249496960d2a257b371db5700721e6",
+            "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#38d283adf4bbe6d29657b5023778e30af7f6b05a",
-            "integrity": "sha512-929O9sIUph3ew4YlUfD/zoMUSAYmwrjRIS+opmft3Gi8qS36/gBrH8RYW8XvgkTon+xrgqr7hC2/QSck4tgrAA==",
+            "integrity": "sha512-O/uFENWQ/pXEw4hQ1XQ8e4g6ZeX80wrhrxZfaGq2svK2I3bC/gCe5et0lbVzFBkVefSP3o1BMrlhgoSqfQssqA==",
             "license": "MIT"
         },
         "node_modules/string_decoder": {

package.json

@@ -15,7 +15,7 @@
         "@babel/runtime": "7.16.0",
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "5.0.1",
-        "@stremio/stremio-core-web": "0.46.0",
+        "@stremio/stremio-core-web": "0.46.1",
         "@stremio/stremio-icons": "5.2.0",
         "@stremio/stremio-video": "0.0.30",
         "a-color-picker": "1.2.1",
@@ -39,7 +39,7 @@
         "react-i18next": "^12.1.1",
         "react-is": "18.2.0",
         "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
-        "stremio-translations": "github:Stremio/stremio-translations#12b1307f95249496960d2a257b371db5700721e6",
+        "stremio-translations": "github:Stremio/stremio-translations#38d283adf4bbe6d29657b5023778e30af7f6b05a",
         "url": "0.11.0",
         "use-long-press": "^3.1.5"
     },

src/App/App.js

@@ -9,6 +9,7 @@ const { NotFound } = require('stremio/routes');
 const { ToastProvider, TooltipProvider, CONSTANTS, withCoreSuspender } = require('stremio/common');
 const ServicesToaster = require('./ServicesToaster');
 const DeepLinkHandler = require('./DeepLinkHandler');
+const SearchParamsHandler = require('./SearchParamsHandler');
 const ErrorDialog = require('./ErrorDialog');
 const withProtectedRoutes = require('./withProtectedRoutes');
 const routerViewsConfig = require('./routerViewsConfig');
@@ -164,6 +165,7 @@ const App = () => {
                                 <TooltipProvider className={styles['tooltip-container']}>
                                     <ServicesToaster />
                                     <DeepLinkHandler />
+                                    <SearchParamsHandler />
                                     <RouterWithProtectedRoutes
                                         className={styles['router']}
                                         viewsConfig={routerViewsConfig}

src/App/SearchParamsHandler.js

@@ -0,0 +1,57 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const isEqual = require('lodash.isequal');
+const { withCoreSuspender, useProfile, useToast } = require('stremio/common');
+const { useServices } = require('stremio/services');
+
+const SearchParamsHandler = () => {
+    const { core } = useServices();
+    const profile = useProfile();
+    const toast = useToast();
+
+    const [searchParams, setSearchParams] = React.useState({});
+
+    const onLocationChange = () => {
+        const { origin, hash, search } = window.location;
+        const { searchParams } = new URL(`${origin}${hash.replace('#', '')}${search}`);
+
+        setSearchParams((previousSearchParams) => {
+            const currentSearchParams = Object.fromEntries(searchParams.entries());
+            return isEqual(previousSearchParams, currentSearchParams) ? previousSearchParams : currentSearchParams;
+        });
+    };
+
+    React.useEffect(() => {
+        const { streamingServerUrl } = searchParams;
+
+        if (streamingServerUrl) {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        streamingServerUrl,
+                    },
+                },
+            });
+
+            toast.show({
+                type: 'success',
+                title: `Using streaming server at ${streamingServerUrl}`,
+                timeout: 4000,
+            });
+        }
+    }, [searchParams]);
+
+    React.useEffect(() => {
+        onLocationChange();
+        window.addEventListener('hashchange', onLocationChange);
+        return () => window.removeEventListener('hashchange', onLocationChange);
+    }, []);
+
+    return null;
+};
+
+module.exports = withCoreSuspender(SearchParamsHandler);

src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js

@@ -153,7 +153,7 @@ const SearchBar = React.memo(({ className, query, active }) => {
                             localSearch?.items?.length ?
                                 <div className={styles['items']}>
                                     <div className={styles['title']}>
-                                        <div className={styles['label']}>{ t('Recommendations') }</div>
+                                        <div className={styles['label']}>{ t('SEARCH_SUGGESTIONS') }</div>
                                     </div>
                                     {
                                         localSearch.items.map(({ query, deepLinks }, index) => (

src/common/Toast/ToastItem/ToastItem.js

@@ -17,7 +17,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
     const icon = React.useMemo(() => {
         return typeof props.icon === 'string' ? props.icon :
             type === 'success' ? 'checkmark' :
-                type === 'error' ? 'warning' :
+                type === 'error' ? 'close' :
                     type === 'info' ? 'about' :
                         null;
     }, [type, props.icon]);

src/common/Toast/ToastItem/styles.less

@@ -5,30 +5,29 @@
 .toast-item-container {
     display: flex;
     flex-direction: row;
+    align-items: flex-start;
     width: 25rem;
     margin-bottom: 1rem;
-    background-color: @color-surface-light4;
     overflow: visible;
-    box-shadow: 0 0.3rem 0.5rem @color-background-dark5-40,
+    box-shadow: var(--outer-glow);
-        0 0.6rem 1rem @color-background-dark5-20;
+    background-color: var(--modal-background-color);
     pointer-events: auto;
-
+    border-radius: var(--border-radius);
+    border: 0.4px solid var(--primary-accent-color);
+    backdrop-filter: blur(10px);
+    padding: 1rem;
     &.success {
         .icon-container {
-            background-color: @color-accent3;
-
             .icon {
-                color: @color-surface-light5-90;
+                color: @color-accent3;
             }
         }
     }
 
     &.error {
         .icon-container {
-            background-color: @color-accent2;
-
             .icon {
-                color: @color-surface-light5-90;
+                color: var(--color-trakt);
             }
         }
     }
@@ -44,26 +43,25 @@
     }
 
     .icon-container {
-        flex: none;
+        border-radius: 3px;
-        align-self: stretch;
+        background-color: var(--overlay-color);
-        width: 2.5rem;
-        padding: 0.5rem;
 
         .icon {
             display: block;
             width: 100%;
             height: 100%;
-            color: @color-background-dark5-90;
+            max-width: 2rem;
         }
     }
 
     .info-container {
         flex: 1;
         align-self: stretch;
-        padding: 1rem;
+        padding: 0.2rem 1rem;
 
         .title-container {
             font-size: 1.2rem;
+            color: var(--primary-foreground-color);
 
             &:not(:last-child) {
                 margin-bottom: 0.2rem;
@@ -72,25 +70,28 @@
 
         .message-container {
             font-size: 1.1rem;
+            color: var(--primary-foreground-color);
+            opacity: 0.8;
         }
     }
 
     .close-button-container {
-        flex: none;
-        align-self: flex-start;
         width: 2rem;
         height: 2rem;
-        margin: 0.2rem;
+        border-radius: 3px;
-        padding: 0.5rem;
+        
-
-        &:hover {
-            background-color: @color-surface-light2;
-        }
-
         .icon {
             display: block;
             width: 100%;
             height: 100%;
+            color: var(--primary-foreground-color);
+            opacity: 0.4;
+        }
+
+        &:hover {
+            .icon {
+                opacity: 1;
+            }
         }
     }
 }