LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-01 16:51: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

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

@ -21,6 +21,37 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
} }
render() { render() {
if (this.props.src.endsWith("webm")) {
return (
<video
poster={this.src("png")}
autoPlay
loop
muted
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,
"img-blur": this.props.thumbnail && this.props.nsfw,
"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,
})}
>
<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 ( return (
<picture> <picture>
<source srcSet={this.src("webp")} type="image/webp" /> <source srcSet={this.src("webp")} type="image/webp" />
@ -38,7 +69,6 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
this.props.thumbnail && !this.props.icon && !this.props.banner, this.props.thumbnail && !this.props.icon && !this.props.banner,
"img-expanded slight-radius": "img-expanded slight-radius":
!this.props.thumbnail && !this.props.icon, !this.props.thumbnail && !this.props.icon,
"img-blur": this.props.thumbnail && this.props.nsfw,
"object-fit-cover img-icon me-1": this.props.icon, "object-fit-cover img-icon me-1": this.props.icon,
"ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay": "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
this.props.iconOverlay, this.props.iconOverlay,
@ -48,6 +78,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
</picture> </picture>
); );
} }
}
src(format: string): string { src(format: string): string {
// sample url: // sample url:
@ -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) {