From cb522eadd8599b50168ed10fdf9d339c3d694f47 Mon Sep 17 00:00:00 2001 From: isymchych Date: Fri, 11 Dec 2015 18:16:07 +0200 Subject: [PATCH] code cleanup --- modules/UI/audio_levels/AudioLevels.js | 278 ++++++++++++------------- modules/UI/audio_levels/CanvasUtils.js | 17 +- 2 files changed, 144 insertions(+), 151 deletions(-) diff --git a/modules/UI/audio_levels/AudioLevels.js b/modules/UI/audio_levels/AudioLevels.js index ee496dc59..a158cd79a 100644 --- a/modules/UI/audio_levels/AudioLevels.js +++ b/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); @@ -17,24 +21,139 @@ function initActiveSpeakerAudioLevels() { ASDrawContext.shadowOffsetY = 0; } +/** + * 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) { + 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. */ -var AudioLevels = (function(my) { - var audioLevelCanvasCache = {}; +const AudioLevels = { - my.LOCAL_LEVEL = 'local'; - - my.init = function () { + 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; \ No newline at end of file +export default AudioLevels; diff --git a/modules/UI/audio_levels/CanvasUtils.js b/modules/UI/audio_levels/CanvasUtils.js index e0ad60a1b..8f738ca07 100644 --- a/modules/UI/audio_levels/CanvasUtils.js +++ b/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; \ No newline at end of file +export default CanvasUtil;