// ==UserScript==
// @name        Redgifs - Autoscroll
// @namespace   REDGIFS
// @description Allow you to view the videos on Redgifs sequentially without the need to scroll yourself. Currently works on all the pages with videos only on them, one by one (you may need to change the view).
// @version     1
// @grant       none
// @include     https://www.redgifs.com/*
// @license     MIT
// @author      Mashak
// @downloadURL none
// ==/UserScript==

(function() {
var switchInterval = null; // Time interval automatically set, to autoscroll
var unmuteAll = true; // Unmute all the videos currently playing if set to true (default to true)
const startKey = "²"; // Bind to (re)start the script (default to "k")
const stopKey = "s"; // Bind to stop the script (default to "s")
const prevKey = "q"; // Bind to switch to the previous video (default to "q")
const nextKey = "d"; // Bind to switch to the next video (default to "d")
const loopKey = "l"; // Bind to loop the current video (default to "l")
const centerKey = "c"; // Bind to center the view on the current video (default to "c")
var endCall = false; // Used to trigger "video ended" call only once
var init = false; // Check if the init occurred, else we do it
var centeringMargin = null; // Space top & bottom of the player and browser inner height borders
var playerHeight = null; // Player height automatically calculated
const playerMargin = 32; // Player margin
const playerWidth = Math.floor(window.innerWidth * 0.8); // We increase the player size (80% of the size of the window by default, else you can set pixels there, e.g.: 1440)
const maxTries = 20; // If no video is found we stop the script after this amount of tries.
var currentTries = 0; // Current amount of tries
  
// Override CSS
var link = window.document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'data:text/css,' +
	// Selectors start here
  '.page.wide,.page.feed {width: ' + playerWidth + 'px !important;}' +
	'.previewFeed {max-width: unset !important;}';
document.getElementsByTagName("HEAD")[0].appendChild(link);

// Main script - Autoscroll the page to the next video
function pageScroll() {
  if (this.currentTime > 1 || endCall == true) return;
  clearInterval(switchInterval);
  console.log("Auto scroll", this.currentTime, endCall);
  endCall = true;
  var elem = document.getElementsByTagName('video')[0];
  elem.currentTime = elem.duration;
  if (elem.offsetHeight != playerHeight) {
    playerHeight = elem.offsetHeight;
    centeringMargin = (window.innerHeight - document.getElementsByTagName("video")[0].offsetHeight) / 2;
  }
  scrollAction((playerHeight + playerMargin));
  if (unmuteAll) elem.muted = false;
  switchInterval = setInterval(setupNewVid, 2000);
}

// Manual scroll the page to the next video
function manualScroll(up = false) {
  clearInterval(switchInterval);
  console.log("Manual scroll", up);
  endCall = true;
  var elem = document.getElementsByTagName('video')[0];
  up ? scrollAction(-(playerHeight + playerMargin)) : scrollAction((playerHeight + playerMargin));
  if (up && window.scrollY < centeringMargin) scrollAction(centeringMargin);
  if (unmuteAll) elem.muted = false;
  switchInterval = setInterval(setupNewVid, 2000);
}
  
// Reset the scroll interval
function resetScroll() {
  clearInterval(switchInterval);
  elem = document.getElementsByTagName('video')[0];
  elem.removeEventListener('timeupdate', pageScroll);
  if (unmuteAll) elem.muted = false;
  switchInterval = setInterval(setupNewVid, 2000);
}

// Init the autoscroll
function initScroll() {
  if (document.getElementsByTagName("video").length == 0) {
    scrollAction((window.innerHeight / 2));
    currentTries++;
    if (currentTries >= maxTries) {
      console.log("Video not found, script aborted.");
    } else {
    	setTimeout(initScroll, 500);
    }
  } else {
    centeringMargin = (window.innerHeight - document.getElementsByTagName("video")[0].offsetHeight) / 2;
    playerHeight = document.getElementsByTagName("video")[0].offsetHeight;
    endCall = true;
    document.getElementsByTagName('video')[0].currentTime = 0;
    init = true;
    resetScroll();
    centerVid();
      console.log(centeringMargin, playerHeight);
  }
}

// Setup the new video properly after the switch
function setupNewVid() {
  elem = document.getElementsByTagName('video')[0]; 
  elem.setAttribute("loop", false);
  elem.addEventListener('timeupdate', pageScroll, false);
  endCall = false;
  if (elem.getBoundingClientRect().top != centeringMargin) centerVid();
}

// Scrolling action (separated for easier debug)
function scrollAction(value) {
  window.scrollBy(0, value);
}
  
// Loop the current video
function loopVid() {
  console.log("Looping current video");
  clearInterval(switchInterval);
  elem = document.getElementsByTagName('video')[0];
  elem.setAttribute("loop", true);
  elem.removeEventListener('timeupdate', pageScroll);
}
  
// Center the video
function centerVid() {
  elem = document.getElementsByTagName('video')[0];
  elem.scrollIntoView();
  scrollAction(-centeringMargin);
}
  
// Keystrokes
var previousKeyStroke = null;
function keyStrokes(event) {
  if (document.activeElement.localName == "input") return;
  var ek = event.key;
  var tmpPreviousKeyStroke = previousKeyStroke;
  previousKeyStroke = ek;
  if (tmpPreviousKeyStroke == "Control") return;
  switch (ek) {
    case startKey:
      console.log("(Re)started");
      if (!init) {
        initScroll();
      } else {
      	resetScroll();
      }
      break;
    case stopKey:
      console.log("Stopped");
      document.getElementsByTagName('video')[0].removeEventListener('timeupdate', pageScroll);
      clearInterval(switchInterval);
      break;
    case prevKey:
      manualScroll(true, true);
      break;
    case nextKey:
			manualScroll(false, true);
      break;
    case loopKey:
      loopVid();
      break;
    case centerKey:
      centerVid();
    default:
  }
}
document.onkeydown = keyStrokes;

})();