Video Interval Calculator

// ==UserScript==
// @name         Video Interval Calculator
// @namespace    com.dotsarecool.util
// @version      1.0
// @description  Provides interval calculator options on YouTube and Twitch videos and video embeds
// @author       Dotsarecool
// @include      *youtube.com/watch*
// @include      *youtube.com/embed*
// @include      *twitch.tv/videos*
// @include      *player.twitch.tv/?video*
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
// @grant        none
// ==/UserScript==

var start, end;

$(document).ready(function() {
  domain = document.location.toString();
  if (domain.includes("youtube")) {
    youtube.initControls($("video")[0].wrappedJSObject);
  } else if (domain.includes("twitch.tv/videos")) {
    twitch.initControls($(".video-player video")[0]);
  } else if (domain.includes("player.twitch")) {
      $(".player-video").bind("DOMNodeInserted", function() {
          twitch.initControls($(".player-video video")[0]);
      });
  }
});

var twitch = {
  player: {},
  initControls: function(p) {
    player = p;
    interval = document.createElement("div");
    $(interval).attr("class", "player-seek__time");
    $(interval).attr("id", "int-int");
    $(".player-seek__time-container > span:nth-child(1)").after(interval);
    $("#int-int").append("<span id='int-time-exp'>&nbsp;&nbsp;&gt;</span> ");
    $("#int-time-exp").attr("style", "cursor:pointer;");
    $("#int-time-exp").click(function() {
      twitch.expandControls();
    });
    twitch.keyboardFrameAdvance();
  },
  expandControls: function() {
    $("#int-time-exp").html("&nbsp;&nbsp;&lt;&nbsp;&nbsp;");
    $("#int-time-exp").click(function() {
      twitch.contractControls();
    });
    button_s = document.createElement("span");
    $(button_s).attr("id", "int-but-start");
    $(button_s).attr("style", "cursor:pointer;");
    $(button_s).text("00:00.000");
    $(button_s).click(function() {
      start = player.currentTime;
      $("#int-but-start").html(prettyTime(start));
      if (end >= start) {
        $("#int-time-int").html(prettyTime(end - start));
      } else {
        $("#int-time-int").html("??:??.???");
      }
    });
    $("#int-int").append(button_s);
    button_e = document.createElement("span");
    $(button_e).attr("id", "int-but-end");
    $(button_e).attr("style", "cursor:pointer;");
    $(button_e).text("00:00.000");
    $(button_e).click(function() {
      end = player.currentTime;
      $("#int-but-end").text(prettyTime(end));
      if (end >= start) {
        $("#int-time-int").html(prettyTime(end - start));
      } else {
        $("#int-time-int").html("??:??.???");
      }
    });
    $("#int-int").append(" <span id='int-time-sep'>/</span> ");
    $("#int-int").append(button_e);
    $("#int-int").append(" <span id='int-time-equal'>=</span> <span id='int-time-int'>00:00.000</span>");
  },
  contractControls: function() {
    $("#int-time-exp").html("&nbsp;&nbsp;&gt;");
    $("#int-time-exp").click(function() {
      twitch.expandControls();
    });
    $("#int-time-exp ~ span").remove();
  },
  keyboardFrameAdvance: function() {
      $(".player").keydown(function(e) {
          if (e.which == 188 || e.which == 190) {
              if (player.paused) {
                  framerate = 60; //idk how to get this
                  player.currentTime = player.currentTime + (1/framerate) * (e.which==188 ? -1 : 1);
              } else {
                  player.pause();
              }
          }
      });
  }
};

var youtube = {
  player: {},
  initControls: function(p) {
    player = p;
    interval = document.createElement("div");
    $(interval).attr("class", "ytp-time-display notranslate");
    $(interval).attr("id", "int-int");
    $(".ytp-left-controls").append(interval);
    $("#int-int").append("<span id='int-time-exp'>&gt;</span> ");
    $("#int-time-exp").attr("style", "cursor:pointer;");
    $("#int-time-exp").click(function() {
      youtube.expandControls();
    });
  },
  expandControls: function() {
    $("#int-time-exp").html("&lt;&nbsp;&nbsp;");
    $("#int-time-exp").click(function() {
      youtube.contractControls();
    });
    button_s = document.createElement("span");
    $(button_s).attr("id", "int-but-start");
    $(button_s).attr("style", "cursor:pointer;");
    $(button_s).text("00:00.000");
    $(button_s).click(function() {
      start = player.getCurrentTime();
      $("#int-but-start").html(prettyTime(start));
      if (end >= start) {
        $("#int-time-int").html(prettyTime(end - start));
      } else {
        $("#int-time-int").html("??:??.???");
      }
    });
    $("#int-int").append(button_s);
    button_e = document.createElement("span");
    $(button_e).attr("id", "int-but-end");
    $(button_e).attr("style", "cursor:pointer;");
    $(button_e).text("00:00.000");
    $(button_e).click(function() {
      end = player.getCurrentTime();
      $("#int-but-end").text(prettyTime(end));
      if (end >= start) {
        $("#int-time-int").html(prettyTime(end - start));
      } else {
        $("#int-time-int").html("??:??.???");
      }
    });
    $("#int-int").append(" <span id='int-time-sep'>/</span> ");
    $("#int-int").append(button_e);
    $("#int-int").append(" <span id='int-time-equal'>=</span> <span id='int-time-int'>00:00.000</span>");
  },
  contractControls: function() {
    $("#int-time-exp").html("&gt;");
    $("#int-time-exp").click(function() {
      youtube.expandControls();
    });
    $("#int-time-exp ~ span").remove();
  }
};

// Number t to string in format "00:00.000"
function prettyTime(t) {
  seconds = Math.floor(t);
  ms = Math.round(1000*(t - seconds));
  sec = seconds % 60;
  min = Math.floor(seconds / 60) % 60;
  hr = Math.floor(seconds / (60*60));
  if (hr > 0) {
    return (hr>9?hr:"0"+hr) + ":" + (min<1?"00":(min>9?min:"0"+min)) + ":" + (sec<1?"00":(sec>9?sec:"0"+sec)) + "." + (ms<1?"000":(ms<10?"00"+ms:(ms<100?"0"+ms:ms)));
  } else {
    return (min<1?"00":(min>9?min:"0"+min)) + ":" + (sec<1?"00":(sec>9?sec:"0"+sec)) + "." + (ms<1?"000":(ms<10?"00"+ms:(ms<100?"0"+ms:ms)));
  }
}