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

subtitles offset for internal subs updated from player

Browse source
This commit is contained in:
nklhrstv 2022-04-11 18:33:00 +03:00
parent 395850633a
commit f52870aa8e
2 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -51,6 +51,7 @@ const Player = ({ urlParams, queryParams }) => {
muted: null,
subtitlesTracks: [],
selectedSubtitlesTrackId: null,
subtitlesOffset: null,
extraSubtitlesTracks: [],
selectedExtraSubtitlesTrackId: null,
extraSubtitlesSize: null,
@ -71,6 +72,7 @@ const Player = ({ urlParams, queryParams }) => {
manifest.props.forEach((propName) => {
dispatch({ type: 'observeProp', propName });
});
dispatch({ type: 'setProp', propName: 'subtitlesOffset', propValue: settings.subtitlesOffset });
dispatch({ type: 'setProp', propName: 'extraSubtitlesSize', propValue: settings.subtitlesSize });
dispatch({ type: 'setProp', propName: 'extraSubtitlesOffset', propValue: settings.subtitlesOffset });
dispatch({ type: 'setProp', propName: 'extraSubtitlesTextColor', propValue: settings.subtitlesTextColor });
@ -268,6 +270,7 @@ const Player = ({ urlParams, queryParams }) => {
}, [settings.subtitlesSize]);
React.useEffect(() => {
dispatch({ type: 'setProp', propName: 'extraSubtitlesOffset', propValue: settings.subtitlesOffset });
dispatch({ type: 'setProp', propName: 'subtitlesOffset', propValue: settings.subtitlesOffset });
}, [settings.subtitlesOffset]);
React.useEffect(() => {
dispatch({ type: 'setProp', propName: 'extraSubtitlesTextColor', propValue: settings.subtitlesTextColor });
@ -492,16 +495,21 @@ const Player = ({ urlParams, queryParams }) => {
className={classnames(styles['layer'], styles['menu-layer'])}
tracks={videoState.subtitlesTracks}
selectedTrackId={videoState.selectedSubtitlesTrackId}
offset={
videoState.subtitlesOffset !== null && !isNaN(videoState.subtitlesOffset) ?
videoState.subtitlesOffset
:
videoState.extraSubtitlesOffset
}
extraTracks={videoState.extraSubtitlesTracks}
selectedExtraTrackId={videoState.selectedExtraSubtitlesTrackId}
extraDelay={videoState.extraSubtitlesDelay}
extraSize={videoState.extraSubtitlesSize}
extraOffset={videoState.extraSubtitlesOffset}
onTrackSelected={onSubtitlesTrackSelected}
onOffsetChanged={onSubtitlesOffsetChanged}
onExtraTrackSelected={onExtraSubtitlesTrackSelected}
onExtraDelayChanged={onExtraSubtitlesDelayChanged}
onExtraSizeChanged={onSubtitlesSizeChanged}
onExtraOffsetChanged={onSubtitlesOffsetChanged}
/>
:
null

24
src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
View file

@ -113,15 +113,15 @@ const SubtitlesMenu = (props) => {
}
}
}, [props.extraSize, props.onExtraSizeChanged]);
const onExtraOffsetChanged = React.useCallback((event) => {
if (props.extraOffset !== null && !isNaN(props.extraOffset)) {
const onOffsetChanged = React.useCallback((event) => {
if (props.offset !== null && !isNaN(props.offset)) {
const delta = event.value === 'increment' ? 1 : -1;
const extraOffset = props.extraOffset + delta;
if (typeof props.onExtraOffsetChanged === 'function') {
props.onExtraOffsetChanged(extraOffset);
const offset = Math.max(0, Math.min(100, Math.floor(props.offset + delta)));
if (typeof props.onOffsetChanged === 'function') {
props.onOffsetChanged(offset);
}
}
}, [props.extraOffset, props.onExtraOffsetChanged]);
}, [props.offset, props.onOffsetChanged]);
return (
<div className={classnames(props.className, styles['subtitles-menu-container'])} onMouseDown={onMouseDown}>
<div className={styles['languages-container']}>
@ -193,9 +193,9 @@ const SubtitlesMenu = (props) => {
<DiscreteSelectInput
className={styles['discrete-input']}
label={'Vertical position'}
value={props.extraOffset !== null && !isNaN(props.extraOffset) ? `${props.extraOffset}%` : '--'}
disabled={typeof props.selectedExtraTrackId !== 'string' || props.extraOffset === null || isNaN(props.extraOffset)}
onChange={onExtraOffsetChanged}
value={props.offset !== null && !isNaN(props.offset) ? `${props.offset}%` : '--'}
disabled={props.offset === null || isNaN(props.offset)}
onChange={onOffsetChanged}
/>
<div className={styles['spacing']} />
<Button className={classnames(styles['advanced-button'], 'disabled')} title={'Advanced'}>Advanced</Button>
@ -212,6 +212,7 @@ SubtitlesMenu.propTypes = {
origin: PropTypes.string.isRequired
})),
selectedTrackId: PropTypes.string,
offset: PropTypes.number,
extraTracks: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
lang: PropTypes.string.isRequired,
@ -220,12 +221,11 @@ SubtitlesMenu.propTypes = {
selectedExtraTrackId: PropTypes.string,
extraDelay: PropTypes.number,
extraSize: PropTypes.number,
extraOffset: PropTypes.number,
onTrackSelected: PropTypes.func,
onOffsetChanged: PropTypes.func,
onExtraTrackSelected: PropTypes.func,
onExtraDelayChanged: PropTypes.func,
onExtraSizeChanged: PropTypes.func,
onExtraOffsetChanged: PropTypes.func
onExtraSizeChanged: PropTypes.func
};
module.exports = SubtitlesMenu;