Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-08 01:10:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

attempted to undo IDE auto formatting

Browse source
This commit is contained in:
Namyts 2024-07-23 10:04:18 +01:00
parent ad58ab069e
commit ff41ff2997
1 changed files with 72 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,33 +4,14 @@ 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 { const { Button, Image, useProfile, platform, useToast, Popup, useBinaryState } = require('stremio/common');
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 { t } = require('i18next');
const styles = require('./styles'); const styles = require('./styles');
const Stream = ({ const Stream = ({ className, videoId, videoReleased, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
className,
videoId,
videoReleased,
addonName,
name,
description,
thumbnail,
progress,
deepLinks,
...props
}) => {
const profile = useProfile(); const profile = useProfile();
const toast = useToast(); const toast = useToast();
const { core } = useServices(); const { core } = useServices();
@ -69,27 +50,36 @@ const Stream = ({
}, []); }, []);
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[platform.name] deepLinks.externalPlayer.openPlayer ?
? deepLinks.externalPlayer.openPlayer[platform.name] deepLinks.externalPlayer.openPlayer[platform.name] ?
: deepLinks.externalPlayer.playlist deepLinks.externalPlayer.openPlayer[platform.name]
: deepLinks.player :
: deepLinks.player deepLinks.externalPlayer.playlist
: 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 ? '_blank' : null; return href === deepLinks?.externalPlayer?.web ?
'_blank'
:
null;
}, [href, deepLinks]); }, [href, deepLinks]);
const markVideoAsWatched = React.useCallback(() => { const markVideoAsWatched = React.useCallback(() => {
@ -98,28 +88,27 @@ const Stream = ({
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( const onClick = React.useCallback((event) => {
(event) => { if (profile.settings.playerType !== null) {
if (profile.settings.playerType !== null) { markVideoAsWatched();
markVideoAsWatched(); toast.show({
toast.show({ type: 'success',
type: 'success', title: 'Stream opened in external player',
title: 'Stream opened in external player', timeout: 4000
timeout: 4000, });
}); }
}
if (typeof props.onClick === 'function') { if (typeof props.onClick === 'function') {
props.onClick(event); props.onClick(event);
} }
}, },
[props.onClick, profile.settings, markVideoAsWatched] [props.onClick, profile.settings, markVideoAsWatched]
); );
const copyMagneticLinkToClipboard = React.useCallback((event) => { const copyMagneticLinkToClipboard = React.useCallback((event) => {
@ -129,69 +118,48 @@ const Stream = ({
toast.show({ toast.show({
type: 'success', type: 'success',
title: t('PLAYER_COPY_DOWNLOAD_LINK_SUCCESS'), title: t('PLAYER_COPY_DOWNLOAD_LINK_SUCCESS'),
timeout: 4000, timeout: 4000
}); });
} }
closeMenu();
}, []); }, []);
const renderThumbnailFallback = React.useCallback( const renderThumbnailFallback = React.useCallback(() => (
() => ( <Icon className={styles['placeholder-icon']} name={'ic_broken_link'} />
<Icon className={styles['placeholder-icon']} name={'ic_broken_link'} /> ), []);
),
[]
);
const renderLabel = React.useMemo( const renderLabel = React.useMemo(
() => () =>
function renderLabel({ className, thumbnail, progress, children, ...props }) { function renderLabel({ className, thumbnail, progress, children, ...props }) {
return ( return (
<Button <Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick} {...props}>
className={classnames(className, styles['stream-container'])}
title={addonName}
download={download}
target={target}
onClick={onClick}
{...props}
>
<div className={styles['info-container']}> <div className={styles['info-container']}>
{typeof thumbnail === 'string' && thumbnail.length > 0 ? ( {
<div typeof thumbnail === 'string' && thumbnail.length > 0 ?
className={styles['thumbnail-container']} <div className={styles['thumbnail-container']} title={name || addonName}>
title={name || addonName} <Image
> className={styles['thumbnail']}
<Image src={thumbnail}
className={styles['thumbnail']} alt={' '}
src={thumbnail} renderFallback={renderThumbnailFallback}
alt={' '} />
renderFallback={renderThumbnailFallback}
/>
</div>
) : (
<div
className={styles['addon-name-container']}
title={name || addonName}
>
<div className={styles['addon-name']}>
{name || addonName}
</div> </div>
</div> :
)} <div className={styles['addon-name-container']} title={name || addonName}>
{progress !== null && !isNaN(progress) && progress > 0 ? ( <div className={styles['addon-name']}>{name || addonName}</div>
<div className={styles['progress-bar-container']}> </div>
<div }
className={styles['progress-bar']} {
style={{ width: `${progress}%` }} progress !== null && !isNaN(progress) && progress > 0 ?
/> <div className={styles['progress-bar-container']}>
<div className={styles['progress-bar-background']} /> <div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
</div> <div className={styles['progress-bar-background']} />
) : null} </div>
</div> :
<div null
className={styles['description-container']} }
title={description}
>
{description}
</div> </div>
<div className={styles['description-container']} title={description}>{description}</div>
<Icon className={styles['icon']} name={'play'} /> <Icon className={styles['icon']} name={'play'} />
{children} {children}
</Button> </Button>