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

Skip button styling and focus behavior

Browse source
This commit is contained in:
THaenlein 2026-05-09 12:47:14 +02:00
parent 900b746018
commit faa3ae1db8
2 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/routes/Player/Player.js
View file

@ -133,6 +133,8 @@ const Player = ({ urlParams, queryParams }) => {
const pressTimer = React.useRef(null);
const longPress = React.useRef(false);
const controlBarRef = React.useRef(null);
const skipSegmentButtonRef = React.useRef(null);
const skipSegmentVisibleRef = React.useRef(false);
const HOLD_DELAY = 400;
@ -261,6 +263,7 @@ const Player = ({ urlParams, queryParams }) => {
onSeekRequested(activeSkippableSegment.to);
}
}, [activeSkippableSegment, onSeekRequested]);
const skipSegmentVisible = activeSkippableSegment !== null && !menusOpen && skipSegmentButtonLabel !== null;
const onPlaybackSpeedChanged = React.useCallback((rate, skipUpdate) => {
video.setPlaybackSpeed(rate);
@ -588,6 +591,14 @@ const Player = ({ urlParams, queryParams }) => {
}
}, [settings.pauseOnMinimize, shell.windowClosed, shell.windowHidden]);
React.useEffect(() => {
if (skipSegmentVisible && !skipSegmentVisibleRef.current) {
skipSegmentButtonRef.current?.focus();
}
skipSegmentVisibleRef.current = skipSegmentVisible;
}, [skipSegmentVisible]);
useMediaSession(video.state, player, onPlayRequested, onPauseRequested, onNextVideoRequested);
React.useEffect(() => {
@ -948,9 +959,13 @@ const Player = ({ urlParams, queryParams }) => {
onTouchEnd={onContainerMouseLeave}
/>
{
activeSkippableSegment !== null && !menusOpen && skipSegmentButtonLabel !== null ?
skipSegmentVisible ?
<div className={classnames(styles['layer'], styles['skip-segment-layer'])}>
<Button className={styles['skip-segment-button']} onClick={onSkipSegmentRequested}>
<Button
ref={skipSegmentButtonRef}
className={styles['skip-segment-button']}
onClick={onSkipSegmentRequested}
>
{skipSegmentButtonLabel}
</Button>
</div>

10
src/routes/Player/styles.less
View file

@ -135,9 +135,13 @@ html:not(.active-slider-within) {
padding: 1rem 1.6rem;
font-weight: 700;
color: var(--primary-foreground-color);
background-color: var(--modal-background-color);
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;
background-color: var(--primary-accent-color);
transition: background-color 120ms ease-in;
&:hover, &:focus {
outline: var(--focus-outline-size) solid var(--primary-accent-color);
background-color: transparent;
}
}
}