From ef3a61a384c411de8641500b1448941ee9b8bc77 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 26 Jan 2022 15:21:28 +0800 Subject: [PATCH 1/5] fix: iframe resize --- .../src/UI/components/AssetPlayer/index.tsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx index b8a0f8163d90..df9da18d09af 100644 --- a/packages/shared/src/UI/components/AssetPlayer/index.tsx +++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx @@ -121,6 +121,28 @@ export const AssetPlayer = memo(({ url, type, options, iconPro setIframe() }, [setIframe]) + // Workaround for a bug of `iframe-resizer-react`: + // When the content of iframe loaded, `IframeResizer` triggers a `size` event, + // but the `height` and `width` value of that `size` event isn't equal to the content. + // (Sometimes it doesn't matter, if the size of iframe has been set fixed already) + // Meanwhile `IframeResizer` triggers a `resize` event when the size of + // parent of iframe changed, this time the returned `height` and `width` is right. + // So resize the parent manually. + useEffect(() => { + if (!(playerState === AssetPlayerState.NORMAL)) return + const resize = (height: string) => () => { + if (!ref.current?.parentElement) return + ref.current.parentElement.style.height = height + } + const noSenseHeight = '100px' + const timerOne = setTimeout(resize(noSenseHeight), 100) + const timerTwo = setTimeout(resize(''), 150) + return () => { + clearTimeout(timerOne) + clearTimeout(timerTwo) + } + }, [playerState, ref.current]) + const IframeResizerMemo = useMemo( () => hidden ? null : ( @@ -143,6 +165,7 @@ export const AssetPlayer = memo(({ url, type, options, iconPro checkOrigin={false} onMessage={onMessage} frameBorder="0" + resizeFrom="child" allow="autoplay" allowFullScreen /> From 095645e2215566dedcfb5e03ddf8f50538d72ca2 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 26 Jan 2022 16:25:11 +0800 Subject: [PATCH 2/5] chore: nft wall load image without asset player --- packages/mask/src/components/shared/Image.tsx | 16 ++++- .../CollectibleList/CollectibleCard.tsx | 56 +++++++++++++----- .../CollectibleList/nft_token_fallback.png | Bin 0 -> 3686 bytes .../nft_token_fallback_dark.png | Bin 0 -> 6847 bytes 4 files changed, 56 insertions(+), 16 deletions(-) create mode 100644 packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/nft_token_fallback.png create mode 100644 packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/nft_token_fallback_dark.png diff --git a/packages/mask/src/components/shared/Image.tsx b/packages/mask/src/components/shared/Image.tsx index 4521818e0382..00da7a77d999 100644 --- a/packages/mask/src/components/shared/Image.tsx +++ b/packages/mask/src/components/shared/Image.tsx @@ -35,6 +35,7 @@ export interface ImageProps { className?: string style?: React.CSSProperties onClick?: React.MouseEventHandler + onError?(event: Event): void onURL?(url: string): void } @@ -48,7 +49,18 @@ export type ImageRef = { * This React Component is used to render images in the content script to bypass the CSP restriction. */ export const Image = forwardRef(function Image(props, outgoingRef) { - const { src, loading: propsLoading, canvasProps, imgProps, style, className, SkeletonProps, onClick, onURL } = props + const { + src, + loading: propsLoading, + canvasProps, + imgProps, + style, + className, + SkeletonProps, + onClick, + onURL, + onError, + } = props // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#Maximum_canvas_size const [height, width] = [Math.min(32767, props.height || 500), Math.min(32767, props.width || 500)] const [hasCSPBan, setHasCSPBan] = useState(false) @@ -112,7 +124,7 @@ export const Image = forwardRef(function Image(props, outg return ( setHasCSPBan(true) : undefined} + onError={blobURL ? () => setHasCSPBan(true) : (event) => onError?.(event as unknown as Event)} width={width} height={height} className={className} diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx index 7386acd3af68..16c604a76954 100644 --- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx +++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx @@ -1,9 +1,9 @@ -import { Card, Link } from '@mui/material' +import { Card, Link, useTheme } from '@mui/material' import { makeStyles } from '@masknet/theme' import { Wallet, ERC721TokenDetailed, resolveCollectibleLink, NonFungibleAssetProvider } from '@masknet/web3-shared-evm' -import { MaskSharpIconOfSize } from '../../../../resources/MaskIcon' import { NFTCardStyledAssetPlayer } from '@masknet/shared' import { ActionsBarNFT } from '../ActionsBarNFT' +import { Image } from '../../../../components/shared/Image' const useStyles = makeStyles()((theme) => ({ root: { @@ -64,6 +64,12 @@ export interface CollectibleCardProps { export function CollectibleCard(props: CollectibleCardProps) { const { wallet, token, provider, readonly, renderOrder } = props const { classes } = useStyles() + const isImage = /\.(gif|svg|png|webp|jpg)$/.test(token.info.mediaUrl ?? '') + const theme = useTheme() + const fallbackImageURL = + theme.palette.mode === 'dark' + ? new URL('./nft_token_fallback_dark.png', import.meta.url) + : new URL('./nft_token_fallback.png', import.meta.url) return ( )} {token.info.mediaUrl ? ( - + isImage ? ( + { + const target = event.currentTarget as HTMLImageElement + target.src = fallbackImageURL.toString() + target.classList.add(classes.loadingFailImage ?? '') + }} + /> + ) : ( + + ) ) : ( - + )} diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/nft_token_fallback.png b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/nft_token_fallback.png new file mode 100644 index 0000000000000000000000000000000000000000..80895f895a33fa6e26c5db8dcac3afca7e822473 GIT binary patch literal 3686 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 literal 0 HcmV?d00001 From 1984d6be094187be52855e2b17599ce50a99d14a Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 26 Jan 2022 16:29:51 +0800 Subject: [PATCH 3/5] chore: cspell --- cspell.json | 1 + 1 file changed, 1 insertion(+) diff --git a/cspell.json b/cspell.json index e57c3333e581..f00cc37bc863 100644 --- a/cspell.json +++ b/cspell.json @@ -257,6 +257,7 @@ "WAVAX", "webextension", "webm", + "webp", "withdrawed", "wmatic", "wnative", From b949fb4398dcb51d75391e78010478f8a386fff8 Mon Sep 17 00:00:00 2001 From: Hancheng Zhou Date: Wed, 26 Jan 2022 19:17:58 +0800 Subject: [PATCH 4/5] Update packages/shared/src/UI/components/AssetPlayer/index.tsx Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com> --- packages/shared/src/UI/components/AssetPlayer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx index df9da18d09af..14f882f21dde 100644 --- a/packages/shared/src/UI/components/AssetPlayer/index.tsx +++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx @@ -129,7 +129,7 @@ export const AssetPlayer = memo(({ url, type, options, iconPro // parent of iframe changed, this time the returned `height` and `width` is right. // So resize the parent manually. useEffect(() => { - if (!(playerState === AssetPlayerState.NORMAL)) return + if (playerState !== AssetPlayerState.NORMAL) return const resize = (height: string) => () => { if (!ref.current?.parentElement) return ref.current.parentElement.style.height = height From 9f628bec382923d51ab3e46148ae40eee13ac01d Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 26 Jan 2022 19:31:17 +0800 Subject: [PATCH 5/5] chore: only implement for collectible nft --- .../mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx | 1 + packages/shared/src/UI/components/AssetPlayer/index.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx index df48bd8d7e25..b557f5a5e5f9 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx @@ -58,6 +58,7 @@ export function ArticleTab(props: ArticleTabProps) { playsInline: true, }} classes={classes} + isFixedIframeSize={false} /> diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx index 14f882f21dde..8ea26662f44f 100644 --- a/packages/shared/src/UI/components/AssetPlayer/index.tsx +++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx @@ -32,6 +32,7 @@ interface AssetPlayerProps renderTimeout?: number iconProps?: SvgIconProps fallbackImage?: URL + isFixedIframeSize?: boolean setERC721TokenName?: (name: string) => void setSourceType?: (type: string) => void } @@ -49,8 +50,9 @@ enum AssetPlayerState { ERROR = 3, } -export const AssetPlayer = memo(({ url, type, options, iconProps, ...props }) => { +export const AssetPlayer = memo((props) => { const ref = useRef(null) + const { url, type, options, iconProps, isFixedIframeSize = true } = props const classes = useStylesExtends(useStyles(), props) const [hidden, setHidden] = useState(Boolean(props.renderTimeout)) const { RPC: RPC_Entries } = getRPCConstants(props.erc721Token?.chainId) @@ -129,7 +131,7 @@ export const AssetPlayer = memo(({ url, type, options, iconPro // parent of iframe changed, this time the returned `height` and `width` is right. // So resize the parent manually. useEffect(() => { - if (playerState !== AssetPlayerState.NORMAL) return + if (playerState !== AssetPlayerState.NORMAL && isFixedIframeSize) return const resize = (height: string) => () => { if (!ref.current?.parentElement) return ref.current.parentElement.style.height = height