Lyrics Page Layout Similar to ProPresenter7 Stage Layout

User Styles
29

The latest beta, AbleSet 2.5.0-beta.1, now supports top-level imports in the custom script. Starting with this version, you can use the following syntax to import modules:

import { textFit } from "./textFit.js";

let observer;

const init = () => {
  const target = document.querySelector(".lyrics-page .lyrics div");

  if (!target) {
    console.log("This doesn't seem to be a lyrics page");
    return;
  }

  const callback = async (mutationList) => {
    const lyrics = document.querySelectorAll(".lyrics-line span");

    lyrics.forEach((el) => {
      el.style.display = "block";
      el.style.width = el.parentElement.clientWidth + "px";
      el.style.height = el.parentElement.clientHeight + "px";
    });

    // maxFontSize can be adjusted if the font becomes too large
    textFit(lyrics, { multiLine: true, maxFontSize: 300 });
  };

  observer = new MutationObserver(callback);
  observer.observe(target, { childList: true });
  callback();

  // Since AbleSet 2.4.0, you have access to real-time updates
  ableset.getSocket("lyrics").on("tracksUpdated", () => {
    setTimeout(callback, 1000);
  });
};

// Keep track of the current URL so we can run
// the script again when navigating to a lyrics page
let lastLocation = "";

setInterval(() => {
  if (location.href !== lastLocation && location.href.includes("/lyrics")) {
    lastLocation = location.href;
    observer?.disconnect();
    init();
  }
}, 1000);
1 Like