Twitch Scroll Wheel Volume

Scroll wheel volume control
当前为 2021-01-29 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Twitch Scroll Wheel Volume
// @description  Scroll wheel volume control
// @match        https://www.twitch.tv/*
// @match        https://*.ext-twitch.tv/*
// @version 0.0.1.20210129101732
// @namespace https://greasyfork.org/users/286737
// ==/UserScript==

class Player {
    constructor() {
        this.onStateMutationHandler = this.onStateMutation.bind(this)

        this.stateObserver = new MutationObserver(this.onStateMutationHandler)
        this.wheelVolume = new WheelVolume()
    }

    async init() {
        let $root

        while (!($root = $('.root-scrollable__wrapper'))) await wait(2000)

        const onRootMutation = this.onRootMutation.bind(this)

        new MutationObserver(onRootMutation).observe($root, {childList: true})

        onRootMutation()
    }

    async getApi() {
        let $el, api

        while (!($el = $('.video-player__container', this.$player))) await wait(2000)
        while (!(api = this.getReactPlayerApi($el))) await wait(500)

        return api
    }

    getReactPlayerApi($el) {
        let instance

        for (const key in $el) {
            if (key.startsWith('__reactInternalInstance$')) {
                instance = $el[key]
            }
        }

        let parent = instance.return

        for (let i = 0; i < 30; i++) {
            const player = parent.memoizedProps.mediaPlayerInstance

            if (player) return player.core

            parent = parent.return
        }
    }

    get$eventCatcher() {
        return $('.video-player__overlay', this.$player)
    }

    get$volumeBar() {
        return $('[id^=player-volume-slider]', this.$player)
    }

    getIsMinimized() {
        return this.$player.dataset.aPlayerState == 'mini'
    }

    onRootMutation() {
        const $player = $('.persistent-player')

        if ($player == this.$player) return

        this.$player = $player

        if ($player) this.onNewPlayer()
    }

    onStateMutation() {
        // $volumeBar is recreated on maximize
        if (!this.getIsMinimized()) this.wheelVolume.$volumeBar = this.get$volumeBar()
    }

    async onNewPlayer() {
        const api = this.api = await this.getApi()

        this.wheelVolume.init(api, this.get$eventCatcher(), this.get$volumeBar())

        this.stateObserver.observe(this.$player, {attributeFilter: ['data-a-player-state']})
    }
}

class WheelVolume {
    constructor() {
        this.onWheelHandler = this.onWheel.bind(this)
        this.onMousedownHandler = this.onMousedown.bind(this)

        this.events = {
            mouseover: new Event('mouseover', {bubbles: true}),
            mouseout: new Event('mouseout', {bubbles: true}),
            mousemove: new Event('mousemove')
        }

        const onExtMessage = this.onExtMessage.bind(this)

        addEventListener('message', onExtMessage)
    }

    init(api, $eventCatcher, $volumeBar) {
        this.api = api
        this.$eventCatcher = $eventCatcher
        this.$volumeBar = $volumeBar

        $eventCatcher.addEventListener('wheel', this.onWheelHandler)
        $eventCatcher.addEventListener('mousedown', this.onMousedownHandler)
    }

    onWheel(e) {
        e.preventDefault()
        e.stopImmediatePropagation()

        this.updateVolume(e.deltaY < 0)
    }

    onMousedown(e) {
        if (e.which != 2) return

        e.preventDefault()

        this.toggleMute()
    }

    onExtMessage(e) {
        const event = e.data.wheelEvent

        if (!event) return

        switch (event) {
            case 'up':
                this.updateVolume(true)
                break
            case 'down':
                this.updateVolume(false)
                break
            case 'click':
                this.toggleMute()
        }
    }

    updateVolume(shouldIncrease) {
        this.show()

        const api = this.api, volume = api.getVolume()

        if ((volume == 0 && !shouldIncrease) || (volume == 1 && shouldIncrease)) return

        const now = Date.now(), since = now - this.prevScrollDate
        const step = (shouldIncrease ? 1 : -1) * (since < 50 ? 4 : 1) * .01

        api.setVolume(volume + step)

        this.prevScrollDate = now
    }

    toggleMute() {
        this.show()

        const api = this.api

        api.setMuted(!api.isMuted())
    }

    show() {
        const $volumeBar = this.$volumeBar, events = this.events

        this.$eventCatcher.dispatchEvent(events.mousemove)

        clearTimeout(this.showTimeout)

        $volumeBar.dispatchEvent(events.mouseover)

        this.showTimeout = setTimeout(() => $volumeBar.dispatchEvent(events.mouseout), 1000)
    }
}

class ExtFrame {
    init() {
        const onWheel = this.onWheel.bind(this)
        const onMousedown = this.onMousedown.bind(this)

        addEventListener('wheel', onWheel, {passive: false})
        addEventListener('mousedown', onMousedown, {passive: false})
    }

    onWheel(e) {
        e.preventDefault()
        e.stopPropagation()

        this.sendEvent(e.deltaY < 0 ? 'up' : 'down')
    }

    onMousedown(e) {
        if (e.which != 2) return

        e.preventDefault()

        this.sendEvent('click')
    }

    sendEvent(name) {
        parent.postMessage({wheelEvent: name}, 'https://supervisor.ext-twitch.tv/')
    }
}

const init = async () => {
    if (location.host == 'www.twitch.tv') new Player().init()
    else if (new URLSearchParams(location.search).get('anchor') == 'video_overlay') new ExtFrame().init()
}


const $ = (sel, el = document) => el.querySelector(sel)

const wait = async (ms) => await new Promise(r => setTimeout(r, ms))


init()