1 import classNames from "classnames";
2 import { Component } from "inferno";
4 const iconThumbnailSize = 96;
5 const thumbnailSize = 256;
7 interface PictrsImageProps {
14 iconOverlay?: boolean;
18 export class PictrsImage extends Component<PictrsImageProps, any> {
19 constructor(props: any, context: any) {
20 super(props, context);
25 <picture className="d-inline-block overflow-hidden">
26 <source srcSet={this.src("webp")} type="image/webp" />
27 <source srcSet={this.props.src} />
28 <source srcSet={this.src("jpg")} type="image/jpeg" />
34 className={classNames({
35 "img-fluid": !this.props.icon && !this.props.iconOverlay,
36 banner: this.props.banner,
38 this.props.thumbnail && !this.props.icon && !this.props.banner,
39 "img-expanded slight-radius":
40 !this.props.thumbnail && !this.props.icon,
41 "img-blur": this.props.thumbnail && this.props.nsfw,
42 "rounded-circle img-cover img-icon mr-2": this.props.icon,
43 "ml-2 mb-0 rounded-circle img-cover avatar-overlay":
44 this.props.iconOverlay,
45 "avatar-pushup": this.props.pushup,
52 src(format: string): string {
54 // http://localhost:8535/pictrs/image/file.png?thumbnail=256&format=jpg
56 const split = this.props.src.split("/pictrs/image/");
58 // If theres not multiple, then its not a pictrs image
59 if (split.length == 1) {
60 return this.props.src;
63 const host = split[0];
64 const path = split[1];
66 const params = { format };
68 if (this.props.thumbnail) {
69 params["thumbnail"] = thumbnailSize;
70 } else if (this.props.icon) {
71 params["thumbnail"] = iconThumbnailSize;
74 const paramsStr = new URLSearchParams(params).toString();
75 const out = `${host}/pictrs/image/${path}?${paramsStr}`;
81 if (this.props.icon) {
84 return this.props.alt || "";