src/shared/components/common/pictrs-image.tsx

   1 import { Component } from "inferno";
   2
   3 const iconThumbnailSize = 96;
   4 const thumbnailSize = 256;
   5 const maxImageSize = 3000;
   6
   7 interface PictrsImageProps {
   8   src: string;
   9   alt?: string;
  10   icon?: boolean;
  11   banner?: boolean;
  12   thumbnail?: boolean;
  13   nsfw?: boolean;
  14   iconOverlay?: boolean;
  15   pushup?: boolean;
  16 }
  17
  18 export class PictrsImage extends Component<PictrsImageProps, any> {
  19   constructor(props: any, context: any) {
  20     super(props, context);
  21   }
  22
  23   render() {
  24     return (
  25       <picture>
  26         <source srcSet={this.src("webp")} type="image/webp" />
  27         <source srcSet={this.src("jpg")} type="image/jpeg" />
  28         <img
  29           src={this.src("jpg")}
  30           alt={this.alt()}
  31           loading="lazy"
  32           className={`
  33         ${!this.props.icon && !this.props.iconOverlay && "img-fluid "}
  34         ${this.props.banner && "banner "}
  35         ${
  36           this.props.thumbnail && !this.props.icon && !this.props.banner
  37             ? "thumbnail rounded "
  38             : "img-expanded "
  39         }
  40         ${this.props.thumbnail && this.props.nsfw && "img-blur "}
  41         ${this.props.icon && "rounded-circle img-icon mr-2 "}
  42         ${this.props.iconOverlay && "ml-2 mb-0 rounded-circle avatar-overlay "}
  43         ${this.props.pushup && "avatar-pushup "}
  44         `}
  45         />
  46       </picture>
  47     );
  48   }
  49
  50   src(format: string): string {
  51     // sample url:
  52     // http://localhost:8535/pictrs/image/file.png?thumbnail=256&format=jpg
  53
  54     let split = this.props.src.split("/pictrs/image/");
  55
  56     // If theres not multiple, then its not a pictrs image
  57     if (split.length == 1) {
  58       return this.props.src;
  59     }
  60
  61     let host = split[0];
  62     let path = split[1];
  63
  64     let params = { format };
  65
  66     if (this.props.thumbnail) {
  67       params["thumbnail"] = thumbnailSize;
  68     } else if (this.props.icon) {
  69       params["thumbnail"] = iconThumbnailSize;
  70     } else {
  71       params["thumbnail"] = maxImageSize;
  72     }
  73
  74     let paramsStr = `?${new URLSearchParams(params).toString()}`;
  75     let out = `${host}/pictrs/image/${path}${paramsStr}`;
  76
  77     return out;
  78   }
  79
  80   alt(): string {
  81     if (this.props.icon) {
  82       return "";
  83     }
  84     return this.props.alt || "";
  85   }
  86 }