diff --git a/bbb-volume-slider.user.js b/bbb-volume-slider.user.js index 17e370fd01a3fb669389b56db35db04478474461..a82acc44304a221825fdd660af2719a8924b0f60 100644 --- a/bbb-volume-slider.user.js +++ b/bbb-volume-slider.user.js @@ -1,43 +1,70 @@ // ==UserScript== // @name BBB Volume Slider // @website https://code.fbi.h-da.de/istddmue2/bbb-volume-slider-userscript -// @version 0.1 +// @version 0.2 // @description Adds a volume slider // @author Daniel Müller // @match https://*.h-da.de/html5client/join* // @grant none // ==/UserScript== -(function() { - 'use strict'; +async function sleep(ms) { + await new Promise(r => setTimeout(r, ms)); +} - // Check if the volume slider exists - if (document.getElementById("vs-container") != null) return; +function getTopRightContainer() { + return document.querySelector("div[class^=top] div[class^=right]"); +} + +function remoteMedia() { + return document.getElementById("remote-media"); +} + +function createVSContainer() { + let vsc = document.createElement("div"); + vsc.id = "vs-container"; + vsc.style.verticalAlign = "middle"; + vsc.style.marginRight = "20px"; - // Create the container - let vsc = document.createElement("div") - vsc.id = "vs-container" - vsc.style.position = "absolute" - vsc.style.top = "20px" - vsc.style.right = "75px" - - // Create the actual slider - let vs = document.createElement("input") - vs.type = "range" - vs.min = 1 - vs.max = 100 - vs.value = 30 - - // Set the audio volume to default value. This needs to be delayed due to BBB audio stream stuff - window.setTimeout(() => { - document.getElementById("remote-media").volume = Math.pow(vs.value / 100.0, 2) - }, 1000) + return vsc; +} + +function createVolumeSlider() { + let vs = document.createElement("input"); + vs.style.verticalAlign = "middle"; + vs.type = "range"; + vs.min = 1; + vs.max = 100; + vs.value = 30; vs.oninput = function() { - document.getElementById("remote-media").volume = Math.pow(this.value / 100.0, 2) + remoteMedia().volume = Math.pow(this.value / 100.0, 2); + } + + return vs; +} + +(async function() { + 'use strict'; + + // Check if the volume already slider exists + if (document.getElementById("vs-container") != null) return; + + // Wait until dynamic DOM content is ready + while (getTopRightContainer() == null) { + await sleep(500); } - vsc.append(vs) - document.body.appendChild(vsc) + // Create container & slider + let container = createVSContainer(); + let slider = createVolumeSlider(); + container.append(slider); + + // Update audio volume to default slider value + slider.oninput(); + + // Insert the volume slider into the right side of the top bar + let targetContainer = getTopRightContainer(); + targetContainer.insertBefore(container, targetContainer.firstChild); })();