Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

deep linking integrated in Search and Board

Browse source
This commit is contained in:
nklhrstv 2020-04-06 10:13:15 +03:00
parent 80837a12c2
commit c9076155a2
7 changed files with 49 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,8 +23,23 @@ const ICON_FOR_TYPE = new Map([
['other', 'ic_movies'],
]);
const MetaItem = React.memo(({ className, type, name, poster, posterShape, playIcon, progress, options, dataset, optionOnSelect, ...props }) => {
const MetaItem = React.memo(({ className, type, name, poster, posterShape, playIcon, progress, options, deepLinks, dataset, optionOnSelect, ...props }) => {
const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
const href = React.useMemo(() => {
return deepLinks ?
typeof deepLinks.player === 'string' ?
deepLinks.player
:
typeof deepLinks.meta_details_streams === 'string' ?
deepLinks.meta_details_streams
:
typeof deepLinks.meta_details_videos === 'string' ?
deepLinks.meta_details_videos
:
null
:
null;
}, [deepLinks]);
const metaItemOnClick = React.useCallback((event) => {
if (typeof props.onClick === 'function') {
props.onClick(event);
@ -58,7 +73,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
<Icon className={styles['icon']} icon={'ic_more'} />
), []);
return (
<Button title={name} {...props} className={classnames(className, styles['meta-item-container'], styles['poster-shape-poster'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} onClick={metaItemOnClick}>
<Button title={name} href={href} {...props} className={classnames(className, styles['meta-item-container'], styles['poster-shape-poster'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} onClick={metaItemOnClick}>
<div className={styles['poster-container']}>
<div className={styles['poster-image-layer']}>
<Image
@ -125,6 +140,11 @@ MetaItem.propTypes = {
playIcon: PropTypes.bool,
progress: PropTypes.number,
options: PropTypes.array,
deepLinks: PropTypes.shape({
meta_details_videos: PropTypes.string,
meta_details_streams: PropTypes.string,
player: PropTypes.string
}),
dataset: PropTypes.object,
optionOnSelect: PropTypes.func,
onClick: PropTypes.func

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

@ -8,11 +8,11 @@ const CONSTANTS = require('stremio/common/CONSTANTS');
const MetaRowPlaceholder = require('./MetaRowPlaceholder');
const styles = require('./styles');
const MetaRow = ({ className, title, message, items, itemComponent, href }) => {
const MetaRow = ({ className, title, message, items, itemComponent, deepLinks }) => {
return (
<div className={classnames(className, styles['meta-row-container'])}>
{
(typeof title === 'string' && title.length > 0) || (typeof href === 'string' && href.length > 0) ?
(typeof title === 'string' && title.length > 0) || (deepLinks && typeof deepLinks.discover === 'string') ?
<div className={styles['header-container']}>
{
typeof title === 'string' && title.length > 0 ?
@ -21,8 +21,8 @@ const MetaRow = ({ className, title, message, items, itemComponent, href }) => {
null
}
{
typeof href === 'string' && href.length > 0 ?
<Button className={styles['see-all-container']} title={'SEE ALL'} href={href}>
deepLinks && typeof deepLinks.discover === 'string' ?
<Button className={styles['see-all-container']} title={'SEE ALL'} href={deepLinks.discover}>
<div className={styles['label']}>SEE ALL</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
</Button>
@ -69,7 +69,9 @@ MetaRow.propTypes = {
posterShape: PropTypes.string
})),
itemComponent: PropTypes.elementType,
href: PropTypes.string
deepLinks: PropTypes.shape({
discover: PropTypes.string
})
};
module.exports = MetaRow;

10
src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
View file

@ -6,7 +6,7 @@ const Button = require('stremio/common/Button');
const CONSTANTS = require('stremio/common/CONSTANTS');
const styles = require('./styles');
const MetaRowPlaceholder = ({ className, title, href }) => {
const MetaRowPlaceholder = ({ className, title, deepLinks }) => {
return (
<div className={classnames(className, styles['meta-row-placeholder-container'])}>
<div className={styles['header-container']}>
@ -14,8 +14,8 @@ const MetaRowPlaceholder = ({ className, title, href }) => {
{typeof title === 'string' && title.length > 0 ? title : null}
</div>
{
typeof href === 'string' && href.length > 0 ?
<Button className={styles['see-all-container']} title={'SEE ALL'} href={href}>
deepLinks && typeof deepLinks.discover === 'string' ?
<Button className={styles['see-all-container']} title={'SEE ALL'} href={deepLinks.discover}>
<div className={styles['label']}>SEE ALL</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
</Button>
@ -40,7 +40,9 @@ const MetaRowPlaceholder = ({ className, title, href }) => {
MetaRowPlaceholder.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
href: PropTypes.string
deepLinks: PropTypes.shape({
discover: PropTypes.string
})
};
module.exports = MetaRowPlaceholder;

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

@ -24,7 +24,6 @@ const Board = () => {
null
}
{board.catalog_resources.map((catalog_resource, index) => {
const href = `#/discover/${encodeURIComponent(catalog_resource.request.base)}/${encodeURIComponent(catalog_resource.request.path.type_name)}/${encodeURIComponent(catalog_resource.request.path.id)}`;
const title = `${catalog_resource.origin} - ${catalog_resource.request.path.id} ${catalog_resource.request.path.type_name}`;
switch (catalog_resource.content.type) {
case 'Ready': {
@ -39,7 +38,7 @@ const Board = () => {
title={title}
items={catalog_resource.content.content}
itemComponent={MetaItem}
href={href}
deepLinks={catalog_resource.deepLinks}
/>
);
}
@ -51,7 +50,7 @@ const Board = () => {
className={styles['board-row']}
title={title}
message={message}
href={href}
deepLinks={catalog_resource.deepLinks}
/>
);
}
@ -61,7 +60,7 @@ const Board = () => {
key={index}
className={classnames(styles['board-row'], styles['board-row-poster'])}
title={title}
href={href}
deepLinks={catalog_resource.deepLinks}
/>
);
}

7
src/routes/Board/useBoard.js
View file

@ -1,5 +1,5 @@
const React = require('react');
const { useModelState } = require('stremio/common');
const { deepLinking, useModelState } = require('stremio/common');
const initBoardState = () => ({
selected: null,
@ -18,7 +18,7 @@ const mapBoardStateWithCtx = (board, ctx) => {
name: metaItem.name,
poster: metaItem.poster,
posterShape: metaItems[0].posterShape,
href: `#/metadetails/${encodeURIComponent(metaItem.type)}/${encodeURIComponent(metaItem.id)}` // TODO this should redirect with videoId at some cases
deepLinks: deepLinking.withMetaItem({ metaItem })
}))
}
:
@ -33,7 +33,8 @@ const mapBoardStateWithCtx = (board, ctx) => {
return origin;
}, catalog_resource.request.base);
return { request, content, origin };
const deepLinks = deepLinking.withCatalog({ request });
return { request, content, origin, deepLinks };
});
return { selected, catalog_resources };
};

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

@ -47,8 +47,6 @@ const Search = ({ queryParams }) => {
</div>
:
search.catalog_resources.map((catalog_resource, index) => {
const queryString = new URLSearchParams([['search', query]]).toString();
const href = `#/discover/${encodeURIComponent(catalog_resource.request.base)}/${encodeURIComponent(catalog_resource.request.path.type_name)}/${encodeURIComponent(catalog_resource.request.path.id)}?${queryString}`;
const title = `${catalog_resource.origin} - ${catalog_resource.request.path.id} ${catalog_resource.request.path.type_name}`;
switch (catalog_resource.content.type) {
case 'Ready': {
@ -63,7 +61,7 @@ const Search = ({ queryParams }) => {
title={title}
items={catalog_resource.content.content}
itemComponent={MetaItem}
href={href}
deepLinks={catalog_resource.deepLinks}
/>
);
}
@ -75,7 +73,7 @@ const Search = ({ queryParams }) => {
className={styles['search-row']}
title={title}
message={message}
href={href}
deepLinks={catalog_resource.deepLinks}
/>
);
}
@ -85,7 +83,7 @@ const Search = ({ queryParams }) => {
key={index}
className={classnames(styles['search-row'], styles['search-row-poster'])}
title={title}
href={href}
deepLinks={catalog_resource.deepLinks}
/>
);
}

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

@ -1,5 +1,5 @@
const React = require('react');
const { useModelState } = require('stremio/common');
const { deepLinking, useModelState } = require('stremio/common');
const initSearchState = () => ({
selected: null,
@ -18,7 +18,7 @@ const mapSearchStateWithCtx = (search, ctx) => {
name: metaItem.name,
poster: metaItem.poster,
posterShape: metaItems[0].posterShape,
href: `#/metadetails/${encodeURIComponent(metaItem.type)}/${encodeURIComponent(metaItem.id)}` // TODO this should redirect with videoId at some cases
deepLinks: deepLinking.withMetaItem({ metaItem })
}))
}
:
@ -33,7 +33,8 @@ const mapSearchStateWithCtx = (search, ctx) => {
return origin;
}, catalog_resource.request.base);
return { request, content, origin };
const deepLinks = deepLinking.withCatalog({ request });
return { request, content, origin, deepLinks };
});
return { selected, catalog_resources };
};