☰

Youtube Compilation Music Controls

Adds support for nexttrack, previoustrack from mediaSession API, as well as shuffle support, for youtube compilation videos with this.currentTrackLists in the description

// ==UserScript==
// @name            Youtube Compilation Music Controls
// @description     Adds support for nexttrack, previoustrack from mediaSession API, as well as shuffle support, for youtube compilation videos with this.currentTrackLists in the description
// @author          Mattwmaster58 <[email protected]>
// @namespace       Mattwmaster58 Scripts
// @match           https://www.youtube.com/*
// @run-at          document-start
// @grant           GM_registerMenuCommand
// @version         0.1
// ==/UserScript==


class YCMC {
  // if we're within this threshold of the track start and a seekPrevious is issued,
  // we go back to the previous track instead of the start of the current track
  static TRACK_START_THRESHOLD = 4;
  static PLAYER_SETUP_QUERY_INTERVAL_MS = 200;
  // anything this or less many tracks will not be considered a compilation
  static NOT_A_COMPILATION_THRESHOLD = 3;
  // if we find this amount of tracks or less, we should continue our search (eg, in the comments)
  static KEEP_SEARCHING_THRESHOLD = 6;
  static COMMENT_SEARCH_LIMIT = 10;

  recentlySeeked;
  shuffleOn;
  VIDEO_ID;
  defaultTrackList;
  currentTrackList;
  videoElement;
  descriptionElement;
  ogNextHandler;
  ogPreviousHandler;

  resetInst() {
    this.recentlySeeked = this.shuffleOn = false;
    this.VIDEO_ID = (location.href.match(
      /(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=|\/user\/\S+|\/ytscreeningroom\?v=|\/sandalsResorts#\w\/\w\/.*\/))([^\/&]{10,12})/
    ) || [null, null])[1];
    this.defaultTrackList =
      this.currentTrackList =
        this.videoElement =
          this.currentTrack =
            this.nextTrack =
              this.ogNextHandler =
                this.ogPreviousHandler =
                  null;
  }

  parseTextForTimings(desc_text) {
    let tracks = [];
    const timings = desc_text.matchAll(
      /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?\D[\s\-:]*(.*)\s*/gim
    );
    [...timings].forEach((match, defaultIndex) => {
      let hh, mm, ss, start;
      [hh, mm, ss] = padArrayStart(
        match.slice(1, 4).filter(Boolean),
        3,
        0
      ).map((x) => parseInt(x, 10));
      start = (hh || 0) * 60 * 60 + (mm || 0) * 60 + ss;
      tracks.push({
        currentIndex: defaultIndex,
        defaultIndex,
        start,
        title: match[4],
      });
    });
    return tracks;
  }

  parseFromAnywhere() {
    let attempts = [];
    this.descriptionElement = document.querySelector(
      "#description yt-formatted-string"
    );
    const vidDesc = this.descriptionElement.textContent;
    _log(`attempted parse of YT description`);
    attempts.push(this.parseTextForTimings(vidDesc));
    // todo: make this trigger a comment loading via scroll events?
    // comments unloaded by default
    if (false && attempts[0].length <= YCMC.KEEP_SEARCHING_THRESHOLD) {
      // don't ask me why there's duplicate IDs
      for (const [idx, commentElem] of document
        .querySelectorAll("#contents #content #content-text")
        .entries()) {
        if (idx >= YCMC.COMMENT_SEARCH_LIMIT) {
          break;
        }
        _log(`attempted parse of comment ${idx}`);
        attempts.push(this.parseTextForTimings(commentElem.textContent));
        if (attempts[idx + 1].length > YCMC.KEEP_SEARCHING_THRESHOLD) {
          return attempts[idx + 1];
        }
      }
    }
    const max = attempts.reduce((prev, current) => {
      return prev.length > current.length ? prev : current;
    });
    if (max.length <= YCMC.NOT_A_COMPILATION_THRESHOLD) {
      _warn(
        `longest sequence of timestamps found was only ${max.length}, which is < ${YCMC.NOT_A_COMPILATION_THRESHOLD}`
      );
      return [];
    } else {
      return max;
    }
  }

  getNowPlaying() {
    const cur_time = this.videoElement.currentTime;
    for (const track of this.defaultTrackList || []) {
      if (track.start > cur_time) {
        return this.defaultTrackList[
          clamp(track.defaultIndex - 1, 0, this.defaultTrackList.length - 1)
          ];
      }
    }
  }

  toggleShuffle() {
    this.shuffleOn = !this.shuffleOn;
    if (this.shuffleOn) {
      _log(`shuffling ${this.currentTrackList.length} tracks`);
      // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
      let track_len = this.currentTrackList.length;
      while (track_len) {
        let idx = Math.floor(Math.random() * track_len--);
        let temp = this.currentTrackList[track_len];
        this.currentTrackList[track_len] = this.currentTrackList[idx];
        this.currentTrackList[idx] = temp;
      }
    } else {
      _log(`unshuffling currently shuffled list`);
      this.currentTrackList = [...this.defaultTrackList];
    }
    [...this.currentTrackList].forEach((track, idx) => {
      track.currentIndex = idx;
    });
  }

  seekTo(track) {
    if (track) {
      _log(`seeking to track ${JSON.stringify(track)}`);
      this.recentlySeeked = true;
      this.currentTrack = track;
      this.nextTrack = null;
      this.videoElement.currentTime = track.start;
      this.setNowPlaying(track);
    } else {
      _warn(`failed to seek. track is undefined`);
    }
  }

  setNowPlaying(track) {
    let nowPlaying = track || this.getNowPlaying();
    _log(`setting up now playing: ${JSON.stringify(nowPlaying)}`);
    if (nowPlaying?.title) {
      navigator.mediaSession.metadata = new MediaMetadata({
        title: nowPlaying.title,
        artist: this.channelName,
        artwork: [
          {
            src: `https://i.ytimg.com/vi/${this.VIDEO_ID}/mqdefault.jpg`,
            sizes: "320x180",
            type: "image/jpeg",
          },
        ],
      });
    }
  }

  seekNext = (event) => this.seekFromCurrent(1, event);
  seekPrevious = (event) => this.seekFromCurrent(-1, event);

  seekFromCurrent(offset, event) {
    const NEXT = 1,
      PREVIOUS = -1;
    _log(
      `received seek ${
        offset === PREVIOUS ? "previous" : "next"
      } command at ${this.videoElement.currentTime}`
    );
    let now_playing = this.getNowPlaying();
    if (now_playing) {
      // if going in reverse and
      if (
        offset === PREVIOUS &&
        this.videoElement.currentTime - now_playing.start >
        YCMC.TRACK_START_THRESHOLD
      ) {
        offset = 0;
      }
      let track = this.currentTrackList[now_playing.currentIndex + offset];
      if (!track) {
        if (offset === PREVIOUS && this.ogPreviousHandler) {
          this.ogPreviousHandler(event);
        } else if (offset === NEXT && this.ogNextHandler) {
          this.ogNextHandler(event);
        }
      }
      this.seekTo(track);
    } else {
      _warn(
        "could not resolve currently playing track, cannot seek relative to it"
      );
    }
  }

  setup() {
    this.defaultTrackList = this.parseFromAnywhere();
    this.currentTrackList = [...this.defaultTrackList];

    _log(`parsed ${this.defaultTrackList.length} tracks`);
    if (this.defaultTrackList.length) {
      GM_registerMenuCommand("shuffle", this.toggleShuffle.bind(this), "s");
      this.videoElement = document.querySelector("video");
      this.channelName = document
        .querySelector("#player ~ #meta .ytd-channel-name a")
        .textContent.trim();

      navigator.mediaSession.setActionHandler(
        "nexttrack",
        this.seekNext,
        true
      );
      navigator.mediaSession.setActionHandler(
        "previoustrack",
        this.seekPrevious,
        true
      );
      this.videoElement.addEventListener(
        "timeupdate",
        this.timeUpdateHandler.bind(this)
      );
      // in the past we've had a one time listener to update on play
      // i don't think this is necessary
    }
  }

  timeUpdateHandler() {
    if (!this.defaultTrackList) {
      return;
    }
    if (!this.currentTrack && !this.nextTrack) {
      this.setNowPlaying();
    }
    this.currentTrack = this.currentTrack || this.getNowPlaying();
    this.nextTrack =
      this.nextTrack ||
      (this.currentTrack &&
        this.defaultTrackList[this.currentTrack.defaultIndex + 1]);
    const curTimeAfterTrackStart =
      this.currentTrack &&
      this.videoElement.currentTime >= this.currentTrack.start;
    const curTimeBeforeNextTrackStart =
      (this.currentTrack &&
        this.nextTrack &&
        this.nextTrack.start > this.videoElement.currentTime) ||
      !this.nextTrack;
    if (
      !this.currentTrack ||
      (curTimeAfterTrackStart && curTimeBeforeNextTrackStart)
    ) {
      return;
    }
    if (this.recentlySeeked) {
      _log("recently seeked, ignoring player head boundary crossing");
      this.recentlySeeked = false;
      return;
    }
    _log(
      `currentTime ${this.videoElement.currentTime} out of range !(${this.currentTrack.start} <= ${this.videoElement.currentTime} < ${this.nextTrack.start}), updating track info`
    );
    if (this.shuffleOn) {
      // go to the next track in the shuffled playlist been shuffled
      _log(`shuffle is currently on, retrieving next track`);
      let next_shuffled_track =
        this.currentTrackList[this.currentTrack.currentIndex + 1];
      this.seekTo(next_shuffled_track);
    } else {
      // otherwise, just let the player progress automatically
      this.currentTrack = this.getNowPlaying();
      this.setNowPlaying(this.currentTrack);
    }
    this.nextTrack = null;
  }

  waitToSetup() {
    this.resetInst();
    _log("waiting for YT Player to load");
    window.setupPoller = window.setInterval(() => {
      if (!this.VIDEO_ID) {
        _log("parsing youtube video ID failed, presuming non-video page");
        window.clearInterval(setupPoller);
        return;
      }
      let descriptionElement = document.querySelector(
        "#description yt-formatted-string"
      );
      if (
        document.querySelector("ytd-watch-flexy") &&
        descriptionElement &&
        descriptionElement !== this.descriptionElement &&
        document.querySelector("video")
      ) {
        _log("found player, setting up");
        this.setup();
        window.clearInterval(setupPoller);
      } else if (descriptionElement) {
        // ie, we have all the elements but aren't confident the page has changed
        const observer = new MutationObserver((mutationsList, observer) => {
          if (mutationsList.length > 0) {
            // typically, takes about 30ms (!!) for the whole list of description span's to be added to the DOM
            // we triple that for safety: we wait 100ms after a childlist mutation happens
            // if another childlist mutation happens in that time period,
            // the current timeout is abandoned and replaced with another 100ms
            if (window.descMutTimeout) {
              window.clearTimeout(window.descMutTimeout);
            }
            window.descMutTimeout = window.setTimeout(() => {
              _log("found player + description, setting up");
              this.setup();
              window.descMutTimeout = null;
            }, 100);
          }
        });
        observer.observe(
          document.querySelector("#description yt-formatted-string"),
          {childList: true}
        );
        // we no longer care about a generic setup poller, watching the description
        // for changes is more effecient and suffices
        window.clearInterval(setupPoller);
      }
    }, YCMC.PLAYER_SETUP_QUERY_INTERVAL_MS);
  }

  hookMediaSessionSetActionHandler() {
    _log(`hooking mediaSession.setActionHandler`);
    const oSetActionHandler =
      window.navigator.mediaSession.setActionHandler.bind(
        window.navigator.mediaSession
      );
    navigator.mediaSession.setActionHandler =
      window.navigator.setActionHandler = (action, handler, friendly) => {
        if (friendly) {
          _log(
            `received friendly setActionHandler call ${action} ${handler}`
          );
          return oSetActionHandler(action, handler);
        }
        if (action === "nexttrack") {
          // noinspection EqualityComparisonWithCoercionJS
          if (this.ogNextHandler != handler) {
            _log(
              `set ogNextHandler from ${this.ogNextHandler} to ${handler}`
            );
          }
          this.ogNextHandler = handler;
        } else if (action === "previoustrack") {
          // noinspection EqualityComparisonWithCoercionJS
          if (this.ogPreviousHandler != handler) {
            _log(
              `set ogPreviousHandler from ${this.ogPreviousHandler} to ${handler}`
            );
          }
          this.ogPreviousHandler = handler;
        } else {
          return oSetActionHandler(action, handler);
        }
      };
  }
}

function clamp(number, min, max) {
  return Math.min(max, Math.max(number, min));
}

function _log(...args) {
  return console.log(...["%c[YCMC]", "color: green", ...args]);
}

function _warn(...args) {
  return console.log(...["%c[YCMC]", "color: yellow", ...args]);
}

// https://stackoverflow.com/a/63856062
function padArrayStart(arr, len, padding) {
  return Array(len - arr.length)
    .fill(padding)
    .concat(arr);
}

let ycmc = new YCMC();
ycmc.hookMediaSessionSetActionHandler();
window.addEventListener("yt-navigate-finish", () => {
  if (!/^\/watch/.test(location.pathname)) {
    _log("nav finished, but not onto watch page, ignoring");
    return;
  }
  ycmc.waitToSetup();
});