feat: contentType support for filename & Content-Type

Signed-off-by: Neko Ayaka <[email protected]>

Author: nekomeowww

app/components/Generate.vue

@@ -1,18 +1,28 @@
 <script lang="ts" setup>
 import type { EncodedBlock } from '~~/utils/lt-code'
-import { blockToBinary, createEncoder } from '~~/utils/lt-code'
-import { fromUint8Array } from 'js-base64'
+import { binaryToBlock, blockToBinary, createEncoder } from '~~/utils/lt-code'
+import { fromUint8Array, toUint8Array } from 'js-base64'
 import { renderSVG } from 'uqr'
 
 const props = withDefaults(defineProps<{
   data: Uint8Array
+  filename?: string
+  contentType?: string
   speed: number
 }>(), {
   speed: 250,
 })
 
+const abBase64 = fromUint8Array(new TextEncoder().encode(JSON.stringify({
+  filename: props.filename,
+  contentType: props.contentType,
+  content: fromUint8Array(props.data),
+})))
+
+const data = new Uint8Array(new TextEncoder().encode(abBase64))
+
 const count = ref(0)
-const encoder = createEncoder(props.data, 1000)
+const encoder = createEncoder(data, 1000, 'application/json')
 const svg = ref<string>()
 const block = shallowRef<EncodedBlock>()
 

app/components/Scan.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { binaryToBlock, createDecoder } from '~~/utils/lt-code'
+import { binaryToBlock, ContentType, createDecoder } from '~~/utils/lt-code'
 import { toUint8Array } from 'js-base64'
 import { scan } from 'qr-scanner-wechat'
 import { useBytesRate } from '~/composables/timeseries'
@@ -91,6 +91,7 @@ onMounted(async () => {
       }
       catch (e) {
         error.value = e
+        console.error(e)
       }
     },
     () => props.speed,
@@ -124,6 +125,8 @@ async function connectCamera() {
     video.value!.play()
   }
   catch (e) {
+    console.error(e)
+
     if ((e as Error).name === 'NotAllowedError' || (e as Error).name === 'NotFoundError') {
       cameraSignalStatus.value = CameraSignalStatus.NotGranted
       return
@@ -134,9 +137,11 @@ async function connectCamera() {
 }
 
 const decoder = ref(createDecoder())
+
 const k = ref(0)
 const bytes = ref(0)
 const checksum = ref(0)
+
 const cached = new Set<string>()
 const startTime = ref(0)
 const endTime = ref(0)
@@ -147,6 +152,10 @@ const status = ref<number[]>([])
 const decodedBlocks = computed(() => status.value.filter(i => i === 1).length)
 const receivedBytes = computed(() => decoder.value.encodedCount * (decoder.value.meta?.data.length ?? 0))
 
+const filename = ref<string | undefined>()
+const contentType = ref<string | undefined>()
+const textContent = ref<string | undefined>()
+
 function getStatus() {
   const array = Array.from({ length: k.value }, () => 0)
   for (let i = 0; i < k.value; i++) {
@@ -180,6 +189,49 @@ function pluse(index: number) {
   el.style.filter = 'none'
 }
 
+/**
+ * Proposed ideal processing method for decoded data from LT codes
+ *
+ * @param data - The decoded data from LT codes
+ * @param type - The content type of the merged data, specified when encoding
+ */
+function toData(data: Uint8Array, type: ContentType): Uint8Array | string | any {
+  // Binary data, no need to process
+  if (type === ContentType.Binary) {
+    return data
+  }
+  // Text data, decode and return
+  else if (type === ContentType.Text) {
+    return new TextDecoder().decode(data)
+  }
+  // Base64 encoded JSON data, decode and return
+  else {
+    const decodedFromBase64 = toUint8Array(new TextDecoder().decode(data))
+    const decodedJSONBodyStr = new TextDecoder().decode(decodedFromBase64)
+    const decodedJSONBody = JSON.parse(decodedJSONBodyStr)
+    return decodedJSONBody
+  }
+}
+
+/**
+ * Proposed ideal method to convert data to a data URL
+ *
+ * @param data - The data to convert
+ * @param type - The content type of the data
+ */
+function toDataURL(data: Uint8Array | string | any, type: ContentType): string {
+  if (type === ContentType.Binary) {
+    return URL.createObjectURL(new Blob([data], { type: 'application/octet-stream' }))
+  }
+  else if (type === ContentType.Text) {
+    return URL.createObjectURL(new Blob([new TextEncoder().encode(data)], { type: 'text/plain' }))
+  }
+  else {
+    const json = JSON.stringify(data)
+    return URL.createObjectURL(new Blob([new TextEncoder().encode(json)], { type: 'application/json' }))
+  }
+}
+
 async function scanFrame() {
   if (cameraSignalStatus.value === CameraSignalStatus.NotGranted
     || cameraSignalStatus.value === CameraSignalStatus.NotSupported) {
@@ -231,13 +283,36 @@ async function scanFrame() {
 
   cached.add(result.text)
   k.value = data.k
+
   data.indices.map(i => pluse(i))
   const success = decoder.value.addBlock(data)
   status.value = getStatus()
   if (success) {
     endTime.value = performance.now()
+
     const merged = decoder.value.getDecoded()!
-    dataUrl.value = URL.createObjectURL(new Blob([merged], { type: 'application/octet-stream' }))
+
+    const mergedData = toData(merged, data.contentType)
+    dataUrl.value = toDataURL(mergedData, data.contentType)
+
+    if (data.contentType === ContentType.Text) {
+      textContent.value = mergedData
+    }
+    if (data.contentType === ContentType.JSON) {
+      const jsonBody = mergedData as unknown as {
+        filename: string
+        contentType: string
+        content: string
+      }
+
+      filename.value = jsonBody.filename
+      contentType.value = jsonBody.contentType
+
+      const payloadData = toUint8Array(jsonBody.content)
+      if (contentType.value.startsWith('text/')) {
+        textContent.value = new TextDecoder().decode(payloadData)
+      }
+    }
   }
   // console.log({ data })
   // if (Array.isArray(data)) {
@@ -289,6 +364,8 @@ function now() {
 
     <Collapsable>
       <p w-full of-x-auto ws-nowrap px2 py1 font-mono :class="endTime ? 'text-green' : ''">
+        <span>Filename: {{ filename }}</span><br>
+        <span>Content-Type: {{ contentType }}</span><br>
         <span>Checksum: {{ checksum }}</span><br>
         <span>Indices: {{ k }}</span><br>
         <span>Decoded: {{ decodedBlocks }}</span><br>
@@ -322,12 +399,17 @@ function now() {
 
     <Collapsable v-if="dataUrl" label="Download" :default="true">
       <div flex="~ col gap-2" max-w-150 p2>
-        <img :src="dataUrl">
+        <img v-if="contentType?.startsWith('image/')" :src="dataUrl">
+        <p v-if="contentType?.startsWith('text/')" :src="dataUrl">
+          {{ textContent }}
+        </p>
         <a
-          class="w-max border border-gray:50 rounded-md px2 py1 text-sm hover:bg-gray:10"
           :href="dataUrl"
-          download="foo.png"
-        >Download</a>
+          :download="filename"
+          class="w-max border border-gray:50 rounded-md px2 py1 text-sm hover:bg-gray:10"
+        >
+          Download
+        </a>
       </div>
     </Collapsable>
 

app/pages/index.vue

@@ -9,6 +9,9 @@ enum ReadPhase {
 const error = ref<any>()
 const speed = ref(100)
 const readPhase = ref<ReadPhase>(ReadPhase.Idle)
+
+const filename = ref<string | undefined>()
+const contentType = ref<string | undefined>()
 const data = ref<Uint8Array | null>(null)
 
 async function onFileChange(file?: File) {
@@ -20,8 +23,13 @@ async function onFileChange(file?: File) {
 
   try {
     readPhase.value = ReadPhase.Reading
+
+    filename.value = file.name
+    contentType.value = file.type
+
     const buffer = await file.arrayBuffer()
     data.value = new Uint8Array(buffer)
+
     readPhase.value = ReadPhase.Ready
   }
   catch (e) {
@@ -59,7 +67,10 @@ async function onFileChange(file?: File) {
     </div>
     <div v-if="readPhase === ReadPhase.Ready && data" h-full w-full flex justify-center>
       <Generate
-        :speed="speed" :data="data"
+        :speed="speed"
+        :data="data"
+        :filename="filename"
+        :content-type="contentType"
         min-h="[calc(100vh-250px)]"
         max-w="[calc(100vh-250px)]"
         h-full w-full

utils/lt-code/encoder.ts

@@ -1,8 +1,8 @@
-import type { EncodedBlock } from './shared'
 import { getChecksum } from './checksum'
+import { type EncodedBlock, mapContentType } from './shared'
 
-export function createEncoder(data: Uint8Array, indicesSize: number) {
-  return new LtEncoder(data, indicesSize)
+export function createEncoder(data: Uint8Array, indicesSize: number, contentType: string = 'application/octet-stream'): LtEncoder {
+  return new LtEncoder(data, indicesSize, contentType)
 }
 
 export class LtEncoder {
@@ -14,6 +14,7 @@ export class LtEncoder {
   constructor(
     public readonly data: Uint8Array,
     public readonly indicesSize: number,
+    public readonly contentType: string = 'application/octet-stream',
   ) {
     this.indices = sliceData(data, indicesSize)
     this.k = this.indices.length
@@ -30,10 +31,20 @@ export class LtEncoder {
       }
     }
 
+    console.log({
+      k: this.k,
+      bytes: this.bytes,
+      checksum: this.checksum,
+      contentType: mapContentType(this.contentType),
+      indices,
+      data,
+    })
+
     return {
       k: this.k,
       bytes: this.bytes,
       checksum: this.checksum,
+      contentType: mapContentType(this.contentType),
       indices,
       data,
     }

utils/lt-code/shared.ts

@@ -1,3 +1,18 @@
+export enum ContentType {
+  /**
+   * Binary data
+   */
+  Binary,
+  /**
+   * Plain text
+   */
+  Text,
+  /**
+   * JSON data
+   */
+  JSON,
+}
+
 export interface EncodedHeader {
   /**
    * Number of original data blocks
@@ -11,6 +26,11 @@ export interface EncodedHeader {
    * Checksum, CRC32 and XOR of k
    */
   checksum: number
+  /**
+   * Content Type, @see ContentType .
+   * For converting Content-Type string to ContentType enum, use @see mapContentType .
+   */
+  contentType: number
 }
 
 export interface EncodedBlock extends EncodedHeader {
@@ -19,19 +39,23 @@ export interface EncodedBlock extends EncodedHeader {
 }
 
 export function blockToBinary(block: EncodedBlock): Uint8Array {
-  const { k, bytes, checksum, indices, data } = block
+  const { k, bytes, checksum, indices, data, contentType } = block
   const header = new Uint32Array([
     indices.length,
     ...indices,
     k,
     bytes,
     checksum,
+    contentType,
   ])
+
+  console.log('to:', bytes, checksum)
   const binary = new Uint8Array(header.length * 4 + data.length)
   let offset = 0
   binary.set(new Uint8Array(header.buffer), offset)
   offset += header.length * 4
   binary.set(data, offset)
+
   return binary
 }
 
@@ -44,13 +68,16 @@ export function binaryToBlock(binary: Uint8Array): EncodedBlock {
     k,
     bytes,
     checksum,
-  ] = headerRest.slice(degree) as [number, number, number]
+    contentType,
+  ] = headerRest.slice(degree) as [number, number, number, number]
+  console.log('from:', bytes, checksum)
   const data = binary.slice(4 * (degree + 4))
 
   return {
     k,
     bytes,
     checksum,
+    contentType,
     indices,
     data,
   }
@@ -73,3 +100,18 @@ export function stringToUint8Array(str: string): Uint8Array {
 
   return data
 }
+
+/**
+ * Convert Content-Type string to @see ContentType enum.
+ *
+ * @param contentType Content-Type string
+ * @returns {ContentType} enum
+ */
+export function mapContentType(contentType: string): ContentType {
+  if (contentType.startsWith('text/'))
+    return ContentType.Text
+  if (contentType.startsWith('application/json'))
+    return ContentType.JSON
+
+  return ContentType.Binary
+}