feat: custom slice size

Author: LittleSound

app/components/Generate.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { fromUint8Array } from 'js-base64'
-import { blockToBinary, createEncoder, type EncodedBlock } from 'luby-transform'
+import { blockToBinary, createEncoder, type EncodedBlock, type LtEncoder } from 'luby-transform'
 import { renderSVG } from 'uqr'
 import { useKiloBytesNumberFormat } from '~/composables/intlNumberFormat'
 
@@ -9,12 +9,17 @@ const props = withDefaults(defineProps<{
   filename?: string
   contentType?: string
   maxScansPerSecond: number
+  sliceSize: number
 }>(), {
   maxScansPerSecond: 20,
+  sliceSize: 1000,
 })
 
 const count = ref(0)
-const encoder = createEncoder(props.data, 1000)
+let encoder: LtEncoder
+watch(() => [props.data, props.sliceSize], () => {
+  encoder = createEncoder(props.data, props.sliceSize)
+}, { immediate: true })
 const svg = ref<string>()
 const block = shallowRef<EncodedBlock>()
 

app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div max-w="full sm:250" mx-auto h-full w-full flex flex-col>
+  <div max-w="full sm:250" mx-auto w-full flex flex-col pb-20>
     <header flex flex-col gap-4 px-4 pb-4 pt-4>
       <nav flex items-center>
         <div w-40 flex="~" items-center gap-2 text-4xl>

app/pages/index.vue

@@ -10,6 +10,7 @@ enum ReadPhase {
 
 const error = ref<any>()
 const fps = ref(20)
+const sliceSize = ref(1000)
 const throttledFps = useDebounce(fps, 500)
 const readPhase = ref<ReadPhase>(ReadPhase.Idle)
 
@@ -70,13 +71,27 @@ async function onFileChange(file?: File) {
           w-full flex-1
         />
       </div>
+      <div w-full inline-flex flex-row items-center>
+        <span min-w-30>
+          <span pr-2 text-neutral-400>Slice Size</span>
+        </span>
+        <input
+          v-model.lazy="sliceSize"
+          type="number"
+          :min="1"
+          :max="2000"
+          border="~ gray/25 rounded-lg"
+          w-full flex-1 bg-transparent px2 py1 text-sm shadow-sm
+        >
+      </div>
     </div>
     <div
       v-if="readPhase === ReadPhase.Ready && data"
       h-full w-full flex justify-center
     >
       <Generate
         :max-scans-per-second="throttledFps"
+        :slice-size="sliceSize"
         :data="data"
         :filename="filename"
         :content-type="contentType"
@@ -85,8 +100,8 @@ async function onFileChange(file?: File) {
     </div>
     <InputFile
       v-else
-      h-full w-full
       text="neutral-600 dark:neutral-400"
+      aspect-1 h-full w-full rounded-lg
       @file="onFileChange"
     />
     <DropZone text="Drop File Here" @file="onFileChange" />