feat: a more concise scanner UI

LittleSound · LittleSound · commit cd03cb4f255e · 2024-10-13T03:34:56.000+08:00
diff --git a/app/components/Collapsable.vue b/app/components/Collapsable.vue
@@ -14,14 +14,14 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div flex="~ col" border="~ gray/25 rounded-lg" divide="y dashed gray/25" of-hidden shadow-sm>
+  <div flex="~ col" border="~ gray/25 rounded-lg" divide="y dashed gray/25" of-clip shadow-sm>
     <button
-      flex items-center justify-between px2 py1 text-sm
+      sticky top-0 z-10 flex items-center justify-between px2 py1 text-sm backdrop-blur-xl
       @click="isVisible = !isVisible"
     >
       <span>
         <slot name="label">
-          {{ props.label ?? 'Inspect' }}
+          {{ props.label ?? 'Collapsable' }}
         </slot>
       </span> <span op50>{{ isVisible ? '▲' : '▼' }}</span>
     </button>
diff --git a/app/components/Scan.vue b/app/components/Scan.vue
@@ -111,7 +111,9 @@ onMounted(async () => {
         }
       },
     })
-    selectedCamera.value && qrScanner.setCamera(selectedCamera.value)
+    selectedCamera.value && setTimeout(() => {
+      qrScanner!.setCamera(selectedCamera.value!)
+    })
     qrScanner.setInversionMode('both')
     qrScanner.start()
     updateCameraStatus()
@@ -184,6 +186,7 @@ const receivedBytes = computed(() => decoderStatus.value.encodedCount * (decoder
 const filename = ref<string | undefined>()
 const contentType = ref<string | undefined>()
 const textContent = ref<string | undefined>()
+const dataType = ref<'file' | 'link'>('file')
 
 const bytesFormatted = useKiloBytesNumberFormat(computed(() => (bytes.value / 1024).toFixed(2)))
 const receivedBytesFormatted = useKiloBytesNumberFormat(computed(() => (receivedBytes.value / 1024).toFixed(2)))
@@ -295,38 +298,24 @@ async function scanFrame(result: QrScanner.ScanResult) {
     contentType.value = meta.contentType
 
     if (contentType.value.startsWith('text/')) {
-      textContent.value = new TextDecoder().decode(mergedData)
+      const text = new TextDecoder().decode(mergedData)
 
+      textContent.value = text
       // auto open if it's a URL
-      if (/^https?:\/\//.test(textContent.value)) {
-        window.open(textContent.value, '_blank')
+      if (/^https?:\/\//.test(text)) {
+        dataType.value = 'link'
+
+        setTimeout(() => {
+          try {
+            window.open(text, '_blank')
+          }
+          catch (e) {
+            console.error(e)
+          }
+        }, 250)
       }
     }
   }
-  // console.log({ data })
-  // if (Array.isArray(data)) {
-  //   if (data[0] !== id.value) {
-  //     chunks.length = 0
-  //     dataUrl.value = undefined
-  //   }
-
-  //
-
-  //   chunks[data[2]] = data
-  //   pluse(data[2])
-
-  //   if (!length.value)
-  //     return
-  //   if (picked.value.every(i => !!i)) {
-  //     try {
-  //       const merged = merge(picked.value as SliceData[])
-  //       dataUrl.value = URL.createObjectURL(new Blob([merged], { type: 'application/octet-stream' }))
-  //     }
-  //     catch (e) {
-  //       error.value = e
-  //     }
-  //   }
-  // }
 }
 
 useUnsavedChange(() => {
@@ -344,20 +333,85 @@ function now() {
   <div items-left flex flex-col gap-4>
     <pre v-if="error" overflow-x-auto text-red v-text="error" />
 
-    <div w-full flex flex-wrap gap-2>
-      <button
-        v-for="item of cameras" :key="item.deviceId" :class="{
-          'text-blue': selectedCamera === item.deviceId,
-        }"
-        px2 py1 text-sm shadow-sm
-        border="~ gray/25 rounded-lg"
-        @click="selectedCamera = item.deviceId"
-      >
-        {{ item.label }}
-      </button>
+    <Collapsable label="Cameras" :default="true">
+      <div w-full flex flex-wrap gap-2 p2>
+        <button
+          v-for="(item, index) of cameras" :key="item.deviceId" :class="{
+            'text-blue bg-blue/20': selectedCamera === item.deviceId,
+          }"
+          px2 py1 text-sm shadow-sm
+          border="~ gray/25 rounded-lg"
+          @click="selectedCamera = item.deviceId"
+        >
+          <span i-carbon-camera mr-1 inline-block align-text-top />
+          {{ item.label || `Camera ${index + 1}` }}
+        </button>
+      </div>
+    </Collapsable>
+
+    <Collapsable v-if="dataUrl" label="Result" :default="true">
+      <div flex="~ col gap-2" relative>
+        <div flex="~ col gap-2" p2>
+          <div v-if="dataType === 'link'" :src="dataUrl" break-words text-wrap text-blue underline op80 hover:op100>
+            <a :href="textContent" target="_blank" rel="noopener noreferrer">{{ textContent }}</a>
+          </div>
+          <img v-else-if="contentType?.startsWith('image/')" :src="dataUrl">
+          <video v-else-if="contentType?.startsWith('video/')" controls autoplay muted>
+            <source :src="dataUrl" :type="contentType">
+          </video>
+          <div v-else-if="contentType?.startsWith('text/')" :src="dataUrl" break-words text-wrap>
+            {{ textContent }}
+          </div>
+        </div>
+        <div sticky bottom-0 p4 shadow backdrop-blur-xl>
+          <a
+            v-if="dataType === 'file'"
+            :href="dataUrl"
+            :download="filename"
+            class="block w-full rounded-md bg-white px2 py1 text-center text-sm dark:bg-neutral-8"
+            border="~ gray/25 hover:gray:10" shadow="~ gray/25"
+          >
+            Download as file
+          </a>
+          <a
+            v-else-if="dataType === 'link'"
+            :href="textContent"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="block w-full rounded-md bg-white px2 py1 text-center text-sm dark:bg-neutral-8"
+            border="~ gray/25 hover:gray:10" shadow="~ gray/25"
+          >
+            Open as link
+          </a>
+        </div>
+      </div>
+    </Collapsable>
+
+    <!-- This is a progress bar that is not accurate but feels comfortable. -->
+    <div v-if="k" relative h-4 rounded bg-black:75 text-white font-mono shadow>
+      <div
+        bg="green-400" border="~ green4 rounded" transition="all ease" absolute inset-y-0 h-full w-full duration-1000
+        :style="{ maxWidth: `${decodedBlocks === k ? 100 : (Math.min(1, receivedBytes / bytes * 0.66) * 100).toFixed(2)}%` }"
+      />
     </div>
 
-    <Collapsable>
+    <Camera
+      :k="k"
+      :fps="fps"
+      :bytes="bytes"
+      :received-bytes="receivedBytes"
+      :current-bytes="currentBytesFormatted"
+      :current-valid-bytes-speed="currentValidBytesSpeedFormatted"
+      :camera-signal-status="cameraSignalStatus"
+    >
+      <video
+        ref="video"
+        :controls="false"
+        autoplay muted playsinline h-full w-full rounded-lg
+      />
+    </Camera>
+
+    <Collapsable label="Inspect">
       <div grid-cols="[150px_1fr]" font="mono!" :class="endTime ? 'text-green-500' : ''" grid gap-x-4 gap-y-2 overflow-x-auto whitespace-nowrap p2 text-sm>
         <span text-neutral-500>Filename</span>
         <span text-right md:text-left>{{ filename || '<unknown>' }}</span>
@@ -382,7 +436,7 @@ function now() {
       </div>
     </Collapsable>
 
-    <Collapsable v-if="k" :default="k < 500">
+    <Collapsable v-if="k">
       <template #label>
         <span>Packets</span>
         <span ml-2 text-neutral-400>({{ k }})</span>
@@ -406,51 +460,8 @@ function now() {
       </div>
     </Collapsable>
 
-    <Collapsable v-if="dataUrl" label="Download" :default="true">
-      <div flex="~ col gap-2" p2>
-        <img v-if="contentType?.startsWith('image/')" :src="dataUrl">
-        <video v-else-if="contentType?.startsWith('video/')" controls autoplay muted>
-          <source :src="dataUrl" :type="contentType">
-        </video>
-        <p v-else-if="contentType?.startsWith('text/')" :src="dataUrl">
-          {{ textContent }}
-        </p>
-        <a
-          :href="dataUrl"
-          :download="filename"
-          class="w-max border border-gray:50 rounded-md px2 py1 text-sm hover:bg-gray:10"
-        >
-          Download
-        </a>
-      </div>
-    </Collapsable>
-
-    <!-- This is a progress bar that is not accurate but feels comfortable. -->
-    <div v-if="k" relative h-4 rounded bg-black:75 text-white font-mono shadow>
-      <div
-        bg="green-400" border="~ green4 rounded" transition="all ease" absolute inset-y-0 h-full w-full duration-1000
-        :style="{ maxWidth: `${decodedBlocks === k ? 100 : (Math.min(1, receivedBytes / bytes * 0.66) * 100).toFixed(2)}%` }"
-      />
-    </div>
-
-    <Camera
-      :k="k"
-      :fps="fps"
-      :bytes="bytes"
-      :received-bytes="receivedBytes"
-      :current-bytes="currentBytesFormatted"
-      :current-valid-bytes-speed="currentValidBytesSpeedFormatted"
-      :camera-signal-status="cameraSignalStatus"
-    >
-      <video
-        ref="video"
-        :controls="false"
-        autoplay muted playsinline h-full w-full rounded-lg
-      />
-    </Camera>
-
-    <Collapsable label="Blocks">
-      <div flex="~ gap-1 wrap" max-w-150 text-xs>
+    <Collapsable v-if="k" label="Blocks">
+      <div flex="~ gap-1 wrap" max-w-150 p2 text-xs>
         <div v-for="i, idx of decoderStatus.encodedBlocks" :key="idx" border="~ gray/10 rounded" p1>
           <template v-for="x, idy of i.indices" :key="x">
             <span v-if="idy !== 0" op25>, </span>
diff --git a/app/pages/scan.vue b/app/pages/scan.vue
@@ -6,6 +6,7 @@ const throttledFps = useDebounce(fps, 500)
 
 <template>
   <div px-4 pb-8 pt-2 space-y-4>
+    <Scan :max-scans-per-second="throttledFps" />
     <div w-full inline-flex flex-row items-center>
       <span min-w-40>
         <span pr-2 text-zinc-400>Ideal scans</span>
@@ -19,7 +20,6 @@ const throttledFps = useDebounce(fps, 500)
         w-full flex-1
       />
     </div>
-    <Scan :max-scans-per-second="throttledFps" />
     <!-- <h2 flex items-center gap-4 text-3xl>
       Results: {{ results.size }}
       <button class="flex items-center gap2 border rounded-md px2 py1 text-base shadow" @click="results = new Set()">
