Merge remote-tracking branch 'igrigorik/master' into firefox-port

sha-265 · Sep 12, 2022 · c2e93b9 · c2e93b9
2 parents da0eaad + b12e1a7
commit c2e93b9
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 51 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,85 @@
+# Contributing
+
+Video Speed Controller is an open source project licensed under the MIT license
+with many contributors. Contributions are welcome, and greatly appreciated.
+
+If you would like to help, getting started is easy.
+
+## Get Started
+
+1. You must have a github account and be logged in
+2. Fork the repo by clicking the "Fork" link on the top-right corner of the page
+3. Once the fork is ready, clone to your local PC
+
+   ```sh
+   $ git clone https://github.com/<USERNAME>/videospeed.git
+   Cloning into 'videospeed'...
+    remote: Enumerating objects: 10, done.
+    remote: Counting objects: 100% (10/10), done.
+    remote: Compressing objects: 100% (9/9), done.
+    remote: Total 877 (delta 3), reused 2 (delta 1), pack-reused 867
+    Receiving objects: 100% (877/877), 317.65 KiB | 2.17 MiB/s, done.
+    Resolving deltas: 100% (543/543), done.
+   ```
+
+4. Create a branch for your changes
+
+   ```sh
+    $ cd videospeed
+    videospeed$ git checkout -b bugfix/1-fix-double-click
+    M   .github/workflows/chrome-store-upload.yaml
+    M   README.md
+    M   options.js
+    Switched to a new branch 'bugfix/1-fix-double-click'
+    videospeed$
+   ```
+
+5. Open the code in your favorite code editor, make your changes
+
+   ```sh
+   echo "Awesome changes" > somefile.js
+   git add .
+   ```
+
+   > Important: Your commit must be formatted using
+   > [prettier](https://prettier.io/). If it is not it may be autoformatted for
+   > you or your pull request may be rejected.
+
+6. Next, open Chrome/Brave/Chromium and enable developer mode via
+   `Settings > Extensions > Manage Extensions` and toggle `Developer mode` in
+   the top-right corner.
+7. Click `Load unpacked` and browse to the folder you cloned videospeed to.
+8. Try out your changes, make sure they work as expected
+9. Commit and push your changes to github
+
+   ```sh
+   git commit -m "Awesome description of some awesome changes."
+   git push
+   ```
+
+10. Open your branch up on the github website then click `New pull request` and
+    write up a description of your changes.
+
+## Optional
+
+### Run Pre-Commit Checks Locally
+
+Installing [pre-commit](https://pre-commit.com/) is easy to do (click the link
+for instructions on your platform). This repo comes with pre-commit already
+configured. Doing this will ensure that your project is properly formatted and
+runs some very basic tests. Once you have pre-commit installed on your system,
+simply enter `pre-commit install` in your terminal in the folder to have these
+checks run automatically each time you commit.
+
+Even better, after issueing the install command you can now manually run
+pre-commit checks before committing via `pre-commit run --all-files`
+
+### Pull Upstream Changes
+
+You should always be working with the latest version of the tool to make pull
+requests easy. If you want to do this easily, just add a second remote to your
+local git repo like this
+`git remote add upstream https://github.com/igrigorik/videospeed.git`
+
+Now any time you like to pull the latest version in to your local branch you can
+simply issue the command `git pull upstream master`
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 **TL;DR: faster playback translates to better engagement and retention.**
 
-Average adult reads prose text at
+The average adult reads prose text at
 [250 to 300 words per minute](http://www.paperbecause.com/PIOP/files/f7/f7bb6bc5-2c4a-466f-9ae7-b483a2c0dca4.pdf)
 (wpm). By contrast, the average rate of speech for English speakers is ~150 wpm,
 with slide presentations often closer to 100 wpm. As a result, when given the
@@ -21,8 +21,8 @@ if they are forced to return to normal rate of presentation.
 ## Faster HTML5 Video
 
 HTML5 video provides a native API to accelerate playback of any video. The
-problem is, many players either hide, or limit this functionality. For best
-results playback speed adjustments should be easy and frequent to match the pace
+problem is many players either hide or limit this functionality. For the best
+results, playback speed adjustments should be easy and frequent to match the pace
 and content being covered: we don't read at a fixed speed, and similarly, we
 need an easy way to accelerate the video, slow it down, and quickly rewind the
 last point to listen to it a few more times.
@@ -46,19 +46,16 @@ even better, simply use your keyboard:
 - **V** - show/hide the controller.
 
 You can customize and reassign the default shortcut keys in the extensions
-settings page, as well as add additional shortcut keys to match your
-preferences. For example, you can assign multiple different "preferred speed"
-shortcuts with different values, which will allow you to quickly toggle between
-your most commonly used speeds. To add a new shortcut, open extension settings
+settings page as well as add additional shortcut keys to match your
+preferences. As an example, you can assign multiple "preferred speed" shortcuts with different values, allowing you to quickly toggle between your most frequently used speeds. To add a new shortcut, open extension settings
 and click "Add New".
 
 ![settings Add New shortcut](https://user-images.githubusercontent.com/121805/50726471-50242200-1172-11e9-902f-0e5958387617.jpg)
 
-Some sites may assign other functionality to one of the assigned shortcut keys —
-these collisions are inevitable, unfortunately. As a workaround, the extension
+Unfortunately, some sites may assign other functionality to one of the shortcut keys - this is inevitable. As a workaround, the extension
 listens both for lower and upper case values (i.e. you can use
 `Shift-<shortcut>`) if there is other functionality assigned to the lowercase
-key. This is not a perfect solution, as some sites may listen to both, but works
+key. This is not a perfect solution since some sites may listen to both, but it works
 most of the time.
 
 ### FAQ

diff --git a/inject.js b/inject.js
@@ -1,4 +1,5 @@
 var regStrip = /^[\r\t\f\v ]+|[\r\t\f\v ]+$/gm;
+var regEndsWithFlags = /\/(?!.*(.).*\1)[gimsuy]*$/;
 
 var tc = {
   settings: {
@@ -273,8 +274,13 @@ function defineVideoController() {
     log("initializeControls Begin", 5);
     const document = this.video.ownerDocument;
     const speed = this.video.playbackRate.toFixed(2);
-    var top = Math.max(this.video.offsetTop, 0) + "px",
-      left = Math.max(this.video.offsetLeft, 0) + "px";
+    const rect = this.video.getBoundingClientRect();
+    // getBoundingClientRect is relative to the viewport; style coordinates
+    // are relative to offsetParent, so we adjust for that here. offsetParent
+    // can be null if the video has `display: none` or is not yet in the DOM.
+    const offsetRect = this.video.offsetParent?.getBoundingClientRect();
+    const top = Math.max(rect.top - (offsetRect?.top || 0), 0) + "px";
+    const left = Math.max(rect.left - (offsetRect?.left || 0), 0) + "px";
 
     log("Speed variable set to: " + speed, 5);
 
@@ -360,8 +366,9 @@ function defineVideoController() {
         p.insertBefore(fragment, p.firstChild);
         break;
       case location.hostname == "tv.apple.com":
-        // insert after parent for correct stacking context
-        this.parent.getRootNode().querySelector(".scrim").prepend(fragment);
+        // insert before parent to bypass overlay
+        this.parent.parentNode.insertBefore(fragment, this.parent.parentNode.firstChild);
+        break;
       default:
         // Note: when triggered via a MutationRecord, it's possible that the
         // target is not the immediate parent. This appends the controller as
@@ -387,7 +394,17 @@ function isBlacklisted() {
 
     if (match.startsWith("/")) {
       try {
-        var regexp = new RegExp(match);
+        var parts = match.split("/");
+
+        if (regEndsWithFlags.test(match)) {
+          var flags = parts.pop();
+          var regex = parts.slice(1).join("/");
+        } else {
+          var flags = "";
+          var regex = match;
+        }
+
+        var regexp = new RegExp(regex, flags);
       } catch (err) {
         return;
       }
@@ -645,14 +662,18 @@ function initializeNow(document) {
               break;
             case "attributes":
               if (
-                mutation.target.attributes["aria-hidden"] &&
-                mutation.target.attributes["aria-hidden"].value == "false"
+                (mutation.target.attributes["aria-hidden"] &&
+                mutation.target.attributes["aria-hidden"].value == "false")
+                || mutation.target.nodeName === 'APPLE-TV-PLUS-PLAYER'
               ) {
                 var flattenedNodes = getShadow(document.body);
-                var node = flattenedNodes.filter(
+                var nodes = flattenedNodes.filter(
                   (x) => x.tagName == "VIDEO"
-                )[0];
-                if (node) {
+                );
+                for (let node of nodes) {
+                  // only add vsc the first time for the apple-tv case (the attribute change is triggered every time you click the vsc)
+                  if (node.vsc && mutation.target.nodeName === 'APPLE-TV-PLUS-PLAYER')
+                    continue;
                   if (node.vsc)
                     node.vsc.remove();
                   checkForVideo(node, node.parentNode || mutation.target, true);
@@ -666,7 +687,7 @@ function initializeNow(document) {
     );
   });
   observer.observe(document, {
-    attributeFilter: ["aria-hidden"],
+    attributeFilter: ["aria-hidden", "data-focus-method"],
     childList: true,
     subtree: true
   });

diff --git a/options.html b/options.html
@@ -167,7 +167,7 @@ <h3>Other</h3>
           <br />
           <em>
             <a href="https://www.regexpal.com/">Regex</a> is supported.<br />
-            Be sure it is in "//g" format.<br />
+            Be sure to use the literal notation.<br />
             ie: /(.+)youtube\.com(\/*)$/gi
           </em>
         </label>
@@ -186,12 +186,13 @@ <h3>Other</h3>
 
       <h4>Extension controls not appearing?</h4>
       <p>
-        This extension is only compatible with HTML5 audio and video. If you don't
-        see the controls showing up, chances are you are viewing a Flash content.
-        If you want to confirm, try right-clicking on the content and inspect the
-        menu: if it mentions flash, then that's the issue. That said, <b>most sites
-        will fallback to HTML5</b> if they detect that Flash is not available. You
-        can try manually disabling Flash from the browser.
+        This extension is only compatible with HTML5 audio and video. If you
+        don't see the controls showing up, chances are you are viewing a Flash
+        content. If you want to confirm, try right-clicking on the content and
+        inspect the menu: if it mentions flash, then that's the issue. That
+        said, <b>most sites will fallback to HTML5</b> if they detect that Flash
+        is not available. You can try manually disabling Flash plugin in the
+        browser:
       </p>
     </div>
   </body>

diff --git a/options.js b/options.js
@@ -183,22 +183,30 @@ function createKeyBindings(item) {
 function validate() {
   var valid = true;
   var status = document.getElementById("status");
-  document
-    .getElementById("blacklist")
-    .value.split("\n")
-    .forEach((match) => {
-      match = match.replace(regStrip, "");
-      if (match.startsWith("/")) {
-        try {
-          var regexp = new RegExp(match);
-        } catch (err) {
-          status.textContent =
-            "Error: Invalid blacklist regex: " + match + ". Unable to save";
-          valid = false;
-          return;
-        }
+  var blacklist = document.getElementById("blacklist");
+
+  blacklist.value.split("\n").forEach((match) => {
+    match = match.replace(regStrip, "");
+
+    if (match.startsWith("/")) {
+      try {
+        var parts = match.split("/");
+
+        if (parts.length < 3)
+          throw "invalid regex";
+
+        var flags = parts.pop();
+        var regex = parts.slice(1).join("/");
+
+        var regexp = new RegExp(regex, flags);
+      } catch (err) {
+        status.textContent =
+          "Error: Invalid blacklist regex: \"" + match + "\". Unable to save. Try wrapping it in foward slashes.";
+        valid = false;
+        return;
       }
-    });
+    }
+  });
   return valid;
 }
 

diff --git a/shadow.css b/shadow.css
@@ -1,5 +1,5 @@
 * {
-  line-height: 1.9em;
+  line-height: 1.8em;
   font-family: sans-serif;
   font-size: 13px;
 }
@@ -16,8 +16,8 @@
   background: black;
   color: white;
 
-  border-radius: 5px;
-  padding: 5px;
+  border-radius: 6px;
+  padding: 4px;
   margin: 10px 10px 10px 15px;
 
   cursor: default;
@@ -57,17 +57,19 @@
 }
 
 button {
+  opacity: 1;
   cursor: pointer;
   color: black;
   background: white;
-  font-weight: bold;
+  font-weight: normal;
   border-radius: 5px;
-  padding: 3px 6px 3px 6px;
+  padding: 1px 5px 3px 5px;
   font-size: 14px;
   line-height: 14px;
-  border: 1px solid white;
+  border: 0px solid white;
   font-family: "Lucida Console", Monaco, monospace;
-  margin-bottom: 2px;
+  margin: 0px 2px 2px 2px;
+  transition: background 0.2s, color 0.2s;
 }
 
 button:focus {
@@ -76,10 +78,14 @@ button:focus {
 
 button:hover {
   opacity: 1;
+  background: #2196f3;
+  color: #ffffff;
 }
 
 button:active {
-  background: #ccc;
+  background: #2196f3;
+  color: #ffffff;
+  font-weight: bold;
 }
 
 button.rw {