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

suggested style changes. infohash menu item is now magnetic link item

Browse source
This commit is contained in:
Namyts 2024-07-23 09:49:58 +01:00
parent 179afa6780
commit ad58ab069e
3 changed files with 29 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,7 +29,6 @@ const Stream = ({
thumbnail, thumbnail,
progress, progress,
deepLinks, deepLinks,
infoHash,
...props ...props
}) => { }) => {
const profile = useProfile(); const profile = useProfile();
@ -123,10 +122,10 @@ const Stream = ({
[props.onClick, profile.settings, markVideoAsWatched] [props.onClick, profile.settings, markVideoAsWatched]
); );
const copyInfoHashToClipboard = React.useCallback((event) => { const copyMagneticLinkToClipboard = React.useCallback((event) => {
event.preventDefault(); event.preventDefault();
if (infoHash && navigator?.clipboard) { if (deepLinks?.externalPlayer?.download && navigator?.clipboard) {
navigator?.clipboard?.writeText(infoHash); navigator.clipboard.writeText(deepLinks.externalPlayer.download);
toast.show({ toast.show({
type: 'success', type: 'success',
title: t('PLAYER_COPY_DOWNLOAD_LINK_SUCCESS'), title: t('PLAYER_COPY_DOWNLOAD_LINK_SUCCESS'),
@ -207,8 +206,8 @@ const Stream = ({
<Button className={styles['context-menu-option-container']} title={'Play'} onClick={onClick}> <Button className={styles['context-menu-option-container']} title={'Play'} onClick={onClick}>
<div className={styles['context-menu-option-label']}>{t('CTX_PLAY')}</div> <div className={styles['context-menu-option-label']}>{t('CTX_PLAY')}</div>
</Button> </Button>
{infoHash && <Button className={styles['context-menu-option-container']} title={'infoHash'} onClick={copyInfoHashToClipboard}> {deepLinks?.externalPlayer?.download && <Button className={styles['context-menu-option-container']} title={'Magnetic Link'} onClick={copyMagneticLinkToClipboard}>
<div className={styles['context-menu-option-label']}>{t('CTX_COPY_INFOHASH')}</div> <div className={styles['context-menu-option-label']}>{t('CTX_COPY_VIDEO_DOWNLOAD_LINK')}</div>
</Button>} </Button>}
</div> </div>
); );
@ -261,7 +260,6 @@ Stream.propTypes = {
}), }),
}), }),
onClick: PropTypes.func, onClick: PropTypes.func,
infoHash: PropTypes.string,
}; };
module.exports = Stream; module.exports = Stream;

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

@ -111,30 +111,30 @@
color: var(--primary-foreground-color); color: var(--primary-foreground-color);
background-color: var(--secondary-accent-color); background-color: var(--secondary-accent-color);
} }
}
.context-menu-container { .context-menu-container {
max-width: calc(90% - 1.5rem); max-width: calc(90% - 1.5rem);
z-index: 2; z-index: 2;
.context-menu-content { .context-menu-content {
--spatial-navigation-contain: contain; --spatial-navigation-contain: contain;
.context-menu-option-container { .context-menu-option-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
&:hover, &:hover,
&:focus { &:focus {
background-color: var(--overlay-color); background-color: var(--overlay-color);
} }
.context-menu-option-label { .context-menu-option-label {
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
color:var(--primary-foreground-color); color:var(--primary-foreground-color);
}
} }
} }
} }
@ -161,12 +161,7 @@
font-weight: 500; font-weight: 500;
} }
} }
} .context-menu-container {
}
@media only screen and (max-width: @minimum) {
.video-container {
.context-menu-container {
&.menu-direction-top-left, &.menu-direction-top-left,
&.menu-direction-bottom-left { &.menu-direction-bottom-left {
right: 1.5rem; right: 1.5rem;

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

@ -151,7 +151,6 @@ const StreamsList = ({ className, video, ...props }) => {
progress={stream.progress} progress={stream.progress}
deepLinks={stream.deepLinks} deepLinks={stream.deepLinks}
onClick={stream.onClick} onClick={stream.onClick}
infoHash={stream.infoHash}
/> />
))} ))}
</div> </div>