Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

subtitles size changable for embedded subs

Browse source
This commit is contained in:
nklhrstv 2022-04-12 19:06:45 +03:00
parent 5057f4659c
commit c2ad087490
2 changed files with 36 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -52,6 +52,7 @@ const Player = ({ urlParams, queryParams }) => {
subtitlesTracks: [],
selectedSubtitlesTrackId: null,
subtitlesOffset: null,
subtitlesSize: null,
extraSubtitlesTracks: [],
selectedExtraSubtitlesTrackId: null,
extraSubtitlesSize: null,
@ -72,6 +73,7 @@ const Player = ({ urlParams, queryParams }) => {
manifest.props.forEach((propName) => {
dispatch({ type: 'observeProp', propName });
});
dispatch({ type: 'setProp', propName: 'subtitlesSize', propValue: settings.subtitlesSize });
dispatch({ type: 'setProp', propName: 'subtitlesOffset', propValue: settings.subtitlesOffset });
dispatch({ type: 'setProp', propName: 'extraSubtitlesSize', propValue: settings.subtitlesSize });
dispatch({ type: 'setProp', propName: 'extraSubtitlesOffset', propValue: settings.subtitlesOffset });
@ -266,6 +268,7 @@ const Player = ({ urlParams, queryParams }) => {
}
}, [player.subtitles, videoState.stream]);
React.useEffect(() => {
dispatch({ type: 'setProp', propName: 'subtitlesSize', propValue: settings.subtitlesSize });
dispatch({ type: 'setProp', propName: 'extraSubtitlesSize', propValue: settings.subtitlesSize });
}, [settings.subtitlesSize]);
React.useEffect(() => {
@ -498,6 +501,7 @@ const Player = ({ urlParams, queryParams }) => {
subtitlesTracks={videoState.subtitlesTracks}
selectedSubtitlesTrackId={videoState.selectedSubtitlesTrackId}
subtitlesOffset={videoState.subtitlesOffset}
subtitlesSize={videoState.subtitlesSize}
extraSubtitlesTracks={videoState.extraSubtitlesTracks}
selectedExtraSubtitlesTrackId={videoState.selectedExtraSubtitlesTrackId}
extraSubtitlesOffset={videoState.extraSubtitlesOffset}
@ -506,6 +510,7 @@ const Player = ({ urlParams, queryParams }) => {
onSubtitlesTrackSelected={onSubtitlesTrackSelected}
onExtraSubtitlesTrackSelected={onExtraSubtitlesTrackSelected}
onSubtitlesOffsetChanged={onSubtitlesOffsetChanged}
onSubtitlesSizeChanged={onSubtitlesSizeChanged}
onExtraSubtitlesOffsetChanged={onSubtitlesOffsetChanged}
onExtraSubtitlesDelayChanged={onExtraSubtitlesDelayChanged}
onExtraSubtitlesSizeChanged={onSubtitlesSizeChanged}

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

@ -107,16 +107,24 @@ const SubtitlesMenu = (props) => {
}, [props.selectedExtraSubtitlesTrackId, props.extraSubtitlesDelay, props.onExtraSubtitlesDelayChanged]);
const onSubtitlesSizeChanged = React.useCallback((event) => {
const delta = event.value === 'increment' ? 1 : -1;
if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
if (typeof props.selectedSubtitlesTrackId === 'string') {
if (props.subtitlesSize !== null && !isNaN(props.subtitlesSize)) {
const sizeIndex = CONSTANTS.SUBTITLES_SIZES.indexOf(props.subtitlesSize);
const size = CONSTANTS.SUBTITLES_SIZES[Math.max(0, Math.min(CONSTANTS.SUBTITLES_SIZES.length - 1, sizeIndex + delta))];
if (typeof props.onSubtitlesSizeChanged === 'function') {
props.onSubtitlesSizeChanged(size);
}
}
} else if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
if (props.extraSubtitlesSize !== null && !isNaN(props.extraSubtitlesSize)) {
const extraSizeIndex = CONSTANTS.SUBTITLES_SIZES.indexOf(props.extraSubtitlesSize);
const extraSize = CONSTANTS.SUBTITLES_SIZES[Math.max(0, Math.min(CONSTANTS.SUBTITLES_SIZES.length, extraSizeIndex + delta))];
const extraSize = CONSTANTS.SUBTITLES_SIZES[Math.max(0, Math.min(CONSTANTS.SUBTITLES_SIZES.length - 1, extraSizeIndex + delta))];
if (typeof props.onExtraSubtitlesSizeChanged === 'function') {
props.onExtraSubtitlesSizeChanged(extraSize);
}
}
}
}, [props.selectedExtraSubtitlesTrackId, props.extraSubtitlesSize, props.onExtraSubtitlesSizeChanged]);
}, [props.selectedSubtitlesTrackId, props.selectedExtraSubtitlesTrackId, props.subtitlesSize, props.extraSubtitlesSize, props.onSubtitlesSizeChanged, props.onExtraSubtitlesSizeChanged]);
const onSubtitlesOffsetChanged = React.useCallback((event) => {
const delta = event.value === 'increment' ? 1 : -1;
if (typeof props.selectedSubtitlesTrackId === 'string') {
@ -199,8 +207,24 @@ const SubtitlesMenu = (props) => {
<DiscreteSelectInput
className={styles['discrete-input']}
label={'Size'}
value={typeof props.selectedExtraSubtitlesTrackId === 'string' && props.extraSubtitlesSize !== null && !isNaN(props.extraSubtitlesSize) ? `${props.extraSubtitlesSize}%` : '--'}
disabled={typeof props.selectedExtraSubtitlesTrackId !== 'string' || props.extraSubtitlesSize === null || isNaN(props.extraSubtitlesSize)}
value={
typeof props.selectedSubtitlesTrackId === 'string' ?
props.subtitlesSize !== null && !isNaN(props.subtitlesSize) ? `${props.subtitlesSize}%` : '--'
:
typeof props.selectedExtraSubtitlesTrackId === 'string' ?
props.extraSubtitlesSize !== null && !isNaN(props.extraSubtitlesSize) ? `${props.extraSubtitlesSize}%` : '--'
:
'--'
}
disabled={
typeof props.selectedSubtitlesTrackId === 'string' ?
props.subtitlesSize === null || isNaN(props.subtitlesSize)
:
typeof props.selectedExtraSubtitlesTrackId === 'string' ?
props.extraSubtitlesSize === null || isNaN(props.extraSubtitlesSize)
:
true
}
onChange={onSubtitlesSizeChanged}
/>
<DiscreteSelectInput
@ -242,6 +266,7 @@ SubtitlesMenu.propTypes = {
})),
selectedSubtitlesTrackId: PropTypes.string,
subtitlesOffset: PropTypes.number,
subtitlesSize: PropTypes.number,
extraSubtitlesTracks: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
lang: PropTypes.string.isRequired,
@ -254,6 +279,7 @@ SubtitlesMenu.propTypes = {
onSubtitlesTrackSelected: PropTypes.func,
onExtraSubtitlesTrackSelected: PropTypes.func,
onSubtitlesOffsetChanged: PropTypes.func,
onSubtitlesSizeChanged: PropTypes.func,
onExtraSubtitlesOffsetChanged: PropTypes.func,
onExtraSubtitlesDelayChanged: PropTypes.func,
onExtraSubtitlesSizeChanged: PropTypes.func