Domů Procházet Nápověda
Přihlásit se
Sv443
/
BetterYTM-Mirror
zrcadlo https://github.com/Sv443/BetterYTM.git
1
0
Rozštěpit 0
Soubory
Procházet zdrojové kódy

ref: rename global observers & add more siteEvents

Sv443 před 1 rokem
rodič
270ad0bcb3
revize
3f74b9da34
2 změnil soubory, kde provedl 71 přidání a 16 odebrání
Jednotné zobrazení Ukázat statistiku rozdílových dat
  1. 12 11
      src/observers.ts
  2. 59 5
      src/siteEvents.ts

+ 12 - 11
src/observers.ts
Zobrazit soubor 

@@ -8,47 +8,48 @@ const defaultObserverOptions: SelectorObserverOptions = {
 
   defaultDebounce: 100,
 
   defaultDebounce: 100,
 
 };
 
 };
 
 
 
-export const observers = {} as Record<ObserverName, SelectorObserver>;
 
+/** Global SelectorObserver instances usable throughout the script for improved performance */
 
+export const globservers = {} as Record<ObserverName, SelectorObserver>;
 
 
 
 /** Call after DOM load to initialize all SelectorObserver instances */
 
 /** Call after DOM load to initialize all SelectorObserver instances */
 
 export function initObservers() {
 
 export function initObservers() {
 
   try {
 
   try {
 
     // #SECTION body = the entire <body> element - use sparingly due to performance impacts!
 
     // #SECTION body = the entire <body> element - use sparingly due to performance impacts!
 
-    observers.body = new SelectorObserver(document.body, {
 
+    globservers.body = new SelectorObserver(document.body, {
 
       ...defaultObserverOptions,
 
       ...defaultObserverOptions,
 
       subtree: false,
 
       subtree: false,
 
     });
 
     });
 
-    observers.body.enable();
 
+    globservers.body.enable();
 
 
 
     // #SECTION playerBar = media controls bar at the bottom of the page
 
     // #SECTION playerBar = media controls bar at the bottom of the page
 
     const playerBarSelector = "ytmusic-app-layout ytmusic-player-bar.ytmusic-app";
 
     const playerBarSelector = "ytmusic-app-layout ytmusic-player-bar.ytmusic-app";
 
-    observers.playerBar = new SelectorObserver(playerBarSelector, {
 
+    globservers.playerBar = new SelectorObserver(playerBarSelector, {
 
       ...defaultObserverOptions,
 
       ...defaultObserverOptions,
 
       defaultDebounce: 200,
 
       defaultDebounce: 200,
 
     });
 
     });
 
-    observers.body.addListener(playerBarSelector, {
 
+    globservers.body.addListener(playerBarSelector, {
 
       listener: () => {
 
       listener: () => {
 
         log("#DBG-UU enabling playerBar observer");
 
         log("#DBG-UU enabling playerBar observer");
 
-        observers.playerBar.enable();
 
+        globservers.playerBar.enable();
 
       },
 
       },
 
     });
 
     });
 
 
 
     // #SECTION playerBarInfo = song title, artist, album, etc. inside the player bar
 
     // #SECTION playerBarInfo = song title, artist, album, etc. inside the player bar
 
     const playerBarInfoSelector = `${playerBarSelector} .middle-controls .content-info-wrapper`;
 
     const playerBarInfoSelector = `${playerBarSelector} .middle-controls .content-info-wrapper`;
 
-    observers.playerBarInfo = new SelectorObserver(playerBarInfoSelector, {
 
+    globservers.playerBarInfo = new SelectorObserver(playerBarInfoSelector, {
 
       ...defaultObserverOptions,
 
       ...defaultObserverOptions,
 
       attributes: true,
 
       attributes: true,
 
       attributeFilter: ["title"],
 
       attributeFilter: ["title"],
 
     });
 
     });
 
-    observers.playerBarInfo.addListener(playerBarInfoSelector, {
 
+    globservers.playerBarInfo.addListener(playerBarInfoSelector, {
 
       listener: () => {
 
       listener: () => {
 
         log("#DBG-UU enabling playerBarTitle observer");
 
         log("#DBG-UU enabling playerBarTitle observer");
 
-        observers.playerBarInfo.enable();
 
+        globservers.playerBarInfo.enable();
 
       },
 
       },
 
     });
 
     });
 
 
 
     // #DEBUG example: listen for title change:
 
     // #DEBUG example: listen for title change:
 
-    observers.playerBarInfo.addListener("yt-formatted-string.title", {
 
+    globservers.playerBarInfo.addListener("yt-formatted-string.title", {
 
       continuous: true,
 
       continuous: true,
 
       listener: (titleElem) => {
 
       listener: (titleElem) => {
 
         log("#DBG-UU >>>>> title changed", titleElem.title);
 
         log("#DBG-UU >>>>> title changed", titleElem.title);
 
@@ -64,5 +65,5 @@ export function initObservers() {
 
 
 
 /** Interface function for adding listeners to the already present observers */
 
 /** Interface function for adding listeners to the already present observers */
 
 export function addSelectorListener<TElem extends Element>(observerName: ObserverName, selector: string, options: SelectorListenerOptions<TElem>) {
 
 export function addSelectorListener<TElem extends Element>(observerName: ObserverName, selector: string, options: SelectorListenerOptions<TElem>) {
 
-  observers[observerName].addListener(selector, options);
 
+  globservers[observerName].addListener(selector, options);
 
 }
 
 }

+ 59 - 5
src/siteEvents.ts
Zobrazit soubor 

@@ -1,7 +1,8 @@
 
 import { createNanoEvents } from "nanoevents";
 
 import { createNanoEvents } from "nanoevents";
 
-import { error, info } from "./utils";
 
+import { error, info, onSelectorOld } from "./utils";
 
 import { FeatureConfig } from "./types";
 
 import { FeatureConfig } from "./types";
 
 import { emitInterface } from "./interface";
 
 import { emitInterface } from "./interface";
 
+import { globservers } from "./observers";
 
 
 
 export interface SiteEventsMap {
 
 export interface SiteEventsMap {
 
   // misc:
 
   // misc:
 
@@ -24,6 +25,15 @@ export interface SiteEventsMap {
 
   queueChanged: (queueElement: HTMLElement) => void;
 
   queueChanged: (queueElement: HTMLElement) => void;
 
   /** Emitted whenever child nodes are added to or removed from the autoplay queue underneath the song queue */
 
   /** Emitted whenever child nodes are added to or removed from the autoplay queue underneath the song queue */
 
   autoplayQueueChanged: (queueElement: HTMLElement) => void;
 
   autoplayQueueChanged: (queueElement: HTMLElement) => void;
 
+  /**
 
+   * Emitted whenever the current song title changes
 
+   * @param newTitle The new song title
 
+   * @param oldTitle The old song title, or `null` if no previous title was found
 
+   * @param initialPlay Whether this is the first played song
 
+   */
 
+  songTitleChanged: (newTitle: string, oldTitle: string | null, initialPlay: boolean) => void;
 
+  /** Emitted whenever the current song's watch ID changes */
 
+  watchIdChanged: (newId: string, oldId: string | null) => void;
 
 }
 
 }
 
 
 
 /** Array of all site events */
 
 /** Array of all site events */
 
@@ -36,6 +46,8 @@ export const allSiteEvents = [
 
   "hotkeyInputActive",
 
   "hotkeyInputActive",
 
   "queueChanged",
 
   "queueChanged",
 
   "autoplayQueueChanged",
 
   "autoplayQueueChanged",
 
+  "songTitleChanged",
 
+  "watchIdChanged",
 
 ] as const;
 
 ] as const;
 
 
 
 /** EventEmitter instance that is used to detect changes to the site */
 
 /** EventEmitter instance that is used to detect changes to the site */
 
@@ -65,8 +77,12 @@ export async function initSiteEvents() {
 
     });
 
     });
 
 
 
     // only observe added or removed elements
 
     // only observe added or removed elements
 
-    queueObs.observe(document.querySelector("#side-panel #contents.ytmusic-player-queue")!, {
 
-      childList: true,
 
+    onSelectorOld("#side-panel #contents.ytmusic-player-queue", {
 
+      listener: (el) => {
 
+        queueObs.observe(el, {
 
+          childList: true,
 
+        });
 
+      },
 
     });
 
     });
 
 
 
     const autoplayObs = new MutationObserver(([ { addedNodes, removedNodes, target } ]) => {
 
     const autoplayObs = new MutationObserver(([ { addedNodes, removedNodes, target } ]) => {
 
@@ -76,8 +92,31 @@ export async function initSiteEvents() {
 
       }
 
       }
 
     });
 
     });
 
 
 
-    autoplayObs.observe(document.querySelector("#side-panel ytmusic-player-queue #automix-contents")!, {
 
-      childList: true,
 
+    onSelectorOld("#side-panel ytmusic-player-queue #automix-contents", {
 
+      listener: (el) => {
 
+        autoplayObs.observe(el, {
 
+          childList: true,
 
+        });
 
+      },
 
+    });
 
+
 
+    //#SECTION player bar
 
+
 
+    let lastTitle: string | null = null;
 
+    let initialPlay = true;
 
+
 
+    globservers.playerBarInfo.addListener("yt-formatted-string.title", {
 
+      continuous: true,
 
+      listener: (titleElem) => {
 
+        const oldTitle = lastTitle;
 
+        const newTitle = titleElem.textContent;
 
+        if(newTitle === lastTitle || !newTitle)
 
+          return;
 
+        lastTitle = newTitle;
 
+        info(`Detected song change - old title: "${oldTitle}" - new title: "${newTitle}" - initial play: ${initialPlay}`);
 
+        emitSiteEvent("songTitleChanged", newTitle, oldTitle, initialPlay);
 
+        initialPlay = false;
 
+      },
 
     });
 
     });
 
 
 
     info("Successfully initialized SiteEvents observers");
 
     info("Successfully initialized SiteEvents observers");
 
@@ -86,6 +125,21 @@ export async function initSiteEvents() {
 
       queueObs,
 
       queueObs,
 
       autoplayObs,
 
       autoplayObs,
 
     ]);
 
     ]);
 
+
 
+    //#SECTION other
 
+
 
+    let lastWatchId: string | null = null;
 
+
 
+    setInterval(() => {
 
+      if(location.pathname.startsWith("/watch")) {
 
+        const newWatchId = new URL(location.href).searchParams.get("v");
 
+        if(newWatchId && newWatchId !== lastWatchId) {
 
+          info(`Detected watch ID change - old ID: "${lastWatchId}" - new ID: "${newWatchId}"`);
 
+          emitSiteEvent("watchIdChanged", newWatchId, lastWatchId);
 
+          lastWatchId = newWatchId;
 
+        }
 
+      }
 
+    }, 200);
 
   }
 
   }
 
   catch(err) {
 
   catch(err) {
 
     error("Couldn't initialize SiteEvents observers due to an error:\n", err);
 
     error("Couldn't initialize SiteEvents observers due to an error:\n", err);