Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve performance #10

Closed
wants to merge 1 commit into from
Closed

Improve performance #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
180 changes: 83 additions & 97 deletions extension/contentScript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,122 +11,108 @@
// @grant none
// ==/UserScript==

(function() {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd thought enclosing the whole thing in a function was important to stop the scope leaking out, but I could be wrong there. Tampermonkey includes it in the template for a new script.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tampermonkey uses a very old template. In any browser used today, there is no need to use IEEE functions.

'use strict';
'use strict';

const isWatchVideoPage = () => window.location.pathname == "/watch"
const isWatchVideoPage = () => window.location.pathname === "/watch"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the necessity for all the triple equals?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

=== means that the type of the left-hand side is the same as the type of the right-hand side.


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)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without any explanation as to how performance is improved, I assume you mean it's by not having to log the player size debugging? I never noticed an impact. And it'd be helpful information to supply when reporting an issue, so I'd like to leave it in. If you're concerned about it, a more useful change would be to make it toggleable via config.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

console.log is useful when you are actively debugging the code. I don't think it is useful to print information and fill the dev console from these messages.

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()