Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 15:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

added context menu to steam list items with ability to copy stream infohash. switch steam to use Popup, just like Video

Browse source
This commit is contained in:
Namyts 2024-07-23 00:45:29 +01:00
parent 10c878871f
commit 179afa6780
3 changed files with 349 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

270
src/routes/MetaDetails/StreamsList/Stream/Stream.js
View file

@ -4,47 +4,93 @@ const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react'); 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 { useServices } = require('stremio/services');
const StreamPlaceholder = require('./StreamPlaceholder'); const StreamPlaceholder = require('./StreamPlaceholder');
const { t } = require('i18next');
const styles = require('./styles'); 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 profile = useProfile();
const toast = useToast(); const toast = useToast();
const { core } = useServices(); 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(() => { const href = React.useMemo(() => {
return deepLinks ? return deepLinks
deepLinks.externalPlayer ? ? deepLinks.externalPlayer
deepLinks.externalPlayer.web ? ? deepLinks.externalPlayer.web
deepLinks.externalPlayer.web ? deepLinks.externalPlayer.web
: : deepLinks.externalPlayer.openPlayer
deepLinks.externalPlayer.openPlayer ? ? deepLinks.externalPlayer.openPlayer[platform.name]
deepLinks.externalPlayer.openPlayer[platform.name] ? ? deepLinks.externalPlayer.openPlayer[platform.name]
deepLinks.externalPlayer.openPlayer[platform.name] : deepLinks.externalPlayer.playlist
: : deepLinks.player
deepLinks.externalPlayer.playlist : deepLinks.player
: : null;
deepLinks.player
:
deepLinks.player
:
null;
}, [deepLinks]); }, [deepLinks]);
const download = React.useMemo(() => { const download = React.useMemo(() => {
return href === deepLinks?.externalPlayer?.playlist ? return href === deepLinks?.externalPlayer?.playlist
deepLinks.externalPlayer.fileName ? deepLinks.externalPlayer.fileName
: : null;
null;
}, [href, deepLinks]); }, [href, deepLinks]);
const target = React.useMemo(() => { const target = React.useMemo(() => {
return href === deepLinks?.externalPlayer?.web ? return href === deepLinks?.externalPlayer?.web ? '_blank' : null;
'_blank'
:
null;
}, [href, deepLinks]); }, [href, deepLinks]);
const markVideoAsWatched = React.useCallback(() => { const markVideoAsWatched = React.useCallback(() => {
@ -53,68 +99,136 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
action: 'MetaDetails', action: 'MetaDetails',
args: { args: {
action: 'MarkVideoAsWatched', action: 'MarkVideoAsWatched',
args: [{ id: videoId, released: videoReleased }, true] args: [{ id: videoId, released: videoReleased }, true],
} },
}); });
} }
}, [videoId, videoReleased]); }, [videoId, videoReleased]);
const onClick = React.useCallback((event) => { const onClick = React.useCallback(
if (profile.settings.playerType !== null) { (event) => {
markVideoAsWatched(); 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({ toast.show({
type: 'success', type: 'success',
title: 'Stream opened in external player', title: t('PLAYER_COPY_DOWNLOAD_LINK_SUCCESS'),
timeout: 4000 timeout: 4000,
}); });
} }
}, []);
if (typeof props.onClick === 'function') { const renderThumbnailFallback = React.useCallback(
props.onClick(event); () => (
} <Icon className={styles['placeholder-icon']} name={'ic_broken_link'} />
}, [props.onClick, profile.settings, markVideoAsWatched]); ),
[]
);
const onContextMenu = React.useCallback((event) => { const renderLabel = React.useMemo(
if (typeof props.onContextMenu === 'function') { () =>
props.onContextMenu(event); function renderLabel({ className, thumbnail, progress, children, ...props }) {
} return (
}, [props.onContextMenu]); <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(() => ( const renderMenu = function renderMenu() {
<Icon className={styles['placeholder-icon']} name={'ic_broken_link'} /> 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 ( return (
<Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick} onContextMenu={onContextMenu}> <Popup
<div className={styles['info-container']}> className={className}
{ thumbnail={thumbnail}
typeof thumbnail === 'string' && thumbnail.length > 0 ? progress={progress}
<div className={styles['thumbnail-container']} title={name || addonName}> href={href}
<Image {...props}
className={styles['thumbnail']} onMouseUp={popupLabelOnMouseUp}
src={thumbnail} onLongPress={popupLabelOnLongPress}
alt={' '} onContextMenu={popupLabelOnContextMenu}
renderFallback={renderThumbnailFallback} open={menuOpen}
/> onCloseRequest={closeMenu}
</div> renderLabel={renderLabel}
: renderMenu={renderMenu}
<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>
); );
}; };
@ -143,11 +257,11 @@ Stream.propTypes = {
windows: PropTypes.string, windows: PropTypes.string,
macos: PropTypes.string, macos: PropTypes.string,
linux: PropTypes.string, linux: PropTypes.string,
}) }),
}) }),
}), }),
onClick: PropTypes.func, onClick: PropTypes.func,
onContextMenu: PropTypes.func infoHash: PropTypes.string,
}; };
module.exports = Stream; module.exports = Stream;

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

@ -3,6 +3,14 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.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 { .stream-container {
display: flex; display: flex;
flex-direction: row; 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) { @media only screen and (max-width: @small) {
.stream-container { .stream-container {
.description-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%;
}
}
}
}

195
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const { useTranslation } = require('react-i18next'); const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react'); 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 { useServices } = require('stremio/services');
const Stream = require('./Stream'); const Stream = require('./Stream');
const styles = require('./styles'); const styles = require('./styles');
@ -15,7 +15,6 @@ const ALL_ADDONS_KEY = 'ALL';
const StreamsList = ({ className, video, ...props }) => { const StreamsList = ({ className, video, ...props }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { core } = useServices(); const { core } = useServices();
const toast = useToast();
const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY); const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
const onAddonSelected = React.useCallback((event) => { const onAddonSelected = React.useCallback((event) => {
setSelectedAddon(event.value); setSelectedAddon(event.value);
@ -38,36 +37,25 @@ const StreamsList = ({ className, video, ...props }) => {
core.transport.analytics({ core.transport.analytics({
event: 'StreamClicked', event: 'StreamClicked',
args: { args: {
stream stream,
} },
}); });
}, },
onContextMenu: (e) => { addonName: streams.addon.manifest.name,
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
}))
}; };
return streamsByAddon; return streamsByAddon;
}, {}); }, {});
}, [props.streams]); }, [props.streams]);
const filteredStreams = React.useMemo(() => { const filteredStreams = React.useMemo(() => {
return selectedAddon === ALL_ADDONS_KEY ? return selectedAddon === ALL_ADDONS_KEY
Object.values(streamsByAddon).map(({ streams }) => streams).flat(1) ? Object.values(streamsByAddon)
: .map(({ streams }) => streams)
streamsByAddon[selectedAddon] ? .flat(1)
streamsByAddon[selectedAddon].streams : streamsByAddon[selectedAddon]
: ? streamsByAddon[selectedAddon].streams
[]; : [];
}, [streamsByAddon, selectedAddon]); }, [streamsByAddon, selectedAddon]);
const selectableOptions = React.useMemo(() => { const selectableOptions = React.useMemo(() => {
return { return {
@ -76,97 +64,106 @@ const StreamsList = ({ className, video, ...props }) => {
{ {
value: ALL_ADDONS_KEY, value: ALL_ADDONS_KEY,
label: t('ALL_ADDONS'), label: t('ALL_ADDONS'),
title: t('ALL_ADDONS') title: t('ALL_ADDONS'),
}, },
...Object.keys(streamsByAddon).map((transportUrl) => ({ ...Object.keys(streamsByAddon).map((transportUrl) => ({
value: transportUrl, value: transportUrl,
label: streamsByAddon[transportUrl].addon.manifest.name, label: streamsByAddon[transportUrl].addon.manifest.name,
title: streamsByAddon[transportUrl].addon.manifest.name, title: streamsByAddon[transportUrl].addon.manifest.name,
})) })),
], ],
selected: [selectedAddon], selected: [selectedAddon],
onSelect: onAddonSelected onSelect: onAddonSelected,
}; };
}, [streamsByAddon, selectedAddon]); }, [streamsByAddon, selectedAddon]);
return ( return (
<div className={classnames(className, styles['streams-list-container'])}> <div className={classnames(className, styles['streams-list-container'])}>
{ {props.streams.length === 0 ? (
props.streams.length === 0 ? <div className={styles['message-container']}>
<div className={styles['message-container']}> <Image
<Image className={styles['image']} src={require('/images/empty.png')} alt={' '} /> className={styles['image']}
<div className={styles['label']}>No addons were requested for streams!</div> src={require('/images/empty.png')}
alt={' '}
/>
<div className={styles['label']}>
No addons were requested for streams!
</div> </div>
: </div>
props.streams.every((streams) => streams.content.type === 'Err') ? ) : props.streams.every((streams) => streams.content.type === 'Err') ? (
<div className={styles['message-container']}> <div className={styles['message-container']}>
<Image className={styles['image']} src={require('/images/empty.png')} alt={' '} /> <Image
<div className={styles['label']}>{t('NO_STREAM')}</div> className={styles['image']}
</div> src={require('/images/empty.png')}
: alt={' '}
filteredStreams.length === 0 ? />
<div className={styles['streams-container']}> <div className={styles['label']}>{t('NO_STREAM')}</div>
<Stream.Placeholder /> </div>
<Stream.Placeholder /> ) : 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> </div>
: <span className={styles['addons-loading-bar']}></span>
</div>
) : null}
<div className={styles['select-choices-wrapper']}>
{video ? (
<React.Fragment> <React.Fragment>
{ <Button
countLoadingAddons > 0 ? className={classnames(
<div className={styles['addons-loading-container']}> styles['button-container'],
<div className={styles['addons-loading']}> styles['back-button-container']
{countLoadingAddons} {t('MOBILE_ADDONS_LOADING')} )}
</div> tabIndex={-1}
<span className={styles['addons-loading-bar']}></span> onClick={backButtonOnClick}
</div> >
: <Icon className={styles['icon']} name={'chevron-back'} />
null </Button>
} <div className={styles['episode-title']}>
<div className={styles['select-choices-wrapper']}> {`S${video?.season}E${video?.episode} ${video?.title}`}
{
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}
/>
))}
</div> </div>
</React.Fragment> </React.Fragment>
} ) : null}
<Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}> {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'} /> <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> </Button>
</div> </div>
); );
@ -175,7 +172,7 @@ const StreamsList = ({ className, video, ...props }) => {
StreamsList.propTypes = { StreamsList.propTypes = {
className: PropTypes.string, className: PropTypes.string,
streams: PropTypes.arrayOf(PropTypes.object).isRequired, streams: PropTypes.arrayOf(PropTypes.object).isRequired,
video: PropTypes.object video: PropTypes.object,
}; };
module.exports = StreamsList; module.exports = StreamsList;