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

refactor: add forwardRef to Controlbar.js

Browse source 
Co-Authored-By: Lachezar Lechev <8925621+elpiel@users.noreply.github.com>
This commit is contained in:
kKaskak 2023-12-18 13:20:36 +01:00
parent c654c7c1f5
commit f1b6ac17e4
2 changed files with 13 additions and 10 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);
@ -133,7 +133,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}
@ -205,7 +205,9 @@ const ControlBar = ({
</div>
</div>
);
};
});
ControlBar.displayName = 'ControlBar';
ControlBar.propTypes = {
className: PropTypes.string,

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

@ -51,7 +51,7 @@ 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 controlBarRef = React.useRef(null);
const [controlBarHeight, setControlBarHeight] = React.useState(0);
const [error, setError] = React.useState(null);
@ -267,10 +267,11 @@ const Player = ({ urlParams, queryParams }) => {
}, []);
React.useEffect(() => {
if(controlBarHeight.current) {
setControlBarHeight(controlBarHeight.current.clientHeight);
if(controlBarRef.current.clientHeight) {
const height = controlBarRef.current.clientHeight;
setControlBarHeight(height);
}
}, []);
}, [controlBarRef?.current]);
React.useEffect(() => {
setError(null);
if (player.selected === null) {
@ -478,6 +479,7 @@ const Player = ({ urlParams, queryParams }) => {
}
};
}, []);
console.log(controlBarHeight)
React.useLayoutEffect(() => {
const onKeyDown = (event) => {
switch (event.code) {
@ -688,7 +690,6 @@ const Player = ({ urlParams, queryParams }) => {
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
/>
<div ref={controlBar}>
<ControlBar
className={classnames(styles['layer'], styles['control-bar-layer'])}
paused={videoState.paused}
@ -719,8 +720,8 @@ const Player = ({ urlParams, queryParams }) => {
onToggleStatisticsMenu={toggleStatisticsMenu}
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
ref={controlBarRef}
/>
</div>
{
nextVideoPopupOpen ?
<NextVideoPopup