autoplay vids on desktop, img constant height
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
8dc0c28377
commit
50d90166fc
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user