dアニメをマウスホイールで倍速設定したり早送りしたりするやつ

画面の左半分でマウスホイールしたら速度変化、右半分でマウスホイールしたら早送り/巻き戻し

// ==UserScript==
// @name         dアニメをマウスホイールで倍速設定したり早送りしたりするやつ
// @namespace    http://tampermonkey.net/
// @version      0.12
// @description  画面の左半分でマウスホイールしたら速度変化、右半分でマウスホイールしたら早送り/巻き戻し
// @author       kussy-tessy
// @match       https://anime.dmkt-sp.jp/animestore/sc_d_pc*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const overlayElement = document.createElement('div');
    overlayElement.style.cssText = 'position:absolute; left:0; right: 0; width: 20%; height: 10%; background: rgba(100, 100, 100, 0); z-index: 999999; color: white; ';
    document.querySelector('.backArea').appendChild(overlayElement);

    const formatSecond = (second) => {
        const secondInt = Math.floor(second);
        const min = Math.floor(secondInt / 60);
        const sec = ('0' + secondInt % 60).slice(-2);
        return `${min}:${sec}`;
    }

    const clearText = () => {
        overlayElement.innerHTML = '';
    }

    let timer;
    const updateOverlay = (text) =>{
        clearTimeout(timer);
        overlayElement.innerHTML = text;
        timer = setTimeout(clearText, 3000);
    }

    const video = document.querySelector('video');
    document.addEventListener('wheel', (e)=>{
        const width = window.innerWidth;
        const position = e.clientX;
        const delta = e.deltaY;
        if(position < width/2){ // 画面の左半分
            if(delta < 0){ // 上にホイール
                video.playbackRate += 0.05;
            } else { // 下にホイール
                video.playbackRate -= 0.05;
            }
            updateOverlay(`${video.playbackRate.toFixed(2)}倍速`);
        } else { // 画面の右半分
            if(delta < 0){ // 上にホイール
                video.currentTime += 30;
            } else {
                video.currentTime -= 30;
            }
            updateOverlay(formatSecond(video.currentTime));
        }
    });
})();