☰

Big Jitsi Controls

Magnify & Highlight Jit.si & 8x8 Meeting controls to help the visually impaired

// ==UserScript==
// @name         Big Jitsi Controls
// @namespace    https://greasyfork.org/en/users/922168-mark-zinzow
// @version      0.4
// @description  Magnify & Highlight Jit.si & 8x8 Meeting controls to help the visually impaired
// @author       Mark Zinzow
// @match        https://meet.jit.si/*
// @match        https://8x8.vc/*
// @match        https://meet.*.space/*
// @icon         https://greasyfork.s3.us-east-2.amazonaws.com/zhdewxpctuazcm6e6chymibnn6y1
// @homepage     https://greasyfork.org/en/scripts/446014-big-jitsi-controls/feedback
// @license MIT
// @grant none
// @run-at document-end
// ==/UserScript==
/*jshint esversion: 6 */

let DEBUG =0;
setTimeout(makebig, 1000); //Wait to makes sure page js finished first
//Looking for clicks anywhere in the document almost solved the problem of not finding exactly which to watch
//https://gomakethings.com/listening-for-click-events-with-vanilla-javascript/

document.addEventListener('click', function (event) {
	if (DEBUG) console.log(event.target); // Log the clicked element in the console to see elements clicked
    setTimeout(makebig, 100); // restore the big icons after they change on click
});

//Bonus feature, remove that dang install Chrome extension nag element!
// using Kill Sticky bookmarklet code from https://github.com/t-mart/kill-sticky
/*    document.querySelectorAll('body *').forEach(function(node) {
        if (['fixed', 'sticky'].includes(getComputedStyle(node).position)) {
            node.parentNode.removeChild(node);
        }
    });
 Not used as the don't show me again box seems to work now...
*/

function makebig() {
let ctrlsvgs = document.querySelectorAll("svg[height='22']"); //bottom row
for (let i = 0; i < ctrlsvgs.length; i++) {
  ctrlsvgs[i].style.height=66;
  ctrlsvgs[i].style.width=66;
  ctrlsvgs[i].style.fill="#FFF01F"; //Neon Yellow
  ctrlsvgs[i].style.backgroundColor = "black";
  ctrlsvgs[i].addEventListener("click",makebig);
}
let tinysvgs = document.querySelectorAll("svg[height='9']");
for (let i = 0; i < tinysvgs.length; i++) {
  tinysvgs[i].style.height=18;
  tinysvgs[i].style.width=18;
  tinysvgs[i].style.fill="#39FF14"; //Neon Green
  tinysvgs[i].addEventListener("click",makebig);
  }
}
// When the mic or video buttons are toggled, they revert to small size
// Sometimes the mic icon reverts to small shortly after page load.  Not sure why so redo a few times to catch
// Unmuting cameras seems to also revert the camera icon, so give kludge an hour to fix
for (let i = 0; i < 1800 ; i++) { //1800 keeps altering the icons every 2 seconds for an hour
setTimeout(makebig, i*2000);
}