Merge pull request #234 from alephium/support-mp4

Support MP4 for NFT
alephium · Jan 26, 2025 · c7ac302 · c7ac302
2 parents dd2cd63 + ff75917
commit c7ac302
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 26 deletions.
diff --git a/packages/extension/src/ui/features/accountNfts/CollectionNfts.tsx b/packages/extension/src/ui/features/accountNfts/CollectionNfts.tsx
@@ -12,6 +12,7 @@ import { Nft } from "./NFT"
 import { NftFigure } from "./NftFigure"
 import { useNFTCollection } from "./useNFTCollections"
 import { useTranslation } from "react-i18next"
+import { isMp4Url } from "./alephium-nft.service"
 
 export const CollectionNfts: FC = () => {
   const { t } = useTranslation()
@@ -48,12 +49,28 @@ export const CollectionNfts: FC = () => {
       }
       scrollContent={
         <>
-          <Image
-            w="28px"
-            h="28px"
-            src={collection?.metadata.image}
-            borderRadius="lg"
-          />
+          {collection?.metadata.image && isMp4Url(collection.metadata.image) ? (
+            <video
+              style={{
+                width: '28px',
+                height: '28px',
+                borderRadius: '8px',
+                objectFit: 'cover'
+              }}
+              src={collection.metadata.image}
+              muted
+              playsInline
+              loop
+              autoPlay = {false}
+            />
+          ) : (
+            <Image
+              w="28px"
+              h="28px"
+              src={collection?.metadata.image}
+              borderRadius="lg"
+            />
+          )}
           <H6>{collection?.metadata.name}</H6>
         </>
       }

diff --git a/packages/extension/src/ui/features/accountNfts/NftThumbnailImage.tsx b/packages/extension/src/ui/features/accountNfts/NftThumbnailImage.tsx
@@ -1,29 +1,58 @@
 import { Flex, Image, Spinner } from "@chakra-ui/react"
-import { FC, ImgHTMLAttributes } from "react"
+import { FC, ImgHTMLAttributes, useRef } from "react"
 
 import { NftFallback } from "./NftFallback"
+import { isMp4Url } from "./alephium-nft.service"
 
 type NftThumbnailImage = ImgHTMLAttributes<HTMLImageElement>
 
-/** Transparently displays an image or palceholder fallback set to square aspect ratio */
-
 export const NftThumbnailImage: FC<NftThumbnailImage> = ({ src, ...rest }) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
   if (!src) {
     return <NftFallback />
   }
-  return (
-    <Image
-      src={src}
-      {...rest}
-      w="142px"
-      h="142px"
-      borderRadius="lg"
-      position="relative"
-      fallback={
-        <Flex w="142px" h="142px" justifyContent="center" alignItems="center">
-          <Spinner />
-        </Flex>
-      }
-    />
-  )
+
+  if (isMp4Url(src)) {
+    return (
+      <video
+        ref={videoRef}
+        src={src}
+        style={{
+          width: '142px',
+          height: '142px',
+          borderRadius: '8px',
+          position: 'relative',
+          objectFit: 'cover',
+          cursor: 'pointer'
+        }}
+        onMouseEnter={() => videoRef.current?.play()}
+        onMouseLeave={() => {
+          if (videoRef.current) {
+            videoRef.current.pause()
+            videoRef.current.currentTime = 0
+          }
+        }}
+        loop
+        muted
+        playsInline
+      />
+    )
+  } else {
+    return (
+      <Image
+        src={src}
+        {...rest}
+        w="142px"
+        h="142px"
+        borderRadius="lg"
+        position="relative"
+        objectFit="cover"
+        fallback={
+          <Flex w="142px" h="142px" justifyContent="center" alignItems="center">
+            <Spinner />
+          </Flex>
+        }
+      />
+    )
+  }
 }
diff --git a/packages/extension/src/ui/features/accountNfts/SendNftScreen.tsx b/packages/extension/src/ui/features/accountNfts/SendNftScreen.tsx
@@ -50,6 +50,7 @@ import { Destination, DUST_AMOUNT } from "@alephium/web3"
 import { sendTransferTransaction } from "../../services/transactions"
 import { useNFT } from "./useNfts"
 import { useTranslation } from "react-i18next"
+import { isMp4Url } from "./alephium-nft.service"
 
 export const NftImageContainer = styled.div`
   width: 96px;
@@ -227,7 +228,21 @@ export const SendNftScreen: FC = () => {
                 nft.metadata.image ? (
                   <RowCentered>
                     <NftImageContainer>
-                      <img src={nft.metadata.image} alt={nft.metadata.name} />
+                      {isMp4Url(nft.metadata.image) ? (
+                        <video
+                          src={nft.metadata.image}
+                          style={{
+                            borderRadius: '8px',
+                            objectFit: 'cover'
+                          }}
+                          loop
+                          muted
+                          playsInline
+                          autoPlay = {false}
+                        />
+                      ) : (
+                        <img src={nft.metadata.image} alt={nft.metadata.name} />
+                      )}
                     </NftImageContainer>
                   </RowCentered>
                 ) : null

diff --git a/packages/extension/src/ui/features/accountNfts/alephium-nft.service.ts b/packages/extension/src/ui/features/accountNfts/alephium-nft.service.ts
@@ -100,4 +100,8 @@ async function getNftMetadataz(nftIds: string[], explorerProvider: ExplorerProvi
   }
 
   return cachedNftMetadataz.concat(newNftMetadataz)
-}
+}
+
+export const isMp4Url = (url: string) => {
+  return url.toLowerCase().endsWith('.mp4')
+}