feat: Adds support for embedded animation_urls (#5492)

* feat: adds support for embedded animation_urls

* chore: refactored styles and MediaType types

* chore: re-use image styles for embeds

src/nft/components/details/AssetDetails.css.ts

@@ -23,6 +23,26 @@ export const image = style([
   },
 ])
 
+export const embedContainer = style({
+  position: 'relative',
+  overflow: 'hidden',
+  width: '100%',
+  paddingTop: '100%',
+})
+
+export const embed = style([
+  image,
+  {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    width: '100%',
+    height: '100%',
+  },
+])
+
 export const container = style([
   center,
   {

src/nft/components/details/AssetDetails.tsx

@@ -191,35 +191,53 @@ const initialFilterState = {
   [ActivityEventType.CancelListing]: false,
 }
 
+enum MediaType {
+  Audio = 'audio',
+  Video = 'video',
+  Image = 'image',
+  Embed = 'embed',
+}
+
 const AssetView = ({
   mediaType,
   asset,
   dominantColor,
 }: {
-  mediaType: 'image' | 'video' | 'audio'
+  mediaType: MediaType
   asset: GenieAsset
   dominantColor: [number, number, number]
 }) => {
   const style = { ['--shadow' as string]: `rgba(${dominantColor.join(', ')}, 0.5)` }
 
   switch (mediaType) {
-    case 'video':
+    case MediaType.Video:
       return <video src={asset.animationUrl} className={styles.image} autoPlay controls muted loop style={style} />
-    case 'image':
+    case MediaType.Image:
       return (
         <img className={styles.image} src={asset.imageUrl} alt={asset.name || asset.collectionName} style={style} />
       )
-    case 'audio':
+    case MediaType.Audio:
       return <AudioPlayer {...asset} dominantColor={dominantColor} />
+    case MediaType.Embed:
+      return (
+        <div className={styles.embedContainer}>
+          <iframe
+            title={asset.name ?? `${asset.collectionName} #${asset.tokenId}`}
+            src={asset.animationUrl}
+            className={styles.embed}
+            style={style}
+            frameBorder={0}
+            height="100%"
+            width="100%"
+            sandbox="allow-scripts"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          />
+        </div>
+      )
   }
 }
 
-enum MediaType {
-  Audio = 'audio',
-  Video = 'video',
-  Image = 'image',
-}
-
 interface AssetDetailsProps {
   asset: GenieAsset
   collection: CollectionInfoForAsset
@@ -245,6 +263,8 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
       return MediaType.Audio
     } else if (isVideo(asset.animationUrl ?? '')) {
       return MediaType.Video
+    } else if (asset.animationUrl !== undefined) {
+      return MediaType.Embed
     }
     return MediaType.Image
   }, [asset])