Add Youtube webcompat webextension

[MortimerGoro]

• Fixes YouTube displays 980px layout #862
• Fixes YouTube 360 videos do not play if user changes resolution > 1080p (from YouTube player's Settings) #1019

Note: When https://bugzilla.mozilla.org/show_bug.cgi?id=1511177 lands we probably can remove the viewport change injection. That should also avoid the layout change.

[bluemarvin]

Is there anything we can do to bump up the resolution by default? Or is that on the server side?

[MortimerGoro]

Is there anything we can do to bump up the resolution by default? Or is that on the server side?

We should be able to do that from JS. I'm looking into it.

[MortimerGoro]

I was able to get the Youtube Player API instance from the WebExtension,and check all the available qualities. But setPlaybackQuality didn't work.

I found this in the docs...

setPlaybackQuality is now considered a "no-op"; calling this function will not change the player behavior. The player will use a variety of signals to determine the optimal playback quality.
Users are able to manually request a specific playback quality via the quality selector in the player controls.

So unless we can inject a touch event and fake the click to the quality selector, it's not going to be easy to change the quality

[bluemarvin]

@MortimerGoro, do we know what metrics they are using to select the lowest resolution? I assume this doesn’t happen on desktop?

[MortimerGoro]

I think they use UA and window size, but not sure if they use more metrics. @cvan may know better

[cvan]

thanks! reviewing rn. revisiting my old notes, I'm quite certain we can make this work.

P.S. thanks for beating me to the punch in writing this patch. 😍

[cvan]

nice work! the CSS style via the content script does in fact remove the silly 360 warning 👍

I did some investigating yesterday and here are my conclusions:

https://gist.github.com/cvan/6f8196c1e8fce2165eb6847eba89f2c7

I was able to add these lines to your main.js content script, and YouTube 360 videos started playing at max quality! 😄 🎉

// Open the `Settings` menu.
document.querySelector('ytp-settings-button, .ytp-settings-button').click();

// Select the `Quality` sub-menu.
document.querySelector('ytp-settings-menu ytp-menuitem:last-child, .ytp-settings-menu .ytp-menuitem:last-child').click();

// Select the best `Quality`.
document.querySelector('ytp-quality-menu ytp-menuitem:first-child, .ytp-quality-menu .ytp-menuitem:first-child').click();

thanks for taking the initiative with this one. I'd be happy to help follow follow-up issues and write patches for the two recommendations I made in my doc.

thanks, @MortimerGoro 👍

[MortimerGoro]

Good trick to change the quality @cvan! I'm going to merge this, but please create a different PR adding all the quality change code. Maybe is better to select something like 1440p by default instead of the maximum one (until we have 4K performance issues sorted out)

[cvan]

was added in 1.1.3: https://github.com/MozillaReality/FirefoxReality/releases/tag/1.1.3e