Feature #300: Reduce quality when window loses focus (from pull request #2162)

[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.
By mistake I closed previous pull request

• I made the changes regarding @raszpl and @ImprovedTube comments

[raszpl]

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

Line 572 in c2febb1

if (this.focus === true){

should probably just be else here?

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

Line 574 in c2febb1

if (available_quality_levels.includes(quality) === false) {

assumes storage.player_quality is always enabled. ImprovedTube.playerQuality actually tests this, but its in the middle of function and easy to miss :(

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

Line 517 in c2febb1

if (quality && quality !== 'auto') {

this.focus === false case should save current playback quality, and try to restore saved value

hmm, something like this? :

ImprovedTube.playerQualityWithoutFocus = 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;
	};

	let player = this.elements.player,
		qualityWithoutFocus = this.storage.player_quality_without_focus,
		available_quality_levels = player.getAvailableQualityLevels();

	if(qualityWithoutFocus && qualityWithoutFocus != 'disabled' && player){
		if(this.focus === false) {
			ImprovedTube.qualityWithoutFocus = player.getPlaybackQuality();
			if (available_quality_levels.includes(qualityWithoutFocus) === 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;
				}, []);

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

			player.setPlaybackQualityRange(qualityWithoutFocus);
			player.setPlaybackQuality(qualityWithoutFocus);

		} else if (ImprovedTube.qualityWithoutFocus) {
			player.setPlaybackQualityRange(ImprovedTube.qualityWithoutFocus);
			player.setPlaybackQuality(ImprovedTube.qualityWithoutFocus);
		}
	}

};

BUT! no idea if player.getPlaybackQuality() is guaranteed to always return something valid and sane. There is also danger of playerQualityWithoutFocus being called very early when player was just created and YT is slowly ramping up video download while setting initial video quality to very low, then we set qualityWithoutFocus, then user switches to the tab and we force set this saved (qualityWithoutFocus) very low quality :o Its not as easy peasy as I first thought :(
hmm maybe just returning to 'auto' is safest? That will only leave annoyed those users users who
-set specific quality manually in the player
-minimize
-come back and see it restored to 'auto' :]

for the future: Ideally ImprovedTube should have a facility to monitor for user manually changing quality thru player interface during playback.

So the above, but with

		} else {
			player.setPlaybackQualityRange('auto');
			player.setPlaybackQuality('auto');
		}

should be fine?

ps: Seeing as both playerQuality and playerQualityWithoutFocus have to perform this stupid 'find closest quality available' dance and thus share almost half the functions code, maybe it would be prudent to combining both at some point later in time when its debugged/ironed out and battle tested.

[ImprovedTube]

started combining here #2162 (comment)

[raszpl]

merged before it was fixed

assumes storage.player_quality is always enabled

[ImprovedTube]

for the credits

[ImprovedTube]

@Alpaczyk @raszpl

/*------------------------------------------------------------------------------
QUALITY
------------------------------------------------------------------------------*/
ImprovedTube.playerQuality = function (quality) {
    if (!quality) 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)) {
                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.map(q => resolution[label.indexOf(q)]);
                quality = closest(resolution[label.indexOf(quality)], availableresolutions);
                quality = label[resolution.indexOf(quality)];
            }
            player.setPlaybackQualityRange(quality);
            player.setPlaybackQuality(quality);
            player.dataset.defaultQuality = quality;
        }
    }
};

/*------------------------------------------------------------------------------
QUALITY WITHOUT FOCUS
------------------------------------------------------------------------------*/
ImprovedTube.playerQualityWithoutFocus = function () {
    var qualityWithoutFocus = this.storage.player_quality_without_focus;
    if (qualityWithoutFocus && qualityWithoutFocus !== 'disabled') {
        if (this.focus === true) {
            if (ImprovedTube.qualityBeforeBlur) {
                ImprovedTube.playerQuality(ImprovedTube.qualityBeforeBlur);
            } else {
                ImprovedTube.playerQuality();
            }
        } else if (this.focus === false) {
            ImprovedTube.qualityBeforeBlur = this.elements.player.getPlaybackQuality();
            if (ImprovedTube.played_time > 0 && ImprovedTube.formatSecond(player.getDuration() * 0.997 - player.getCurrentTime()) > 11) {
                setTimeout(function () {
                    if (this.focus === false) {
                        ImprovedTube.playerQuality(qualityWithoutFocus);
                    }
                }, Math.max(321, 3210 - ImprovedTube.played_time));
            }
        }
    }
};

[ImprovedTube]

also, does this make sense? @raszpl c2e2e1a
(just making sure these dont run uncessarily:
ImprovedTube.alwaysShowProgressBar();
ImprovedTube.playerRemainingDuration();
)

[raszpl]

crashes (player.getDuration)
doesnt work after crash fix because playerQuality is written in a way to only work once (!player.dataset.defaultQuality)
doesn do anything because ImprovedTube.formatSecond returns ISO 8601
doesn do anything because this inside settimeout is not ImprovedTube
what was the intend for checking time?
Why settimeout in the first place, and why such weird delay?
finally:

There is also danger of playerQualityWithoutFocus being called very early when player was just created and YT is slowly ramping up video download while setting initial video quality to very low, then we set qualityWithoutFocus, then user switches to the tab and we force set this saved (qualityWithoutFocus) very low quality

are you using Cunningham's Law on me ? :]

[raszpl]

also would be nice to throw checking iv video is paused in there