From 7f993c6ce7b350caf3aec657ee9b2c77790dc79b Mon Sep 17 00:00:00 2001
From: Security-Chief-Odo
 <87156706+Security-Chief-Odo@users.noreply.github.com>
Date: Fri, 25 Aug 2023 23:34:49 -0500
Subject: [PATCH] Improved webm handling for pictrs and UI. Fixes #2072 (#2074)

Co-authored-by: Beehaw Dev <dev@beehaw.dev>
---
 src/shared/components/common/pictrs-image.tsx | 58 ++++++++++++++-----
 1 file changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx
index f1285129..1d2b72da 100644
--- a/src/shared/components/common/pictrs-image.tsx
+++ b/src/shared/components/common/pictrs-image.tsx
@@ -21,16 +21,13 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
   }
 
   render() {
-    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"
+    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,
@@ -44,9 +41,43 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
               this.props.iconOverlay,
             "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 {
@@ -62,7 +93,6 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
 
     const host = split[0];
     const path = split[1];
-
     const params = { format };
 
     if (this.props.thumbnail) {