haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

code cleanup

This commit is contained in:
isymchych 2015-12-11 18:16:07 +02:00
parent de9d991f98
commit cb522eadd8
2 changed files with 144 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

294
modules/UI/audio_levels/AudioLevels.js
View File

@ -1,12 +1,16 @@
/* global APP, interfaceConfig, $ */ /* global APP, interfaceConfig, $ */
/* jshint -W101 */ /* jshint -W101 */
import CanvasUtil from './CanvasUtils'; import CanvasUtil from './CanvasUtils';
var ASDrawContext = null; const LOCAL_LEVEL = 'local';
let ASDrawContext = null;
let audioLevelCanvasCache = {};
function initActiveSpeakerAudioLevels() { function initActiveSpeakerAudioLevels() {
var ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 2; let ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 2;
var ASCenter = (interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE + ASRadius) / 2; let ASCenter = (interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE + ASRadius) / 2;
// Draw a circle. // Draw a circle.
ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI); 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. * Resizes the given audio level canvas to match the given thumbnail size.
*/ */
function resizeAudioLevelCanvas(audioLevelCanvas, function resizeAudioLevelCanvas(audioLevelCanvas, thumbnailWidth, thumbnailHeight) {
thumbnailWidth,
thumbnailHeight) {
audioLevelCanvas.width = thumbnailWidth + interfaceConfig.CANVAS_EXTRA; audioLevelCanvas.width = thumbnailWidth + interfaceConfig.CANVAS_EXTRA;
audioLevelCanvas.height = thumbnailHeight + interfaceConfig.CANVAS_EXTRA; audioLevelCanvas.height = thumbnailHeight + interfaceConfig.CANVAS_EXTRA;
} }
/** /**
* Draws the audio level canvas into the cached canvas object. * Draws the audio level canvas into the cached canvas object.
* *
* @param id of the user for whom we draw the audio level * @param id of the user for whom we draw the audio level
* @param audioLevel the newAudio level to render * @param audioLevel the newAudio level to render
*/ */
function drawAudioLevelCanvas(id, audioLevel) { function drawAudioLevelCanvas(id, audioLevel) {
if (!audioLevelCanvasCache[id]) { if (!audioLevelCanvasCache[id]) {
let videoSpanId = getVideoSpanId(id); let videoSpanId = getVideoSpanId(id);
@ -187,50 +75,51 @@ var AudioLevels = (function(my) {
interfaceConfig.SHADOW_COLOR, interfaceConfig.SHADOW_COLOR,
shadowLevel); shadowLevel);
} }
} }
/** /**
* Returns the shadow/glow level for the given audio level. * Returns the shadow/glow level for the given audio level.
* *
* @param audioLevel the audio level from which we determine the shadow * @param audioLevel the audio level from which we determine the shadow
* level * level
*/ */
function getShadowLevel (audioLevel) { function getShadowLevel (audioLevel) {
var shadowLevel = 0; let shadowLevel = 0;
if (audioLevel <= 0.3) { if (audioLevel <= 0.3) {
shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*(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)); 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)); 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 * Returns the video span id corresponding to the given user id
*/ */
function getVideoSpanId(id) { function getVideoSpanId(id) {
var videoSpanId = null; let videoSpanId = null;
if (id === AudioLevels.LOCAL_LEVEL || APP.conference.isLocalId(id)) {
if (id === LOCAL_LEVEL || APP.conference.isLocalId(id)) {
videoSpanId = 'localVideoContainer'; videoSpanId = 'localVideoContainer';
} else { } else {
videoSpanId = `participant_${id}`; videoSpanId = `participant_${id}`;
} }
return videoSpanId; return videoSpanId;
} }
/** /**
* Indicates that the remote video has been resized. * Indicates that the remote video has been resized.
*/ */
$(document).bind('remotevideo.resized', function (event, width, height) { $(document).bind('remotevideo.resized', function (event, width, height) {
var resized = false; let resized = false;
$('#remoteVideos>span>canvas').each(function() { $('#remoteVideos>span>canvas').each(function() {
var canvas = $(this).get(0); let canvas = $(this).get(0);
if (canvas.width !== width + interfaceConfig.CANVAS_EXTRA) { if (canvas.width !== width + interfaceConfig.CANVAS_EXTRA) {
canvas.width = width + interfaceConfig.CANVAS_EXTRA; canvas.width = width + interfaceConfig.CANVAS_EXTRA;
resized = true; resized = true;
@ -244,16 +133,123 @@ var AudioLevels = (function(my) {
if (resized) { if (resized) {
Object.keys(audioLevelCanvasCache).forEach(function (id) { Object.keys(audioLevelCanvasCache).forEach(function (id) {
audioLevelCanvasCache[id].width = audioLevelCanvasCache[id].width = width + interfaceConfig.CANVAS_EXTRA;
width + interfaceConfig.CANVAS_EXTRA; audioLevelCanvasCache[id].height = height + 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;

17
modules/UI/audio_levels/CanvasUtils.js
View File

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