youtube hides controls while showing progress bar

Hide YouTube's controls and display the progress bar

  1. // ==UserScript==
  2. // @name youtube hides controls while showing progress bar
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0
  5. // @description Hide YouTube's controls and display the progress bar
  6. // @author You
  7. // @match https://www.youtube.com/*
  8. // @grant none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. let controlsVisible = false;
  16. let isScriptEnabled = true;
  17. let intervalId = null;
  18. let savedState = null;
  19.  
  20. // Function to hide controls but keep the progress bar and prevent subtitles from moving up
  21. function hideControls() {
  22. const controls = document.querySelector('.ytp-chrome-controls');
  23. const progressBar = document.querySelector('.ytp-progress-bar-container');
  24.  
  25. if (controls) {
  26. controls.style.opacity = '0';
  27. }
  28.  
  29. if (progressBar) {
  30. progressBar.style.opacity = '1';
  31. }
  32.  
  33. const subtitles = document.querySelector('.ytp-caption-window-container');
  34. if (subtitles) {
  35. subtitles.style.transform = 'none';
  36. }
  37. }
  38.  
  39. // Function to show controls
  40. function showControls() {
  41. const controls = document.querySelector('.ytp-chrome-controls');
  42. const progressBar = document.querySelector('.ytp-progress-bar-container');
  43.  
  44. if (controls) {
  45. controls.style.opacity = '1';
  46. }
  47.  
  48. if (progressBar) {
  49. progressBar.style.opacity = '1';
  50. }
  51.  
  52. const subtitles = document.querySelector('.ytp-caption-window-container');
  53. if (subtitles) {
  54. subtitles.style.transform = '';
  55. }
  56. }
  57.  
  58. // Function to toggle controls visibility
  59. function toggleControls() {
  60. controlsVisible = !controlsVisible;
  61. if (controlsVisible) {
  62. showControls();
  63. } else {
  64. hideControls();
  65. }
  66. }
  67.  
  68. // Function to restore all changes made by the script and disable interval
  69. function restoreDefaults() {
  70. const controls = document.querySelector('.ytp-chrome-controls');
  71. const progressBar = document.querySelector('.ytp-progress-bar-container');
  72. const subtitles = document.querySelector('.ytp-caption-window-container');
  73.  
  74. if (controls) {
  75. controls.style.opacity = '';
  76. }
  77.  
  78. if (progressBar) {
  79. progressBar.style.opacity = '';
  80. }
  81.  
  82. if (subtitles) {
  83. subtitles.style.transform = '';
  84. }
  85.  
  86. if (intervalId !== null) {
  87. clearInterval(intervalId);
  88. intervalId = null;
  89. }
  90.  
  91. isScriptEnabled = false;
  92. }
  93.  
  94. // Function to enable interval and hide controls
  95. function enableInterval() {
  96. if (intervalId === null) {
  97. intervalId = setInterval(() => {
  98. if (!controlsVisible && isScriptEnabled) {
  99. hideControls();
  100. }
  101. }, 1000);
  102. }
  103.  
  104. isScriptEnabled = true;
  105. }
  106.  
  107. // Initially hide controls and start interval
  108. hideControls();
  109. enableInterval();
  110.  
  111. // Add event listener for Ctrl+M to toggle controls
  112. document.addEventListener('keydown', (e) => {
  113. if (e.ctrlKey && e.key.toLowerCase() === 'm' && isScriptEnabled) {
  114. toggleControls();
  115. }
  116. if (e.altKey && e.key.toLowerCase() === 'm') {
  117. if (isScriptEnabled) {
  118. savedState = {
  119. controlsVisible,
  120. isScriptEnabled,
  121. intervalId
  122. };
  123. restoreDefaults();
  124. } else {
  125. if (savedState) {
  126. controlsVisible = savedState.controlsVisible;
  127. isScriptEnabled = savedState.isScriptEnabled;
  128. intervalId = savedState.intervalId;
  129. }
  130. hideControls();
  131. enableInterval();
  132. }
  133. }
  134. });
  135. })();