Tweaks to Preview Max Height (#2012)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
2022-05-18 23:40:47 -05:00
committed by GitHub
parent 42deb992e6
commit 30d23d8555

View File

@@ -96,59 +96,74 @@ const PreviewFile = ({
<LinearProgress />
</Grid>
)}
{objectType === "video" && (
<video
style={{ width: "100%", height: "auto" }}
autoPlay={true}
controls={true}
muted={false}
playsInline={true}
onPlay={iframeLoaded}
>
<source src={path} type="video/mp4" />
</video>
)}
{objectType === "audio" && (
<audio
style={{ width: "100%", height: "auto" }}
autoPlay={true}
controls={true}
muted={false}
playsInline={true}
onPlay={iframeLoaded}
>
<source src={path} type="audio/mpeg" />
</audio>
)}
{objectType === "image" && (
<img
style={{ width: "100%", height: "auto" }}
src={path}
alt={"preview"}
onLoad={iframeLoaded}
/>
)}
{objectType !== "video" &&
objectType !== "audio" &&
objectType !== "image" && (
<div
className={clsx(classes.iframeBase, {
[classes.iframeHidden]: loading,
})}
<div style={{ textAlign: "center" }}>
{objectType === "video" && (
<video
style={{
width: "auto",
height: "auto",
maxWidth: "calc(100vw - 100px)",
maxHeight: "calc(100vh - 200px)",
}}
autoPlay={true}
controls={true}
muted={false}
playsInline={true}
onPlay={iframeLoaded}
>
<iframe
src={path}
title="File Preview"
allowTransparency
className={`${classes.iframeContainer} ${
isFullscreen ? "fullHeight" : objectType
}`}
onLoad={iframeLoaded}
>
File couldn't be loaded. Please try Download instead
</iframe>
</div>
<source src={path} type="video/mp4" />
</video>
)}
{objectType === "audio" && (
<audio
style={{
width: "100%",
height: "auto",
}}
autoPlay={true}
controls={true}
muted={false}
playsInline={true}
onPlay={iframeLoaded}
>
<source src={path} type="audio/mpeg" />
</audio>
)}
{objectType === "image" && (
<img
style={{
width: "auto",
height: "auto",
maxWidth: "100vw",
maxHeight: "100vh",
}}
src={path}
alt={"preview"}
onLoad={iframeLoaded}
/>
)}
{objectType !== "video" &&
objectType !== "audio" &&
objectType !== "image" && (
<div
className={clsx(classes.iframeBase, {
[classes.iframeHidden]: loading,
})}
>
<iframe
src={path}
title="File Preview"
allowTransparency
className={`${classes.iframeContainer} ${
isFullscreen ? "fullHeight" : objectType
}`}
onLoad={iframeLoaded}
>
File couldn't be loaded. Please try Download instead
</iframe>
</div>
)}
</div>
</Fragment>
);
};