Automatically click the "Watch Credits" button

TV series on Netflix now display a "Watch Credits" button when the
credits start rolling.

We can hide this button using CSS and the credits will continue playing
to the end, but while it's displayed, the player controls are hidden.

Automatically click the button to make it go away and reactivate the
player controls.

The tricky thing, though, is that the "Watch Credits" button doesn't
have a click handler. Instead, it listens to the "pointerdown" event, so
we have to construct one programmatically (and turn on `bubbles`,
otherwise the button doesn't react to the event) and dispatch it.

Moved `with_player` to `wait_element`, because now I need to wait for
more DOM elements than just the player element.

Add a new `controls` module since I need to hide the player controls in
both `fullscreen_credits` and `watch_credits`.

Add the `DOM` lib to `tsconfig.json` to give us DOM types.

1 files changed, 23 insertions, 0 deletions

diff --git a/src/controls.ts b/src/controls.ts
new file mode 100644
index 0000000..ad8f47c
--- /dev/null
+++ b/src/controls.ts
@@ -0,0 +1,23 @@
+import logger from './logger';
+import wait_element from './wait_element';
+
+
+const controls = {
+	hide: function() {
+		logger.debug('hide():', 'Hiding controls');
+
+		wait_element('.PlayerControlsNeo__layout.PlayerControlsNeo__layout--active')
+			.then(function(controls) {
+				logger.debug('hide():', 'Controls:', controls);
+
+				controls
+					.classList
+					.replace(
+						'PlayerControlsNeo__layout--active',
+						'PlayerControlsNeo__layout--inactive'
+					);
+			});
+	}
+};
+
+export default controls;