Merge branch 'main' into main

kodadot · Jul 2, 2024 · 18a9a7d · 18a9a7d
2 parents 93066f5 + 2c68e37
commit 18a9a7d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 28 deletions.
diff --git a/components/codeChecker/massPreview/Capture.vue b/components/codeChecker/massPreview/Capture.vue
@@ -15,16 +15,16 @@
       <div v-if="active" class="flex flex-col gap-4 !mt-6">
         <CodeCheckerMassPreviewControls
           v-model="previewAmount"
-          :previews="previews"
+          :previews="previewItems"
+          hide-average
           @retry="generateMassPreview" />
 
-        <CodeCheckerMassPreviewGrid :items="previews.map((p) => p.loading)">
+        <CodeCheckerMassPreviewGrid :items="previewItems.map((p) => p.loading)">
           <template #default="{ index }">
-            <BaseMediaItem
-              v-if="previews[index].image"
-              :key="previews[index].hash"
-              :src="previews[index].image"
-              class="border" />
+            <iframe
+              title="preview"
+              :src="previewItems[index].image"
+              class="w-full h-full border border-black border-solid"></iframe>
           </template>
         </CodeCheckerMassPreviewGrid>
       </div>
@@ -33,13 +33,13 @@
 </template>
 <script lang="ts" setup>
 import { NeoSwitch } from '@kodadot1/brick'
-import { makeScreenshot } from '@/services/capture'
 import { getObjectUrl, getUpload, uploadFile } from '@/services/playground'
 import { AssetMessage } from '../types'
 import { CapturePreviewItem } from './types'
 import { generateRandomHash } from '../utils'
 import { AssetElementMap, AssetReplaceElement } from './utils'
 import { getDocumentFromString } from '../utils'
+import { IFRAME_BLOB_URI } from '@/services/capture'
 
 const emit = defineEmits(['upload'])
 const props = withDefaults(
@@ -55,7 +55,7 @@ const props = withDefaults(
 
 const { $i18n } = useNuxtApp()
 
-const previews = ref<CapturePreviewItem[]>([])
+const previewItems = ref<CapturePreviewItem[]>([])
 const previewAmount = ref(props.previews)
 const active = ref(false)
 const uploading = ref(false)
@@ -110,12 +110,8 @@ const uploadIndex = async () => {
   }
 }
 
-const initCapture = async () => {
-  initScreenshot()
-}
-
 const updatePreview = (preview: CapturePreviewItem) => {
-  previews.value = previews.value.map((p) =>
+  previewItems.value = previewItems.value.map((p) =>
     p.hash === preview.hash ? preview : p,
   )
 }
@@ -125,20 +121,17 @@ const initScreenshot = () => {
     return
   }
 
-  previews.value.forEach(async (preview) => {
+  previewItems.value.forEach(async (preview) => {
     try {
-      let url = getObjectUrl(indexKey.value!)
+      let previewUrl = getObjectUrl(indexKey.value!)
+      previewUrl += `?hash=${preview.hash}`
 
-      url += `?hash=${preview.hash}`
-
-      preview = { ...preview, startedAt: performance.now() }
-
-      const response = await makeScreenshot(url)
+      const iframeUrl = new URL(IFRAME_BLOB_URI)
+      iframeUrl.searchParams.set('url', previewUrl)
 
       preview = {
         ...preview,
-        image: URL.createObjectURL(response),
-        renderedAt: performance.now(),
+        image: iframeUrl.toString(),
       }
     } catch (error) {
     } finally {
@@ -150,12 +143,12 @@ const initScreenshot = () => {
 }
 
 const generateMassPreview = async () => {
-  previews.value = Array.from({ length: previewAmount.value }).map(() => ({
+  previewItems.value = Array.from({ length: previewAmount.value }).map(() => ({
     hash: generateRandomHash(),
     loading: true,
   }))
 
-  await initCapture()
+  initScreenshot()
 }
 
 watch(

diff --git a/components/codeChecker/massPreview/Controls.vue b/components/codeChecker/massPreview/Controls.vue
@@ -5,7 +5,7 @@
         {{ $t('codeChecker.numberOfInputs') }}
       </p>
 
-      <div class="text-k-grey text-xs flex gap-3">
+      <div v-if="!hideAverage" class="text-k-grey text-xs flex gap-3">
         <p class="capitalize">
           {{ $t('codeChecker.timePerVariation') }}
         </p>
@@ -35,6 +35,7 @@ defineEmits(['retry'])
 const props = defineProps<{
   modelValue: number
   previews: CapturePreviewItem[] | CanvasPreviewItem[]
+  hideAverage?: boolean
 }>()
 
 const amount = useVModel(props, 'modelValue')

diff --git a/components/gallery/useGalleryItem.ts b/components/gallery/useGalleryItem.ts
@@ -104,13 +104,13 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
       sanitizeIpfsUrl(metadata.animationUrl || metadata.animation_url) || ''
     nftAnimationMimeType.value =
       metadata.animationUrlMimeType ||
-      (await getMimeType(nftAnimation.value)) ||
+      (nftAnimation.value && (await getMimeType(nftAnimation.value))) ||
       ''
     nftImage.value = sanitizeIpfsUrl(metadata.image) || ''
     nftMimeType.value =
       metadata.imageMimeType ||
       metadata.type ||
-      (await getMimeType(nftImage.value)) ||
+      (nftImage.value && (await getMimeType(nftImage.value))) ||
       ''
 
     // use cf-video & replace the video thumbnail

diff --git a/services/capture.ts b/services/capture.ts
@@ -1,6 +1,8 @@
 import { $fetch, FetchError } from 'ofetch'
+
 const CAPTURE_BASE_URL = 'https://kodacapture.vercel.app/api'
 const WEBGL_CAPTURE_BASE_URL = 'https://capturegl.vercel.app/api'
+export const IFRAME_BLOB_URI = 'https://iframe-to-blob.pages.dev/iframe'
 
 const api = $fetch.create({
   baseURL: CAPTURE_BASE_URL,