render identicon if user avatar image is null

slatinsky · Jun 30, 2023 · 6059ec4 · 6059ec4
1 parent 19e1d1a
commit 6059ec4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,6 +14,7 @@
 	"type": "module",
 	"dependencies": {
 		"axios": "^1.2.6",
+		"identicons": "^0.1.0",
 		"lodash-es": "^4.17.21",
 		"moment": "^2.29.4"
 	},

diff --git a/frontend/src/components/messages/NewMessage.svelte b/frontend/src/components/messages/NewMessage.svelte
@@ -12,6 +12,8 @@
 	import MessageStickers from './MessageStickers.svelte';
 	import { guildId } from 'src/js/stores';
 
+	import identicons from 'identicons'
+
 	export let message: Message;
 	export let previousMessage: Message | null = null;
 	export let referencedMessage: Message | null = null;
@@ -198,7 +200,11 @@
 
 					{#if !mergeWithPrevious}
 						{#if message.type != 'ThreadCreated'}
-							<ImageGallery asset={message.author?.avatar} imgclass={"chatlog__avatar"} />
+							{#if message.author?.avatar}
+								<ImageGallery asset={message.author?.avatar} imgclass={"chatlog__avatar"} />
+							{:else}
+								<img class="chatlog__avatar" src={identicons.generateSVGDataURIString(message.author._id, { width: 200, size: 3 })} />
+							{/if}
 						{/if}
 					{/if}
 				</div>
@@ -427,4 +433,9 @@
 		font-size: 12px;
 		white-space: nowrap;  /* never break the line */
 	}
+
+	.chatlog__avatar {
+		image-rendering: crisp-edges;
+		background-color: white;  /*For identicons*/
+	}
 </style>