// ==UserScript==
// @name         Add YouTube Video Progress
// @namespace    https://greasyfork.org/en/users/85671-jcunews
// @version      1.0.9
// @license      GNU AGPLv3
// @description  Add progress bar at bottom of YouTube video and progress text on the video page. Additionally, shows the video title at top left of screen when the video control bar is being shown and while in fullscreen mode.
// @author       jcunews
// @match        https://www.youtube.com/*
// @grant        none
// @run-at       document-start
// @downloadURL none
// ==/UserScript==

//===== Configuration Start =====
var progressbarHeight       = 3; //in pixels
var progressbarColor        = "#fff"; //e.g. "#fff" or "#e0e0e0" or "cyan"
var progressbarElapsedColor = "#f00";
var contentLoadProcessDelay = 0; //number of milliseconds before processing dynamically loaded contents (increase if slow network/browser)

var fullscreenVideoTitle          = true;
var fullscreenVideoTitleFontSize  = "14pt"; //e.g. "14pt" or "24px"
var fullscreenVideoTitleFontColor = "#fff";
//===== Configuration End =====

var timerWaitInfo, timerProgressMonitor, timerWaitPlayer, timerDoubleCheck, playerManager;

function processInfo() {
  if (window.vidprogress || (location.pathname !== "/watch")) return;
  clearTimeout(timerWaitInfo);
  (function waitInfo(a, b) {
    if (a = document.querySelector("#info-contents #info, #watch7-user-header")) {
      b = document.createElement("SPAN");
      b.id = "vidprogress";
      b.innerHTML = '<span id="curq" style="font-weight:500"></span><span id="curtime" style="margin-left:2ex"></span>';
      b.style.cssText = "border:1px solid #ccc;border-radius:4px;padding:2px 5px;background:#eee;";
      if (window["body-container"]) {
        b.style.cssText += "margin-left:2ex";
        a.appendChild(b);
      } else {
        b.style.cssText += "margin-left:2ex;font-size:10pt";
        a.insertBefore(b, a.querySelector("#flex"));
      }
    } else timerWaitInfo = setTimeout(waitInfo, 200);
  })();
}

function processPlayer() {
  function zerolead(n){
    return n > 9 ? n : "0" + n;
  }

  function sec2hms(sec) {
   var c = sec % 60, d = Math.floor(sec / 60);
   return (d >= 60 ? zerolead(Math.floor(d / 60)) + ":" : "") + zerolead(d % 60) + ":" + zerolead(c);
  }

  function updProgress(a, b, c, ls){
    a = window.movie_player;
    if (a && window.vidprogress2b && a.getCurrentTime) try {
      if (window.curtime) {
        b = a.getPlaybackQuality();
        switch (b) {
          case "light":
          case "tiny":    c =  "144p"; break;
          case "small":   c =  "240p"; break;
          case "medium":  c =  "360p"; break;
          case "large":   c =  "480p"; break;
          case "highres": c = "4320p"; break;
          default:
            if (ls = b.match(/^hd(\d+)/)) {
              c = ls[1] + "p";
            } else c = b;
        }
        curq.textContent = c;
        curq.title = b;
      }
      b = a.getCurrentTime();
      if (b >= 0) {
        ls = a.getDuration();
        if (!a.getVideoData().isLive) {
          if (window.curtime) {
            curtime.textContent = sec2hms(Math.floor(b)) + " / " + sec2hms(Math.floor(ls)) + " (" + Math.floor(b * 100 / ls) + "%)";
          }
          vidprogress2b.style.width = Math.ceil((b / ls) * vidprogress2.offsetWidth) + "px";
        } else {
          if (window.curtime) {
            curtime.textContent = "LIVE";
          }
          vidprogress2b.style.width = "100%";
        }
      } else {
        if (window.curtime) {
          curq.textContent = "";
          curtime.textContent = "";
        }
        vidprogress2b.style.width = "0px";
        if (fullscreenVideoTitle) vidtitle.textContent = "";
      }
    }catch(a){
      if (window.curtime) {
        curq.textContent = "[???]";
        curtime.textContent = "???";
      }
      vidprogress2b.style.width = "0px";
      if (fullscreenVideoTitle) vidtitle.textContent = "";
    }
  }

  function resumeProgressMonitor() {
    if (timerProgressMonitor) return;
    updProgress();
    timerProgressMonitor = setInterval(updProgress, 200);
  }

  function pauseProgressMonitor() {
    clearInterval(timerProgressMonitor);
    timerProgressMonitor = 0;
    updProgress();
  }

  clearInterval(timerProgressMonitor);
  timerProgressMonitor = 0;
  clearTimeout(timerWaitPlayer);
  timerWaitPlayer = 0;
  clearInterval(timerDoubleCheck);
  timerDoubleCheck = 0;
  (function waitPlayer() {
    if (!window.vidprogress2 && window.movie_player && (a = movie_player.parentNode.querySelector("video"))) {
      b = document.createElement("DIV");
      b.id = "vidprogress2";
      b.style.cssText = "opacity:.66;position:absolute;z-index:10;bottom:0;width:100%;height:" + progressbarHeight + "px;background:" + progressbarColor;
      b.innerHTML = '<div id="vidprogress2b" style="height:100%;background:' + progressbarElapsedColor + '"></div>';
      movie_player.appendChild(b);
      if (movie_player.getPlayerState() === 1) {
        resumeProgressMonitor();
      }
      //useful: onLoadedMetadata(), onStateChange(state), onPlayVideo(info), onReady(playerApi), onVideoAreaChange(), onVideoDataChange(info)
      //states: -1=notReady, 0=ended, 1=playing, 2=paused, 3=ready, 4=???, 5=notAvailable?
      movie_player.addEventListener("onLoadedMetadata", resumeProgressMonitor);
      movie_player.addEventListener("onStateChange", function(state) {
        if (state === 1) {
          resumeProgressMonitor();
        } else pauseProgressMonitor();
      });
      if (fullscreenVideoTitle) {
        b = document.createElement("DIV");
        b.id = "vidtitle";
        b.textContent = movie_player.getVideoData().title;
        b.style.cssText = "margin-left:.5ex;color:" + fullscreenVideoTitleFontColor + ";font-size:" + fullscreenVideoTitleFontSize + ";text-shadow:0 0 1em black,0 0 1em black,0 0 1em black,0 0 1em black";
        document.querySelector("#movie_player>.ytp-gradient-top").appendChild(b);
        if (!playerManager) {
          (function waitPlayerManager(a) {
            if (a = document.querySelector("yt-player-manager")) {
              a.listened_ayvp = true;
              a.addEventListener("yt-player-updated", function() {
                vidtitle.textContent = movie_player.getVideoData().title;
              });
            } else setTimeout(waitPlayerManager, 200);
          })();
        }
      }
    } else timerWaitPlayer = setTimeout(waitPlayer, 200);
  })();

  function doubleCheck() {
    if (window.movie_player && movie_player.getPlayerState) {
      if (movie_player.getPlayerState() === 1) {
        resumeProgressMonitor();
      } else pauseProgressMonitor();
    }
  }
  if (!timerDoubleCheck) timerDoubleCheck = setInterval(doubleCheck, 500);
}

addEventListener("yt-page-data-updated", processInfo);
addEventListener("yt-player-released", processPlayer);
addEventListener("load", function() {
  processInfo();
  processPlayer();
});
addEventListener("spfprocess", function() {
  setTimeout(function() {
    processInfo();
    processPlayer();
  }, contentLoadProcessDelay);
});