Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-06 17:51:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: moved & refactored the logic to the component

Browse source
This commit is contained in:
kKaskak 2024-01-17 20:24:20 +02:00
parent 4ce1ee7a6a
commit 69e90e8d8b
3 changed files with 48 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -57,8 +57,6 @@ const Player = ({ urlParams, queryParams }) => {
const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
const [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false);
const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
const [volumeChangeIndicatorOpen, openVolumeChangeIndicator, closeVolumeChangeIndicator] = useBinaryState(false);
const volumeChangeTimeout = React.useRef(null);
const menusOpen = React.useMemo(() => {
return optionsMenuOpen || subtitlesMenuOpen || infoMenuOpen || speedMenuOpen || videosMenuOpen || statisticsMenuOpen;
@ -157,13 +155,7 @@ const Player = ({ urlParams, queryParams }) => {
const onVolumeChangeRequested = React.useCallback((volume) => {
video.setProp('volume', volume);
if (immersed && !menusOpen) {
openVolumeChangeIndicator();
}
if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
volumeChangeTimeout.current = setTimeout(closeVolumeChangeIndicator, 1500);
}, [immersed, menusOpen]);
}, []);
const onSeekRequested = React.useCallback((time) => {
video.setProp('time', time);
@ -432,12 +424,6 @@ const Player = ({ urlParams, queryParams }) => {
}
}, [video.state.playbackSpeed]);
React.useEffect(() => {
return () => {
if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
};
}, []);
React.useEffect(() => {
const toastFilter = (item) => item?.dataset?.type === 'CoreEvent';
toast.addFilter(toastFilter);
@ -646,11 +632,13 @@ const Player = ({ urlParams, queryParams }) => {
null
}
{
volumeChangeIndicatorOpen ?
immersed ?
<VolumeChangeIndicator
muted={video.state.muted}
volume={video.state.volume}
onVolumeChangeRequested={onVolumeChangeRequested}
immersed={immersed}
menusOpen={menusOpen}
/>
:
null

57
src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js
View file

@ -6,26 +6,57 @@ const { default: Icon } = require('@stremio/stremio-icons/react');
const { default: classNames } = require('classnames');
const PropTypes = require('prop-types');
const styles = require('./styles');
const { useBinaryState } = require('stremio/common');
const VolumeChangeIndicator = React.memo(({ muted, onVolumeChangeRequested, volume, menusOpen, immersed }) => {
const [volumeIndicatorOpen, openVolumeIndicator, closeVolumeIndicator] = useBinaryState(false);
const volumeChangeTimeout = React.useRef(null);
React.useEffect(() => {
if (immersed && !menusOpen) openVolumeIndicator();
if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
volumeChangeTimeout.current = setTimeout(closeVolumeIndicator, 1500);
}, [volume, menusOpen, immersed]);
React.useEffect(() => {
return () => {
if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current);
};
}, [volume]);
const VolumeChangeIndicator = ({ muted, onVolumeChangeRequested, volume }) => {
return (
<div className={classNames(styles['layer'], styles['volume-change-indicator'])}>
<Icon name={
(typeof muted === 'boolean' && muted) ? 'volume-mute' :
(volume === null || isNaN(volume)) ? 'volume-off' :
volume < 30 ? 'volume-low' :
volume < 70 ? 'volume-medium' :
'volume-high'
} className={styles['volume-icon']} />
<VolumeSlider volume={volume} onVolumeChangeRequested={onVolumeChangeRequested} className={styles['volume-slider']} />
</div>
<React.Fragment>
{
volumeIndicatorOpen ?
<div className={classNames(styles['layer'], styles['volume-change-indicator'])}>
<Icon name={
(typeof muted === 'boolean' && muted) ? 'volume-mute' :
(volume === null || isNaN(volume)) ? 'volume-off' :
volume < 30 ? 'volume-low' :
volume < 70 ? 'volume-medium' :
'volume-high'
} className={styles['volume-icon']} />
<VolumeSlider volume={volume} onVolumeChangeRequested={onVolumeChangeRequested} className={styles['volume-slider']} />
</div>
:
null
}
</React.Fragment>
);
};
});
VolumeChangeIndicator.displayName = 'VolumeChangeIndicator';
module.exports = VolumeChangeIndicator;
VolumeChangeIndicator.propTypes = {
muted: PropTypes.bool,
onVolumeChangeRequested: PropTypes.func,
volume: PropTypes.number
volume: PropTypes.number,
menusOpen: PropTypes.bool,
immersed: PropTypes.bool,
openVolumeIndicator: PropTypes.func,
closeVolumeIndicator: PropTypes.func
};

3
src/routes/Player/VolumeChangeIndicator/styles.less
View file

@ -10,7 +10,6 @@
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 99999;
transform: translate(-50%, -50%);
background-color: var(--overlay-color);
border-radius: var(--border-radius);
@ -21,12 +20,10 @@
width: 6.5rem;
height: 6.5rem;
color: var(--primary-foreground-color);
opacity: 0.5;
}
.volume-slider {
border-radius: var(--border-radius);
opacity: 0.5;
max-height: 1rem;
width: 6.5rem;
max-height: 1rem;