fix: arrow key skip (#18)

README.md

@@ -8,14 +8,17 @@ Configurable layout and UX improvements for YouTube Music
 <br>
 
 ### Features:
+All of these features can be toggled and configured!
 - Input:
     - Use arrow keys to skip forward or backward by 10 seconds
-    - Switch between YouTube and YouTube Music on a video by pressing a hotkey (F9 by default)
+    - Switch between YouTube and YouTube Music on a video by pressing a hotkey (F9 by default) <!-- TODO: make configurable -->
     - TODO: Automatically dismiss "are you still there" popup
 - Layout:
+    - Open any song's lyrics on genius.com which generally has higher quality than YouTube's providers
+    - TODO: Quick actions on songs in a queue, to open their lyrics or remove them from the queue
     - Remove the "Upgrade to YT Music Premium" tab in the title bar
     - Set a custom size and step resolution for the volume slider
-    - Quickly open any song's lyrics on genius.com
+    - TODO: Improvements to clickability of song titles and thumbnails (to open them in a new tab better)
   
 ... and more!
 

dev/ytForceShowVideoTime.js

@@ -0,0 +1,32 @@
+// caveats:
+// only works once for some reason (should be enough tho)
+
+const player = document.querySelector("#movie_player");
+player.dispatchEvent(new MouseEvent("mouseenter", {
+  view: window,
+  bubbles: true,
+  cancelable: false,
+}));
+
+const { x, y, width, height } = player.getBoundingClientRect();
+const screenY = Math.round(y + height / 2);
+const screenX = x + Math.min(50, Math.round(width / 3));
+
+player.dispatchEvent(new MouseEvent("mousemove", {
+  view: window,
+  bubbles: true,
+  cancelable: false,
+  screenY,
+  screenX,
+  movementX: 5,
+  movementY: 0
+}));
+console.log("x:", screenX, "y:", screenY);
+
+setTimeout(() => {
+  player.dispatchEvent(new MouseEvent("mouseleave", {
+    view: window,
+    bubbles: true,
+    cancelable: false,
+  }));
+}, 4000);

package.json

@@ -9,10 +9,9 @@
   "type": "module",
   "scripts": {
     "test": "npm run node-ts -- ./test.ts",
-    "build": "webpack",
+    "build": "tsc && webpack",
     "post-build": "npm run node-ts -- ./src/tools/post-build.ts",
     "serve": "npm run node-ts -- ./src/tools/serve.ts",
-    "serve-old": "http-server -s -c 5 -p 8710 .",
     "watch": "nodemon --exec \"npm run build && npm run serve\"",
     "lint": "tsc --noEmit && eslint .",
     "node-ts": "node --no-warnings=ExperimentalWarning --enable-source-maps --loader ts-node/esm"

src/features/input.ts

@@ -35,6 +35,7 @@ function onKeyDown(evt: KeyboardEvent) {
       cancelable: true,
       isTrusted: true,
       repeat: false,
+      view: window,
     };
 
     let invalidKey = false;

src/features/layout.ts

@@ -106,7 +106,7 @@ export function setVolSliderStep() {
 export function initQueueButtons() {
   siteEvents.on("queueChanged", (evt) => {
     for(const queueItm of ((evt.data as HTMLElement).childNodes as NodeListOf<HTMLElement>)) {
-      if(!queueItm.dataset["bytm-has-queue-btns"])
+      if(!queueItm.classList.contains("bytm-has-queue-btns"))
         addQueueButtons(queueItm);
     }
   });
@@ -141,4 +141,5 @@ function addQueueButtons(queueItem: HTMLElement) {
 
   const songInfo = queueItem.querySelector(".song-info")!;
   songInfo.appendChild(queueBtnsCont);
+  queueItem.classList.add("bytm-has-queue-btns");
 }

src/utils.ts

@@ -20,20 +20,37 @@ export function getDomain(): Domain {
 }
 
 /**
- * TODO: this is entirely broken now
  * Returns the current video time in seconds
+ * @param force Set to true to dispatch mouse movement events in case the video time can't be estimated
  * @returns Returns null if the video time is unavailable
  */
-export function getVideoTime() {
+export function getVideoTime(force = false) {
   const domain = getDomain();
 
   try {
     if(domain === "ytm") {
       const pbEl = document.querySelector("#progress-bar") as HTMLProgressElement;
-      return pbEl.value ?? null;
+      return !isNaN(Number(pbEl.value)) ? Number(pbEl.value) : null;
+    }
+    else if(domain === "yt") {
+      // YT doesn't update the progress bar when it's hidden (YTM doesn't hide it) so TODO: come up with some solution here
+
+      // Possible solution:
+      // - Use MutationObserver to detect when attributes of progress bar (selector `div.ytp-progress-bar[role="slider"]`) change
+      // - Wait until the attribute increments, then save the value of `aria-valuenow` and the current system time to memory
+      // - When site switch hotkey is pressed, take saved `aria-valuenow` value and add the difference between saved system time and current system time
+      //   - If no value is present, use the script from `dev/ytForceShowVideoTime.js` to simulate mouse movement to force the element to update
+      // - Subtract one or two seconds to make up for rounding errors
+      // - profit
+
+      // if(!ytCurrentVideoTime) {
+      //   ytForceShowVideoTime();
+      //   const videoTime = document.querySelector("#TODO")?.getAttribute("aria-valuenow") ?? null;
+      // }
+      void [ force, ytForceShowVideoTime ];
+
+      return null;
     }
-    else if(domain === "yt") // YT doesn't update the progress bar when it's hidden (YTM doesn't hide it) so TODO: come up with some solution here
-      return 0;
 
     return null;
   }
@@ -43,6 +60,43 @@ export function getVideoTime() {
   }
 }
 
+/** Sends events that force the video controls to become visible for about 3 seconds */
+function ytForceShowVideoTime() {
+  const player = document.querySelector("#movie_player");
+  if(!player)
+    return false;
+
+  player.dispatchEvent(new MouseEvent("mouseenter", {
+    view: window,
+    bubbles: true,
+    cancelable: false,
+  }));
+
+  const { x, y, width, height } = player.getBoundingClientRect();
+  const screenY = Math.round(y + height / 2);
+  const screenX = x + Math.min(50, Math.round(width / 3));
+
+  player.dispatchEvent(new MouseEvent("mousemove", {
+    view: window,
+    bubbles: true,
+    cancelable: false,
+    screenY,
+    screenX,
+    movementX: 5,
+    movementY: 0
+  }));
+
+  setTimeout(() => {
+    player.dispatchEvent(new MouseEvent("mouseleave", {
+      view: window,
+      bubbles: true,
+      cancelable: false,
+    }));
+  }, 4000);
+
+  return true;
+}
+
 //#SECTION DOM
 
 /**