jiti-meet/modules/UI/audio_levels/AudioLevels.js

167 lines
4.9 KiB
JavaScript
Raw Normal View History

2016-09-28 21:31:40 +00:00
/* global interfaceConfig */
2015-12-11 16:16:07 +00:00
2016-09-28 21:31:40 +00:00
import UIUtil from "../util/UIUtil";
2016-09-29 05:22:05 +00:00
2015-12-11 16:16:07 +00:00
/**
2016-09-28 21:31:40 +00:00
* Responsible for drawing audio levels.
2015-12-11 16:16:07 +00:00
*/
const AudioLevels = {
/**
2016-09-29 05:22:05 +00:00
* The number of dots.
*
* IMPORTANT: functions below assume that this is an odd number.
*/
2016-09-29 05:22:05 +00:00
_AUDIO_LEVEL_DOTS: 5,
2016-09-28 21:31:40 +00:00
/**
* Creates the audio level indicator span element.
*
2016-09-29 05:22:05 +00:00
* IMPORTANT: This function assumes that the number of dots is an
* odd number.
*
2016-09-28 21:31:40 +00:00
* @return {Element} the document element representing audio levels
*/
createThumbnailAudioLevelIndicator() {
2016-09-28 21:31:40 +00:00
let audioSpan = document.createElement('span');
audioSpan.className = 'audioindicator';
2016-09-29 05:22:05 +00:00
this.sideDotsCount = Math.floor(this._AUDIO_LEVEL_DOTS/2);
for (let i = 0; i < this._AUDIO_LEVEL_DOTS; i++) {
let audioDot = document.createElement('span');
// The median index will be equal to the number of dots on each
// side.
if (i === this.sideDotsCount)
audioDot.className = "audiodot-middle";
else
audioDot.className = (i < this.sideDotsCount)
2016-09-28 21:31:40 +00:00
? "audiodot-top"
: "audiodot-bottom";
2016-09-28 21:31:40 +00:00
audioSpan.appendChild(audioDot);
}
2016-09-28 21:31:40 +00:00
return audioSpan;
2015-12-11 16:16:07 +00:00
},
/**
* Updates the audio level UI for the given id.
*
2016-09-29 05:22:05 +00:00
* @param {string} id id of the user for whom we draw the audio level
* @param {number} audioLevel the newAudio level to render
*/
2016-09-28 21:31:40 +00:00
updateThumbnailAudioLevel (id, audioLevel) {
2016-09-29 05:22:05 +00:00
// First make sure we are sensitive enough.
audioLevel *= 1.2;
audioLevel = Math.min(audioLevel, 1);
// Let's now stretch the audio level over the number of dots we have.
let stretchedAudioLevel = (this.sideDotsCount + 1) * audioLevel;
let dotLevel = 0.0;
for (let i = 0; i < (this.sideDotsCount + 1); i++) {
dotLevel = Math.min(1, Math.max(0, (stretchedAudioLevel - i)));
this._setDotLevel(id, i, dotLevel);
}
},
/**
* Fills the dot(s) with the specified "index", with as much opacity as
* indicated by "opacity".
*
* @param {string} elementID the parent audio indicator span element
* @param {number} index the index of the dots to fill, where 0 indicates
* the middle dot and the following increments point toward the
* corresponding pair of dots.
* @param {number} opacity the opacity to set for the specified dot.
*/
_setDotLevel(elementID, index, opacity) {
let audioSpan = document.getElementById(elementID)
.getElementsByClassName("audioindicator");
// Make sure the audio span is still around.
2016-09-28 21:31:40 +00:00
if (audioSpan && audioSpan.length > 0)
audioSpan = audioSpan[0];
else
return;
2016-09-28 21:31:40 +00:00
let audioTopDots
= audioSpan.getElementsByClassName("audiodot-top");
2016-09-29 05:22:05 +00:00
let audioDotMiddle
= audioSpan.getElementsByClassName("audiodot-middle");
2016-09-28 21:31:40 +00:00
let audioBottomDots
= audioSpan.getElementsByClassName("audiodot-bottom");
2016-09-29 05:22:05 +00:00
// First take care of the middle dot case.
if (index === 0){
audioDotMiddle[0].style.opacity = opacity;
return;
}
2016-09-29 05:22:05 +00:00
// Index > 0 : we are setting non-middle dots.
index--;
audioBottomDots[index].style.opacity = opacity;
audioTopDots[this.sideDotsCount - index - 1].style.opacity = opacity;
2015-12-11 16:16:07 +00:00
},
2016-09-28 21:31:40 +00:00
/**
* Updates the audio level of the large video.
*
* @param audioLevel the new audio level to set.
*/
updateLargeVideoAudioLevel(elementId, audioLevel) {
let element = document.getElementById(elementId);
2016-09-28 21:31:40 +00:00
if(!UIUtil.isVisible(element))
return;
2016-09-28 21:31:40 +00:00
let level = parseFloat(audioLevel);
2016-09-28 21:31:40 +00:00
level = isNaN(level) ? 0 : level;
2015-12-25 16:55:45 +00:00
2016-09-28 21:31:40 +00:00
let shadowElement = element.getElementsByClassName("dynamic-shadow");
2016-09-15 02:20:54 +00:00
2016-09-28 21:31:40 +00:00
if (shadowElement && shadowElement.length > 0)
shadowElement = shadowElement[0];
2015-12-25 16:55:45 +00:00
2016-09-28 21:31:40 +00:00
shadowElement.style.boxShadow = this._updateLargeVideoShadow(level);
},
/**
* Updates the large video shadow effect.
*/
_updateLargeVideoShadow (level) {
var scale = 2,
// Internal circle audio level.
int = {
level: level > 0.15 ? 20 : 0,
color: interfaceConfig.AUDIO_LEVEL_PRIMARY_COLOR
},
// External circle audio level.
ext = {
level: (int.level * scale * level + int.level).toFixed(0),
color: interfaceConfig.AUDIO_LEVEL_SECONDARY_COLOR
};
// Internal blur.
int.blur = int.level ? 2 : 0;
// External blur.
ext.blur = ext.level ? 6 : 0;
return [
`0 0 ${ int.blur }px ${ int.level }px ${ int.color }`,
`0 0 ${ ext.blur }px ${ ext.level }px ${ ext.color }`
].join(', ');
2015-12-14 12:26:50 +00:00
}
2015-12-11 16:16:07 +00:00
};
2015-01-07 14:54:03 +00:00
2015-12-11 16:16:07 +00:00
export default AudioLevels;