mute/unmute command implemented

This commit is contained in:
NikolaBorislavovHristov 2018-12-10 09:55:08 +02:00
parent 7010b6e847
commit 4eb7e1c685
3 changed files with 31 additions and 4 deletions

View file

@ -33,6 +33,10 @@ class ControlBar extends Component {
this.props.setVolume(volume);
}
toogleVolumeMute = () => {
this.props.volume === 0 ? this.props.unmute() : this.props.mute();
}
onPlayPauseButtonClick = () => {
this.props.paused ? this.props.play() : this.props.pause();
}
@ -70,7 +74,7 @@ class ControlBar extends Component {
this.props.volume < 100 ? 'ic_volume2' :
'ic_volume3';
return (
<div className={styles['control-bar-button']}>
<div className={styles['control-bar-button']} onClick={this.toogleVolumeMute}>
<Icon className={styles['icon']} icon={icon} />
</div>
);
@ -132,7 +136,9 @@ ControlBar.propTypes = {
play: PropTypes.func.isRequired,
pause: PropTypes.func.isRequired,
setTime: PropTypes.func.isRequired,
setVolume: PropTypes.func.isRequired
setVolume: PropTypes.func.isRequired,
mute: PropTypes.func.isRequired,
unmute: PropTypes.func.isRequired
};
export default ControlBar;

View file

@ -80,6 +80,14 @@ class Player extends Component {
this.videoRef.current && this.videoRef.current.dispatch('setProp', 'volume', volume);
}
mute = () => {
this.videoRef.current && this.videoRef.current.dispatch('command', 'mute');
}
unmute = () => {
this.videoRef.current && this.videoRef.current.dispatch('command', 'unmute');
}
addExtraSubtitles = (subtitles) => {
this.videoRef.current && this.videoRef.current.dispatch('command', 'addExtraSubtitles', subtitles);
}
@ -118,6 +126,8 @@ class Player extends Component {
pause={this.pause}
setTime={this.setTime}
setVolume={this.setVolume}
mute={this.mute}
unmute={this.unmute}
/>
);
}

View file

@ -56,7 +56,7 @@ var HTMLVideo = function(containerElement) {
events.emit('propChanged', 'duration', isNaN(videoElement.duration) ? null : videoElement.duration * 1000);
};
var onVolumeChanged = function() {
events.emit('propChanged', 'volume', videoElement.volume * 100);
events.emit('propChanged', 'volume', !videoElement.muted ? videoElement.volume * 100 : 0);
};
var onSubtitlesChanged = function() {
var subtitles = [];
@ -108,7 +108,7 @@ var HTMLVideo = function(containerElement) {
videoElement.addEventListener('durationchange', onDurationChanged);
return;
case 'volume':
events.emit('propValue', 'volume', videoElement.volume * 100);
events.emit('propValue', 'volume', !videoElement.muted ? videoElement.volume * 100 : 0);
videoElement.removeEventListener('volumechange', onVolumeChanged);
videoElement.addEventListener('volumechange', onVolumeChanged);
return;
@ -142,6 +142,7 @@ var HTMLVideo = function(containerElement) {
videoElement.currentTime = arguments[2] / 1000;
return;
case 'volume':
videoElement.muted = false;
videoElement.volume = arguments[2] / 100;
return;
default:
@ -158,6 +159,16 @@ var HTMLVideo = function(containerElement) {
videoElement.load();
onReady();
return;
case 'mute':
videoElement.muted = true;
break;
case 'unmute':
if (videoElement.volume === 0) {
videoElement.volume = 0.5;
}
videoElement.muted = false;
break;
case 'addExtraSubtitles':
if (ready) {
for (var i = 0; i < arguments[2].length; i++) {