Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
kKaskak 2024-01-31 14:11:51 +02:00
commit 0b47712e1d
7 changed files with 96 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
package-lock.json generated
View file

@ -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",
"license": "MIT",
"version": "0.46.1",
"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",
"integrity": "sha512-929O9sIUph3ew4YlUfD/zoMUSAYmwrjRIS+opmft3Gi8qS36/gBrH8RYW8XvgkTon+xrgqr7hC2/QSck4tgrAA==",
"resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#38d283adf4bbe6d29657b5023778e30af7f6b05a",
"integrity": "sha512-O/uFENWQ/pXEw4hQ1XQ8e4g6ZeX80wrhrxZfaGq2svK2I3bC/gCe5et0lbVzFBkVefSP3o1BMrlhgoSqfQssqA==",
"license": "MIT"
},
"node_modules/string_decoder": {

4
package.json
View file

@ -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"
},

2
src/App/App.js
View file

@ -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}

57
src/App/SearchParamsHandler.js Normal file
View file

@ -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);

2
src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
View file

@ -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) => (

2
src/common/Toast/ToastItem/ToastItem.js
View file

@ -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]);

51
src/common/Toast/ToastItem/styles.less
View file

@ -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,
0 0.6rem 1rem @color-background-dark5-20;
box-shadow: var(--outer-glow);
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;
align-self: stretch;
width: 2.5rem;
padding: 0.5rem;
border-radius: 3px;
background-color: var(--overlay-color);
.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;
padding: 0.5rem;
&:hover {
background-color: @color-surface-light2;
}
border-radius: 3px;
.icon {
display: block;
width: 100%;
height: 100%;
color: var(--primary-foreground-color);
opacity: 0.4;
}
&:hover {
.icon {
opacity: 1;
}
}
}
}