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 1/4] #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 @@
+
+
+
+
+
+
Watch2gether
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
--
2.43.4
From 6d91dde44b5a17833de660c04bbd2ed88b38f9e4 Mon Sep 17 00:00:00 2001
From: kaffem <29717789+kaffem@users.noreply.github.com>
Date: Sat, 6 Feb 2021 23:08:12 +0100
Subject: [PATCH 2/4] settings fixed
---
src/html/settings.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/html/settings.html b/src/html/settings.html
index f4c54f9..41437e5 100644
--- a/src/html/settings.html
+++ b/src/html/settings.html
@@ -45,10 +45,10 @@
-
+
-
+
Watch2gether
--
2.43.4
From a01a7a83928c8cc325716935cefd74b0d5b21bdc Mon Sep 17 00:00:00 2001
From: kaffem <29717789+kaffem@users.noreply.github.com>
Date: Sat, 6 Feb 2021 23:08:53 +0100
Subject: [PATCH 3/4] moved the EventListener to the settings and delted the
function for it
---
src/javascript/enhancements/anilyr.ts | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/src/javascript/enhancements/anilyr.ts b/src/javascript/enhancements/anilyr.ts
index ed04a42..64e7f0b 100644
--- a/src/javascript/enhancements/anilyr.ts
+++ b/src/javascript/enhancements/anilyr.ts
@@ -24,7 +24,7 @@ export function init(): void {
getGlobalConfiguration().getProperty(SETTINGS_playerAutopauseAfterFocusLost, value => {
if (value) {
core.registerScript((node: Node) => {
- addVisibilityChangeListener();
+ window.addEventListener('visibilitychange', observeTabFocus, false);
}, "^/anime/[0-9]*/[0-9]*$");
}
});
@@ -54,10 +54,6 @@ function observeScreenshotTooltip(tooltip: HTMLElement): void {
});
}
-function addVisibilityChangeListener(): void{
- window.addEventListener('visibilitychange', observeTabFocus, false);
-}
-
function observeTabFocus(): void {
let docState = document.visibilityState;
let playerElement = findPlayerElement();
--
2.43.4
From c06838b67f9c5c9ad443af05a7d6d24149732472 Mon Sep 17 00:00:00 2001
From: kaffem <29717789+kaffem@users.noreply.github.com>
Date: Mon, 8 Feb 2021 06:04:48 +0100
Subject: [PATCH 4/4] renamed onVisible to resumePlayerOnVisible to indicate
its a boolean
---
src/javascript/enhancements/anilyr.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/javascript/enhancements/anilyr.ts b/src/javascript/enhancements/anilyr.ts
index 64e7f0b..82a9c98 100644
--- a/src/javascript/enhancements/anilyr.ts
+++ b/src/javascript/enhancements/anilyr.ts
@@ -7,7 +7,7 @@ import * as helper from '../utils/helpers';
const SCREENSHOT_TOOLTIP_ID = 'anilyr-screenshots-tooltip';
const PLAYER_ID = 'player';
-let onVisible: boolean;
+let resumePlayerOnVisible: boolean;
export function init(): void {
getGlobalConfiguration().getProperty(SETTINGS_playerAutoplayAfterScreenshot, value => {
@@ -30,7 +30,7 @@ export function init(): void {
});
getGlobalConfiguration().getProperty(SETTINGS_playerAutoplayAfterFocusGain, value => {
- onVisible = value;
+ resumePlayerOnVisible = value;
});
}
@@ -62,7 +62,7 @@ function observeTabFocus(): void {
pausePlayer(playerElement);
}
}
- else if (docState === 'visible' && onVisible) {
+ else if (docState === 'visible' && resumePlayerOnVisible) {
if (helper.assigned(playerElement)) {
resumePlayer(playerElement);
}
--
2.43.4