Merge pull request #604 from ChadBailey/bugfix/584-twitch-not-working

Added ratechange cooldown to fix #72 #521 and #584
2025-08-21 18:08:46 -04:00 · 2020-03-22 12:08:26 -05:00
parent 5a53f81cba b4f6bcc292
commit b1cc599812
5 changed files with 184 additions and 69 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ local

 # IntelliJ IDEA
 .idea/
+node_modules
--- a/inject.js
+++ b/inject.js
@@ -18,10 +18,41 @@ var tc = {
      vine.co
      imgur.com
      teams.microsoft.com
-      `.replace(regStrip, "")
+    `.replace(regStrip, ""),
+    defaultLogLevel: 4,
+    logLevel: 3
  }
 };

+/* Log levels (depends on caller specifying the correct level)
+  1 - none
+  2 - error
+  3 - warning
+  4 - info
+  5 - debug
+  6 - debug high verbosity + stack trace on each message
+*/
+function log(message, level) {
+  verbosity = tc.settings.logLevel;
+  if (typeof level === "undefined") {
+    level = tc.settings.defaultLogLevel;
+  }
+  if (verbosity >= level) {
+    if (level === 2) {
+      console.log("ERROR:" + message);
+    } else if (level === 3) {
+      console.log("WARNING:" + message);
+    } else if (level === 4) {
+      console.log("INFO:" + message);
+    } else if (level === 5) {
+      console.log("DEBUG:" + message);
+    } else if (level === 6) {
+      console.log("DEBUG (VERBOSE):" + message);
+      console.trace();
+    }
+  }
+}
+
 chrome.storage.sync.get(tc.settings, function(storage) {
  tc.settings.keyBindings = storage.keyBindings; // Array
  if (storage.keyBindings.length == 0) {
@@ -132,56 +163,54 @@ function defineVideoController() {
    this.id = Math.random()
      .toString(36)
      .substr(2, 9);
-
-    // settings.speeds[] ensures that same source used across video tags (e.g. fullscreen on YT) retains speed setting
-    // this.speed is a controller level variable that retains speed setting across source switches (e.g. video quality, playlist change)
-    this.speed = 1.0;
-
+    storedSpeed = tc.settings.speeds[target.currentSrc];
    if (!tc.settings.rememberSpeed) {
-      if (!tc.settings.speeds[target.currentSrc]) {
-        tc.settings.speeds[target.currentSrc] = this.speed;
+      if (!storedSpeed) {
+        log(
+          "Overwriting stored speed to 1.0 due to rememberSpeed being disabled",
+          5
+        );
+        storedSpeed = 1.0;
      }
      setKeyBindings("reset", getKeyBindings("fast")); // resetSpeed = fastSpeed
    } else {
-      tc.settings.speeds[target.currentSrc] = tc.settings.lastSpeed;
+      log("Recalling stored speed due to rememberSpeed being enabled", 5);
+      storedSpeed = tc.settings.lastSpeed;
    }

-    target.playbackRate = tc.settings.speeds[target.currentSrc];
+    log("Explicitly setting playbackRate to: " + storedSpeed, 5);
+    target.playbackRate = storedSpeed;

    this.div = this.initializeControls();

    target.addEventListener(
      "play",
      (this.handlePlay = function(event) {
+        storedSpeed = tc.settings.speeds[event.target.currentSrc];
        if (!tc.settings.rememberSpeed) {
-          if (!tc.settings.speeds[target.currentSrc]) {
-            tc.settings.speeds[target.currentSrc] = this.speed;
+          if (!storedSpeed) {
+            log(
+              "Overwriting stored speed to 1.0 (rememberSpeed not enabled)",
+              4
+            );
+            storedSpeed = 1.0;
          }
+          // resetSpeed isn't really a reset, it's a toggle
+          log("Setting reset keybinding to fast", 5);
          setKeyBindings("reset", getKeyBindings("fast")); // resetSpeed = fastSpeed
        } else {
-          tc.settings.speeds[target.currentSrc] = tc.settings.lastSpeed;
-        }
-        target.playbackRate = tc.settings.speeds[target.currentSrc];
-      }.bind(this))
+          log(
+            "Storing lastSpeed into tc.settings.speeds (rememberSpeed enabled)",
+            5
          );
-
-    target.addEventListener(
-      "ratechange",
-      (this.handleRatechange = function(event) {
-        // Ignore ratechange events on unitialized videos.
-        // 0 == No information is available about the media resource.
-        if (event.target.readyState > 0) {
-          var speed = this.getSpeed();
-          this.speedIndicator.textContent = speed;
-          tc.settings.speeds[this.video.currentSrc] = speed;
-          tc.settings.lastSpeed = speed;
-          this.speed = speed;
-          chrome.storage.sync.set({ lastSpeed: speed }, function() {
-            console.log("Speed setting saved: " + speed);
-          });
-          // show the controller for 1000ms if it's hidden.
-          runAction("blink", document, null, null);
+          storedSpeed = tc.settings.lastSpeed;
        }
+        // TODO: Check if explicitly setting the playback rate to 1.0 is
+        // necessary when rememberSpeed is disabled (this may accidentally
+        // override a website's intentional initial speed setting interfering
+        // with the site's default behavior)
+        log("Explicitly setting playbackRate to: " + storedSpeed, 4);
+        event.target.playbackRate = storedSpeed;
      }.bind(this))
    );

@@ -209,26 +238,22 @@ function defineVideoController() {
    });
  };

-  tc.videoController.prototype.getSpeed = function() {
-    return parseFloat(this.video.playbackRate).toFixed(2);
-  };
-
  tc.videoController.prototype.remove = function() {
    this.div.remove();
    this.video.removeEventListener("play", this.handlePlay);
-    this.video.removeEventListener("ratechange", this.handleRatechange);
    delete this.video.dataset["vscid"];
    delete this.video.vsc;
  };

  tc.videoController.prototype.initializeControls = function() {
+    log("initializeControls Begin", 5);
    var document = this.document;
-    var speed = parseFloat(tc.settings.speeds[this.video.currentSrc]).toFixed(
-        2
-      ),
+    var speed = this.video.playbackRate.toFixed(2),
      top = Math.max(this.video.offsetTop, 0) + "px",
      left = Math.max(this.video.offsetLeft, 0) + "px";

+    log("Speed variable set to: " + speed, 5);
+
    var wrapper = document.createElement("div");
    wrapper.classList.add("vsc-controller");
    wrapper.dataset["vscid"] = this.id;
@@ -306,13 +331,13 @@ function defineVideoController() {
  };
 }

-function initializeWhenReady(document) {
-  escapeStringRegExp.matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g;
-  function escapeStringRegExp(str) {
-    return str.replace(escapeStringRegExp.matchOperatorsRe, "\\$&");
-  }
+function escapeStringRegExp(str) {
+  matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g;
+  return str.replace(matchOperatorsRe, "\\$&");
+}

-  var blacklisted = false;
+function isBlacklisted() {
+  blacklisted = false;
  tc.settings.blacklist.split("\n").forEach(match => {
    match = match.replace(regStrip, "");
    if (match.length == 0) {
@@ -334,9 +359,60 @@ function initializeWhenReady(document) {
      return;
    }
  });
+  return blacklisted;
+}

-  if (blacklisted) return;
+var coolDown = false;
+function refreshCoolDown() {
+  log("Begin refreshCoolDown", 5);
+  if (coolDown) {
+    clearTimeout(coolDown);
+  }
+  coolDown = setTimeout(function() {
+    coolDown = false;
+  }, 1000);
+  log("End refreshCoolDown", 5);
+}

+function setupListener() {
+  document.body.addEventListener(
+    "ratechange",
+    function(event) {
+      if (coolDown) {
+        log("Speed event propagation blocked", 4);
+        event.stopImmediatePropagation();
+      }
+      var controller = event.target.parentElement.querySelector(
+        ".vsc-controller"
+      );
+      var speedIndicator = controller.shadowRoot.querySelector("span");
+      var video = controller.parentElement.querySelector("video");
+      var src = video.currentSrc;
+      var speed = video.playbackRate.toFixed(2);
+
+      log("Playback rate changed to " + speed, 4);
+
+      log("Updating controller with new speed", 5);
+      speedIndicator.textContent = speed;
+      tc.settings.speeds[src] = speed;
+      log("Storing lastSpeed in settings for the rememberSpeed feature", 5);
+      tc.settings.lastSpeed = speed;
+      log("Syncing chrome settings for lastSpeed", 5);
+      chrome.storage.sync.set({ lastSpeed: speed }, function() {
+        log("Speed setting saved: " + speed, 5);
+      });
+      // show the controller for 1000ms if it's hidden.
+      runAction("blink", document, null, null);
+    },
+    true
+  );
+}
+
+function initializeWhenReady(document) {
+  log("Begin initializeWhenReady", 5);
+  if (isBlacklisted()) {
+    return;
+  }
  window.onload = () => {
    initializeNow(window.document);
  };
@@ -351,6 +427,7 @@ function initializeWhenReady(document) {
      };
    }
  }
+  log("End initializeWhenReady", 5);
 }
 function inIframe() {
  try {
@@ -388,12 +465,19 @@ function getController(id) {
 }

 function initializeNow(document) {
+  log("Begin initializeNow", 5);
  if (!tc.settings.enabled) return;
  // enforce init-once due to redundant callers
  if (!document.body || document.body.classList.contains("vsc-initialized")) {
    return;
  }
+  try {
+    setupListener();
+  } catch {
+    // no operation
+  }
  document.body.classList.add("vsc-initialized");
+  log("initializeNow: vsc-initialized added to document body", 5);

  if (document === window.document) {
    defineVideoController();
@@ -414,6 +498,7 @@ function initializeNow(document) {
      "keydown",
      function(event) {
        var keyCode = event.keyCode;
+        log("Processing keydown event: " + keyCode, 6);

        // Ignore if following modifier is active.
        if (
@@ -425,6 +510,7 @@ function initializeNow(document) {
          event.getModifierState("Hyper") ||
          event.getModifierState("OS")
        ) {
+          log("Keydown event ignored due to active modifier: " + keyCode, 5);
          return;
        }

@@ -502,8 +588,10 @@ function initializeNow(document) {
              });
              break;
            case "attributes":
-              if (mutation.target.attributes["aria-hidden"] &&
-                mutation.target.attributes["aria-hidden"].value == "false") {
+              if (
+                mutation.target.attributes["aria-hidden"] &&
+                mutation.target.attributes["aria-hidden"].value == "false"
+              ) {
                var flattenedNodes = getShadow(document.body);
                var node = flattenedNodes.filter(x => x.tagName == "VIDEO")[0];
                if (node) {
@@ -549,9 +637,19 @@ function initializeNow(document) {
    }
    initializeWhenReady(childDocument);
  });
+  log("End initializeNow", 5);
+}
+
+function setSpeed(controller, video, speed) {
+  log("setSpeed started: " + speed, 5);
+  var speedvalue = speed.toFixed(2);
+  video.playbackRate = Number(speedvalue);
+  refreshCoolDown();
+  log("setSpeed finished: " + speed, 5);
 }

 function runAction(action, document, value, e) {
+  log("runAction Begin", 5);
  if (tc.settings.audioBoolean) {
    var mediaTags = getShadow(document.body).filter(x => {
      return x.tagName == "AUDIO" || x.tagName == "VIDEO";
@@ -582,28 +680,35 @@ function runAction(action, document, value, e) {

    if (!v.classList.contains("vsc-cancelled")) {
      if (action === "rewind") {
+        log("Rewind", 5);
        v.currentTime -= value;
      } else if (action === "advance") {
+        log("Fast forward", 5);
        v.currentTime += value;
      } else if (action === "faster") {
+        log("Increase speed", 5);
        // Maximum playback speed in Chrome is set to 16:
        // https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/html/media/html_media_element.cc?gsn=kMinRate&l=166
        var s = Math.min(
          (v.playbackRate < 0.1 ? 0.0 : v.playbackRate) + value,
          16
        );
-        v.playbackRate = Number(s.toFixed(2));
+        setSpeed(controller, v, s);
      } else if (action === "slower") {
+        log("Decrease speed", 5);
        // Video min rate is 0.0625:
        // https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/html/media/html_media_element.cc?gsn=kMinRate&l=165
        var s = Math.max(v.playbackRate - value, 0.07);
-        v.playbackRate = Number(s.toFixed(2));
+        setSpeed(controller, v, s);
      } else if (action === "reset") {
-        resetSpeed(v, 1.0);
+        log("Reset speed", 5);
+        resetSpeed(v, controller, 1.0);
      } else if (action === "display") {
+        log("Showing controller", 5);
        controller.classList.add("vsc-manual");
        controller.classList.toggle("vsc-hidden");
      } else if (action === "blink") {
+        log("Showing controller momentarily", 5);
        // if vsc is hidden, show it briefly to give the use visual feedback that the action is excuted.
        if (
          controller.classList.contains("vsc-hidden") ||
@@ -622,7 +727,7 @@ function runAction(action, document, value, e) {
      } else if (action === "drag") {
        handleDrag(v, controller, e);
      } else if (action === "fast") {
-        resetSpeed(v, value);
+        resetSpeed(v, controller, value);
      } else if (action === "pause") {
        pause(v);
      } else if (action === "muted") {
@@ -634,31 +739,37 @@ function runAction(action, document, value, e) {
      }
    }
  });
+  log("runAction End", 5);
 }

 function pause(v) {
  if (v.paused) {
+    log("Resuming video", 5);
    v.play();
  } else {
+    log("Pausing video", 5);
    v.pause();
  }
 }

-function resetSpeed(v, target) {
+function resetSpeed(v, controller, target) {
  if (v.playbackRate === target) {
    if (v.playbackRate === getKeyBindings("reset")) {
-      // resetSpeed
      if (target !== 1.0) {
-        v.playbackRate = 1.0;
+        log("Resetting playback speed to 1.0", 4);
+        setSpeed(controller, v, 1.0);
      } else {
-        v.playbackRate = getKeyBindings("fast"); // fastSpeed
+        log('Toggling playback speed to "fast" speed', 4);
+        setSpeed(controller, v, getKeyBindings("fast"));
      }
    } else {
-      v.playbackRate = getKeyBindings("reset"); // resetSpeed
+      log('Toggling playback speed to "reset" speed', 4);
+      setSpeed(controller, v, getKeyBindings("reset"));
    }
  } else {
-    setKeyBindings("reset", v.playbackRate); // resetSpeed
-    v.playbackRate = target;
+    log('Toggling playback speed to "reset" speed', 4);
+    setKeyBindings("reset", v.playbackRate);
+    setSpeed(controller, v, target);
  }
 }

@@ -667,10 +778,12 @@ function muted(v, value) {
 }

 function setMark(v) {
+  log("Adding marker", 5);
  v.vsc.mark = v.currentTime;
 }

 function jumpToMark(v) {
+  log("Recalling marker", 5);
  if (v.vsc.mark && typeof v.vsc.mark === "number") {
    v.currentTime = v.vsc.mark;
  }
@@ -723,6 +836,7 @@ function handleDrag(video, controller, e) {
 var timer;
 var animation = false;
 function showController(controller) {
+  log("Showing controller", 4);
  controller.classList.add("vcs-show");

  if (animation) clearTimeout(timer);
@@ -731,5 +845,6 @@ function showController(controller) {
  timer = setTimeout(function() {
    controller.classList.remove("vcs-show");
    animation = false;
+    log("Hiding controller", 5);
  }, 2000);
 }
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
  "name": "Video Speed Controller",
  "short_name": "videospeed",
-  "version": "0.6.0",
+  "version": "0.6.1",
  "manifest_version": 2,
  "description": "Speed up, slow down, advance and rewind any HTML5 video with quick shortcuts.",
  "homepage_url": "https://github.com/igrigorik/videospeed",
@@ -29,7 +29,6 @@
        "https://plus.google.com/hangouts/*",
        "https://hangouts.google.com/*",
        "https://meet.google.com/*",
-        "https://teamtreehouse.com/*",
        "http://www.hitbox.tv/*"
      ],
      "css": ["inject.css"],
--- a/options.html
+++ b/options.html
@@ -160,11 +160,11 @@
          >Blacklisted sites on which extension is disabled<br />
          (one per line)<br />
          <br />
-          <em
-            ><a href="https://www.regexpal.com/">Regex</a> is supported. Be sure
+          <em>
+            <a href="https://www.regexpal.com/">Regex</a> is supported. Be sure
            it is in "//g" format.<br />
-            ie: /(.+)youtube\.com(\/*)$/gi</em
-          >
+            ie: /(.+)youtube\.com(\/*)$/gi
+          </em>
        </label>
        <textarea id="blacklist" rows="10" cols="50"></textarea>
      </div>
--- a/options.js
+++ b/options.js
@@ -191,7 +191,7 @@ function validate() {
          var regexp = new RegExp(match);
        } catch (err) {
          status.textContent =
-            "Error: Invalid Regex: " + match + ". Unable to save";
+            "Error: Invalid blacklist regex: " + match + ". Unable to save";
          valid = false;
          return;
        }