Merge pull request #93 from Serraniel/feature/#91-watch2gether-display-chat-message-character-count

Feature/#91 watch2gether display chat message character count

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",
+            "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",

src/javascript/enhancements/watch2getherChat.js

@@ -0,0 +1,62 @@
+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.runAfterLocationChange(() => {
+        manipulateChatInput();
+    }, "^/watch2gether/.*$");
+}
+
+function manipulateChatInput() {
+    let textarea = document.querySelector('.chat-input textarea');
+
+    // avoid duplicate registration
+    if (typeof textarea.dataset.charCounterId !== 'undefined') {
+        return;
+    }
+
+    addCharCounter(textarea);
+}
+
+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 charCounterSpan = document.createElement('span'); // create span for counter
+    charCounterSpan.classList.add('awp-w2g-chatCounter');
+
+    // id and "connection"
+    let counterId = `awp-${uuidv4()}`
+    charCounterSpan.id = counterId;
+    textarea.dataset.charCounterId = counterId;
+
+    btn.parentElement.insertBefore(charCounterSpan, btn); // and insert in front of the button
+    updateCharCounter(textarea, charCounterSpan);
+
+    textarea.addEventListener('keyup', () => {
+        console.log('TRIGGER')
+        updateCharCounter(textarea, charCounterSpan)
+    });
+}
+
+function updateCharCounter(textarea, charCounterSpan) {
+    const SHAKE_CLASS = 'awp-w2g-chatCounter-max';
+
+    let current = textarea.value.length;
+    let max = textarea.maxLength;
+
+    charCounterSpan.innerText = `${current} / ${max}`;
+
+    // animation if at max
+    if (current >= max && !charCounterSpan.classList.contains(SHAKE_CLASS)) {
+        charCounterSpan.classList.add(SHAKE_CLASS);
+
+        // remove css class after animation finished, so it can be restarted again
+        setTimeout(() => {
+            charCounterSpan.classList.remove(SHAKE_CLASS);
+        }, 200);
+    }
+}

src/javascript/index.js

@@ -8,6 +8,7 @@ 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();
@@ -21,3 +22,4 @@ animeRequests();
 languageDisplay();
 notifications();
 quickSearch();
+watch2getherChat();

src/stylesheets/aniwatchplus.scss

@@ -1,7 +1,7 @@
 // vars
-@import './vars/colors';
+@import "./vars/colors";
 
 // enhancements
-@import './enhancements/lists';
+@import "./enhancements/lists";
-@import './enhancements/tabs';
+@import "./enhancements/tabs";
-@import './enhancements/watch2gether';
+@import "./enhancements/watch2gether";

src/stylesheets/enhancements/_tabs.scss

@@ -1,5 +1,4 @@
-md-tab-item{
+md-tab-item {
-
     // hide disabled tabs
     &.md-disabled {
         display: none;

src/stylesheets/enhancements/_watch2gether.scss

@@ -4,3 +4,24 @@
         vertical-align: text-top;
     }
 }
+.awp {
+    &-w2g {
+        &-chatCounter {
+            white-space: nowrap;
+
+            &-max {
+                animation: shake 0.1s ease-in-out 0.1s 3 alternate;
+
+                @keyframes shake {
+                    from {
+                        transform: rotate(5deg);
+                    }
+                    to {
+                        transform-origin: center center;
+                        transform: rotate(-5deg);
+                    }
+                }
+            }
+        }
+    }
+}