feat(RingOverlay): Add interfaceConfig option for disabling ringing

interface_config.js

@@ -43,6 +43,8 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
     ENABLE_FEEDBACK_ANIMATION: false,
     DISABLE_FOCUS_INDICATOR: false,
     DISABLE_DOMINANT_SPEAKER_INDICATOR: false,
+    // disables the ringing sound when the RingOverlay is shown.
+    DISABLE_RINGING: false,
     AUDIO_LEVEL_PRIMARY_COLOR: "rgba(255,255,255,0.7)",
     AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.4)"
 };

modules/UI/UI.js

@@ -527,7 +527,7 @@ UI.start = function () {
     }
 
     if(APP.tokenData.callee) {
-        UI.showRingOverLay();
+        UI.showRingOverlay();
     }
 
     // Return true to indicate that the UI has been fully started and
@@ -1478,8 +1478,8 @@ UI.setMicrophoneButtonEnabled = function (enabled) {
     Toolbar.setAudioIconEnabled(enabled);
 };
 
-UI.showRingOverLay = function () {
+UI.showRingOverlay = function () {
-    RingOverlay.show(APP.tokenData.callee);
+    RingOverlay.show(APP.tokenData.callee, interfaceConfig.DISABLE_RINGING);
     FilmStrip.toggleFilmStrip(false);
 };
 

modules/UI/ring_overlay/RingOverlay.js

@@ -23,22 +23,32 @@ function onAvatarDisplayed(shown) {
 class RingOverlay {
     /**
      * @param callee instance of User class from TokenData.js
+     * @param {boolean} dontPlayAudio if true the ringing sound wont be played.
      */
-    constructor(callee) {
+    constructor(callee, dontPlayAudio) {
         this._containerId = 'ringOverlay';
         this._audioContainerId = 'ringOverlayRinging';
         this.isRinging = true;
         this.callee = callee;
+        this.dontPlayAudio = dontPlayAudio;
         this.render();
-        this.audio = document.getElementById(this._audioContainerId);
+        if(!dontPlayAudio)
-        this.audio.play();
+            this._initAudio();
-        this._setAudioTimeout();
         this._timeout = setTimeout(() => {
             this.destroy();
             this.render();
         }, 30000);
     }
 
+    /**
+     * Initializes the audio element and setups the interval for playing it.
+     */
+    _initAudio() {
+        this.audio = document.getElementById(this._audioContainerId);
+        this.audio.play();
+        this._setAudioTimeout();
+    }
+
     /**
      * Chagnes the background of the ring overlay.
      * @param {boolean} solid - if true the new background will be the solid
@@ -60,6 +70,8 @@ class RingOverlay {
     _getHtmlStr(callee) {
         let callingLabel = this.isRinging? "<p>Calling...</p>" : "";
         let callerStateLabel =  this.isRinging? "" : " isn't available";
+        let audioHTML = this.dontPlayAudio? "" :
+            `<audio id="${this._audioContainerId}" src="./sounds/ring.ogg" />`;
         return `
             <div id="${this._containerId}" class='ringing' >
                 <div class='ringing__content'>
@@ -69,7 +81,7 @@ class RingOverlay {
                         <p>${callee.getName()}${callerStateLabel}</p>
                     </div>
                 </div>
-                <audio id="${this._audioContainerId}" src="./sounds/ring.ogg" />
+                ${audioHTML}
             </div>`;
     }
 
@@ -86,6 +98,7 @@ class RingOverlay {
      * related to the ring overlay.
      */
     destroy() {
+        this.isRinging = false;
         this._stopAudio();
         this._detach();
     }
@@ -99,7 +112,6 @@ class RingOverlay {
     }
 
     _stopAudio() {
-        this.isRinging = false;
         if (this.interval) {
             clearInterval(this.interval);
         }
@@ -123,13 +135,14 @@ export default {
      * Shows the ring overlay for the passed callee.
      * @param callee {class User} the callee. Instance of User class from
      * TokenData.js
+     * @param {boolean} dontPlayAudio if true the ringing sound wont be played.
      */
-    show(callee) {
+    show(callee, dontPlayAudio = false) {
         if(overlay) {
             this.hide();
         }
 
-        overlay = new RingOverlay(callee);
+        overlay = new RingOverlay(callee, dontPlayAudio);
         APP.UI.addListener(UIEvents.LARGE_VIDEO_AVATAR_DISPLAYED,
             onAvatarDisplayed);
     },