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

109 lines
3.1 KiB
JavaScript
Raw Normal View History

2016-09-28 21:31:40 +00:00
/* global interfaceConfig */
2015-12-11 16:16:07 +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
/**
* 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');
2016-09-29 05:22:05 +00:00
// Make sure the audio span is still around.
if (audioSpan && audioSpan.length > 0) {
2016-09-28 21:31:40 +00:00
audioSpan = audioSpan[0];
} else {
return;
}
const audioTopDots
= audioSpan.getElementsByClassName('audiodot-top');
const audioDotMiddle
= audioSpan.getElementsByClassName('audiodot-middle');
const audioBottomDots
= audioSpan.getElementsByClassName('audiodot-bottom');
2016-09-28 21:31:40 +00:00
2016-09-29 05:22:05 +00:00
// First take care of the middle dot case.
if (index === 0) {
2016-09-29 05:22:05 +00:00
audioDotMiddle[0].style.opacity = opacity;
2016-09-29 05:22:05 +00:00
return;
}
2016-09-29 05:22:05 +00:00
// Index > 0 : we are setting non-middle dots.
index--;// eslint-disable-line no-param-reassign
2016-09-29 05:22:05 +00:00
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) {
const element = document.getElementById(elementId);
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
let shadowElement = element.getElementsByClassName('dynamic-shadow');
2016-09-15 02:20:54 +00:00
if (shadowElement && shadowElement.length > 0) {
2016-09-28 21:31:40 +00:00
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) {
const scale = 2;
2016-09-28 21:31:40 +00:00
// Internal circle audio level.
const int = {
2016-09-28 21:31:40 +00:00
level: level > 0.15 ? 20 : 0,
color: interfaceConfig.AUDIO_LEVEL_PRIMARY_COLOR
};
2016-09-28 21:31:40 +00:00
// External circle audio level.
const ext = {
level: parseFloat(
((int.level * scale * level) + int.level).toFixed(0)),
2016-09-28 21:31:40 +00:00
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}`
2016-09-28 21:31:40 +00:00
].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;