diff --git a/app/src/main/assets/web_extensions/webcompat_youtube/main.css b/app/src/main/assets/web_extensions/webcompat_youtube/main.css index bbf73b07e..d381c2fff 100644 --- a/app/src/main/assets/web_extensions/webcompat_youtube/main.css +++ b/app/src/main/assets/web_extensions/webcompat_youtube/main.css @@ -36,3 +36,13 @@ ytd-rich-grid-video-renderer { --ytd-rich-grid-posts-per-row: 4 !important; } } + + +/* Youtube Videos tagged with Stereo VR have a layout problem, they don't take the whole area + of the video. This styles are used to make sure the video has the correct size for immersive + playback */ +div.ytp-fullscreen video, .fxr-vr-video { + width: 100% !important; + left: 0px !important; +} + diff --git a/app/src/main/assets/web_extensions/webcompat_youtube/main.js b/app/src/main/assets/web_extensions/webcompat_youtube/main.js index e4eefd5d5..ece898e04 100644 --- a/app/src/main/assets/web_extensions/webcompat_youtube/main.js +++ b/app/src/main/assets/web_extensions/webcompat_youtube/main.js @@ -78,6 +78,7 @@ class YoutubeExtension { const qs = new URLSearchParams(window.location.search); if (qs.get(VIDEO_PROJECTION_PARAM)) { logDebug(`Video has already a video projection selected: ${qs.get(VIDEO_PROJECTION_PARAM)}`); + this.updateVideoStyle(); return; } // There is no standard API to detect video projection yet. @@ -90,12 +91,21 @@ class YoutubeExtension { if (is360) { qs.set('mozVideoProjection', '360_auto'); this.updateURL(qs); + this.updateVideoStyle(); logDebug(`Video projection set to: ${qs.get(VIDEO_PROJECTION_PARAM)}`); } else { logDebug(`Video is flat, no projection selected`); } } + updateVideoStyle() { + const video = this.getVideo(); + if (video) { + video.classList.add('fxr-vr-video'); + logDebug('Added video projection style'); + } + } + overrideClick(event) { this.overrideVideoProjection(); const player = this.getPlayer(); @@ -117,7 +127,7 @@ class YoutubeExtension { // Force video play when entering immersive mode. setTimeout(() => this.retry("PlayVideo", () => { player.playVideo(); - return !document.getElementsByTagName("video")[0].paused; + return !this.getVideo().paused; }), 200); } } @@ -125,7 +135,7 @@ class YoutubeExtension { // Runs the callback when the video is ready (has loaded the first frame). waitForVideoReady(callback) { this.retry("VideoReady", () => { - const video = document.getElementsByTagName("video")[0]; + const video = this.getVideo(); if (!video) { return false; } @@ -147,6 +157,10 @@ class YoutubeExtension { return player.wrappedJSObject; } + getVideo() { + return document.getElementsByTagName('video')[0]; + } + // Get's the preferred video qualities for the current device. getPreferredQualities() { let all = ['hd2880', 'hd2160','hd1440', 'hd1080', 'hd720', 'large', 'medium']; @@ -169,7 +183,7 @@ class YoutubeExtension { } isVideoReady() { - const video = document.getElementsByTagName("video")[0]; + const video = this.getVideo(); return video && video.readyState >=2; }