.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "node"
+  - "14"
 dist: trusty
 cache:
   npm: true

package-lock.json

@@ -8113,9 +8113,9 @@
             "dev": true
         },
         "nanoid": {
-            "version": "3.1.15",
+            "version": "3.1.16",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.15.tgz",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz",
-            "integrity": "sha512-n8rXUZ8UU3lV6+43atPrSizqzh25n1/f00Wx1sCiE7R1sSHytZLTTiQl8DjC4IDLOnEZDlgJhy0yO4VsIpMxow==",
+            "integrity": "sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w==",
             "dev": true
         },
         "nanomatch": {
@@ -8933,9 +8933,9 @@
             "dev": true
         },
         "postcss": {
-            "version": "8.1.3",
+            "version": "8.1.4",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.3.tgz",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.4.tgz",
-            "integrity": "sha512-AKsHGqd7HmXmL/EgyAjI4Gx719A5yQdt9HzyXrI8M/hzxfumecYS95kfvIt40UZqPVNoEt0Va1M3PG54XtNPbg==",
+            "integrity": "sha512-LfqcwgMq9LOd8pX7K2+r2HPitlIGC5p6PoZhVELlqhh2YGDVcXKpkCseqan73Hrdik6nBd2OvoDPUaP/oMj9hQ==",
             "dev": true,
             "requires": {
                 "colorette": "^1.2.1",
@@ -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",
+            "version": "8.3.1",
-            "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.1.tgz",
-            "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+            "integrity": "sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg=="
-            "dev": true
         },
         "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",
@@ -62,7 +64,7 @@
         "gulp-terser": "^1.4.0",
         "gulp-zip": "^5.0.2",
         "merge-stream": "^2.0.0",
-        "postcss": "^8.1.3",
+        "postcss": "^8.1.4",
         "sass": "^1.27.0",
         "terser": "^5.3.8",
         "vinyl-buffer": "^1.0.1",

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

@@ -7,6 +7,7 @@ import { init as anilyr } from './enhancements/anilyr';
 import { init as animeRequests } from './enhancements/animeRequests';
 import { init as languageDisplay } from './enhancements/languageDisplay';
 import { init as quickSearch } from './enhancements/quickSearch';
+import { init as watch2getherChat } from './enhancements/watch2getherChat';
 
 // core
 initCore();
@@ -18,4 +19,5 @@ initHelpers();
 anilyr();
 animeRequests();
 languageDisplay();
-quickSearch();
+quickSearch();
+watch2getherChat();

src/stylesheets/aniwatchplus.scss

@@ -2,4 +2,5 @@
 @import './vars/colors';
 
 // enhancements
-@import './enhancements/lists.scss';
+@import './enhancements/lists';
+@import './enhancements/watch2gether'

src/stylesheets/enhancements/_watch2gether.scss

@@ -0,0 +1,21 @@
+.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);
+                    }
+                }
+            }
+        }
+    }
+}