1 import { Component } from "inferno";
3 const iconThumbnailSize = 96;
4 const thumbnailSize = 256;
5 const maxImageSize = 3000;
7 interface PictrsImageProps {
13 iconOverlay?: boolean;
17 export class PictrsImage extends Component<PictrsImageProps, any> {
18 constructor(props: any, context: any) {
19 super(props, context);
25 <source srcSet={this.src("webp")} type="image/webp" />
26 <source srcSet={this.src("jpg")} type="image/jpeg" />
32 ${!this.props.icon && !this.props.iconOverlay && "img-fluid "}
34 this.props.thumbnail && !this.props.icon
35 ? "thumbnail rounded "
38 ${this.props.thumbnail && this.props.nsfw && "img-blur "}
39 ${this.props.icon && "rounded-circle img-icon mr-2 "}
40 ${this.props.iconOverlay && "ml-2 mb-0 rounded-circle avatar-overlay "}
41 ${this.props.pushup && "avatar-pushup "}
48 src(format: string): string {
50 // http://localhost:8535/pictrs/image/file.png?thumbnail=256&format=jpg
52 let split = this.props.src.split("/pictrs/image/");
54 // If theres not multiple, then its not a pictrs image
55 if (split.length == 1) {
56 return this.props.src;
62 let params = { format };
64 if (this.props.thumbnail) {
65 params["thumbnail"] = thumbnailSize;
66 } else if (this.props.icon) {
67 params["thumbnail"] = iconThumbnailSize;
69 params["thumbnail"] = maxImageSize;
72 let paramsStr = `?${new URLSearchParams(params).toString()}`;
73 let out = `${host}/pictrs/image/${path}${paramsStr}`;
79 if (this.props.icon) {
82 return this.props.alt || "";