From e19eea4fb217d949351425e99c4370ed83b7ba98 Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Tue, 12 Dec 2023 11:49:49 -0600
Subject: [PATCH] feat: html video and audio inscription types, closes #4077
 and #3556

---
 scripts/generate-manifest.js                  | 11 ++++--
 .../_collectible-types/collectible-audio.tsx  | 19 ++++++++++
 .../_collectible-types/collectible-iframe.tsx | 35 +++++++++++++++++
 .../_collectible-types/collectible-image.tsx  |  4 +-
 .../collectible-placeholder.layout.tsx        | 19 ++++++++++
 .../components/bitcoin/inscription.tsx        | 38 +++++++++++++++----
 .../components/collectible-hover.tsx          | 15 ++++++--
 .../components/collectible-item.layout.tsx    |  2 +-
 .../components/image-unavailable.tsx          | 23 +++++------
 .../bitcoin/ordinals/inscription.hooks.ts     | 29 +++++++++++++-
 src/app/ui/components/icons/audio-icon.tsx    | 23 +++++++++++
 src/app/ui/components/iframe.tsx              | 34 +++++++++++++++++
 src/shared/models/inscription.model.ts        | 37 +++++++++++++++++-
 13 files changed, 254 insertions(+), 35 deletions(-)
 create mode 100644 src/app/features/collectibles/components/_collectible-types/collectible-audio.tsx
 create mode 100644 src/app/features/collectibles/components/_collectible-types/collectible-iframe.tsx
 create mode 100644 src/app/features/collectibles/components/_collectible-types/collectible-placeholder.layout.tsx
 create mode 100644 src/app/ui/components/icons/audio-icon.tsx
 create mode 100644 src/app/ui/components/iframe.tsx

diff --git a/scripts/generate-manifest.js b/scripts/generate-manifest.js
index 877d5ef8b6c..498eac28e6a 100644
--- a/scripts/generate-manifest.js
+++ b/scripts/generate-manifest.js
@@ -30,10 +30,15 @@ const environmentIcons = {
   },
 };
 
+const devCsp =
+  "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; frame-src https://ordinals.com/; frame-ancestors 'none';";
+
+const prodCsp = `default-src 'none'; connect-src *; style-src 'unsafe-inline'; img-src 'self' data: https:; script-src 'self' 'wasm-unsafe-eval'; object-src 'none'; frame-src https://ordinals.com/; frame-ancestors 'none';`;
+
 const contentSecurityPolicyEnvironment = {
-  development:
-    "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; frame-src 'none'; frame-ancestors 'none';",
-  production: `default-src 'none'; connect-src *; style-src 'unsafe-inline'; img-src 'self' data: https:; script-src 'self' 'wasm-unsafe-eval'; object-src 'none'; frame-src 'none'; frame-ancestors 'none';`,
+  testing: prodCsp,
+  development: devCsp,
+  production: prodCsp,
 };
 
 const defaultIconEnvironment = {
diff --git a/src/app/features/collectibles/components/_collectible-types/collectible-audio.tsx b/src/app/features/collectibles/components/_collectible-types/collectible-audio.tsx
new file mode 100644
index 00000000000..3688d5b3037
--- /dev/null
+++ b/src/app/features/collectibles/components/_collectible-types/collectible-audio.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import { AudioIcon } from '@app/ui/components/icons/audio-icon';
+
+import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
+import { CollectiblePlaceholderLayout } from './collectible-placeholder.layout';
+
+interface CollectibleAudioProps extends Omit<CollectibleItemLayoutProps, 'children'> {
+  icon: ReactNode;
+}
+export function CollectibleAudio({ icon, ...props }: CollectibleAudioProps) {
+  return (
+    <CollectibleItemLayout collectibleTypeIcon={icon} {...props}>
+      <CollectiblePlaceholderLayout>
+        <AudioIcon size="xl" />
+      </CollectiblePlaceholderLayout>
+    </CollectibleItemLayout>
+  );
+}
diff --git a/src/app/features/collectibles/components/_collectible-types/collectible-iframe.tsx b/src/app/features/collectibles/components/_collectible-types/collectible-iframe.tsx
new file mode 100644
index 00000000000..4b413b68dda
--- /dev/null
+++ b/src/app/features/collectibles/components/_collectible-types/collectible-iframe.tsx
@@ -0,0 +1,35 @@
+import { ReactNode, useState } from 'react';
+
+import { Iframe } from '@app/ui/components/iframe';
+
+import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
+import { ImageUnavailable } from '../image-unavailable';
+
+interface CollectibleIframeProps extends Omit<CollectibleItemLayoutProps, 'children'> {
+  icon: ReactNode;
+  src: string;
+}
+export function CollectibleIframe({ icon, src, ...props }: CollectibleIframeProps) {
+  const [isError, setIsError] = useState(false);
+
+  if (isError)
+    return (
+      <CollectibleItemLayout collectibleTypeIcon={icon} {...props}>
+        <ImageUnavailable />
+      </CollectibleItemLayout>
+    );
+
+  return (
+    <CollectibleItemLayout collectibleTypeIcon={icon} {...props}>
+      <Iframe
+        aspectRatio="1 / 1"
+        height="100%"
+        objectFit="cover"
+        onError={() => setIsError(true)}
+        src={src}
+        width="100%"
+        zIndex={99}
+      />
+    </CollectibleItemLayout>
+  );
+}
diff --git a/src/app/features/collectibles/components/_collectible-types/collectible-image.tsx b/src/app/features/collectibles/components/_collectible-types/collectible-image.tsx
index d7cf6503ab2..4033ff021a3 100644
--- a/src/app/features/collectibles/components/_collectible-types/collectible-image.tsx
+++ b/src/app/features/collectibles/components/_collectible-types/collectible-image.tsx
@@ -1,11 +1,11 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
 import { ImageUnavailable } from '../image-unavailable';
 
 interface CollectibleImageProps extends Omit<CollectibleItemLayoutProps, 'children'> {
   alt?: string;
-  icon: React.JSX.Element;
+  icon: ReactNode;
   src: string;
 }
 export function CollectibleImage(props: CollectibleImageProps) {
diff --git a/src/app/features/collectibles/components/_collectible-types/collectible-placeholder.layout.tsx b/src/app/features/collectibles/components/_collectible-types/collectible-placeholder.layout.tsx
new file mode 100644
index 00000000000..6961363e795
--- /dev/null
+++ b/src/app/features/collectibles/components/_collectible-types/collectible-placeholder.layout.tsx
@@ -0,0 +1,19 @@
+import { Flex } from 'leather-styles/jsx';
+
+import { HasChildren } from '@app/common/has-children';
+
+export function CollectiblePlaceholderLayout({ children }: HasChildren) {
+  return (
+    <Flex
+      alignItems="center"
+      bg="accent.component-background-default"
+      flexDirection="column"
+      height="100%"
+      justifyContent="center"
+      textAlign="center"
+      width="100%"
+    >
+      {children}
+    </Flex>
+  );
+}
diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/src/app/features/collectibles/components/bitcoin/inscription.tsx
index 64d7259da73..af9c470ca7c 100644
--- a/src/app/features/collectibles/components/bitcoin/inscription.tsx
+++ b/src/app/features/collectibles/components/bitcoin/inscription.tsx
@@ -7,6 +7,8 @@ import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { convertInscriptionToSupportedInscriptionType } from '@app/query/bitcoin/ordinals/inscription.hooks';
 import { OrdinalIcon } from '@app/ui/components/icons/ordinal-icon';
 
+import { CollectibleAudio } from '../_collectible-types/collectible-audio';
+import { CollectibleIframe } from '../_collectible-types/collectible-iframe';
 import { CollectibleImage } from '../_collectible-types/collectible-image';
 import { CollectibleOther } from '../_collectible-types/collectible-other';
 import { InscriptionText } from './inscription-text';
@@ -26,7 +28,31 @@ export function Inscription({ rawInscription }: InscriptionProps) {
   }
 
   switch (inscription.type) {
-    case 'image': {
+    case 'audio':
+      return (
+        <CollectibleAudio
+          icon={<OrdinalIcon size="lg" />}
+          key={inscription.title}
+          onClickCallToAction={() => openInNewTab(inscription.infoUrl)}
+          onClickSend={() => openSendInscriptionModal()}
+          subtitle="Ordinal inscription"
+          title={`# ${inscription.number}`}
+        />
+      );
+    case 'html':
+    case 'video':
+      return (
+        <CollectibleIframe
+          icon={<OrdinalIcon size="lg" />}
+          key={inscription.title}
+          onClickCallToAction={() => openInNewTab(inscription.infoUrl)}
+          onClickSend={() => openSendInscriptionModal()}
+          src={inscription.src}
+          subtitle="Ordinal inscription"
+          title={`# ${inscription.number}`}
+        />
+      );
+    case 'image':
       return (
         <CollectibleImage
           icon={<OrdinalIcon size="lg" />}
@@ -38,8 +64,7 @@ export function Inscription({ rawInscription }: InscriptionProps) {
           title={`# ${inscription.number}`}
         />
       );
-    }
-    case 'text': {
+    case 'text':
       return (
         <InscriptionText
           contentSrc={inscription.contentSrc}
@@ -48,8 +73,7 @@ export function Inscription({ rawInscription }: InscriptionProps) {
           onClickSend={() => openSendInscriptionModal()}
         />
       );
-    }
-    case 'other': {
+    case 'other':
       return (
         <CollectibleOther
           key={inscription.title}
@@ -61,9 +85,7 @@ export function Inscription({ rawInscription }: InscriptionProps) {
           <OrdinalIcon />
         </CollectibleOther>
       );
-    }
-    default: {
+    default:
       return null;
-    }
   }
 }
diff --git a/src/app/features/collectibles/components/collectible-hover.tsx b/src/app/features/collectibles/components/collectible-hover.tsx
index d749908879a..bccbd5501e8 100644
--- a/src/app/features/collectibles/components/collectible-hover.tsx
+++ b/src/app/features/collectibles/components/collectible-hover.tsx
@@ -1,9 +1,11 @@
+import { ReactNode } from 'react';
+
 import { Box, styled } from 'leather-styles/jsx';
 
 import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon';
 
 interface CollectibleHoverProps {
-  collectibleTypeIcon?: React.JSX.Element;
+  collectibleTypeIcon?: ReactNode;
   isHovered: boolean;
   onClickCallToAction?(): void;
 }
@@ -24,9 +26,15 @@ export function CollectibleHover({
       style={{ opacity: isHovered ? 'inherit' : '0' }}
       top="0px"
       width="100%"
-      zIndex={999}
     >
-      <Box bottom="space.03" height="30px" left="space.03" position="absolute" width="30px">
+      <Box
+        bottom="space.03"
+        height="30px"
+        left="space.03"
+        position="absolute"
+        width="30px"
+        zIndex={999}
+      >
         {collectibleTypeIcon}
       </Box>
       {onClickCallToAction && (
@@ -48,6 +56,7 @@ export function CollectibleHover({
           top="12px"
           type="button"
           width="30px"
+          zIndex={999}
         >
           <ArrowUpIcon transform="rotate(45deg)" />
         </styled.button>
diff --git a/src/app/features/collectibles/components/collectible-item.layout.tsx b/src/app/features/collectibles/components/collectible-item.layout.tsx
index 636389aeece..e9fba20bc5a 100644
--- a/src/app/features/collectibles/components/collectible-item.layout.tsx
+++ b/src/app/features/collectibles/components/collectible-item.layout.tsx
@@ -12,7 +12,7 @@ export interface CollectibleItemLayoutProps {
   onClickCallToAction?(): void;
   onClickLayout?(): void;
   onClickSend?(): void;
-  collectibleTypeIcon?: React.JSX.Element;
+  collectibleTypeIcon?: ReactNode;
   showBorder?: boolean;
   subtitle: string;
   title: string;
diff --git a/src/app/features/collectibles/components/image-unavailable.tsx b/src/app/features/collectibles/components/image-unavailable.tsx
index 7997acece61..244292196c2 100644
--- a/src/app/features/collectibles/components/image-unavailable.tsx
+++ b/src/app/features/collectibles/components/image-unavailable.tsx
@@ -1,21 +1,16 @@
-import { Flex, styled } from 'leather-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { EyeSlashIcon } from '@app/ui/components/icons/eye-slash-icon';
 
+import { CollectiblePlaceholderLayout } from './_collectible-types/collectible-placeholder.layout';
+
 export function ImageUnavailable() {
   return (
-    <Flex
-      alignItems="center"
-      bg="accent.component-background-default"
-      flexDirection="column"
-      height="100%"
-      justifyContent="center"
-      textAlign="center"
-      width="100%"
-    >
-      <EyeSlashIcon pb="12px" size="md" />
-      <styled.span textStyle="label.03">Image currently</styled.span>
-      <styled.span textStyle="label.03">unavailable</styled.span>
-    </Flex>
+    <CollectiblePlaceholderLayout>
+      <EyeSlashIcon size="md" />
+      <styled.span pt="space.02" px="space.04" textStyle="label.03">
+        Image currently unavailable
+      </styled.span>
+    </CollectiblePlaceholderLayout>
   );
 }
diff --git a/src/app/query/bitcoin/ordinals/inscription.hooks.ts b/src/app/query/bitcoin/ordinals/inscription.hooks.ts
index 6c99bfab88e..1b419c4a972 100644
--- a/src/app/query/bitcoin/ordinals/inscription.hooks.ts
+++ b/src/app/query/bitcoin/ordinals/inscription.hooks.ts
@@ -11,27 +11,52 @@ export function createInscriptionInfoUrl(id: string) {
   return `https://ordinals.hiro.so/inscription/${id}`;
 }
 
+function createHtmlPreviewUrl(id: string) {
+  return `https://ordinals.com/preview/${id}`;
+}
+
 export function convertInscriptionToSupportedInscriptionType(inscription: Inscription) {
   const title = `Inscription ${inscription.number}`;
   return whenInscriptionType<SupportedInscription>(inscription.content_type, {
+    audio: () => ({
+      infoUrl: createInscriptionInfoUrl(inscription.id),
+      src: createHtmlPreviewUrl(inscription.id),
+      title,
+      type: 'audio',
+      ...inscription,
+    }),
+    html: () => ({
+      infoUrl: createInscriptionInfoUrl(inscription.id),
+      src: createHtmlPreviewUrl(inscription.id),
+      title,
+      type: 'html',
+      ...inscription,
+    }),
     image: () => ({
       infoUrl: createInscriptionInfoUrl(inscription.id),
       src: `${HIRO_INSCRIPTIONS_API_URL}/${inscription.id}/content`,
-      type: 'image',
       title,
+      type: 'image',
       ...inscription,
     }),
     text: () => ({
       contentSrc: `${HIRO_INSCRIPTIONS_API_URL}/${inscription.id}/content`,
       infoUrl: createInscriptionInfoUrl(inscription.id),
+      title,
       type: 'text',
+      ...inscription,
+    }),
+    video: () => ({
+      infoUrl: createInscriptionInfoUrl(inscription.id),
+      src: createHtmlPreviewUrl(inscription.id),
       title,
+      type: 'video',
       ...inscription,
     }),
     other: () => ({
       infoUrl: createInscriptionInfoUrl(inscription.id),
-      type: 'other',
       title,
+      type: 'other',
       ...inscription,
     }),
   });
diff --git a/src/app/ui/components/icons/audio-icon.tsx b/src/app/ui/components/icons/audio-icon.tsx
new file mode 100644
index 00000000000..e688f824364
--- /dev/null
+++ b/src/app/ui/components/icons/audio-icon.tsx
@@ -0,0 +1,23 @@
+import { styled } from 'leather-styles/jsx';
+
+import { SvgProps } from '@app/ui/ui-types';
+
+export function AudioIcon({ size = 'sm', ...props }: SvgProps) {
+  return (
+    <styled.svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9.9978 18.5C9.9978 19.8807 8.65466 21 6.9978 21C5.34095 21 3.9978 19.8807 3.9978 18.5C3.9978 17.1193 5.34095 16 6.9978 16C8.65466 16 9.9978 17.1193 9.9978 18.5ZM9.9978 18.5V6.74404C9.9978 6.30243 10.2875 5.91311 10.7105 5.78621L18.7105 3.38621C19.3521 3.19373 19.9978 3.67418 19.9978 4.34404V15.5M19.9978 15.5C19.9978 16.8807 18.6547 18 16.9978 18C15.3409 18 13.9978 16.8807 13.9978 15.5C13.9978 14.1193 15.3409 13 16.9978 13C18.6547 13 19.9978 14.1193 19.9978 15.5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+    </styled.svg>
+  );
+}
diff --git a/src/app/ui/components/iframe.tsx b/src/app/ui/components/iframe.tsx
new file mode 100644
index 00000000000..17d5d46a3be
--- /dev/null
+++ b/src/app/ui/components/iframe.tsx
@@ -0,0 +1,34 @@
+//
+//  __          __     _____  _   _ _____ _   _  _____
+//  \ \        / /\   |  __ \| \ | |_   _| \ | |/ ____|
+//   \ \  /\  / /  \  | |__) |  \| | | | |  \| | |  __
+//    \ \/  \/ / /\ \ |  _  /| . ` | | | | . ` | | |_ |
+//     \  /\  / ____ \| | \ \| |\  |_| |_| |\  | |__| |
+//      \/  \/_/    \_\_|  \_\_| \_|_____|_| \_|\_____|
+//
+// The purpose of this iframe is to wrap content from external sources,
+// primarily for use with inscriptions. Iframes are dangerous and we
+// need to be very careful with our use of them.
+//
+// Below, we use the sandbox attribute to limit what they can do, as well as
+// disabling any interaction with pointer events and user selection.
+import { HTMLStyledProps, styled } from 'leather-styles/jsx';
+
+interface IframeProps extends HTMLStyledProps<'iframe'> {
+  onError(): void;
+  src: string;
+}
+export function Iframe({ onError, src, ...props }: IframeProps) {
+  return (
+    <styled.iframe
+      loading="lazy"
+      onError={onError}
+      overflow="hidden"
+      pointerEvents="none"
+      sandbox="allow-scripts"
+      src={src}
+      userSelect="none"
+      {...props}
+    />
+  );
+}
diff --git a/src/shared/models/inscription.model.ts b/src/shared/models/inscription.model.ts
index 0726a313f0d..73a65a94466 100644
--- a/src/shared/models/inscription.model.ts
+++ b/src/shared/models/inscription.model.ts
@@ -35,7 +35,7 @@ export interface Inscription extends InscriptionResponseItem {
  * appropriately and securely. Inscriptions of types not ready to be handled by the
  * app should be classified as "other".
  */
-const supportedInscriptionTypes = ['image', 'text', 'other'] as const;
+const supportedInscriptionTypes = ['audio', 'html', 'image', 'text', 'video', 'other'] as const;
 
 type SupportedInscriptionType = (typeof supportedInscriptionTypes)[number];
 
@@ -49,6 +49,16 @@ interface BaseSupportedInscription extends Inscription {
   infoUrl: string;
 }
 
+interface AudioInscription extends BaseSupportedInscription {
+  type: 'audio';
+  src: string;
+}
+
+interface HtmlInscription extends BaseSupportedInscription {
+  type: 'html';
+  src: string;
+}
+
 interface ImageInscription extends BaseSupportedInscription {
   type: 'image';
   src: string;
@@ -59,6 +69,11 @@ interface TextInscription extends BaseSupportedInscription {
   contentSrc: string;
 }
 
+interface VideoInscription extends BaseSupportedInscription {
+  type: 'video';
+  src: string;
+}
+
 interface OtherInscription extends BaseSupportedInscription {
   type: 'other';
 }
@@ -68,12 +83,26 @@ interface OtherInscription extends BaseSupportedInscription {
  * type. Typically, API data will be used to construct this object. This is
  * *not* the result of any one API response.
  */
-export type SupportedInscription = ImageInscription | TextInscription | OtherInscription;
+export type SupportedInscription =
+  | AudioInscription
+  | HtmlInscription
+  | ImageInscription
+  | TextInscription
+  | VideoInscription
+  | OtherInscription;
 
 export function whenInscriptionType<T>(
   mimeType: string,
   branches: { [k in SupportedInscriptionType]?: () => T }
 ) {
+  if (mimeType.startsWith('audio/') && branches.audio) {
+    return branches.audio();
+  }
+
+  if (mimeType.startsWith('text/html') && branches.html) {
+    return branches.html();
+  }
+
   if (mimeType.startsWith('image/') && branches.image) {
     return branches.image();
   }
@@ -82,6 +111,10 @@ export function whenInscriptionType<T>(
     return branches.text();
   }
 
+  if (mimeType.startsWith('video/') && branches.video) {
+    return branches.video();
+  }
+
   if (branches.other) return branches.other();
 
   throw new Error('Unhandled inscription type');