From c50ee2ef3ab1f295f13220b7dcdd619678c956d7 Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Tue, 21 Dec 2021 19:58:08 +0800
Subject: [PATCH 1/9] feat: implementing asset player with media-viewer

---
 .../Collectible/SNSAdaptor/ArticleTab.tsx     | 33 ++-----------------
 packages/shared/package.json                  |  2 ++
 .../src/UI/components/AssetPlayer/index.tsx   | 12 +++++++
 packages/shared/src/UI/components/index.ts    |  1 +
 pnpm-lock.yaml                                | 26 ++++++++++++++-
 5 files changed, 43 insertions(+), 31 deletions(-)
 create mode 100644 packages/shared/src/UI/components/AssetPlayer/index.tsx

diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index a71f6e132023..29cdaba1f242 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -1,9 +1,7 @@
-import type { FC } from 'react'
-import { Link } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { Video } from '../../../components/shared/Video'
 import { CollectibleTab } from './CollectibleTab'
 import { CollectibleState } from '../hooks/useCollectibleState'
+import { AssetPlayer } from '@masknet/shared'
 
 const useStyles = makeStyles()({
     body: {
@@ -17,23 +15,6 @@ const useStyles = makeStyles()({
     },
 })
 
-interface AssetPlayerProps {
-    src?: string
-    alt: string
-}
-
-// opensea supports: JPG, PNG, GIF, SVG, MP4, WEBM, MP3, WAV, OGG, GLB, GLTF.
-const AssetPlayer: FC<AssetPlayerProps> = ({ src, alt }) => {
-    const { classes } = useStyles()
-    if (!src) return null
-    const isVideo = src.match(/\.(mp4|webm)$/i)
-    return isVideo ? (
-        <Video src={src} VideoProps={{ className: classes.player }} />
-    ) : (
-        <img className={classes.player} src={src} alt={alt} />
-    )
-}
-
 export interface ArticleTabProps {}
 
 export function ArticleTab(props: ArticleTabProps) {
@@ -41,18 +22,10 @@ export function ArticleTab(props: ArticleTabProps) {
     const { asset } = CollectibleState.useContainer()
 
     if (!asset.value) return null
-    const resourceUrl = asset.value.image_url || asset.value.animation_url
+    const resourceUrl = asset.value.animation_url || asset.value.image_url
     return (
         <CollectibleTab>
-            <div className={classes.body}>
-                {asset.value.animation_url ? (
-                    <Link href={asset.value.animation_url} target="_blank" rel="noopener noreferrer">
-                        <AssetPlayer src={resourceUrl} alt={asset.value.name} />
-                    </Link>
-                ) : (
-                    <AssetPlayer src={resourceUrl} alt={asset.value.name} />
-                )}
-            </div>
+            <div className={classes.body}>{resourceUrl ? <AssetPlayer url={resourceUrl} /> : null}</div>
         </CollectibleTab>
     )
 }
diff --git a/packages/shared/package.json b/packages/shared/package.json
index df13a10575e8..fe4a44bdfc4a 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -11,10 +11,12 @@
     "anchorme": "^2.1.2",
     "bignumber.js": "^9.0.1",
     "classnames": "^2.3.1",
+    "iframe-resizer-react": "^1.1.0",
     "lodash-es": "^4.17.21",
     "qrcode": "^1.5.0",
     "react-feather": "^2.0.9",
     "react-use": "^17.3.1",
+    "urlcat": "^2.0.4",
     "use-subscription": "^1.5.1",
     "uuid": "^8.3.2"
   }
diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx
new file mode 100644
index 000000000000..f6a858cfc84e
--- /dev/null
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -0,0 +1,12 @@
+import { memo } from 'react'
+import IframeResizer from 'iframe-resizer-react'
+import urlcat from 'urlcat'
+
+interface AssetPlayerProps {
+    url: string
+}
+const mediaViewerUrl = 'https://dimensiondev.github.io/Media-Viewer/index.html'
+
+export const AssetPlayer = memo<AssetPlayerProps>(({ url }) => {
+    return <IframeResizer log src={urlcat(mediaViewerUrl, { url })} />
+})
diff --git a/packages/shared/src/UI/components/index.ts b/packages/shared/src/UI/components/index.ts
index e4dd3323685d..7fc5db3194fc 100644
--- a/packages/shared/src/UI/components/index.ts
+++ b/packages/shared/src/UI/components/index.ts
@@ -9,3 +9,4 @@ export * from './SelectTokenChip'
 export * from './TokenAmountPanel'
 export * from './LoadingAnimation'
 export * from './MiniNetworkSelector'
+export * from './AssetPlayer'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93fdb91640ef..b9809c7cc236 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -712,10 +712,12 @@ importers:
       anchorme: ^2.1.2
       bignumber.js: ^9.0.1
       classnames: ^2.3.1
+      iframe-resizer-react: ^1.1.0
       lodash-es: ^4.17.21
       qrcode: ^1.5.0
       react-feather: ^2.0.9
       react-use: ^17.3.1
+      urlcat: ^2.0.4
       use-subscription: ^1.5.1
       uuid: ^8.3.2
     dependencies:
@@ -727,10 +729,12 @@ importers:
       anchorme: 2.1.2
       bignumber.js: 9.0.1
       classnames: 2.3.1
+      iframe-resizer-react: 1.1.0_757a802188413a36d4f24237d13b8e90
       lodash-es: 4.17.21
       qrcode: 1.5.0
       react-feather: 2.0.9_react@18.0.0-rc.0
       react-use: 17.3.1_757a802188413a36d4f24237d13b8e90
+      urlcat: 2.0.4
       use-subscription: 1.5.1_react@18.0.0-rc.0
       uuid: 8.3.2
 
@@ -24764,6 +24768,26 @@ packages:
     resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==}
     dev: true
 
+  github.com/ProjectOpenSea/wyvern-js/1634ad0e2f9961accca62edbf4ac624effa18552:
+    resolution: {tarball: https://codeload.github.com/ProjectOpenSea/wyvern-js/tar.gz/1634ad0e2f9961accca62edbf4ac624effa18552}
+    name: wyvern-js
+    version: 3.2.0
+    dependencies:
+      '@0xproject/abi-gen': 0.1.7
+      '@0xproject/assert': 0.0.11
+      '@0xproject/json-schemas': 0.7.24
+      '@0xproject/utils': 0.1.3
+      '@0xproject/web3-wrapper': 0.1.14
+      0x.js: 0.29.2
+      bn.js: 4.12.0
+      ethereumjs-abi: github.com/ProjectWyvern/ethereumjs-abi/3d2d89641a6ad5984929b6ca4b646452ec74f73d
+      ethereumjs-util: 5.2.1
+      json-loader: 0.5.7
+      jsonschema: 1.4.0
+      lodash: 4.17.21
+      web3: 0.20.7
+    dev: false
+
   github.com/ProjectOpenSea/wyvern-js/fabb7660f23f2252c141077e32193d281036299e:
     resolution: {tarball: https://codeload.github.com/ProjectOpenSea/wyvern-js/tar.gz/fabb7660f23f2252c141077e32193d281036299e}
     name: wyvern-js
@@ -24806,7 +24830,7 @@ packages:
       bignumber.js: 6.0.0
       typed-promisify: 0.4.0
       web3-provider-engine: 13.8.0
-      wyvern-js: github.com/ProjectOpenSea/wyvern-js/fabb7660f23f2252c141077e32193d281036299e
+      wyvern-js: github.com/ProjectOpenSea/wyvern-js/1634ad0e2f9961accca62edbf4ac624effa18552
     transitivePeerDependencies:
       - debug
     dev: false

From 5e1e52f69e44c94e5dfcdbf432eec7b2fe006948 Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Tue, 21 Dec 2021 23:50:18 +0800
Subject: [PATCH 2/9] fix: init iframe-resizer with sendMessage

---
 .../Collectible/SNSAdaptor/ArticleTab.tsx     |  6 ++-
 .../src/UI/components/AssetPlayer/index.tsx   | 46 ++++++++++++++++---
 packages/shared/src/constants.tsx             |  2 +
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index 29cdaba1f242..c78a80b63a98 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -25,7 +25,11 @@ export function ArticleTab(props: ArticleTabProps) {
     const resourceUrl = asset.value.animation_url || asset.value.image_url
     return (
         <CollectibleTab>
-            <div className={classes.body}>{resourceUrl ? <AssetPlayer url={resourceUrl} /> : null}</div>
+            <div className={classes.body}>
+                {resourceUrl ? (
+                    <AssetPlayer url={resourceUrl} AudioProps={{ autoPlay: true }} VideoProps={{ autoPlay: true }} />
+                ) : null}
+            </div>
         </CollectibleTab>
     )
 }
diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx
index f6a858cfc84e..616847496e10 100644
--- a/packages/shared/src/UI/components/AssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -1,12 +1,46 @@
-import { memo } from 'react'
-import IframeResizer from 'iframe-resizer-react'
-import urlcat from 'urlcat'
+import { memo, useRef, DetailedHTMLProps, AudioHTMLAttributes, VideoHTMLAttributes, useCallback } from 'react'
+import IframeResizer, { IFrameComponent, IFrameObject } from 'iframe-resizer-react'
+import { mediaViewerUrl } from '../../../constants'
+import { useUpdateEffect } from 'react-use'
 
 interface AssetPlayerProps {
     url: string
+    type?: string
+    AudioProps?: DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>
+    VideoProps?: DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
 }
-const mediaViewerUrl = 'https://dimensiondev.github.io/Media-Viewer/index.html'
 
-export const AssetPlayer = memo<AssetPlayerProps>(({ url }) => {
-    return <IframeResizer log src={urlcat(mediaViewerUrl, { url })} />
+//TODO: fallback placeholder when source can't load or gh server be drop
+export const AssetPlayer = memo<AssetPlayerProps>(({ url, type, AudioProps, VideoProps }) => {
+    const ref = useRef<IFrameComponent | null>(null)
+
+    const setIframe = useCallback(() => {
+        if (!ref.current) return
+
+        let mediaOption = {}
+        if ((type?.includes('audio') || /\.(mp3|wav|flac|aac)$/.test(url)) && AudioProps) mediaOption = AudioProps
+        else if ((type?.startsWith('video') || /\.(mp4|av1|webm)$/.test(url)) && VideoProps) mediaOption = VideoProps
+
+        ref.current.iFrameResizer.sendMessage({
+            url,
+            type,
+            ...mediaOption,
+        })
+    }, [url, type, AudioProps, VideoProps])
+
+    useUpdateEffect(() => {
+        setIframe()
+    }, [setIframe])
+
+    return (
+        <IframeResizer
+            src={mediaViewerUrl}
+            onInit={(iframe: IFrameComponent) => {
+                ref.current = iframe
+                setIframe()
+            }}
+            checkOrigin={false}
+            frameBorder="0"
+        />
+    )
 })
diff --git a/packages/shared/src/constants.tsx b/packages/shared/src/constants.tsx
index 194afdaf6285..cd50d3028e19 100644
--- a/packages/shared/src/constants.tsx
+++ b/packages/shared/src/constants.tsx
@@ -7,3 +7,5 @@ export const SOCIAL_MEDIA_ICON_MAPPING: Record<string, ReactNode> = {
     'minds.com': <MindsIcon />,
     'instagram.com': <InstagramColoredIcon />,
 }
+
+export const mediaViewerUrl = 'https://dimensiondev.github.io/Media-Viewer/index.html'

From 113439150a4d215053d739f29dfa5cc34c5c7665 Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Tue, 21 Dec 2021 23:55:10 +0800
Subject: [PATCH 3/9] chore: cspell

---
 cspell.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/cspell.json b/cspell.json
index 3b35105fa48d..24868ade17fe 100644
--- a/cspell.json
+++ b/cspell.json
@@ -346,7 +346,8 @@
         "AICANFT",
         "CANFT",
         "Kodav",
-        "koda"
+        "koda",
+        "flac"
     ],
     "ignoreRegExpList": ["/@servie/"],
     "overrides": [

From b9d63f3c4d8c0ffa9cccf3c2d65021fad6717491 Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Tue, 21 Dec 2021 23:57:17 +0800
Subject: [PATCH 4/9] chore: eslinter

---
 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 616847496e10..2efb311f5690 100644
--- a/packages/shared/src/UI/components/AssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -1,5 +1,5 @@
 import { memo, useRef, DetailedHTMLProps, AudioHTMLAttributes, VideoHTMLAttributes, useCallback } from 'react'
-import IframeResizer, { IFrameComponent, IFrameObject } from 'iframe-resizer-react'
+import IframeResizer, { IFrameComponent } from 'iframe-resizer-react'
 import { mediaViewerUrl } from '../../../constants'
 import { useUpdateEffect } from 'react-use'
 

From 4e1d09a01d9e77504691b06e3691c1e09442a220 Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Wed, 22 Dec 2021 00:57:11 +0800
Subject: [PATCH 5/9] fix: autoplay and allow full screen when source be video

---
 .../Collectible/SNSAdaptor/ArticleTab.tsx     |  9 +++++++-
 .../src/UI/components/AssetPlayer/index.tsx   | 22 ++++++++++---------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index c78a80b63a98..a08bc5d12252 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -27,7 +27,14 @@ export function ArticleTab(props: ArticleTabProps) {
         <CollectibleTab>
             <div className={classes.body}>
                 {resourceUrl ? (
-                    <AssetPlayer url={resourceUrl} AudioProps={{ autoPlay: true }} VideoProps={{ autoPlay: true }} />
+                    <AssetPlayer
+                        url={resourceUrl}
+                        options={{
+                            autoPlay: true,
+                            loop: true,
+                            playsInline: true,
+                        }}
+                    />
                 ) : null}
             </div>
         </CollectibleTab>
diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx
index 2efb311f5690..fe217da89d83 100644
--- a/packages/shared/src/UI/components/AssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -1,4 +1,4 @@
-import { memo, useRef, DetailedHTMLProps, AudioHTMLAttributes, VideoHTMLAttributes, useCallback } from 'react'
+import { memo, useRef, useCallback } from 'react'
 import IframeResizer, { IFrameComponent } from 'iframe-resizer-react'
 import { mediaViewerUrl } from '../../../constants'
 import { useUpdateEffect } from 'react-use'
@@ -6,27 +6,27 @@ import { useUpdateEffect } from 'react-use'
 interface AssetPlayerProps {
     url: string
     type?: string
-    AudioProps?: DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>
-    VideoProps?: DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
+    options: {
+        autoPlay?: boolean
+        controls?: boolean
+        playsInline?: boolean
+        loop?: boolean
+    }
 }
 
 //TODO: fallback placeholder when source can't load or gh server be drop
-export const AssetPlayer = memo<AssetPlayerProps>(({ url, type, AudioProps, VideoProps }) => {
+export const AssetPlayer = memo<AssetPlayerProps>(({ url, type, options }) => {
     const ref = useRef<IFrameComponent | null>(null)
 
     const setIframe = useCallback(() => {
         if (!ref.current) return
 
-        let mediaOption = {}
-        if ((type?.includes('audio') || /\.(mp3|wav|flac|aac)$/.test(url)) && AudioProps) mediaOption = AudioProps
-        else if ((type?.startsWith('video') || /\.(mp4|av1|webm)$/.test(url)) && VideoProps) mediaOption = VideoProps
-
         ref.current.iFrameResizer.sendMessage({
             url,
             type,
-            ...mediaOption,
+            ...options,
         })
-    }, [url, type, AudioProps, VideoProps])
+    }, [url, type, options])
 
     useUpdateEffect(() => {
         setIframe()
@@ -41,6 +41,8 @@ export const AssetPlayer = memo<AssetPlayerProps>(({ url, type, AudioProps, Vide
             }}
             checkOrigin={false}
             frameBorder="0"
+            allow="autoplay"
+            allowFullScreen
         />
     )
 })

From c0bfcb097fec8c4baceee151fe7c6c4cd10d8dd4 Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Wed, 22 Dec 2021 17:23:45 +0800
Subject: [PATCH 6/9] chore: clean userless default option

---
 packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index a08bc5d12252..cec5162ddf8f 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -30,8 +30,6 @@ export function ArticleTab(props: ArticleTabProps) {
                     <AssetPlayer
                         url={resourceUrl}
                         options={{
-                            autoPlay: true,
-                            loop: true,
                             playsInline: true,
                         }}
                     />

From 097da157ee7da4e603be7dd9a04aee2ac2d5705d Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Thu, 23 Dec 2021 15:46:38 +0800
Subject: [PATCH 7/9] chore: add muted option

---
 packages/shared/src/UI/components/AssetPlayer/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx
index fe217da89d83..0a460dc0a623 100644
--- a/packages/shared/src/UI/components/AssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -11,6 +11,7 @@ interface AssetPlayerProps {
         controls?: boolean
         playsInline?: boolean
         loop?: boolean
+        muted?: boolean
     }
 }
 

From b6d9bcffde2aa5ad67053ea202a20ca8aedd62dc Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Wed, 29 Dec 2021 12:33:01 +0800
Subject: [PATCH 8/9] feat: add fallback and load placeholder

---
 packages/icons/brands/MaskGrey.tsx            |  13 +-
 packages/icons/general/AssetLoading.tsx       |  16 +++
 packages/icons/general/index.ts               |   1 +
 .../Collectible/SNSAdaptor/ArticleTab.tsx     |  45 +++---
 .../src/UI/components/AssetPlayer/index.tsx   | 130 ++++++++++++++----
 5 files changed, 163 insertions(+), 42 deletions(-)
 create mode 100644 packages/icons/general/AssetLoading.tsx

diff --git a/packages/icons/brands/MaskGrey.tsx b/packages/icons/brands/MaskGrey.tsx
index a87c3fe85961..7ab13dd429ab 100644
--- a/packages/icons/brands/MaskGrey.tsx
+++ b/packages/icons/brands/MaskGrey.tsx
@@ -1,7 +1,7 @@
-import { createIcon } from '../utils'
+import { createPaletteAwareIcon } from '../utils'
 import type { SvgIcon } from '@mui/material'
 
-export const MaskGreyIcon: typeof SvgIcon = createIcon(
+export const MaskGreyIcon: typeof SvgIcon = createPaletteAwareIcon(
     'Mask',
     <g>
         <path fill="#8796AF" d="M60 120A60 60 0 1060 0a60 60 0 000 120z" />
@@ -12,6 +12,15 @@ export const MaskGreyIcon: typeof SvgIcon = createIcon(
             clipRule="evenodd"
         />
     </g>,
+    <g>
+        <path d="M18 36c9.941 0 18-8.059 18-18S27.941 0 18 0 0 8.059 0 18s8.059 18 18 18Z" fill="#2F3336" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M28.864 13.575v5.978H9.86c.83 3.627 4.123 6.336 8.058 6.336a8.273 8.273 0 0 0 7.415-4.543h3.531v5.021c0 1.189-.979 2.152-2.186 2.152H9.186C7.98 28.52 7 27.556 7 26.367V13.575h21.864Zm-5.628 7.771a6.46 6.46 0 0 1-5.318 2.764 6.46 6.46 0 0 1-5.317-2.764h10.635Zm-9.98-6.336c-1.714 0-3.131 1.247-3.367 2.87h1.864c.205-.625.8-1.077 1.503-1.077.702 0 1.298.452 1.503 1.076h1.863c-.235-1.622-1.653-2.869-3.366-2.869Zm9.353 0c-1.714 0-3.131 1.247-3.367 2.87h1.864c.205-.625.8-1.077 1.503-1.077.702 0 1.298.452 1.503 1.076h1.863c-.235-1.622-1.653-2.869-3.366-2.869ZM26.678 7c1.207 0 2.186.963 2.186 2.152v2.63H7v-2.63C7 7.963 7.979 7 9.186 7h17.492Z"
+            fill="#15171A"
+        />
+    </g>,
     '0 0 120 120',
     [130, 40],
 )
diff --git a/packages/icons/general/AssetLoading.tsx b/packages/icons/general/AssetLoading.tsx
new file mode 100644
index 000000000000..e8eb7f46b9f6
--- /dev/null
+++ b/packages/icons/general/AssetLoading.tsx
@@ -0,0 +1,16 @@
+import { createIcon } from '../utils'
+
+export const AssetLoadingIcon = createIcon(
+    'AssetLoadingIcon',
+    <g fill="none">
+        <path d="M18 36c9.941 0 18-8.059 18-18S27.941 0 18 0 0 8.059 0 18s8.059 18 18 18Z" fill="#1C68F3" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M28.864 13.575v5.978H9.86c.83 3.627 4.123 6.336 8.058 6.336a8.273 8.273 0 0 0 7.415-4.543h3.531v5.021c0 1.189-.979 2.152-2.186 2.152H9.186C7.98 28.52 7 27.556 7 26.367V13.575h21.864Zm-5.628 7.771a6.46 6.46 0 0 1-5.318 2.764 6.46 6.46 0 0 1-5.317-2.764h10.635Zm-9.98-6.336c-1.714 0-3.131 1.247-3.367 2.87h1.864c.205-.625.8-1.077 1.503-1.077.702 0 1.298.452 1.503 1.076h1.863c-.235-1.622-1.653-2.869-3.366-2.869Zm9.353 0c-1.714 0-3.131 1.247-3.367 2.87h1.864c.205-.625.8-1.077 1.503-1.077.702 0 1.298.452 1.503 1.076h1.863c-.235-1.622-1.653-2.869-3.366-2.869ZM26.678 7c1.207 0 2.186.963 2.186 2.152v2.63H7v-2.63C7 7.963 7.979 7 9.186 7h17.492Z"
+            fill="#fff"
+        />
+        <ellipse cx="18" cy="48" rx="11.5" ry="4" fill="#003EAE" />
+    </g>,
+    '0 0 36 52',
+)
diff --git a/packages/icons/general/index.ts b/packages/icons/general/index.ts
index acc65abe0d1a..a4f47b110fe6 100644
--- a/packages/icons/general/index.ts
+++ b/packages/icons/general/index.ts
@@ -81,3 +81,4 @@ export * from './Retweet'
 export * from './Drop'
 export * from './Right'
 export * from './Tutorial'
+export * from './AssetLoading'
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index cec5162ddf8f..cfdd18de763f 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -2,6 +2,7 @@ import { makeStyles } from '@masknet/theme'
 import { CollectibleTab } from './CollectibleTab'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { AssetPlayer } from '@masknet/shared'
+import { useMemo } from 'react'
 
 const useStyles = makeStyles()({
     body: {
@@ -13,6 +14,12 @@ const useStyles = makeStyles()({
         maxHeight: '100%',
         border: 'none',
     },
+    errorPlaceholder: {
+        padding: '82px 0',
+    },
+    loadingPlaceholder: {
+        padding: '74px 0',
+    },
 })
 
 export interface ArticleTabProps {}
@@ -21,20 +28,26 @@ export function ArticleTab(props: ArticleTabProps) {
     const { classes } = useStyles()
     const { asset } = CollectibleState.useContainer()
 
-    if (!asset.value) return null
-    const resourceUrl = asset.value.animation_url || asset.value.image_url
-    return (
-        <CollectibleTab>
-            <div className={classes.body}>
-                {resourceUrl ? (
-                    <AssetPlayer
-                        url={resourceUrl}
-                        options={{
-                            playsInline: true,
-                        }}
-                    />
-                ) : null}
-            </div>
-        </CollectibleTab>
-    )
+    return useMemo(() => {
+        if (!asset.value) return null
+        const resourceUrl = asset.value.animation_url || asset.value.image_url
+        return (
+            <CollectibleTab>
+                <div className={classes.body}>
+                    {resourceUrl ? (
+                        <AssetPlayer
+                            url={resourceUrl}
+                            options={{
+                                playsInline: true,
+                            }}
+                            classes={{
+                                errorPlaceholder: classes.errorPlaceholder,
+                                loadingPlaceholder: classes.loadingPlaceholder,
+                            }}
+                        />
+                    ) : null}
+                </div>
+            </CollectibleTab>
+        )
+    }, [asset.value?.animation_url, asset.value?.image_url, classes])
 }
diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx
index 0a460dc0a623..6e820f032493 100644
--- a/packages/shared/src/UI/components/AssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -1,49 +1,131 @@
-import { memo, useRef, useCallback } from 'react'
+import { memo, useRef, useCallback, useState } from 'react'
 import IframeResizer, { IFrameComponent } from 'iframe-resizer-react'
 import { mediaViewerUrl } from '../../../constants'
-import { useUpdateEffect } from 'react-use'
+import { useTimeoutFn, useUpdateEffect } from 'react-use'
+import { makeStyles, useStylesExtends } from '@masknet/theme'
+import { Box, SvgIconProps } from '@mui/material'
+import { AssetLoadingIcon, MaskGreyIcon } from '@masknet/icons'
 
-interface AssetPlayerProps {
+interface AssetPlayerProps
+    extends withClasses<'errorPlaceholder' | 'errorIcon' | 'loadingPlaceholder' | 'loadingIcon'> {
     url: string
     type?: string
-    options: {
+    options?: {
         autoPlay?: boolean
         controls?: boolean
         playsInline?: boolean
         loop?: boolean
         muted?: boolean
     }
+    iconProps?: SvgIconProps
 }
+const useStyles = makeStyles()((theme) => ({
+    errorPlaceholder: {
+        backgroundColor: theme.palette.background.default,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 12,
+        width: '100%',
+    },
+    errorIcon: {
+        width: 36,
+        height: 36,
+    },
+    loadingPlaceholder: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+    },
+    loadingIcon: {
+        width: 36,
+        height: 52,
+    },
+}))
 
-//TODO: fallback placeholder when source can't load or gh server be drop
-export const AssetPlayer = memo<AssetPlayerProps>(({ url, type, options }) => {
+enum AssetPlayerState {
+    LOADING = 0,
+    INIT = 1,
+    NORMAL = 2,
+    ERROR = 3,
+}
+
+const TIMEOUT = 10000
+
+export const AssetPlayer = memo<AssetPlayerProps>(({ url, type, options, iconProps, ...props }) => {
     const ref = useRef<IFrameComponent | null>(null)
+    const classes = useStylesExtends(useStyles(), props)
+    const [playerState, setPlayerState] = useState(AssetPlayerState.LOADING)
+
+    //#region If onResized is not triggered within the specified time, set player state to error
+    const [, cancel, reset] = useTimeoutFn(() => {
+        if (playerState !== AssetPlayerState.NORMAL) {
+            setPlayerState(AssetPlayerState.ERROR)
+        }
+    }, TIMEOUT)
+    //#endregion
 
+    //#region setup iframe when url and options be changed
     const setIframe = useCallback(() => {
-        if (!ref.current) return
+        // if iframe isn't be init or the load error has been existed
+        if (!ref.current || playerState === AssetPlayerState.ERROR) return
+        else if (playerState === AssetPlayerState.INIT || playerState === AssetPlayerState.NORMAL) {
+            reset()
+            ref.current.iFrameResizer.sendMessage({
+                url,
+                type,
+                ...options,
+            })
+        }
+    }, [url, type, options, playerState])
+    //endregion
 
-        ref.current.iFrameResizer.sendMessage({
-            url,
-            type,
-            ...options,
-        })
-    }, [url, type, options])
+    //#region resource loaded error
+    const onMessage = useCallback(({ message }: { message: any }) => {
+        if (message?.name === 'Error') {
+            setPlayerState(AssetPlayerState.ERROR)
+        }
+    }, [])
+    //#endregion
 
     useUpdateEffect(() => {
         setIframe()
     }, [setIframe])
 
     return (
-        <IframeResizer
-            src={mediaViewerUrl}
-            onInit={(iframe: IFrameComponent) => {
-                ref.current = iframe
-                setIframe()
-            }}
-            checkOrigin={false}
-            frameBorder="0"
-            allow="autoplay"
-            allowFullScreen
-        />
+        <>
+            <Box
+                className={
+                    playerState === AssetPlayerState.ERROR ? classes.errorPlaceholder : classes.loadingPlaceholder
+                }
+                style={{ display: playerState === AssetPlayerState.NORMAL ? 'none' : undefined }}>
+                {playerState === AssetPlayerState.ERROR ? (
+                    <MaskGreyIcon className={classes.errorIcon} viewBox="0 0 36 36" {...iconProps} />
+                ) : (
+                    <AssetLoadingIcon className={classes.loadingIcon} />
+                )}
+            </Box>
+            <IframeResizer
+                src={mediaViewerUrl}
+                onInit={(iframe: IFrameComponent) => {
+                    ref.current = iframe
+                    setPlayerState(AssetPlayerState.INIT)
+                    setIframe()
+                }}
+                onResized={({ type }) => {
+                    if (type !== 'init') {
+                        cancel()
+                        setPlayerState(AssetPlayerState.NORMAL)
+                    }
+                }}
+                style={{ width: playerState !== AssetPlayerState.NORMAL ? 0 : undefined }}
+                checkOrigin={false}
+                onMessage={onMessage}
+                frameBorder="0"
+                allow="autoplay"
+                allowFullScreen
+            />
+        </>
     )
 })

From d6c3f763fb434753623a65ed76bbec1d2361c670 Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Wed, 29 Dec 2021 15:47:13 +0800
Subject: [PATCH 9/9] fix: set url be optional

---
 .../Collectible/SNSAdaptor/ArticleTab.tsx     | 22 +++++++++----------
 .../src/UI/components/AssetPlayer/index.tsx   | 13 +++++++----
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index cfdd18de763f..5821a424dd76 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -34,18 +34,16 @@ export function ArticleTab(props: ArticleTabProps) {
         return (
             <CollectibleTab>
                 <div className={classes.body}>
-                    {resourceUrl ? (
-                        <AssetPlayer
-                            url={resourceUrl}
-                            options={{
-                                playsInline: true,
-                            }}
-                            classes={{
-                                errorPlaceholder: classes.errorPlaceholder,
-                                loadingPlaceholder: classes.loadingPlaceholder,
-                            }}
-                        />
-                    ) : null}
+                    <AssetPlayer
+                        url={resourceUrl}
+                        options={{
+                            playsInline: true,
+                        }}
+                        classes={{
+                            errorPlaceholder: classes.errorPlaceholder,
+                            loadingPlaceholder: classes.loadingPlaceholder,
+                        }}
+                    />
                 </div>
             </CollectibleTab>
         )
diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx
index 6e820f032493..fd14b8718891 100644
--- a/packages/shared/src/UI/components/AssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -8,7 +8,7 @@ import { AssetLoadingIcon, MaskGreyIcon } from '@masknet/icons'
 
 interface AssetPlayerProps
     extends withClasses<'errorPlaceholder' | 'errorIcon' | 'loadingPlaceholder' | 'loadingIcon'> {
-    url: string
+    url?: string
     type?: string
     options?: {
         autoPlay?: boolean
@@ -56,7 +56,7 @@ const TIMEOUT = 10000
 export const AssetPlayer = memo<AssetPlayerProps>(({ url, type, options, iconProps, ...props }) => {
     const ref = useRef<IFrameComponent | null>(null)
     const classes = useStylesExtends(useStyles(), props)
-    const [playerState, setPlayerState] = useState(AssetPlayerState.LOADING)
+    const [playerState, setPlayerState] = useState(url ? AssetPlayerState.LOADING : AssetPlayerState.ERROR)
 
     //#region If onResized is not triggered within the specified time, set player state to error
     const [, cancel, reset] = useTimeoutFn(() => {
@@ -70,19 +70,24 @@ export const AssetPlayer = memo<AssetPlayerProps>(({ url, type, options, iconPro
     const setIframe = useCallback(() => {
         // if iframe isn't be init or the load error has been existed
         if (!ref.current || playerState === AssetPlayerState.ERROR) return
-        else if (playerState === AssetPlayerState.INIT || playerState === AssetPlayerState.NORMAL) {
+        if (!url) {
+            setPlayerState(AssetPlayerState.ERROR)
+            return
+        }
+        if (playerState === AssetPlayerState.INIT || playerState === AssetPlayerState.NORMAL) {
             reset()
             ref.current.iFrameResizer.sendMessage({
                 url,
                 type,
                 ...options,
             })
+            return
         }
     }, [url, type, options, playerState])
     //endregion
 
     //#region resource loaded error
-    const onMessage = useCallback(({ message }: { message: any }) => {
+    const onMessage = useCallback(({ message }: { message: { name: string } }) => {
         if (message?.name === 'Error') {
             setPlayerState(AssetPlayerState.ERROR)
         }