☰

Twitch Latency Overlay (EMBEDDED)

Latency to Broadcaster Overlay (customizable, see more in the code section).(FOR EMBEDDED/ADBLOCK VERSION) - Edited version of https://greatest.deepsurf.us/en/scripts/391680-twitch-latency-on-player-controls/

  1. // ==UserScript==
  2. // @name         Twitch Latency Overlay (EMBEDDED)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.7 (embedded)
  5. // @description  Latency to Broadcaster Overlay (customizable, see more in the code section).(FOR EMBEDDED/ADBLOCK VERSION) - Edited version of https://greatest.deepsurf.us/en/scripts/391680-twitch-latency-on-player-controls/
  6. // @author       zaykho (for the modified version)
  7. // @include      https://player.twitch.tv/*
  8. // @grant        none
  9. // @run-at       document-end
  10. // ==/UserScript==
  11.  
  12. (function(){
  13. //////////////////////////////////////////////
  14. // Set the position for the Overlay: [0 by default (video)](you can click on the overlay button to automatically toggle to the next position)
  15. // 0, 1, 2, 3: Inside of the Video (work for Theatre and Full-Screen)
  16. // 0 = Top Right.
  17. // 1 = Bottom Right.
  18. // 2 = Bottom Left.
  19. // 3 = Top Left.
  20. var tlo_position=0;
  21. // Set the font color for the Overlay ["#a263ff" by default (light-purple)]
  22. var tlo_font_color="#a263ff";
  23. // Set the font size for the Overlay [13 by default]
  24. var tlo_font_size=13;
  25. // Set the delay required before creating the overlay (in milliseconds, after loading the page) [3000 by default]
  26. var tlo_create_delay=3000;
  27. //////////////////////////////////////////////
  28. ///////// DO NOT EDIT PAST THIS LINE /////////
  29. //////////////////////////////////////////////
  30. var tlo_main;
  31. var tlo_index="width:90px;height:30px;font:bold "+tlo_font_size+"px Arial,sans-serif;line-height:30px;border-radius:4px;text-align:center;cursor:pointer;color:"+tlo_font_color;
  32. var tlo_list=[];
  33. tlo_list[0]="position:absolute;right:15px;top:10px;box-shadow:#111011 0px 0px 2px;background:#18181b;"+tlo_index;
  34. tlo_list[1]="position:absolute;right:15px;bottom:44px;box-shadow:#111011 0px 0px 2px;background:#18181b;"+tlo_index;
  35. tlo_list[2]="position:absolute;left:15px;bottom:44px;box-shadow:#111011 0px 0px 2px;background:#18181b;"+tlo_index;
  36. tlo_list[3]="position:absolute;left:15px;top:10px;box-shadow:#111011 0px 0px 2px;background:#18181b;"+tlo_index;
  37. //////////////////////////////////////////////
  38. function tlo_function_click(){
  39. if(tlo_position == 3 || tlo_position == -1){tlo_position=0;}
  40. else{tlo_position+=1;}
  41. document.querySelector(".video-player").appendChild(tlo_main);
  42. tlo_main.style.cssText=tlo_list[tlo_position];
  43. }
  44. //////////////////////////////////////////////
  45. function tlo_function_over(){
  46. tlo_main.style.background="#9147ff";
  47. tlo_main.style.color="#ffffff";
  48. tlo_main.style.boxShadow="#7346b5 0px 0px 2px";
  49. }
  50. //////////////////////////////////////////////
  51. function tlo_function_out(){
  52. tlo_main.style.color=tlo_font_color;
  53. tlo_main.style.background="#18181b";tlo_main.style.boxShadow="#111011 0px 0px 2px";
  54. }
  55. //////////////////////////////////////////////
  56. window.addEventListener('load',function(){
  57. //////////////////////////////////////////////
  58. setTimeout(function(){
  59. //////////////////////////////////////////////
  60. document.querySelector("button[data-a-target='player-settings-button']").click();
  61. document.querySelector("button[data-a-target='player-settings-menu-item-advanced']").click();
  62. document.querySelector("div[data-a-target='player-settings-submenu-advanced-video-stats'] input").click();
  63. document.querySelector("div[data-a-target='player-overlay-video-stats']").style.display="none";
  64. //////////////////////////////////////////////
  65. tlo_main=document.querySelector("div[data-a-target='player-overlay-video-stats'] > table > tbody > tr:nth-child(5) > td:nth-child(2) > p");
  66. //////////////////////////////////////////////
  67. tlo_main.addEventListener("click", tlo_function_click);
  68. tlo_main.addEventListener("mouseover", tlo_function_over);
  69. tlo_main.addEventListener("mouseout", tlo_function_out);
  70. //////////////////////////////////////////////
  71. tlo_position-=1;tlo_function_click();
  72. document.querySelector("button[data-a-target='player-settings-button']").click();
  73. //////////////////////////////////////////////
  74. }, tlo_create_delay);
  75. //////////////////////////////////////////////
  76. })
  77. //////////////////////////////////////////////
  78. })();