1
|
|
|
import { getGlobalConfiguration, |
2
|
|
|
SETTINGS_playerAutoplayAfterScreenshot, |
3
|
|
|
SETTINGS_playerAutopauseAfterFocusLost, |
4
|
|
|
SETTINGS_playerAutoplayAfterFocusGain } from '../configuration/configuration'; |
5
|
|
|
import * as core from '../utils/aniwatchCore'; |
6
|
|
|
import * as helper from '../utils/helpers'; |
7
|
|
|
|
8
|
|
|
const SCREENSHOT_TOOLTIP_ID = 'anilyr-screenshots-tooltip'; |
9
|
|
|
const PLAYER_ID = 'player'; |
10
|
|
|
let resumePlayerOnVisible: boolean; |
11
|
|
|
|
12
|
|
|
export function init(): void { |
13
|
|
|
getGlobalConfiguration().getProperty(SETTINGS_playerAutoplayAfterScreenshot, value => { |
14
|
|
|
if (value) { |
15
|
|
|
core.registerScript((node: Node) => { |
16
|
|
|
let element = node as HTMLElement; |
17
|
|
|
if (helper.assigned(element) && element.id === SCREENSHOT_TOOLTIP_ID) { |
18
|
|
|
observeScreenshotTooltip(element); |
19
|
|
|
} |
20
|
|
|
}, "^/anime/[0-9]*/[0-9]*$"); |
21
|
|
|
} |
22
|
|
|
}); |
23
|
|
|
|
24
|
|
|
getGlobalConfiguration().getProperty(SETTINGS_playerAutopauseAfterFocusLost, value => { |
25
|
|
|
if (value) { |
26
|
|
|
core.registerScript((node: Node) => { |
27
|
|
|
window.addEventListener('visibilitychange', observeTabFocus, false); |
28
|
|
|
}, "^/anime/[0-9]*/[0-9]*$"); |
29
|
|
|
} |
30
|
|
|
}); |
31
|
|
|
|
32
|
|
|
getGlobalConfiguration().getProperty(SETTINGS_playerAutoplayAfterFocusGain, value => { |
33
|
|
|
resumePlayerOnVisible = value; |
34
|
|
|
}); |
35
|
|
|
} |
36
|
|
|
|
37
|
|
|
function observeScreenshotTooltip(tooltip: HTMLElement): void { |
38
|
|
|
let observer = new MutationObserver(mutations => { |
39
|
|
|
mutations.forEach(mutation => { |
40
|
|
|
// Switched to invisible |
41
|
|
|
if (!mutation.oldValue.includes('display: none') && helper.isHtmlElement(mutation.target) && (mutation.target as HTMLElement).style.display == 'none') { |
42
|
|
|
let playerElement = findPlayerElement(); |
43
|
|
|
if (helper.assigned(playerElement)) { |
44
|
|
|
resumePlayer(playerElement); |
45
|
|
|
} |
46
|
|
|
} |
47
|
|
|
}); |
48
|
|
|
}); |
49
|
|
|
|
50
|
|
|
observer.observe(tooltip, { |
51
|
|
|
attributes: true, |
52
|
|
|
attributeOldValue: true, |
53
|
|
|
attributeFilter: ['style'], |
54
|
|
|
}); |
55
|
|
|
} |
56
|
|
|
|
57
|
|
|
function observeTabFocus(): void { |
58
|
|
|
let docState = document.visibilityState; |
59
|
|
|
let playerElement = findPlayerElement(); |
60
|
|
|
if (docState === 'hidden') { |
61
|
|
|
if (helper.assigned(playerElement)) { |
62
|
|
|
pausePlayer(playerElement); |
63
|
|
|
} |
64
|
|
|
} |
65
|
|
|
else if (docState === 'visible' && resumePlayerOnVisible) { |
66
|
|
|
if (helper.assigned(playerElement)) { |
67
|
|
|
resumePlayer(playerElement); |
68
|
|
|
} |
69
|
|
|
} |
70
|
|
|
} |
71
|
|
|
|
72
|
|
|
function findPlayerElement(): HTMLVideoElement { |
73
|
|
|
let playerCandidate = document.getElementById(PLAYER_ID); |
74
|
|
|
if (playerCandidate instanceof HTMLVideoElement) { |
75
|
|
|
return playerCandidate; |
76
|
|
|
} |
77
|
|
|
|
78
|
|
|
return undefined; |
79
|
|
|
} |
80
|
|
|
|
81
|
|
|
function resumePlayer(player: HTMLVideoElement) { |
82
|
|
|
player.play(); |
83
|
|
|
} |
84
|
|
|
|
85
|
|
|
function pausePlayer(player: HTMLVideoElement) { |
86
|
|
|
player.pause() |
87
|
|
|
} |