fix(FEC-7182): update UI accorindg to mute status change (#58)

kaltura · Sep 25, 2017 · a09ff7b · a09ff7b
1 parent 014272a
commit a09ff7b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/components/engine-connector/engine-connector.js b/src/components/engine-connector/engine-connector.js
@@ -58,6 +58,10 @@ class EngineConnector extends BaseComponent {
       this.props.updateVolume(this.player.volume);
     });
 
+    this.player.addEventListener(this.player.Event.MUTE_CHANGE, () => {
+      this.props.updateMuted(this.player.muted);
+    });
+
     this.player.addEventListener(this.player.Event.PLAY, () => {
       this.props.updateIsPlaying(true);
 

diff --git a/src/components/volume/volume.js b/src/components/volume/volume.js
@@ -57,6 +57,10 @@ class VolumeControl extends BaseComponent {
     this.player.addEventListener(this.player.Event.VOLUME_CHANGE, () => {
       this.props.updateVolume(this.player.volume);
     });
+
+    this.player.addEventListener(this.player.Event.MUTE_CHANGE, () => {
+      this.props.updateMuted(this.player.muted);
+    });
   }
 
   /**
@@ -66,7 +70,7 @@ class VolumeControl extends BaseComponent {
    * @returns {string} - volume progress bar new height based on volume
    * @memberof VolumeControl
    */
-  getVolumeProgessHeight(): string {
+  getVolumeProgressHeight(): string {
     return this.props.muted ? '0%' : Math.round(this.props.volume * 100) + '%';
   }
 
@@ -109,15 +113,14 @@ class VolumeControl extends BaseComponent {
   }
 
   /**
-   * on colume control button click, toggle mute in player and store state
+   * on volume control button click, toggle mute in player and store state
    *
    * @method onVolumeControlButtonClick
    * @returns {void}
    * @memberof VolumeControl
    */
   onVolumeControlButtonClick(): void {
     this.logger.debug(`Toggle mute. ${this.player.muted} => ${!this.player.muted}`);
-    this.props.updateMuted(!this.props.muted);
     this.player.muted = !this.player.muted;
   }
 
@@ -140,7 +143,6 @@ class VolumeControl extends BaseComponent {
     this.player.volume = volume;
     if (this.props.muted) {
       this.player.muted = false;
-      this.props.updateMuted(false);
     }
   }
 
@@ -189,7 +191,7 @@ class VolumeControl extends BaseComponent {
               onMouseUp={e => this.onVolumeProgressBarMouseUp(e)}
               onMouseMove={e => this.onVolumeProgressBarMouseMove(e)}
             >
-              <div className='progress' style={{height: this.getVolumeProgessHeight()}} />
+              <div className='progress' style={{height: this.getVolumeProgressHeight()}} />
             </div>
           </div>
         </div>