filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 21:45:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(LinkPreview): add fallback support to more edge cases

Browse Source
This commit is contained in:
Aminejv 2021-08-06 21:52:55 +01:00
parent c54d4b34cc
commit 92a4191882
1 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/core/ObjectPreview/LinkObjectPreview.js
View File

@ -1,6 +1,7 @@
import * as React from "react";
import * as Styles from "~/common/styles";
import * as SVG from "~/common/svg";
import * as Constants from "~/common/constants";
import { P3 } from "~/components/system/components/Typography";
import { css } from "@emotion/react";
@ -36,6 +37,28 @@ export default function LinkObjectPreview({ file, ratio, ...props }) {
data: { link },
} = file;
const [imgState, setImgState] = React.useState({
isLoaded: false,
show: false,
});
React.useEffect(() => {
if (!link.image) setImgState({ show: false, isLoaded: true });
const img = new Image();
img.src = link.image;
img.onload = () => {
if (img.naturalWidth < Constants.grids.object.desktop.width) {
setImgState({ isLoaded: true, show: false });
} else {
setImgState({ isLoaded: true, show: true });
}
};
img.onerror = () => {
setImgState({ isLoaded: true, show: true });
};
}, []);
const tag = (
<a
css={Styles.LINK}
@ -64,13 +87,14 @@ export default function LinkObjectPreview({ file, ratio, ...props }) {
return (
<ObjectPreviewPrimitive file={file} tag={tag} {...props}>
{link.image ? (
<img src={link.image} alt="Link preview" css={Styles.IMAGE_FILL} />
) : (
<div css={STYLES_PLACEHOLDER_CONTAINER}>
<LinkPlaceholder ratio={ratio} />
</div>
)}
{imgState.isLoaded &&
(imgState.show ? (
<img src={link.image} alt="Link preview" css={Styles.IMAGE_FILL} />
) : (
<div css={STYLES_PLACEHOLDER_CONTAINER}>
<LinkPlaceholder ratio={ratio} />
</div>
))}
</ObjectPreviewPrimitive>
);
}