[userscript] youtube-speed-override: show time remaining + percentage complete when alt/option key is held

Author: 0xdevalias

userscripts/youtube-speed-override/README.md

@@ -3,13 +3,13 @@
 ```javascript
 // ==UserScript==
 // @name          YouTube Speed Override
-// @description   Override the default youtube controls for > and <
+// @description   Override the default youtube controls for > and < and show remaining time when Option key is held
 // @author        Glenn 'devalias' Grant (devalias.net)
 // @homepageURL   https://github.com/0xdevalias/userscripts
 // @supportURL    https://github.com/0xdevalias/userscripts/issues
 // @downloadURL   https://github.com/0xdevalias/userscripts/raw/main/userscripts/youtube-speed-override/youtube-speed-override.user.js
 // @namespace     https://www.devalias.net/
-// @version       1.5
+// @version       1.6
 // @match         https://www.youtube.com/*
 // @grant         GM_getValue
 // @grant         GM_setValue

userscripts/youtube-speed-override/youtube-speed-override.user.js

@@ -1,12 +1,12 @@
 // ==UserScript==
 // @name          YouTube Speed Override
-// @description   Override the default youtube controls for > and <
+// @description   Override the default youtube controls for > and < and show remaining time when Option key is held
 // @author        Glenn 'devalias' Grant (devalias.net)
 // @homepageURL   https://github.com/0xdevalias/userscripts
 // @supportURL    https://github.com/0xdevalias/userscripts/issues
 // @downloadURL   https://github.com/0xdevalias/userscripts/raw/main/userscripts/youtube-speed-override/youtube-speed-override.user.js
 // @namespace     https://www.devalias.net/
-// @version       1.5
+// @version       1.6
 // @match         https://www.youtube.com/*
 // @grant         GM_getValue
 // @grant         GM_setValue
@@ -19,12 +19,14 @@
   'use strict';
 
   const LOG_PREFIX = '[userscript::youtube-speed-override]';
+
   let DEBUG = GM_getValue('isDebugEnabled', false);
+  let isAltKeyPressed = false;
 
   function debugLog(...args) {
     if (!DEBUG) return
 
-    console.log(LOG_PREFIX, ...args);
+    console.log(LOG_PREFIX, ...args, { DEBUG, isAltKeyPressed });
   }
 
   function registerOrUpdateDebugMenuItem() {
@@ -86,6 +88,8 @@
   const videoTimeDisplayDurationSelector =
     '#movie_player .ytp-chrome-bottom .ytp-left-controls .ytp-time-display .ytp-time-duration';
 
+    const durationSpan = await waitForElement('#movie_player .ytp-chrome-bottom .ytp-left-controls .ytp-time-display .ytp-time-duration');
+
   // HACK: Track this internally to prevent weird interactions with the default YouTube handler
   // let videoPlaybackRate = video.playbackRate;
 
@@ -204,30 +208,48 @@
 
   // Function to update the time display with the adjusted length
   function updateAdjustedTimeDisplay() {
-    if (video.playbackRate === 1) return;
+    if (!video.duration) return
+
+    // const originalCurrentTime = formatDuration(video.currentTime);
+    const originalDuration = formatDuration(video.duration);
+
+    // If rate is 1x, only update if alt/option key is pressed, otherwise reset to default
+    if (!isAltKeyPressed && video.playbackRate === 1) {
+      // Avoid updating if it's already the same content (might prevent some mutation handlers from triggering?)
+      if (durationSpan.innerText === originalDuration) return
+
+      durationSpan.innerText = originalDuration
+      return;
+    }
 
-    const durationSpan = document.querySelector(
-      videoTimeDisplayDurationSelector,
+    const adjustedCurrentTime = formatDuration(
+      video.currentTime / video.playbackRate,
+    );
+    const adjustedDuration = formatDuration(
+      video.duration / video.playbackRate,
     );
 
-    if (durationSpan) {
-      // const originalCurrentTime = formatDuration(video.currentTime);
-      const adjustedCurrentTime = formatDuration(
-        video.currentTime / video.playbackRate,
-      );
-
-      const originaDuration = formatDuration(video.duration);
-      const adjustedDuration = formatDuration(
-        video.duration / video.playbackRate,
-      );
-      durationSpan.innerText = `${originaDuration} (${adjustedCurrentTime} / ${adjustedDuration} adjusted for ${video.playbackRate}x playback rate)`;
+    if (!isAltKeyPressed) {
+      durationSpan.innerText = `${originalDuration} (${adjustedCurrentTime} / ${adjustedDuration} adjusted for ${video.playbackRate}x playback rate)`;
+    } else {
+      const remainingTime = video.duration - video.currentTime;
+      const adjustedRemainingTime = formatDuration(remainingTime / video.playbackRate);
+      const percentageComplete = ((video.currentTime / video.duration) * 100).toFixed(2);
+
+      durationSpan.innerText = `${originalDuration} (${adjustedRemainingTime} remaining / ${percentageComplete}% complete; adjusted for ${video.playbackRate}x playback rate)`;
     }
   }
 
   // Override the default controls for > and <
   document.addEventListener(
     'keydown',
     (e) => {
+      debugLog(`keydown event: ${e.key}`)
+
+      if (e.altKey) {
+        isAltKeyPressed = true;
+      }
+
       // TODO: I think this still doesn't properly prevent the default YouTube code from running, so sometimes we increase by more than 0.25
       //   This might be fixed since I added capture: true
       if (e.key === '>') {
@@ -273,6 +295,18 @@
     { capture: true },
   );
 
+  document.addEventListener(
+    'keyup',
+    (e) => {
+      debugLog(`keyup event: ${e.key}`)
+
+      if (!e.altKey) {
+        isAltKeyPressed = false;
+      }
+    },
+    { capture: true },
+  );
+
   video.addEventListener('ratechange', () => {
     // When the video playbackRate changes, update the playback speed in the settings menu to match our custom override
     updateSettingsMenu();