mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
fix(EpisodePicker): set season and episode from url
This commit is contained in:
parent
6b30b90893
commit
34808d6014
3 changed files with 18 additions and 16 deletions
|
|
@ -1,6 +1,6 @@
|
|||
// Copyright (C) 2017-2025 Smart code 203358507
|
||||
|
||||
import React, { forwardRef, useCallback, useState } from 'react';
|
||||
import React, { ChangeEvent, forwardRef, useCallback, useState } from 'react';
|
||||
import { type KeyboardEvent, type InputHTMLAttributes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import styles from './styles.less';
|
||||
|
|
@ -55,7 +55,7 @@ const NumberInput = forwardRef<HTMLInputElement, Props>(({ defaultValue, ...prop
|
|||
{props.showButtons ? <Button
|
||||
className={styles['btn']}
|
||||
onClick={handleDecrease}
|
||||
disabled={props.disabled || typeof props.min !== 'undefined' ? value <= props.min : false}>
|
||||
disabled={props.disabled || (props.min !== undefined ? value <= props.min : false)}>
|
||||
<Icon className={styles['icon']} name={'remove'} />
|
||||
</Button> : null}
|
||||
<div className={classnames(styles['number-display'], props.showButtons ? styles['with-btns'] : '')}>
|
||||
|
|
@ -67,12 +67,12 @@ const NumberInput = forwardRef<HTMLInputElement, Props>(({ defaultValue, ...prop
|
|||
value={value}
|
||||
{...props}
|
||||
className={classnames(props.className, styles['value'], { 'disabled': props.disabled })}
|
||||
onChange={(event) => setValue(event.value)}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => setValue(parseInt(event.target.value))}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
</div>
|
||||
{props.showButtons ? <Button
|
||||
className={styles['btn']} onClick={handleIncrease} disabled={props.disabled || typeof props.max !== 'undefined' ? value >= props.max : false}>
|
||||
className={styles['btn']} onClick={handleIncrease} disabled={props.disabled || (props.max !== undefined ? value >= props.max : false)}>
|
||||
<Icon className={styles['icon']} name={'add'} />
|
||||
</Button> : null}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,21 +10,23 @@ type Props = {
|
|||
seriesId: string;
|
||||
onSubmit: (season: number, episode: number) => void;
|
||||
};
|
||||
export const EpisodePicker = ({ className, seriesId, onSubmit }: Props) => {
|
||||
export const EpisodePicker = ({ className, onSubmit }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const splitPath = window.location.hash.split('/');
|
||||
const videoId = decodeURIComponent(splitPath[splitPath.length - 1]);
|
||||
const [initialSeason, initialEpisode] = React.useMemo(() => {
|
||||
const [, season, episode] = seriesId ? seriesId.split(':') : [];
|
||||
const initialSeason = isNaN(parseInt(season)) ? 1 : parseInt(season);
|
||||
const initialEpisode = isNaN(parseInt(episode)) ? 1 : parseInt(episode);
|
||||
const [, pathSeason, pathEpisode] = videoId ? videoId.split(':') : [];
|
||||
const initialSeason = isNaN(parseInt(pathSeason)) ? 1 : parseInt(pathSeason);
|
||||
const initialEpisode = isNaN(parseInt(pathEpisode)) ? 1 : parseInt(pathEpisode);
|
||||
return [initialSeason, initialEpisode];
|
||||
}, [seriesId]);
|
||||
const seasonRef = useRef(null);
|
||||
const episodeRef = useRef(null);
|
||||
}, [videoId]);
|
||||
const seasonRef = useRef<HTMLInputElement>(null);
|
||||
const episodeRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleSubmit = React.useCallback(() => {
|
||||
const season = seasonRef.current?.value;
|
||||
const episode = episodeRef.current?.value;
|
||||
if (typeof onSubmit === 'function') onSubmit(season, episode);
|
||||
const season = seasonRef.current?.value || 1;
|
||||
const episode = episodeRef.current?.value || 1;
|
||||
if (typeof onSubmit === 'function' && !isNaN(season) && !isNaN(parseInt(episode))) onSubmit(season, episode);
|
||||
}, [onSubmit, seasonRef, episodeRef]);
|
||||
|
||||
return <div className={className}>
|
||||
|
|
|
|||
|
|
@ -128,14 +128,14 @@ const StreamsList = ({ className, video, onEpisodeSearch, ...props }) => {
|
|||
{
|
||||
props.streams.length === 0 ?
|
||||
<div className={styles['message-container']}>
|
||||
<SeasonEpisodePicker seriesId={video?.id} onSubmit={handleEpisodePicker} />
|
||||
<SeasonEpisodePicker onSubmit={handleEpisodePicker} />
|
||||
<Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
|
||||
<div className={styles['label']}>No addons were requested for streams!</div>
|
||||
</div>
|
||||
:
|
||||
props.streams.every((streams) => streams.content.type === 'Err') ?
|
||||
<div className={styles['message-container']}>
|
||||
<SeasonEpisodePicker seriesId={video?.id} onSubmit={handleEpisodePicker} />
|
||||
<SeasonEpisodePicker onSubmit={handleEpisodePicker} />
|
||||
{video?.upcoming && <div className={styles['label']}>{t('UPCOMING')}...</div>}
|
||||
<Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
|
||||
<div className={styles['label']}>{t('NO_STREAM')}</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue