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

SubtitlesPicker prop names changed

Browse source
This commit is contained in:
nklhrstv 2020-03-10 13:43:30 +02:00
parent 7d1bbd2d89
commit 4e28aebc33
2 changed files with 53 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -145,16 +145,16 @@ const Player = ({ urlParams }) => {
subtitlesPickerOpen ? subtitlesPickerOpen ?
<SubtitlesPicker <SubtitlesPicker
className={classnames(styles['layer'], styles['menu-layer'])} className={classnames(styles['layer'], styles['menu-layer'])}
subtitlesTracks={state.subtitlesTracks} tracks={state.subtitlesTracks}
selectedSubtitlesTrackId={state.selectedSubtitlesTrackId} selectedTrackId={state.selectedSubtitlesTrackId}
subtitlesOffset={state.subtitlesOffset} offset={state.subtitlesOffset}
subtitlesSize={state.subtitlesSize} size={state.subtitlesSize}
subtitlesDelay={state.subtitlesDelay} delay={state.subtitlesDelay}
subtitlesTextColor={state.subtitlesTextColor} textColor={state.subtitlesTextColor}
subtitlesBackgroundColor={state.subtitlesBackgroundColor} backgroundColor={state.subtitlesBackgroundColor}
subtitlesOutlineColor={state.subtitlesOutlineColor} outlineColor={state.subtitlesOutlineColor}
onSubtitlesTrackSelected={onSubtitlesTrackSelected} onTrackSelected={onSubtitlesTrackSelected}
onSubtitlesOffsetChanged={onSubtitlesOffsetChanged} onOffsetChanged={onSubtitlesOffsetChanged}
/> />
: :
null null

86
src/routes/Player/SubtitlesPicker/SubtitlesPicker.js
View file

@ -26,8 +26,8 @@ const comparatorWithPriorities = (priorities) => {
const SubtitlesPicker = (props) => { const SubtitlesPicker = (props) => {
const languages = React.useMemo(() => { const languages = React.useMemo(() => {
return Array.isArray(props.subtitlesTracks) ? return Array.isArray(props.tracks) ?
props.subtitlesTracks.reduce((languages, { lang }) => { props.tracks.reduce((languages, { lang }) => {
if (!languages.includes(lang)) { if (!languages.includes(lang)) {
languages.push(lang); languages.push(lang);
} }
@ -36,11 +36,11 @@ const SubtitlesPicker = (props) => {
}, []) }, [])
: :
[]; [];
}, [props.subtitlesTracks]); }, [props.tracks]);
const selectedLanguage = React.useMemo(() => { const selectedLanguage = React.useMemo(() => {
return Array.isArray(props.subtitlesTracks) ? return Array.isArray(props.tracks) ?
props.subtitlesTracks.reduce((selectedLanguage, { id, lang }) => { props.tracks.reduce((selectedLanguage, { id, lang }) => {
if (id === props.selectedSubtitlesTrackId) { if (id === props.selectedTrackId) {
return lang; return lang;
} }
@ -48,26 +48,26 @@ const SubtitlesPicker = (props) => {
}, null) }, null)
: :
null; null;
}, [props.subtitlesTracks, props.selectedSubtitlesTrackId]); }, [props.tracks, props.selectedTrackId]);
const tracksForLanguage = React.useMemo(() => { const tracksForLanguage = React.useMemo(() => {
return Array.isArray(props.subtitlesTracks) && typeof selectedLanguage === 'string' ? return Array.isArray(props.tracks) && typeof selectedLanguage === 'string' ?
props.subtitlesTracks.filter(({ lang }) => { props.tracks.filter(({ lang }) => {
return lang === selectedLanguage; return lang === selectedLanguage;
}) })
: :
[]; [];
}, [props.subtitlesTracks, selectedLanguage]); }, [props.tracks, selectedLanguage]);
const subtitlesOffsetDisabled = React.useMemo(() => { const offsetDisabled = React.useMemo(() => {
return typeof selectedLanguage !== 'string' || return typeof selectedLanguage !== 'string' ||
props.subtitlesOffset === null || props.offset === null ||
isNaN(props.subtitlesOffset); isNaN(props.offset);
}, [selectedLanguage, props.subtitlesOffset]); }, [selectedLanguage, props.offset]);
const onMouseDown = React.useCallback((event) => { const onMouseDown = React.useCallback((event) => {
event.nativeEvent.subtitlesPickerClosePrevented = true; event.nativeEvent.subtitlesPickerClosePrevented = true;
}, []); }, []);
const languageOnClick = React.useCallback((event) => { const languageOnClick = React.useCallback((event) => {
const trackId = Array.isArray(props.subtitlesTracks) ? const trackId = Array.isArray(props.tracks) ?
props.subtitlesTracks.reduceRight((trackId, track) => { props.tracks.reduceRight((trackId, track) => {
if (track.lang === event.currentTarget.dataset.lang) { if (track.lang === event.currentTarget.dataset.lang) {
return track.id; return track.id;
} }
@ -76,19 +76,19 @@ const SubtitlesPicker = (props) => {
}, null) }, null)
: :
null; null;
props.onSubtitlesTrackSelected(trackId); props.onTrackSelected(trackId);
}, [props.subtitlesTracks, props.onSubtitlesTrackSelected]); }, [props.tracks, props.onTrackSelected]);
const trackOnClick = React.useCallback((event) => { const trackOnClick = React.useCallback((event) => {
props.onSubtitlesTrackSelected(event.currentTarget.dataset.trackId); props.onTrackSelected(event.currentTarget.dataset.trackId);
}, [props.onSubtitlesTrackSelected]); }, [props.onTrackSelected]);
const onOffsetButtonClicked = React.useCallback((event) => { const onOffsetButtonClicked = React.useCallback((event) => {
if (props.subtitlesOffset !== null && !isNaN(props.subtitlesOffset)) { if (props.offset !== null && !isNaN(props.offset)) {
const offset = props.subtitlesOffset + parseInt(event.currentTarget.dataset.offset); const offset = props.offset + parseInt(event.currentTarget.dataset.offset);
if (typeof props.onSubtitlesOffsetChanged === 'function') { if (typeof props.onOffsetChanged === 'function') {
props.onSubtitlesOffsetChanged(offset); props.onOffsetChanged(offset);
} }
} }
}, [props.subtitlesOffset, props.onSubtitlesOffsetChanged]); }, [props.offset, props.onOffsetChanged]);
return ( return (
<div className={classnames(props.className, styles['subtitles-picker-container'])} onMouseDown={onMouseDown}> <div className={classnames(props.className, styles['subtitles-picker-container'])} onMouseDown={onMouseDown}>
<div className={styles['languages-container']}> <div className={styles['languages-container']}>
@ -122,10 +122,10 @@ const SubtitlesPicker = (props) => {
tracksForLanguage.length > 0 ? tracksForLanguage.length > 0 ?
<div className={styles['variants-list']}> <div className={styles['variants-list']}>
{tracksForLanguage.map((track, index) => ( {tracksForLanguage.map((track, index) => (
<Button key={index} title={track.origin} className={classnames(styles['variant-option'], { 'selected': track.id === props.selectedSubtitlesTrackId })} data-track-id={track.id} onClick={trackOnClick}> <Button key={index} title={track.origin} className={classnames(styles['variant-option'], { 'selected': track.id === props.selectedTrackId })} data-track-id={track.id} onClick={trackOnClick}>
<div className={styles['variant-label']}>{track.origin}</div> <div className={styles['variant-label']}>{track.origin}</div>
{ {
props.selectedSubtitlesTrackId === track.id ? props.selectedTrackId === track.id ?
<div className={styles['icon']} /> <div className={styles['icon']} />
: :
null null
@ -163,15 +163,15 @@ const SubtitlesPicker = (props) => {
<Icon className={styles['icon']} icon={'ic_plus'} /> <Icon className={styles['icon']} icon={'ic_plus'} />
</Button> </Button>
</div> </div>
<div className={classnames(styles['option-header'], { 'disabled': subtitlesOffsetDisabled })}>Vertical position</div> <div className={classnames(styles['option-header'], { 'disabled': offsetDisabled })}>Vertical position</div>
<div className={classnames(styles['option-container'], { 'disabled': subtitlesOffsetDisabled })} title={subtitlesOffsetDisabled ? 'Vertical position is not configurable' : null}> <div className={classnames(styles['option-container'], { 'disabled': offsetDisabled })} title={offsetDisabled ? 'Vertical position is not configurable' : null}>
<Button className={classnames(styles['button-container'], { 'disabled': subtitlesOffsetDisabled })} data-offset={-1} onClick={onOffsetButtonClicked}> <Button className={classnames(styles['button-container'], { 'disabled': offsetDisabled })} data-offset={-1} onClick={onOffsetButtonClicked}>
<Icon className={styles['icon']} icon={'ic_minus'} /> <Icon className={styles['icon']} icon={'ic_minus'} />
</Button> </Button>
<div className={styles['option-label']} title={props.subtitlesOffset !== null && !isNaN(props.subtitlesOffset) ? `${props.subtitlesOffset}%` : null}> <div className={styles['option-label']} title={props.offset !== null && !isNaN(props.offset) ? `${props.offset}%` : null}>
{props.subtitlesOffset !== null && !isNaN(props.subtitlesOffset) ? `${props.subtitlesOffset}%` : '--'} {props.offset !== null && !isNaN(props.offset) ? `${props.offset}%` : '--'}
</div> </div>
<Button className={classnames(styles['button-container'], { 'disabled': subtitlesOffsetDisabled })} data-offset={1} onClick={onOffsetButtonClicked}> <Button className={classnames(styles['button-container'], { 'disabled': offsetDisabled })} data-offset={1} onClick={onOffsetButtonClicked}>
<Icon className={styles['icon']} icon={'ic_plus'} /> <Icon className={styles['icon']} icon={'ic_plus'} />
</Button> </Button>
</div> </div>
@ -184,20 +184,20 @@ const SubtitlesPicker = (props) => {
SubtitlesPicker.propTypes = { SubtitlesPicker.propTypes = {
className: PropTypes.string, className: PropTypes.string,
subtitlesTracks: PropTypes.arrayOf(PropTypes.shape({ tracks: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
lang: PropTypes.string.isRequired, lang: PropTypes.string.isRequired,
origin: PropTypes.string.isRequired origin: PropTypes.string.isRequired
})), })),
selectedSubtitlesTrackId: PropTypes.string, selectedTrackId: PropTypes.string,
subtitlesOffset: PropTypes.number, offset: PropTypes.number,
subtitlesSize: PropTypes.number, size: PropTypes.number,
subtitlesDelay: PropTypes.number, felay: PropTypes.number,
subtitlesTextColor: PropTypes.string, textColor: PropTypes.string,
subtitlesBackgroundColor: PropTypes.string, backgroundColor: PropTypes.string,
subtitlesOutlineColor: PropTypes.string, outlineColor: PropTypes.string,
onSubtitlesTrackSelected: PropTypes.func, onTrackSelected: PropTypes.func,
onSubtitlesOffsetChanged: PropTypes.func onOffsetChanged: PropTypes.func
}; };
module.exports = SubtitlesPicker; module.exports = SubtitlesPicker;