Merge branch 'update-for-new-Netflix-player-2021.08'

7 files changed, 140 insertions, 17 deletions

diff --git a/src/controls.ts b/src/controls.ts
index 4be1752..cc695fd 100644
--- a/src/controls.ts
+++ b/src/controls.ts
@@ -1,4 +1,4 @@
-// Copyright (c) 2020  Teddy Wing
+// Copyright (c) 2020–2021  Teddy Wing
 //
 // This file is part of Immersive.
 //
@@ -17,6 +17,7 @@
 
 import logger from './logger';
 
+// 2021.08.14: This may be obsolete, replaced by `seamless.ts`.
 
 const controls = {
 	// Hide playback controls.
@@ -27,7 +28,7 @@ const controls = {
 		hide_cursor();
 
 		const controls_el = document.querySelector(
-			'.PlayerControlsNeo__layout.PlayerControlsNeo__layout--active'
+			'.watch-video--bottom-controls-container'
 		);
 		logger.debug('hide():', 'Controls:', controls_el);
 
diff --git a/src/fullscreen_credits.ts b/src/fullscreen_credits.ts
index f558221..e436ed5 100644
--- a/src/fullscreen_credits.ts
+++ b/src/fullscreen_credits.ts
@@ -1,4 +1,4 @@
-// Copyright (c) 2020  Teddy Wing
+// Copyright (c) 2020–2021  Teddy Wing
 //
 // This file is part of Immersive.
 //
@@ -15,7 +15,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Immersive. If not, see <https://www.gnu.org/licenses/>.
 
-import controls from './controls';
+import logger from './logger';
 import wait_element from './wait_element';
 
 
@@ -25,19 +25,52 @@ function init_mutation_observer (player) {
 		for (var i = 0; i < mutation_list.length; i++) {
 			const mutation = mutation_list[i];
 			const player = mutation.target as HTMLElement;
+			const video = player.querySelector('video') as HTMLElement;
 
 			// The `postplay` class minimises the movie. Remove it if it gets
 			// added to remain in full frame.
-			if (player.classList.contains('postplay')) {
-				player.classList.remove('postplay');
+			if (player.classList.contains('watch-video--player-view-minimized')) {
+				logger.debug('fullscreen_credits', 'init_mutation_observer()', 'Maximising');
 
-				// Playback controls are removed when postplay is activated.
-				// Re-enable them.
-				player.click();
+				player.classList.remove('watch-video--player-view-minimized');
+
+				// Resize the video to full frame. Otherwise it will shrink for
+				// 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.
-				controls.hide();
+				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();
+
+				// 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;
 			}
@@ -54,7 +87,7 @@ function init_mutation_observer (player) {
 
 // Initialise the mutation observer when the video player becomes available.
 export default function init () {
-	wait_element('.NFPlayer.nf-player-container')
+	wait_element('.watch-video--player-view')
 		.then(function(player) {
 			init_mutation_observer(player);
 		});
diff --git a/src/index.ts b/src/index.ts
index 58d4367..237d232 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-// Copyright (c) 2020  Teddy Wing
+// Copyright (c) 2020–2021  Teddy Wing
 //
 // This file is part of Immersive.
 //
@@ -16,14 +16,19 @@
 // along with Immersive. If not, see <https://www.gnu.org/licenses/>.
 
 import fullscreen_credits from './fullscreen_credits';
+import logger from './logger';
+import seamless from './seamless';
 import styles from './styles';
 import watch_credits from './watch_credits';
 
 
 function main () {
+	logger.debug('Initialising');
+
 	styles();
 	fullscreen_credits();
 	watch_credits();
+	seamless();
 }
 
 
diff --git a/src/seamless.ts b/src/seamless.ts
new file mode 100644
index 0000000..50595d9
--- /dev/null
+++ b/src/seamless.ts
@@ -0,0 +1,73 @@
+// Copyright (c) 2021  Teddy Wing
+//
+// This file is part of Immersive.
+//
+// Immersive is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Immersive is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Immersive. If not, see <https://www.gnu.org/licenses/>.
+
+import logger from './logger';
+import wait_element from './wait_element';
+
+
+// Hide the cursor when seamless credits are played.
+function init_mutation_observer (player) {
+	const 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 seamless_controls = document.querySelector(
+				'.SeamlessControls--container'
+			);
+
+			if (seamless_controls) {
+				logger.debug('seamless', 'init_mutation_observer()', 'Handling seamless');
+				const style_el = document.createElement('style');
+
+				// Hide the cursor.
+				document.head.appendChild(style_el);
+
+				const stylesheet = style_el.sheet as CSSStyleSheet;
+
+				stylesheet.insertRule(`
+					body {
+						cursor: none !important;
+					}`,
+					stylesheet.cssRules.length
+				);
+
+				document.body.onmousemove = function() {
+					document.head.removeChild(style_el);
+				}
+
+				return;
+			}
+		}
+	});
+
+	observer.observe(
+		player,
+		{
+			childList: true,
+			subtree: true
+		}
+	);
+}
+
+// Initialise the mutation observer when the video player becomes available.
+export default function init () {
+	wait_element('.watch-video--player-view')
+		.then(function(player) {
+			init_mutation_observer(player);
+		});
+}
diff --git a/src/styles.ts b/src/styles.ts
index 73ae7c9..c809a43 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -1,4 +1,4 @@
-// Copyright (c) 2020  Teddy Wing
+// Copyright (c) 2020–2021  Teddy Wing
 //
 // This file is part of Immersive.
 //
@@ -23,12 +23,21 @@ export default function styles () {
 
 	const stylesheet = style.sheet as CSSStyleSheet;
 
+	// 2021.08.13: May want to remove `.player-view-childrens`, which is now
+	// replaced by `.advisory-container`.
 	stylesheet.insertRule(`
 		/* "Back to Browse" button that appears when credits are minimised. */
 		.OriginalsPostPlay-BackgroundTrailer .BackToBrowse,
+		.watch-video--seamless-back,
+
+		/* Promo that appears during credis */
+		.OriginalsPostPlay-BackgroundTrailer,
+		.SeamlessControls--background-artwork-visible,
+		.ptrack-container.fill-container,
 
 		/* Age rating. */
 		.player-view-childrens,
+		.advisory-container,
 
 		/* "Watch Credits" button. */
 		[data-uia="watch-credits-seamless-button"],
@@ -37,7 +46,8 @@ export default function styles () {
 		a[aria-label="Skip Intro"],
 		a[aria-label="Skip Recap"],
 		a[aria-label="Next Episode"],
-		[data-uia="next-episode-seamless-button"] {
+		[data-uia="next-episode-seamless-button"],
+		.watch-video--skip-content {
 			visibility: hidden !important;
 		}`,
 		stylesheet.cssRules.length
diff --git a/src/userscript-header.txt b/src/userscript-header.txt
index fafc46c..a23894d 100644
--- a/src/userscript-header.txt
+++ b/src/userscript-header.txt
@@ -1,13 +1,13 @@
 // ==UserScript==
 // @name Netflix Immersive
 // @description Netflix user script providing a more immersive experience
-// @version 0.0.1
+// @version 0.1.0
 // @namespace com.teddywing
 // @run-at document-idle
 // @match https://www.netflix.com/*
 // ==/UserScript==
 
-// Copyright (c) 2020  Teddy Wing
+// Copyright (c) 2020–2021  Teddy Wing
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
diff --git a/src/watch_credits.ts b/src/watch_credits.ts
index f41844a..061cda1 100644
--- a/src/watch_credits.ts
+++ b/src/watch_credits.ts
@@ -1,4 +1,4 @@
-// Copyright (c) 2020  Teddy Wing
+// Copyright (c) 2020–2021  Teddy Wing
 //
 // This file is part of Immersive.
 //
@@ -19,6 +19,7 @@ import controls from './controls';
 import logger from './logger';
 import wait_element from './wait_element';
 
+// 2021.08.14: This may be obsolete, replaced by `seamless.ts`.
 
 // Remove the "Watch Credits" button.
 function init_mutation_observer (controls_el) {