From 908dee56461ce740886349b29109fd3e76e8c949 Mon Sep 17 00:00:00 2001
From: kaffem <29717789+kaffem@users.noreply.github.com>
Date: Mon, 8 Feb 2021 05:58:28 +0100
Subject: [PATCH 1/6] #161 PoC for the autoscroll feature
---
src/html/settings.html | 2 +
src/javascript/app.ts | 2 +
src/javascript/configuration/configuration.ts | 1 +
.../enhancements/watch2getherAutoscroll.ts | 43 +++++++++++++++++++
4 files changed, 48 insertions(+)
create mode 100644 src/javascript/enhancements/watch2getherAutoscroll.ts
diff --git a/src/html/settings.html b/src/html/settings.html
index ff1ea70..bd7f0b0 100644
--- a/src/html/settings.html
+++ b/src/html/settings.html
@@ -47,6 +47,8 @@
Watch2gether
+
+
diff --git a/src/javascript/app.ts b/src/javascript/app.ts
index 0e714aa..6b5f329 100644
--- a/src/javascript/app.ts
+++ b/src/javascript/app.ts
@@ -11,6 +11,7 @@ import { init as notifications } from './enhancements/notifications';
import { init as quickSearch } from './enhancements/quickSearch';
import { init as timeConversion } from './enhancements/timeConversion';
import { init as watch2getherChat } from './enhancements/watch2getherChat';
+import { init as watch2getherAutoscroll } from './enhancements/watch2getherAutoscroll';
// css
import { init as cssEnhancements } from './enhancements/cssEnhancements';
@@ -29,6 +30,7 @@ notifications();
quickSearch();
timeConversion();
watch2getherChat();
+watch2getherAutoscroll();
// css
cssEnhancements();
\ No newline at end of file
diff --git a/src/javascript/configuration/configuration.ts b/src/javascript/configuration/configuration.ts
index 64207c6..a589ba1 100644
--- a/src/javascript/configuration/configuration.ts
+++ b/src/javascript/configuration/configuration.ts
@@ -16,6 +16,7 @@ export const SETTINGS_requestBeautifyPage = 'requestBeautifyPage';
export const SETTINGS_playerAutoplayAfterScreenshot = 'playerAutoplayAfterScreenshot';
// w2g
export const SETTINGS_w2gDisplayCharacterCounter = 'w2gDisplayCharacterCounter';
+export const SETTINGS_w2gAutoscrollToUnseen = 'w2gAutoscrollToUnseen';
class Configuration {
settingsCache: Map;
diff --git a/src/javascript/enhancements/watch2getherAutoscroll.ts b/src/javascript/enhancements/watch2getherAutoscroll.ts
new file mode 100644
index 0000000..e0e44f6
--- /dev/null
+++ b/src/javascript/enhancements/watch2getherAutoscroll.ts
@@ -0,0 +1,43 @@
+import { getGlobalConfiguration, SETTINGS_w2gAutoscrollToUnseen } from '../configuration/configuration';
+import * as core from '../utils/aniwatchCore';
+import { assigned } from '../utils/helpers';
+
+export function init(): void {
+ getGlobalConfiguration().getProperty(SETTINGS_w2gAutoscrollToUnseen, value => {
+ if (value) {
+ core.runAfterLocationChange(() => {
+ let element = findSearchResults();
+ if (assigned(element)) {
+ observeSearchResults(element);
+ }
+ }, "^/watch2gether/.*$");
+ }
+ });
+}
+
+function observeSearchResults(searchRes: Element): void {
+ let observer = new MutationObserver(mutations => {
+ mutations.forEach(mutation => {
+ let num = searchRes.getElementsByClassName('md-2-line border _md-button-wrap _md md-clickable animelist-completed').length;
+ scrollTo(searchRes, num);
+ });
+ });
+
+ observer.observe(searchRes, {
+ childList: true,
+ subtree: true,
+ });
+}
+
+function scrollTo(el: Element, pos: number): void {
+ let offset: number = 24;
+ el.scrollTo(0, pos * 72 + offset)
+}
+
+function findSearchResults(): Element {
+ let searchResults = document.getElementsByClassName('search-results');
+ if (searchResults[0] instanceof Element) {
+ return searchResults[0];
+ }
+ return undefined;
+}
From 3436f2a646973d4bb1b76f0cc92ae290a5269032 Mon Sep 17 00:00:00 2001
From: Serraniel
Date: Mon, 8 Feb 2021 18:41:20 +0100
Subject: [PATCH 2/6] #161 fixed typo
---
src/html/settings.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/html/settings.html b/src/html/settings.html
index bd7f0b0..f982569 100644
--- a/src/html/settings.html
+++ b/src/html/settings.html
@@ -48,7 +48,7 @@
-
+
From 6ab597924eecdd8be02f159826157f869b234896 Mon Sep 17 00:00:00 2001
From: Serraniel
Date: Mon, 8 Feb 2021 19:13:07 +0100
Subject: [PATCH 3/6] #161 Improved query to find first unseen episode
---
src/javascript/enhancements/watch2getherAutoscroll.ts | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/javascript/enhancements/watch2getherAutoscroll.ts b/src/javascript/enhancements/watch2getherAutoscroll.ts
index e0e44f6..0f0ba36 100644
--- a/src/javascript/enhancements/watch2getherAutoscroll.ts
+++ b/src/javascript/enhancements/watch2getherAutoscroll.ts
@@ -18,8 +18,10 @@ export function init(): void {
function observeSearchResults(searchRes: Element): void {
let observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
- let num = searchRes.getElementsByClassName('md-2-line border _md-button-wrap _md md-clickable animelist-completed').length;
- scrollTo(searchRes, num);
+ let scrollTarget = searchRes.querySelector('.ep-view md-list-item:not(.animelist-completed)');
+ if (assigned(scrollTarget)) {
+ scrollTarget.scrollIntoView();
+ }
});
});
From 6c0a197c83295b1256ab8dadf36603f1d64d9b0f Mon Sep 17 00:00:00 2001
From: Serraniel
Date: Mon, 8 Feb 2021 19:36:48 +0100
Subject: [PATCH 4/6] #161 Better scroll behaviour
---
.../enhancements/watch2getherAutoscroll.ts | 19 ++++++++-----------
1 file changed, 8 insertions(+), 11 deletions(-)
diff --git a/src/javascript/enhancements/watch2getherAutoscroll.ts b/src/javascript/enhancements/watch2getherAutoscroll.ts
index 0f0ba36..911ced8 100644
--- a/src/javascript/enhancements/watch2getherAutoscroll.ts
+++ b/src/javascript/enhancements/watch2getherAutoscroll.ts
@@ -17,12 +17,14 @@ export function init(): void {
function observeSearchResults(searchRes: Element): void {
let observer = new MutationObserver(mutations => {
- mutations.forEach(mutation => {
- let scrollTarget = searchRes.querySelector('.ep-view md-list-item:not(.animelist-completed)');
- if (assigned(scrollTarget)) {
- scrollTarget.scrollIntoView();
- }
- });
+ let scrollTarget = searchRes.querySelector('.ep-view md-list-item:not(.animelist-completed)') as HTMLElement;
+ if (assigned(scrollTarget)) {
+ // scroll container to episode first
+ searchRes.scrollTop = scrollTarget.offsetTop;
+
+ // then scroll page to episode if neccessarry
+ scrollTarget.scrollIntoView({ behavior: "smooth", block: "nearest" });
+ }
});
observer.observe(searchRes, {
@@ -31,11 +33,6 @@ function observeSearchResults(searchRes: Element): void {
});
}
-function scrollTo(el: Element, pos: number): void {
- let offset: number = 24;
- el.scrollTo(0, pos * 72 + offset)
-}
-
function findSearchResults(): Element {
let searchResults = document.getElementsByClassName('search-results');
if (searchResults[0] instanceof Element) {
From fea7d68963a84f2672c8ea05ba352061fe217cde Mon Sep 17 00:00:00 2001
From: Serraniel
Date: Sat, 13 Feb 2021 19:22:50 +0100
Subject: [PATCH 5/6] #161 Only observe the anime list to prevent bugs in
subtrees.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Subtree isn´t required to be observed any more, too.
---
.../enhancements/watch2getherAutoscroll.ts | 25 ++++++++++---------
1 file changed, 13 insertions(+), 12 deletions(-)
diff --git a/src/javascript/enhancements/watch2getherAutoscroll.ts b/src/javascript/enhancements/watch2getherAutoscroll.ts
index 911ced8..01b5ead 100644
--- a/src/javascript/enhancements/watch2getherAutoscroll.ts
+++ b/src/javascript/enhancements/watch2getherAutoscroll.ts
@@ -7,6 +7,7 @@ export function init(): void {
if (value) {
core.runAfterLocationChange(() => {
let element = findSearchResults();
+ console.log(element);
if (assigned(element)) {
observeSearchResults(element);
}
@@ -17,26 +18,26 @@ export function init(): void {
function observeSearchResults(searchRes: Element): void {
let observer = new MutationObserver(mutations => {
- let scrollTarget = searchRes.querySelector('.ep-view md-list-item:not(.animelist-completed)') as HTMLElement;
- if (assigned(scrollTarget)) {
- // scroll container to episode first
- searchRes.scrollTop = scrollTarget.offsetTop;
+ let scrollTarget = searchRes.querySelector('md-list-item:not(.animelist-completed):not(.animelist-completed-add)') as HTMLElement;
- // then scroll page to episode if neccessarry
- scrollTarget.scrollIntoView({ behavior: "smooth", block: "nearest" });
+ if (assigned(scrollTarget)) {
+ // The node isn´t in its correct position directly when it´s added so we wait a small bit of time before we start scrolling.
+ // Also works for long loading lists which need more time to load than we wait (for example One Piece).
+ window.setTimeout(() => {
+ // scroll container to episode first
+ searchRes.scrollTop = scrollTarget.offsetTop;
+
+ // then scroll page to episode if neccessarry
+ scrollTarget.scrollIntoView({ behavior: "smooth", block: "nearest" });
+ }, 500);
}
});
observer.observe(searchRes, {
childList: true,
- subtree: true,
});
}
function findSearchResults(): Element {
- let searchResults = document.getElementsByClassName('search-results');
- if (searchResults[0] instanceof Element) {
- return searchResults[0];
- }
- return undefined;
+ return document.querySelector('.search-results .ep-view');
}
From 2313c551edc32b3536c0bb943b1a6acad0d23c2c Mon Sep 17 00:00:00 2001
From: Serraniel
Date: Sat, 13 Feb 2021 20:22:43 +0100
Subject: [PATCH 6/6] =?UTF-8?q?=C3=A4161=20Moved=20autoscroll=20into=20w2g?=
=?UTF-8?q?=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/javascript/configuration/configuration.ts | 1 +
src/javascript/enhancements/watch2gether.ts | 49 ++++++++++++++++++-
.../enhancements/watch2getherAutoscroll.ts | 43 ----------------
3 files changed, 49 insertions(+), 44 deletions(-)
delete mode 100644 src/javascript/enhancements/watch2getherAutoscroll.ts
diff --git a/src/javascript/configuration/configuration.ts b/src/javascript/configuration/configuration.ts
index 8b7496d..8f5f926 100644
--- a/src/javascript/configuration/configuration.ts
+++ b/src/javascript/configuration/configuration.ts
@@ -20,6 +20,7 @@ export const SETTINGS_playerAutoplayAfterFocusGain = 'playerAutoplayAfterFocusGa
export const SETTINGS_w2gDisplayCharacterCounter = 'w2gDisplayCharacterCounter';
export const SETTINGS_w2gAutotoggleHide = 'w2gAutotoggleHide';
export const SETTINGS_w2gAutoscrollToUnseen = 'w2gAutoscrollToUnseen';
+
class Configuration {
settingsCache: Map;
diff --git a/src/javascript/enhancements/watch2gether.ts b/src/javascript/enhancements/watch2gether.ts
index b4e9590..2088d8a 100644
--- a/src/javascript/enhancements/watch2gether.ts
+++ b/src/javascript/enhancements/watch2gether.ts
@@ -1,6 +1,6 @@
import * as core from '../utils/aniwatchCore';
import { v4 as uuidv4 } from 'uuid';
-import { getGlobalConfiguration, SETTINGS_w2gDisplayCharacterCounter, SETTINGS_w2gAutotoggleHide } from '../configuration/configuration';
+import { getGlobalConfiguration, SETTINGS_w2gDisplayCharacterCounter, SETTINGS_w2gAutotoggleHide, SETTINGS_w2gAutoscrollToUnseen } from '../configuration/configuration';
import { assigned } from '../utils/helpers';
import { findPlayerElement } from "../enhancements/anilyr";
@@ -13,21 +13,42 @@ export function init(): void {
core.runAfterLoad(() => {
manipulateChatInput();
}, "^/watch2gether/.*$");
+
core.runAfterLocationChange(() => {
manipulateChatInput();
}, "^/watch2gether/.*$");
}
});
+
getGlobalConfiguration().getProperty(SETTINGS_w2gAutotoggleHide, value => {
if (value) {
core.runAfterLoad(() => {
addAutohideListener();
}, "^/watch2gether/.*$");
+
core.runAfterLocationChange(() => {
addAutohideListener();
}, "^/watch2gether/.*$");
}
});
+
+ getGlobalConfiguration().getProperty(SETTINGS_w2gAutoscrollToUnseen, value => {
+ if (value) {
+ core.runAfterLoad(() => {
+ let element = findSearchResults();
+ if (assigned(element)) {
+ scrollSearchResults(element);
+ }
+ }, "^/watch2gether/.*$");
+
+ core.runAfterLocationChange(() => {
+ let element = findSearchResults();
+ if (assigned(element)) {
+ scrollSearchResults(element);
+ }
+ }, "^/watch2gether/.*$");
+ }
+ });
}
function manipulateChatInput(): void {
@@ -104,3 +125,29 @@ function addAutohideListener(): void {
})
}
}
+
+function scrollSearchResults(searchRes: Element): void {
+ let observer = new MutationObserver(mutations => {
+ let scrollTarget = searchRes.querySelector('md-list-item:not(.animelist-completed):not(.animelist-completed-add)') as HTMLElement;
+
+ if (assigned(scrollTarget)) {
+ // The node isn´t in its correct position directly when it´s added so we wait a small bit of time before we start scrolling.
+ // Also works for long loading lists which need more time to load than we wait (for example One Piece).
+ window.setTimeout(() => {
+ // scroll container to episode first
+ searchRes.scrollTop = scrollTarget.offsetTop;
+
+ // then scroll page to episode if neccessarry
+ scrollTarget.scrollIntoView({ behavior: "smooth", block: "nearest" });
+ }, 500);
+ }
+ });
+
+ observer.observe(searchRes, {
+ childList: true,
+ });
+}
+
+function findSearchResults(): Element {
+ return document.querySelector('.search-results .ep-view');
+}
diff --git a/src/javascript/enhancements/watch2getherAutoscroll.ts b/src/javascript/enhancements/watch2getherAutoscroll.ts
deleted file mode 100644
index 01b5ead..0000000
--- a/src/javascript/enhancements/watch2getherAutoscroll.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { getGlobalConfiguration, SETTINGS_w2gAutoscrollToUnseen } from '../configuration/configuration';
-import * as core from '../utils/aniwatchCore';
-import { assigned } from '../utils/helpers';
-
-export function init(): void {
- getGlobalConfiguration().getProperty(SETTINGS_w2gAutoscrollToUnseen, value => {
- if (value) {
- core.runAfterLocationChange(() => {
- let element = findSearchResults();
- console.log(element);
- if (assigned(element)) {
- observeSearchResults(element);
- }
- }, "^/watch2gether/.*$");
- }
- });
-}
-
-function observeSearchResults(searchRes: Element): void {
- let observer = new MutationObserver(mutations => {
- let scrollTarget = searchRes.querySelector('md-list-item:not(.animelist-completed):not(.animelist-completed-add)') as HTMLElement;
-
- if (assigned(scrollTarget)) {
- // The node isn´t in its correct position directly when it´s added so we wait a small bit of time before we start scrolling.
- // Also works for long loading lists which need more time to load than we wait (for example One Piece).
- window.setTimeout(() => {
- // scroll container to episode first
- searchRes.scrollTop = scrollTarget.offsetTop;
-
- // then scroll page to episode if neccessarry
- scrollTarget.scrollIntoView({ behavior: "smooth", block: "nearest" });
- }, 500);
- }
- });
-
- observer.observe(searchRes, {
- childList: true,
- });
-}
-
-function findSearchResults(): Element {
- return document.querySelector('.search-results .ep-view');
-}