mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 17:15:48 +00:00
added context menu to steam list items with ability to copy stream infohash. switch steam to use Popup, just like Video
This commit is contained in:
Namyts
parent
10c878871f
commit
179afa6780
3 changed files with 349 additions and 177 deletions
|
|
@ -4,47 +4,93 @@ const React = require('react');
|
|||
const PropTypes = require('prop-types');
|
||||
const classnames = require('classnames');
|
||||
const { default: Icon } = require('@stremio/stremio-icons/react');
|
||||
const { Button, Image, useProfile, platform, useToast } = require('stremio/common');
|
||||
const {
|
||||
Button,
|
||||
Image,
|
||||
useProfile,
|
||||
platform,
|
||||
useToast,
|
||||
Popup,
|
||||
useBinaryState,
|
||||
} = require('stremio/common');
|
||||
const { useServices } = require('stremio/services');
|
||||
const StreamPlaceholder = require('./StreamPlaceholder');
|
||||
const { t } = require('i18next');
|
||||
|
||||
const styles = require('./styles');
|
||||
|
||||
const Stream = ({ className, videoId, videoReleased, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
|
||||
const Stream = ({
|
||||
className,
|
||||
videoId,
|
||||
videoReleased,
|
||||
addonName,
|
||||
name,
|
||||
description,
|
||||
thumbnail,
|
||||
progress,
|
||||
deepLinks,
|
||||
infoHash,
|
||||
...props
|
||||
}) => {
|
||||
const profile = useProfile();
|
||||
const toast = useToast();
|
||||
const { core } = useServices();
|
||||
|
||||
const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
|
||||
|
||||
const popupLabelOnMouseUp = React.useCallback((event) => {
|
||||
if (!event.nativeEvent.togglePopupPrevented) {
|
||||
if (event.nativeEvent.ctrlKey || event.nativeEvent.button === 2) {
|
||||
event.preventDefault();
|
||||
toggleMenu();
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
const popupLabelOnContextMenu = React.useCallback((event) => {
|
||||
if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}, [toggleMenu]);
|
||||
const popupLabelOnLongPress = React.useCallback((event) => {
|
||||
if (event.nativeEvent.pointerType !== 'mouse' && !event.nativeEvent.togglePopupPrevented) {
|
||||
toggleMenu();
|
||||
}
|
||||
}, [toggleMenu]);
|
||||
const popupMenuOnPointerDown = React.useCallback((event) => {
|
||||
event.nativeEvent.togglePopupPrevented = true;
|
||||
}, []);
|
||||
const popupMenuOnContextMenu = React.useCallback((event) => {
|
||||
event.nativeEvent.togglePopupPrevented = true;
|
||||
}, []);
|
||||
const popupMenuOnClick = React.useCallback((event) => {
|
||||
event.nativeEvent.togglePopupPrevented = true;
|
||||
}, []);
|
||||
const popupMenuOnKeyDown = React.useCallback((event) => {
|
||||
event.nativeEvent.buttonClickPrevented = true;
|
||||
}, []);
|
||||
|
||||
const href = React.useMemo(() => {
|
||||
return deepLinks ?
|
||||
deepLinks.externalPlayer ?
|
||||
deepLinks.externalPlayer.web ?
|
||||
deepLinks.externalPlayer.web
|
||||
:
|
||||
deepLinks.externalPlayer.openPlayer ?
|
||||
deepLinks.externalPlayer.openPlayer[platform.name] ?
|
||||
deepLinks.externalPlayer.openPlayer[platform.name]
|
||||
:
|
||||
deepLinks.externalPlayer.playlist
|
||||
:
|
||||
deepLinks.player
|
||||
:
|
||||
deepLinks.player
|
||||
:
|
||||
null;
|
||||
return deepLinks
|
||||
? deepLinks.externalPlayer
|
||||
? deepLinks.externalPlayer.web
|
||||
? deepLinks.externalPlayer.web
|
||||
: deepLinks.externalPlayer.openPlayer
|
||||
? deepLinks.externalPlayer.openPlayer[platform.name]
|
||||
? deepLinks.externalPlayer.openPlayer[platform.name]
|
||||
: deepLinks.externalPlayer.playlist
|
||||
: deepLinks.player
|
||||
: deepLinks.player
|
||||
: null;
|
||||
}, [deepLinks]);
|
||||
|
||||
const download = React.useMemo(() => {
|
||||
return href === deepLinks?.externalPlayer?.playlist ?
|
||||
deepLinks.externalPlayer.fileName
|
||||
:
|
||||
null;
|
||||
return href === deepLinks?.externalPlayer?.playlist
|
||||
? deepLinks.externalPlayer.fileName
|
||||
: null;
|
||||
}, [href, deepLinks]);
|
||||
|
||||
const target = React.useMemo(() => {
|
||||
return href === deepLinks?.externalPlayer?.web ?
|
||||
'_blank'
|
||||
:
|
||||
null;
|
||||
return href === deepLinks?.externalPlayer?.web ? '_blank' : null;
|
||||
}, [href, deepLinks]);
|
||||
|
||||
const markVideoAsWatched = React.useCallback(() => {
|
||||
|
|
@ -53,68 +99,136 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
|
|||
action: 'MetaDetails',
|
||||
args: {
|
||||
action: 'MarkVideoAsWatched',
|
||||
args: [{ id: videoId, released: videoReleased }, true]
|
||||
}
|
||||
args: [{ id: videoId, released: videoReleased }, true],
|
||||
},
|
||||
});
|
||||
}
|
||||
}, [videoId, videoReleased]);
|
||||
|
||||
const onClick = React.useCallback((event) => {
|
||||
if (profile.settings.playerType !== null) {
|
||||
markVideoAsWatched();
|
||||
const onClick = React.useCallback(
|
||||
(event) => {
|
||||
if (profile.settings.playerType !== null) {
|
||||
markVideoAsWatched();
|
||||
toast.show({
|
||||
type: 'success',
|
||||
title: 'Stream opened in external player',
|
||||
timeout: 4000,
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof props.onClick === 'function') {
|
||||
props.onClick(event);
|
||||
}
|
||||
},
|
||||
[props.onClick, profile.settings, markVideoAsWatched]
|
||||
);
|
||||
|
||||
const copyInfoHashToClipboard = React.useCallback((event) => {
|
||||
event.preventDefault();
|
||||
if (infoHash && navigator?.clipboard) {
|
||||
navigator?.clipboard?.writeText(infoHash);
|
||||
toast.show({
|
||||
type: 'success',
|
||||
title: 'Stream opened in external player',
|
||||
timeout: 4000
|
||||
title: t('PLAYER_COPY_DOWNLOAD_LINK_SUCCESS'),
|
||||
timeout: 4000,
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (typeof props.onClick === 'function') {
|
||||
props.onClick(event);
|
||||
}
|
||||
}, [props.onClick, profile.settings, markVideoAsWatched]);
|
||||
const renderThumbnailFallback = React.useCallback(
|
||||
() => (
|
||||
<Icon className={styles['placeholder-icon']} name={'ic_broken_link'} />
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const onContextMenu = React.useCallback((event) => {
|
||||
if (typeof props.onContextMenu === 'function') {
|
||||
props.onContextMenu(event);
|
||||
}
|
||||
}, [props.onContextMenu]);
|
||||
const renderLabel = React.useMemo(
|
||||
() =>
|
||||
function renderLabel({ className, thumbnail, progress, children, ...props }) {
|
||||
return (
|
||||
<Button
|
||||
className={classnames(className, styles['stream-container'])}
|
||||
title={addonName}
|
||||
download={download}
|
||||
target={target}
|
||||
onClick={onClick}
|
||||
{...props}
|
||||
>
|
||||
<div className={styles['info-container']}>
|
||||
{typeof thumbnail === 'string' && thumbnail.length > 0 ? (
|
||||
<div
|
||||
className={styles['thumbnail-container']}
|
||||
title={name || addonName}
|
||||
>
|
||||
<Image
|
||||
className={styles['thumbnail']}
|
||||
src={thumbnail}
|
||||
alt={' '}
|
||||
renderFallback={renderThumbnailFallback}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={styles['addon-name-container']}
|
||||
title={name || addonName}
|
||||
>
|
||||
<div className={styles['addon-name']}>
|
||||
{name || addonName}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{progress !== null && !isNaN(progress) && progress > 0 ? (
|
||||
<div className={styles['progress-bar-container']}>
|
||||
<div
|
||||
className={styles['progress-bar']}
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
<div className={styles['progress-bar-background']} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div
|
||||
className={styles['description-container']}
|
||||
title={description}
|
||||
>
|
||||
{description}
|
||||
</div>
|
||||
<Icon className={styles['icon']} name={'play'} />
|
||||
{children}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const renderThumbnailFallback = React.useCallback(() => (
|
||||
<Icon className={styles['placeholder-icon']} name={'ic_broken_link'} />
|
||||
), []);
|
||||
const renderMenu = function renderMenu() {
|
||||
return (
|
||||
<div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}>
|
||||
<Button className={styles['context-menu-option-container']} title={'Play'} onClick={onClick}>
|
||||
<div className={styles['context-menu-option-label']}>{t('CTX_PLAY')}</div>
|
||||
</Button>
|
||||
{infoHash && <Button className={styles['context-menu-option-container']} title={'infoHash'} onClick={copyInfoHashToClipboard}>
|
||||
<div className={styles['context-menu-option-label']}>{t('CTX_COPY_INFOHASH')}</div>
|
||||
</Button>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick} onContextMenu={onContextMenu}>
|
||||
<div className={styles['info-container']}>
|
||||
{
|
||||
typeof thumbnail === 'string' && thumbnail.length > 0 ?
|
||||
<div className={styles['thumbnail-container']} title={name || addonName}>
|
||||
<Image
|
||||
className={styles['thumbnail']}
|
||||
src={thumbnail}
|
||||
alt={' '}
|
||||
renderFallback={renderThumbnailFallback}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
<div className={styles['addon-name-container']} title={name || addonName}>
|
||||
<div className={styles['addon-name']}>{name || addonName}</div>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
progress !== null && !isNaN(progress) && progress > 0 ?
|
||||
<div className={styles['progress-bar-container']}>
|
||||
<div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
|
||||
<div className={styles['progress-bar-background']} />
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
<div className={styles['description-container']} title={description}>{description}</div>
|
||||
<Icon className={styles['icon']} name={'play'} />
|
||||
</Button>
|
||||
<Popup
|
||||
className={className}
|
||||
thumbnail={thumbnail}
|
||||
progress={progress}
|
||||
href={href}
|
||||
{...props}
|
||||
onMouseUp={popupLabelOnMouseUp}
|
||||
onLongPress={popupLabelOnLongPress}
|
||||
onContextMenu={popupLabelOnContextMenu}
|
||||
open={menuOpen}
|
||||
onCloseRequest={closeMenu}
|
||||
renderLabel={renderLabel}
|
||||
renderMenu={renderMenu}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -143,11 +257,11 @@ Stream.propTypes = {
|
|||
windows: PropTypes.string,
|
||||
macos: PropTypes.string,
|
||||
linux: PropTypes.string,
|
||||
})
|
||||
})
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
onClick: PropTypes.func,
|
||||
onContextMenu: PropTypes.func
|
||||
infoHash: PropTypes.string,
|
||||
};
|
||||
|
||||
module.exports = Stream;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
|
||||
@import (reference) '~stremio/common/screen-sizes.less';
|
||||
|
||||
:import('~stremio/common/Popup/styles.less') {
|
||||
context-menu-container: menu-container;
|
||||
menu-direction-top-left: menu-direction-top-left;
|
||||
menu-direction-bottom-left: menu-direction-bottom-left;
|
||||
menu-direction-top-right: menu-direction-top-right;
|
||||
menu-direction-bottom-right: menu-direction-bottom-right;
|
||||
}
|
||||
|
||||
.stream-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -105,6 +113,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
.context-menu-container {
|
||||
max-width: calc(90% - 1.5rem);
|
||||
z-index: 2;
|
||||
|
||||
.context-menu-content {
|
||||
--spatial-navigation-contain: contain;
|
||||
|
||||
.context-menu-option-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--overlay-color);
|
||||
}
|
||||
|
||||
.context-menu-option-label {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color:var(--primary-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @small) {
|
||||
.stream-container {
|
||||
.description-container {
|
||||
|
|
@ -128,3 +163,29 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @minimum) {
|
||||
.video-container {
|
||||
.context-menu-container {
|
||||
&.menu-direction-top-left,
|
||||
&.menu-direction-bottom-left {
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
&.menu-direction-top-right,
|
||||
&.menu-direction-bottom-right {
|
||||
left: 1.5rem;
|
||||
}
|
||||
|
||||
&.menu-direction-top-left,
|
||||
&.menu-direction-top-right {
|
||||
bottom: 90%;
|
||||
}
|
||||
|
||||
&.menu-direction-bottom-left,
|
||||
&.menu-direction-bottom-right {
|
||||
top: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
|
|||
const classnames = require('classnames');
|
||||
const { useTranslation } = require('react-i18next');
|
||||
const { default: Icon } = require('@stremio/stremio-icons/react');
|
||||
const { Button, Image, Multiselect, useToast } = require('stremio/common');
|
||||
const { Button, Image, Multiselect } = require('stremio/common');
|
||||
const { useServices } = require('stremio/services');
|
||||
const Stream = require('./Stream');
|
||||
const styles = require('./styles');
|
||||
|
|
@ -15,7 +15,6 @@ const ALL_ADDONS_KEY = 'ALL';
|
|||
const StreamsList = ({ className, video, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const { core } = useServices();
|
||||
const toast = useToast();
|
||||
const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
|
||||
const onAddonSelected = React.useCallback((event) => {
|
||||
setSelectedAddon(event.value);
|
||||
|
|
@ -38,36 +37,25 @@ const StreamsList = ({ className, video, ...props }) => {
|
|||
core.transport.analytics({
|
||||
event: 'StreamClicked',
|
||||
args: {
|
||||
stream
|
||||
}
|
||||
stream,
|
||||
},
|
||||
});
|
||||
},
|
||||
onContextMenu: (e) => {
|
||||
e.preventDefault();
|
||||
if(stream?.infoHash && navigator?.clipboard) {
|
||||
stream?.infoHash && navigator?.clipboard?.writeText(stream.infoHash);
|
||||
toast.show({
|
||||
type: 'success',
|
||||
title: 'Copied infohash to clipboard',
|
||||
timeout: 4000
|
||||
});
|
||||
}
|
||||
},
|
||||
addonName: streams.addon.manifest.name
|
||||
}))
|
||||
addonName: streams.addon.manifest.name,
|
||||
})),
|
||||
};
|
||||
|
||||
return streamsByAddon;
|
||||
}, {});
|
||||
}, [props.streams]);
|
||||
const filteredStreams = React.useMemo(() => {
|
||||
return selectedAddon === ALL_ADDONS_KEY ?
|
||||
Object.values(streamsByAddon).map(({ streams }) => streams).flat(1)
|
||||
:
|
||||
streamsByAddon[selectedAddon] ?
|
||||
streamsByAddon[selectedAddon].streams
|
||||
:
|
||||
[];
|
||||
return selectedAddon === ALL_ADDONS_KEY
|
||||
? Object.values(streamsByAddon)
|
||||
.map(({ streams }) => streams)
|
||||
.flat(1)
|
||||
: streamsByAddon[selectedAddon]
|
||||
? streamsByAddon[selectedAddon].streams
|
||||
: [];
|
||||
}, [streamsByAddon, selectedAddon]);
|
||||
const selectableOptions = React.useMemo(() => {
|
||||
return {
|
||||
|
|
@ -76,97 +64,106 @@ const StreamsList = ({ className, video, ...props }) => {
|
|||
{
|
||||
value: ALL_ADDONS_KEY,
|
||||
label: t('ALL_ADDONS'),
|
||||
title: t('ALL_ADDONS')
|
||||
title: t('ALL_ADDONS'),
|
||||
},
|
||||
...Object.keys(streamsByAddon).map((transportUrl) => ({
|
||||
value: transportUrl,
|
||||
label: streamsByAddon[transportUrl].addon.manifest.name,
|
||||
title: streamsByAddon[transportUrl].addon.manifest.name,
|
||||
}))
|
||||
})),
|
||||
],
|
||||
selected: [selectedAddon],
|
||||
onSelect: onAddonSelected
|
||||
onSelect: onAddonSelected,
|
||||
};
|
||||
}, [streamsByAddon, selectedAddon]);
|
||||
return (
|
||||
<div className={classnames(className, styles['streams-list-container'])}>
|
||||
{
|
||||
props.streams.length === 0 ?
|
||||
<div className={styles['message-container']}>
|
||||
<Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
|
||||
<div className={styles['label']}>No addons were requested for streams!</div>
|
||||
{props.streams.length === 0 ? (
|
||||
<div className={styles['message-container']}>
|
||||
<Image
|
||||
className={styles['image']}
|
||||
src={require('/images/empty.png')}
|
||||
alt={' '}
|
||||
/>
|
||||
<div className={styles['label']}>
|
||||
No addons were requested for streams!
|
||||
</div>
|
||||
:
|
||||
props.streams.every((streams) => streams.content.type === 'Err') ?
|
||||
<div className={styles['message-container']}>
|
||||
<Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
|
||||
<div className={styles['label']}>{t('NO_STREAM')}</div>
|
||||
</div>
|
||||
:
|
||||
filteredStreams.length === 0 ?
|
||||
<div className={styles['streams-container']}>
|
||||
<Stream.Placeholder />
|
||||
<Stream.Placeholder />
|
||||
</div>
|
||||
) : props.streams.every((streams) => streams.content.type === 'Err') ? (
|
||||
<div className={styles['message-container']}>
|
||||
<Image
|
||||
className={styles['image']}
|
||||
src={require('/images/empty.png')}
|
||||
alt={' '}
|
||||
/>
|
||||
<div className={styles['label']}>{t('NO_STREAM')}</div>
|
||||
</div>
|
||||
) : filteredStreams.length === 0 ? (
|
||||
<div className={styles['streams-container']}>
|
||||
<Stream.Placeholder />
|
||||
<Stream.Placeholder />
|
||||
</div>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
{countLoadingAddons > 0 ? (
|
||||
<div className={styles['addons-loading-container']}>
|
||||
<div className={styles['addons-loading']}>
|
||||
{countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
|
||||
</div>
|
||||
:
|
||||
<span className={styles['addons-loading-bar']}></span>
|
||||
</div>
|
||||
) : null}
|
||||
<div className={styles['select-choices-wrapper']}>
|
||||
{video ? (
|
||||
<React.Fragment>
|
||||
{
|
||||
countLoadingAddons > 0 ?
|
||||
<div className={styles['addons-loading-container']}>
|
||||
<div className={styles['addons-loading']}>
|
||||
{countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
|
||||
</div>
|
||||
<span className={styles['addons-loading-bar']}></span>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
<div className={styles['select-choices-wrapper']}>
|
||||
{
|
||||
video ?
|
||||
<React.Fragment>
|
||||
<Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
|
||||
<Icon className={styles['icon']} name={'chevron-back'} />
|
||||
</Button>
|
||||
<div className={styles['episode-title']}>
|
||||
{`S${video?.season}E${video?.episode} ${(video?.title)}`}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
Object.keys(streamsByAddon).length > 1 ?
|
||||
<Multiselect
|
||||
{...selectableOptions}
|
||||
className={styles['select-input-container']}
|
||||
/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
<div className={styles['streams-container']}>
|
||||
{filteredStreams.map((stream, index) => (
|
||||
<Stream
|
||||
key={index}
|
||||
videoId={video?.id}
|
||||
videoReleased={video?.released}
|
||||
addonName={stream.addonName}
|
||||
name={stream.name}
|
||||
description={stream.description}
|
||||
thumbnail={stream.thumbnail}
|
||||
progress={stream.progress}
|
||||
deepLinks={stream.deepLinks}
|
||||
onClick={stream.onClick}
|
||||
onContextMenu={stream.onContextMenu}
|
||||
/>
|
||||
))}
|
||||
<Button
|
||||
className={classnames(
|
||||
styles['button-container'],
|
||||
styles['back-button-container']
|
||||
)}
|
||||
tabIndex={-1}
|
||||
onClick={backButtonOnClick}
|
||||
>
|
||||
<Icon className={styles['icon']} name={'chevron-back'} />
|
||||
</Button>
|
||||
<div className={styles['episode-title']}>
|
||||
{`S${video?.season}E${video?.episode} ${video?.title}`}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
}
|
||||
<Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
|
||||
) : null}
|
||||
{Object.keys(streamsByAddon).length > 1 ? (
|
||||
<Multiselect
|
||||
{...selectableOptions}
|
||||
className={styles['select-input-container']}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={styles['streams-container']}>
|
||||
{filteredStreams.map((stream, index) => (
|
||||
<Stream
|
||||
key={index}
|
||||
videoId={video?.id}
|
||||
videoReleased={video?.released}
|
||||
addonName={stream.addonName}
|
||||
name={stream.name}
|
||||
description={stream.description}
|
||||
thumbnail={stream.thumbnail}
|
||||
progress={stream.progress}
|
||||
deepLinks={stream.deepLinks}
|
||||
onClick={stream.onClick}
|
||||
infoHash={stream.infoHash}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
<Button
|
||||
className={styles['install-button-container']}
|
||||
title={t('ADDON_CATALOGUE_MORE')}
|
||||
href={'#/addons'}
|
||||
>
|
||||
<Icon className={styles['icon']} name={'addons'} />
|
||||
<div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
|
||||
<div className={styles['label']}>{t('ADDON_CATALOGUE_MORE')}</div>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -175,7 +172,7 @@ const StreamsList = ({ className, video, ...props }) => {
|
|||
StreamsList.propTypes = {
|
||||
className: PropTypes.string,
|
||||
streams: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
video: PropTypes.object
|
||||
video: PropTypes.object,
|
||||
};
|
||||
|
||||
module.exports = StreamsList;
|
||||
|
|
|
|||
Loading…
Reference in a new issue