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

subtitles offset configured

Browse source
This commit is contained in:
nklhrstv 2020-03-10 13:32:30 +02:00
parent fce0d44e54
commit aba579802e
3 changed files with 32 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,6 +28,7 @@ const Player = ({ urlParams }) => {
selectedSubtitlesTrackId: null,
subtitlesSize: null,
subtitlesDelay: null,
subtitlesOffset: null,
subtitlesTextColor: null,
subtitlesBackgroundColor: null,
subtitlesOutlineColor: null
@ -74,6 +75,9 @@ const Player = ({ urlParams }) => {
const onSubtitlesTrackSelected = React.useCallback((trackId) => {
dispatch({ propName: 'selectedSubtitlesTrackId', propValue: trackId });
}, []);
const onSubtitlesOffsetChanged = React.useCallback((offset) => {
dispatch({ propName: 'subtitlesOffset', propValue: offset });
}, []);
const onContainerMouseDown = React.useCallback((event) => {
if (!event.nativeEvent.subtitlesPickerClosePrevented) {
closeSubtitlesPicker();
@ -129,12 +133,6 @@ const Player = ({ urlParams }) => {
volume={state.volume}
muted={state.muted}
subtitlesTracks={state.subtitlesTracks}
selectedSubtitlesTrackId={state.selectedSubtitlesTrackId}
subtitlesSize={state.subtitlesSize}
subtitlesDelay={state.subtitlesDelay}
subtitlesTextColor={state.subtitlesTextColor}
subtitlesBackgroundColor={state.subtitlesBackgroundColor}
subtitlesOutlineColor={state.subtitlesOutlineColor}
onPlayRequested={onPlayRequested}
onPauseRequested={onPauseRequested}
onMuteRequested={onMuteRequested}
@ -149,12 +147,14 @@ const Player = ({ urlParams }) => {
className={classnames(styles['layer'], styles['menu-layer'])}
subtitlesTracks={state.subtitlesTracks}
selectedSubtitlesTrackId={state.selectedSubtitlesTrackId}
subtitlesOffset={state.subtitlesOffset}
subtitlesSize={state.subtitlesSize}
subtitlesDelay={state.subtitlesDelay}
subtitlesTextColor={state.subtitlesTextColor}
subtitlesBackgroundColor={state.subtitlesBackgroundColor}
subtitlesOutlineColor={state.subtitlesOutlineColor}
onSubtitlesTrackSelected={onSubtitlesTrackSelected}
onSubtitlesOffsetChanged={onSubtitlesOffsetChanged}
/>
:
null

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

@ -50,13 +50,16 @@ const SubtitlesPicker = (props) => {
null;
}, [props.subtitlesTracks, props.selectedSubtitlesTrackId]);
const tracksForLanguage = React.useMemo(() => {
return Array.isArray(props.subtitlesTracks) && selectedLanguage !== null ?
return Array.isArray(props.subtitlesTracks) && typeof selectedLanguage === 'string' ?
props.subtitlesTracks.filter(({ lang }) => {
return lang === selectedLanguage;
})
:
[];
}, [props.subtitlesTracks, selectedLanguage]);
const subtitlesOffsetDisabled = React.useMemo(() => {
return props.subtitlesOffset === null || isNaN(props.subtitlesOffset);
}, [props.subtitlesOffset]);
const onMouseDown = React.useCallback((event) => {
event.nativeEvent.subtitlesPickerClosePrevented = true;
}, []);
@ -76,6 +79,14 @@ const SubtitlesPicker = (props) => {
const trackOnClick = React.useCallback((event) => {
props.onSubtitlesTrackSelected(event.currentTarget.dataset.trackId);
}, [props.onSubtitlesTrackSelected]);
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);
}
}
}, [props.subtitlesOffset, props.onSubtitlesOffsetChanged]);
return (
<div className={classnames(props.className, styles['subtitles-picker-container'])} onMouseDown={onMouseDown}>
<div className={styles['languages-container']}>
@ -84,7 +95,7 @@ const SubtitlesPicker = (props) => {
<Button title={'Off'} className={classnames(styles['language-option'], { 'selected': selectedLanguage === null })} onClick={languageOnClick}>
<div className={styles['language-label']}>Off</div>
{
selectedLanguage === null ?
typeof selectedLanguage !== 'string' ?
<div className={styles['icon']} />
:
null
@ -151,12 +162,14 @@ const SubtitlesPicker = (props) => {
</Button>
</div>
<div className={styles['option-header']}>Vertical position</div>
<div className={styles['option-container']}>
<Button className={styles['button-container']}>
<div className={classnames(styles['option-container'], { 'disabled': subtitlesOffsetDisabled })} title={subtitlesOffsetDisabled ? 'Vertical position is not configurable' : null}>
<Button className={classnames(styles['button-container'], { 'disabled': subtitlesOffsetDisabled })} data-offset={-1} onClick={onOffsetButtonClicked}>
<Icon className={styles['icon']} icon={'ic_minus'} />
</Button>
<div className={styles['option-label']} title={'18%'}>18%</div>
<Button className={styles['button-container']}>
<div className={styles['option-label']} title={!subtitlesOffsetDisabled ? `${props.subtitlesOffset}%` : null}>
{!subtitlesOffsetDisabled ? `${props.subtitlesOffset}%` : '--'}
</div>
<Button className={classnames(styles['button-container'], { 'disabled': subtitlesOffsetDisabled })} data-offset={1} onClick={onOffsetButtonClicked}>
<Icon className={styles['icon']} icon={'ic_plus'} />
</Button>
</div>
@ -175,12 +188,14 @@ SubtitlesPicker.propTypes = {
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
onSubtitlesTrackSelected: PropTypes.func,
onSubtitlesOffsetChanged: PropTypes.func
};
module.exports = SubtitlesPicker;

4
src/routes/Player/SubtitlesPicker/styles.less
View file

@ -109,6 +109,10 @@
align-items: center;
background: @color-background-dark1;
&:global(.disabled) {
opacity: 0.4;
}
.button-container {
flex: none;
width: 3rem;