Raw Source Toggle Dropdown

• Minified Source

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        *://*.x.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]

    async function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

    const init = async () => {
        await GM_config.init(
            {
                title: "Youtube Quality Enhancer Settings",
                'id': 'video_speed_controller', // The id used for this instance of GM_config
                'fields': // Fields object
                {
                    "x_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,
                    },
                }
            }
        );
        await sleep(500);
    }

    //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("shreddit-player-2")
        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 main = async () => {
        await init();

        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";
        buttonArea.style.background = 'snow';
        buttonArea.style.padding = '2px';

        const textElement = document.createElement('span');
        textElement.innerText = "↺";
        textElement.style.position = 'absolute';
        textElement.style.translate = '-50% -50%';
        textElement.style.color = 'white';

        const buttonElement = document.createElement('button');
        buttonElement.style.width = '3ex'
        buttonElement.style.height = '3ex'
        buttonElement.style.borderRadius = '50%'
        buttonElement.style.background = 'black';
        buttonElement.style.textAlign = 'center';

        const resetButton = buttonElement.cloneNode(buttonElement)
        const resetText = textElement.cloneNode(textElement)
        resetText.innerText = "↺";
        resetButton.appendChild(resetText)
        resetButton.addEventListener('click', () => {
            setSpeed(1-getSpeed())
        });

        const increaseButton = buttonElement.cloneNode(buttonElement)
        const increaseText = textElement.cloneNode(textElement)
        increaseText.innerText = "+";
        increaseButton.appendChild(increaseText)
        increaseButton.addEventListener('click', () => {
            setSpeed(INCREMENT_RATIO)
        });

        const decreaseButton = buttonElement.cloneNode(buttonElement)
        const decreaseText = textElement.cloneNode(textElement)
        decreaseText.innerText = "-";
        decreaseButton.appendChild(decreaseText)
        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);
    }

    main();
})();