bbb-volume-slider.user.js

// ==UserScript==
// @name         BBB Volume Slider
// @website      https://code.fbi.h-da.de/istddmue2/bbb-volume-slider-userscript
// @version      0.2
// @description  Adds a volume slider
// @author       Daniel Müller
// @match        https://*.h-da.de/html5client/join*
// @grant        none
// ==/UserScript==

async function sleep(ms) {
    await new Promise(r => setTimeout(r, ms));
}

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";

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

    // 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);

})();