☰

TikTok Larger Video + Mouse Volume Control

Makes the TikTok video take up more of the screen

// ==UserScript==
// @name         TikTok Larger Video + Mouse Volume Control
// @namespace    https://greasyfork.org/en/users/807108-jeremy-r
// @version      1.2
// @description  Makes the TikTok video take up more of the screen
// @author       JRem
// @require      https://cdn.jsdelivr.net/gh/mlcheng/js-toast@ebd3c889a1abaad615712485ce864d92aab4c7c0/toast.min.js
// @match        https://www.tiktok.com/*/video/*
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    // Set to 0, if you want to keep the blur
    const removeBlur="1"
    // Set to 0, to disable toast msg's
    const enableToasts="1"

    // Toast Vars
    const options = {settings: {duration: 500,},style: {main: {background: "black",color: "white",width: "auto",'max-width': '10%',}}};

    function waitForElm(selector) {
        return new Promise(resolve => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector));
            }

            const observer = new MutationObserver(mutations => {
                if (document.querySelector(selector)) {
                    resolve(document.querySelector(selector));
                    observer.disconnect();
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    }

    // Volume Control via mouse scroll
    // 1 Scroll = 5%
    var stepAmount = 5;

    function volChange(e){
        e.preventDefault()
        var video = document.querySelector('video')
        var curVol = video.volume;
        var direction = e.deltaY < 0;
        var actualChange = stepAmount / 100;
        if (direction) curVol += actualChange;
        else curVol -= actualChange;
        if (curVol > 1) curVol = 1;
        else if (curVol < 0) curVol = 0;
        video.volume = curVol;

        if (enableToasts==1) {iqwerty.toast.toast(Math.floor(100 * video.volume) +"%", options);}
    }

    document.querySelector('div[class*="-DivVideoContainer"]').addEventListener("wheel", volChange);


    waitForElm('div[class*="-DivVideoContainer"]').then((elm) => {
        console.log('Element Found, Starting Fullscreen');

        var cssClass = document.querySelector('div[class*="-DivVideoContainer"]').className.split(" ")
        var css = "."+cssClass[0]+", ."+cssClass[1]+" { height: 80vh !important; }";
        GM_addStyle(css);
        if (enableToasts==1) {iqwerty.toast.toast('Fullscreen added', options);}

        if (removeBlur==1) {
            var cssClass1 = document.querySelector('div[class*="-DivBlurBackground"]').className.split(" ")
            var css1 = "."+cssClass1[0]+", ."+cssClass1[1]+" { opacity: 0 !important; }";
            GM_addStyle(css1);
            if (enableToasts==1) {iqwerty.toast.toast('Blur Removed', options);}
        }
    });
})();