Echo360 Super Speed

Adds faster speed options (4x, 3x) to Echo360 player and allows the user to add their own speed options.
Visit the author's site for support, ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name        Echo360 Super Speed
// @namespace   https://www.petertanner.dev/
// @description Adds faster speed options (4x, 3x) to Echo360 player and allows the user to add their own speed options.
// @include     *://echo360.net.au/*
// @include     *://echo360.org.uk/*
// @include     *://echo360.org/*
// @include     *://echo360.ca/*
// @include     *://echo360.org.au/*
// @version     1.2
// @author      Peter Tanner
// @namespace   https://github.com/peter-tanner/Echo360-Super-Speed-Userscript/
// @supportURL  https://github.com/peter-tanner/Echo360-Super-Speed-Userscript/issues
// @license     GPL-3.0
// @website     https://www.petertanner.dev/
// @run-at      document-start
// ==/UserScript==

/* USER CUSTOMIZATION BEGIN */
// NOTE: Add (or remove) speeds to this array to your liking.
// Note that there is a browser set limit of 16x, and speeds above 4x are muted.
// https://searchfox.org/mozilla-central/rev/f1c881ba5603410dacbe52874053af38bd825c3b/dom/html/HTMLMediascript_Element.cpp#179-183
const selected_speeds = [4, 3, 2, 1.75, 1.5, 1.25, 1, 0.75];
// const selected_speeds = [2, 1.75, 1.5, 1.25, 1, 0.75, 0.5, 0.25]; // Default Echo360 speeds.

// NOTE: Change this to modify how much the speed changes when you use the < or
// > hotkey to change speed
const speed_hotkey_increment = 0.25;
/* USER CUSTOMIZATION END */

// The code in compatible string representation since we are putting strings in
// script tags instead of executing them here.
const speed_code_txt =
  "[" +
  selected_speeds
    .map((speed) => `{label:"${speed}x",value:${speed}}`)
    .join(",") +
  "]";

const max_speed = Math.max(...selected_speeds);
const min_speed = Math.min(...selected_speeds);

// The page contains a script tag which is called after the player bundle
// `echoPlayerV2FullApp.react-bundle.js` is downloaded. This tag is generated
// with the page and contains information about the video (such as the title,
// institution and thumbnail paths) and calls the player with this information.
// This contextual information is stored in the variable to be called after the
// player is modified.
var player_calling_context =
  "console.error('Echo360 super speed failed to load :(')";

new MutationObserver(async (mutations, observer) => {
  let script_elem = mutations
    .flatMap((e) => [...e.addedNodes])
    .filter((e) => e.tagName === "SCRIPT")
    .find((e) => e.src.match(/echoPlayerV2FullApp\.react-bundle\.js/));

  if (script_elem) {
    // Do not load the unmodified player code
    observer.disconnect();
    script_elem.remove();

    // Download the player code for modification...
    await fetch(script_elem.src)
      .then((e) => e.text())
      .then((player_code) => {
        player_code = player_code.replace(
          // Overwrite all previous speeds in case the user wants to remove the
          // default speeds
          '[{label:"2x",value:2},{label:"1.75x",value:1.75},{label:"1.5x",value:1.5},{label:"1.25x",value:1.25},{label:"1x",value:1},{label:"0.75x",value:.75},{label:"0.5x",value:.5},{label:"0.25x",value:.25}]',

          // Replace with our custom speeds
          speed_code_txt
        );

        player_code = player_code.replace(
          // This code handles hotkeys for changing speed, adjust bounds to match new speeds.
          '{key:">",handler:function(){b<2&&I(b+.25)}},{key:"<",handler:function(){b>.25&&I(b-.25)}}',
          `{key:">",handler:function(){b<${max_speed}&&I(b+${speed_hotkey_increment})}},{key:"<",handler:function(){b>${min_speed}&&I(b-${speed_hotkey_increment})}}`
        );

        // Add the player calling context code since this event listener does
        // not block, resulting in the original player calling code being called
        // (with a harmless error, since the player code has not loaded by the
        // time it is called)
        player_code +=
          ";" +
          player_calling_context +
          "; console.log('Echo360 super speed has successfully been loaded :3')";

        // Create a new script tag containing the modified player & add to head
        const new_script = document.createElement("script");
        new_script.type = "text/javascript";
        new_script.textContent = player_code;
        document.getElementsByTagName("head")[0].append(new_script);
      });
  }
}).observe(document, {
  childList: true,
  subtree: true,
});

window.addEventListener(
  "load",
  () => {
    const script_elems = document.getElementsByTagName("script");
    player_calling_context = script_elems[script_elems.length - 1].innerText;
  },
  false
);