☰

Greasy Fork is available in English.

Add Instagram Video Progressbar

Add a video playback progressbar at bottom of an Instagram video. This script also disables video looping and unmute audio. All are configurable in script code. Note: CSP must be disabled for Instagram, or use Tampermonkey.

  1. // ==UserScript==
  2. // @name         Add Instagram Video Progressbar
  3. // @namespace    https://greatest.deepsurf.us/en/users/85671-jcunews
  4. // @version      1.0.8
  5. // @license      GNU AGPLv3
  6. // @author       jcunews
  7. // @description  Add a video playback progressbar at bottom of an Instagram video. This script also disables video looping and unmute audio. All are configurable in script code. Note: CSP must be disabled for Instagram, or use Tampermonkey.
  8. // @match        *://www.instagram.com/*
  9. // @grant        none
  10. // @run-at       document-start
  11. // ==/UserScript==
  12.  
  13. (function(vael, ie, ee, be, wm) {
  14.  
  15.   //===== CONFIGURATION BEGIN =====
  16.  
  17.   var ProgressbarHeight       = 3; //in pixels. set to zero to hide
  18.   var ProgressbarColor        = "#fff"; //e.g. "#fff" or "#e0e0e0" or "cyan"
  19.   var ProgressbarElapsedColor = "#f00";
  20.  
  21.   var disableVideoLoop = true;
  22.   var unmuteVideo      = true;
  23.  
  24.   //===== CONFIGURATION END =====
  25.  
  26.   function setup(a, b) {
  27.     if (disableVideoLoop && !this.attributes.noloop) {
  28.       ie = this.parentNode.parentNode.parentNode.parentNode.lastElementChild;
  29.       this.setAttribute("noloop", "");
  30.       this.parentNode.querySelectorAll('div[role]').forEach(e => {
  31.         Object.keys(e).some(k => {
  32.           if (k.startsWith("__reactProps$")) {
  33.             if (String(e[k].onClick).includes("pause")) e.addEventListener("click", () => this.paused && this.play());
  34.             return true
  35.           }
  36.         })
  37.       })
  38.     }
  39.     a = "aivp" + (new Date()).getTime();
  40.     b = a + "bar";
  41.     ee = document.createElement("DIV");
  42.     ee.id = a;
  43.     ee.innerHTML = `<style>
  44. #${a} { position: absolute; opacity: .66; left: 0; right: 0; bottom: 0; height: ${ProgressbarHeight}px; background: ${ProgressbarColor} }
  45. #${b} { width: 0; transition: width 100ms linear; height: 100%; background: ${ProgressbarElapsedColor} }
  46. </style><div id="${b}"></div>`;
  47.     wm.set(this, be = ee.lastElementChild);
  48.     this.parentNode.insertBefore(ee, this);
  49.     if (unmuteVideo && this.muted) {
  50.       if (location.pathname.startsWith("/stories/")) {
  51.         this.closest('div[style*="width"]')?.parentNode?.closest('div[style*="width"]')?.parentNode?.closest('div[style*="width"]')
  52.           ?.querySelector('div[aria-label="Toggle audio"]')?.click()
  53.       } else {
  54.         this.parentNode.querySelectorAll('button').forEach(e => {
  55.           Object.keys(e).some(k => {
  56.             if (k.startsWith("__reactProps$")) {
  57.               if (String(e[k].onClick).includes("AUDIO_STATES")) e.click();
  58.               return true
  59.             }
  60.           })
  61.         })
  62.       }
  63.     }
  64.     this.removeEventListener("canplay", setup);
  65.   }
  66.   wm = new WeakMap;
  67.   vael = HTMLVideoElement.prototype.addEventListener;
  68.   HTMLVideoElement.prototype.addEventListener = function(type) {
  69.     var res;
  70.     ((ve, tm, be) => {
  71.       function updBar() {
  72.         be.style.width = Math.ceil((ve.currentTime / ve.duration) * ee.offsetWidth) + "px";
  73.       }
  74.       function startTimer(ev) {
  75.         if (!be) be = wm.get(this);
  76.         if (disableVideoLoop) ve.loop = false;
  77.         if (!tm) tm = setInterval(updBar, 100);
  78.       }
  79.       function stopTimer(ev) {
  80.         if (ev.type === "ended") {
  81.           be.style.width = "100%";
  82.           if (disableVideoLoop) ie.click();
  83.         }
  84.         clearInterval(tm);
  85.         tm = 0;
  86.       }
  87.       if (disableVideoLoop && (type === "ended")) return;
  88.       res = vael.apply(ve, arguments);
  89.       if (!ve.attributes["aivp_done"]) {
  90.         ve.setAttribute("aivp_done", "1");
  91.         vael.call(ve, "canplay", setup);
  92.         vael.call(ve, "play", startTimer);
  93.         vael.call(ve, "playing", startTimer);
  94.         vael.call(ve, "waiting", stopTimer);
  95.         vael.call(ve, "pause", stopTimer);
  96.         vael.call(ve, "ended", stopTimer);
  97.       }
  98.     })(this);
  99.     return res;
  100.   };
  101. })();