autoplay vids on desktop, img constant height

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

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;
 }