☰

Greasy Fork is available in English.

Scroll Theater Mode Video

Automatically scrolls to the top of the video if it's in theater mode

// ==UserScript==
// @name        Scroll Theater Mode Video
// @description Automatically scrolls to the top of the video if it's in theater mode
// @version     4
// @namespace   https://github.com/insin/greasemonkey
// @grant       none
// @match       https://www.youtube.com/*
// ==/UserScript==

// Un-fix the header when not viewing fullscreen video so we can scroll past it
let $style = document.createElement('style')
$style.textContent = `
body:not(.no-scroll) #masthead-container {
  position: static !important;
}
body:not(.no-scroll) #page-manager {
  margin-top: 0 !important;
}
`
document.head.appendChild($style)

let player
let progressBar

let debug = false

function log(...args) {
  if (!debug) {
    return
  }
  console.log(...args)
}

/**
 * @returns {Promise<HTMLElement>}
 */
function getElement(selector, {
  name = null,
  target = document,
} = {}) {
  return new Promise((resolve) => {
    let rafId

    function stop($element) {
      if (rafId) {
        cancelAnimationFrame(rafId)
      }
      resolve($element)
    }

    function queryElement() {
      let $element = target.querySelector(selector)
      if ($element) {
        stop($element)
      }
      else {
        rafId = requestAnimationFrame(queryElement)
      }
    }

    queryElement()
  })
}

function scrollIfTheaterMode() {
  log('scrollIfTheaterMode', {theater: player.getAttribute('theater')})
  if (player.getAttribute('theater') != null) {
    log({'window.innerWidth': window.innerWidth})
    if (window.innerWidth < 650) {
      // For my cusyom "YouTube Corner (Small)" Sizer setting (width: 643, height: 412)
      window.scrollTo({top: 121})
    }
    else {
      // For my "YouTube Corner" Sizer setting (width: 874, height: 542)
      // This is the smallest size theater mode videos will go without shrinking
      // (in Firefox on Windows 10 with default UI settings at least :p)
      window.scrollTo({top: 56})
    }
  }
}

function handleNavigation() {
  log('handleNavigation', {hidden: progressBar.getAttribute('hidden')})
  if (progressBar.getAttribute('hidden') != null) {
    scrollIfTheaterMode()
  }
}

async function waitForPlayer() {
  log('waiting for player')
  player = await getElement('ytd-watch-flexy')
  log('got player', {player})
  scrollIfTheaterMode()
  new MutationObserver(scrollIfTheaterMode).observe(player, {
    attributes: true,
    attributesFilter: ['theater'],
  })
}

async function waitForProgressBar() {
  log('waiting for progress bar')
  progressBar = await getElement('yt-page-navigation-progress')
  log('got progress bar', {progressBar})
  new MutationObserver(handleNavigation).observe(progressBar, {
    attributes: true,
    attributesFilter: ['hidden'],
  })
}

waitForPlayer()
waitForProgressBar()