#161 PoC for the autoscroll feature

src/html/settings.html

@@ -47,6 +47,8 @@
         <h3>Watch2gether</h3>
         <input type="checkbox" id="w2gDisplayCharacterCounter" data-default-value="true" />
         <label for="w2gDisplayCharacterCounter">Display character count in chat</label><br />
+        <input type="checkbox" id="w2gAutoscrollToUnseen" data-default-value="true" />
+        <label for="w2gAutoscrollToUnseen">Autoscoll to the first unseen episode</label><br />
 
         <br /><br />
         <button id="btnSave">Save</button>

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();

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<string, boolean>;
 

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;
+}