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

MuteButton implemented with hooks

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-03 14:21:05 +03:00
parent 47b688a5d6
commit 3bbcc42955
1 changed files with 16 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/routes/Player/ControlBar/MuteButton/MuteButton.js
View file

@ -2,37 +2,29 @@ const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const Icon = require('stremio-icons/dom'); const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
class MuteButton extends React.Component { const MuteButton = ({ className, muted, volume, dispatch }) => {
shouldComponentUpdate(nextProps, nextState) { const toggleMuted = React.useCallback(() => {
return nextProps.className !== this.props.className || dispatch({ propName: 'muted', propValue: !muted });
nextProps.volume !== this.props.volume || }, [muted, dispatch]);
nextProps.muted !== this.props.muted; const icon = muted ? 'ic_volume0' :
} (volume === null || isNaN(volume)) ? 'ic_volume3' :
volume < 30 ? 'ic_volume1' :
toggleMuted = () => { volume < 70 ? 'ic_volume2' :
this.props.dispatch({ propName: 'muted', propValue: !this.props.muted }); 'ic_volume3';
} return (
<Button className={classnames(className, { 'disabled': typeof muted !== 'boolean' })} tabIndex={-1} onClick={toggleMuted}>
render() { <Icon className={'icon'} icon={icon} />
const icon = this.props.muted ? 'ic_volume0' : </Button>
(this.props.volume === null || isNaN(this.props.volume)) ? 'ic_volume3' : );
this.props.volume < 30 ? 'ic_volume1' :
this.props.volume < 70 ? 'ic_volume2' :
'ic_volume3';
return (
<div className={classnames(this.props.className, { 'disabled': this.props.muted === null })} onClick={this.toggleMuted}>
<Icon className={'icon'} icon={icon} />
</div>
);
}
} }
MuteButton.propTypes = { MuteButton.propTypes = {
className: PropTypes.string, className: PropTypes.string,
muted: PropTypes.bool, muted: PropTypes.bool,
volume: PropTypes.number, volume: PropTypes.number,
dispatch: PropTypes.func.isRequired dispatch: PropTypes.func
}; };
module.exports = MuteButton; module.exports = MuteButton;