TikTok Larger Video + Mouse Volume Control

Makes the TikTok video take up more of the screen

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==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);}
        }
    });
})();