Hide Youtube overlays in immersive

MozillaReality · May 19, 2020 · 791a1e7 · 791a1e7
1 parent 47cc413
commit 791a1e7
Showing 1 changed file with 53 additions and 11 deletions.
diff --git a/app/src/main/assets/web_extensions/webcompat_youtube/main.js b/app/src/main/assets/web_extensions/webcompat_youtube/main.js
@@ -8,7 +8,8 @@ const YT_SELECTORS = {
   embedPlayer: '.html5-video-player',
   largePlayButton: '.ytp-large-play-button',
   thumbnail: '.ytp-cued-thumbnail-overlay-image',
-  embedTitle: '.ytp-title-text'
+  embedTitle: '.ytp-title-text',
+  overlays: '.videowall-endscreen, .ytp-upnext, .ytp-ce-element'
 };
 const ENABLE_LOGS = true;
 const logDebug = (...args) => ENABLE_LOGS && console.log(LOGTAG, ...args);
@@ -73,11 +74,27 @@ class YoutubeExtension {
         return text.includes('360');
     }
 
+    is360Video() {
+        const targets = [
+            document.querySelector(YT_SELECTORS.disclaimer),
+            document.querySelector(YT_SELECTORS.embedTitle)
+        ];
+        return targets.some((node) => node && this.is360(node.textContent));;
+    }
+
     isStereo(text) {
         const words = text.toLowerCase().split(/\s+|\./);
         return words.includes('stereo') || words.includes('3d') || words.includes('vr');
     }
 
+    isStereoVideo() {
+        const targets = [
+            document.querySelector(YT_SELECTORS.disclaimer),
+            document.querySelector(YT_SELECTORS.embedTitle)
+        ];
+        return targets.some((node) => node && this.isStereo(node.textContent));;
+    }
+
     // Automatically select a video projection if needed
     overrideVideoProjection() {
         if (!this.isWatchingPage()) {
@@ -92,14 +109,8 @@ class YoutubeExtension {
         }
         // There is no standard API to detect video projection yet.
         // Try to infer it from the video disclaimer or title for now.
-        const targets = [
-            document.querySelector(YT_SELECTORS.disclaimer),
-            document.querySelector(YT_SELECTORS.embedTitle)
-        ];
-        const is360 = targets.some((node) => node && this.is360(node.textContent));
-        if (is360) {
-            const stereo = targets.some((node) => node && this.isStereo(node.textContent));
-            qs.set('mozVideoProjection', stereo ? '360s_auto' : '360_auto');
+        if (this.is360Video()) {
+            qs.set('mozVideoProjection', this.isStereoVideo() ? '360s_auto' : '360_auto');
             this.updateURL(qs);
             this.updateVideoStyle();
             logDebug(`Video projection set to: ${qs.get(VIDEO_PROJECTION_PARAM)}`);
@@ -200,13 +211,40 @@ class YoutubeExtension {
         return video && video.readyState >=2;
     }
 
+    // Hide overlays when in immersive mode
+    // https://github.com/MozillaReality/FirefoxReality/issues/2673
+    hideOverlays() {
+        if (youtube.is360Video() || youtube.isStereoVideo()) {
+            var overlays = document.querySelectorAll(YT_SELECTORS.overlays);
+            var observer = new MutationObserver((mutations) => {
+                if (youtube.isInFullscreen()) {
+                    for (const mutation of mutations) {
+                        if (mutation.target) {
+                            mutation.target.style.display = 'none';
+                        }
+                    }
+                }
+            });
+            for(const overlay of overlays) {
+                observer.observe(overlay, { attributes: true });
+            }
+        }
+    }
+
+    isInFullscreen() {
+        return !((document.fullScreenElement !== undefined && document.fullScreenElement === null) ||
+         (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) ||
+         (document.mozFullScreen !== undefined && !document.mozFullScreen) ||
+         (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen));
+    }
+
     // Utility function to retry tasks max n times until the execution is successful.
     retry(taskName, task, attempts = 10, interval = 200) {
         let succeeded = false;
         try {
             succeeded = task();
         } catch (ex) {
-            logError(`Got exception runnning ${taskName} task: ${ex}`);
+            logError(`Got exception running ${taskName} task: ${ex}`);
         }
         if (succeeded) {
             logDebug(`${taskName} succeeded`);
@@ -239,10 +277,14 @@ window.addEventListener('load', () => {
     // This prevents the infinite spinner problem.
     // See https://github.com/MozillaReality/FirefoxReality/issues/1433
     if (youtube.isWatchingPage()) {
-        youtube.waitForVideoReady(() => youtube.overrideQualityRetry());
+        youtube.waitForVideoReady(() => {
+            youtube.hideOverlays();
+            youtube.overrideQualityRetry();
+        });
     }
 });
 
 window.addEventListener('pushstate', () => youtube.overrideVideoProjection());
 window.addEventListener('popstate', () => youtube.overrideVideoProjection());
 window.addEventListener('click', event => youtube.overrideClick(event));
+window.addEventListener("yt-navigate-finish", () => youtube.hideOverlays());