Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(Player): show disabled state when ends of range are reached for subtitles settings

Browse source
This commit is contained in:
Tim 2026-01-22 10:32:07 +01:00
parent 15575ee699
commit cce556e639
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/routes/Player/SubtitlesMenu/Stepper/Stepper.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useRef } from 'react'; import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import classNames from 'classnames'; import classNames from 'classnames';
import Icon from '@stremio/stremio-icons/react'; import Icon from '@stremio/stremio-icons/react';
@ -37,6 +37,14 @@ const Stepper = ({ className, label, value, unit, step, min, max, disabled, onCh
timeout.cancel(); timeout.cancel();
}; };
const decreaseDisabled = useMemo(() => {
return disabled || typeof value !== 'number' || (typeof min === 'number' && value <= min);
}, [disabled, min, value]);
const increaseDisabled = useMemo(() => {
return disabled || typeof value !== 'number' || (typeof max === 'number' && value >= max);
}, [disabled, max, value]);
const updateValue = useCallback((delta: number) => { const updateValue = useCallback((delta: number) => {
onChange(clamp(localValue.current + delta, min, max)); onChange(clamp(localValue.current + delta, min, max));
}, [onChange]); }, [onChange]);
@ -72,7 +80,7 @@ const Stepper = ({ className, label, value, unit, step, min, max, disabled, onCh
</div> </div>
<div className={styles['content']}> <div className={styles['content']}>
<Button <Button
className={classNames(styles['button'], { 'disabled': disabled })} className={classNames(styles['button'], { 'disabled': decreaseDisabled })}
onMouseDown={onDecrementMouseDown} onMouseDown={onDecrementMouseDown}
onMouseUp={onDecrementMouseUp} onMouseUp={onDecrementMouseUp}
onMouseLeave={cancel} onMouseLeave={cancel}
@ -83,7 +91,7 @@ const Stepper = ({ className, label, value, unit, step, min, max, disabled, onCh
{ disabled ? '--' : `${value}${unit}` } { disabled ? '--' : `${value}${unit}` }
</div> </div>
<Button <Button
className={classNames(styles['button'], { 'disabled': disabled })} className={classNames(styles['button'], { 'disabled': increaseDisabled })}
onMouseDown={onIncrementMouseDown} onMouseDown={onIncrementMouseDown}
onMouseUp={onIncrementMouseUp} onMouseUp={onIncrementMouseUp}
onMouseLeave={cancel} onMouseLeave={cancel}