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

refactor(EpisodePicker): simplify

Browse source
This commit is contained in:
Timothy Z. 2025-03-25 18:11:14 +02:00
parent 56762353f2
commit 60ba559500
2 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/NumberInput/NumberInput.tsx
View file

@ -12,20 +12,19 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
className?: string;
disabled?: boolean;
showButtons?: boolean;
defaultValue?: number;
label?: string;
min?: number;
max?: number;
value?: number;
defaultValue?: number;
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
onSubmit?: (event: KeyboardEvent<HTMLInputElement>) => void;
onUpdate?: (value: number) => void;
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
};
const NumberInput = forwardRef<HTMLInputElement, Props>(({ defaultValue = 1, showButtons, onUpdate, onKeyDown, onSubmit, min, max, onChange, ...props }, ref) => {
const NumberInput = forwardRef<HTMLInputElement, Props>(({ defaultValue = 0, showButtons, onKeyDown, onSubmit, min, max, onChange, ...props }, ref) => {
const [value, setValue] = useState(defaultValue);
const displayValue = useMemo(() => props.value ?? value, [props.value, value]);
const displayValue = props.value ?? value;
const handleKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {
onKeyDown && onKeyDown(event);
@ -35,12 +34,11 @@ const NumberInput = forwardRef<HTMLInputElement, Props>(({ defaultValue = 1, sho
}
}, [onKeyDown, onSubmit]);
const handleValueChange = (value: number) => {
const handleValueChange = (newValue: number) => {
if (props.value === undefined) {
setValue(value);
setValue(newValue);
}
onUpdate?.(value);
onChange?.({ target: { value: value.toString() }} as ChangeEvent<HTMLInputElement>);
onChange?.({ target: { value: newValue.toString() }} as ChangeEvent<HTMLInputElement>);
};
const handleIncrement = () => {

19
src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.tsx
View file

@ -1,6 +1,6 @@
// Copyright (C) 2017-2025 Smart code 203358507
import React, { useCallback, useMemo, useState } from 'react';
import React, { useCallback, useMemo, useState, ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, NumberInput } from 'stremio/components';
import styles from './EpisodePicker.less';
@ -19,16 +19,21 @@ const EpisodePicker = ({ className, onSubmit }: Props) => {
const videoId = decodeURIComponent(splitPath[splitPath.length - 1]);
const [, pathSeason, pathEpisode] = videoId ? videoId.split(':') : [];
return {
initialSeason: isNaN(parseInt(pathSeason)) ? 0 : parseInt(pathSeason),
initialEpisode: isNaN(parseInt(pathEpisode)) ? 1 : parseInt(pathEpisode)
initialSeason: parseInt(pathSeason) || 0,
initialEpisode: parseInt(pathEpisode) || 1
};
}, []);
const [season, setSeason] = useState(initialSeason);
const [episode, setEpisode] = useState(initialEpisode);
const handleSeasonChange = useCallback((value: number) => setSeason(!isNaN(value) ? value : 0), []);
const handleEpisodeChange = useCallback((value: number) => setEpisode(!isNaN(value) ? value : 1), []);
const handleSeasonChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setSeason(parseInt(event.target.value));
}, []);
const handleEpisodeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setEpisode(parseInt(event.target.value));
}, []);
const handleSubmit = useCallback(() => {
if (typeof onSubmit === 'function' && !isNaN(season) && !isNaN(episode)) {
@ -42,8 +47,8 @@ const EpisodePicker = ({ className, onSubmit }: Props) => {
return (
<div className={className}>
<NumberInput min={0} label={t('SEASON')} defaultValue={season} onUpdate={handleSeasonChange} showButtons />
<NumberInput min={1} label={t('EPISODE')} defaultValue={episode} onUpdate={handleEpisodeChange} showButtons />
<NumberInput min={0} label={t('SEASON')} defaultValue={season} onChange={handleSeasonChange} showButtons />
<NumberInput min={1} label={t('EPISODE')} defaultValue={episode} onChange={handleEpisodeChange} showButtons />
<Button className={styles['button-container']} onClick={handleSubmit} disabled={disabled}>
<div className={styles['label']}>{t('SIDEBAR_SHOW_STREAMS')}</div>
</Button>