Add YouTube Video Progress

Add progress bar at bottom of YouTube video and progress text on the video page.
当前为 2018-02-04 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Add YouTube Video Progress
// @namespace    https://gf.qytechs.cn/en/users/85671-jcunews
// @version      1.0.2
// @description  Add progress bar at bottom of YouTube video and progress text on the video page.
// @author       jcunews
// @match        https://www.youtube.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

addEventListener("yt-page-data-updated", function() {
  if (window.vidprogress || (location.pathname !== "/watch")) return;
  (function waitInfo(a, b) {
    if (a = document.querySelector("#info-contents #info")) {
      b = document.createElement("SPAN");
      b.id = "vidprogress";
      b.innerHTML = '<span id="curq"></span><span id="curtime" style="margin-left:2ex"></span>';
      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 setTimeout(waitInfo, 200);
  })();
});

addEventListener("yt-player-released", function(timerProgressMonitor) {
  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 && a.getCurrentTime) try {
      if (window.curtime) {
        b = a.getPlaybackQuality();
        switch (b) {
          case "small":  b = "240px"; break;
          case "medium": b = "360px"; break;
          case "large":  b = "480px"; break;
          case "hd720":  b = "720px"; break;
          case "hd1080": b = "1080px"; break;
        }
        curq.textContent = "[" + b + "]";
      }
      b = a.getPlayerState();
      if ((b >= 1) && (b <= 3)) {
        ls = a.getDuration();
        if (!a.getVideoData().isLive) {
          b = a.getCurrentTime();
          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";
      }
    }catch(a){
      if (window.curtime) {
        curq.textContent = "[???]";
        curtime.textContent = "???";
      }
      vidprogress2b.style.width = "0px";
    }
  }

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

  function pauseProgressMonitor() {
    clearInterval(timerProgressMonitor);
    timerProgressMonitor = 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:3px;background:#fff";
      b.innerHTML = '<div id="vidprogress2b" style="height:100%;background:#f00"></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();
      });
    } else setTimeout(waitPlayer, 200);
  })();
});
欢迎访问Greasy Fork镜像
