component classes v2

[lemmy-ui.git] / src / shared / components / common / pictrs-image.tsx

diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx
index 8526284b331ae52505801b03f6f44c05c3ea9aa1..7443749094970cd427bf9ea8cc30a07349d413cc 100644 (file)
--- a/src/shared/components/common/pictrs-image.tsx
+++ b/src/shared/components/common/pictrs-image.tsx
@@ -1,13 +1,14 @@
+import classNames from "classnames";
 import { Component } from "inferno";
 
 const iconThumbnailSize = 96;
 const thumbnailSize = 256;
-const maxImageSize = 3000;
 
 interface PictrsImageProps {
   src: string;
   alt?: string;
   icon?: boolean;
+  banner?: boolean;
   thumbnail?: boolean;
   nsfw?: boolean;
   iconOverlay?: boolean;
@@ -21,24 +22,28 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
 
   render() {
     return (
-      <picture>
+      <picture className="pictrs-image d-inline-block overflow-hidden">
         <source srcSet={this.src("webp")} type="image/webp" />
+        <source srcSet={this.props.src} />
         <source srcSet={this.src("jpg")} type="image/jpeg" />
         <img
-          src={this.src("jpg")}
+          src={this.props.src}
           alt={this.alt()}
-          className={`
-        ${!this.props.icon && !this.props.iconOverlay && "img-fluid "}
-        ${
-          this.props.thumbnail && !this.props.icon
-            ? "thumbnail rounded "
-            : "img-expanded "
-        }
-        ${this.props.thumbnail && this.props.nsfw && "img-blur "}
-        ${this.props.icon && "rounded-circle img-icon mr-2 "}
-        ${this.props.iconOverlay && "ml-2 mb-0 rounded-circle avatar-overlay "}
-        ${this.props.pushup && "avatar-pushup "}
-        `}
+          title={this.alt()}
+          loading="lazy"
+          className={classNames({
+            "img-fluid": !this.props.icon && !this.props.iconOverlay,
+            banner: this.props.banner,
+            "thumbnail rounded":
+              this.props.thumbnail && !this.props.icon && !this.props.banner,
+            "img-expanded slight-radius":
+              !this.props.thumbnail && !this.props.icon,
+            "img-blur": this.props.thumbnail && this.props.nsfw,
+            "rounded-circle img-cover img-icon me-2": this.props.icon,
+            "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
+              this.props.iconOverlay,
+            "avatar-pushup": this.props.pushup,
+          })}
         />
       </picture>
     );
@@ -48,28 +53,26 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
     // sample url:
     // http://localhost:8535/pictrs/image/file.png?thumbnail=256&format=jpg
 
-    let split = this.props.src.split("/pictrs/image/");
+    const split = this.props.src.split("/pictrs/image/");
 
     // If theres not multiple, then its not a pictrs image
     if (split.length == 1) {
       return this.props.src;
     }
 
-    let host = split[0];
-    let path = split[1];
+    const host = split[0];
+    const path = split[1];
 
-    let params = { format };
+    const params = { format };
 
     if (this.props.thumbnail) {
       params["thumbnail"] = thumbnailSize;
     } else if (this.props.icon) {
       params["thumbnail"] = iconThumbnailSize;
-    } else {
-      params["thumbnail"] = maxImageSize;
     }
 
-    let paramsStr = `?${new URLSearchParams(params).toString()}`;
-    let out = `${host}/pictrs/image/${path}${paramsStr}`;
+    const paramsStr = new URLSearchParams(params).toString();
+    const out = `${host}/pictrs/image/${path}?${paramsStr}`;
 
     return out;
   }