Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-07 14:20:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #1331 from Stremio/fix/episode-row-navigation

Browse source 
Separate episode navigation and playback
This commit is contained in:
Timothy Z. 2026-07-14 11:24:48 +03:00 committed by GitHub
commit f4fda640dd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 56 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/Video/Video.js
View file

@ -66,19 +66,29 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
closeMenu();
onMarkSeasonAsWatched(season, seasonWatched);
}, [season, seasonWatched, onMarkSeasonAsWatched]);
const videoButtonOnClick = React.useCallback(() => {
const selectVideo = React.useCallback(() => {
if (typeof onSelect === 'function') {
onSelect();
}
}, [onSelect]);
const videoButtonOnClick = React.useCallback(() => {
selectVideo();
if (deepLinks) {
if (typeof deepLinks.player === 'string') {
navigate(toPath(deepLinks.player));
} else if (typeof deepLinks.metaDetailsStreams === 'string') {
navigate(toPath(deepLinks.metaDetailsStreams), { replace: !platform.isMobile });
}
if (deepLinks && typeof deepLinks.metaDetailsStreams === 'string') {
navigate(toPath(deepLinks.metaDetailsStreams), { replace: !platform.isMobile });
}
}, [deepLinks, onSelect]);
}, [deepLinks, navigate, platform.isMobile, selectVideo]);
const playButtonOnClick = React.useCallback((event) => {
event.preventDefault();
event.stopPropagation();
selectVideo();
if (deepLinks && typeof deepLinks.player === 'string') {
navigate(toPath(deepLinks.player));
}
}, [deepLinks, navigate, selectVideo]);
const playButtonOnKeyDown = React.useCallback((event) => {
event.stopPropagation();
}, []);
const renderLabel = React.useMemo(() => function renderLabel({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, children, ref, ...props }) {
const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched;
@ -163,10 +173,23 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
</div>
</div>
</div>
{
deepLinks && typeof deepLinks.player === 'string' ?
<Button
className={styles['play-button-container']}
title={t('CTX_WATCH')}
onClick={playButtonOnClick}
onKeyDown={playButtonOnKeyDown}
>
<Icon className={styles['play-icon']} name={'play'} />
</Button>
:
null
}
{children}
</Button>
);
}, [selected]);
}, [deepLinks, playButtonOnClick, playButtonOnKeyDown, selected]);
const renderMenu = React.useMemo(() => function renderMenu() {
return (
<div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}>

25
src/components/Video/styles.less
View file

@ -177,6 +177,29 @@
}
}
.play-button-container {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-right: 0.5rem;
border-radius: 50%;
color: var(--primary-foreground-color);
background-color: var(--overlay-color);
&:hover,
&:focus {
background-color: var(--secondary-accent-color);
}
.play-icon {
width: 1.5rem;
height: 1.5rem;
}
}
&.selected {
animation: border 3s ease-in-out forwards;
}
@ -243,4 +266,4 @@
}
}
}
}
}