Improve stability + positioning

- Slider is now inserted into the top bar
- Fixed invalid positioning in breakout rooms
- Fixed vertical centering to ... menu

bbb-volume-slider.user.js

 // ==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);
 
 })();