publicServers react please.

BetterDiscordApp/README.md

@@ -31,8 +31,8 @@ See this [gist](https://gist.github.com/ObserverOfTime/d7e60eb9aa7fe837545c8cb77
 ### Windows
 1. Download and extract this: https://github.com/rauenzi/BetterDiscordApp/archive/injector.zip
 2. Rename `BetterDiscordApp-injector` to `app`.
-3. Go to `%localappdata%\Discord\`, and locate the directory with the largest version number (e.g. `app-0.0.306`).
+3. Go to `%localappdata%\Discord\`, and locate the directory with the largest version number (e.g. `app-0.0.307`).
-4. Within `app-0.0.306` navigate to `resources`.
+4. Within `app-0.0.307` navigate to `resources`.
 5. If an `app` folder already exists inside `resources`, delete it.
 6. Move the `app` folder (the one you downloaded and renamed) inside of `resources`.
 7. Fully quit Discord and restart it.

BetterDiscordApp/src/modules/Layers.jsx

@@ -0,0 +1,166 @@
+import Utils from "./utils";
+import v2 from "./v2";
+import { uuidv4 } from "./distant";
+import { timingSafeEqual } from "crypto";
+
+export default new class Layers {
+    constructor(){
+        this.layers = []
+        window.Lightcord.BetterDiscord.Layers = this
+    }
+
+    get isInjected(){
+        return !!document.querySelector("div.Layers.injected")
+    }
+
+    inject(){
+        if(this.isInjected)return
+        let [
+            classNameLayers
+        ] = [
+            Utils.removeDa(v2.WebpackModules.find(e => e.layers && e.layer).layers)
+        ]
+        const layers = document.querySelector("."+classNameLayers);
+        if (!layers) return false;
+        const ReactInstance = Lightcord.Api.Utils.FindReact(layers, 1)
+        if(!ReactInstance)return layers
+        this.ReactInstance = ReactInstance
+        let render = ReactInstance.render
+        ReactInstance.render = () => {
+            let returnValue = render.call(ReactInstance)
+            let classList = returnValue.props.children[1].props.className.split(" ")
+            classList.push("Layers")
+            classList.push("injected")
+            returnValue.props.children[1].props.className = classList.join(" ")
+
+            this.layers.forEach(layer => {
+                returnValue.props.children[1].props.children.push(layer[1])
+            })
+
+            return returnValue
+        }
+        ReactInstance.forceUpdate()
+    }
+
+    createLayer(children, props = {}){
+        let id = uuidv4()
+        let layer = null
+        this.layers.push([id, <Layer {...props} getLayer={lay => {
+            layer = lay
+        }} key={id} id={id} remove={() => {
+            let index = this.layers.findIndex(e => e[0] === id)
+            if(index === -1)return
+            this.layers.splice(index, 1)
+            layer = null
+            if(this.ReactInstance)this.ReactInstance.forceUpdate()
+            this.inject()
+        }}>{children}</Layer>])
+        if(this.ReactInstance)this.ReactInstance.forceUpdate()
+        this.inject()
+        return {
+            remove: () => {
+                if(!layer){
+                    let index = this.layers.findIndex(e => e[0] === id)
+                    if(index === -1)return
+                    this.layers.splice(index, 1)
+                    layer = null
+                    if(this.ReactInstance)this.ReactInstance.forceUpdate()
+                    this.inject()
+                }else{
+                    layer.remove()
+                }
+            }
+        }
+    }
+}
+
+
+let LayerModules
+export class Layer extends React.Component {
+    constructor(){
+        super(...arguments)
+        this.state = {
+            animation: new this.modules[0].default.Value(0)
+        } 
+        this.props.getLayer(this)
+        this.keydown = this.keydown.bind(this)
+    }
+
+    keydown(e){
+        if (e.which === 27) {
+            this.remove()
+        }
+    }
+
+    get modules(){
+        return LayerModules || (LayerModules = [
+            v2.WebpackModules.find(e => e.default && e.default.Value && e.default.div)
+        ])
+    }
+
+    componentWillUnmount(){
+        window.removeEventListener("keydown", this.keydown)
+    }
+
+    componentDidMount(ev){
+        window.addEventListener("keydown", this.keydown)
+    }
+
+    remove(){
+        this.props.remove()
+    }
+
+    componentWillEnter(ev){
+        this.modules[0].default.timing(this.state.animation, {
+            toValue: 1,
+            duration: 100
+        }).start(ev)
+    }
+
+    componentWillLeave(ev){
+        this.modules[0].default.timing(this.state.animation, {
+            toValue: 0,
+            duration: 100
+        }).start(ev)
+    }
+
+    render(){
+        let interpolation = this.state.animation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [1.07, 1]
+        })
+        let style = {
+            opacity: this.state.animation,
+            transform: [{
+                scale: interpolation
+            }]
+        }
+        let Div = this.modules[0].default.div
+        return <Div className={[__SECRET_EMOTION__.css({
+            backgroundColor:"var(--background-primary)",
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            display: "flex",
+            overflow: "hidden",
+            WebkitBoxOrient: "vertical",
+            WebkitBoxDirection: "normal",
+            msFlexDirection: "column",
+            flexDirection: "column",
+            zIndex: 101
+        }),process.platform==="win32"?__SECRET_EMOTION__.css({
+            top: "-22px",
+            paddingTop: "22px"
+        }):null,...(this.props.className?this.props.className.split(" "):[])].filter(e=>e).join(" ") || null} style={style}>
+            {this.props.children(() => {
+                this.remove()
+            })}
+        </Div>
+    }
+}
+Layer.defaultProps = {
+    id: null,
+    children: null
+}

BetterDiscordApp/src/modules/publicServers.js

@@ -5,7 +5,7 @@ import Utils from "./utils";
 import DOM from "./domtools";
 
 import V2C_PublicServers from "../ui/publicservers/publicServers";
-import Layer from "../ui/publicservers/layer";
+import Layers from "./Layers";
 
 export default new class V2_PublicServers {
 
@@ -14,38 +14,10 @@ export default new class V2_PublicServers {
         window.Lightcord.BetterDiscord.V2_PublicServers = this
     }
 
-    get component() {
-        return BDV2.react.createElement(Layer, {rootId: "pubslayerroot", id: "pubslayer"}, BDV2.react.createElement(V2C_PublicServers, {rootId: "pubslayerroot"}));
-    }
-
-    get root() {
-        const _root = document.getElementById("pubslayerroot");
-        if (!_root) {
-            if (!this.injectRoot()) return null;
-            return this.root;
-        }
-        return _root;
-    }
-
-    injectRoot() {
-        let [
-            classNameLayers
-        ] = [
-            Utils.removeDa(BDModules.get(e => e.layers && e.layer)[0].layers)
-        ]
-        const layers = DOM.query(".layers, ."+classNameLayers);
-        if (!layers) return false;
-        layers.append(DOM.createElement("<div id='pubslayerroot'>"));
-        return true;
-    }
-
     render() {
-        const root = this.root;
+        Layers.createLayer((close) => {
-        if (!root) {
+            return BDV2.react.createElement(V2C_PublicServers, {rootId: "pubslayerroot", close})
-            console.log("FAILED TO LOCATE ROOT: .layers");
+        })
-            return;
-        }
-        BDV2.reactDom.render(this.component, root);
     }
 
     get button() {

BetterDiscordApp/src/ui/publicservers/layer.js

@@ -1,89 +0,0 @@
-import BDV2 from "../../modules/v2";
-import DOM from "../../modules/domtools";
-
-export default class V2C_Layer extends BDV2.reactComponent {
-
-    constructor(props) {
-        super(props);
-        this.keyupListener = this.keyupListener.bind(this);
-    }
-
-    keyupListener(e) {
-        if (e.which === 27) {
-            BDV2.reactDom.unmountComponentAtNode(this.refs.root.parentNode);
-        }
-    }
-
-    componentDidMount() {
-        window.addEventListener("keyup", this.keyupListener);
-
-        const thisNode = DOM.query(`#${this.props.id}`);
-        DOM.animate({
-            duration: 200,
-            update: function(progress) {
-                thisNode.style.transform = `scale(${1.1 - 0.1 * progress}) translateZ(0px)`;
-                thisNode.style.opacity = progress;
-                if (progress == 1) {
-                    setImmediate(() => {
-                        thisNode.style.transform = "";
-                        thisNode.style.opacity = "";
-                    });
-                }
-            }
-        });
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener("keyup", this.keyupListener);
-
-        const thisNode = DOM.query(`#${this.props.id}`);
-        DOM.animate({
-            duration: 200,
-            update: function(progress) {
-                thisNode.style.transform = `scale(${1.1 - 0.1 * (1 - progress)}) translateZ(0px)`;
-                thisNode.style.opacity = 1 - progress;
-                if (progress == 1) {
-                    setImmediate(() => {
-                        thisNode.remove();
-                    });
-                }
-            }
-        });
-
-        const layer = DOM.query(".publicServersOpen");
-        layer.classList.remove("publicServersOpen");
-        DOM.animate({
-            duration: 200,
-            update: function(progress) {
-                layer.style.transform = `scale(${0.07 * progress + 0.93}) translateZ(0px)`;
-                layer.style.opacity = progress;
-                if (progress == 1) {
-                    setImmediate(() => {
-                        layer.style.transform = "";
-                        layer.style.opacity = "";
-                    });
-                }
-            }
-        });
-    }
-
-    componentWillMount() {
-        const layer = DOM.query("[class*=\"layer-\"]");
-        layer.classList.add("publicServersOpen");
-        DOM.animate({
-            duration: 200,
-            update: function(progress) {
-                layer.style.transform = `scale(${0.07 * (1 - progress) + 0.93}) translateZ(0px)`;
-                layer.style.opacity = 1 - progress;
-            }
-        });
-    }
-
-    render() {
-        return BDV2.react.createElement(
-            "div",
-            {className: "layer bd-layer "+BDModules.get(e => e.layer && e.animating)[0].layer, id: this.props.id, ref: "root", style: {opacity: 0, transform: "scale(1.1) translateZ(0px)"}},
-            this.props.children
-        );
-    }
-}

BetterDiscordApp/src/ui/publicservers/publicServers.js

@@ -47,7 +47,7 @@ export default class V2C_PublicServers extends BDV2.reactComponent {
     }
 
     close() {
-        BDV2.reactDom.unmountComponentAtNode(document.getElementById(this.props.rootId));
+        this.props.close()
     }
 
     search(query, clear) {
@@ -157,8 +157,8 @@ export default class V2C_PublicServers extends BDV2.reactComponent {
     get bdServer() {
         const server = {
             name: "BetterDiscord",
-            online: "7500+",
+            online: "30000+",
-            members: "20000+",
+            members: "70000+",
             categories: ["community", "programming", "support"],
             description: "Official BetterDiscord server for support etc",
             identifier: "86004744966914048",
@@ -169,12 +169,12 @@ export default class V2C_PublicServers extends BDV2.reactComponent {
         };
         const server2 = {
             name: "Lightcord",
-            online: "30+",
+            online: "100+",
-            members: "50+",
+            members: "300+",
             categories: ["community", "programming", "support"],
             description: "Official Lightcord server for support etc",
-            identifier: "86004744966914048",
+            identifier: "705908350218666117",
-            iconUrl: "https://avatars3.githubusercontent.com/u/65690058?s=200&v=4",
+            iconUrl: "https://github.com/lightcord.png",
             nativejoin: true,
             invite_code: "7eFff2A",
             pinned: true
@@ -211,7 +211,20 @@ export default class V2C_PublicServers extends BDV2.reactComponent {
                     "Content-Type": "application/json"
                 }
             });
-            const data = await response.json();
+            const text = await response.text()
+            if(!text){
+                self.setState({
+                    title: "Not connected to discordservers.com!",
+                    loading: true,
+                    selectedCategory: -1,
+                    connection: {
+                        state: 1,
+                        user: null
+                    }
+                });
+                return
+            }
+            const data = JSON.parse(text)
             self.setState({
                 selectedCategory: 0,
                 connection: {
@@ -236,7 +249,9 @@ export default class V2C_PublicServers extends BDV2.reactComponent {
     }
 
     render() {
-        return BDV2.react.createElement(SidebarView, {ref: "sbv"}, this.component);
+        return BDV2.react.createElement("div", {id: "pubslayerroot"}, 
+            BDV2.react.createElement("div", {id: "pubslayer"}, BDV2.react.createElement(SidebarView, {ref: "sbv"}, this.component))
+        );
     }
 
     get component() {

modules/discord_desktop_core/core/app/BetterDiscord/modules/@emotion/core/index.js

@@ -0,0 +1 @@
+module.exports = window["__SECRET_EMOTION__"]

package-lock.json

@@ -1238,6 +1238,12 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz",
+      "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==",
+      "dev": true
+    },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",

package.json

@@ -42,6 +42,7 @@
     "cross-spawn": "^7.0.3",
     "electron": "^8.4.0",
     "terser": "^4.7.0",
+    "typescript": "^3.9.7",
     "yazl": "^2.5.1"
   }
 }