Added support for several image formats

src/builders/GatherStickersStage.ts

@@ -9,6 +9,9 @@ export class GatherStickersStage implements StickerPackBuilder {
     private currentSticker: StickerMetadata = {description: "", contentUri: ""};
     private expectingImage = true;
     private resolveFn: (stickers: StickerMetadata[]) => void;
+
+    static compatibleMime: string[] = ["image/png", "image/webp", 'image/gif', "image/avif-sequence", "image/avif", "image/jpeg"];
+    static validImageText: string = "PNG, GIF or WEBP"; //Don't advertise JPEG as it's a bad fit for stickers. AVIF is not very well supported by clients at the moment.
 
     constructor(private client: MatrixClient, private roomId: string) {
     }
@@ -33,13 +36,13 @@ export class GatherStickersStage implements StickerPackBuilder {
                 this.currentSticker = {description: "", contentUri: ""};
                 this.expectingImage = true;
                 LogService.info("GatherStickersStage", "A sticker has been completed, but not submitted in " + this.roomId);
-                return this.client.sendNotice(this.roomId, "Thanks! Send me another 512x512 PNG for your next sticker or say !done if you've finished.");
+                return this.client.sendNotice(this.roomId, "Thanks! Send me another 512x512 " + GatherStickersStage.validImageText + " for your next sticker or say !done if you've finished.");
             }
         }
 
         if (event['type'] !== "m.room.message" || !event['content']['url'] || event['content']['msgtype'] !== "m.image") {
             LogService.warn("GatherStickersStage", "Event does not look to be an image event in " + this.roomId);
-            return this.client.sendNotice(this.roomId, "That doesn't look like an image to me. Please send a 512x512 PNG of the sticker you'd like to add.");
+            return this.client.sendNotice(this.roomId, "That doesn't look like an image to me. Please send a 512x512 " + GatherStickersStage.validImageText + " of the sticker you'd like to add.");
         }
 
         const mxc = event['content']['url'];
@@ -60,9 +63,9 @@ export class GatherStickersStage implements StickerPackBuilder {
             try {
                 LogService.info("GatherStickersStage", "Requesting media info for " + mxc);
                 const response = await this.client.doRequest("GET", "/_matrix/media/unstable/info/" + origin + "/" + mediaId);
-                if (response['content_type'] !== "image/png" || !response['width'] || !response['height']) {
+                if (!GatherStickersStage.compatibleMime.includes(event['content']['info']['mimetype']) || !response['width'] || !response['height']) {
                     LogService.warn("GatherStickersStage", "Media info for " + mxc + " indicates the file is invalid in " + this.roomId);
-                    return this.client.sendNotice(this.roomId, "Please upload a PNG image for your sticker.");
+                    return this.client.sendNotice(this.roomId, "Please upload a " + GatherStickersStage.validImageText + " image of your sticker."); 
                 }
             } catch (err) {
                 LogService.error("GatherStickersStage", "Error requesting media info:");
@@ -74,9 +77,9 @@ export class GatherStickersStage implements StickerPackBuilder {
                 LogService.warn("GatherStickersStage", "Event is missing media info in " + this.roomId);
                 return this.client.sendNotice(this.roomId, "Your client didn't send me enough information for me to validate your sticker. Please try again or use a different client.");
             }
-            if (event['content']['info']['mimetype'] !== "image/png") {
+            if (!GatherStickersStage.compatibleMime.includes(event['content']['info']['mimetype'])) {
                 LogService.warn("GatherStickersStage", "Media info from event indicates the file is not an image in " + this.roomId);
-                return this.client.sendNotice(this.roomId, "Please upload a PNG image for your sticker.");
+                return this.client.sendNotice(this.roomId, "Please upload a " + GatherStickersStage.validImageText + " image of your sticker."); 
             }
         }
 

src/builders/NewPackBuilder.ts

@@ -46,7 +46,7 @@ export class NewPackBuilder implements StickerPackBuilder {
                 .then(() => {
                     this.currentStage = this.gatherStage;
                     this.gatherStage.start().then(stickers => this.createStickerPack(stickers));
-                    return this.client.sendNotice(this.roomId, "Thanks! Now send me your first sticker. The image should be a PNG image (with a transparent background) and should be 512x512.\n\nThe sticker should also have a white border around it.");
+                    return this.client.sendNotice(this.roomId, "Thanks! Now send me your first sticker. The image should be a " + GatherStickersStage.validImageText + " image (with a transparent background) and should be 512x512.\n\nThe sticker should also have a white border around it.");
                 });
         } else {
             return this.currentStage.handleEvent(event);