Load stickers from config file.

README.md

@@ -44,7 +44,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ## Theming
 
-# Sticker short codes - To enable sticker short codes, follow there steps:
+# Sticker short codes - To enable sticker short codes, follow these steps:
-* set "useShortCodeStickers" to true in config.json.
+* Run the "create sticker config" script using "npm run create-sticker-config <path-to-sticker-packs>"
-* Add your sticker pack folders (containing stickers) to /src/assets/stickers/
+* Insert the resulting config blob into the "shortCodeStickers" value of the config file (assets/config.json)
-* Create file /src/assets/stickers/order.txt that lists the folders names in order, one folder name per line.
+* Rearrange order of sticker packs by editing the config blob above.

create_sticker_config.js

@@ -0,0 +1,45 @@
+if (!process.argv[2]) {
+    console.log('Insufficient number of arguments! Need a path to sticker packs...');
+}
+
+var path = require('path'), fs = require('fs');
+
+function fromDir(startPath, filter, callback) {
+
+    //console.log('Starting from dir '+startPath+'/');
+
+    if (!fs.existsSync(startPath)) {
+        console.log("no dir ", startPath);
+        return;
+    }
+
+    var files = fs.readdirSync(startPath);
+    for (var i = 0; i < files.length; i++) {
+        var filename = path.join(startPath, files[i]);
+        var stat = fs.lstatSync(filename);
+        if (stat.isDirectory()) {
+            fromDir(filename, filter, callback); //recurse
+        }
+        else if (filter.test(filename)) callback(filename);
+    };
+};
+
+var packs = [];
+
+fromDir(process.argv[2], /\.png$/, function (filename) {
+    let file = filename.substring(process.argv[2].length);
+    let parts = file.split("/");
+    let pack = parts[1];
+    let sticker = parts[2];
+    if (!packs[pack]) {
+        packs[pack] = [];
+    }
+    packs[pack].push(sticker);
+});
+
+var result = { baseUrl: "", packs: [] };
+for (const pack of Object.keys(packs)) {
+    const stickers = packs[pack];
+    result.packs.push({ name: pack, stickers: stickers });
+}
+console.log(JSON.stringify(result, null, 2));

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "create-sticker-config": "node ./create_sticker_config.js $1"
   },
   "dependencies": {
     "aes-js": "^3.1.2",
@@ -85,4 +86,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

src/App.vue

@@ -33,6 +33,8 @@
 </template>
 
 <script>
+import stickers from "./plugins/stickers";
+
 export default {
   name: "App",
   data() {
@@ -68,6 +70,14 @@ export default {
     } else {
       this.loading = false;
     }
+    this.$config.promise.then(this.onConfigLoaded);
+  },
+  methods: {
+    onConfigLoaded(config) {
+      if (config.shortCodeStickers) {
+        stickers.loadStickersFromConfig(config);
+      }
+    },
   },
   computed: {
     currentUser() {

src/assets/config.json

@@ -3,7 +3,6 @@
     "product": "Convene",
     "productLink": "letsconvene.im",
     "defaultServer": "https://neo.keanu.im",
-    "useShortCodeStickers": false,
     "rtl": false,
     "analytics": {
         "enabled": true,
@@ -25,4 +24,4 @@
             }
         }
     }
-}
+}

src/components/Chat.vue

@@ -235,7 +235,7 @@
         </v-col>
 
         <v-col
-          v-if="$config.useShortCodeStickers"
+          v-if="$config.shortCodeStickers"
           class="input-area-button text-center flex-grow-0 flex-shrink-1"
         >
           <v-btn

src/plugins/stickers.js

@@ -2,39 +2,24 @@ const stickerPacks = {};
 stickerPacks.ordering = [];
 const stickerCodeMap = {};
 
-try {
-    const stickerPackInfo = require("!!raw-loader!@/assets/stickers/order.txt").default;
-    const packInfo = stickerPackInfo.split("\n");
-    for (let i = 0; i < packInfo.length; i++) {
-        const pack = packInfo[i];
-        if (pack && pack.length > 0 && !pack.startsWith('#')) {
-            stickerPacks[pack] = [];
-            stickerPacks.ordering.push(pack);
-        }
-    }
-} catch (ignorederr) {
-    //
-}
-
-function importAll(r) {
-    return r.keys().map(res => {
-        // Remove"./"
-        const parts = res.split("/");
-        const pack = parts[1];
-        const sticker = parts[2].split(".")[0];
-        const image = r(res);
-        if (stickerPacks[pack] !== undefined) {
-            stickerPacks[pack].push({ image: image, name: sticker });
-            stickerCodeMap[":" + pack + "-" + sticker + ":"] = image;
-        }
-    });
-}
-importAll(require.context('@/assets/stickers/', true, /\.png$/));
-
 class Stickers {
     constructor() {
     }
 
+    loadStickersFromConfig(config) {
+        const stickerConfig = config.shortCodeStickers;
+        for (const pack of stickerConfig.packs) {
+            stickerPacks[pack.name] = [];
+            stickerPacks.ordering.push(pack.name);
+            for (const sticker of pack.stickers) {
+                const stickerName = sticker.split(".")[0];
+                const stickerUrl = stickerConfig.baseUrl + pack.name + "/" + sticker;
+                stickerPacks[pack.name].push({ image: stickerUrl, name: stickerName });
+                stickerCodeMap[":" + pack.name + "-" + stickerName + ":"] = stickerUrl;
+            }
+        }
+    }
+
     isStickerShortcode(messageBody) {
         if (messageBody && messageBody.startsWith(":") && messageBody.startsWith(":") && messageBody.length >= 5) {
             const image = this.getStickerImage(messageBody);