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 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

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(); 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); }