Merge branch 'main' into main

.github/CODEOWNERS

@@ -1 +1 @@
-* @dessalines @SleeplessOne1917 @alectrocute
+* @dessalines @SleeplessOne1917 @alectrocute @jsit

src/shared/components/post/post-listing.tsx

@@ -239,25 +239,40 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   }
 
   get img() {
-    return this.imageSrc ? (
+    if (this.imageSrc) {
-      <>
+      return (
-        <div className="offset-sm-3 my-2 d-none d-sm-block">
+        <>
-          <a href={this.imageSrc} className="d-inline-block">
+          <div className="offset-sm-3 my-2 d-none d-sm-block">
-            <PictrsImage src={this.imageSrc} />
+            <a href={this.imageSrc} className="d-inline-block">
-          </a>
+              <PictrsImage src={this.imageSrc} />
+            </a>
+          </div>
+          <div className="my-2 d-block d-sm-none">
+            <a
+              className="d-inline-block"
+              onClick={linkEvent(this, this.handleImageExpandClick)}
+            >
+              <PictrsImage src={this.imageSrc} />
+            </a>
+          </div>
+        </>
+      );
+    }
+
+    const { post } = this.postView;
+    const { url } = post;
+
+    if (url && isVideo(url)) {
+      return (
+        <div className="embed-responsive mt-3">
+          <video muted controls className="embed-responsive-item col-12">
+            <source src={url} type="video/mp4" />
+          </video>
         </div>
-        <div className="my-2 d-block d-sm-none">
+      );
-          <a
+    }
-            className="d-inline-block"
+
-            onClick={linkEvent(this, this.handleImageExpandClick)}
+    return <></>;
-          >
-            <PictrsImage src={this.imageSrc} />
-          </a>
-        </div>
-      </>
-    ) : (
-      <></>
-    );
   }
 
   imgThumb(src: string) {
@@ -325,17 +340,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     } else if (url) {
       if (!this.props.hideImage && isVideo(url)) {
         return (
-          <div className="embed-responsive embed-responsive-16by9">
+          <a
-            <video
+            className="text-body"
-              playsInline
+            href={url}
-              muted
+            title={url}
-              loop
+            rel={relTags}
-              controls
+            data-tippy-content={I18NextService.i18n.t("expand_here")}
-              className="embed-responsive-item"
+            onClick={linkEvent(this, this.handleImageExpandClick)}
-            >
+            aria-label={I18NextService.i18n.t("expand_here")}
-              <source src={url} type="video/mp4" />
+          >
-            </video>
+            <div className="thumbnail rounded bg-light d-flex justify-content-center">
-          </div>
+              <Icon icon="play" classes="d-flex align-items-center" />
+            </div>
+          </a>
         );
       } else {
         return (