Youtube Better Player

Scroll wheel volume, "Are you there" popup bypass, Volume percent display, Infinite autoplay, Volume save
줄 바꿈
// ==UserScript==
// @name         Youtube Better Player
// @namespace    https://greasyfork.org/en/users/670188-hacker09?sort=daily_installs
// @version      1
// @description  Scroll wheel volume, "Are you there" popup bypass, Volume percent display, Infinite autoplay, Volume save
// @author       hacker09
// @include      *
// @icon         https://www.youtube.com/s/desktop/03f86491/img/favicon.ico
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// ==/UserScript==

var enableVolumeAutoSet = false;

class Player {
  constructor() {
    this.volumeSk = 'volume'
  }

  async init(isEmbed) {
    const api = this.api = await this.getApi(isEmbed)

    this.volume = Number(GM_getValue(this.volumeSk))

    if (isNaN(this.volume)) {
      this.volume = Math.floor(api.getVolume())
      GM_setValue(this.volumeSk, this.volume)
    }
    else if (enableVolumeAutoSet) {
      api.unMute()
      api.setVolume(this.volume)
    }

    const {$player, $video, $eventCatcher, $volumeArea, $volumeBar} = this.getEls()

    this.$volumeText = this.buildVolumeText($volumeArea)

    const onVolumeChange = this.onVolumeChange.bind(this)
    $video.addEventListener('volumechange', onVolumeChange)

    new WheelVolume(this, api, $volumeBar, $player).init($eventCatcher)

    if (!isEmbed) new RealAutoPlay(api).init($video)
  }

  async getApi(isEmbed) {
    if (isEmbed) {
      let api
      while (!(api = unsafeWindow.movie_player)) await wait(200)

      return api
    }

    let $el, api

    while (!($el = unsafeWindow['ytd-player'])) await wait(1000)
    while (!(api = $el.player_)) await wait(200)
    while (!api.isReady()) await wait(200)

    return api
  }

  getEls() {
    const $player = $('#movie_player')
    const $video = $('.html5-main-video', $player)
    const $eventCatcher = $player.parentElement
    const $volumeArea = $('.ytp-volume-area', $player)
    const $volumeBar = $('.ytp-volume-slider', $volumeArea)

    return {$player, $video, $eventCatcher, $volumeArea, $volumeBar}
  }

  buildVolumeText($volumeArea) {
    const $volumeText = document.createElement('span')
    $volumeText.classList.add('ytbp-volume-text')
    $volumeText.textContent = this.volume
    GM_addStyle(volumeTextStyle)

    $volumeArea.insertAdjacentElement('beforeend', $volumeText)

    return $volumeText
  }

  onVolumeChange() {
    this.volume = this.$volumeText.textContent = Math.floor(this.api.getVolume())

    clearTimeout(this.saveTimeout)

    this.saveTimeout = setTimeout(() => GM_setValue(this.volumeSk, this.volume), 1000)
  }
}

class WheelVolume {
  constructor(player, api, $volumeBar, $player) {
    this.player = player
    this.api = api
    this.$volumeBar = $volumeBar
    this.$player = $player

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

  init($eventCatcher) {
    const onWheel = this.onWheel.bind(this)
    const onClick = this.onClick.bind(this)

    $eventCatcher.addEventListener('wheel', onWheel)
    $eventCatcher.addEventListener('mousedown', onClick)
  }

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

    this.show()

    const api = this.api
    const now = Date.now(), since = now - this.prevScrollDate
    const step = (e.deltaY < 0 ? 1 : -1) * (since < 50 ? 4 : 1)

    if (api.isMuted()) api.unMute()

    api.setVolume(this.player.volume + step)

    this.prevScrollDate = now
  }

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

    e.preventDefault()

    this.show()

    const api = this.api

    if (api.isMuted()) {
      api.unMute()
      api.setVolume(this.player.volume)
    }
    else api.mute()
  }

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

    this.$player.dispatchEvent(events.mousemove)

    clearTimeout(this.showTimeout)

    $volumeBar.dispatchEvent(events.mouseover)

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

class RealAutoPlay {
  constructor(api) {
    this.api = api

    this.popupName = 'yt-confirm-dialog-renderer'

    const popupEl = $('ytd-popup-container', unsafeWindow.document)
    this.popupContainer = popupEl.polymerController ?? popupEl.inst
  }

  init($video) {
    const $autonavToggleButton = $('.ytp-autonav-toggle-button')

    this.autoNavEnabled = $autonavToggleButton.ariaChecked

    $autonavToggleButton.addEventListener('click', onToggleAutoNav)

    const bypassPopup = this.bypassPopup.bind(this)
    const forceNextVideo = this.forceNextVideo.bind(this)
    const onToggleAutoNav = this.onToggleAutoNav.bind(this)

    $video.addEventListener('pause', bypassPopup)
    $video.addEventListener('waiting', bypassPopup)
    $video.addEventListener('ended', forceNextVideo)
  }

  bypassPopup() {
    const popup = this.popupContainer.popups_?.[this.popupName]

    if (!popup) return

    this.api.playVideo()

    popup.popup.remove()
    delete this.popupContainer.popups_[this.popupName]
  }

  forceNextVideo() {
    if (this.autoNavEnabled && !document.hasFocus()) this.api.nextVideo()
  }

  onToggleAutoNav() {
    this.autoNavEnabled = !this.autoNavEnabled
  }
}

const init = async () => {
  const isEmbed = location.pathname.startsWith('/embed/')

  if (isEmbed) await new Promise(r => $('.html5-main-video').addEventListener('canplay', r, {once: true}))

  new Player().init(isEmbed)
}

const volumeTextStyle = `
.ytbp-volume-text {
    position: relative;
    top: -0.5px;
    width: 0;
    text-indent: 2px;
    overflow: hidden;
    color: #ddd;
    font-size: 109%;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    transition: width .2s
}
.ytbp-volume-text:after { content: '%' }
.ytp-volume-control-hover:not([aria-valuenow="0"], [aria-valuenow="100"]) + .ytbp-volume-text {
    width: 2.5em
}
`

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

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

init()