diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 3b36aa4c7..4941801f2 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -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 (
-
+
);
@@ -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;
diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less
index fa0014519..b8e66b372 100644
--- a/src/routes/Player/ControlBar/styles.less
+++ b/src/routes/Player/ControlBar/styles.less
@@ -4,7 +4,7 @@
.control-bar-container {
top: initial !important;
- padding: 0 2%;
+ padding: 0 calc(var(--control-bar-button-height) * 0.4);
.time-slider {
--time-slider-thumb-size: calc(var(--control-bar-button-height) * 0.4);
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 64596ce91..bfc336325 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -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}
/>
);
}
diff --git a/src/routes/Player/Video/stremio-video/HTMLVideo.js b/src/routes/Player/Video/stremio-video/HTMLVideo.js
index 77b0697e8..e95fa2dfb 100644
--- a/src/routes/Player/Video/stremio-video/HTMLVideo.js
+++ b/src/routes/Player/Video/stremio-video/HTMLVideo.js
@@ -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++) {
diff --git a/src/routes/Player/Video/stremio-video/YouTubeVideo.js b/src/routes/Player/Video/stremio-video/YouTubeVideo.js
index 0994eea6e..35e66e775 100644
--- a/src/routes/Player/Video/stremio-video/YouTubeVideo.js
+++ b/src/routes/Player/Video/stremio-video/YouTubeVideo.js
@@ -89,27 +89,30 @@ var YouTubeVideo = function(containerElement) {
break;
}
};
- var video = new YT.Player(videoElement, {
- height: '100%',
- width: '100%',
- playerVars: {
- autoplay: 1,
- cc_load_policy: 3,
- controls: 0,
- disablekb: 1,
- enablejsapi: 1,
- fs: 0,
- iv_load_policy: 3,
- loop: 0,
- modestbranding: 1,
- playsinline: 1,
- rel: 0
- },
- events: {
- onError: onError.bind(this),
- onReady: onReady.bind(this),
- onStateChange: onStateChange.bind(this)
- }
+ var video;
+ YT.ready(() => {
+ video = new YT.Player(videoElement, {
+ height: '100%',
+ width: '100%',
+ playerVars: {
+ autoplay: 1,
+ cc_load_policy: 3,
+ controls: 0,
+ disablekb: 1,
+ enablejsapi: 1,
+ fs: 0,
+ iv_load_policy: 3,
+ loop: 0,
+ modestbranding: 1,
+ playsinline: 1,
+ rel: 0
+ },
+ events: {
+ onError: onError.bind(this),
+ onReady: onReady.bind(this),
+ onStateChange: onStateChange.bind(this)
+ }
+ });
});
this.on = function(eventName, listener) {