matrix-art

commit 32fb004842e2d8102f676513151cb87e31bd4f22
parent 14c6bc1ea4d91b4ed7d28a0a2a61fb4393bd8607
Author: MTRNord <mtrnord1@gmail.com>
Date:   Fri, 14 Jan 2022 02:27:45 +0100

Also add avatars and displaynames to metadata

Diffstat:
M
helpers/event_types.ts
 | 
4
++++
M
pages/index.tsx
 | 
22
++++++++++++++++++----
M
pages/post/[id].tsx
 | 
10
+++++++---

3 files changed, 29 insertions(+), 7 deletions(-)
diff --git a/helpers/event_types.ts b/helpers/event_types.ts
@@ -37,6 +37,8 @@ export type ImageEventContent = {
 export type MessageAlike = { "m.text": string; } | { body: string; mimetype: string; };
 export type ImageEventContentWithCaption = ImageEventContent & {
     "m.caption": MessageAlike[];
+    // Fake values
+    displayname?: string;
 };
 
 export type ImageEvent = MatrixEventBase & {
@@ -47,6 +49,8 @@ export type ImageEvent = MatrixEventBase & {
 export type ImageGalleryContent = {
     "m.image_gallery": ImageEventContent[];
     "m.caption": MessageAlike[];
+    // Fake values
+    displayname?: string;
 };
 
 export type ImageGalleryEvent = MatrixEventBase & {
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -45,7 +45,9 @@ class Home extends PureComponent<Props, State>{
               "@type": "ImageObject",
               "contentUrl": this.context.client?.downloadLink(image['m.file'].url)!,
               // TODO get this from the event itself
-              "license": "https://creativecommons.org/licenses/by-nc-nd/4.0/"
+              "license": "https://creativecommons.org/licenses/by-nc-nd/4.0/",
+              "author": event.content.displayname,
+              "name": image['m.text']
             };
           });
         } else {
@@ -54,7 +56,9 @@ class Home extends PureComponent<Props, State>{
             "@type": "ImageObject",
             "contentUrl": this.context.client?.downloadLink(event.content['m.file'].url)!,
             // TODO get this from the event itself
-            "license": "https://creativecommons.org/licenses/by-nc-nd/4.0/"
+            "license": "https://creativecommons.org/licenses/by-nc-nd/4.0/",
+            "author": event.content.displayname,
+            "name": event.content['m.text']
           };
         }
       });
@@ -64,7 +68,7 @@ class Home extends PureComponent<Props, State>{
             <title key="title">Matrix Art | Home</title>
             <meta property="og:title" content="Matrix Art | Home" key="og-title" />
             <meta property="og:type" content="website" key="og-type" />
-            <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(metadata) }}/>
+            <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(metadata) }} />
           </Head>
           <Header></Header>
           <main className='mb-auto lg:pt-20 pt-52 z-0'>
@@ -117,7 +121,17 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       const roomId = await client?.followUser(user.user_room);
       const events = await client?.getTimeline(roomId, 100);
       // Filter events by type
-      image_events = [...image_events, ...(events.filter((event) => event.type == "m.image_gallery" || event.type == "m.image") as MatrixImageEvents[])];
+      let images = events.filter((event) => event.type == "m.image_gallery" || event.type == "m.image") as MatrixImageEvents[];
+      images = await Promise.all(images.map(async (image) => {
+        try {
+          const profile = await client.getProfile(image.sender);
+          image.content.displayname = profile.displayname;
+        } catch {
+          image.content.displayname = image.sender;
+        }
+        return image;
+      }));
+      image_events = [...image_events, ...images];
       console.log("Adding", image_events.length, "items");
     }
 
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -243,7 +243,9 @@ class Post extends PureComponent<Props, State> {
             "@type": "ImageObject",
             contentUrl: url,
             // TODO get this from the event itself
-            license: "https://creativecommons.org/licenses/by-nc-nd/4.0/"
+            license: "https://creativecommons.org/licenses/by-nc-nd/4.0/",
+            author: this.state.displayname,
+            name: imageEvent.content['m.text']
         };
         const blurhash = imageEvent.content['xyz.amorgan.blurhash'];
         const image_html = blurhash ? (
@@ -287,7 +289,7 @@ class Post extends PureComponent<Props, State> {
     }
 
     renderImageGalleryEvent(imageEvent: ImageGalleryEvent, caption: string) {
-        const metadata: { "@context": string; "@type": string; contentUrl: string; license: string; }[] = [];
+        const metadata: { "@context": string; "@type": string; contentUrl: string; license: string; author: string; name: string; }[] = [];
         const images = imageEvent.content['m.image_gallery'].map(image => {
             const url = this.context.client?.downloadLink(image["m.file"].url);
             const thumbnail_url = this.context.client?.downloadLink(image['m.thumbnail'][0].url);
@@ -299,7 +301,9 @@ class Post extends PureComponent<Props, State> {
                 "@type": "ImageObject",
                 contentUrl: url,
                 // TODO get this from the event itself
-                license: "https://creativecommons.org/licenses/by-nc-nd/4.0/"
+                license: "https://creativecommons.org/licenses/by-nc-nd/4.0/",
+                author: this.state.displayname!,
+                name: image['m.text']
             });
             const blurhash = image["xyz.amorgan.blurhash"];
             const image_html = blurhash ? (