Extra Video Control

Manipulate and center video elements on web pages. (Zoom, Invert, save per site, Move, Volume boost, Reset changes)

  1. // ==UserScript==
  2. // @name Extra Video Control
  3. // @version 2.2
  4. // @description Manipulate and center video elements on web pages. (Zoom, Invert, save per site, Move, Volume boost, Reset changes)
  5. // @run-at document-start
  6. // @match *://*/*
  7. // @grant none
  8. // @author TallTacoTristan
  9. // @license MIT
  10. // @namespace https://greasyfork.org/users/1253611
  11. // ==/UserScript==
  12. // Declare variables
  13. let xaxis = 1.0;
  14. let yaxis = 1.0;
  15. let xposition = 0;
  16. let yposition = 0;
  17.  
  18. // Check if stored values exist for the current site
  19. if (localStorage.getItem('xaxis')) {
  20. xaxis = parseFloat(localStorage.getItem('xaxis'));
  21. yaxis = parseFloat(localStorage.getItem('yaxis'));
  22. xposition = parseInt(localStorage.getItem('xposition'));
  23. yposition = parseInt(localStorage.getItem('yposition'));
  24. }
  25.  
  26. // Apply transformations to all existing video elements
  27. applyTransformations();
  28.  
  29. document.addEventListener('keydown', (event) => {
  30. if (event.altKey) {
  31. switch (event.keyCode) {
  32. case 88: // 'x' key
  33. if (event.shiftKey) {
  34. if (xaxis < 0) xaxis += 0.04;
  35. else xaxis -= 0.04;
  36. } else {
  37. if (xaxis < 0) xaxis -= 0.04;
  38. else xaxis += 0.04;
  39. }
  40. break;
  41. case 89: // 'y' key
  42. if (event.shiftKey) {
  43. if (yaxis < 0) yaxis += 0.04;
  44. else yaxis -= 0.04;
  45. } else {
  46. if (yaxis < 0) yaxis -= 0.04;
  47. else yaxis += 0.04;
  48. }
  49. break;
  50. case 61: // '+' key
  51. if (xaxis < 0) xaxis -= 0.04;
  52. else xaxis += 0.04;
  53. if (yaxis < 0) yaxis -= 0.04;
  54. else yaxis += 0.04;
  55. break;
  56. case 173: // '-' key
  57. if (xaxis < 0) xaxis += 0.04;
  58. else xaxis -= 0.04;
  59. if (yaxis < 0) yaxis += 0.04;
  60. else yaxis -= 0.04;
  61. break;
  62. case 85: // 'u' key (up)
  63. yposition -= 20;
  64. break;
  65. case 72: // 'h' key (left)
  66. xposition -= 20
  67. break;
  68. case 74: // 'j' key (down)
  69. yposition += 20
  70. break;
  71. case 75: // 'k' key (right)
  72. xposition += 20
  73. break;
  74. case 82: // 'r' key (reset)
  75. xaxis = 1.0;
  76. yaxis = 1.0;
  77. xposition = 0;
  78. yposition = 0;
  79. break;
  80. }
  81.  
  82. // Save the transformation values for the current site
  83. localStorage.setItem('xaxis', xaxis);
  84. localStorage.setItem('yaxis', yaxis);
  85. localStorage.setItem('xposition', xposition);
  86. localStorage.setItem('yposition', yposition);
  87.  
  88. // Apply transformations to all video elements
  89. applyTransformations();
  90. }
  91. });
  92. // Function to apply transformations to all video elements
  93. function applyTransformations() {
  94. document.querySelectorAll('video').forEach(video => {
  95. video.style.transform = `scale(${xaxis}, ${yaxis}) translate(${xposition}px, ${yposition}px)`;
  96. });
  97. }
  98.  
  99. // Mutation observer to detect changes in the DOM and reapply transformations
  100. const config = { childList: true, subtree: true };
  101. const callback = function(mutationsList, observer) {
  102. for (const mutation of mutationsList) {
  103. if (mutation.type === 'childList') {
  104. applyTransformations();
  105. }
  106. }
  107. };
  108. const observer = new MutationObserver(callback);
  109. observer.observe(document, config);
  110.  
  111. const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  112. const gainNode = audioCtx.createGain();
  113. gainNode.gain.value = 1.0; // Initial gain value
  114.  
  115. // Keep track of video elements that have been connected to the gain node
  116. const connectedVideos = new Set();
  117.  
  118. document.addEventListener('keydown', function(event) {
  119. if (event.shiftKey) {
  120. if (event.key === '+') {
  121. // Increase volume by 0.5
  122. gainNode.gain.value = Math.min(gainNode.gain.value + 0.5, 10.0); // Adjust maximum gain as needed
  123. } else if (event.key === '_') {
  124. // Decrease volume by 0.5
  125. gainNode.gain.value = Math.max(gainNode.gain.value - 0.5, 0.0);
  126. }
  127.  
  128. // Connect gain node to all video elements that haven't been connected yet
  129. document.querySelectorAll('video').forEach(video => {
  130. if (!connectedVideos.has(video)) {
  131. const source = audioCtx.createMediaElementSource(video);
  132. source.connect(gainNode);
  133. gainNode.connect(audioCtx.destination);
  134. connectedVideos.add(video);
  135. }
  136. });
  137. }
  138. });