package-lock.json

@@ -10735,6 +10735,14 @@
                 "tough-cookie": "~2.5.0",
                 "tunnel-agent": "^0.6.0",
                 "uuid": "^3.3.2"
+            },
+            "dependencies": {
+                "uuid": {
+                    "version": "3.4.0",
+                    "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+                    "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+                    "dev": true
+                }
             }
         },
         "require-directory": {
@@ -11873,6 +11881,15 @@
             "requires": {
                 "temp-dir": "^1.0.0",
                 "uuid": "^3.0.1"
+            },
+            "dependencies": {
+                "uuid": {
+                    "version": "3.4.0",
+                    "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+                    "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+                    "dev": true,
+                    "optional": true
+                }
             }
         },
         "ternary-stream": {
@@ -12439,10 +12456,9 @@
             }
         },
         "uuid": {
-            "version": "3.4.0",
-            "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-            "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-            "dev": true
+            "version": "8.3.1",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.1.tgz",
+            "integrity": "sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg=="
         },
         "v8flags": {
             "version": "3.2.0",

package.json

@@ -32,7 +32,9 @@
         "email": "mail@serraniel.dev"
     },
     "homepage": "https://github.com/Serraniel/AniwatchPlus#readme",
-    "dependencies": {},
+    "dependencies": {
+        "uuid": "^8.3.1"
+    },
     "devDependencies": {
         "@babel/compat-data": "^7.12.1",
         "@babel/core": "^7.12.3",

src/javascript/enhancements/anilyr.js

@@ -0,0 +1,48 @@
+import * as core from '../utils/aniwatchCore';
+import * as helper from '../utils/helpers';
+
+const SCREENSHOT_TOOLTIP_ID = 'anilyr-screenshots-tooltip';
+const PLAYER_ID = 'player';
+
+export function init() {
+    core.registerScript(node => {
+        if (helper.isHtmlElement(node) && node.id === SCREENSHOT_TOOLTIP_ID) {
+            observeScreenshotTooltip(node);
+        }
+    }, "^/anime/[0-9]*/[0-9]*$");
+}
+
+function observeScreenshotTooltip(tooltip) {
+    let observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+            // Switched to invisible
+            if (!mutation.oldValue.includes('display: none') && mutation.target.style.display == 'none') {
+                let player = findPlayer();
+                if(typeof player !== 'undefined'){
+                    resumePlayer(player);
+                }
+            }
+        });
+    });
+
+    observer.observe(tooltip, {
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: ['style'],
+    });
+}
+
+function findPlayer() {
+    const PLAYER_TAG_NAME = 'VIDEO'; // tagName gives UpperCase
+
+    let playerCandidate = document.getElementById(PLAYER_ID);
+    if (playerCandidate.tagName === PLAYER_TAG_NAME) {
+        return playerCandidate;
+    }
+
+    return undefined;
+}
+
+function resumePlayer(player) {
+    player.play();
+}

src/javascript/enhancements/watch2getherChat.js

@@ -0,0 +1,45 @@
+import * as core from '../utils/aniwatchCore';
+import * as helper from '../utils/helpers';
+import { v4 as uuidv4 } from 'uuid';
+
+export function init() {
+    // UPS // runAfterLoad is not what we want...wait for runAfterLocationChange....
+    core.runAfterLoad(() => {
+        manipulateChatInput();
+    }, "^/watch2gether/.*$");
+}
+
+function manipulateChatInput() {    
+    let textarea = document.querySelector('.chat-input textarea');
+
+    // avoid duplicate registration
+    if (typeof textarea.dataset.charCounterId !== 'undefined') {
+        return;
+    }
+}
+
+function addCharCounter(textarea) {
+    let chatDiv = textarea.parentElement.parentElement; // div with chat input and controls
+    let controlRow = chatDiv.children[1]; // row with controls
+    let btn = controlRow.querySelector('button'); // find send button
+
+    let counterSpan = document.createElement('span'); // create span for counter
+    counterSpan.classList.add('awp-w2g-chatCounter');
+
+    // id and "connection"
+    let counterId = `awp-${v4()}`
+    counterSpan.id = counterId;
+    textarea.dataset.charCounterId = counterId;
+
+    btn.parentElement.inserBefore(counterSpan, btn); // and insert in front of the button
+
+    textarea.addEventListener('keypress keyup', () => {        
+        let current = textarea.value.length;
+        let max = textarea.maxLength;
+
+        counterSpan.innerText = `${current} / ${max}`;
+
+        // animation if at max
+        counterSpan.classList.toggle('awp-w2g-chatCounter-max', current >= max);
+    });
+}

src/javascript/index.js

@@ -3,10 +3,12 @@ import { initCore } from './utils/aniwatchCore';
 // helper
 import { initHelpers } from './utils/helpers';
 // enhancements
+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';
 
 // core
 initCore();
@@ -15,7 +17,9 @@ initCore();
 initHelpers();
 
 // enhancements
+anilyr();
 animeRequests();
 languageDisplay();
 notifications();
-quickSearch();
+quickSearch();
+watch2getherChat();

src/stylesheets/enhancements/_watch2gether.scss

@@ -1,3 +1,25 @@
+.awp {
+    &-w2g {
+        &-chatCounter {
+            white-space: nowrap;
+
+            &-max {
+                animation: shake 0.1s ease-in-out 0.1s 3 alternate;
+
+                @keyframes shake {
+                    from {
+                        transform: rotate(3deg);
+                    }
+                    to {
+                        transform-origin: center center;
+                        transform: rotate(-3deg);
+                    }
+                }
+            }
+        }
+    }
+}
+
 .material-icons {
     // Fix icon position for room creator
     &[aria-label="Room creator"] {