LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-29 07:41:13 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse source 
Co-authored-by: Beehaw Dev <dev@beehaw.dev>
This commit is contained in:
Security-Chief-Odo 2023-08-25 23:34:49 -05:00 committed by GitHub
parent 3338887385
commit 7f993c6ce7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 14 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,16 +21,13 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
} }
render() { render() {
return ( if (this.props.src.endsWith("webm")) {
<picture> return (
<source srcSet={this.src("webp")} type="image/webp" /> <video
<source srcSet={this.props.src} /> poster={this.src("png")}
<source srcSet={this.src("jpg")} type="image/jpeg" /> autoPlay
<img loop
src={this.props.src} muted
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,
@ -44,9 +41,43 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
this.props.iconOverlay, this.props.iconOverlay,
"avatar-pushup": this.props.pushup, "avatar-pushup": this.props.pushup,
})} })}
/> >
</picture> <source src={this.props.src} type="video/webm" />
); <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 {
@ -62,7 +93,6 @@ 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) {