diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index d5e8d426c..5658dc448 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -145,16 +145,16 @@ const Player = ({ urlParams }) => { subtitlesPickerOpen ? : null diff --git a/src/routes/Player/SubtitlesPicker/SubtitlesPicker.js b/src/routes/Player/SubtitlesPicker/SubtitlesPicker.js index e50a97a50..1981240f7 100644 --- a/src/routes/Player/SubtitlesPicker/SubtitlesPicker.js +++ b/src/routes/Player/SubtitlesPicker/SubtitlesPicker.js @@ -26,8 +26,8 @@ const comparatorWithPriorities = (priorities) => { const SubtitlesPicker = (props) => { const languages = React.useMemo(() => { - return Array.isArray(props.subtitlesTracks) ? - props.subtitlesTracks.reduce((languages, { lang }) => { + return Array.isArray(props.tracks) ? + props.tracks.reduce((languages, { lang }) => { if (!languages.includes(lang)) { languages.push(lang); } @@ -36,11 +36,11 @@ const SubtitlesPicker = (props) => { }, []) : []; - }, [props.subtitlesTracks]); + }, [props.tracks]); const selectedLanguage = React.useMemo(() => { - return Array.isArray(props.subtitlesTracks) ? - props.subtitlesTracks.reduce((selectedLanguage, { id, lang }) => { - if (id === props.selectedSubtitlesTrackId) { + return Array.isArray(props.tracks) ? + props.tracks.reduce((selectedLanguage, { id, lang }) => { + if (id === props.selectedTrackId) { return lang; } @@ -48,26 +48,26 @@ const SubtitlesPicker = (props) => { }, null) : null; - }, [props.subtitlesTracks, props.selectedSubtitlesTrackId]); + }, [props.tracks, props.selectedTrackId]); const tracksForLanguage = React.useMemo(() => { - return Array.isArray(props.subtitlesTracks) && typeof selectedLanguage === 'string' ? - props.subtitlesTracks.filter(({ lang }) => { + return Array.isArray(props.tracks) && typeof selectedLanguage === 'string' ? + props.tracks.filter(({ lang }) => { return lang === selectedLanguage; }) : []; - }, [props.subtitlesTracks, selectedLanguage]); - const subtitlesOffsetDisabled = React.useMemo(() => { + }, [props.tracks, selectedLanguage]); + const offsetDisabled = React.useMemo(() => { return typeof selectedLanguage !== 'string' || - props.subtitlesOffset === null || - isNaN(props.subtitlesOffset); - }, [selectedLanguage, props.subtitlesOffset]); + props.offset === null || + isNaN(props.offset); + }, [selectedLanguage, props.offset]); const onMouseDown = React.useCallback((event) => { event.nativeEvent.subtitlesPickerClosePrevented = true; }, []); const languageOnClick = React.useCallback((event) => { - const trackId = Array.isArray(props.subtitlesTracks) ? - props.subtitlesTracks.reduceRight((trackId, track) => { + const trackId = Array.isArray(props.tracks) ? + props.tracks.reduceRight((trackId, track) => { if (track.lang === event.currentTarget.dataset.lang) { return track.id; } @@ -76,19 +76,19 @@ const SubtitlesPicker = (props) => { }, null) : null; - props.onSubtitlesTrackSelected(trackId); - }, [props.subtitlesTracks, props.onSubtitlesTrackSelected]); + props.onTrackSelected(trackId); + }, [props.tracks, props.onTrackSelected]); const trackOnClick = React.useCallback((event) => { - props.onSubtitlesTrackSelected(event.currentTarget.dataset.trackId); - }, [props.onSubtitlesTrackSelected]); + props.onTrackSelected(event.currentTarget.dataset.trackId); + }, [props.onTrackSelected]); const onOffsetButtonClicked = React.useCallback((event) => { - if (props.subtitlesOffset !== null && !isNaN(props.subtitlesOffset)) { - const offset = props.subtitlesOffset + parseInt(event.currentTarget.dataset.offset); - if (typeof props.onSubtitlesOffsetChanged === 'function') { - props.onSubtitlesOffsetChanged(offset); + if (props.offset !== null && !isNaN(props.offset)) { + const offset = props.offset + parseInt(event.currentTarget.dataset.offset); + if (typeof props.onOffsetChanged === 'function') { + props.onOffsetChanged(offset); } } - }, [props.subtitlesOffset, props.onSubtitlesOffsetChanged]); + }, [props.offset, props.onOffsetChanged]); return (
@@ -122,10 +122,10 @@ const SubtitlesPicker = (props) => { tracksForLanguage.length > 0 ?
{tracksForLanguage.map((track, index) => ( -
-
Vertical position
-
- -
- {props.subtitlesOffset !== null && !isNaN(props.subtitlesOffset) ? `${props.subtitlesOffset}%` : '--'} +
+ {props.offset !== null && !isNaN(props.offset) ? `${props.offset}%` : '--'}
-
@@ -184,20 +184,20 @@ const SubtitlesPicker = (props) => { SubtitlesPicker.propTypes = { className: PropTypes.string, - subtitlesTracks: PropTypes.arrayOf(PropTypes.shape({ + tracks: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string.isRequired, lang: PropTypes.string.isRequired, origin: PropTypes.string.isRequired })), - selectedSubtitlesTrackId: PropTypes.string, - subtitlesOffset: PropTypes.number, - subtitlesSize: PropTypes.number, - subtitlesDelay: PropTypes.number, - subtitlesTextColor: PropTypes.string, - subtitlesBackgroundColor: PropTypes.string, - subtitlesOutlineColor: PropTypes.string, - onSubtitlesTrackSelected: PropTypes.func, - onSubtitlesOffsetChanged: PropTypes.func + selectedTrackId: PropTypes.string, + offset: PropTypes.number, + size: PropTypes.number, + felay: PropTypes.number, + textColor: PropTypes.string, + backgroundColor: PropTypes.string, + outlineColor: PropTypes.string, + onTrackSelected: PropTypes.func, + onOffsetChanged: PropTypes.func }; module.exports = SubtitlesPicker;