init

modules/UI/audio_levels/AudioLevels.js

@@ -0,0 +1,66 @@
+/* global interfaceConfig */
+
+import UIUtil from '../util/UIUtil';
+
+/**
+ * Responsible for drawing audio levels.
+ */
+const AudioLevels = {
+    /**
+     * 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;
+        }
+
+        let level = parseFloat(audioLevel);
+
+        level = isNaN(level) ? 0 : level;
+
+        let shadowElement = element.getElementsByClassName('dynamic-shadow');
+
+        if (shadowElement && shadowElement.length > 0) {
+            shadowElement = shadowElement[0];
+        }
+
+        shadowElement.style.boxShadow = this._updateLargeVideoShadow(level);
+    },
+
+    /**
+     * Updates the large video shadow effect.
+     */
+    _updateLargeVideoShadow(level) {
+        const scale = 2;
+
+        // Internal circle audio level.
+        const int = {
+            level: level > 0.15 ? 20 : 0,
+            color: interfaceConfig.AUDIO_LEVEL_PRIMARY_COLOR
+        };
+
+        // External circle audio level.
+        const ext = {
+            level: parseFloat(
+                ((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(', ');
+    }
+};
+
+export default AudioLevels;