Adds transition code and some finishing touches

- Adds the latest info to the changelog
- Fixes an error with RDT
- blacklist -> blocklist for clarity
- Adds transition code for converting old BD version data to new format
- Switch to Vercel
- Add style to changelog modal
- Swap names around, no more `.min`

.eslintrc

@@ -115,9 +115,7 @@
         "Symbol": "readonly",
         
         "alert": "off",
-        "atob": "off",
         "blur": "off",
-        "btoa": "off",
         "caches": "off",
         "close": "off",
         "closed": "off",

.travis.yml

@@ -3,6 +3,9 @@ language: node_js
 node_js:
 - "node"
 
+git:
+  autocrlf: true
+
 branches:
   only:
   - development
@@ -20,7 +23,7 @@ deploy:
   skip_cleanup: true
   github_token: $TRAVIS_ACCESS
   keep_history: true
-  local_dir: ./dist
+  local_dir: .
   name: BetterDiscord Deployment
   target_branch: gh-pages
   on:

gulpfile.js

@@ -9,7 +9,7 @@ gulp.task("build-css", buildCSS);
 gulp.task("minify-css", minifyCSS);
 
 gulp.task("watch-css", function() {
-  return gulp.watch(["./src/styles/index.css"], minifyCSS);
+  return gulp.watch(["./src/styles/*.css", "./src/styles/**/*.css"], minifyCSS);
 });
 
 function runBuild(minified) {
@@ -17,7 +17,7 @@ function runBuild(minified) {
   if (minified) plugins.push(postcssCSSO({restructure: false}));
   return gulp.src("./src/styles/index.css")
         .pipe(postcss(plugins))
-        .pipe(rename(minified ? "style.min.css" : "style.css"))
+        .pipe(rename("style.css"))
         .pipe(gulp.dest("./dist"));
 }
 

package.json

@@ -2,32 +2,32 @@
     "name": "bandagedbd",
     "version": "1.0.0",
     "description": "Enhances Discord adding functionality and themes.",
-    "main": "js/main.js",
+    "main": "src/index.js",
     "scripts": {
         "build": "webpack --progress --colors",
         "watch": "webpack --progress --colors --watch",
-        "build-prod": "webpack --progress --colors --mode production -o dist/index.min.js --devtool none",
+        "build-prod": "webpack --progress --colors --mode production -o dist/remote.js --devtool none",
         "lint-js": "eslint --ext .jsx,.js src/",
+
         "build-css": "gulp build-css",
         "watch-css": "gulp watch-css",
-        "minify-css": "gulp minify-css",
-        "lint-css": "stylelint src/styles/*.css && stylelint src/styles/**/*.css && stylelint dist/style.css",
-        "dist": "npm run minify",
-        "minify": "npm run build-prod && npm run minify-css",
-        "build-all": "npm run build && npm run build-prod && npm run build-css && npm run minify-css",
+        "build-prod-css": "gulp minify-css",
+        "lint-css": "stylelint src/styles/*.css && stylelint src/styles/**/*.css",
+
+        "prod": "npm run build-prod && npm run build-prod-css",
         "lint": "npm run lint-js && npm run lint-css",
-        "test": "mocha --require @babel/register --recursive \"./tests/*.js\""
+        "test": "mocha --require @babel/register --recursive \"./tests/*.js\"",
+        "deploy": "npm run prod"
     },
     "repository": {
         "type": "git",
         "url": "git+https://github.com/rauenzi/BetterDiscordApp.git"
     },
     "author": "rauenzi",
-    "license": "MIT",
     "bugs": {
         "url": "https://github.com/rauenzi/BetterDiscordApp/issues"
     },
-    "homepage": "https://github.com/rauenzi/BetterDiscordApp#readme",
+    "homepage": "https://github.com/rauenzi/BetterDiscordApp",
     "devDependencies": {
         "@babel/core": "^7.10.5",
         "@babel/preset-env": "^7.10.4",

src/builtins/developer/reactdevtools.js

@@ -37,9 +37,14 @@ export default new class ReactDevTools extends Builtin {
         if (!this.isExtensionInstalled) this.findExtension();
         if (!this.isExtensionInstalled) return Modals.alert(Strings.ReactDevTools.notFound, Strings.ReactDevTools.notFoundDetails);
 
-        const didInstall = BrowserWindow.addDevToolsExtension(this.extensionPath);
-        if (didInstall) this.log("Successfully installed react devtools.");
-        else this.error("Couldn't find react devtools in chrome extensions!");
+        try {
+            const didInstall = BrowserWindow.addDevToolsExtension(this.extensionPath);
+            if (didInstall) this.log("Successfully installed react devtools.");
+            else this.error("Couldn't find react devtools in chrome extensions!");
+        }
+        catch (err) {
+            this.error("Couldn't add the extension!");
+        }
     }
 
     disabled() {

src/builtins/emotes/emotes.js

@@ -21,7 +21,7 @@ const Emotes = {
     FrankerFaceZ: {}
 };
 
-const blacklist = [];
+const blocklist = [];
 const overrides = ["twitch", "subscriber", "bttv", "ffz"];
 const modifiers = ["flip", "spin", "pulse", "spin2", "spin3", "1spin", "2spin", "3spin", "tr", "bl", "br", "shake", "shake2", "shake3", "flap"];
 
@@ -44,7 +44,7 @@ export default new class EmoteModule extends Builtin {
     get TwitchSubscriber() {return Emotes.TwitchSubscriber;}
     get BTTV() {return Emotes.BTTV;}
     get FrankerFaceZ() {return Emotes.FrankerFaceZ;}
-    get blacklist() {return blacklist;}
+    get blocklist() {return blocklist;}
     get favorites() {return this.favoriteEmotes;}
     getUrl(category, name) {return EmoteURLs[category].format({id: Emotes[category][name]});}
 
@@ -63,7 +63,7 @@ export default new class EmoteModule extends Builtin {
 
     async enabled() {
         Settings.registerCollection("emotes", "Emotes", EmoteConfig, {title: Strings.Emotes.clearEmotes, onClick: this.resetEmotes});
-        await this.getBlacklist();
+        await this.getBlocklist();
         await this.loadEmoteData();
 
         Events.on("emotes-favorite-added", this.addFavorite);
@@ -129,7 +129,7 @@ export default new class EmoteModule extends Builtin {
                         let emoteModifier = emoteSplit[1] ? emoteSplit[1] : "";
                         let emoteOverride = emoteModifier.slice(0);
 
-                        if (emoteName.length < 4 || blacklist.includes(emoteName)) continue;
+                        if (emoteName.length < 4 || blocklist.includes(emoteName)) continue;
                         if (!modifiers.includes(emoteModifier) || !Settings.get("emotes", "general", "modifiers")) emoteModifier = "";
                         if (!overrides.includes(emoteOverride)) emoteOverride = "";
                         else emoteModifier = emoteOverride;
@@ -177,14 +177,14 @@ export default new class EmoteModule extends Builtin {
         });
     }
 
-    async getBlacklist() {
+    async getBlocklist() {
         try {
-            const category = "Blacklist";
+            const category = "Blocklist";
             const exists = DataStore.emotesExist(category);
             const valid = await this.isCacheValid(category);
             const useCache = (valid) || (!valid && exists && !this.shouldDownload);
             const list = useCache ? DataStore.getEmoteData(category) : await this.downloadEmotes(category);
-            blacklist.push(...list);
+            blocklist.push(...list);
         }
         catch (err) {
             // TODO: Log this
@@ -253,7 +253,7 @@ export default new class EmoteModule extends Builtin {
                 }
 
                 for (const emote in parsedData) {
-                    if (emote.length < 4 || blacklist.includes(emote) || !parsedData[emote]) {
+                    if (emote.length < 4 || blocklist.includes(emote) || !parsedData[emote]) {
                         delete parsedData[emote];
                         continue;
                     }

src/data/changelog.js

@@ -1,28 +1,36 @@
 export default {
-    description: "Don't be shocked, this modal is supposed to be here.",
+    video: "https://i.zackrauen.com/EEM6Nor0XW.mp4",
+    poster: "https://i.imgur.com/tNGALts.jpeg",
+    description: "The rewrite you didn't even know about is finally here.",
     changes: [
         {
             title: "What's New?",
             items: [
-                "**BandagedBD will now keep you updated with changelogs!** I will try to only show a changelog when there's more than a tiny or internal change.",
-                "**Twitter (@BandagedBD)** I created a Twitter to try and provide support and such for those without access to the server. https://Twitter.com/BandagedBD"
-            ]
-        },
-        {
-            title: "Fixes",
-            type: "fixed",
-            items: [
-                "**Colored Text** option should work again.",
-                "**Emotes** should show up in chat.",
-                "Fixed a bug where BBD attempted to patch the TabBar module incorrectly. (Thanks, DevilBro)"
+                "**Everything** is entirely rewritten, for better or worse.",
+                "**Emotes and CustomCSS** can be completely turned off for those not interested. It saves on memory too but not loading those components.",
+                "**Floating editors** for both custom css and plugins/themes are now available. (See video above)",
+                "**Settings panels** are completely new and sleek. They are also highly extensible for potential future features :eyes:",
+                "**Translations** are now integrated starting with only a couple languages, but feel free to contribute your own!",
+                "**Emote menu** now uses React Patching and properly integrates into the new Emoji Picker. (Thanks Strencher#1044!)"
             ]
         },
         {
             title: "Minor Stuff",
             type: "improved",
             items: [
-                "**Colour->Color.** Swapped to using English-US spelling by default to be consistent, and to potentially be prepared for localization.",
-                "**Versions simplified.** The BandagedBD version now integrates into Discord's at the bottom-left of settings instead of randomly being a part of the setting list."
+                "**Patcher API** was added to `BdApi` under `BdApi.Patcher`. The old `BdApi.monkeyPatch` was patched to use the Patcher as well. This allows plugins and patches to play nice with one another.",
+                "**jQuery** usage was totally eliminated and is now ___deprecated___ for plugins.",
+                "**General performance** improvements throughout the app, from startup to emotes to addons.",
+                "**Exporting** by plugins is now highly encouraged over trying to match your meta name and class name."
+            ]
+        },
+        {
+            title: "Fixes",
+            type: "fixed",
+            items: [
+                "There are a lot of little issues that this rewrite fixes.",
+                "I forgot to write them down",
+                "But I'm sure many more will be found soon"
             ]
         }
     ]

src/modules/core.js

@@ -43,10 +43,10 @@ export default class Core {
             {
                 name: "bd-stylesheet",
                 type: "style",
-                url: "//cdn.staticaly.com/gh/{{repo}}/BetterDiscordApp/{{hash}}/dist/style.min.css",
-                backup: "//rauenzi.github.io/BetterDiscordApp/dist/style.min.css",
-                local: "{{localServer}}/BetterDiscordApp/dist/style.min.css",
-                localPath: "style.min.css"
+                url: "//betterdiscord.zerebos.com/dist/style.css",
+                backup: "//rauenzi.github.io/BetterDiscordApp/dist/style.css",
+                local: "{{localServer}}/BetterDiscordApp/dist/style.css",
+                localPath: "style.css"
             }
         ];
     }

src/modules/datastore.js

@@ -32,6 +32,46 @@ export default new class DataStore {
             this.data[file.split(".")[0]] = __non_webpack_require__(path.resolve(this.dataFolder, file));
         }
         this.cacheData = Utilities.testJSON(fs.readFileSync(this.cacheFile).toString()) || {};
+
+        this.convertOldData(); // Convert old data if it exists (routine checks existence and removes existence)
+    }
+
+    convertOldData() {
+        const oldFile = path.join(Config.dataPath, "bdstorage.json");
+        if (!fs.existsSync(oldFile)) return;
+
+        const oldData = __non_webpack_require__(oldFile); // got the data
+        fs.renameSync(oldFile, `${oldFile}.bak`); // rename file after grabbing data to prevent loop
+        const setChannelData = (channel, key, value, ext = "json") => fs.writeFileSync(path.resolve(this.baseFolder, channel, `${key}.${ext}`), JSON.stringify(value, null, 4));
+        const channels = ["stable", "canary", "ptb"];
+        const customcss = atob(oldData.bdcustomcss);
+        const favoriteEmotes = oldData.bdfavemotes ? JSON.parse(atob(oldData.bdfavemotes)) : "";
+        for (const channel of channels) {
+            if (!fs.existsSync(path.resolve(this.baseFolder, channel))) fs.mkdirSync(path.resolve(this.baseFolder, channel));
+            const channelData = oldData.settings[channel];
+            if (!channelData) continue;
+            const oldSettings = channelData.settings;
+            const newSettings = {
+                general: {publicServers: oldSettings["bda-gs-1"], voiceDisconnect: oldSettings["bda-dc-0"], twentyFourHour: oldSettings["bda-gs-6"], classNormalizer: oldSettings["fork-ps-4"], showToasts: oldSettings["fork-ps-2"]},
+                appearance: {voiceMode: oldSettings["bda-gs-4"], minimalMode: oldSettings["bda-gs-2"], hideChannels: oldSettings["bda-gs-3"], darkMode: oldSettings["bda-gs-5"], coloredText: oldSettings["bda-gs-7"]},
+                addons: {addonErrors: oldSettings["fork-ps-1"], autoScroll: oldSettings["fork-ps-3"], autoReload: oldSettings["fork-ps-5"]},
+                developer: {debuggerHotkey: oldSettings["bda-gs-8"], copySelector: oldSettings["fork-dm-1"], reactDevTools: oldSettings.reactDevTools}
+            };
+
+            const newEmotes = {
+                general: {download: oldSettings["fork-es-3"], emoteMenu: oldSettings["bda-es-0"], hideEmojiMenu: !oldSettings["bda-es-9"], showNames: oldSettings["bda-es-6"], modifiers: oldSettings["bda-es-8"], animateOnHover: oldSettings["fork-es-2"]},
+                categories: {twitchglobal: oldSettings["bda-es-7"], twitchsubscriber: oldSettings["bda-es-7"], frankerfacez: oldSettings["bda-es-1"], bttv: oldSettings["bda-es-2"]}
+            };
+
+            setChannelData(channel, "settings", newSettings); // settingsCookie
+            setChannelData(channel, "emotes", newEmotes); // emotes (from settingsCookie)
+            setChannelData(channel, "plugins", channelData.plugins); // pluginCookie
+            setChannelData(channel, "themes", channelData.themes); // themeCookie
+            setChannelData(channel, "misc", {favoriteEmotes}); // favorite emotes
+            fs.writeFileSync(path.resolve(this.baseFolder, channel, "custom.css"), customcss); // customcss
+        }
+        
+        this.initialize(); // Reinitialize data store with the converted data
     }
 
     get injectionPath() {

src/modules/utilities.js

@@ -1,11 +1,10 @@
-import {Config} from "data";
 import Logger from "./logger";
 import DOM from "./domtools";
 
 export default class Utilities {
 
     static repoUrl(path) {
-        return `https://cdn.staticaly.com/gh/${Config.repo}/BetterDiscordApp/${Config.hash}/${path}`;
+        return `https://betterdiscord.zerebos.com/${path}`;
     }
 
     /**

src/styles/index.css

@@ -15,3 +15,12 @@
     height: 15px;
     margin-left: 4px;
 }
+
+.bd-changelog-modal {
+    width: 650px;
+}
+
+.bd-changelog-modal video {
+    width: 100%;
+    border-radius: 20px;
+}

src/ui/modals.js

@@ -176,7 +176,7 @@ export default class Modals {
     
         const {image = "https://repository-images.githubusercontent.com/105473537/957b5480-7c26-11e9-8401-50fa820cbae5", description = "", changes = [], title = "BandagedBD", subtitle = `v${Config.bbdVersion}`, footer} = options;
         const ce = React.createElement;
-        const changelogItems = [ce("img", {src: image})];
+        const changelogItems = [options.video ? ce("video", {src: options.video, poster: options.poster, controls: true, className: ChangelogClasses.video}) : ce("img", {src: image})];
         if (description) changelogItems.push(ce("p", null, MarkdownParser.parse(description)));
         for (let c = 0; c < changes.length; c++) {
             const entry = changes[c];
@@ -206,15 +206,27 @@ export default class Modals {
             const defaultFooter = ce(TextElement, {size: TextElement.Sizes.SMALL, color: TextElement.Colors.STANDARD}, "Need support? ", supportLink);
             return ce(FlexChild.Child, {grow: 1, shrink: 1}, footer ? footer : defaultFooter);
         };
-    
-        return ModalStack.push(Changelog, {
-            className: ChangelogClasses.container,
-            selectable: true,
-            onScroll: _ => _,
-            onClose: _ => _,
-            renderHeader: renderHeader,
-            renderFooter: renderFooter,
-            children: changelogItems
+
+        const ModalActions = this.ModalActions;
+        const OriginalModalClasses = WebpackModules.getByProps("hideOnFullscreen");
+        const originalRoot = OriginalModalClasses.root;
+        if (originalRoot) OriginalModalClasses.root = `${originalRoot} bd-changelog-modal`;
+        const key = ModalActions.openModal(props => {
+            return React.createElement(Changelog, Object.assign({
+                className: `bd-changelog ${ChangelogClasses.container}`,
+                selectable: true,
+                onScroll: _ => _,
+                onClose: _ => _,
+                renderHeader: renderHeader,
+                renderFooter: renderFooter,
+            }, props), changelogItems);
         });
+            const closeModal = ModalActions.closeModal;
+            ModalActions.closeModal = function(k) {
+                if (k !== key) Reflect.apply(closeModal, this, arguments);
+                setTimeout(() => {if (originalRoot) OriginalModalClasses.root = originalRoot;}, 1000);
+                ModalActions.closeModal = closeModal;
+            };
+        return key;
     }
 }

webpack.config.js

@@ -8,7 +8,7 @@ module.exports = {
   devtool: "eval-source-map",
   entry: "./src/index.js",
   output: {
-    filename: "index.js",
+    filename: "remote.js",
     path: path.resolve(__dirname, "dist")
   },
   externals: {
@@ -56,7 +56,7 @@ module.exports = {
     minimizer: [
       new TerserPlugin({
         terserOptions: {
-          compress: {drop_debugger:false}
+          compress: {drop_debugger: false}
         }
       })
     ]