☰

Always video progress bar on anime1

Enable progress bar on anime1

  1. // ==UserScript==
  2. // @name         Always video progress bar on anime1
  3. // @namespace    https://github.com/gslin/always-video-progress-bar-on-anime1
  4. // @version      0.20210508.0
  5. // @description  Enable progress bar on anime1
  6. // @author       Gea-Suan Lin <darkkiller@gmail.com>
  7. // @match        https://anime1.me/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.   'use strict';
  14.  
  15.   // Only \d+ will match.
  16.   if (!document.location.pathname.match(/^\/\d+/)) {
  17.     return;
  18.   }
  19.  
  20.   const bar = document.createElement('div');
  21.   bar.style = 'background: #000; display: block; height: 5px; margin: 0; padding: 0; position: relative; width: 100%;';
  22.  
  23.   const loadedbar = document.createElement('div');
  24.   loadedbar.style = 'background: #777; display: block; height: 5px; margin: 0; padding: 0; position: absolute; width: 100%;';
  25.   bar.appendChild(loadedbar);
  26.  
  27.   const progressbar = document.createElement('div');
  28.   progressbar.style = 'background: red; display: block; height: 5px; margin: 0; padding: 0; position: absolute; width: 100%; z-index: 1;';
  29.   bar.appendChild(progressbar);
  30.  
  31.   const vjscontainer = document.querySelector('.vjscontainer');
  32.   vjscontainer.appendChild(bar);
  33.  
  34.   const ob = new window.MutationObserver(() => {
  35.     const vjs = document.querySelector('.video-js');
  36.     if (!vjs || !vjs.classList.contains('vjs-playing')) {
  37.       return;
  38.     }
  39.  
  40.     const v = document.querySelector('video.vjs-tech');
  41.     if (!v) {
  42.       return;
  43.     }
  44.  
  45.     v.addEventListener('progress', () => {
  46.       loadedbar.style.width = (100 * v.buffered.end(0) / v.duration) + '%';
  47.     });
  48.     v.addEventListener('timeupdate', () => {
  49.       progressbar.style.width = (100 * v.currentTime / v.duration) + '%';
  50.     });
  51.  
  52.     ob.disconnect();
  53.   });
  54.  
  55.   ob.observe(document, {
  56.     childList: true,
  57.     subtree: true,
  58.   });
  59. })();