feat: amplify video volume

build.dart

@@ -65,6 +65,7 @@ const scripts = <String, List<String>>{
     '*://online.manchester.ac.uk/ultra',
     '*://online.manchester.ac.uk/ultra/*'
   ],
+  'amplify_videos': ['*://video.manchester.ac.uk/embedded/*'],
   'auto_login': ['*://login.manchester.ac.uk/cas/login*'],
   'expand_menu': ['*://online.manchester.ac.uk/webapps/blackboard/content/*'],
   'save_scroll_pos': ['*://leanpub.com/*/read*'],

src/scripts/amplify_videos.js

@@ -0,0 +1,104 @@
+/// Adds a button to videos to amplify the volume
+
+// @ts-check
+
+(async function() {
+    'use strict';
+
+    /** @type {MediaElementAudioSourceNode | null} */
+    let audioContextSource = null;
+    /** @type {GainNode | null} */
+    let audioContextGain = null;
+    /** @type {HTMLButtonElement | null} */
+    let amplifyButton = null;
+
+    const maxGain = 10;
+
+    function setupAudioContext() {
+        if (!video) return;
+        if (audioContextSource?.mediaElement === video) return;
+
+        const audioContext = new AudioContext();
+        audioContextSource = audioContext.createMediaElementSource(video);
+        audioContextGain = audioContext.createGain();
+
+        audioContextSource.connect(audioContextGain);
+        audioContextGain.connect(audioContext.destination);
+    }
+
+    function addAmplifyButton() {
+        /** @type {HTMLDivElement | null} */
+        const volumeButton = document.querySelector('.vjs-volume-menu-button');
+        if (!volumeButton) return;
+        const controlBar = volumeButton.parentElement;
+        if (!controlBar) return;
+
+        /** @type {HTMLButtonElement | null} */
+        amplifyButton = controlBar.querySelector('.vjs-amplify-control');
+        if (!amplifyButton) {
+            amplifyButton = document.createElement('button');
+            amplifyButton.className = "vjs-amplify-control vjs-control vjs-button";
+            amplifyButton.type = "button";
+            amplifyButton.title = "Amplify volume";
+
+            const amplifyButtonSpan = document.createElement('span');
+            amplifyButtonSpan.className = "vjs-control-text";
+            amplifyButtonSpan.innerText = "Amplify volume";
+            amplifyButton.appendChild(amplifyButtonSpan);
+
+            amplifyButton.setAttribute('aria-valuemin', '1');
+            amplifyButton.setAttribute('aria-valuemax', `${maxGain}`);
+            updateButton();
+        }
+        // left click
+        amplifyButton.onclick = onAmplifyButtonClick;
+        // right click
+        amplifyButton.oncontextmenu = onAmplifyButtonRightClick;
+        console.log('Amplify button:', amplifyButton);
+
+        controlBar.insertBefore(amplifyButton, volumeButton.nextSibling);
+    }
+
+    function onAmplifyButtonClick() {
+        console.log('Amplifying volume');
+        if (!audioContextGain) return;
+
+        let gain = Math.round(audioContextGain.gain.value);
+        gain = (gain < maxGain) ? (gain + 1) : 1;
+
+        audioContextGain.gain.value = gain;
+        updateButton();
+    }
+
+    /** @param {MouseEvent} e */
+    function onAmplifyButtonRightClick(e) {
+        console.log('Unamplifying volume');
+        if (!audioContextGain) return;
+        e.preventDefault();
+
+        let gain = Math.round(audioContextGain.gain.value);
+        gain = (gain > 1) ? (gain - 1) : maxGain;
+
+        audioContextGain.gain.value = gain;
+        updateButton();
+    }
+
+    function updateButton() {
+        if (!amplifyButton) return;
+        const gain = audioContextGain?.gain.value || 1.0;
+
+        amplifyButton?.setAttribute('aria-valuenow', `${gain}`);
+        amplifyButton?.setAttribute('aria-valuetext', `${gain}`);
+    }
+
+    /** @type {HTMLVideoElement | null} */
+    let video = document.querySelector('video');
+    while (!video) {
+        await new Promise(resolve => setTimeout(resolve, 500));
+        video = document.querySelector('video');
+        console.log('Found video:', video);
+    }
+    console.log('Video found:', video);
+    setupAudioContext();
+    addAmplifyButton();
+})();

src/styles/video.manchester.ac.uk.scss

@@ -195,6 +195,36 @@ video,
   flex: none;
 }
 
+.vjs-amplify-control[aria-valuetext] {
+  background: url("../assets/ear-listen-solid.svg") no-repeat center !important;
+  background-size: 1.3em !important;
+  background-position-y: 40% !important;
+  cursor: pointer;
+  flex: none;
+
+  &::before {
+    all: unset;
+    content: attr(aria-valuetext);
+    display: block;
+    font-size: 1.25em;
+    position: absolute;
+    bottom: 15%;
+    left: 60%;
+  }
+  &[aria-valuetext="1"] {
+    opacity: 0.5;
+    &::before {
+      content: "";
+    }
+  }
+
+  @for $i from 2 through 10 {
+    &[aria-valuetext="#{$i}"] {
+      opacity: calc(0.8 + 0.2 * $i / 10);
+    }
+  }
+}
+
 /* in fullscreen, use a better scaling algorithm */
 :fullscreen video,
 video:fullscreen {