fix: reloadTab actually works now

contributing.md

@@ -957,8 +957,11 @@ The usage and example blocks on each are written in TypeScript but can be used i
 > 
 > ```ts
 > // get the current video time and volume:
-> const { currentTime, volume } = unsafeWindow.BYTM.getVideoElement();
-> console.log("Video time:", currentTime, "Video volume:", volume);
+> const videoElem = unsafeWindow.BYTM.getVideoElement();
+> if(videoElem.readyState && videoElem.readyState >= 2)
+>   console.log("Video time:", videoElem.currentTime, "Video volume:", videoElem.volume);
+> else
+>   console.error("The video element is not ready yet");
 > ```
 > </details>
 

src/features/input.ts

@@ -43,7 +43,7 @@ export async function initArrowKeySkip() {
 
     const vidElem = getVideoElement();
 
-    if(vidElem)
+    if(vidElem && vidElem.readyState > 0)
       vidElem.currentTime = clamp(vidElem.currentTime + skipBy, 0, vidElem.duration);
   });
   log("Added arrow key press listener");
@@ -136,7 +136,7 @@ export async function initNumKeysSkip() {
       return info("Captured valid key to skip video to, but ignored it since this element is currently active:", document.activeElement);
 
     const vidElem = getVideoElement();
-    if(!vidElem)
+    if(!vidElem || vidElem.readyState === 0)
       return warn("Could not find video element, so the keypress is ignored");
 
     const newVidTime = vidElem.duration / (10 / Number(e.key));

src/utils/dom.ts

@@ -13,7 +13,11 @@ document.addEventListener("DOMContentLoaded", () => domLoaded = true);
 //#region vid time & vol.
 
 /** Returns the video element selector string based on the current domain */
-export const getVideoSelector = () => getDomain() === "ytm" ? "ytmusic-player video" : "#player-container ytd-player video";
+export function getVideoSelector() {
+  return getDomain() === "ytm"
+    ? "ytmusic-player video"
+    : "#player-container ytd-player video";
+}
 
 /** Returns the video element based on the current domain */
 export function getVideoElement() {
@@ -44,7 +48,7 @@ export function getVideoTime(precision = 2) {
     try {
       if(getDomain() === "ytm") {
         const vidElem = getVideoElement();
-        if(vidElem)
+        if(vidElem && vidElem.readyState > 0)
           return resolveWithVal(vidElem.currentTime);
 
         addSelectorListener<HTMLProgressElement>("playerBar", "tp-yt-paper-slider#progress-bar tp-yt-paper-progress#sliderBar", {
@@ -54,7 +58,7 @@ export function getVideoTime(precision = 2) {
       }
       else if(getDomain() === "yt") {
         const vidElem = getVideoElement();
-        if(vidElem)
+        if(vidElem && vidElem.readyState > 0)
           return resolveWithVal(vidElem.currentTime);
 
         // YT doesn't update the progress bar when it's hidden (contrary to YTM which never hides it)
@@ -137,7 +141,7 @@ export function waitVideoElementReady(): Promise<HTMLVideoElement> {
   return new Promise(async (res, rej) => {
     try {
       const vidEl = getVideoElement();
-      if(vidEl?.readyState === 4)
+      if(vidEl && (vidEl?.readyState ?? 0) > 0)
         return res(vidEl);
 
       if(!location.pathname.startsWith("/watch"))

src/utils/misc.ts

@@ -1,4 +1,4 @@
-import { compress, decompress, fetchAdvanced, openInNewTab, pauseFor, randomId, randRange, type Prettify } from "@sv443-network/userutils";
+import { compress, decompress, fetchAdvanced, getUnsafeWindow, openInNewTab, pauseFor, randomId, randRange, type Prettify } from "@sv443-network/userutils";
 import { marked } from "marked";
 import { branch, compressionFormat, repo, sessionStorageAvailable } from "../constants.js";
 import { type Domain, type NumberLengthFormat, type ResourceKey, type StringGen } from "../types.js";
@@ -224,28 +224,29 @@ export function formatNumber(num: number, notation?: NumberLengthFormat): string
 
 /** Reloads the tab. If a video is currently playing, its time and volume will be preserved through the URL parameter `time_continue` and `bytm-reload-tab-volume` in GM storage */
 export async function reloadTab() {
+  const win = getUnsafeWindow();
   try {
     enableDiscardBeforeUnload();
 
-    if(getVideoElement()) {
+    if((getVideoElement()?.readyState ?? 0) > 0) {
       const time = (await getVideoTime() ?? 0) - 0.25;
       const volume = Math.round(getVideoElement()!.volume * 100);
 
-      const url = new URL(location.href);
+      const url = new URL(win.location.href);
 
       if(!isNaN(time) && time > 0)
         url.searchParams.set("time_continue", String(time));
       if(!isNaN(volume) && volume > 0)
         await GM.setValue("bytm-reload-tab-volume", String(volume));
 
-      return location.replace(url);
+      return win.location.replace(url);
     }
 
-    location.reload();
+    win.location.reload();
   }
   catch(err) {
     error("Couldn't save video time and volume before reloading tab:", err);
-    location.reload();
+    win.location.reload();
   }
 }