Feature #300: Reduce quality when window loses focus

[Alpaczyk]

This commit is adding a feature described in #300. Users can choose the quality to which the player will lower when the window is unfocused. When the window is focused again, the quality is coming back to the desired one.

[ImprovedTube]

Awesome! @Alpaczyk

• you added a .vs/slnx.sqlite
• nice, you even translated the key to many language files!!

  • sorry, github shows conflicts (your fork wasnt updated since march 11)

    

    • and Github can't understand these changes (line breaks and tabs only) (besides that orders changed too)
      • which is why i claim white-space aren't required in the world and could be added as a flavor/theme locally, for beautification, like https://github.com/google/blockly (even thats utopia for today) (👋😅 @raszpl )
        • Except for python. - Or all code languages could be like python, including JSON and then we wouldn't use curly brackets { }. ( And then curly brackets could be the extra added visually only for those used to all other languages besides Python. )

Github also doesn't let me accept the .js changes alone already, before thinking more about JSON.

[raszpl]

This is a fun feature.

youtube/js&css/web-accessible/www.youtube.com/player.js

Line 524 in ab5619c

if(qualityWithoutFocus != 'disabled' && player){

will trigger for everyone :-) tons of problems with this all around, its the bogus way satus menu system stores user settings. I think this should be fine:
if(qualityWithoutFocus && qualityWithoutFocus != 'disabled' && player){

youtube/menu/skeleton-parts/player.js

Lines 956 to 959 in ab5619c

	refresh = function () {
	document.getElementById('player_quality').dispatchEvent(new CustomEvent('render'));
	document.getElementById('player_codecs').dispatchEvent(new CustomEvent('render'));
	document.getElementById('optimize_codec_for_hardware_acceleration').dispatchEvent(new CustomEvent('render'));

needs
document.getElementById('player_quality_without_focus').dispatchEvent(new CustomEvent('render'));
to update displayed resolution in case someone disables high res codecs

youtube/js&css/web-accessible/www.youtube.com/player.js

Lines 526 to 531 in ab5619c

	player.setPlaybackQuality(qualityWithoutFocus);
	player.setPlaybackQualityRange(qualityWithoutFocus);
	}
	if (this.focus === true){
	player.setPlaybackQuality(qualityWithFocus);
	player.setPlaybackQualityRange(qualityWithFocus);

There was this #1666 I cant find a video lacking 480p right now to test if its still an issue, if it is then this stupid amount of code in playerQuality is required:

youtube/js&css/web-accessible/www.youtube.com/player.js

Lines 479 to 509 in ab5619c

	ImprovedTube.playerQuality = function () {
	function closest (num, arr) {
	let curr = arr[0];
	let diff = Math.abs (num - curr);
	for (let val = 0; val < arr.length; val++) {
	let newdiff = Math.abs (num - arr[val]);
	if (newdiff < diff) {
	diff = newdiff;
	curr = arr[val];
	}
	}
	return curr;
	};
	var player = this.elements.player,
	quality = this.storage.player_quality;
	if (player && player.getAvailableQualityLevels && !player.dataset.defaultQuality) {
	var available_quality_levels = player.getAvailableQualityLevels();
	if (quality && quality !== 'auto') {
	if (available_quality_levels.includes(quality) === false) {
	let label = ['tiny', 'small', 'medium', 'large', 'hd720', 'hd1080', 'hd1440', 'hd2160', 'hd2880', 'highres'];
	let resolution = ['144', '240', '360', '480', '720', '1080', '1440', '2160', '2880', '4320'];
	let availableresolutions = available_quality_levels.reduce(function (array, elem) {
	array.push(resolution[label.indexOf(elem)]); return array;
	}, []);
	quality = closest (resolution[label.indexOf(quality)], availableresolutions);
	quality = label[resolution.indexOf(quality)];
	}

[ImprovedTube]

if(qualityWithoutFocus && qualityWithoutFocus != 'disabled' && player){

yes @raszpl we need if(qualityWithoutFocus while dropdown's defaults are not stored by default (#1685). And we won't need to check != 'disabled' anymore, if we stop to ever store that value (after checking/remembering if that has a purpose in any case or two)

---

the function can begin like this:

ImprovedTube.playerQualityWithoutFocus = function () { 
    qualityWithoutFocus = this.storage.player_quality_without_focus;
   	if(qualityWithoutFocus && qualityWithoutFocus != 'disabled'){`
 		var player = this.elements.player,
    	if (player) { 
			qualityWithFocus = this.storage.player_quality;
			.............

( same for playerQuality():

ImprovedTube.playerQuality = function ()
	quality = this.storage.player_quality;	
	if (quality && quality !== 'auto') {
		if (quality && quality !== 'auto') {
		var player = this.elements.player,
		if (player && player.getAvailableQualityLevels && !player.dataset.defaultQuality) {		if (player && player.getAvailableQualityLevels && !player.dataset.defaultQuality) {
		var available_quality_levels = player.getAvailableQualityLevels();		var available_quality_levels = player.getAvailableQualityLevels();	
			
			function closest (num, arr) {
                let curr = arr[0];
                let diff = Math.abs (num - curr);
				.......

)

And shorter, combined:

ImprovedTube.playerQualityWithoutFocus = function () {  qualityWithoutFocus = this.storage.player_quality_without_focus;
   if(qualityWithoutFocus && qualityWithoutFocus != 'disabled'){
   	if(this.focus === false) { ImprovedTube.playerQuality(qualityWithoutFocus);}
		else if (this.focus === true) { ImprovedTube.playerQuality(); }
	}
}	

adding qualityWithoutFocus ? quality = qualityWithoutFocus : to the start of playerQuality()...

(

ImprovedTube.playerQuality = function (qualityWithoutFocus) {
	qualityWithoutFocus ? quality = qualityWithoutFocus : quality = this.storage.player_quality; 
 	if (quality && quality !== 'auto') {
		var player = this.elements.player,
		if (player && player.getAvailableQualityLevels && !player.dataset.defaultQuality) {
		var available_quality_levels = player.getAvailableQualityLevels();	
			function closest (num, arr) {
                let curr = arr[0];
                let diff = Math.abs (num - curr);
                for (let val = 0; val < arr.length; val++) {
                    let newdiff = Math.abs (num - arr[val]);
                    if (newdiff < diff) {
                        diff = newdiff;
                        curr = arr[val];
                    }
                }
                return curr;
            };
			if (available_quality_levels.includes(quality) === false) {
				let label = ['tiny', 'small', 'medium', 'large', 'hd720', 'hd1080', 'hd1440', 'hd2160', 'hd2880', 'highres'];
				let resolution = ['144', '240', '360', '480', '720', '1080', '1440', '2160', '2880', '4320'];
				let availableresolutions = available_quality_levels.reduce(function (array, elem) {
					array.push(resolution[label.indexOf(elem)]); return array;
					}, []);

				quality = closest (resolution[label.indexOf(quality)], availableresolutions);
				quality = label[resolution.indexOf(quality)];
			}

			player.setPlaybackQualityRange(quality);
			player.setPlaybackQuality(quality);
			player.dataset.defaultQuality = quality;
		}
	}
};         

)

[ImprovedTube]

... if(this.focus === false) { if (remainingTime < (17s + 0.2% videoLength)) { break; }

(Pseudo code)

[Alpaczyk]

#2212 new pull request with changes regarding the comments