Merge branch 'develop' into feature/#161-autoscroll-w2g

# Conflicts:
#	src/javascript/app.ts
#	src/javascript/configuration/configuration.ts

package.json

@@ -39,11 +39,11 @@
     },
     "devDependencies": {
         "@babel/compat-data": "^7.12.13",
-        "@babel/core": "^7.12.13",
+        "@babel/core": "^7.12.16",
         "@babel/helper-module-imports": "^7.12.13",
         "@babel/plugin-proposal-class-properties": "^7.12.13",
         "@babel/plugin-proposal-private-methods": "^7.12.13",
-        "@babel/preset-env": "^7.12.13",
+        "@babel/preset-env": "^7.12.16",
         "@babel/register": "^7.12.13",
         "@types/chrome": "0.0.129",
         "babelify": "^10.0.0",
@@ -70,11 +70,11 @@
         "gulp-typescript": "^6.0.0-alpha.1",
         "gulp-zip": "^5.0.2",
         "merge-stream": "^2.0.0",
-        "postcss": "^8.2.4",
-        "sass": "^1.32.6",
+        "postcss": "^8.2.6",
+        "sass": "^1.32.7",
         "terser": "^5.5.1",
         "tsify": "^5.0.2",
-        "typescript": "^4.1.3",
+        "typescript": "^4.1.5",
         "vinyl-buffer": "^1.0.1",
         "vinyl-source-stream": "^2.0.0",
         "web-ext-types": "^3.2.1"

src/html/settings.html

@@ -44,12 +44,21 @@
         <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="playerAutopauseAfterFocusLost">Autopause after tab unfocused</label><br />
+
+        <input type="checkbox" id="playerAutoplayAfterFocusGain" data-default-value="true" />
+        <label for="playerAutoplayAfterFocusGain">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 />
         <input type="checkbox" id="w2gAutoscrollToUnseen" data-default-value="true" />
         <label for="w2gAutoscrollToUnseen">Autoscroll to the first unseen episode</label><br />
 
+        <input type="checkbox" id="w2gAutotoggleHide" data-default-value="true" />
+        <label for="w2gAutotoggleHide">Autotoggle the Hide-Button for w2g</label><br />
+
         <br /><br />
         <button id="btnSave">Save</button>
         <button id="btnReset">Reset</button>

src/javascript/app.ts

@@ -10,8 +10,7 @@ import { init as languageDisplay } from './enhancements/languageDisplay';
 import { init as notifications } from './enhancements/notifications';
 import { init as quickSearch } from './enhancements/quickSearch';
 import { init as timeConversion } from './enhancements/timeConversion';
-import { init as watch2getherChat } from './enhancements/watch2getherChat';
-import { init as watch2getherAutoscroll } from './enhancements/watch2getherAutoscroll';
+import { init as watch2gether } from './enhancements/watch2gether';
 // css
 import { init as cssEnhancements } from './enhancements/cssEnhancements';
 
@@ -29,8 +28,7 @@ languageDisplay();
 notifications();
 quickSearch();
 timeConversion();
-watch2getherChat();
-watch2getherAutoscroll();
+watch2gether();
 
 // css
 cssEnhancements();

src/javascript/configuration/configuration.ts

@@ -14,8 +14,11 @@ 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';
+export const SETTINGS_w2gAutotoggleHide = 'w2gAutotoggleHide';
 export const SETTINGS_w2gAutoscrollToUnseen = 'w2gAutoscrollToUnseen';
 class Configuration {
     settingsCache: Map<string, boolean>;

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 resumePlayerOnVisible: 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) => {
+                window.addEventListener('visibilitychange', observeTabFocus, false);
+            }, "^/anime/[0-9]*/[0-9]*$");
+        }
+    });
+
+    getGlobalConfiguration().getProperty(SETTINGS_playerAutoplayAfterFocusGain, value => {
+        resumePlayerOnVisible = value;
+    });
 }
 
 function observeScreenshotTooltip(tooltip: HTMLElement): void {
@@ -23,7 +39,7 @@ function observeScreenshotTooltip(tooltip: HTMLElement): void {
         mutations.forEach(mutation => {
             // Switched to invisible
             if (!mutation.oldValue.includes('display: none') && helper.isHtmlElement(mutation.target) && (mutation.target as HTMLElement).style.display == 'none') {
-                let playerElement = findPlayerElement();
+                let playerElement = findPlayerElement(PLAYER_ID);
                 if (helper.assigned(playerElement)) {
                     resumePlayer(playerElement);
                 }
@@ -38,8 +54,24 @@ function observeScreenshotTooltip(tooltip: HTMLElement): void {
     });
 }
 
-function findPlayerElement(): HTMLVideoElement {
-    let playerCandidate = document.getElementById(PLAYER_ID);
+
+function observeTabFocus(): void {
+    let docState = document.visibilityState;
+    let playerElement = findPlayerElement(PLAYER_ID);
+    if (docState === 'hidden') {
+        if (helper.assigned(playerElement)) {
+            pausePlayer(playerElement);
+        }
+    }
+    else if (docState === 'visible' && resumePlayerOnVisible) {
+        if (helper.assigned(playerElement)) {
+            resumePlayer(playerElement);
+        }
+    }
+}
+
+export function findPlayerElement(id: string): HTMLVideoElement {
+    let playerCandidate = document.getElementById(id);
     if (playerCandidate instanceof HTMLVideoElement) {
         return playerCandidate;
     }
@@ -50,3 +82,7 @@ function findPlayerElement(): HTMLVideoElement {
 function resumePlayer(player: HTMLVideoElement) {
     player.play();
 }
+
+function pausePlayer(player: HTMLVideoElement) {
+    player.pause()
+}

src/javascript/enhancements/watch2gether.ts

@@ -1,16 +1,33 @@
 import * as core from '../utils/aniwatchCore';
 import { v4 as uuidv4 } from 'uuid';
-import { getGlobalConfiguration, SETTINGS_w2gDisplayCharacterCounter } from '../configuration/configuration';
+import { getGlobalConfiguration, SETTINGS_w2gDisplayCharacterCounter, SETTINGS_w2gAutotoggleHide } from '../configuration/configuration';
 import { assigned } from '../utils/helpers';
+import { findPlayerElement } from "../enhancements/anilyr";
+
+const PLAYER_ID = 'wPlayer';
+let hidden: boolean;
 
 export function init(): void {
     getGlobalConfiguration().getProperty(SETTINGS_w2gDisplayCharacterCounter, value => {
         if (value) {
+            core.runAfterLoad(() => {
+                manipulateChatInput();
+            }, "^/watch2gether/.*$");
             core.runAfterLocationChange(() => {
                 manipulateChatInput();
             }, "^/watch2gether/.*$");
         }
     });
+    getGlobalConfiguration().getProperty(SETTINGS_w2gAutotoggleHide, value => {
+        if (value) {
+            core.runAfterLoad(() => {
+                addAutohideListener();
+            }, "^/watch2gether/.*$");
+            core.runAfterLocationChange(() => {
+                addAutohideListener();
+            }, "^/watch2gether/.*$");
+        }
+    });
 }
 
 function manipulateChatInput(): void {
@@ -63,3 +80,27 @@ function updateCharCounter(textarea: HTMLTextAreaElement, charCounterSpan: HTMLS
         }, 200);
     }
 }
+
+function addAutohideListener(): void {
+    let playerElement = findPlayerElement(PLAYER_ID);
+    let hideButton: HTMLButtonElement = document.getElementsByClassName('no-margin md-button md-ink-ripple layout-align-center-center layout-row')[0] as HTMLButtonElement;
+    if (assigned(playerElement) && assigned(hideButton)) {
+        if (hideButton.textContent.includes('HIDE')) {
+            hidden = false;
+        } else if (hideButton.textContent.includes('SHOW')) {
+            hidden = true;
+        }
+        playerElement.addEventListener('play', fn => {
+            if (!hidden) {
+                hideButton.click();
+                hidden = !hidden;
+            }
+        })
+        playerElement.addEventListener('pause', fn => {
+            if (hidden) {
+                hideButton.click();
+                hidden = !hidden;
+            }
+        })
+    }
+}