From 50d90166fc107e597eca0ca68c85925b77b063b0 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 6 Dec 2023 11:57:31 +0200
Subject: [PATCH] autoplay vids on desktop, img constant height

---
 .../app/src/Element/Embed/MediaElement.tsx    | 23 +++++++++++++++++--
 packages/app/src/Element/Text.css             | 11 ---------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/app/src/Element/Embed/MediaElement.tsx b/packages/app/src/Element/Embed/MediaElement.tsx
index 357b2c37..b12d5421 100644
--- a/packages/app/src/Element/Embed/MediaElement.tsx
+++ b/packages/app/src/Element/Embed/MediaElement.tsx
@@ -14,12 +14,31 @@ interface MediaElementProps {
 export function MediaElement(props: MediaElementProps) {
   const { proxy } = useImgProxy();
 
+  const autoplay = window.innerWidth >= 768;
+
   if (props.mime.startsWith("image/")) {
-    return <ProxyImg key={props.url} src={props.url} onClick={props.onMediaClick} />;
+    return (
+      // constant height container avoids layout shift when images load
+      <div className="-mx-4 md:mx-0 my-3 md:h-80 flex items-center justify-center">
+        <ProxyImg key={props.url} src={props.url} onClick={props.onMediaClick} className="md:max-h-80" />
+      </div>
+    );
   } else if (props.mime.startsWith("audio/")) {
     return <audio key={props.url} src={props.url} controls />;
   } else if (props.mime.startsWith("video/")) {
-    return <video key={props.url} src={props.url} controls poster={proxy(props.url)} />;
+    return (
+      <div className="-mx-4 md:mx-0 my-3 md:h-80 flex items-center justify-center">
+        <video
+          autoPlay={autoplay}
+          muted={autoplay}
+          key={props.url}
+          src={props.url}
+          controls
+          poster={proxy(props.url)}
+          className="md:max-h-80"
+        />
+      </div>
+    );
   } else {
     return (
       <a
diff --git a/packages/app/src/Element/Text.css b/packages/app/src/Element/Text.css
index 5d089bc4..662dd225 100644
--- a/packages/app/src/Element/Text.css
+++ b/packages/app/src/Element/Text.css
@@ -28,17 +28,6 @@
   overflow: scroll;
 }
 
-.text img:not(.custom-emoji),
-.text video,
-.text iframe,
-.text audio {
-  max-width: 100%;
-  display: block;
-  max-height: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .text iframe[src*="youtube.com"] {
   aspect-ratio: 16/9;
 }