From 9f066452d48b306b331a959d9cd37cf83c2396c2 Mon Sep 17 00:00:00 2001
From: Yannick Goossens <yannick@ziroh.be>
Date: Sun, 5 Nov 2023 17:23:48 +0100
Subject: [PATCH 1/3] fix: re-enable preview for interactive objkts, regression
 from https://github.com/teia-community/teia-ui/pull/346

---
 src/components/media-types/html/index.jsx |  2 +-
 src/utils/html.js                         | 13 ++++---------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/media-types/html/index.jsx b/src/components/media-types/html/index.jsx
index a8cfd3468..725050d45 100644
--- a/src/components/media-types/html/index.jsx
+++ b/src/components/media-types/html/index.jsx
@@ -55,7 +55,7 @@ export const HTMLComponent = (props) => {
   const unpackZipFiles = async () => {
     unpacking.current = true
 
-    const buffer = dataRUIToBuffer(previewUri)
+    const buffer = await dataRUIToBuffer(previewUri)
 
     try {
       const filesArr = await prepareFilesFromZIP(buffer)
diff --git a/src/utils/html.js b/src/utils/html.js
index 7a2f10d28..feb3e2a3e 100644
--- a/src/utils/html.js
+++ b/src/utils/html.js
@@ -288,14 +288,9 @@ export async function validateFiles(files) {
   }
 }
 
-export function dataRUIToBuffer(dataURI) {
-  const parts = dataURI.split(',')
-  const base64 = parts[1]
-  const binaryStr = atob(base64)
-  const len = binaryStr.length
-  const bytes = new Uint8Array(len)
-  for (let i = 0; i < len; i++) {
-    bytes[i] = binaryStr.charCodeAt(i)
-  }
+export async function dataRUIToBuffer(dataURI) {
+  const blob = await fetch(dataURI).then((r) => r.blob())
+  const binaryStr = await new Response(blob).arrayBuffer()
+  const bytes = new Uint8Array(binaryStr)
   return bytes
 }

From d5ffdaae85109861c1ca3a6f19d95153b3ba0d6a Mon Sep 17 00:00:00 2001
From: Yannick Goossens <yannick@ziroh.be>
Date: Sun, 5 Nov 2023 17:42:15 +0100
Subject: [PATCH 2/3] avoid mixed content by providing the fullpath with
 trailing /

---
 src/components/media-types/html/index.jsx   | 2 +-
 src/components/media-types/vector/index.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/media-types/html/index.jsx b/src/components/media-types/html/index.jsx
index 725050d45..d2e886718 100644
--- a/src/components/media-types/html/index.jsx
+++ b/src/components/media-types/html/index.jsx
@@ -122,7 +122,7 @@ export const HTMLComponent = (props) => {
           <iframe
             ref={iframeRef}
             title={`interactive object ${nft.token_id}`}
-            src={`https://iframe.teia.art/html?uid=${uid}&creator=${_creator_}&viewer=${_viewer_}&objkt=${_objectId_}`}
+            src={`https://iframe.teia.art/html/?uid=${uid}&creator=${_creator_}&viewer=${_viewer_}&objkt=${_objectId_}`}
             sandbox={sandbox_features}
             allow={allowed_features}
           />
diff --git a/src/components/media-types/vector/index.jsx b/src/components/media-types/vector/index.jsx
index dd2870cd6..229970d96 100644
--- a/src/components/media-types/vector/index.jsx
+++ b/src/components/media-types/vector/index.jsx
@@ -63,6 +63,6 @@ export const VectorComponent = ({
   )
 }
 // svg version:     src={`${src}?author=${_creator_}&viewer=${_viewer_}`}
-// iframe version:  src={`https://iframe.teia.art/svg?src=${src}&creator=${_creator_}&viewer=${_viewer_}`}
+// iframe version:  src={`https://iframe.teia.art/svg/?src=${src}&creator=${_creator_}&viewer=${_viewer_}`}
 
 export default VectorComponent

From 143c968a5c5b25448e24173ddd1708ae511593fb Mon Sep 17 00:00:00 2001
From: Yannick Goossens <yannick@ziroh.be>
Date: Sun, 5 Nov 2023 17:58:17 +0100
Subject: [PATCH 3/3] fix width/height

---
 src/components/media-types/html/index.module.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/media-types/html/index.module.scss b/src/components/media-types/html/index.module.scss
index 38cea421a..cd425c14d 100644
--- a/src/components/media-types/html/index.module.scss
+++ b/src/components/media-types/html/index.module.scss
@@ -23,6 +23,8 @@
 
   &.interactive {
     pointer-events: all;
+    width: 100%;
+    height: 100%;
   }
 
   .preview {