BetterYTM-Mirror/src/siteEvents.ts

import { createNanoEvents } from "nanoevents";
import { error, info } from "./utils";
import { FeatureConfig } from "./types";
import { emitInterface } from "./interface";
import { addSelectorListener } from "./observers";

export interface SiteEventsMap {
  // misc:
  /** Emitted whenever the feature config is changed - initialization is not counted */
  configChanged: (config: FeatureConfig) => void;
  // TODO: implement
  /** Emitted whenever a config option is changed - contains the old and new value */
  configOptionChanged: <TKey extends keyof FeatureConfig>(key: TKey, oldValue: FeatureConfig[TKey], newValue: FeatureConfig[TKey]) => void;
  /** Emitted whenever the config menu should be rebuilt, like when a config was imported */
  rebuildCfgMenu: (config: FeatureConfig) => void;
  /** Emitted whenever the config menu should be unmounted and recreated in the DOM */
  recreateCfgMenu: () => void;
  /** Emitted whenever the config menu is closed */
  cfgMenuClosed: () => void;
  /** Emitted when the welcome menu is closed */
  welcomeMenuClosed: () => void;
  /** Emitted whenever the user interacts with a hotkey input, used so other keyboard input event listeners don't get called while mid-input */
  hotkeyInputActive: (active: boolean) => void;

  // DOM:
  /** Emitted whenever child nodes are added to or removed from the song queue */
  queueChanged: (queueElement: HTMLElement) => void;
  /** Emitted whenever child nodes are added to or removed from the autoplay queue underneath the song queue */
  autoplayQueueChanged: (queueElement: HTMLElement) => void;
  /**
   * Emitted whenever the current song title changes.  
   * Uses the DOM element `yt-formatted-string.title` to detect changes and emit instantaneously.  
   * If `oldTitle` is `null`, this is the first song played in the session.
   */
  songTitleChanged: (newTitle: string, oldTitle: string | null) => void;
  /**
   * Emitted whenever the current song's watch ID changes.  
   * If `oldId` is `null`, this is the first song played in the session.
   */
  watchIdChanged: (newId: string, oldId: string | null) => void;
  /**
   * Emitted whenever the URL path (`location.pathname`) changes.  
   * If `oldPath` is `null`, this is the first path in the session.
   */
  pathChanged: (newPath: string, oldPath: string | null) => void;
  /** Emitted whenever the player enters or exits fullscreen mode */
  fullscreenToggled: (isFullscreen: boolean) => void;
}

/** Array of all site events */
export const allSiteEvents = [
  "configChanged",
  "configOptionChanged",
  "rebuildCfgMenu",
  "recreateCfgMenu",
  "cfgMenuClosed",
  "welcomeMenuClosed",
  "hotkeyInputActive",
  "queueChanged",
  "autoplayQueueChanged",
  "songTitleChanged",
  "watchIdChanged",
  "pathChanged",
  "fullscreenToggled",
] as const;

/** EventEmitter instance that is used to detect changes to the site */
export const siteEvents = createNanoEvents<SiteEventsMap>();

let observers: MutationObserver[] = [];

/** Disconnects and deletes all observers. Run `initSiteEvents()` again to create new ones. */
export function removeAllObservers() {
  observers.forEach((observer, i) => {
    observer.disconnect();
    delete observers[i];
  });
  observers = [];
}

let lastWatchId: string | null = null;
let lastPathname: string | null = null;
let lastFullscreen: boolean;

/** Creates MutationObservers that check if parts of the site have changed, then emit an event on the `siteEvents` instance. */
export async function initSiteEvents() {
  try {
    //#region queue
    // the queue container always exists so it doesn't need an extra init function
    const queueObs = new MutationObserver(([ { addedNodes, removedNodes, target } ]) => {
      if(addedNodes.length > 0 || removedNodes.length > 0) {
        info(`Detected queue change - added nodes: ${[...addedNodes.values()].length} - removed nodes: ${[...removedNodes.values()].length}`);
        emitSiteEvent("queueChanged", target as HTMLElement);
      }
    });

    // only observe added or removed elements
    addSelectorListener("sidePanel", "#contents.ytmusic-player-queue", {
      listener: (el) => {
        queueObs.observe(el, {
          childList: true,
        });
      },
    });

    const autoplayObs = new MutationObserver(([ { addedNodes, removedNodes, target } ]) => {
      if(addedNodes.length > 0 || removedNodes.length > 0) {
        info(`Detected autoplay queue change - added nodes: ${[...addedNodes.values()].length} - removed nodes: ${[...removedNodes.values()].length}`);
        emitSiteEvent("autoplayQueueChanged", target as HTMLElement);
      }
    });

    addSelectorListener("sidePanel", "ytmusic-player-queue #automix-contents", {
      listener: (el) => {
        autoplayObs.observe(el, {
          childList: true,
        });
      },
    });

    //#region player bar

    let lastTitle: string | null = null;

    addSelectorListener("playerBarInfo", "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}"`);
        emitSiteEvent("songTitleChanged", newTitle, oldTitle);
      },
    });

    info("Successfully initialized SiteEvents observers");

    observers = observers.concat([
      queueObs,
      autoplayObs,
    ]);

    //#region player

    const playerFullscreenObs = new MutationObserver(([{ target }]) => {
      const isFullscreen = (target as HTMLElement).getAttribute("player-ui-state")?.toUpperCase() === "FULLSCREEN";
      if(lastFullscreen !== isFullscreen || typeof lastFullscreen === "undefined") {
        emitSiteEvent("fullscreenToggled", isFullscreen);
        lastFullscreen = isFullscreen;
      }
    });

    addSelectorListener("mainPanel", "ytmusic-player#player", {
      listener: (el) => {
        playerFullscreenObs.observe(el, {
          attributeFilter: ["player-ui-state"],
        });
      },
    });

    //#region other

    const runIntervalChecks = () => {
      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;
        }
      }

      if(location.pathname !== lastPathname) {
        emitSiteEvent("pathChanged", String(location.pathname), lastPathname);
        lastPathname = String(location.pathname);
      }
    };

    window.addEventListener("bytm:ready", () => {
      runIntervalChecks();
      setInterval(runIntervalChecks, 100);
    }, {
      once: true,
    });
  }
  catch(err) {
    error("Couldn't initialize SiteEvents observers due to an error:\n", err);
  }
}

let bytmReady = false;
window.addEventListener("bytm:ready", () => bytmReady = true, { once: true });

/** Emits a site event with the given key and arguments - if `bytm:ready` has not been emitted yet, all events will be queued until it is */
export function emitSiteEvent<TKey extends keyof SiteEventsMap>(key: TKey, ...args: Parameters<SiteEventsMap[TKey]>) {
  if(!bytmReady) {
    window.addEventListener("bytm:ready", () => {
      bytmReady = true;
      emitSiteEvent(key, ...args);
    }, { once: true });
    return;
  }
  siteEvents.emit(key, ...args);
  emitInterface(`bytm:siteEvent:${key}`, args as unknown as undefined);
}