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

feat: Player - move subtitles up when control bar is shown

Browse source 
Signed-off-by: Lachezar Lechev <lachezar@ambire.com>
This commit is contained in:
Lachezar Lechev 2023-12-18 13:46:35 +02:00
parent 0463cb109f
commit c654c7c1f5
No known key found for this signature in database
GPG key ID: 69BDCB3ED8CE8037
1 changed files with 17 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -51,6 +51,9 @@ const Player = ({ urlParams, queryParams }) => {
const nextVideoPopupDismissed = React.useRef(false);
const defaultSubtitlesSelected = React.useRef(false);
const defaultAudioTrackSelected = React.useRef(false);
const controlBar = React.useRef(null);
const [controlBarHeight, setControlBarHeight] = React.useState(0);
const [error, setError] = React.useState(null);
const [videoState, setVideoState] = React.useReducer(
(videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
@ -251,11 +254,23 @@ const Player = ({ urlParams, queryParams }) => {
}, []);
const onContainerMouseLeave = React.useCallback(() => {
setImmersedDebounced.cancel();
// TODO: Move subtitles position down
dispatch({ type: 'setProp', propName: 'subtitlesOffset', propValue: settings.subtitlesOffset + controlBarHeight });
dispatch({ type: 'setProp', propName: 'extraSubtitlesOffset', propValue: settings.subtitlesOffset + controlBarHeight });
setImmersed(true);
}, []);
const onBarMouseMove = React.useCallback((event) => {
// TODO: move subtitles up
dispatch({ type: 'setProp', propName: 'subtitlesOffset', propValue: settings.subtitlesOffset });
dispatch({ type: 'setProp', propName: 'extraSubtitlesOffset', propValue: settings.subtitlesOffset });
event.nativeEvent.immersePrevented = true;
}, []);
React.useEffect(() => {
if(controlBarHeight.current) {
setControlBarHeight(controlBarHeight.current.clientHeight);
}
}, []);
React.useEffect(() => {
setError(null);
if (player.selected === null) {
@ -673,6 +688,7 @@ const Player = ({ urlParams, queryParams }) => {
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
/>
<div ref={controlBar}>
<ControlBar
className={classnames(styles['layer'], styles['control-bar-layer'])}
paused={videoState.paused}
@ -704,6 +720,7 @@ const Player = ({ urlParams, queryParams }) => {
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
/>
</div>
{
nextVideoPopupOpen ?
<NextVideoPopup