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) {
|
export function MediaElement(props: MediaElementProps) {
|
||||||
const { proxy } = useImgProxy();
|
const { proxy } = useImgProxy();
|
||||||
|
|
||||||
|
const autoplay = window.innerWidth >= 768;
|
||||||
|
|
||||||
if (props.mime.startsWith("image/")) {
|
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/")) {
|
} else if (props.mime.startsWith("audio/")) {
|
||||||
return <audio key={props.url} src={props.url} controls />;
|
return <audio key={props.url} src={props.url} controls />;
|
||||||
} else if (props.mime.startsWith("video/")) {
|
} 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 {
|
} else {
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
|
@ -28,17 +28,6 @@
|
|||||||
overflow: scroll;
|
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"] {
|
.text iframe[src*="youtube.com"] {
|
||||||
aspect-ratio: 16/9;
|
aspect-ratio: 16/9;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user