Demuxed 2020 enhancements

demuxed-plus-plus.js

// Instructions:
//
// 1. Tune in to Demuxed 2020
// 2. Open your JS console
// 3. Move to the context of the iframe called "conf"
// 4. Check that document.querySelector('video') returns something,
//    and if not, go back to step 3
// 5. Copy and paste all this mess into your JS console
// 6. You now have playback rate and skip controls
//
// Share and enjoy!
// -Joey

const video = document.querySelector('video');

const overlay = document.createElement('div');
document.body.appendChild(overlay);
overlay.style.width = '80%';
overlay.style.height = '100px';
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '200px';
overlay.style.display = 'flex';
overlay.style.flexDirection = 'column';
overlay.style.paddingRight = '5%';
overlay.style.fontSize = '90%';

const liveDelta = document.createElement('div');
overlay.appendChild(liveDelta);
liveDelta.style.alignSelf = 'flex-end';
setInterval(() => {
  const delta = video.duration - video.currentTime;
  liveDelta.textContent = `${delta.toFixed(1)}s from live`;

  if (delta < 3) {
    liveDelta.style.color = 'red';
  } else {
    liveDelta.style.color = '';
  }

  if (delta < 1) {
    video.playbackRate = 1;
  }
}, 250);

const rateContainer = document.createElement('div');
overlay.appendChild(rateContainer);
rateContainer.style.alignSelf = 'flex-end';
rateContainer.style.display = 'flex';

const rateLabel = document.createTextNode('playback rate:\xa0\xa0');
rateContainer.appendChild(rateLabel);

const rateSelector = document.createElement('input');
rateContainer.appendChild(rateSelector);
rateSelector.style.width = '10vw';
rateSelector.style.padding = '0 8px';
rateSelector.style.margin = '0';
rateSelector.style.fontSize = '90%';
rateSelector.type = 'number';
rateSelector.step = 0.1;
rateSelector.value = video.playbackRate;
rateSelector.addEventListener('input', () => {
  video.playbackRate = rateSelector.valueAsNumber;
});
video.addEventListener('ratechange', () => {
  rateSelector.value = video.playbackRate;
});
video.addEventListener('waiting', () => {
  video.playbackRate = 1;
});

const skipContainer = document.createElement('div');
overlay.appendChild(skipContainer);
skipContainer.style.alignSelf = 'flex-end';
skipContainer.style.display = 'flex';

const skipBack = document.createElement('button');
skipContainer.appendChild(skipBack);
skipBack.style.fontSize = '90%';
skipBack.style.width = '30px';
skipBack.style.height = '30px';
skipBack.style.borderRadius = '5px';
skipBack.style.marginRight = '20px';
skipBack.style.backgroundImage = 'url("data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTUxMS4yOSA0NDEuNTljLTI4LjE5MS05OS4wNjctMzkuNTMxLTE3MS40Ni0xMjEuMi0yMzkuNDItNDEuMjk3LTM0LjM2OC05MC41NjQtNTYuNDc4LTE0My4yOS02NC40Mzl2LTcxLjkxYzAtMTMuMjMtMTQuNzA3LTIxLjIwNC0yNS43OTYtMTMuOTk0bC0yMTMuNDMgMTM4LjgzYy0xMC4xMDkgNi41NzUtMTAuMTE0IDIxLjQwOSAwIDI3Ljk4N2wyMTMuNDMgMTM4LjgzYzExLjA4OSA3LjIxMyAyNS43OTYtMC43NjggMjUuNzk2LTEzLjk5NHYtNjYuMjY1YzExOS41NiAxNi4xMzkgMTY1LjcgOTIuMjA3IDIzNS4zOSAxNzkuMzggMTEuMjgxIDE0LjExIDM0LjA5NyAyLjU4NyAyOS4wOTUtMTQuOTkzem0tNzAuMzc4LTkwLjExNmMtNTEuMzEtNjQuMTc2LTEyNy43NS0xMDQuMDQtMjA5LjcyLTEwOS4zNi0wLjM2Mi0wLjAyMy0wLjcyMi0wLjAzNS0xLjA4My0wLjAzNS05LjIwNSAwLTE2LjY5NCA3LjQ2OC0xNi42OTQgMTYuNjk0djUzLjkyNWwtMTY2LjEyLTEwOC4wNiAxNjYuMTItMTA4LjA2djU1Ljg3M2MwIDguNTg1IDYuNTExIDE1Ljc3IDE1LjA1MyAxNi42MTQgMTAwLjc5IDkuOTUyIDE5MS44NyA3NC44ODUgMjI4IDIwMS44NmwtMTUuNTU5LTE5LjQ2NHoiLz48L3N2Zz4=")';
skipBack.addEventListener('click', () => video.currentTime -= 10);

const skipForward = document.createElement('button');
skipContainer.appendChild(skipForward);
skipForward.style.fontSize = '90%';
skipForward.style.width = '30px';
skipForward.style.height = '30px';
skipForward.style.borderRadius = '5px';
skipForward.style.backgroundImage = skipBack.style.backgroundImage;
skipForward.style.transform = 'scaleX(-1)';
skipForward.addEventListener('click', () => video.currentTime += 5);