fix: set volume on tab load

src/features/volume.ts

@@ -1,6 +1,6 @@
 import { addGlobalStyle, addParent, type Stringifiable } from "@sv443-network/userutils";
 import { getFeatures } from "../config";
-import { error, onSelectorOld, resourceToHTMLString, t } from "../utils";
+import { error, log, onSelectorOld, resourceToHTMLString, t, waitVideoElementReady } from "../utils";
 import { siteEvents } from "../siteEvents";
 import { featInfo } from ".";
 import "./volume.css";
@@ -216,7 +216,8 @@ export async function volumeSharedBetweenTabsDisabled() {
 //#MARKER initial volume
 
 /** Sets the volume slider to a set volume level when the session starts */
-function setInitialTabVolume(sliderElem: HTMLInputElement) {
+async function setInitialTabVolume(sliderElem: HTMLInputElement) {
+  await waitVideoElementReady();
   const initialVol = getFeatures().initialTabVolumeLevel;
   if(getFeatures().volumeSharedBetweenTabs) {
     lastCheckedSharedVolume = ignoreVal = initialVol;
@@ -225,4 +226,5 @@ function setInitialTabVolume(sliderElem: HTMLInputElement) {
   }
   sliderElem.value = String(initialVol);
   sliderElem.dispatchEvent(new Event("change", { bubbles: true }));
+  log(`Set initial tab volume to ${initialVol}%`);
 }

src/index.ts

@@ -1,5 +1,5 @@
 import { addGlobalStyle, compress, decompress, type Stringifiable } from "@sv443-network/userutils";
-import { initOnSelector, warn } from "./utils";
+import { domLoaded, initOnSelector, warn } from "./utils";
 import { clearConfig, getFeatures, initConfig } from "./config";
 import { buildNumber, compressionFormat, defaultLogLevel, mode, scriptInfo } from "./constants";
 import { error, getDomain, info, getSessionId, log, setLogLevel, initTranslations, setLocale } from "./utils";
@@ -55,7 +55,6 @@ import {
   console.log();
 }
 
-let domLoaded = false;
 const domain = getDomain();
 
 /** Stuff that needs to be called ASAP, before anything async happens */
@@ -77,10 +76,6 @@ function preInit() {
 
 async function init() {
   try {
-    document.addEventListener("DOMContentLoaded", () => {
-      domLoaded = true;
-    });
-
     const features = await initConfig();
     setLogLevel(features.logLevel);
 
@@ -95,7 +90,7 @@ async function init() {
       disableBeforeUnload();
 
     if(!domLoaded)
-      document.addEventListener("DOMContentLoaded", onDomLoad);
+      document.addEventListener("DOMContentLoaded", onDomLoad, { once: true });
     else
       onDomLoad();
 

src/utils/dom.ts

@@ -1,8 +1,8 @@
-//#SECTION video time
-
 import { getUnsafeWindow } from "@sv443-network/userutils";
 import { error, getDomain, onSelectorOld } from ".";
 
+//#MARKER video time & volume
+
 export const videoSelector = getDomain() === "ytm" ? "ytmusic-player video" : "#content ytd-player video";
 
 /**
@@ -101,6 +101,29 @@ function ytForceShowVideoTime() {
   return true;
 }
 
+/** Waits for the video element to be in its readyState 4 / canplay state and returns it */
+export function waitVideoElementReady(): Promise<HTMLVideoElement> {
+  return new Promise((res) => {
+    onSelectorOld<HTMLVideoElement>(videoSelector, {
+      listener: async (vidElem) => {
+        if(vidElem) {
+          // this is just after YT has finished doing their own shenanigans with the video time and volume
+          if(vidElem.readyState === 4)
+            res(vidElem);
+          else
+            vidElem.addEventListener("canplay", () => res(vidElem), { once: true });
+        }
+      },
+    });
+  });
+}
+
+//#MARKER other
+
+/** Whether the DOM has finished loading and elements can be added or modified */
+export let domLoaded = false;
+document.addEventListener("DOMContentLoaded", () => domLoaded = true);
+
 /** Removes all child nodes of an element without invoking the slow-ish HTML parser */
 export function clearInner(element: Element) {
   while(element.hasChildNodes())