Load stickers from config file.

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);