fullscreen_credits.ts: Hide controls after clicking minimised video

Now that the controls are shown and hidden by being added to and removed
from the DOM (instead of with CSS classes as before), we need a
different method to hide player controls after clicking on the minimised
video to maximise it and enable the controls again.

Here, we add CSS that hides the controls (and the "Back to Browse"
button, which also appears in sync with them) so that they don't appear
after the script auto-maximises the video. Four seconds seemed to be
about enough time for the player to automatically hide them, at which
point we need to remove the styles so that the controls can be accessed
by users.

2 files changed, 46 insertions, 39 deletions

diff --git a/netflix-immersive.user.js b/netflix-immersive.user.js
index b55a537..5605da6 100644
--- a/netflix-immersive.user.js
+++ b/netflix-immersive.user.js
@@ -78,21 +78,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var wait_element_1 = require("./wait_element");
 // Prevent credits from being minimised.
 function init_mutation_observer(player) {
-    // const controls_observer = new MutationObserver(function(mutation_list) {
-    // 	for (var i = 0; i < mutation_list.length; i++) {
-    // 		const mutation = mutation_list[i];
-    // 		const player = mutation.target as HTMLElement;
-    // 		const controls_el = player.querySelector(
-    // 			'.watch-video--bottom-controls-container'
-    // 		) as HTMLElement;
-    //
-    // 		controls_el.parentNode.removeChild(controls_el);
-    //
-    // 		return;
-    // 	}
-    // });
     var observer = new MutationObserver(function (mutation_list) {
-        for (var i = 0; i < mutation_list.length; i++) {
+        var _loop_1 = function () {
             var mutation = mutation_list[i];
             var player_1 = mutation.target;
             var video = player_1.querySelector('video');
@@ -104,17 +91,29 @@ function init_mutation_observer(player) {
                 // a second until the click event kicks in.
                 video.style.height = null;
                 video.style.width = 'inherit';
+                // Activating playback controls makes them visible. Keep them
+                // hidden.
+                var style_el_1 = document.createElement('style');
+                document.head.appendChild(style_el_1);
+                var stylesheet = style_el_1.sheet;
+                stylesheet.insertRule("\n\t\t\t\t\t.watch-video--back-container {\n\t\t\t\t\t\tvisibility: hidden !important;\n\t\t\t\t\t}\n\n\t\t\t\t\t.watch-video--bottom-controls-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}", stylesheet.cssRules.length);
                 // Playback controls are removed when postplay is activated.
                 // Re-enable them.
                 var click_area = player_1.children[0];
                 click_area.click();
-                // Activating playback controls makes them visible. Keep them
-                // hidden.
-                // controls.hide();
-                // controls_observer.observe(player, { subtree: true });
-                // '.watch-video--bottom-controls-container'
-                return;
+                // Once the player controls auto-hide themselves, remove our
+                // forced hiding so that the controls become user-accessible
+                // again.
+                setTimeout(function () {
+                    document.head.removeChild(style_el_1);
+                }, 4000);
+                return { value: void 0 };
             }
+        };
+        for (var i = 0; i < mutation_list.length; i++) {
+            var state_1 = _loop_1();
+            if (typeof state_1 === "object")
+                return state_1.value;
         }
     });
     observer.observe(player, {
diff --git a/src/fullscreen_credits.ts b/src/fullscreen_credits.ts
index f3cefcb..cb78551 100644
--- a/src/fullscreen_credits.ts
+++ b/src/fullscreen_credits.ts
@@ -21,20 +21,6 @@ import wait_element from './wait_element';
 
 // Prevent credits from being minimised.
 function init_mutation_observer (player) {
-	// const controls_observer = new MutationObserver(function(mutation_list) {
-	// 	for (var i = 0; i < mutation_list.length; i++) {
-	// 		const mutation = mutation_list[i];
-	// 		const player = mutation.target as HTMLElement;
-	// 		const controls_el = player.querySelector(
-	// 			'.watch-video--bottom-controls-container'
-	// 		) as HTMLElement;
-    //
-	// 		controls_el.parentNode.removeChild(controls_el);
-    //
-	// 		return;
-	// 	}
-	// });
-
 	const observer = new MutationObserver(function(mutation_list) {
 		for (var i = 0; i < mutation_list.length; i++) {
 			const mutation = mutation_list[i];
@@ -51,16 +37,38 @@ function init_mutation_observer (player) {
 				video.style.height = null;
 				video.style.width = 'inherit';
 
+				// Activating playback controls makes them visible. Keep them
+				// hidden.
+				const style_el = document.createElement('style');
+				document.head.appendChild(style_el);
+
+				const stylesheet = style_el.sheet as CSSStyleSheet;
+
+				stylesheet.insertRule(`
+					.watch-video--back-container {
+						visibility: hidden !important;
+					}
+
+					.watch-video--bottom-controls-container {
+						display: none !important;
+					}`,
+					stylesheet.cssRules.length
+				);
+
 				// Playback controls are removed when postplay is activated.
 				// Re-enable them.
 				const click_area = player.children[0] as HTMLElement;
 				click_area.click();
 
-				// Activating playback controls makes them visible. Keep them
-				// hidden.
-				// controls.hide();
-				// controls_observer.observe(player, { subtree: true });
-				// '.watch-video--bottom-controls-container'
+				// Once the player controls auto-hide themselves, remove our
+				// forced hiding so that the controls become user-accessible
+				// again.
+				setTimeout(
+					function() {
+						document.head.removeChild(style_el);
+					},
+					4000
+				);
 
 				return;
 			}