Buffer bar for gfycat and gifv using greasemonkey+stylish

greasemonkey-webm-buffer-bar.js

// ==UserScript==
// @name        gfycat and gifv buffer bar
// @namespace   https://github.com/tomoe-mami
// @version     0.3
// @description buffer bar for gfycat and imgur's gifv
// @include     /^https?://(www\.)?gfycat\.com/.+$/
// @include     /^https?://i\.imgur\.com/[^.]+\.gifv$/
// @grant       none
// ==/UserScript==

var bytes, container, video, site;
if (window.superAwesomeGlobalGfyJSON) {
  container = document.getElementById('share-container');
  video = document.getElementById('share-video');
  bytes = superAwesomeGlobalGfyJSON.webmSize;
  site = 'gfycat';
} else if (window.videoItem) {
  container = document.querySelector('.vid-container');
  video = document.querySelector('video');
  if (video && !video.querySelector('source')) {
    video = undefined;
  }
  bytes = videoItem.size;
  site = 'imgur';
}

if (bytes && container && video) {
  var sizeList = [ ' B', 'KiB', 'MiB', 'GiB' ];
  var k = 1024;
  var i = Math.floor(Math.log(bytes) / Math.log(k));
  if (sizeList[i]) {
    bytes = (bytes / Math.pow(k, i)).toFixed(1);
  } else {
    i = 0;
  }
  bytes = bytes.replace(/\.0$/, '') + sizeList[i];

  var isFull = false;
  var bufferBar = document.createElement('div');
  var bufferFill = document.createElement('div');
  var currentPosition = document.createElement('div');
  var bufferPercentage = document.createElement('span');
  bufferPercentage.textContent = '0% of ' + bytes;
  bufferPercentage.className = 'webm-buffer-percentage';
  bufferFill.className = 'webm-buffer-fill';
  currentPosition.className = 'webm-buffer-position';
  bufferBar.className = 'webm-buffer-bar';
  bufferBar.appendChild(bufferFill);
  bufferBar.appendChild(currentPosition);
  bufferBar.appendChild(bufferPercentage);
  if (site == 'imgur') {
    container.insertBefore(bufferBar, container.firstElementChild);
  } else {
    container.appendChild(bufferBar);
  }

  video.addEventListener('progress', function () {
    if (video.duration > 0) {
      var bufferEnd = video.buffered.end(0);
      var pct = (bufferEnd / video.duration) * 100;
      bufferFill.style.width = pct + '%';
      bufferPercentage.textContent = parseInt(pct) + '% of ' + bytes;
    }
  }, false);

  video.addEventListener('timeupdate', function () {
    if (!isFull && video.played.end(0) >= video.duration) {
      bufferFill.style.width = '100%';
      bufferPercentage.textContent = '100% of ' + bytes;
      isFull = true;
    }
    var width = (video.currentTime / video.duration) * 100;
    currentPosition.style.width = width + '%';
  }, false);

  video.addEventListener('waiting', function () {
    bufferBar.classList.add('webm-buffer-waiting');
  }, false);

  video.addEventListener('canplay', function () {
    bufferBar.classList.remove('webm-buffer-waiting');
  }, false);
}

userstyle-webm-buffer-bar.css

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("gfycat.com"), regexp("https?://i\.imgur\.com/[^.]+\.gifv") {
  .webm-buffer-bar {
    position: relative;
    width: 30%;
    max-width: 200px;
    text-align: center;
    background: rgba(197, 217, 253, 0.4);
    margin: 10px auto;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 0 6px rgba(153, 177, 222, 0.4), 0 0 3px rgba(0, 0, 0, 0.2);
  }
  .webm-buffer-position,
  .webm-buffer-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transition: width 0.3s;
  }
  
  .webm-buffer-fill {
    background: rgba(82, 140, 242, 0.5);
    box-shadow: inset 0 0 10px rgba(155, 173, 207, 0.6);
  }
  
  .webm-buffer-position {
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  }
  
  .webm-buffer-waiting .webm-buffer-fill {
    background: rgba(242, 82, 87, 0.5);
    box-shadow: inset 0 0 10px rgba(255, 105, 109, 0.6);
  }
  
  .webm-buffer-percentage {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 12px;
    text-shadow: -1px -1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2);
    font-weight: bold;
  }
}