fix html preview (#225)

* fix html preview * fix iframe click --------- Co-authored-by: David Case <[email protected]>
yours-org · May 31, 2024 · 09101a6 · 09101a6
1 parent 421c5f6
commit 09101a6
Showing 1 changed file with 28 additions and 1 deletion.
diff --git a/src/components/Ordinal.tsx b/src/components/Ordinal.tsx
@@ -3,6 +3,7 @@ import { OrdinalTxo } from '../hooks/ordTypes';
 import { ColorThemeProps, Theme } from '../theme';
 import { Text } from './Reusable';
 import { Show } from './Show';
+import React from 'react';
 
 export type OrdinalDivProps = ColorThemeProps & {
   url: string;
@@ -22,6 +23,15 @@ const OrdinalWrapper = styled.div<OrdinalDivProps>`
   border: ${(props) => (props.selected ? `0.1rem solid ${props.theme.lightAccent}` : undefined)};
 `;
 
+const StyledIFrame = styled.iframe<{ size?: string }>`
+  height: ${(props) => props.size ?? '6.5rem'};
+  width: ${(props) => props.size ?? '6.5rem'};
+  border-radius: 1.25rem;
+  border: none;
+  cursor: pointer;
+  pointer-events: none;
+`;
+
 const TextWrapper = styled(OrdinalWrapper)`
   display: flex;
   flex-direction: column;
@@ -92,10 +102,27 @@ export const Ordinal = (props: OrdinalProps) => {
   const renderContent = () => {
     switch (true) {
       case contentType?.startsWith('image/svg'):
+        return (
+          <OrdinalWrapper size={size} selected={selected} url={url} theme={theme} onClick={onClick}>
+            <StyledIFrame src={url} sandbox="true" size={size} />
+          </OrdinalWrapper>
+        );
       case contentType?.startsWith('text/html'):
+        if (inscription.origin?.data?.map?.previewUrl) {
+          return (
+            <OrdinalWrapper
+              size={size}
+              selected={selected}
+              url={inscription.origin?.data?.map?.previewUrl}
+              theme={theme}
+              style={{ backgroundImage: `url(${url})` }}
+              onClick={onClick}
+            />
+          );
+        }
         return (
           <OrdinalWrapper size={size} selected={selected} url={url} theme={theme} onClick={onClick}>
-            <iframe src={url} style={{ border: '0px', height: '100%', width: '100%' }} sandbox="true" />
+            <StyledIFrame src={url} sandbox="true" size={size} />
           </OrdinalWrapper>
         );
       case contentType?.startsWith('image/'):