BurakBal96 / Video Speed Controller

// ==UserScript==
// @name         Video Speed Controller
// @namespace    http://tampermonkey.net/
// @version      0.5
// @description  try to take over the world!
// @author       You
// @match        *://*.twitter.com/*
// @match        *://*.linkedin.com/*
// @match        *://*.instagram.com/*
// @match        *://*.reddit.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitter.com
// @license      MIT
// @downloadURL  https://openuserjs.org/install/BurakBal96/Video_Speed_Controller.user.js
// @updateURL    https://openuserjs.org/meta/BurakBal96/Video_Speed_Controller.meta.js
// @require      https://openuserjs.org/src/libs/BurakBal96/Version_Control.js
// @require      https://openuserjs.org/src/libs/sizzle/GM_config.js
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    const INCREMENT_RATIO = 0.2;
    const locationArray = window.location.host.split(".");
    const currentWebsite = locationArray[locationArray.length - 2]
    GM_config.init(
        {
            title: "Youtube Quality Enhancer Settings",
            'id': 'video_speed_controller', // The id used for this instance of GM_config
            'fields': // Fields object
            {
                "twitter_speed": {
                    label: "Twitter video speed: ",
                    type: "float",
                    default: 1.8,
                },
                "linkedin_speed": {
                    label: "LinkedIn video speed: ",
                    type: "float",
                    default: 1.8,
                },
                "instagram_speed": {
                    label: "IinkedIn video speed: ",
                    type: "float",
                    default: 1.8,
                },
                "reddit_speed": {
                    label: "Reddit video speed: ",
                    type: "float",
                    default: 1.8,
                },
            }
        }
    );
    //GM_config.open();
    // Your code here...
    setInterval(()=>{
        const videos = document.querySelectorAll("video");

        videos.forEach(video => {
            if(video) video.playbackRate = Number(getSpeed());
        });

        const redditShadowPlayers = document.querySelectorAll("media-telemetry-observer shreddit-player")
        redditShadowPlayers.forEach(player => {
            //if(video) video.playbackRate = Number(getSpeed());
            player.shadowRoot.querySelectorAll("video")[0].playbackRate = Number(getSpeed());
        });
    }, 500);

    const getSpeed = () => Number(GM_config.get(currentWebsite+"_speed").toFixed(1));
    const setSpeed = (additionalSpeed) => {
        let speed = getSpeed();
        speed += additionalSpeed;

        if(speed <= 0) return;
        document.getElementById("video-speed-controller").innerText = speed.toFixed(1);
        GM_config.set(currentWebsite+"_speed", speed);
        GM_config.save();
    }

    const shortcutListener = (e) => {
        if(!e.altKey) return;
        switch(e.keyCode){
            case 220: setSpeed(INCREMENT_RATIO); break;
            case 90: setSpeed(-INCREMENT_RATIO); break;
        }
    }


    const infoArea = document.createElement('div');
    infoArea.style.position = "fixed";
    infoArea.style.top = "0";
    infoArea.style.right = "10px";
    infoArea.style.color = "black";
    infoArea.style.zIndex = "999";
    infoArea.style.background = "snow";
    infoArea.style.display = "flex";
    infoArea.style.flexDirection = "column";
    infoArea.style.alignItems = "center";
    infoArea.style.minWidth = "50px";
    infoArea.style.height = "fit-content";

    const speedInfo = document.createElement('div');
    speedInfo.setAttribute("id","video-speed-controller")
    speedInfo.innerText = getSpeed();

    infoArea.appendChild(speedInfo);

    const buttonArea = document.createElement('div');
    buttonArea.style.display = "flex";
    buttonArea.style.gap = "5px";

    const resetButton = document.createElement('button');
    resetButton.innerText = "↺";
    resetButton.addEventListener('click', () => {
        setSpeed(1-getSpeed())
    });

    const increaseButton = document.createElement('button');
    increaseButton.innerText = "+";
    increaseButton.addEventListener('click', () => {
        setSpeed(INCREMENT_RATIO)
    });

    const decreaseButton = document.createElement('button');
    decreaseButton.innerText = "-";
    decreaseButton.addEventListener('click', () => {
        setSpeed(-INCREMENT_RATIO)
    });

    buttonArea.appendChild(resetButton);
    buttonArea.appendChild(decreaseButton);
    buttonArea.appendChild(increaseButton);
    infoArea.appendChild(buttonArea);

    document.body.append(infoArea);

    document.addEventListener('keydown', shortcutListener, false);
})();