src/javascript/enhancements/notifications.js

@@ -0,0 +1,33 @@
+import * as core from '../utils/aniwatchCore';
+import * as helper from '../utils/helpers';
+
+export function init() {
+    core.runAfterLoad(() => {
+        updateNotificationsInTitle();
+    }, ".*");
+
+    core.runAfterLocationChange(() => {
+        updateNotificationsInTitle();
+    }, ".*");
+}
+
+function getNotificationCount() {
+    if (core.isLoggedIn()) {
+        let menuUserText = document.getElementById('materialize-menu-dropdown').innerText.split('\n')[4];
+        let notificationCount = menuUserText.match(/\d+/)?.[0] ?? 0;
+        return notificationCount;
+    } else {
+        return 0;
+    }
+}
+
+function updateNotificationsInTitle() {
+    let count = getNotificationCount();
+
+    if (helper.assigned(count) && count > 0) {
+        // document.title is updated after the event is triggered, so we delay our title update by a reasonable time
+        setTimeout(() => {
+            document.title = `(${count}) ${document.title}`;
+        }, 100);
+    }
+}

src/javascript/index.js

@@ -6,6 +6,7 @@ import { initHelpers } from './utils/helpers';
 import { init as anilyr } from './enhancements/anilyr';
 import { init as animeRequests } from './enhancements/animeRequests';
 import { init as languageDisplay } from './enhancements/languageDisplay';
+import { init as notifications } from './enhancements/notifications';
 import { init as quickSearch } from './enhancements/quickSearch';
 import { init as watch2getherChat } from './enhancements/watch2getherChat';
 
@@ -19,5 +20,6 @@ initHelpers();
 anilyr();
 animeRequests();
 languageDisplay();
+notifications();
 quickSearch();
 watch2getherChat();

src/javascript/utils/aniwatchCore.js

@@ -1,7 +1,9 @@
 import * as helper from './helpers';
 
+/* SCRIPT LOGICS */
 let __scripts = [];
 let __afterLoadScripts = [];
+let __afterLocationChangeScripts = [];
 
 export function initCore() {
     let observer = new MutationObserver(mutations => {
@@ -18,6 +20,29 @@ export function initCore() {
         attributes: true
     });
 
+    runAfterLoad(() => {
+        let loadingBar = document.getElementById('enable-ani-cm');
+        let loadingBarObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                // enable-ani-cm node changes from display:none to display:block after loading
+                if (mutation.oldValue.includes('display: none')) {
+                    __afterLocationChangeScripts.forEach(script => {
+                        if (window.location.pathname.match(script.pattern)) {
+                            script.function();
+                        }
+                    });
+                }
+            })
+        });
+
+        loadingBarObserver.observe(loadingBar, {
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: ['style'],
+        });
+
+    }, '.*')
+
     helper.onReady(() => awaitPageLoaded());
 }
 
@@ -63,10 +88,30 @@ function awaitPageLoaded() {
     }
 
     let loop = setInterval(() => {
-        if (preLoader.style.display === "none") {
+        if (preLoader.style.display === "none" && document.readyState === 'complete') {
             clearInterval(loop);
 
             runScripts();
         }
     }, 100);
+}
+
+/* PATHNAME LOGIC */
+export function runAfterLocationChange(func, pattern = '.*') {
+    __afterLocationChangeScripts.push({ "function": func, "pattern": pattern });
+}
+
+/* LOGIN LOGIC */
+export function isLoggedIn() {
+    let menu = document.getElementById('materialize-menu-dropdown');
+    let result = true;
+
+    menu.innerText.split('\n').forEach(item => {
+        if (item === 'Login') {
+            result = false;
+            return;
+        }
+    });
+
+    return result;
 }

src/javascript/utils/helpers.js

@@ -18,6 +18,10 @@ export function onReady(fn) {
     }
 }
 
+export function assigned(obj) {
+    return !(typeof obj === 'undefined' || obj === null);
+}
+
 function handleKeyDown(event) {
     handleKeyToggle(event, true);
 }

src/stylesheets/aniwatchplus.scss

@@ -3,4 +3,4 @@
 
 // enhancements
 @import './enhancements/lists';
-@import './enhancements/watch2gether'
+@import './enhancements/watch2gether';

src/stylesheets/enhancements/_watch2gether.scss

@@ -19,3 +19,10 @@
         }
     }
 }
+
+.material-icons {
+    // Fix icon position for room creator
+    &[aria-label="Room creator"] {
+        vertical-align: text-top;
+    }
+}