matrix-art

commit 9521e13d2f820c9ec7c447eaa322cf49aefa5846
parent e42b32ef3f99397b6ad21c1c00d40171dd8639ef
Author: MTRNord <mtrnord1@gmail.com>
Date:   Tue, 18 Jan 2022 22:01:20 +0100

Add Avatars to user name in the Posts

Diffstat:
M
pages/post/[id].tsx
 | 
16
+++++++++++-----

1 file changed, 11 insertions(+), 5 deletions(-)
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -26,8 +26,9 @@ type State = {
     hasFullyLoaded: boolean;
     isLoadingImages: boolean;
     image_event?: MatrixImageEvents;
-    displayname?: string;
+    displayname: string;
     error?: any;
+    avatar_url?: string;
 };
 
 class Post extends PureComponent<Props, State> {
@@ -40,7 +41,8 @@ class Post extends PureComponent<Props, State> {
             hasFullyLoaded: props.hasFullyLoaded,
             image_event: props.image_event,
             displayname: props.displayname,
-            isLoadingImages: false
+            isLoadingImages: false,
+            avatar_url: props.avatar_url
         };
     }
 
@@ -107,7 +109,7 @@ class Post extends PureComponent<Props, State> {
     }
 
     render() {
-        const { error, hasFullyLoaded, image_event, displayname } = this.state;
+        const { error, hasFullyLoaded, image_event, displayname, avatar_url } = this.state;
 
         if (!hasFullyLoaded) {
             return (
@@ -176,7 +178,10 @@ class Post extends PureComponent<Props, State> {
                         <div className="grow bg-[#f8f8f8] dark:bg-[#06070D] min-h-[25rem] flex flex-col items-center">
                             <div className="flex flex-col items-start lg:min-w-[60rem] lg:w-[60rem]">
                                 <h1 className="my-4 text-6xl text-gray-900 dark:text-gray-200 font-bold">{post_title}</h1>
-                                <h3 className="cursor-pointer mt-0 mb-4 text-l text-gray-900 dark:text-gray-200 font-normal"><Link href={"/profile/" + encodeURIComponent(image_event.sender)}>{displayname}</Link></h3>
+                                <h3 className="cursor-pointer mt-0 mb-4 text-l text-gray-900 dark:text-gray-200 font-normal inline-flex">
+                                    {avatar_url ? <img className="block object-cover rounded-full mr-4" src={this.context.client.downloadLink(avatar_url)!} height="24" width="24" alt={this.state.displayname} title={this.state.displayname}/> : null}
+                                    <Link href={"/profile/" + encodeURIComponent(image_event.sender)}>{displayname}</Link>
+                                </h3>
                                 {isImageGalleryEvent(image_event) ? this.renderImageGalleryTags(image_event) : (isImageEvent(image_event) ? this.renderSingleImageTags(image_event) : <div key={(image_event as MatrixEventBase).event_id + "tags"}></div>)}
                             </div>
                         </div>
@@ -421,7 +426,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
                             image_event: image_event as MatrixImageEvents,
                             event_id: event_id,
                             hasFullyLoaded: true,
-                            displayname: profile.displayname
+                            displayname: profile.displayname,
+                            avatar_url: profile.avatar_url
                         }
                     };
                 } catch (error) {