Hide the cursor when credits play

When the credits start playing, we click on the player, giving it the
`active` class, and causing the mouse cursor to appear. The cursor
should remain hidden.

1 files changed, 53 insertions, 0 deletions

diff --git a/src/controls.ts b/src/controls.ts
index fe4a727..4be1752 100644
--- a/src/controls.ts
+++ b/src/controls.ts
@@ -23,6 +23,9 @@ const controls = {
 	hide: function() {
 		logger.debug('hide():', 'Hiding controls');
 
+		// When the player is activated, the mouse cursor is shown.
+		hide_cursor();
+
 		const controls_el = document.querySelector(
 			'.PlayerControlsNeo__layout.PlayerControlsNeo__layout--active'
 		);
@@ -38,3 +41,53 @@ const controls = {
 };
 
 export default controls;
+
+
+// Hide the cursor, which appears due to the `active` CSS class when the player
+// is reactivated.
+function hide_cursor () {
+	const style_el = document.createElement('style');
+
+	// Hide the cursor.
+	function style () {
+		document.head.appendChild(style_el);
+
+		const stylesheet = style_el.sheet as CSSStyleSheet;
+
+		stylesheet.insertRule(`
+			.NFPlayer.nf-player-container.active {
+				cursor: none !important;
+			}`,
+			stylesheet.cssRules.length
+		);
+	}
+
+	// When the player reappears, set it to inactive.
+	function set_player_inactive () {
+		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;
+
+				if (player.classList.contains('active')) {
+					player.classList.replace('active', 'inactive');
+
+					document.head.removeChild(style_el);
+					observer.disconnect();
+
+					return;
+				}
+			}
+		});
+
+		observer.observe(
+			document.querySelector('.NFPlayer.nf-player-container'),
+			{
+				attributeFilter: ['class']
+			}
+		);
+	}
+
+	set_player_inactive()
+	style();
+}