Add random comment header to built-in avatar PNGs

To make them unique. For issue #659.

src/plugins/utils.js

@@ -13,6 +13,7 @@ import duration from "dayjs/plugin/duration";
 import i18n from "./lang";
 import { toRaw, isRef, isReactive, isProxy } from "vue";
 import { UploadPromise } from "../models/attachment";
+import png from "@/plugins/png.ts";
 
 export const STATE_EVENT_ROOM_DELETION_NOTICE = "im.keanu.room_deletion_notice";
 export const STATE_EVENT_ROOM_DELETED = "im.keanu.room_deleted";
@@ -831,7 +832,24 @@ class Util {
     return images;
   }
 
-  setAvatar(matrix, file, onUploadProgress) {
+  /**
+   * For one of the predefined avatars, make it system unique by adding a random PNG comment header.
+   */
+  makeUniqueAvatar(image) {
+    var list = png.splitChunk(image);
+    
+    // append
+    var iend = list.pop(); // remove IEND
+    var newchunk = png.createChunk("tEXt","Comment\0Keanu avatar - " + this.randomPass());
+    list.push(newchunk);
+    list.push(iend);
+
+    // join
+    var newpng = png.joinChunk(list);
+    return newpng;
+  }
+
+  setAvatar(matrix, file, onUploadProgress, makeUnique) {
     return new Promise((resolve, reject) => {
       axios
         .get(file, { responseType: "arraybuffer" })
@@ -842,9 +860,16 @@ class Util {
             progressHandler: onUploadProgress,
             onlyContentUri: false,
           };
+          let data = response.data;
+          
+          // If making a system unique avatar, we add a random PNG header in here
+          if (makeUnique) {
+            data = this.makeUniqueAvatar(data);
+          }
+
           var avatarUri;
           matrix.matrixClient
-            .uploadContent(response.data, opts)
+            .uploadContent(data, opts)
             .then((response) => {
               avatarUri = response.content_uri;
               return matrix.matrixClient.setAvatarUrl(avatarUri);