Adds an interface configuration object.

audio_levels.js

@@ -2,9 +2,6 @@
  * The audio Levels plugin.
  */
 var AudioLevels = (function(my) {
-    var CANVAS_EXTRA = 104;
-    var CANVAS_RADIUS = 7;
-    var SHADOW_COLOR = '#00ccff';
     var audioLevelCanvasCache = {};
 
     my.LOCAL_LEVEL = 'local';
@@ -47,8 +44,8 @@ var AudioLevels = (function(my) {
 
             audioLevelCanvas = document.createElement('canvas');
             audioLevelCanvas.className = "audiolevel";
-            audioLevelCanvas.style.bottom = "-" + CANVAS_EXTRA/2 + "px";
-            audioLevelCanvas.style.left = "-" + CANVAS_EXTRA/2 + "px";
+            audioLevelCanvas.style.bottom = "-" + interfaceConfig.CANVAS_EXTRA/2 + "px";
+            audioLevelCanvas.style.left = "-" + interfaceConfig.CANVAS_EXTRA/2 + "px";
             resizeAudioLevelCanvas( audioLevelCanvas,
                     thumbnailWidth,
                     thumbnailHeight);
@@ -95,8 +92,8 @@ var AudioLevels = (function(my) {
     function resizeAudioLevelCanvas(audioLevelCanvas,
                                     thumbnailWidth,
                                     thumbnailHeight) {
-        audioLevelCanvas.width = thumbnailWidth + CANVAS_EXTRA;
-        audioLevelCanvas.height = thumbnailHeight + CANVAS_EXTRA;
+        audioLevelCanvas.width = thumbnailWidth + interfaceConfig.CANVAS_EXTRA;
+        audioLevelCanvas.height = thumbnailHeight + interfaceConfig.CANVAS_EXTRA;
     };
 
     /**
@@ -140,12 +137,12 @@ var AudioLevels = (function(my) {
         if (shadowLevel > 0)
             // drawContext, x, y, w, h, r, shadowColor, shadowLevel
             CanvasUtil.drawRoundRectGlow(   drawContext,
-                                            CANVAS_EXTRA/2, CANVAS_EXTRA/2,
-                                            canvas.width - CANVAS_EXTRA,
-                                            canvas.height - CANVAS_EXTRA,
-                                            CANVAS_RADIUS,
-                                            SHADOW_COLOR,
-                                            shadowLevel);
+                interfaceConfig.CANVAS_EXTRA/2, interfaceConfig.CANVAS_EXTRA/2,
+                canvas.width - interfaceConfig.CANVAS_EXTRA,
+                canvas.height - interfaceConfig.CANVAS_EXTRA,
+                interfaceConfig.CANVAS_RADIUS,
+                interfaceConfig.SHADOW_COLOR,
+                shadowLevel);
     };
 
     /**
@@ -158,13 +155,13 @@ var AudioLevels = (function(my) {
         var shadowLevel = 0;
 
         if (audioLevel <= 0.3) {
-            shadowLevel = Math.round(CANVAS_EXTRA/2*(audioLevel/0.3));
+            shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
         }
         else if (audioLevel <= 0.6) {
-            shadowLevel = Math.round(CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
+            shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
         }
         else {
-            shadowLevel = Math.round(CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
+            shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
         }
         return shadowLevel;
     };
@@ -192,13 +189,13 @@ var AudioLevels = (function(my) {
         var resized = false;
         $('#remoteVideos>span>canvas').each(function() {
             var canvas = $(this).get(0);
-            if (canvas.width !== width + CANVAS_EXTRA) {
-                canvas.width = width + CANVAS_EXTRA;
+            if (canvas.width !== width + interfaceConfig.CANVAS_EXTRA) {
+                canvas.width = width + interfaceConfig.CANVAS_EXTRA;
                 resized = true;
             }
 
-            if (canvas.heigh !== height + CANVAS_EXTRA) {
-                canvas.height = height + CANVAS_EXTRA;
+            if (canvas.heigh !== height + interfaceConfig.CANVAS_EXTRA) {
+                canvas.height = height + interfaceConfig.CANVAS_EXTRA;
                 resized = true;
             }
         });
@@ -206,9 +203,9 @@ var AudioLevels = (function(my) {
         if (resized)
             Object.keys(audioLevelCanvasCache).forEach(function (resourceJid) {
                 audioLevelCanvasCache[resourceJid].width
-                    = width + CANVAS_EXTRA;
+                    = width + interfaceConfig.CANVAS_EXTRA;
                 audioLevelCanvasCache[resourceJid].height
-                    = height + CANVAS_EXTRA;
+                    = height + interfaceConfig.CANVAS_EXTRA;
             });
     });
 

index.html

@@ -26,6 +26,7 @@
     <script src="libs/tooltip.js?v=1"></script><!-- bootstrap tooltip lib -->
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
     <script src="config.js?v=5"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
+    <script src="interface_config.js?v=1"></script>
     <script src="brand.js?v=1"></script>
     <script src="muc.js?v=14"></script><!-- simple MUC library -->
     <script src="estos_log.js?v=2"></script><!-- simple stanza logger -->
@@ -44,11 +45,11 @@
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <script src="rtp_sts.js?v=1"></script><!-- RTP stats processing -->
     <script src="local_sts.js?v=1"></script><!-- Local stats processing -->
-    <script src="videolayout.js?v=9"></script><!-- video ui -->
+    <script src="videolayout.js?v=10"></script><!-- video ui -->
     <script src="toolbar.js?v=6"></script><!-- toolbar ui -->
-    <script src="toolbar_toggler.js?v=1"></script>
+    <script src="toolbar_toggler.js?v=2"></script>
     <script src="canvas_util.js?v=1"></script><!-- canvas drawing utils -->
-    <script src="audio_levels.js?v=1"></script><!-- audio levels plugin -->
+    <script src="audio_levels.js?v=2"></script><!-- audio levels plugin -->
     <script src="media_stream.js?v=1"></script><!-- media stream -->
     <script src="bottom_toolbar.js?v=2"></script><!-- media stream -->
     <script src="roomname_generator.js?v=1"></script><!-- generator for random room names -->

interface_config.js

@@ -0,0 +1,9 @@
+var interfaceConfig = {
+    CANVAS_EXTRA: 104,
+    CANVAS_RADIUS: 7,
+    SHADOW_COLOR: '#00ccff',
+    INITIAL_TOOLBAR_TIMEOUT: 20000,
+    TOOLBAR_TIMEOUT: 4000,
+    DEFAULT_REMOTE_DISPLAY_NAME: "Fellow Jitster",
+    DEFAULT_DOMINANT_SPEAKER_DISPLAY_NAME: "Speaker"
+};

toolbar_toggler.js

@@ -1,7 +1,6 @@
 var ToolbarToggler = (function(my) {
-    var INITIAL_TOOLBAR_TIMEOUT = 20000;
-    var TOOLBAR_TIMEOUT = INITIAL_TOOLBAR_TIMEOUT;
-    var toolbarTimeout;
+    var toolbarTimeoutObject,
+        toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
 
     /**
      * Shows the main toolbar.
@@ -16,12 +15,12 @@ var ToolbarToggler = (function(my) {
                 bottomToolbar.show("slide", {direction: "right",duration: 300});
             }
 
-            if (toolbarTimeout) {
-                clearTimeout(toolbarTimeout);
-                toolbarTimeout = null;
+            if (toolbarTimeoutObject) {
+                clearTimeout(toolbarTimeoutObject);
+                toolbarTimeoutObject = null;
             }
-            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
-            TOOLBAR_TIMEOUT = 4000;
+            toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
+            toolbarTimeout = interfaceConfig.TOOLBAR_TIMEOUT;
         }
 
         if (focus != null)
@@ -51,8 +50,8 @@ var ToolbarToggler = (function(my) {
                 isToolbarHover = true;
         }
 
-        clearTimeout(toolbarTimeout);
-        toolbarTimeout = null;
+        clearTimeout(toolbarTimeoutObject);
+        toolbarTimeoutObject = null;
 
         if (!isToolbarHover) {
             header.hide("slide", { direction: "up", duration: 300});
@@ -62,7 +61,7 @@ var ToolbarToggler = (function(my) {
             }
         }
         else {
-            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
+            toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
         }
     };
 
@@ -80,9 +79,9 @@ var ToolbarToggler = (function(my) {
             }
 
             // Then clear the time out, to dock the toolbar.
-            if (toolbarTimeout) {
-                clearTimeout(toolbarTimeout);
-                toolbarTimeout = null;
+            if (toolbarTimeoutObject) {
+                clearTimeout(toolbarTimeoutObject);
+                toolbarTimeoutObject = null;
             }
         }
         else {
@@ -90,7 +89,7 @@ var ToolbarToggler = (function(my) {
                 ToolbarToggler.showToolbar();
             }
             else {
-                toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
+                toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
             }
         }
     };

videolayout.js

@@ -1,8 +1,6 @@
 var VideoLayout = (function (my) {
     var preMuted = false;
     var currentDominantSpeaker = null;
-    var defaultRemoteDisplayName = "Fellow Jitster";
-    var defaultDominantSpeakerDisplayName = "Speaker";
     var lastNCount = config.channelLastN;
     var lastNEndpointsCache = [];
     var largeVideoNewSrc = '';
@@ -529,7 +527,7 @@ var VideoLayout = (function (my) {
                 if (displayName && displayName.length > 0)
                     $('#' + videoSpanId + '_name').text(displayName);
                 else
-                    $('#' + videoSpanId + '_name').text(defaultRemoteDisplayName);
+                    $('#' + videoSpanId + '_name').text(interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME);
             }
         } else {
             var editButton = null;
@@ -543,7 +541,7 @@ var VideoLayout = (function (my) {
                 nameSpan.innerText = defaultLocalDisplayName;
             }
             else {
-                nameSpan.innerText = defaultRemoteDisplayName;
+                nameSpan.innerText = interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
             }
 
             if (displayName && displayName.length > 0) {
@@ -1200,11 +1198,14 @@ var VideoLayout = (function (my) {
         if (resourceJid !== currentDominantSpeaker) {
             var oldSpeakerVideoSpanId = "participant_" + currentDominantSpeaker,
                 newSpeakerVideoSpanId = "participant_" + resourceJid;
-            if($("#" + oldSpeakerVideoSpanId + ">span.displayname").text() === defaultDominantSpeakerDisplayName) {
+            if($("#" + oldSpeakerVideoSpanId + ">span.displayname").text() ===
+                interfaceConfig.DEFAULT_DOMINANT_SPEAKER_DISPLAY_NAME) {
                 setDisplayName(oldSpeakerVideoSpanId, null);
             }
-            if($("#" + newSpeakerVideoSpanId + ">span.displayname").text() === defaultRemoteDisplayName) {
-                setDisplayName(newSpeakerVideoSpanId, defaultDominantSpeakerDisplayName);
+            if($("#" + newSpeakerVideoSpanId + ">span.displayname").text() ===
+                interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME) {
+                setDisplayName(newSpeakerVideoSpanId,
+                    interfaceConfig.DEFAULT_DOMINANT_SPEAKER_DISPLAY_NAME);
             }
             currentDominantSpeaker = resourceJid;
         } else {