Fix Youtube 360 stereo video layout issues (#2634)

MozillaReality · Jan 14, 2020 · be84df2 · be84df2
1 parent 174d5bd
commit be84df2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git 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
@@ -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,15 +127,15 @@ 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);
         }
     }
 
     // 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;
     }