Merge branch 'master' of github.com:Stremio/stremio-web into videos-list

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 (
-            <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;

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);

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}
             />
         );
     }

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++) {

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) {