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

refactor: implement useMemo for the iconName

Browse source
This commit is contained in:
kKaskak 2024-02-13 19:29:14 +01:00
parent dca8d50888
commit 6ed892ad12
2 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -636,7 +636,6 @@ const Player = ({ urlParams, queryParams }) => {
<VolumeChangeIndicator
muted={video.state.muted}
volume={video.state.volume}
onVolumeChangeRequested={onVolumeChangeRequested}
/>
:
null

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

@ -8,11 +8,19 @@ const PropTypes = require('prop-types');
const styles = require('./styles');
const { useBinaryState } = require('stremio/common');
const VolumeChangeIndicator = React.memo(({ muted, onVolumeChangeRequested, volume }) => {
const VolumeChangeIndicator = React.memo(({ muted, volume }) => {
const [volumeIndicatorOpen, openVolumeIndicator, closeVolumeIndicator] = useBinaryState(false);
const volumeChangeTimeout = React.useRef(null);
const prevVolume = React.useRef(volume);
const iconName = React.useMemo(() => {
return typeof muted === 'boolean' && muted ? 'volume-mute' :
volume === null || isNaN(volume) ? 'volume-off' :
volume < 30 ? 'volume-low' :
volume < 70 ? 'volume-medium' :
'volume-high';
}, [muted, volume]);
React.useEffect(() => {
if (prevVolume.current !== volume) {
openVolumeIndicator();
@ -34,14 +42,8 @@ const VolumeChangeIndicator = React.memo(({ muted, onVolumeChangeRequested, volu
{
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']} />
<Icon name={iconName} className={styles['volume-icon']} />
<VolumeSlider volume={volume} className={styles['volume-slider']} />
</div>
:
null
@ -56,6 +58,5 @@ module.exports = VolumeChangeIndicator;
VolumeChangeIndicator.propTypes = {
muted: PropTypes.bool,
onVolumeChangeRequested: PropTypes.func,
volume: PropTypes.number
};