Add speed controls to SAP Litmos

speedcontrols.user.js

// ==UserScript==
// @name         Litmos speed controls
// @namespace    [email protected]
// @version      0.2
// @description  Add speed controls to SAP Litmos videos
// @author       Rodrigo Deodoro
// @match        https://*.litmos.com/course/*
// ==/UserScript==

(function () {
  'use strict';
  console.log('Initializing script');
  let done = false;

  const addSpeedControls = () => {
    if (done) {
      return;
    }

    ['1', '1.25', '1.5', '1.75', '2'].forEach((rate) => {
      const iframeContent = document.querySelector('iframe').contentDocument.querySelector('#main-window');
      const toolbar = iframeContent.querySelector('.controls');
      const captionControls = toolbar.querySelector('.caption-controls');
      const btn = document.createElement('button');
      btn.className = 'btn cs-button';
      btn.appendChild(document.createTextNode(`${rate}x`));
      btn.onclick = () => {iframeContent.querySelector('video').playbackRate = rate};
      captionControls.appendChild(btn);
    });
    console.log('Added speed controls');
    done = true;
  };

  const waitForIframe = () => {
    if (done) return;
    console.log('Waiting for insert point...');

    try {
      if (
        !document
          .querySelector('iframe')
          .contentDocument.querySelector('#main-window')
          .querySelector('.caption-controls')
      ) {
        throw Error();
      }
    } catch (e) {
      setTimeout(waitForIframe, 500);
      return;
    }

    addSpeedControls();
  };

  waitForIframe();
})();