From 83f2d325e17d461fe47d4070de3754a38a79db0b Mon Sep 17 00:00:00 2001 From: Amin Yahyaabadi Date: Sun, 7 Nov 2021 07:21:29 -0600 Subject: [PATCH] Improve performance --- extension/contentScript.js | 180 +++++++++++++++++-------------------- 1 file changed, 83 insertions(+), 97 deletions(-) diff --git a/extension/contentScript.js b/extension/contentScript.js index 5f6fb75..194422f 100644 --- a/extension/contentScript.js +++ b/extension/contentScript.js @@ -11,122 +11,108 @@ // @grant none // ==/UserScript== -(function() { - 'use strict'; +'use strict'; - const isWatchVideoPage = () => window.location.pathname == "/watch" +const isWatchVideoPage = () => window.location.pathname === "/watch" - const fluff = ['#secondary-inner', '#info', '#meta', '#comments', '#masthead-container', '#speedyg'] +const fluff = ['#secondary-inner', '#info', '#meta', '#comments', '#masthead-container', '#speedyg'] - const setFluffDisplay = (value) => { - fluff.forEach(selector => { - document.querySelectorAll(selector).forEach(el => { - el.style.display = value - }) +const setFluffDisplay = (value) => { + fluff.forEach(selector => { + document.querySelectorAll(selector).forEach(el => { + el.style.display = value }) - } - - const hideFluff = () => { - console.log(`[YT-FFT] Hiding fluff`) - setFluffDisplay('none') - } - const showFluff = () => { - console.log(`[YT-FFT] Showing fluff again`) - setFluffDisplay('') - } - - const isInFullscreen = () => !!document.fullscreenElement + }) +} - // Opposite since we will be checking this only after it's changed by YouTube - const checkIfDirectionIsLeavingFullscreen = () => !isInFullscreen() +const hideFluff = () => { + setFluffDisplay('none') +} +const showFluff = () => { + setFluffDisplay('') +} - const playerWidthDiff = (player) => Math.abs(player.clientWidth - window.innerWidth) - const playerHeightDiff = (player) => Math.abs(player.clientHeight - window.innerHeight) +const isInFullscreen = () => Boolean(document.fullscreenElement) - const playerIsFullWidth = (player) => playerWidthDiff(player) <= 2 - const playerIsFullHeight = (player) => playerHeightDiff(player) <= 2 +// Opposite since we will be checking this only after it's changed by YouTube +const checkIfDirectionIsLeavingFullscreen = () => !isInFullscreen() - const debugPlayerSize = (player) => { - console.log('[YT-FFT] w:', player.clientHeight, window.innerHeight, 'h:', player.clientWidth, window.innerWidth) - } +const playerWidthDiff = (player) => Math.abs(player.clientWidth - window.innerWidth) +const playerHeightDiff = (player) => Math.abs(player.clientHeight - window.innerHeight) - const playerIsFullscreen = () => { - const player = document.querySelector('ytd-player') - debugPlayerSize(player) - return playerIsFullHeight(player) && playerIsFullWidth(player) - } +const playerIsFullWidth = (player) => playerWidthDiff(player) <= 2 +const playerIsFullHeight = (player) => playerHeightDiff(player) <= 2 - const isFinishedLeavingFullscreen = () => !playerIsFullscreen() - const isFinishedEnteringFullscreen = () => playerIsFullscreen() +const playerIsFullscreen = () => { + const player = document.querySelector('ytd-player') + return playerIsFullHeight(player) && playerIsFullWidth(player) +} - const transitionIsFinished = (directionIsLeavingFullscreen) => ( - directionIsLeavingFullscreen ? isFinishedLeavingFullscreen() : isFinishedEnteringFullscreen() - ) +const transitionIsFinished = (directionIsLeavingFullscreen) => ( + directionIsLeavingFullscreen ? !playerIsFullscreen() : playerIsFullscreen() +) - const timedOut = (startedAt) => new Date() - startedAt >= 2000 +const timedOut = (startedAt) => new Date() - startedAt >= 2000 - const showFluffWhenReady = (directionIsLeavingFullscreen, startedAt) => { - if (timedOut(startedAt)) { - console.log(`[YT-FFT] Timed out detecting finish of ${directionIsLeavingFullscreen ? 'leaving' : 'entering'} fullscreen transition`) +const showFluffWhenReady = (directionIsLeavingFullscreen, startedAt) => { + if (timedOut(startedAt)) { + showFluff() + } else if (transitionIsFinished(directionIsLeavingFullscreen)) { + // Delay a little after entering fullscreen for reliability, since delay before showing the fluff when entering fullscreen is not noticeable + if (directionIsLeavingFullscreen) { showFluff() - } else if (transitionIsFinished(directionIsLeavingFullscreen)) { - console.log(`[YT-FFT] Finished ${directionIsLeavingFullscreen ? 'leaving' : 'entering'} fullscreen transition`) - // Delay a little after entering fullscreen for reliability, since delay before showing the fluff when entering fullscreen is not noticeable - directionIsLeavingFullscreen ? showFluff() : setTimeout(showFluff, 20) } else { - setTimeout(() => showFluffWhenReady(directionIsLeavingFullscreen, startedAt), 10) + setTimeout(showFluff, 20) } + } else { + setTimeout(() => showFluffWhenReady(directionIsLeavingFullscreen, startedAt), 10) } - - const fastToggleFullScreen = () => { - hideFluff() - // Wait until YouTube's event handler has executed. This is required since the order of event handler execution is not guaranteed, and we need to be able to reliably detect the transition direction - setTimeout(() => { - const directionIsLeavingFullscreen = checkIfDirectionIsLeavingFullscreen() - console.log(`[YT-FFT] Waiting until ${directionIsLeavingFullscreen ? 'leaving' : 'entering'} fullscreen transition has finished`) - showFluffWhenReady(directionIsLeavingFullscreen, new Date()) - }, 10) - } - - const isWritingText = (e) => ( - e.path[0].tagName == 'INPUT' || - e.path[0].id == 'contenteditable-root' - ) - - const delegateEvent = (eventName, elementSelector, handler) => { - document.addEventListener(eventName, (e) => { - // loop parent nodes from the target to the delegation node - for (var target = e.target; target && target != this; target = target.parentNode) { - if (target.matches && target.matches(elementSelector)) { - handler(target, e) - break - } +} + +const fastToggleFullScreen = () => { + hideFluff() + // Wait until YouTube's event handler has executed. This is required since the order of event handler execution is not guaranteed, and we need to be able to reliably detect the transition direction + setTimeout(() => { + const directionIsLeavingFullscreen = checkIfDirectionIsLeavingFullscreen() + showFluffWhenReady(directionIsLeavingFullscreen, new Date()) + }, 10) +} + +const isWritingText = (e) => ( + e.path[0].tagName === 'INPUT' || + e.path[0].id === 'contenteditable-root' +) + +const delegateEvent = (eventName, elementSelector, handler) => { + document.addEventListener(eventName, (e) => { + // loop parent nodes from the target to the delegation node + for (let target = e.target; target && target !== window; target = target.parentNode) { + if (target.matches && target.matches(elementSelector)) { + handler(target, e) + break } - }, false) - } - - const addEventListeners = () => { - delegateEvent('click', '.ytp-fullscreen-button', e => { - if (isWatchVideoPage()) { - fastToggleFullScreen() - } - }) + } + }, false) +} - delegateEvent('dblclick', 'video', e => { - if (isWatchVideoPage()) { - fastToggleFullScreen() - } - }) +const addEventListeners = () => { + delegateEvent('click', '.ytp-fullscreen-button', () => { + if (isWatchVideoPage()) { + fastToggleFullScreen() + } + }) - document.addEventListener("keydown", e => { - if (isWatchVideoPage() && e.code == 'KeyF' && !isWritingText(e)) { - console.log(e) - fastToggleFullScreen() - } - }) - } + delegateEvent('dblclick', 'video', () => { + if (isWatchVideoPage()) { + fastToggleFullScreen() + } + }) - addEventListeners() + document.addEventListener("keydown", e => { + if (isWatchVideoPage() && e.code === 'KeyF' && !isWritingText(e)) { + fastToggleFullScreen() + } + }) +} - console.log(`[YT-FFT] Initialised`) -})(); +addEventListeners()