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.20210129071034
// @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 () => {
    const host = location.host
 
    if (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()