Make Whereby Great Again

makeWherebyGreatAgain.user.js

// ==UserScript==
// @name         Make Whereby Great Again
// @namespace    http://dbx12.de
// @version      0.2
// @description  Improve whereby (former appearin) experience
// @author       DBX12
// @match        https://whereby.com/*
// @match        https://*.whereby.com/*
// @grant        unsafeWindow
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @updateUrl    https://gist.githubusercontent.com/DBX12/c9a46441ff70ad0c45ee36bda0f45ca1/raw/
// @downloadUrl  https://gist.githubusercontent.com/DBX12/c9a46441ff70ad0c45ee36bda0f45ca1/raw/
// ==/UserScript==

(function() {
    'use strict';

})();

/*
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
*/

function showFullNames(){
    let nodes = $('div[class*="Avatar"]');
    let fixedCount = 0;
    nodes.each(function(index,elem){
        if(!elem.hasAttribute('title') || elem.hasAttribute('shows-fullname')){
            return;
        }
        let $elem = $(elem);
        $elem.empty();
        $elem.css('display','flex');
        $elem.css('align-items','center');
        $elem.css('justify-content', 'center');
        $elem.html(elem.title.replace(' ','<br/>'));
        $elem.prop('shows-fullname','1');
        fixedCount++;
    });
    console.log('showFullNames(): Avatars fixed: ' + fixedCount);
}

function removeBackgroundImage(color){
    $("body > div > div > div > img").remove();
    if(color){
        $("body > div > div > div ").css('background-color',color)
    }
}

let makeWherebyGreatAgain = {}
/**
 * This function replaces all avatar images / initials with the username you see when hovering the avatar.
 */
makeWherebyGreatAgain.showFullNames = showFullNames;
/**
 * This function removes the background image from the room. You can provide a color understood by the
 * CSS attribute `background-color` as parameter. That would replace the background with this color,
 * otherwise, it uses the default whereby green.
 */
makeWherebyGreatAgain.removeBackgroundImage = removeBackgroundImage;

unsafeWindow.makeWherebyGreatAgain = makeWherebyGreatAgain;