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

Merge pull request #1116 from Stremio/feat/player-remember-subtitles-settings
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source 
Player: Remember subtitles settings
This commit is contained in:
Tim 2026-01-22 10:04:19 +01:00 committed by GitHub
commit 89fbbb3451
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -41,7 +41,7 @@ const Player = ({ urlParams, queryParams }) => {
}, [queryParams]); }, [queryParams]);
const profile = useProfile(); const profile = useProfile();
const [player, videoParamsChanged, streamStateChanged, timeChanged, seek, pausedChanged, ended, nextVideo] = usePlayer(urlParams); const [player, videoParamsChanged, streamStateChanged, timeChanged, seek, pausedChanged, ended, nextVideo] = usePlayer(urlParams);
const [settings, updateSettings] = useSettings(); const [settings] = useSettings();
const streamingServer = useStreamingServer(); const streamingServer = useStreamingServer();
const statistics = useStatistics(player, streamingServer); const statistics = useStatistics(player, streamingServer);
const video = useVideo(); const video = useVideo();
@ -256,7 +256,8 @@ const Player = ({ urlParams, queryParams }) => {
const onExtraSubtitlesDelayChanged = React.useCallback((delay) => { const onExtraSubtitlesDelayChanged = React.useCallback((delay) => {
video.setProp('extraSubtitlesDelay', delay); video.setProp('extraSubtitlesDelay', delay);
}, []); streamStateChanged({ subtitleDelay: delay });
}, [streamStateChanged]);
const onIncreaseSubtitlesDelay = React.useCallback(() => { const onIncreaseSubtitlesDelay = React.useCallback(() => {
const delay = video.state.extraSubtitlesDelay + 250; const delay = video.state.extraSubtitlesDelay + 250;
@ -269,8 +270,10 @@ const Player = ({ urlParams, queryParams }) => {
}, [video.state.extraSubtitlesDelay, onExtraSubtitlesDelayChanged]); }, [video.state.extraSubtitlesDelay, onExtraSubtitlesDelayChanged]);
const onSubtitlesSizeChanged = React.useCallback((size) => { const onSubtitlesSizeChanged = React.useCallback((size) => {
updateSettings({ subtitlesSize: size }); video.setProp('subtitlesSize', size);
}, [updateSettings]); video.setProp('extraSubtitlesSize', size);
streamStateChanged({ subtitleSize: size });
}, [streamStateChanged]);
const onUpdateSubtitlesSize = React.useCallback((delta) => { const onUpdateSubtitlesSize = React.useCallback((delta) => {
const sizeIndex = CONSTANTS.SUBTITLES_SIZES.indexOf(video.state.subtitlesSize); const sizeIndex = CONSTANTS.SUBTITLES_SIZES.indexOf(video.state.subtitlesSize);
@ -279,8 +282,10 @@ const Player = ({ urlParams, queryParams }) => {
}, [video.state.subtitlesSize, onSubtitlesSizeChanged]); }, [video.state.subtitlesSize, onSubtitlesSizeChanged]);
const onSubtitlesOffsetChanged = React.useCallback((offset) => { const onSubtitlesOffsetChanged = React.useCallback((offset) => {
updateSettings({ subtitlesOffset: offset }); video.setProp('subtitlesOffset', offset);
}, [updateSettings]); video.setProp('extraSubtitlesOffset', offset);
streamStateChanged({ subtitleOffset: offset });
}, [streamStateChanged]);
const onDismissNextVideoPopup = React.useCallback(() => { const onDismissNextVideoPopup = React.useCallback(() => {
closeNextVideoPopup(); closeNextVideoPopup();
@ -408,31 +413,6 @@ const Player = ({ urlParams, queryParams }) => {
} }
}, [player.subtitles, video.state.stream]); }, [player.subtitles, video.state.stream]);
React.useEffect(() => {
video.setProp('subtitlesSize', settings.subtitlesSize);
video.setProp('extraSubtitlesSize', settings.subtitlesSize);
}, [settings.subtitlesSize]);
React.useEffect(() => {
video.setProp('subtitlesOffset', settings.subtitlesOffset);
video.setProp('extraSubtitlesOffset', settings.subtitlesOffset);
}, [settings.subtitlesOffset]);
React.useEffect(() => {
video.setProp('subtitlesTextColor', settings.subtitlesTextColor);
video.setProp('extraSubtitlesTextColor', settings.subtitlesTextColor);
}, [settings.subtitlesTextColor]);
React.useEffect(() => {
video.setProp('subtitlesBackgroundColor', settings.subtitlesBackgroundColor);
video.setProp('extraSubtitlesBackgroundColor', settings.subtitlesBackgroundColor);
}, [settings.subtitlesBackgroundColor]);
React.useEffect(() => {
video.setProp('subtitlesOutlineColor', settings.subtitlesOutlineColor);
video.setProp('extraSubtitlesOutlineColor', settings.subtitlesOutlineColor);
}, [settings.subtitlesOutlineColor]);
React.useEffect(() => { React.useEffect(() => {
!seeking && timeChanged(video.state.time, video.state.duration, video.state.manifest?.name); !seeking && timeChanged(video.state.time, video.state.duration, video.state.manifest?.name);
}, [video.state.time, video.state.duration, video.state.manifest, seeking]); }, [video.state.time, video.state.duration, video.state.manifest, seeking]);
@ -509,6 +489,28 @@ const Player = ({ urlParams, queryParams }) => {
} }
}, [video.state.audioTracks, player.streamState]); }, [video.state.audioTracks, player.streamState]);
// Saved subtitles settings
React.useEffect(() => {
if (video.state.stream !== null) {
const subtitlesDelay = player.streamState?.subtitleDelay;
if (typeof subtitlesDelay === 'number') {
video.setProp('extraSubtitlesDelay', subtitlesDelay);
}
const subtitlesSize = player.streamState?.subtitleSize;
if (typeof subtitlesSize === 'number') {
video.setProp('subtitlesSize', subtitlesSize);
video.setProp('extraSubtitlesSize', subtitlesSize);
}
const subtitlesOffset = player.streamState?.subtitleOffset;
if (typeof subtitlesOffset === 'number') {
video.setProp('subtitlesOffset', subtitlesOffset);
video.setProp('extraSubtitlesOffset', subtitlesOffset);
}
}
}, [video.state.stream, player.streamState]);
React.useEffect(() => { React.useEffect(() => {
defaultSubtitlesSelected.current = false; defaultSubtitlesSelected.current = false;
defaultAudioTrackSelected.current = false; defaultAudioTrackSelected.current = false;

3
src/types/models/Player.d.ts vendored
View file

@ -41,6 +41,9 @@ type AudioTrackState = {
type StreamState = { type StreamState = {
subtitleTrack?: SubtitlesTrackState, subtitleTrack?: SubtitlesTrackState,
subtitleDelay?: number,
subtitleSize?: number,
subtitleOffset?: number,
audioTrack?: AudioTrackState, audioTrack?: AudioTrackState,
}; };