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' of https://github.com/Stremio/stremio-web into feat/remote-https-endpoint

Browse source
This commit is contained in:
Tim 2024-01-04 15:31:45 +01:00
commit 5a5552bc29
28 changed files with 2024 additions and 14846 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/workflows/build.yml vendored
View file

@ -3,7 +3,7 @@ name: Build
on:
push:
branches:
- '*'
- '**'
jobs:
build:

16252
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
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.45.1",
"@stremio/stremio-core-web": "0.46.0",
"@stremio/stremio-icons": "5.0.0-beta.3",
"@stremio/stremio-video": "0.0.26",
"a-color-picker": "1.2.1",

11
src/common/MetaItem/MetaItem.js
View file

@ -13,7 +13,7 @@ const useBinaryState = require('stremio/common/useBinaryState');
const { ICON_FOR_TYPE } = require('stremio/common/CONSTANTS');
const styles = require('./styles');
const MetaItem = React.memo(({ className, type, name, poster, posterShape, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, ...props }) => {
const MetaItem = React.memo(({ className, type, name, poster, posterShape, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, watched, ...props }) => {
const { t } = useTranslation();
const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
const href = React.useMemo(() => {
@ -75,6 +75,14 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, poste
:
null
}
{
watched ?
<div className={styles['watched-icon-layer']}>
<Icon className={styles['watched-icon']} name={'checkmark'} />
</div>
:
null
}
<div className={styles['poster-image-layer']}>
<Image
className={styles['poster-image']}
@ -169,6 +177,7 @@ MetaItem.propTypes = {
onDismissClick: PropTypes.func,
onPlayClick: PropTypes.func,
onClick: PropTypes.func,
watched: PropTypes.bool
};
module.exports = MetaItem;

20
src/common/MetaItem/styles.less
View file

@ -125,6 +125,26 @@
}
}
.watched-icon-layer {
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
background-color: var(--primary-accent-color);
border-radius: 50%;
margin: 0.5rem;
.watched-icon {
width: 0.75rem;
height: 0.75rem;
color: var(--primary-foreground-color);
}
}
.poster-image-layer {
position: absolute;
top: 0;

91
src/common/MetaRow/MetaRow.js
View file

@ -4,39 +4,47 @@ const React = require('react');
const ReactIs = require('react-is');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const CONSTANTS = require('stremio/common/CONSTANTS');
const useTranslate = require('stremio/common/useTranslate');
const MetaRowPlaceholder = require('./MetaRowPlaceholder');
const styles = require('./styles');
const MetaRow = ({ className, title, message, items, itemComponent, deepLinks }) => {
const { t } = useTranslation();
const MetaRow = ({ className, title, catalog, message, itemComponent }) => {
const t = useTranslate();
const catalogTitle = React.useMemo(() => {
return title ?? t.catalogTitle(catalog);
}, [title, catalog, t.catalogTitle]);
const items = React.useMemo(() => {
return catalog?.items ?? catalog?.content?.content;
}, [catalog]);
const href = React.useMemo(() => {
return catalog?.deepLinks?.discover ?? catalog?.deepLinks?.library;
}, [catalog]);
return (
<div className={classnames(className, styles['meta-row-container'])}>
{
(typeof title === 'string' && title.length > 0) || (deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string')) ?
<div className={styles['header-container']}>
{
typeof title === 'string' && title.length > 0 ?
<div className={styles['title-container']} title={title}>{title}</div>
:
null
}
{
deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ?
<Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover || deepLinks.library} tabIndex={-1}>
<div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
:
null
}
</div>
:
null
}
<div className={styles['header-container']}>
{
typeof catalogTitle === 'string' && catalogTitle.length > 0 ?
<div className={styles['title-container']} title={catalogTitle}>{catalogTitle}</div>
:
null
}
{
href ?
<Button className={styles['see-all-container']} title={t.string('BUTTON_SEE_ALL')} href={href} tabIndex={-1}>
<div className={styles['label']}>{ t.string('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
:
null
}
</div>
{
typeof message === 'string' && message.length > 0 ?
<div className={styles['message-container']} title={message}>{message}</div>
@ -69,14 +77,33 @@ MetaRow.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
message: PropTypes.string,
items: PropTypes.arrayOf(PropTypes.shape({
posterShape: PropTypes.string
})),
catalog: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
type: PropTypes.string,
addon: PropTypes.shape({
manifest: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
}),
}),
content: PropTypes.shape({
content: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.shape({
posterShape: PropTypes.string,
})),
]),
}),
items: PropTypes.arrayOf(PropTypes.shape({
posterShape: PropTypes.string,
})),
deepLinks: PropTypes.shape({
discover: PropTypes.string,
library: PropTypes.string,
}),
}),
itemComponent: PropTypes.elementType,
deepLinks: PropTypes.shape({
discover: PropTypes.string,
library: PropTypes.string
})
};
module.exports = MetaRow;

16
src/common/ModalDialog/styles.less
View file

@ -84,6 +84,7 @@
}
}
}
.action-button {
flex: 1;
display: flex;
@ -126,7 +127,6 @@
text-align: center;
color: var(--primary-foreground-color);
}
}
@media only screen and (max-width: @minimum) {
@ -137,6 +137,20 @@
max-width: initial;
z-index: 0;
padding: 0 1.5rem;
.buttons-container {
flex-direction: column;
gap: 1rem;
}
}
.action-button {
width: 100%;
.label {
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}

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

@ -3,6 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { useRouteFocused } = require('stremio-router');
@ -10,37 +11,92 @@ const Button = require('stremio/common/Button');
const TextInput = require('stremio/common/TextInput');
const useTorrent = require('stremio/common/useTorrent');
const { withCoreSuspender } = require('stremio/common/CoreSuspender');
const useSearchHistory = require('./useSearchHistory');
const useLocalSearch = require('./useLocalSearch');
const styles = require('./styles');
const useBinaryState = require('stremio/common/useBinaryState');
const SearchBar = ({ className, query, active }) => {
const SearchBar = React.memo(({ className, query, active }) => {
const { t } = useTranslation();
const routeFocused = useRouteFocused();
const searchHistory = useSearchHistory();
const localSearch = useLocalSearch();
const { createTorrentFromMagnet } = useTorrent();
const [historyOpen, openHistory, closeHistory, ] = useBinaryState(false);
const [currentQuery, setCurrentQuery] = React.useState(query || '');
const searchInputRef = React.useRef(null);
const containerRef = React.useRef(null);
const searchBarOnClick = React.useCallback(() => {
if (!active) {
window.location = '#/search';
}
}, [active]);
const searchHistoryOnClose = React.useCallback((event) => {
if (historyOpen && containerRef.current && !containerRef.current.contains(event.target)) {
closeHistory();
}
}, [historyOpen]);
React.useEffect(() => {
document.addEventListener('mousedown', searchHistoryOnClose);
return () => {
document.removeEventListener('mousedown', searchHistoryOnClose);
};
}, [searchHistoryOnClose]);
const queryInputOnChange = React.useCallback(() => {
const value = searchInputRef.current.value;
setCurrentQuery(value);
openHistory();
try {
createTorrentFromMagnet(searchInputRef.current.value);
// eslint-disable-next-line no-empty
} catch { }
}, []);
const queryInputOnSubmit = React.useCallback(() => {
if (searchInputRef.current !== null) {
const queryParams = new URLSearchParams([['search', searchInputRef.current.value]]);
window.location = `#/search?${queryParams.toString()}`;
createTorrentFromMagnet(value);
} catch (error) {
console.error('Failed to create torrent from magnet:', error);
}
}, [createTorrentFromMagnet]);
const queryInputOnSubmit = React.useCallback((event) => {
event.preventDefault();
const searchValue = `/search?search=${event.target.value}`;
setCurrentQuery(searchValue);
if (searchInputRef.current && searchValue) {
window.location.hash = searchValue;
closeHistory();
}
}, []);
const queryInputClear = React.useCallback(() => {
searchInputRef.current.value = '';
setCurrentQuery('');
window.location.hash = '/search';
}, []);
const updateLocalSearchDebounced = React.useCallback(debounce((query) => {
localSearch.search(query);
}, 250), []);
React.useEffect(() => {
updateLocalSearchDebounced(currentQuery);
}, [currentQuery]);
React.useEffect(() => {
if (routeFocused && active) {
searchInputRef.current.focus();
}
}, [routeFocused, active, query]);
}, [routeFocused, active]);
React.useEffect(() => {
return () => {
updateLocalSearchDebounced.cancel();
};
}, []);
return (
<label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}>
<div className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick} ref={containerRef}>
{
active ?
<TextInput
@ -53,18 +109,72 @@ const SearchBar = ({ className, query, active }) => {
tabIndex={-1}
onChange={queryInputOnChange}
onSubmit={queryInputOnSubmit}
onClick={openHistory}
/>
:
<div className={styles['search-input']}>
<div className={styles['placeholder-label']}>{ t('SEARCH_OR_PASTE_LINK') }</div>
</div>
}
<Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
<Icon className={styles['icon']} name={'search'} />
</Button>
</label>
{
currentQuery.length > 0 ?
<Button className={styles['submit-button-container']} onClick={queryInputClear}>
<Icon className={styles['icon']} name={'close'} />
</Button>
:
<Button className={styles['submit-button-container']}>
<Icon className={styles['icon']} name={'search'} />
</Button>
}
{
historyOpen && (searchHistory?.items?.length || localSearch?.items?.length) ?
<div className={styles['menu-container']}>
{
searchHistory?.items?.length > 0 ?
<div className={styles['items']}>
<div className={styles['title']}>
<div className={styles['label']}>{ t('STREMIO_TV_SEARCH_HISTORY_TITLE') }</div>
<button className={styles['search-history-clear']} onClick={searchHistory.clear}>
{ t('CLEAR_HISTORY') }
</button>
</div>
{
searchHistory.items.slice(0, 8).map(({ query, deepLinks }, index) => (
<Button key={index} className={styles['item']} href={deepLinks.search} onClick={closeHistory}>
{query}
</Button>
))
}
</div>
:
null
}
{
localSearch?.items?.length ?
<div className={styles['items']}>
<div className={styles['title']}>
<div className={styles['label']}>{ t('Recommendations') }</div>
</div>
{
localSearch.items.map(({ query, deepLinks }, index) => (
<Button key={index} className={styles['item']} href={deepLinks.search} onClick={closeHistory}>
{query}
</Button>
))
}
</div>
:
null
}
</div>
:
null
}
</div>
);
};
});
SearchBar.displayName = 'SearchBar';
SearchBar.propTypes = {
className: PropTypes.string,

68
src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
View file

@ -9,6 +9,8 @@
height: var(--search-bar-size);
border-radius: var(--search-bar-size);
background-color: var(--overlay-color);
position: relative;
overflow: visible;
.search-input {
flex: 1;
@ -46,4 +48,70 @@
opacity: 0.6;
}
}
.menu-container {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: auto;
z-index: 10;
padding: 1rem;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 1.5rem;
background-color: var(--modal-background-color);
border-radius: var(--border-radius);
.label {
font-size: 0.9rem;
color: var(--primary-foreground-color);
}
.title {
display: flex;
justify-content: space-between;
width: 100%;
opacity: 0.8;
padding-bottom: 1rem;
.search-history-clear {
cursor: pointer;
color: var(--primary-foreground-color);
font-size: 0.9rem;
&:hover {
opacity: 0.6;
}
}
}
.items {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
.item {
width: 90%;
color: var(--primary-foreground-color);
text-align: left;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
width: 100%;
cursor: pointer;
z-index: 10;
&:hover {
background-color: var(--secondary-background-color);
}
}
}
}
}

2
src/common/NavBar/HorizontalNavBar/SearchBar/useLocalSearch.d.ts vendored Normal file
View file

@ -0,0 +1,2 @@
declare const useLocalSearch: () => { items: LocalSearchItem[], search: (query: string) => void };
export = useLocalSearch;

38
src/common/NavBar/HorizontalNavBar/SearchBar/useLocalSearch.js Normal file
View file

@ -0,0 +1,38 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useServices } = require('stremio/services');
const useModelState = require('stremio/common/useModelState');
const useLocalSearch = () => {
const { core } = useServices();
const action = React.useMemo(() => ({
action: 'Load',
args: {
model: 'LocalSearch',
}
}), []);
const { items } = useModelState({ model: 'local_search', action });
const search = React.useCallback((query) => {
core.transport.dispatch({
action: 'Search',
args: {
action: 'Search',
args: {
searchQuery: query,
maxResults: 5
}
},
});
}, []);
return {
items,
search,
};
};
module.exports = useLocalSearch;

2
src/common/NavBar/HorizontalNavBar/SearchBar/useSearchHistory.d.ts vendored Normal file
View file

@ -0,0 +1,2 @@
declare const useSearchHistory: () => { items: SearchHistory, clear: () => void };
export = useSearchHistory;

26
src/common/NavBar/HorizontalNavBar/SearchBar/useSearchHistory.js Normal file
View file

@ -0,0 +1,26 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const useModelState = require('stremio/common/useModelState');
const { useServices } = require('stremio/services');
const useSearchHistory = () => {
const { core } = useServices();
const { searchHistory: items } = useModelState({ model: 'ctx' });
const clear = React.useCallback(() => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'ClearSearchHistory',
},
});
}, []);
return {
items,
clear,
};
};
module.exports = useSearchHistory;

4
src/common/index.js
View file

@ -32,7 +32,6 @@ const getVisibleChildrenRange = require('./getVisibleChildrenRange');
const interfaceLanguages = require('./interfaceLanguages.json');
const languageNames = require('./languageNames.json');
const routesRegexp = require('./routesRegexp');
const translateOption = require('./translateOption');
const useAnimationFrame = require('./useAnimationFrame');
const useBinaryState = require('./useBinaryState');
const useFullscreen = require('./useFullscreen');
@ -43,6 +42,7 @@ const useOnScrollToBottom = require('./useOnScrollToBottom');
const useProfile = require('./useProfile');
const useStreamingServer = require('./useStreamingServer');
const useTorrent = require('./useTorrent');
const useTranslate = require('./useTranslate');
const platform = require('./platform');
const EventModal = require('./EventModal');
@ -83,7 +83,6 @@ module.exports = {
interfaceLanguages,
languageNames,
routesRegexp,
translateOption,
useAnimationFrame,
useBinaryState,
useFullscreen,
@ -94,6 +93,7 @@ module.exports = {
useProfile,
useStreamingServer,
useTorrent,
useTranslate,
platform,
EventModal,
};

15
src/common/translateOption.js
View file

@ -1,15 +0,0 @@
// Copyright (C) 2017-2023 Smart code 203358507
const { t } = require('i18next');
const translateOption = (option, translateKeyPrefix = '') => {
const translateKey = `${translateKeyPrefix}${option}`;
const translateValue = t(translateKey, {
defaultValue: t(translateKey.toUpperCase(), {
defaultValue: null
})
});
return translateValue ?? option.charAt(0).toUpperCase() + option.slice(1);
};
module.exports = translateOption;

43
src/common/useTranslate.js Normal file
View file

@ -0,0 +1,43 @@
// Copyright (C) 2017-2023 Smart code 203358507
const { useCallback } = require('react');
const { useTranslation } = require('react-i18next');
const useTranslate = () => {
const { t } = useTranslation();
const string = useCallback((key) => t(key), [t]);
const stringWithPrefix = useCallback((value, prefix, fallback = null) => {
const key = `${prefix}${value}`;
const defaultValue = fallback ?? value.charAt(0).toUpperCase() + value.slice(1);
return t(key, {
defaultValue,
});
}, [t]);
const catalogTitle = useCallback(({ addon, id, name, type } = {}, withType = true) => {
if (addon && id && name) {
const partialKey = `${addon.manifest.id}/${id}`;
const translatedName = stringWithPrefix(partialKey, 'CATALOG_', name);
if (type && withType) {
const translatedType = stringWithPrefix(type, 'TYPE_');
return `${translatedName} - ${translatedType}`;
}
return translatedName;
}
return null;
}, [stringWithPrefix]);
return {
string,
stringWithPrefix,
catalogTitle,
};
};
module.exports = useTranslate;

6
src/routes/Addons/Addon/styles.less
View file

@ -84,7 +84,6 @@
flex-basis: 100%;
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 4.8em;
color: var(--primary-foreground-color);
}
}
@ -202,6 +201,11 @@
.info-container {
margin-left: 0.5rem;
padding: 0;
.name-container {
max-height: none;
font-size: 1.3rem;
}
}
.buttons-container {

28
src/routes/Addons/useSelectableInputs.js
View file

@ -1,18 +1,17 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { t } = require('i18next');
const { translateOption } = require('stremio/common');
const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (installedAddons, remoteAddons) => {
const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
const catalogSelect = {
title: t('SELECT_CATALOG'),
title: t.string('SELECT_CATALOG'),
options: remoteAddons.selectable.catalogs
.concat(installedAddons.selectable.catalogs)
.map(({ name, deepLinks }) => ({
value: deepLinks.addons,
label: translateOption(name, 'ADDON_'),
title: translateOption(name, 'ADDON_'),
label: t.stringWithPrefix(name, 'ADDON_'),
title: t.stringWithPrefix(name, 'ADDON_'),
})),
selected: remoteAddons.selectable.catalogs
.concat(installedAddons.selectable.catalogs)
@ -22,7 +21,7 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
() => {
const selectableCatalog = remoteAddons.selectable.catalogs
.find(({ id }) => id === remoteAddons.selected.request.path.id);
return selectableCatalog ? translateOption(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
return selectableCatalog ? t.stringWithPrefix(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
}
:
null,
@ -31,16 +30,16 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
}
};
const typeSelect = {
title: t('SELECT_TYPE'),
title: t.string('SELECT_TYPE'),
options: installedAddons.selected !== null ?
installedAddons.selectable.types.map(({ type, deepLinks }) => ({
value: deepLinks.addons,
label: type !== null ? translateOption(type, 'TYPE_') : t('TYPE_ALL')
label: type !== null ? t.stringWithPrefix(type, 'TYPE_') : t.string('TYPE_ALL')
}))
:
remoteAddons.selectable.types.map(({ type, deepLinks }) => ({
value: deepLinks.addons,
label: translateOption(type, 'TYPE_')
label: t.stringWithPrefix(type, 'TYPE_')
})),
selected: installedAddons.selected !== null ?
installedAddons.selectable.types
@ -53,12 +52,12 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
renderLabelText: () => {
return installedAddons.selected !== null ?
installedAddons.selected.request.type === null ?
t('TYPE_ALL')
t.string('TYPE_ALL')
:
translateOption(installedAddons.selected.request.type, 'TYPE_')
t.stringWithPrefix(installedAddons.selected.request.type, 'TYPE_')
:
remoteAddons.selected !== null ?
translateOption(remoteAddons.selected.request.path.type, 'TYPE_')
t.stringWithPrefix(remoteAddons.selected.request.path.type, 'TYPE_')
:
typeSelect.title;
},
@ -70,8 +69,9 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
};
const useSelectableInputs = (installedAddons, remoteAddons) => {
const t = useTranslate();
const selectableInputs = React.useMemo(() => {
return mapSelectableInputs(installedAddons, remoteAddons);
return mapSelectableInputs(installedAddons, remoteAddons, t);
}, [installedAddons, remoteAddons]);
return selectableInputs;
};

13
src/routes/Board/Board.js
View file

@ -46,9 +46,8 @@ const Board = () => {
<MetaRow
className={classnames(styles['board-row'], styles['continue-watching-row'], 'animation-fade-in')}
title={t('BOARD_CONTINUE_WATCHING')}
items={continueWatchingPreview.items}
catalog={continueWatchingPreview}
itemComponent={ContinueWatchingItem}
deepLinks={continueWatchingPreview.deepLinks}
/>
:
null
@ -60,10 +59,8 @@ const Board = () => {
<MetaRow
key={index}
className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`], 'animation-fade-in')}
title={catalog.title}
items={catalog.content.content}
catalog={catalog}
itemComponent={MetaItem}
deepLinks={catalog.deepLinks}
/>
);
}
@ -72,9 +69,8 @@ const Board = () => {
<MetaRow
key={index}
className={classnames(styles['board-row'], 'animation-fade-in')}
title={catalog.title}
catalog={catalog}
message={catalog.content.content}
deepLinks={catalog.deepLinks}
/>
);
}
@ -83,8 +79,7 @@ const Board = () => {
<MetaRow.Placeholder
key={index}
className={classnames(styles['board-row'], styles['board-row-poster'], 'animation-fade-in')}
title={catalog.title}
deepLinks={catalog.deepLinks}
catalog={catalog}
/>
);
}

25
src/routes/Discover/useSelectableInputs.js
View file

@ -1,22 +1,21 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const { translateOption } = require('stremio/common');
const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (discover, t) => {
const typeSelect = {
title: t('SELECT_TYPE'),
title: t.string('SELECT_TYPE'),
options: discover.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.discover,
label: translateOption(type, 'TYPE_')
label: t.stringWithPrefix(type, 'TYPE_')
})),
selected: discover.selectable.types
.filter(({ selected }) => selected)
.map(({ deepLinks }) => deepLinks.discover),
renderLabelText: discover.selected !== null ?
() => translateOption(discover.selected.request.path.type, 'TYPE_')
() => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
:
null,
onSelect: (event) => {
@ -24,11 +23,11 @@ const mapSelectableInputs = (discover, t) => {
}
};
const catalogSelect = {
title: t('SELECT_CATALOG'),
title: t.string('SELECT_CATALOG'),
options: discover.selectable.catalogs
.map(({ name, addon, deepLinks }) => ({
.map(({ id, name, addon, deepLinks }) => ({
value: deepLinks.discover,
label: name,
label: t.catalogTitle({ addon, id, name }),
title: `${name} (${addon.manifest.name})`
})),
selected: discover.selectable.catalogs
@ -38,7 +37,7 @@ const mapSelectableInputs = (discover, t) => {
() => {
const selectableCatalog = discover.selectable.catalogs
.find(({ id }) => id === discover.selected.request.path.id);
return selectableCatalog ? selectableCatalog.name : discover.selected.request.path.id;
return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id;
}
:
null,
@ -47,10 +46,10 @@ const mapSelectableInputs = (discover, t) => {
}
};
const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => ({
title: translateOption(name, 'SELECT_'),
title: t.stringWithPrefix(name, 'SELECT_'),
isRequired: isRequired,
options: options.map(({ value, deepLinks }) => ({
label: typeof value === 'string' ? translateOption(value) : t('NONE'),
label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
value: JSON.stringify({
href: deepLinks.discover,
value
@ -63,7 +62,7 @@ const mapSelectableInputs = (discover, t) => {
value
})),
renderLabelText: options.some(({ selected, value }) => selected && value === null) ?
() => translateOption(name, 'SELECT_')
() => t.stringWithPrefix(name, 'SELECT_')
:
null,
onSelect: (event) => {
@ -75,7 +74,7 @@ const mapSelectableInputs = (discover, t) => {
};
const useSelectableInputs = (discover) => {
const { t } = useTranslation();
const t = useTranslate();
const selectableInputs = React.useMemo(() => {
return mapSelectableInputs(discover, t);
}, [discover.selected, discover.selectable]);

13
src/routes/Library/useSelectableInputs.js
View file

@ -1,16 +1,15 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const { translateOption } = require('stremio/common');
const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (library, t) => {
const typeSelect = {
title: t('SELECT_TYPE'),
title: t.string('SELECT_TYPE'),
options: library.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.library,
label: type === null ? t('TYPE_ALL') : translateOption(type, 'TYPE_')
label: type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(type, 'TYPE_')
})),
selected: library.selectable.types
.filter(({ selected }) => selected)
@ -20,11 +19,11 @@ const mapSelectableInputs = (library, t) => {
}
};
const sortSelect = {
title: t('SELECT_SORT'),
title: t.string('SELECT_SORT'),
options: library.selectable.sorts
.map(({ sort, deepLinks }) => ({
value: deepLinks.library,
label: translateOption(sort, 'SORT_')
label: t.stringWithPrefix(sort, 'SORT_')
})),
selected: library.selectable.sorts
.filter(({ selected }) => selected)
@ -51,7 +50,7 @@ const mapSelectableInputs = (library, t) => {
};
const useSelectableInputs = (library) => {
const { t } = useTranslation();
const t = useTranslate();
const selectableInputs = React.useMemo(() => {
return mapSelectableInputs(library, t);
}, [library]);

6
src/routes/MetaDetails/StreamsList/Stream/styles.less
View file

@ -110,6 +110,12 @@
.description-container {
font-size: 0.9rem;
}
.info-container {
.addon-name {
font-size: 0.9rem;
}
}
}
}

12
src/routes/Search/Search.js
View file

@ -90,10 +90,8 @@ const Search = ({ queryParams }) => {
<MetaRow
key={index}
className={classnames(styles['search-row'], styles[`search-row-${catalog.content.content[0].posterShape}`], 'animation-fade-in')}
title={catalog.title}
items={catalog.content.content}
catalog={catalog}
itemComponent={MetaItem}
deepLinks={catalog.deepLinks}
/>
);
}
@ -102,9 +100,8 @@ const Search = ({ queryParams }) => {
<MetaRow
key={index}
className={classnames(styles['search-row'], 'animation-fade-in')}
title={catalog.title}
catalog={catalog}
message={catalog.content.content}
deepLinks={catalog.deepLinks}
/>
);
}
@ -113,8 +110,7 @@ const Search = ({ queryParams }) => {
<MetaRow.Placeholder
key={index}
className={classnames(styles['search-row'], styles['search-row-poster'], 'animation-fade-in')}
title={catalog.title}
deepLinks={catalog.deepLinks}
catalog={catalog}
/>
);
}
@ -131,7 +127,7 @@ Search.propTypes = {
};
const SearchFallback = ({ queryParams }) => (
<MainNavBars className={styles['search-container']} route={'search'} query={queryParams.get('search')} />
<MainNavBars className={styles['search-container']} route={'search'} query={queryParams.get('search') ?? queryParams.get('query')} />
);
SearchFallback.propTypes = Search.propTypes;

5
src/routes/Search/useSearch.js
View file

@ -32,14 +32,15 @@ const useSearch = (queryParams) => {
// };
// }, [queryParams.get('search')]);
const action = React.useMemo(() => {
if (queryParams.has('search') && queryParams.get('search').length > 0) {
const query = queryParams.get('search') ?? queryParams.get('query');
if (query?.length > 0) {
return {
action: 'Load',
args: {
model: 'CatalogsWithExtra',
args: {
extra: [
['search', queryParams.get('search')]
['search', query]
]
}
}

4
src/services/KeyboardShortcuts/KeyboardShortcuts.js
View file

@ -35,12 +35,12 @@ function KeyboardShortcuts() {
}
case 'Digit4': {
event.preventDefault();
window.location = '#/settings';
window.location = '#/addons';
break;
}
case 'Digit5': {
event.preventDefault();
window.location = '#/addons';
window.location = '#/settings';
break;
}
case 'Backspace': {

10
src/types/models/Ctx.d.ts vendored
View file

@ -58,7 +58,17 @@ type NotificationItem = {
videoReleased: string,
}
type SearchHistoryItem = {
query: string,
deepLinks: {
search: string,
},
};
type SearchHistory = SearchHistoryItem[];
type Ctx = {
profile: Profile,
notifications: Notifications,
searchHistory: SearchHistory,
};

10
src/types/models/LocalSearch.d.ts vendored Normal file
View file

@ -0,0 +1,10 @@
type LocalSearchItem = {
query: string,
deepLinks: {
search: string,
},
};
type LocalSearch = {
items: LocalSearchItem[],
};

4
src/types/types.d.ts vendored
View file

@ -54,7 +54,9 @@ type BehaviorHints = {
type PosterShape = 'square' | 'landscape' | 'poster' | null;
type Catalog<T, D = any> = {
title?: string,
label?: string,
name?: string,
type?: string,
content: T,
installed?: boolean,
deepLinks?: D,