#173 PoC for the Autoplay/pause feature

This commit is contained in:
kaffem 2021-02-05 10:13:12 +01:00
parent eed9c844a1
commit 76d73cd941
3 changed files with 48 additions and 1 deletions

View file

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

View file

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

View file

@ -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) {
@ -50,3 +85,7 @@ function findPlayerElement(): HTMLVideoElement {
function resumePlayer(player: HTMLVideoElement) {
player.play();
}
function pausePlayer(player: HTMLVideoElement) {
player.pause()
}