☰

4chan WebM Auto-Resume

Resumes playback of paused WebM videos when scrolled into view

// ==UserScript==
// @name         4chan WebM Auto-Resume
// @description  Resumes playback of paused WebM videos when scrolled into view
// @namespace    https://github.com/marktaiwan/
// @homepageURL  https://github.com/marktaiwan/4chan-Webm-Auto-Resume
// @supportURL   https://github.com/marktaiwan/4chan-Webm-Auto-Resume/issues
// @license      MIT
// @version      0.3
// @author       Marker
// @include      *//boards.4chan.org/*
// @include      *//boards.4channel.org/*
// @grant        none
// @noframe
// ==/UserScript==

(function () {
'use strict';
const interval = 100; // millisecond
let lastExecution = Date.now();

function isVisible(ele) {
  const {top, bottom} = ele.getBoundingClientRect();
  return (top > 0 || bottom > 0) && (top < document.documentElement.clientHeight);
}

function pausedByUser(video) {
  return (video.dataset.userPauseState === '1');
}

function pauseHandler(event) {
  const video = event.target;

  // Video is still in view when paused, therefore it's triggered by the user
  if (isVisible(video)) video.dataset.userPauseState = '1';
}

function playHandler(event) {
  const video = event.target;
  if (pausedByUser(video)) video.dataset.userPauseState = '0';
}

function initVideoElement(video) {
  if (video.dataset.userPauseState === undefined) {
    video.dataset.userPauseState = '0';
    video.addEventListener('pause', pauseHandler);
    video.addEventListener('play', playHandler);
  }
}

document.addEventListener('scroll', () => {
  if (Date.now() - lastExecution > interval) {
    window.setTimeout(function () {
      const expandedVideos = document.querySelectorAll('.expandedWebm');
      for (const video of expandedVideos) {
        initVideoElement(video);
        if (video.paused && isVisible(video) && !pausedByUser(video)) {
          video.play().catch(() => {/* noop */});
        }
      }
    }, interval);
    lastExecution = Date.now();
  }
});
})();