Add Cinema Mode

[SanderDebets]

Added cinema mode functionality. This solves issue #1915

[ImprovedTube]

Thank you!! @SanderDebets

[ImprovedTube]

just made sure the features only runs when enabled:

579628d

@SanderDebets

---

but it seems to be restarting the player in HD and there seems to be more to do.

misc:
XPath: why not document.getElementById ? (or document.querySelector)
We prepared to use CSS too, like: html[it-player-cinema-mode-button=true] { }
why onClick?

[SanderDebets]

@ImprovedTube I'm not having the issue with it restarting the player in HD, is this in combination with some other settings in the extension?
I used Xpath as this was the only reliable way i found to consistently select the youtube player element. document.getElementById and document.querySelector did not work for me.
As for onClick and the CSS comment: do you mean implementing in css the functionality currenlty seen in onclick?

[ImprovedTube]

hi! @SanderDebets & sorry for the delay!

Xpath
We have to adjust the player in several features, so there is a variable assigned to the id="movie-player" by our mutation observer (which might be re-defined if the DOM changes.)

youtube/js&css/web-accessible/functions.js

Lines 174 to 176 in 86fb775

	} else if (id === 'movie_player') {
	if (!this.elements.player) {
	ImprovedTube.elements.player = node;

Fastest: getElementById 2. any CSS Selector ( Document: querySelector ) 3. XPath
XPath will be helpful addition later.
We can move it to our general functions.
It will be required to select stuff like //div[contains(span/text(), '')]

---

maybe this feature can be implemented with little CSS?

html[it-player-auto-cinema-mode=true] *:not(:has(#movie_player)):not(#movie_player):not(#movie_player *) { opacity: 0.15; }
html[it-player-auto-cinema-mode=true] #movie_player, #movie_player * { opacity: 1; }

---

and the page could fade in while scrolling down and fade out while scrolling back up

window.addEventListener('scroll', function() {
   if (window.scrollY > 1 + window.innerHeight * 0.001;  ) { {
    const elements = document.querySelectorAll('html[it-player-auto-cinema-mode=true] *:not(:has(#movie_player)):not(#movie_player):not(#movie_player *)');
    const opacity = window.scrollY / window.innerHeight * 5;
    elements.forEach(element => {
        element.style.opacity = opacity;
    });
}