// ==UserScript==
// @name         Invidious Video Previews
// @version      0.1
// @author       Amir Torrez
// @description  Replace thumbnail with video previews passing the cursor above each.
// @namespace    https://greasyfork.org/users/433508
// @include      *invidio.us/*
// @include      *yewtu.be/*
// @include      *invidious.toot.koeln/*
// @grant        none
// @inject-into  auto
// @downloadURL none
// ==/UserScript==

var t = document.querySelectorAll("div.thumbnail");
var frames = ["hqdefault.jpg", "hq1.jpg","hq2.jpg","hq3.jpg"];
var pos = 1;

t.forEach(
  function(cbox) {
   cbox.addEventListener("mouseover", thumbnailIn, false);
  }
);

t.forEach(
  function(cbox) {
   cbox.addEventListener("mouseout", thumbnailOut, false);
  }
);

function thumbnailIn() {
  var nod = this.childNodes[1];
  var url = this.parentNode.attributes.href.value.replace("/watch?v=", "");
  window.interval = setInterval(function(){
    if (++pos >= frames.length) {
      pos = 0;
    }
    nod.setAttribute('src', "/vi/" + url + "/" + frames[pos]);
  }, 500);
}

function thumbnailOut() {
    var url = this.parentNode.attributes.href.value.replace("/watch?v=", "");
    this.childNodes[1].setAttribute('src', "/vi/" + url + "/" + frames[0]);
    clearInterval(window.interval);
}