constant img & video container size when no imeta present
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
15806c56d0
commit
33888988af
@ -2,6 +2,7 @@ import { ProxyImg } from "@/Element/ProxyImg";
|
|||||||
import useImgProxy from "@/Hooks/useImgProxy";
|
import useImgProxy from "@/Hooks/useImgProxy";
|
||||||
import { IMeta } from "@snort/system";
|
import { IMeta } from "@snort/system";
|
||||||
import React, { CSSProperties, useMemo, useRef } from "react";
|
import React, { CSSProperties, useMemo, useRef } from "react";
|
||||||
|
import classNames from "classnames";
|
||||||
|
|
||||||
interface MediaElementProps {
|
interface MediaElementProps {
|
||||||
mime: string;
|
mime: string;
|
||||||
@ -26,19 +27,22 @@ export function MediaElement(props: MediaElementProps) {
|
|||||||
|
|
||||||
if (props.mime.startsWith("image/")) {
|
if (props.mime.startsWith("image/")) {
|
||||||
return (
|
return (
|
||||||
|
<div className={classNames("flex justify-center items-center -mx-4 md:mx-0 my-2", { "md:h-80": !props.meta })}>
|
||||||
<ProxyImg
|
<ProxyImg
|
||||||
key={props.url}
|
key={props.url}
|
||||||
src={props.url}
|
src={props.url}
|
||||||
onClick={props.onMediaClick}
|
onClick={props.onMediaClick}
|
||||||
className="max-h-[80vh] mx-auto"
|
className={classNames("w-full h-auto object-cover max-w-none max-h-[80vh]", { "md:max-h-80": !props.meta })}
|
||||||
style={style}
|
style={style}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
/>
|
/>
|
||||||
|
</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 (
|
return (
|
||||||
|
<div className="flex justify-center items-center -mx-4 md:mx-0 md:h-80 my-2">
|
||||||
<video
|
<video
|
||||||
autoPlay={autoplay}
|
autoPlay={autoplay}
|
||||||
loop={true}
|
loop={true}
|
||||||
@ -47,9 +51,10 @@ export function MediaElement(props: MediaElementProps) {
|
|||||||
src={props.url}
|
src={props.url}
|
||||||
controls
|
controls
|
||||||
poster={proxy(props.url)}
|
poster={proxy(props.url)}
|
||||||
className="max-h-[80vh] mx-auto"
|
className="max-h-[80vh] md:max-h-80"
|
||||||
style={style}
|
style={style}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user