code cleanup

modules/UI/audio_levels/AudioLevels.js

@@ -1,12 +1,16 @@
 /* global APP, interfaceConfig, $ */
 /* jshint -W101 */
+
 import CanvasUtil from './CanvasUtils';
 
-var ASDrawContext = null;
+const LOCAL_LEVEL = 'local';
+
+let ASDrawContext = null;
+let audioLevelCanvasCache = {};
 
 function initActiveSpeakerAudioLevels() {
-    var ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 2;
-    var ASCenter = (interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE + ASRadius) / 2;
+    let ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 2;
+    let ASCenter = (interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE + ASRadius) / 2;
 
     // Draw a circle.
     ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI);
@@ -18,23 +22,138 @@ function initActiveSpeakerAudioLevels() {
 }
 
 /**
- * The audio Levels plugin.
+ * Resizes the given audio level canvas to match the given thumbnail size.
+ */
+function resizeAudioLevelCanvas(audioLevelCanvas, thumbnailWidth, thumbnailHeight) {
+    audioLevelCanvas.width = thumbnailWidth + interfaceConfig.CANVAS_EXTRA;
+    audioLevelCanvas.height = thumbnailHeight + interfaceConfig.CANVAS_EXTRA;
+}
+
+/**
+ * Draws the audio level canvas into the cached canvas object.
+ *
+ * @param id of the user for whom we draw the audio level
+ * @param audioLevel the newAudio level to render
  */
-var AudioLevels = (function(my) {
-    var audioLevelCanvasCache = {};
+function drawAudioLevelCanvas(id, audioLevel) {
+    if (!audioLevelCanvasCache[id]) {
+
+        let videoSpanId = getVideoSpanId(id);
+
+        let audioLevelCanvasOrig = $(`#${videoSpanId}>canvas`).get(0);
+
+        /*
+         * FIXME Testing has shown that audioLevelCanvasOrig may not exist.
+         * In such a case, the method CanvasUtil.cloneCanvas may throw an
+         * error. Since audio levels are frequently updated, the errors have
+         * been observed to pile into the console, strain the CPU.
+         */
+        if (audioLevelCanvasOrig) {
+            audioLevelCanvasCache[id] = CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
+        }
+    }
 
-    my.LOCAL_LEVEL = 'local';
+    let canvas = audioLevelCanvasCache[id];
 
-    my.init = function () {
+    if (!canvas) {
+        return;
+    }
+
+    let drawContext = canvas.getContext('2d');
+
+    drawContext.clearRect(0, 0, canvas.width, canvas.height);
+
+    let shadowLevel = getShadowLevel(audioLevel);
+
+    if (shadowLevel > 0) {
+        // drawContext, x, y, w, h, r, shadowColor, shadowLevel
+        CanvasUtil.drawRoundRectGlow(drawContext,
+                                     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);
+    }
+}
+
+/**
+ * Returns the shadow/glow level for the given audio level.
+ *
+ * @param audioLevel the audio level from which we determine the shadow
+ * level
+ */
+function getShadowLevel (audioLevel) {
+    let shadowLevel = 0;
+
+    if (audioLevel <= 0.3) {
+        shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
+    } else if (audioLevel <= 0.6) {
+        shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
+    } else {
+        shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
+    }
+
+    return shadowLevel;
+}
+
+/**
+ * Returns the video span id corresponding to the given user id
+ */
+function getVideoSpanId(id) {
+    let videoSpanId = null;
+
+    if (id === LOCAL_LEVEL || APP.conference.isLocalId(id)) {
+        videoSpanId = 'localVideoContainer';
+    } else {
+        videoSpanId = `participant_${id}`;
+    }
+
+    return videoSpanId;
+}
+
+/**
+ * Indicates that the remote video has been resized.
+ */
+$(document).bind('remotevideo.resized', function (event, width, height) {
+    let resized = false;
+
+    $('#remoteVideos>span>canvas').each(function() {
+        let canvas = $(this).get(0);
+        if (canvas.width !== width + interfaceConfig.CANVAS_EXTRA) {
+            canvas.width = width + interfaceConfig.CANVAS_EXTRA;
+            resized = true;
+        }
+
+        if (canvas.height !== height + interfaceConfig.CANVAS_EXTRA) {
+            canvas.height = height + interfaceConfig.CANVAS_EXTRA;
+            resized = true;
+        }
+    });
+
+    if (resized) {
+        Object.keys(audioLevelCanvasCache).forEach(function (id) {
+            audioLevelCanvasCache[id].width = width + interfaceConfig.CANVAS_EXTRA;
+            audioLevelCanvasCache[id].height = height + interfaceConfig.CANVAS_EXTRA;
+        });
+    }
+});
+
+/**
+ * The audio Levels plugin.
+ */
+const AudioLevels = {
+
+    init () {
         ASDrawContext = $('#activeSpeakerAudioLevel')[0].getContext('2d');
         initActiveSpeakerAudioLevels();
-    };
+    },
 
     /**
      * Updates the audio level canvas for the given id. If the canvas
      * didn't exist we create it.
      */
-    my.updateAudioLevelCanvas = function (id, VideoLayout) {
+    updateAudioLevelCanvas (id, VideoLayout) {
         let videoSpanId = 'localVideoContainer';
         if (id) {
             videoSpanId = `participant_${id}`;
@@ -72,7 +191,7 @@ var AudioLevels = (function(my) {
 
             resizeAudioLevelCanvas(audioLevelCanvas, thumbnailWidth, thumbnailHeight);
         }
-    };
+    },
 
     /**
      * Updates the audio level UI for the given id.
@@ -80,7 +199,7 @@ var AudioLevels = (function(my) {
      * @param id id of the user for whom we draw the audio level
      * @param audioLevel the newAudio level to render
      */
-    my.updateAudioLevel = function (id, audioLevel, largeVideoId) {
+    updateAudioLevel (id, audioLevel, largeVideoId) {
         drawAudioLevelCanvas(id, audioLevel);
 
         let videoSpanId = getVideoSpanId(id);
@@ -100,7 +219,7 @@ var AudioLevels = (function(my) {
         );
         drawContext.drawImage(canvasCache, 0, 0);
 
-        if (id === AudioLevels.LOCAL_LEVEL) {
+        if (id === LOCAL_LEVEL) {
             id = APP.conference.localId;
             if (!id) {
                 return;
@@ -112,9 +231,9 @@ var AudioLevels = (function(my) {
                 AudioLevels.updateActiveSpeakerAudioLevel(audioLevel);
             });
         }
-    };
+    },
 
-    my.updateActiveSpeakerAudioLevel = function(audioLevel) {
+    updateActiveSpeakerAudioLevel (audioLevel) {
         if($("#activeSpeaker").css("visibility") == "hidden" || ASDrawContext === null) {
             return;
         }
@@ -129,131 +248,8 @@ var AudioLevels = (function(my) {
 
         // Fill the shape.
         ASDrawContext.fill();
-    };
-
-    /**
-     * Resizes the given audio level canvas to match the given thumbnail size.
-     */
-    function resizeAudioLevelCanvas(audioLevelCanvas,
-                                    thumbnailWidth,
-                                    thumbnailHeight) {
-        audioLevelCanvas.width = thumbnailWidth + interfaceConfig.CANVAS_EXTRA;
-        audioLevelCanvas.height = thumbnailHeight + interfaceConfig.CANVAS_EXTRA;
-    }
-
-    /**
-     * Draws the audio level canvas into the cached canvas object.
-     *
-     * @param id of the user for whom we draw the audio level
-     * @param audioLevel the newAudio level to render
-     */
-    function drawAudioLevelCanvas(id, audioLevel) {
-        if (!audioLevelCanvasCache[id]) {
-
-            let videoSpanId = getVideoSpanId(id);
-
-            let audioLevelCanvasOrig = $(`#${videoSpanId}>canvas`).get(0);
-
-            /*
-             * FIXME Testing has shown that audioLevelCanvasOrig may not exist.
-             * In such a case, the method CanvasUtil.cloneCanvas may throw an
-             * error. Since audio levels are frequently updated, the errors have
-             * been observed to pile into the console, strain the CPU.
-             */
-            if (audioLevelCanvasOrig) {
-                audioLevelCanvasCache[id] = CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
-            }
-        }
-
-        let canvas = audioLevelCanvasCache[id];
-
-        if (!canvas) {
-            return;
-        }
-
-        let drawContext = canvas.getContext('2d');
-
-        drawContext.clearRect(0, 0, canvas.width, canvas.height);
-
-        let shadowLevel = getShadowLevel(audioLevel);
-
-        if (shadowLevel > 0) {
-            // drawContext, x, y, w, h, r, shadowColor, shadowLevel
-            CanvasUtil.drawRoundRectGlow(drawContext,
-                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);
-        }
-    }
-
-    /**
-     * Returns the shadow/glow level for the given audio level.
-     *
-     * @param audioLevel the audio level from which we determine the shadow
-     * level
-     */
-    function getShadowLevel (audioLevel) {
-        var shadowLevel = 0;
-
-        if (audioLevel <= 0.3) {
-            shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
-        }
-        else if (audioLevel <= 0.6) {
-            shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
-        }
-        else {
-            shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
-        }
-        return shadowLevel;
-    }
-
-    /**
-     * Returns the video span id corresponding to the given user id
-     */
-    function getVideoSpanId(id) {
-        var videoSpanId = null;
-        if (id === AudioLevels.LOCAL_LEVEL || APP.conference.isLocalId(id)) {
-            videoSpanId = 'localVideoContainer';
-        } else {
-            videoSpanId = `participant_${id}`;
-        }
-
-        return videoSpanId;
-    }
-
-    /**
-     * Indicates that the remote video has been resized.
-     */
-    $(document).bind('remotevideo.resized', function (event, width, height) {
-        var resized = false;
-        $('#remoteVideos>span>canvas').each(function() {
-            var canvas = $(this).get(0);
-            if (canvas.width !== width + interfaceConfig.CANVAS_EXTRA) {
-                canvas.width = width + interfaceConfig.CANVAS_EXTRA;
-                resized = true;
-            }
-
-            if (canvas.height !== height + interfaceConfig.CANVAS_EXTRA) {
-                canvas.height = height + interfaceConfig.CANVAS_EXTRA;
-                resized = true;
-            }
-        });
-
-        if (resized) {
-            Object.keys(audioLevelCanvasCache).forEach(function (id) {
-                audioLevelCanvasCache[id].width =
-                    width + interfaceConfig.CANVAS_EXTRA;
-                audioLevelCanvasCache[id].height =
-                    height + interfaceConfig.CANVAS_EXTRA;
-            });
-        }
-    });
-
-    return my;
+    },
 
-})(AudioLevels || {});
+};
 
-module.exports = AudioLevels;
+export default AudioLevels;

modules/UI/audio_levels/CanvasUtils.js

@@ -1,7 +1,7 @@
 /**
  * Utility class for drawing canvas shapes.
  */
-var CanvasUtil = (function(my) {
+const CanvasUtil = {
 
     /**
      * Draws a round rectangle with a glow. The glowWidth indicates the depth
@@ -15,8 +15,7 @@ var CanvasUtil = (function(my) {
      * @param glowColor the color of the glow
      * @param glowWidth the width of the glow
      */
-    my.drawRoundRectGlow
-        = function(drawContext, x, y, w, h, r, glowColor, glowWidth) {
+    drawRoundRectGlow (drawContext, x, y, w, h, r, glowColor, glowWidth) {
 
         // Save the previous state of the context.
         drawContext.save();
@@ -73,14 +72,14 @@ var CanvasUtil = (function(my) {
 
         // Restore the previous context state.
         drawContext.restore();
-    };
+    },
 
     /**
      * Clones the given canvas.
      *
      * @return the new cloned canvas.
      */
-    my.cloneCanvas = function (oldCanvas) {
+    cloneCanvas (oldCanvas) {
         /*
          * FIXME Testing has shown that oldCanvas may not exist. In such a case,
          * the method CanvasUtil.cloneCanvas may throw an error. Since audio
@@ -103,9 +102,7 @@ var CanvasUtil = (function(my) {
 
         //return the new canvas
         return newCanvas;
-    };
+    }
+};
 
-    return my;
-})(CanvasUtil || {});
-
-module.exports = CanvasUtil;
+export default CanvasUtil;