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