From 76d73cd941a2f7102b9112f5c3081c1f7a72ff55 Mon Sep 17 00:00:00 2001
From: kaffem <29717789+kaffem@users.noreply.github.com>
Date: Fri, 5 Feb 2021 10:13:12 +0100
Subject: [PATCH] #173 PoC for the Autoplay/pause feature

---
 src/html/settings.html                        |  6 +++
 src/javascript/configuration/configuration.ts |  2 +
 src/javascript/enhancements/anilyr.ts         | 41 ++++++++++++++++++-
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/html/settings.html b/src/html/settings.html
index ff1ea70..f4c54f9 100644
--- a/src/html/settings.html
+++ b/src/html/settings.html
@@ -44,6 +44,12 @@
         <input type="checkbox" id="playerAutoplayAfterScreenshot" data-default-value="true" />
         <label for="playerAutoplayAfterScreenshot">Autoplay after screenshots</label><br />
 
+        <input type="checkbox" id="playerAutopauseAfterFocusLost" data-default-value="true" />
+        <label for="playerAutoplayAfterScreenshot">Autopause after tab unfocused</label><br />
+
+        <input type="checkbox" id="playerAutoplayAfterFocusGain" data-default-value="true" />
+        <label for="playerAutoplayAfterScreenshot">Autoplay after tab focused</label><br />
+
         <h3>Watch2gether</h3>
         <input type="checkbox" id="w2gDisplayCharacterCounter" data-default-value="true" />
         <label for="w2gDisplayCharacterCounter">Display character count in chat</label><br />
diff --git a/src/javascript/configuration/configuration.ts b/src/javascript/configuration/configuration.ts
index 64207c6..3736e35 100644
--- a/src/javascript/configuration/configuration.ts
+++ b/src/javascript/configuration/configuration.ts
@@ -14,6 +14,8 @@ export const SETTINGS_animeLanguageDisplay = 'animeLanguageDisplay';
 export const SETTINGS_requestBeautifyPage = 'requestBeautifyPage';
 // player
 export const SETTINGS_playerAutoplayAfterScreenshot = 'playerAutoplayAfterScreenshot';
+export const SETTINGS_playerAutopauseAfterFocusLost = 'playerAutopauseAfterFocusLost';
+export const SETTINGS_playerAutoplayAfterFocusGain = 'playerAutoplayAfterFocusGain';
 // w2g
 export const SETTINGS_w2gDisplayCharacterCounter = 'w2gDisplayCharacterCounter';
 class Configuration {
diff --git a/src/javascript/enhancements/anilyr.ts b/src/javascript/enhancements/anilyr.ts
index 7e32362..ed04a42 100644
--- a/src/javascript/enhancements/anilyr.ts
+++ b/src/javascript/enhancements/anilyr.ts
@@ -1,9 +1,13 @@
-import { getGlobalConfiguration, SETTINGS_playerAutoplayAfterScreenshot } from '../configuration/configuration';
+import { getGlobalConfiguration,
+    SETTINGS_playerAutoplayAfterScreenshot,
+    SETTINGS_playerAutopauseAfterFocusLost,
+    SETTINGS_playerAutoplayAfterFocusGain } from '../configuration/configuration';
 import * as core from '../utils/aniwatchCore';
 import * as helper from '../utils/helpers';
 
 const SCREENSHOT_TOOLTIP_ID = 'anilyr-screenshots-tooltip';
 const PLAYER_ID = 'player';
+let onVisible: boolean;
 
 export function init(): void {
     getGlobalConfiguration().getProperty(SETTINGS_playerAutoplayAfterScreenshot, value => {
@@ -16,6 +20,18 @@ export function init(): void {
             }, "^/anime/[0-9]*/[0-9]*$");
         }
     });
+
+    getGlobalConfiguration().getProperty(SETTINGS_playerAutopauseAfterFocusLost, value => {
+        if (value) {
+            core.registerScript((node: Node) => {
+                addVisibilityChangeListener();
+            }, "^/anime/[0-9]*/[0-9]*$");
+        }
+    });
+
+    getGlobalConfiguration().getProperty(SETTINGS_playerAutoplayAfterFocusGain, value => {
+        onVisible = value;
+    });
 }
 
 function observeScreenshotTooltip(tooltip: HTMLElement): void {
@@ -38,6 +54,25 @@ function observeScreenshotTooltip(tooltip: HTMLElement): void {
     });
 }
 
+function addVisibilityChangeListener(): void{
+    window.addEventListener('visibilitychange', observeTabFocus, false);
+}
+
+function observeTabFocus(): void {
+    let docState = document.visibilityState;
+    let playerElement = findPlayerElement();
+    if (docState === 'hidden') {
+        if (helper.assigned(playerElement)) {
+            pausePlayer(playerElement);
+        }
+    }
+    else if (docState === 'visible' && onVisible) {
+        if (helper.assigned(playerElement)) {
+            resumePlayer(playerElement);
+        }
+    }
+}
+
 function findPlayerElement(): HTMLVideoElement {
     let playerCandidate = document.getElementById(PLAYER_ID);
     if (playerCandidate instanceof HTMLVideoElement) {
@@ -49,4 +84,8 @@ function findPlayerElement(): HTMLVideoElement {
 
 function resumePlayer(player: HTMLVideoElement) {
     player.play();
+}
+
+function pausePlayer(player: HTMLVideoElement) {
+    player.pause()
 }
\ No newline at end of file