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

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