diff --git a/packages/extension-base/src/koni/api/nft/inscription/index.ts b/packages/extension-base/src/koni/api/nft/inscription/index.ts index 24043551c3b..a753e4d32c4 100644 --- a/packages/extension-base/src/koni/api/nft/inscription/index.ts +++ b/packages/extension-base/src/koni/api/nft/inscription/index.ts @@ -50,10 +50,14 @@ export class InscriptionApi extends BaseNftApi { } private parseInsUrl (id: string, type: string) { - if (type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/svg') || type.startsWith('video/') || type.startsWith('model/gltf')) { + if (type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/svg') || type.startsWith('model/gltf')) { return this.createIframePreviewUrl(id); } + if (type.startsWith('video/')) { + return `https://ordinals.com/content/${id}`; + } + if (type.startsWith('text/')) { return undefined; } diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx index 68e6dcaa25d..351c0dead1c 100644 --- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx +++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx @@ -138,7 +138,7 @@ function Component ({ className = '' }: Props): React.ReactElement { const show3DModel = SHOW_3D_MODELS_CHAIN.includes(nftItem.chain); const ordinalNftItem = nftItem.description && isValidJson(nftItem.description) && JSON.parse(nftItem.description) as OrdinalRemarkData; - const isInscription = useMemo(() => { + const isBRC20Inscription = useMemo(() => { if (ordinalNftItem && 'p' in ordinalNftItem && 'op' in ordinalNftItem && 'tick' in ordinalNftItem && 'amt' in ordinalNftItem) { return true; } @@ -162,15 +162,16 @@ function Component ({ className = '' }: Props): React.ReactElement { >
- {isInscription && nftItem.description && ( + {isBRC20Inscription && nftItem.description && ( )} - {!isInscription && ( + {!isBRC20Inscription && ( { +function Component ({ className = '', fallbackImage, handleOnClick, image, itemCount, routingParams, title }: Props): React.ReactElement { const { extendToken } = useTheme() as Theme; const [showImage, setShowImage] = useState(true); @@ -98,7 +98,7 @@ function Component ({ className = '', fallbackImage, handleOnClick, have3dViewer visibleByDefault={true} /> ); - }, [showImage, showVideo, extendToken.defaultImagePlaceholder, handleImageError, loadingPlaceholder, getCollectionImage, handleVideoError]); + }, [extendToken.defaultImagePlaceholder, getCollectionImage, handleImageError, handleVideoError, loadingPlaceholder, showImage, showVideo]); return (