Merge branch 'develop' into feature/#161-autoscroll-w2g

# Conflicts:
#	src/javascript/app.ts
#	src/javascript/configuration/configuration.ts
This commit is contained in:
Serraniel 2021-02-13 20:04:51 +01:00
commit c0cd4ff873
Signed by: Serraniel
GPG key ID: 3690B4E7364525D3
7 changed files with 194 additions and 2103 deletions

2180
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -39,11 +39,11 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/compat-data": "^7.12.13", "@babel/compat-data": "^7.12.13",
"@babel/core": "^7.12.13", "@babel/core": "^7.12.16",
"@babel/helper-module-imports": "^7.12.13", "@babel/helper-module-imports": "^7.12.13",
"@babel/plugin-proposal-class-properties": "^7.12.13", "@babel/plugin-proposal-class-properties": "^7.12.13",
"@babel/plugin-proposal-private-methods": "^7.12.13", "@babel/plugin-proposal-private-methods": "^7.12.13",
"@babel/preset-env": "^7.12.13", "@babel/preset-env": "^7.12.16",
"@babel/register": "^7.12.13", "@babel/register": "^7.12.13",
"@types/chrome": "0.0.129", "@types/chrome": "0.0.129",
"babelify": "^10.0.0", "babelify": "^10.0.0",
@ -70,11 +70,11 @@
"gulp-typescript": "^6.0.0-alpha.1", "gulp-typescript": "^6.0.0-alpha.1",
"gulp-zip": "^5.0.2", "gulp-zip": "^5.0.2",
"merge-stream": "^2.0.0", "merge-stream": "^2.0.0",
"postcss": "^8.2.4", "postcss": "^8.2.6",
"sass": "^1.32.6", "sass": "^1.32.7",
"terser": "^5.5.1", "terser": "^5.5.1",
"tsify": "^5.0.2", "tsify": "^5.0.2",
"typescript": "^4.1.3", "typescript": "^4.1.5",
"vinyl-buffer": "^1.0.1", "vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0", "vinyl-source-stream": "^2.0.0",
"web-ext-types": "^3.2.1" "web-ext-types": "^3.2.1"

View file

@ -44,12 +44,21 @@
<input type="checkbox" id="playerAutoplayAfterScreenshot" data-default-value="true" /> <input type="checkbox" id="playerAutoplayAfterScreenshot" data-default-value="true" />
<label for="playerAutoplayAfterScreenshot">Autoplay after screenshots</label><br /> <label for="playerAutoplayAfterScreenshot">Autoplay after screenshots</label><br />
<input type="checkbox" id="playerAutopauseAfterFocusLost" data-default-value="true" />
<label for="playerAutopauseAfterFocusLost">Autopause after tab unfocused</label><br />
<input type="checkbox" id="playerAutoplayAfterFocusGain" data-default-value="true" />
<label for="playerAutoplayAfterFocusGain">Autoplay after tab focused</label><br />
<h3>Watch2gether</h3> <h3>Watch2gether</h3>
<input type="checkbox" id="w2gDisplayCharacterCounter" data-default-value="true" /> <input type="checkbox" id="w2gDisplayCharacterCounter" data-default-value="true" />
<label for="w2gDisplayCharacterCounter">Display character count in chat</label><br /> <label for="w2gDisplayCharacterCounter">Display character count in chat</label><br />
<input type="checkbox" id="w2gAutoscrollToUnseen" data-default-value="true" /> <input type="checkbox" id="w2gAutoscrollToUnseen" data-default-value="true" />
<label for="w2gAutoscrollToUnseen">Autoscroll to the first unseen episode</label><br /> <label for="w2gAutoscrollToUnseen">Autoscroll to the first unseen episode</label><br />
<input type="checkbox" id="w2gAutotoggleHide" data-default-value="true" />
<label for="w2gAutotoggleHide">Autotoggle the Hide-Button for w2g</label><br />
<br /><br /> <br /><br />
<button id="btnSave">Save</button> <button id="btnSave">Save</button>
<button id="btnReset">Reset</button> <button id="btnReset">Reset</button>

View file

@ -10,8 +10,7 @@ import { init as languageDisplay } from './enhancements/languageDisplay';
import { init as notifications } from './enhancements/notifications'; import { init as notifications } from './enhancements/notifications';
import { init as quickSearch } from './enhancements/quickSearch'; import { init as quickSearch } from './enhancements/quickSearch';
import { init as timeConversion } from './enhancements/timeConversion'; import { init as timeConversion } from './enhancements/timeConversion';
import { init as watch2getherChat } from './enhancements/watch2getherChat'; import { init as watch2gether } from './enhancements/watch2gether';
import { init as watch2getherAutoscroll } from './enhancements/watch2getherAutoscroll';
// css // css
import { init as cssEnhancements } from './enhancements/cssEnhancements'; import { init as cssEnhancements } from './enhancements/cssEnhancements';
@ -29,8 +28,7 @@ languageDisplay();
notifications(); notifications();
quickSearch(); quickSearch();
timeConversion(); timeConversion();
watch2getherChat(); watch2gether();
watch2getherAutoscroll();
// css // css
cssEnhancements(); cssEnhancements();

View file

@ -14,8 +14,11 @@ export const SETTINGS_animeLanguageDisplay = 'animeLanguageDisplay';
export const SETTINGS_requestBeautifyPage = 'requestBeautifyPage'; export const SETTINGS_requestBeautifyPage = 'requestBeautifyPage';
// player // player
export const SETTINGS_playerAutoplayAfterScreenshot = 'playerAutoplayAfterScreenshot'; export const SETTINGS_playerAutoplayAfterScreenshot = 'playerAutoplayAfterScreenshot';
export const SETTINGS_playerAutopauseAfterFocusLost = 'playerAutopauseAfterFocusLost';
export const SETTINGS_playerAutoplayAfterFocusGain = 'playerAutoplayAfterFocusGain';
// w2g // w2g
export const SETTINGS_w2gDisplayCharacterCounter = 'w2gDisplayCharacterCounter'; export const SETTINGS_w2gDisplayCharacterCounter = 'w2gDisplayCharacterCounter';
export const SETTINGS_w2gAutotoggleHide = 'w2gAutotoggleHide';
export const SETTINGS_w2gAutoscrollToUnseen = 'w2gAutoscrollToUnseen'; export const SETTINGS_w2gAutoscrollToUnseen = 'w2gAutoscrollToUnseen';
class Configuration { class Configuration {
settingsCache: Map<string, boolean>; settingsCache: Map<string, boolean>;

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 core from '../utils/aniwatchCore';
import * as helper from '../utils/helpers'; import * as helper from '../utils/helpers';
const SCREENSHOT_TOOLTIP_ID = 'anilyr-screenshots-tooltip'; const SCREENSHOT_TOOLTIP_ID = 'anilyr-screenshots-tooltip';
const PLAYER_ID = 'player'; const PLAYER_ID = 'player';
let resumePlayerOnVisible: boolean;
export function init(): void { export function init(): void {
getGlobalConfiguration().getProperty(SETTINGS_playerAutoplayAfterScreenshot, value => { getGlobalConfiguration().getProperty(SETTINGS_playerAutoplayAfterScreenshot, value => {
@ -16,6 +20,18 @@ export function init(): void {
}, "^/anime/[0-9]*/[0-9]*$"); }, "^/anime/[0-9]*/[0-9]*$");
} }
}); });
getGlobalConfiguration().getProperty(SETTINGS_playerAutopauseAfterFocusLost, value => {
if (value) {
core.registerScript((node: Node) => {
window.addEventListener('visibilitychange', observeTabFocus, false);
}, "^/anime/[0-9]*/[0-9]*$");
}
});
getGlobalConfiguration().getProperty(SETTINGS_playerAutoplayAfterFocusGain, value => {
resumePlayerOnVisible = value;
});
} }
function observeScreenshotTooltip(tooltip: HTMLElement): void { function observeScreenshotTooltip(tooltip: HTMLElement): void {
@ -23,7 +39,7 @@ function observeScreenshotTooltip(tooltip: HTMLElement): void {
mutations.forEach(mutation => { mutations.forEach(mutation => {
// Switched to invisible // Switched to invisible
if (!mutation.oldValue.includes('display: none') && helper.isHtmlElement(mutation.target) && (mutation.target as HTMLElement).style.display == 'none') { if (!mutation.oldValue.includes('display: none') && helper.isHtmlElement(mutation.target) && (mutation.target as HTMLElement).style.display == 'none') {
let playerElement = findPlayerElement(); let playerElement = findPlayerElement(PLAYER_ID);
if (helper.assigned(playerElement)) { if (helper.assigned(playerElement)) {
resumePlayer(playerElement); resumePlayer(playerElement);
} }
@ -38,8 +54,24 @@ function observeScreenshotTooltip(tooltip: HTMLElement): void {
}); });
} }
function findPlayerElement(): HTMLVideoElement {
let playerCandidate = document.getElementById(PLAYER_ID); function observeTabFocus(): void {
let docState = document.visibilityState;
let playerElement = findPlayerElement(PLAYER_ID);
if (docState === 'hidden') {
if (helper.assigned(playerElement)) {
pausePlayer(playerElement);
}
}
else if (docState === 'visible' && resumePlayerOnVisible) {
if (helper.assigned(playerElement)) {
resumePlayer(playerElement);
}
}
}
export function findPlayerElement(id: string): HTMLVideoElement {
let playerCandidate = document.getElementById(id);
if (playerCandidate instanceof HTMLVideoElement) { if (playerCandidate instanceof HTMLVideoElement) {
return playerCandidate; return playerCandidate;
} }
@ -50,3 +82,7 @@ function findPlayerElement(): HTMLVideoElement {
function resumePlayer(player: HTMLVideoElement) { function resumePlayer(player: HTMLVideoElement) {
player.play(); player.play();
} }
function pausePlayer(player: HTMLVideoElement) {
player.pause()
}

View file

@ -1,16 +1,33 @@
import * as core from '../utils/aniwatchCore'; import * as core from '../utils/aniwatchCore';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { getGlobalConfiguration, SETTINGS_w2gDisplayCharacterCounter } from '../configuration/configuration'; import { getGlobalConfiguration, SETTINGS_w2gDisplayCharacterCounter, SETTINGS_w2gAutotoggleHide } from '../configuration/configuration';
import { assigned } from '../utils/helpers'; import { assigned } from '../utils/helpers';
import { findPlayerElement } from "../enhancements/anilyr";
const PLAYER_ID = 'wPlayer';
let hidden: boolean;
export function init(): void { export function init(): void {
getGlobalConfiguration().getProperty(SETTINGS_w2gDisplayCharacterCounter, value => { getGlobalConfiguration().getProperty(SETTINGS_w2gDisplayCharacterCounter, value => {
if (value) { if (value) {
core.runAfterLoad(() => {
manipulateChatInput();
}, "^/watch2gether/.*$");
core.runAfterLocationChange(() => { core.runAfterLocationChange(() => {
manipulateChatInput(); manipulateChatInput();
}, "^/watch2gether/.*$"); }, "^/watch2gether/.*$");
} }
}); });
getGlobalConfiguration().getProperty(SETTINGS_w2gAutotoggleHide, value => {
if (value) {
core.runAfterLoad(() => {
addAutohideListener();
}, "^/watch2gether/.*$");
core.runAfterLocationChange(() => {
addAutohideListener();
}, "^/watch2gether/.*$");
}
});
} }
function manipulateChatInput(): void { function manipulateChatInput(): void {
@ -63,3 +80,27 @@ function updateCharCounter(textarea: HTMLTextAreaElement, charCounterSpan: HTMLS
}, 200); }, 200);
} }
} }
function addAutohideListener(): void {
let playerElement = findPlayerElement(PLAYER_ID);
let hideButton: HTMLButtonElement = document.getElementsByClassName('no-margin md-button md-ink-ripple layout-align-center-center layout-row')[0] as HTMLButtonElement;
if (assigned(playerElement) && assigned(hideButton)) {
if (hideButton.textContent.includes('HIDE')) {
hidden = false;
} else if (hideButton.textContent.includes('SHOW')) {
hidden = true;
}
playerElement.addEventListener('play', fn => {
if (!hidden) {
hideButton.click();
hidden = !hidden;
}
})
playerElement.addEventListener('pause', fn => {
if (hidden) {
hideButton.click();
hidden = !hidden;
}
})
}
}