Raw Source Toggle Dropdown

• Minified Source

vikion / Redgifs media controls

// ==UserScript==
// @name         Redgifs media controls
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  try to take over the world!
// @author       You
// @match        https://www.redgifs.com/watch/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=redgifs.com
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    "use strict";
    console.info("Redgifs media controls initiated");

    var videoElement = getPlayerInSight();

    function getPlayerInSight() {
        const element = Array.prototype.filter.call(document.querySelectorAll(".player"), isInViewport)[0];
        return element || videoElement;
    }

    function videoPlayerRefresher() {
        // if video player isn't assigned, look for it again
        videoElement = videoElement || getPlayerInSight();
    }

    function toggleMute() {
        videoElement.querySelector(".icon.icon-mute, .icon.icon-sound").parentElement.click();
    }

    function toggleFullscreen() {
        videoElement.querySelector(".icon.icon-maximize, .icon.icon-minimize").parentElement.click();
    }

    function toggleQuality() {
        videoElement.querySelector(".icon.icon-settings").parentElement.click();
    }

    function togglePlayState() {
        videoElement.querySelector(".icon.icon-pause, .icon.icon-play").parentElement.click();
    }

    function seekVideo(time) {
        const video = videoElement;
        video.currentTime = Math.max(0, video.currentTime + Number(time));
    }

    function isInViewport(element) {
        const rect = element.getBoundingClientRect();
        return ((rect.height + rect.y) > 0);
    }

    document.addEventListener("keydown", e => {
        videoPlayerRefresher();
        switch(e.code) {
            case "KeyF":
                toggleFullscreen();
                break;
            case "KeyM":
                toggleMute();
                break;
            case "KeyQ":
                toggleQuality();
                break;
            case "Space":
                e.preventDefault();
                togglePlayState();
                break;
            case "KeyA":
                toggleFullscreen();
                togglePlayState();
                toggleMute();
                toggleQuality();
                break;
            case "ArrowLeft":
                seekVideo(-5);
                break;
            case "ArrowRight":
                seekVideo(5);
                break;
            default: console.log("Register key press", e.code);
        }
    });

    // change player based on scroll position
    let lastKnownScrollPosition = 0;
    let ticking = false;

    document.addEventListener('scroll', function(e) {
        lastKnownScrollPosition = window.scrollY;

        if (!ticking) {
            window.requestAnimationFrame(function() {
                videoElement = getPlayerInSight();
                ticking = false;
            });

            ticking = true;
        }
    });
})();