code cleanup
This commit is contained in:
isymchych
parent
de9d991f98
commit
cb522eadd8
|
|
@ -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,136 +22,20 @@ function initActiveSpeakerAudioLevels() {
|
|||
}
|
||||
|
||||
/**
|
||||
* The audio Levels plugin.
|
||||
*/
|
||||
var AudioLevels = (function(my) {
|
||||
var audioLevelCanvasCache = {};
|
||||
|
||||
my.LOCAL_LEVEL = 'local';
|
||||
|
||||
my.init = function () {
|
||||
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) {
|
||||
let videoSpanId = 'localVideoContainer';
|
||||
if (id) {
|
||||
videoSpanId = `participant_${id}`;
|
||||
}
|
||||
|
||||
let videoSpan = document.getElementById(videoSpanId);
|
||||
|
||||
if (!videoSpan) {
|
||||
if (id) {
|
||||
console.error("No video element for id", id);
|
||||
} else {
|
||||
console.error("No video element for local video.");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
let audioLevelCanvas = $(`#${videoSpanId}>canvas`);
|
||||
|
||||
let videoSpaceWidth = $('#remoteVideos').width();
|
||||
let thumbnailSize = VideoLayout.calculateThumbnailSize(videoSpaceWidth);
|
||||
let thumbnailWidth = thumbnailSize[0];
|
||||
let thumbnailHeight = thumbnailSize[1];
|
||||
|
||||
if (!audioLevelCanvas || audioLevelCanvas.length === 0) {
|
||||
|
||||
audioLevelCanvas = document.createElement('canvas');
|
||||
audioLevelCanvas.className = "audiolevel";
|
||||
audioLevelCanvas.style.bottom = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
|
||||
audioLevelCanvas.style.left = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
|
||||
resizeAudioLevelCanvas(audioLevelCanvas, thumbnailWidth, thumbnailHeight);
|
||||
|
||||
videoSpan.appendChild(audioLevelCanvas);
|
||||
} else {
|
||||
audioLevelCanvas = audioLevelCanvas.get(0);
|
||||
|
||||
resizeAudioLevelCanvas(audioLevelCanvas, thumbnailWidth, thumbnailHeight);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the audio level UI for the given id.
|
||||
*
|
||||
* @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) {
|
||||
drawAudioLevelCanvas(id, audioLevel);
|
||||
|
||||
let videoSpanId = getVideoSpanId(id);
|
||||
|
||||
let audioLevelCanvas = $(`#${videoSpanId}>canvas`).get(0);
|
||||
|
||||
if (!audioLevelCanvas) {
|
||||
return;
|
||||
}
|
||||
|
||||
let drawContext = audioLevelCanvas.getContext('2d');
|
||||
|
||||
let canvasCache = audioLevelCanvasCache[id];
|
||||
|
||||
drawContext.clearRect(
|
||||
0, 0, audioLevelCanvas.width, audioLevelCanvas.height
|
||||
);
|
||||
drawContext.drawImage(canvasCache, 0, 0);
|
||||
|
||||
if (id === AudioLevels.LOCAL_LEVEL) {
|
||||
id = APP.conference.localId;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if(id === largeVideoId) {
|
||||
window.requestAnimationFrame(function () {
|
||||
AudioLevels.updateActiveSpeakerAudioLevel(audioLevel);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
my.updateActiveSpeakerAudioLevel = function(audioLevel) {
|
||||
if($("#activeSpeaker").css("visibility") == "hidden" || ASDrawContext === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
ASDrawContext.clearRect(0, 0, 300, 300);
|
||||
if (!audioLevel) {
|
||||
return;
|
||||
}
|
||||
|
||||
ASDrawContext.shadowBlur = getShadowLevel(audioLevel);
|
||||
|
||||
|
||||
// Fill the shape.
|
||||
ASDrawContext.fill();
|
||||
};
|
||||
|
||||
/**
|
||||
* Resizes the given audio level canvas to match the given thumbnail size.
|
||||
*/
|
||||
function resizeAudioLevelCanvas(audioLevelCanvas,
|
||||
thumbnailWidth,
|
||||
thumbnailHeight) {
|
||||
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) {
|
||||
function drawAudioLevelCanvas(id, audioLevel) {
|
||||
if (!audioLevelCanvasCache[id]) {
|
||||
|
||||
let videoSpanId = getVideoSpanId(id);
|
||||
|
|
@ -187,50 +75,51 @@ var AudioLevels = (function(my) {
|
|||
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;
|
||||
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) {
|
||||
} else if (audioLevel <= 0.6) {
|
||||
shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
|
||||
}
|
||||
return shadowLevel;
|
||||
}
|
||||
|
||||
/**
|
||||
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)) {
|
||||
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) {
|
||||
var resized = false;
|
||||
$(document).bind('remotevideo.resized', function (event, width, height) {
|
||||
let resized = false;
|
||||
|
||||
$('#remoteVideos>span>canvas').each(function() {
|
||||
var canvas = $(this).get(0);
|
||||
let canvas = $(this).get(0);
|
||||
if (canvas.width !== width + interfaceConfig.CANVAS_EXTRA) {
|
||||
canvas.width = width + interfaceConfig.CANVAS_EXTRA;
|
||||
resized = true;
|
||||
|
|
@ -244,16 +133,123 @@ var AudioLevels = (function(my) {
|
|||
|
||||
if (resized) {
|
||||
Object.keys(audioLevelCanvasCache).forEach(function (id) {
|
||||
audioLevelCanvasCache[id].width =
|
||||
width + interfaceConfig.CANVAS_EXTRA;
|
||||
audioLevelCanvasCache[id].height =
|
||||
height + interfaceConfig.CANVAS_EXTRA;
|
||||
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.
|
||||
*/
|
||||
updateAudioLevelCanvas (id, VideoLayout) {
|
||||
let videoSpanId = 'localVideoContainer';
|
||||
if (id) {
|
||||
videoSpanId = `participant_${id}`;
|
||||
}
|
||||
|
||||
let videoSpan = document.getElementById(videoSpanId);
|
||||
|
||||
if (!videoSpan) {
|
||||
if (id) {
|
||||
console.error("No video element for id", id);
|
||||
} else {
|
||||
console.error("No video element for local video.");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
let audioLevelCanvas = $(`#${videoSpanId}>canvas`);
|
||||
|
||||
let videoSpaceWidth = $('#remoteVideos').width();
|
||||
let thumbnailSize = VideoLayout.calculateThumbnailSize(videoSpaceWidth);
|
||||
let thumbnailWidth = thumbnailSize[0];
|
||||
let thumbnailHeight = thumbnailSize[1];
|
||||
|
||||
if (!audioLevelCanvas || audioLevelCanvas.length === 0) {
|
||||
|
||||
audioLevelCanvas = document.createElement('canvas');
|
||||
audioLevelCanvas.className = "audiolevel";
|
||||
audioLevelCanvas.style.bottom = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
|
||||
audioLevelCanvas.style.left = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
|
||||
resizeAudioLevelCanvas(audioLevelCanvas, thumbnailWidth, thumbnailHeight);
|
||||
|
||||
videoSpan.appendChild(audioLevelCanvas);
|
||||
} else {
|
||||
audioLevelCanvas = audioLevelCanvas.get(0);
|
||||
|
||||
resizeAudioLevelCanvas(audioLevelCanvas, thumbnailWidth, thumbnailHeight);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the audio level UI for the given id.
|
||||
*
|
||||
* @param id id of the user for whom we draw the audio level
|
||||
* @param audioLevel the newAudio level to render
|
||||
*/
|
||||
updateAudioLevel (id, audioLevel, largeVideoId) {
|
||||
drawAudioLevelCanvas(id, audioLevel);
|
||||
|
||||
let videoSpanId = getVideoSpanId(id);
|
||||
|
||||
let audioLevelCanvas = $(`#${videoSpanId}>canvas`).get(0);
|
||||
|
||||
if (!audioLevelCanvas) {
|
||||
return;
|
||||
}
|
||||
|
||||
let drawContext = audioLevelCanvas.getContext('2d');
|
||||
|
||||
let canvasCache = audioLevelCanvasCache[id];
|
||||
|
||||
drawContext.clearRect(
|
||||
0, 0, audioLevelCanvas.width, audioLevelCanvas.height
|
||||
);
|
||||
drawContext.drawImage(canvasCache, 0, 0);
|
||||
|
||||
if (id === LOCAL_LEVEL) {
|
||||
id = APP.conference.localId;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if(id === largeVideoId) {
|
||||
window.requestAnimationFrame(function () {
|
||||
AudioLevels.updateActiveSpeakerAudioLevel(audioLevel);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
return my;
|
||||
updateActiveSpeakerAudioLevel (audioLevel) {
|
||||
if($("#activeSpeaker").css("visibility") == "hidden" || ASDrawContext === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
})(AudioLevels || {});
|
||||
ASDrawContext.clearRect(0, 0, 300, 300);
|
||||
if (!audioLevel) {
|
||||
return;
|
||||
}
|
||||
|
||||
module.exports = AudioLevels;
|
||||
ASDrawContext.shadowBlur = getShadowLevel(audioLevel);
|
||||
|
||||
|
||||
// Fill the shape.
|
||||
ASDrawContext.fill();
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
export default AudioLevels;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue