matrix-art

commit 8858f7eb11ec511fd9998226373cec3b6e3c6eca
parent 3cadb39da275ff466a8fba2e6be1d79f85c8fe61
Author: MTRNord <mtrnord1@gmail.com>
Date:   Fri, 21 Jan 2022 21:26:43 +0100

Generate dynamic size thumbnail for the banner and the images

Diffstat:
M
helpers/matrix_client.ts
 | 
2
+-
M
pages/post/[id].tsx
 | 
2
+-
M
pages/profile/[userid].tsx
 | 
7
++++++-

3 files changed, 8 insertions(+), 3 deletions(-)
diff --git a/helpers/matrix_client.ts b/helpers/matrix_client.ts
@@ -260,7 +260,7 @@ export default class MatrixClient {
         return constMatrixArtServer + "/_matrix/media/r0/download/" + mxcUri.split("mxc://")[1];
     }
 
-    thumbnailLink(mxcUri: string, method: string, width: number, height: number): string | undefined {
+    thumbnailLink(mxcUri: string, method: "scale" | "crop", width: number, height: number): string | undefined {
         if (!mxcUri) {
             return;
         }
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -247,7 +247,7 @@ class Post extends PureComponent<Props, State> {
 
     renderSingleImageEvent(imageEvent: ImageEvent, caption: string) {
         const url = this.context.client?.downloadLink(imageEvent.content["m.file"].url);
-        const thumbnail_url = this.context.client?.downloadLink(imageEvent.content['m.thumbnail'][0].url);
+        const thumbnail_url = this.context.client.thumbnailLink(imageEvent.content['m.file'].url, "scale", imageEvent.content['m.image'].width - 1, imageEvent.content['m.image'].height - 1);
 
         if (!url || !thumbnail_url) {
             return <></>;
diff --git a/pages/profile/[userid].tsx b/pages/profile/[userid].tsx
@@ -145,10 +145,15 @@ class Profile extends PureComponent<Props, State> {
                 </Head>
                 <Header></Header>
                 <main className='w-full mb-auto lg:pt-20 pt-56 z-0 bg-[#f8f8f8] dark:bg-[#06070D]'>
-                    {banner_event ? <div style={{
+                    {/*{banner_event ? <div style={{
                         backgroundImage: `url(${this.context.client.downloadLink((banner_event as BannerEvent).content["m.file"].url)})`
                     }}
                         className="fixed top-14 w-full h-[32.5rem] bg-cover lg:bg-[position:50%]"
+                    ></div> : undefined}*/}
+                    {banner_event ? <div style={{
+                        backgroundImage: `url(${this.context.client.thumbnailLink((banner_event as BannerEvent).content["m.file"].url, "scale", (banner_event as BannerEvent).content["m.image"].width - 1, (banner_event as BannerEvent).content["m.image"].height - 1)})`
+                    }}
+                        className="fixed top-14 w-full h-[32.5rem] bg-cover lg:bg-[position:50%]"
                     ></div> : undefined}
                     <div className="relative w-full">
                         <div className="relative mb-0 min-h-[43.75rem]">