LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-28 23:31:14 +00:00
Code Issues Projects Releases Wiki Activity

Revert "Improved webm handling for pictrs and UI. Fixes #2072 (#2074)"

Browse source 
This reverts commit 7f993c6ce7.
This commit is contained in:
Dessalines 2023-09-29 07:43:33 -04:00
parent 8eb016d556
commit 8660a788bf
1 changed files with 14 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/shared/components/common/pictrs-image.tsx
View file

@ -21,13 +21,16 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
} }
render() { render() {
if (this.props.src.endsWith("webm")) { return (
return ( <picture>
<video <source srcSet={this.src("webp")} type="image/webp" />
poster={this.src("png")} <source srcSet={this.props.src} />
autoPlay <source srcSet={this.src("jpg")} type="image/jpeg" />
loop <img
muted src={this.props.src}
alt={this.alt()}
title={this.alt()}
loading="lazy"
className={classNames("overflow-hidden pictrs-image", { className={classNames("overflow-hidden pictrs-image", {
"img-fluid": !this.props.icon && !this.props.iconOverlay, "img-fluid": !this.props.icon && !this.props.iconOverlay,
banner: this.props.banner, banner: this.props.banner,
@ -41,43 +44,9 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
this.props.iconOverlay, this.props.iconOverlay,
"avatar-pushup": this.props.pushup, "avatar-pushup": this.props.pushup,
})} })}
> />
<source src={this.props.src} type="video/webm" /> </picture>
<img );
src={this.src("png")}
alt={this.alt()}
title="Unable to play webm video, your browser does not support it"
loading="lazy"
/>
</video>
);
} else {
return (
<picture>
<source srcSet={this.src("webp")} type="image/webp" />
<source srcSet={this.props.src} />
<source srcSet={this.src("jpg")} type="image/jpeg" />
<img
src={this.props.src}
alt={this.alt()}
title={this.alt()}
loading="lazy"
className={classNames("overflow-hidden pictrs-image", {
"img-fluid": !this.props.icon && !this.props.iconOverlay,
banner: this.props.banner,
"thumbnail rounded object-fit-cover":
this.props.thumbnail && !this.props.icon && !this.props.banner,
"img-expanded slight-radius":
!this.props.thumbnail && !this.props.icon,
"object-fit-cover img-icon me-1": this.props.icon,
"ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
this.props.iconOverlay,
"avatar-pushup": this.props.pushup,
})}
/>
</picture>
);
}
} }
src(format: string): string { src(format: string): string {
@ -93,6 +62,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
const host = split[0]; const host = split[0];
const path = split[1]; const path = split[1];
const params = { format }; const params = { format };
if (this.props.thumbnail) { if (this.props.thumbnail) {