From 769b8b387d0f156c5c31c91cefab762c478a50e2 Mon Sep 17 00:00:00 2001
From: zhouhanseng <z308114274@gmail.com>
Date: Wed, 23 Mar 2022 11:39:05 +0800
Subject: [PATCH 1/2] fix(mobile): no media viewer

---
 .../Collectible/SNSAdaptor/ArticleTab.tsx      | 18 ++++++++----------
 .../NFTCardStyledAssetPlayer/index.tsx         |  4 +++-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index e6386237d1dc..37e90989db62 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -1,7 +1,8 @@
 import { makeStyles } from '@masknet/theme'
 import { CollectibleTab } from './CollectibleTab'
 import { CollectibleState } from '../hooks/useCollectibleState'
-import { AssetPlayer } from '@masknet/shared'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import { hasNativeAPI } from '../../../../shared/native-rpc'
 import { useMemo } from 'react'
 
 const useStyles = makeStyles()((theme) => ({
@@ -43,6 +44,9 @@ const useStyles = makeStyles()((theme) => ({
         minWidth: 300,
         minHeight: 300,
     },
+    imgWrapper: {
+        maxWidth: 300,
+    },
 }))
 
 export interface ArticleTabProps {}
@@ -53,18 +57,12 @@ export function ArticleTab(props: ArticleTabProps) {
 
     return useMemo(() => {
         if (!asset.value) return null
-        const resourceUrl = asset.value.animation_url || asset.value.image_url
+        const resourceUrl = asset.value.image_url || asset.value.animation_url
         return (
             <CollectibleTab>
                 <div className={classes.body}>
-                    <AssetPlayer
-                        url={resourceUrl}
-                        options={{
-                            playsInline: true,
-                        }}
-                        classes={classes}
-                        isFixedIframeSize={false}
-                    />
+                    {/* Todo: Migrate `hasNativeAPI` to `@masknet/shared` to use it in <NFTCardStyledAssetPlayer /> directly.  */}
+                    <NFTCardStyledAssetPlayer url={resourceUrl} classes={classes} isNative={hasNativeAPI} />
                 </div>
             </CollectibleTab>
         )
diff --git a/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
index 7a4a6b1d65fe..2aeb6adc0757 100644
--- a/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
@@ -41,6 +41,7 @@ interface Props extends withClasses<'loadingFailImage' | 'iframe' | 'wrapper' |
     fallbackImage?: URL
     fallbackResourceLoader?: JSX.Element
     renderOrder?: number
+    isNative?: boolean
     setERC721TokenName?: (name: string) => void
     setSourceType?: (type: string) => void
 }
@@ -49,6 +50,7 @@ export function NFTCardStyledAssetPlayer(props: Props) {
         chainId = ChainId.Mainnet,
         contractAddress = '',
         tokenId = '',
+        isNative = false,
         fallbackImage,
         fallbackResourceLoader,
         url,
@@ -69,7 +71,7 @@ export function NFTCardStyledAssetPlayer(props: Props) {
             ? new URL('./nft_token_fallback_dark.png', import.meta.url)
             : new URL('./nft_token_fallback.png', import.meta.url)
 
-    return isImageToken ? (
+    return isImageToken || isNative ? (
         <div className={classes.imgWrapper}>
             <img
                 width="100%"

From ddceee9094a9333d89716eed1519134729bdf664 Mon Sep 17 00:00:00 2001
From: zhouhanseng <z308114274@gmail.com>
Date: Wed, 23 Mar 2022 14:26:22 +0800
Subject: [PATCH 2/2] chore: reply code review

---
 .../mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index 37e90989db62..de18a192d279 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -57,7 +57,9 @@ export function ArticleTab(props: ArticleTabProps) {
 
     return useMemo(() => {
         if (!asset.value) return null
-        const resourceUrl = asset.value.image_url || asset.value.animation_url
+        const resourceUrl = hasNativeAPI
+            ? asset.value.image_url || asset.value.animation_url
+            : asset.value.animation_url || asset.value.image_url
         return (
             <CollectibleTab>
                 <div className={classes.body}>