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

refactor: calculate the offset based on the height of the control-bar-layer

Browse source
This commit is contained in:
kKaskak 2024-01-09 18:10:32 +02:00
parent 15f54c9a93
commit 8ef9b2d05c
2 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/routes/Player/ControlBar/ControlBar.js
View file

@ -12,7 +12,7 @@ const styles = require('./styles');
const { useBinaryState } = require('stremio/common');
const { t } = require('i18next');
const ControlBar = ({
const ControlBar = React.forwardRef(({
className,
paused,
time,
@ -41,7 +41,7 @@ const ControlBar = ({
onToggleOptionsMenu,
onToggleStatisticsMenu,
...props
}) => {
}, ref) => {
const { chromecast } = useServices();
const [chromecastServiceActive, setChromecastServiceActive] = React.useState(() => chromecast.active);
const [buttonsMenuOpen, , , toogleButtonsMenu] = useBinaryState(false);
@ -103,7 +103,7 @@ const ControlBar = ({
};
}, []);
return (
<div {...props} className={classnames(className, styles['control-bar-container'])}>
<div {...props} className={classnames(className, styles['control-bar-container'])} ref={ref}>
<SeekBar
className={styles['seek-bar']}
time={time}
@ -175,7 +175,9 @@ const ControlBar = ({
</div>
</div>
);
};
});
ControlBar.displayName = 'ControlBar';
ControlBar.propTypes = {
className: PropTypes.string,

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

@ -78,6 +78,8 @@ const Player = ({ urlParams, queryParams }) => {
const nextVideoPopupDismissed = React.useRef(false);
const defaultSubtitlesSelected = React.useRef(false);
const defaultAudioTrackSelected = React.useRef(false);
const controlBarRef = React.createRef();
const [error, setError] = React.useState(null);
const onImplementationChanged = React.useCallback(() => {
@ -187,11 +189,6 @@ const Player = ({ urlParams, queryParams }) => {
updateSettings({ subtitlesSize: size });
}, [updateSettings]);
const onSubtitlesOffsetChanged = React.useCallback((offset) => {
if (offset > 10) setOriginalSubtitlesOffset(offset);
updateSettings({ subtitlesOffset: offset });
}, [updateSettings]);
const onDismissNextVideoPopup = React.useCallback(() => {
closeNextVideoPopup();
nextVideoPopupDismissed.current = true;
@ -248,11 +245,19 @@ const Player = ({ urlParams, queryParams }) => {
}
}, []);
const onSubtitlesOffsetChanged = React.useCallback((offset) => {
if (offset > 10) setOriginalSubtitlesOffset(offset);
updateSettings({ subtitlesOffset: offset });
}, [updateSettings]);
const onContainerMouseMove = React.useCallback((event) => {
setImmersed(false);
if (settings.subtitlesOffset < 10) {
if (settings.subtitlesOffset < 10 && !immersed) {
setOriginalSubtitlesOffset(settings.subtitlesOffset);
const dynamicOffset = Math.min(window.innerHeight * 0.1, 10);
const px = controlBarRef?.current?.offsetHeight;
const windowHeight = window.innerHeight;
const dynamicOffset = Math.max(10, Math.max(0, Math.round((px / windowHeight) * 100)));
console.log(dynamicOffset)
updateSettings({ subtitlesOffset: dynamicOffset });
}
if (!event.nativeEvent.immersePrevented) {
@ -678,6 +683,7 @@ const Player = ({ urlParams, queryParams }) => {
onToggleStatisticsMenu={toggleStatisticsMenu}
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
ref={controlBarRef}
/>
{
nextVideoPopupOpen ?