Merge pull request #176 from JsSucks/data-attributes

Data attributes

client/src/builtin/EmoteModule.js

@@ -9,7 +9,7 @@
 */
 import { FileUtils, ClientLogger as Logger } from 'common';
 import { Events, Globals, WebpackModules, ReactComponents, MonkeyPatch } from 'modules';
-import { DOM, VueInjector } from 'ui';
+import { DOM, VueInjector, Reflection } from 'ui';
 import EmoteComponent from './EmoteComponent.vue';
 let emotes = null;
 const emotesEnabled = true;
@@ -105,12 +105,16 @@ export default class {
                     Logger.err('EmoteModule', err);
                 }
             });
-            this.unpatchMount = MonkeyPatch('BD:EmoteModule', Message.component.prototype).after('componentDidMount', (component, args) => {
+            for (const message of document.querySelectorAll('.message')) {
+                Reflection(message).forceUpdate();
+            }
+            this.injectAll();
+            this.unpatchMount = MonkeyPatch('BD:EmoteModule', Message.component.prototype).after('componentDidMount', component => {
                 const element = this.ReactDOM.findDOMNode(component);
                 if (!element) return;
                 this.injectEmotes(element);
             });
-            this.unpatchUpdate = MonkeyPatch('BD:EmoteModule', Message.component.prototype).after('componentDidUpdate', (component, args) => {
+            this.unpatchUpdate = MonkeyPatch('BD:EmoteModule', Message.component.prototype).after('componentDidUpdate', component => {
                 const element = this.ReactDOM.findDOMNode(component);
                 if (!element) return;
                 this.injectEmotes(element);

client/src/modules/reactcomponents.js

@@ -272,12 +272,13 @@ export class ReactAutoPatcher {
     }
 
     static async patchComponents() {
-        this.patchMessage();
-        this.patchMessageGroup();
-        this.patchChannelMember();
-        this.patchGuild();
-        this.patchChannel();
-        this.patchChannelList();
+        await this.patchMessage();
+        await this.patchMessageGroup();
+        await this.patchChannelMember();
+        await this.patchGuild();
+        await this.patchChannel();
+        await this.patchChannelList();
+        this.forceUpdate();
     }
 
     static async patchMessage() {
@@ -344,4 +345,10 @@ export class ReactAutoPatcher {
             retVal.props['data-channel-name'] = channel.name;
         });
     }
+
+    static forceUpdate() {
+        for (const e of document.querySelectorAll('.message,.message-group,.guild,.containerDefault-7RImuF,.channel-members .member')) {
+            Reflection(e).forceUpdate();
+        }
+    }
 }

client/src/styles/partials/emote.scss

@@ -1,11 +1,18 @@
+.bd-emote-outer {
+    display: inline-block;
+    height: 32px;
+}
 .bd-emote-outer.bd-is-emote {
     font-size: 0;
 }
 .bd-emotewrapper {
-    position: relative;
-    display: inline-block;
-
     img {
+        height: 32px;
+        margin: 0 .05em 0 .1em !important;
+        min-height: 22px;
+        min-width: 22px;
+        object-fit: contain;
+        vertical-align: -.4em;
         max-height: 32px;
     }
 }

client/src/ui/reflection.js

@@ -8,6 +8,8 @@
  * LICENSE file in the root directory of this source tree.
 */
 
+import { ClientLogger as Logger } from 'common';
+
 class Reflection {
     static reactInternalInstance(node) {
         if (!node) return null;
@@ -89,6 +91,14 @@ class Reflection {
         }
     }
 
+    static getStateNode(node) {
+        try {
+            return this.reactInternalInstance(node).return.stateNode;
+        } catch (err) {
+            return null;
+        }
+    }
+
     static getComponent(node, first = true) {
         // IMPORTANT TODO Currently only checks the first found component. For example channel-member will not return the correct component
         try {
@@ -121,12 +131,24 @@ export default function (node) {
         get state() {
             return Reflection.getState(this.node);
         }
+        get stateNode() {
+            return Reflection.getStateNode(this.node);
+        }
         get reactInternalInstance() {
             return Reflection.reactInternalInstance(this.node);
         }
         get component() {
             return Reflection.getComponent(this.node);
         }
+        forceUpdate() {
+            try {
+                const stateNode = Reflection.getStateNode(this.node);
+                if (!stateNode || !stateNode.forceUpdate) return;
+                stateNode.forceUpdate();
+            } catch (err) {
+                Logger.err('Reflection', err);
+            }
+        }
         prop(propName) {
             const split = propName.split('.');
             const first = Reflection.findProp(this.node, split[0]);