feat: Preview images on /code-checker

components/codeChecker/CodeChecker.vue

@@ -143,13 +143,31 @@
       class="w-full lg:w-1/2 flex flex-col items-center lg:mt-4 lg:items-end">
       <!-- Content of the second column -->
       <CodeCheckerPreviewCard
+        ref="codeCheckerPreview"
         :selected-file="selectedFile"
         :file-name="fileName"
         :assets="assets"
         :render="Boolean(selectedFile)"
         :koda-renderer-used="fileValidity.kodaRendererUsed"
         :reload-trigger="reloadTrigger"
         @reload="startClock" />
+
+      <CodeCheckerMassPreview
+        v-if="selectedFile && index"
+        class="!mt-11"
+        :assets="assets"
+        :index="index" />
+
+      <div class="max-w-[490px] mt-11">
+        <hr v-if="selectedFile" class="my-2 bg-k-shade2 w-full !mb-11" />
+
+        <div class="flex items-center gap-5">
+          <NeoIcon icon="shield" class="!block text-k-grey" size="large" />
+          <p class="capitalize text-k-grey">
+            {{ $t('codeChecker.confidentialCode') }}
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -192,13 +210,15 @@ const validtyDefault: Validity = {
 
 const selectedFile = ref<File | null>(null)
 const assets = ref<AssetMessage[]>([])
+const index = ref<string>()
 const fileName = computed(() => selectedFile.value?.name)
 const fileValidity = reactive<Validity>({ ...validtyDefault })
 const errorMessage = ref('')
 const renderStartTime = ref(0)
 const renderEndTime = ref(0)
 const reloadTrigger = ref(0)
 const firstImage = ref<string>()
+const codeCheckerPreview = ref()
 
 const onFileSelected = async (file: File) => {
   clear()
@@ -223,6 +243,7 @@ const onFileSelected = async (file: File) => {
     fileValidity.consistent = 'unknown'
   }
 
+  index.value = indexFile.content
   assets.value = await createSandboxAssets(indexFile, entries)
 }
 
@@ -245,7 +266,10 @@ function hasImage(dataURL: string): boolean {
 }
 
 useEventListener(window, 'message', async (res) => {
-  if (res.data?.type === 'kodahash/render/completed') {
+  if (
+    res.data?.type === 'kodahash/render/completed' &&
+    codeCheckerPreview.value?.hash === res.data.payload.hash
+  ) {
     const payload = res.data?.payload
     renderEndTime.value = performance.now()
     const duration = renderEndTime.value - renderStartTime.value

components/codeChecker/PreviewCard.vue

@@ -160,6 +160,7 @@ const exportAsPNG = async () => {
 }
 
 watch(() => props.reloadTrigger, replay)
+defineExpose({ hash })
 </script>
 <style scoped lang="scss">
 :deep(.o-drop__menu) {

components/codeChecker/SandboxIFrame.vue

@@ -2,7 +2,7 @@
   <NeoIFrameMedia
     :key="count"
     :class="['sandbox-iframe', customClass]"
-    :iframe-id="config.iframeId"
+    :iframe-id="iframeId"
     :src="iframeSrc"
     sandbox="allow-scripts allow-same-origin"
     title="render-preview"
@@ -16,12 +16,19 @@ import { postAssetsToSandbox } from './utils'
 import config from './codechecker.config'
 import { AssetMessage } from './types'
 
-const props = defineProps<{
-  hash: string
-  assets: Array<AssetMessage>
-  count: number
-  customClass?: string | object
-}>()
+const props = withDefaults(
+  defineProps<{
+    hash: string
+    assets: Array<AssetMessage>
+    count: number
+    customClass?: string | object
+    iframeId?: string
+  }>(),
+  {
+    iframeId: config.iframeId,
+    customClass: '',
+  },
+)
 
 const emit = defineEmits(['update:count'])
 
@@ -38,6 +45,6 @@ watch(
 )
 
 function onIframeLoad() {
-  postAssetsToSandbox(props.assets)
+  postAssetsToSandbox(props.assets, props.iframeId)
 }
 </script>

components/codeChecker/massPreview/Canvas.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <p class="font-bold capitalize">
+        {{ $t('codeChecker.testOutPerformance') }}
+      </p>
+
+      <NeoSwitch v-model="active" />
+    </div>
+
+    <transition name="slide">
+      <div v-if="active" class="!mt-6">
+        <CodeCheckerMassPreviewControls
+          v-model="amount"
+          :previews="previews"
+          @retry="generateMassPreview" />
+
+        <CodeCheckerMassPreviewGrid :items="previews" class="!mt-4">
+          <template #default="{ item }: { item: CanvasPreviewItem }">
+            <CodeCheckerSandboxIFrame
+              :hash="item.hash"
+              :assets="assets"
+              :count="1"
+              :iframe-id="item.hash"
+              class="border" />
+          </template>
+        </CodeCheckerMassPreviewGrid>
+      </div>
+    </transition>
+  </div>
+</template>
+<script lang="ts" setup>
+import { NeoSwitch } from '@kodadot1/brick'
+import { AssetMessage } from '../types'
+import { CanvasPreviewItem } from './types'
+import { generateRandomHash } from '../utils'
+
+const props = defineProps<{
+  assets: Array<AssetMessage>
+  previews: number
+}>()
+
+const active = ref(false)
+const amount = ref(props.previews)
+const previews = ref<CanvasPreviewItem[]>([])
+
+const generateMassPreview = () => {
+  previews.value = Array.from({ length: amount.value }).map(() => ({
+    hash: generateRandomHash(),
+    startedAt: performance.now(),
+    loading: true,
+  }))
+}
+
+useEventListener(window, 'message', async (res) => {
+  const hash = res.data.payload.hash
+  if (
+    res.data?.type === 'kodahash/render/completed' &&
+    previews.value.map((p) => p.hash).includes(hash)
+  ) {
+    previews.value = previews.value.map((preview) =>
+      preview.hash === hash
+        ? { ...preview, renderedAt: performance.now(), loading: false }
+        : preview,
+    )
+  }
+})
+
+watch(
+  [active, () => props.assets],
+  ([active]) => {
+    if (active) {
+      generateMassPreview()
+    }
+  },
+  { immediate: true },
+)
+</script>

components/codeChecker/massPreview/Capture.vue

@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <p class="font-bold capitalize">
+        {{ $t('codeChecker.testOutCapture') }}
+      </p>
+
+      <span v-if="uploading" class="text-sm text-k-grey capitalize">
+        {{ $t('codeChecker.uploadingFile') }}</span
+      >
+      <NeoSwitch v-else-if="indexKey" v-model="active" />
+    </div>
+
+    <transition name="slide">
+      <div v-if="active" class="flex flex-col gap-4 !mt-6">
+        <CodeCheckerMassPreviewControls
+          v-model="previewAmount"
+          :previews="previews"
+          @retry="generateMassPreview" />
+
+        <CodeCheckerMassPreviewGrid :items="previews">
+          <template #default="{ item }: { item: CapturePreviewItem }">
+            <BaseMediaItem v-if="item.image" :src="item.image" class="border" />
+          </template>
+        </CodeCheckerMassPreviewGrid>
+      </div>
+    </transition>
+  </div>
+</template>
+<script lang="ts" setup>
+import { NeoSwitch } from '@kodadot1/brick'
+import { makeScreenshot } from '@/services/capture'
+import { uploadFile, uploadPresigned } from '@/services/playground'
+import { AssetMessage } from '../types'
+import { CapturePreviewItem } from './types'
+import { generateRandomHash } from '../utils'
+import { AssetElementMap, AssetReplaceElement } from './utils'
+
+const props = defineProps<{
+  assets: Array<AssetMessage>
+  index: string
+  previews: number
+}>()
+
+const { $i18n } = useNuxtApp()
+
+const previews = ref<CapturePreviewItem[]>([])
+const previewAmount = ref(props.previews)
+const active = ref(false)
+const uploading = ref(false)
+const indexKey = ref<string>()
+
+const replaceAssetContent = async (doc: Document, asset: AssetMessage) => {
+  const response = await $fetch<string>(asset.src)
+
+  const { src: srcAttribute, tag } = AssetElementMap[asset.type]
+
+  const element = doc.querySelector(
+    `${tag}[${srcAttribute}="${asset.originalSrc}"]`,
+  )
+
+  if (!element) {
+    return
+  }
+
+  const assetReplace = AssetReplaceElement[asset.type] ?? null
+
+  assetReplace?.({ doc, content: response, element })
+}
+
+const buildIndexFile = async (): Promise<Blob> => {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(props.index, 'text/html')
+
+  await Promise.all(
+    props.assets.map((asset) => replaceAssetContent(doc, asset)),
+  )
+
+  return new Blob([doc.documentElement.outerHTML], {
+    type: 'text/html',
+  })
+}
+
+const uploadIndex = async () => {
+  try {
+    uploading.value = true
+    const file = await buildIndexFile()
+    const { key } = await uploadFile({
+      file,
+      fileName: 'index.html',
+      prefix: 'codeChecker',
+    })
+    indexKey.value = key
+  } catch (error) {
+    dangerMessage(`${$i18n.t('codeChecker.failedUploadingIndex')}: ${error}`)
+  } finally {
+    uploading.value = false
+  }
+}
+
+const initCapture = async () => {
+  initScreenshot()
+}
+
+const updatePreview = (preview: CapturePreviewItem) => {
+  previews.value = previews.value.map((p) =>
+    p.hash === preview.hash ? preview : p,
+  )
+}
+
+const initScreenshot = () => {
+  if (!indexKey.value) {
+    return
+  }
+
+  previews.value.forEach(async (preview) => {
+    try {
+      const { url } = await uploadPresigned(indexKey.value!, {
+        hash: preview.hash,
+      })
+
+      preview = { ...preview, startedAt: performance.now() }
+
+      const response = await makeScreenshot(url)
+
+      preview = {
+        ...preview,
+        image: URL.createObjectURL(response),
+        renderedAt: performance.now(),
+      }
+    } catch (error) {
+    } finally {
+      preview = { ...preview, loading: false }
+    }
+
+    updatePreview(preview)
+  })
+}
+
+const generateMassPreview = async () => {
+  previews.value = Array.from({ length: previewAmount.value }).map(() => ({
+    hash: generateRandomHash(),
+    loading: true,
+  }))
+
+  await initCapture()
+}
+
+watch(
+  [() => props.assets, () => props.index],
+  ([assets, index]) => {
+    if (assets.length && index) {
+      uploadIndex()
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  [active, () => props.assets],
+  ([active]) => {
+    if (active) {
+      generateMassPreview()
+    }
+  },
+  { immediate: true },
+)
+</script>

components/codeChecker/massPreview/CodeCheckerMassPreview.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="w-full max-w-[490px] flex flex-col gap-4">
+    <CodeCheckerMassPreviewCanvas
+      :assets="assets"
+      :previews="PREVIEWS_AMOUNT" />
+
+    <CodeCheckerMassPreviewCapture
+      :assets="assets"
+      :index="index"
+      :previews="PREVIEWS_AMOUNT" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { AssetMessage } from '../types'
+
+const PREVIEWS_AMOUNT = 12
+
+defineProps<{
+  assets: Array<AssetMessage>
+  index: string
+}>()
+</script>