☰

Big Jitsi Controls

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

  1. // ==UserScript==
  2. // @name         Big Jitsi Controls
  3. // @namespace    https://greasyfork.org/en/users/922168-mark-zinzow
  4. // @version      0.4
  5. // @description  Magnify & Highlight Jit.si & 8x8 Meeting controls to help the visually impaired
  6. // @author       Mark Zinzow
  7. // @match        https://meet.jit.si/*
  8. // @match        https://8x8.vc/*
  9. // @match        https://meet.*.space/*
  10. // @icon         https://greasyfork.s3.us-east-2.amazonaws.com/zhdewxpctuazcm6e6chymibnn6y1
  11. // @homepage     https://greasyfork.org/en/scripts/446014-big-jitsi-controls/feedback
  12. // @license MIT
  13. // @grant none
  14. // @run-at document-end
  15. // ==/UserScript==
  16. /*jshint esversion: 6 */
  17.  
  18. let DEBUG =0;
  19. setTimeout(makebig, 1000); //Wait to makes sure page js finished first
  20. //Looking for clicks anywhere in the document almost solved the problem of not finding exactly which to watch
  21. //https://gomakethings.com/listening-for-click-events-with-vanilla-javascript/
  22.  
  23. document.addEventListener('click', function (event) {
  24. 	if (DEBUG) console.log(event.target); // Log the clicked element in the console to see elements clicked
  25.     setTimeout(makebig, 100); // restore the big icons after they change on click
  26. });
  27.  
  28. //Bonus feature, remove that dang install Chrome extension nag element!
  29. // using Kill Sticky bookmarklet code from https://github.com/t-mart/kill-sticky
  30. /*    document.querySelectorAll('body *').forEach(function(node) {
  31.         if (['fixed', 'sticky'].includes(getComputedStyle(node).position)) {
  32.             node.parentNode.removeChild(node);
  33.         }
  34.     });
  35.  Not used as the don't show me again box seems to work now...
  36. */
  37.  
  38. function makebig() {
  39. let ctrlsvgs = document.querySelectorAll("svg[height='22']"); //bottom row
  40. for (let i = 0; i < ctrlsvgs.length; i++) {
  41.   ctrlsvgs[i].style.height=66;
  42.   ctrlsvgs[i].style.width=66;
  43.   ctrlsvgs[i].style.fill="#FFF01F"; //Neon Yellow
  44.   ctrlsvgs[i].style.backgroundColor = "black";
  45.   ctrlsvgs[i].addEventListener("click",makebig);
  46. }
  47. let tinysvgs = document.querySelectorAll("svg[height='9']");
  48. for (let i = 0; i < tinysvgs.length; i++) {
  49.   tinysvgs[i].style.height=18;
  50.   tinysvgs[i].style.width=18;
  51.   tinysvgs[i].style.fill="#39FF14"; //Neon Green
  52.   tinysvgs[i].addEventListener("click",makebig);
  53.   }
  54. }
  55. // When the mic or video buttons are toggled, they revert to small size
  56. // Sometimes the mic icon reverts to small shortly after page load.  Not sure why so redo a few times to catch
  57. // Unmuting cameras seems to also revert the camera icon, so give kludge an hour to fix
  58. for (let i = 0; i < 1800 ; i++) { //1800 keeps altering the icons every 2 seconds for an hour
  59. setTimeout(makebig, i*2000);
  60. }
  61.