1 import classNames from "classnames";
2 import { Component } from "inferno";
4 import { UserService } from "../../services";
6 const iconThumbnailSize = 96;
7 const thumbnailSize = 256;
9 interface PictrsImageProps {
16 iconOverlay?: boolean;
20 export class PictrsImage extends Component<PictrsImageProps, any> {
21 constructor(props: any, context: any) {
22 super(props, context);
26 let user_blur_nsfw = true;
27 if (UserService.Instance.myUserInfo) {
29 UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw;
32 const blur_image = this.props.nsfw && user_blur_nsfw;
36 <source srcSet={this.src("webp")} type="image/webp" />
37 <source srcSet={this.props.src} />
38 <source srcSet={this.src("jpg")} type="image/jpeg" />
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,
63 src(format: string): string {
65 // http://localhost:8535/pictrs/image/file.png?thumbnail=256&format=jpg
67 const split = this.props.src.split("/pictrs/image/");
69 // If theres not multiple, then its not a pictrs image
70 if (split.length === 1) {
71 return this.props.src;
74 const host = split[0];
75 const path = split[1];
77 const params = { format };
79 if (this.props.thumbnail) {
80 params["thumbnail"] = thumbnailSize;
81 } else if (this.props.icon) {
82 params["thumbnail"] = iconThumbnailSize;
85 const paramsStr = new URLSearchParams(params).toString();
86 const out = `${host}/pictrs/image/${path}?${paramsStr}`;
92 if (this.props.icon) {
95 return this.props.alt || "";