refactor(ui): wrapped formatter

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

app/components/Generate.vue

@@ -3,6 +3,7 @@ import type { EncodedBlock } from '~~/utils/lt-code'
 import { blockToBinary, createEncoder } from '~~/utils/lt-code'
 import { fromUint8Array } from 'js-base64'
 import { renderSVG } from 'uqr'
+import { useKiloBytesNumberFormat } from '~/composables/intlNumberFormat'
 
 const props = withDefaults(defineProps<{
   data: Uint8Array
@@ -20,6 +21,7 @@ const block = shallowRef<EncodedBlock>()
 
 const renderTime = ref(0)
 const framePerSecond = computed(() => 1000 / renderTime.value)
+const bytes = useKiloBytesNumberFormat(computed(() => ((block.value?.bytes || 0) / 1024).toFixed(2)))
 
 onMounted(() => {
   let frame = performance.now()
@@ -47,7 +49,7 @@ onMounted(() => {
         <span text-neutral-500>Total</span>
         <span text-right md:text-left>{{ block?.k }}</span>
         <span text-neutral-500>Bytes</span>
-        <span text-right md:text-left>{{ ((block?.bytes || 0) / 1024).toFixed(2) }} KB</span>
+        <span text-right md:text-left>{{ bytes }}</span>
         <span text-neutral-500>Bitrate</span>
         <span text-right md:text-left>{{ ((block?.bytes || 0) / 1024 * framePerSecond).toFixed(2) }} Kbps</span>
         <span text-neutral-500>Frame Count</span>

app/components/Scan.vue

@@ -4,6 +4,7 @@ import { readFileHeaderMetaFromBuffer } from '~~/utils/lt-code/binary-meta'
 
 import { toUint8Array } from 'js-base64'
 import QrScanner from 'qr-scanner'
+import { useKiloBytesNumberFormat } from '~/composables/intlNumberFormat'
 import { useBytesRate } from '~/composables/timeseries'
 import { CameraSignalStatus } from '~/types'
 
@@ -173,6 +174,9 @@ const filename = ref<string | undefined>()
 const contentType = ref<string | undefined>()
 const textContent = ref<string | undefined>()
 
+const bytesFormatted = useKiloBytesNumberFormat(computed(() => (bytes.value / 1024).toFixed(2)))
+const receivedBytesFormatted = useKiloBytesNumberFormat(computed(() => (receivedBytes.value / 1024).toFixed(2)))
+
 function getStatus() {
   const array = Array.from({ length: k.value }, () => 0)
   for (let i = 0; i < k.value; i++) {
@@ -342,9 +346,9 @@ function now() {
         <span text-neutral-500>Received blocks</span>
         <span text-right md:text-left>{{ decoder.encodedCount }}</span>
         <span text-neutral-500>Expected bytes</span>
-        <span text-right md:text-left>{{ (bytes / 1024).toFixed(2) }} KB</span>
+        <span text-right md:text-left>{{ bytesFormatted }} KB</span>
         <span text-neutral-500>Received bytes</span>
-        <span text-right md:text-left>{{ (receivedBytes / 1024).toFixed(2) }} KB ({{ bytes === 0 ? 0 : (receivedBytes / bytes * 100).toFixed(2) }}%)</span>
+        <span text-right md:text-left>{{ receivedBytesFormatted }} KB ({{ bytes === 0 ? 0 : (receivedBytes / bytes * 100).toFixed(2) }}%)</span>
         <span text-neutral-500>Time elapsed</span>
         <span text-right md:text-left>{{ k === 0 ? 0 : (((endTime || now()) - startTime) / 1000).toFixed(2) }}s</span>
         <span text-neutral-500>Average bitrate</span>

app/composables/intlNumberFormat.ts

@@ -0,0 +1,36 @@
+export function useNumberFormat(
+  value: MaybeRef<number | string> | ComputedRef<number | string>,
+  options?: {
+    locales?: Intl.LocalesArgument
+  } & Intl.NumberFormatOptions,
+) {
+  const opts = {
+    locales: options?.locales ?? 'en-US',
+    ...options,
+  }
+
+  const formatter = new Intl.NumberFormat(opts.locales, opts)
+  const val = toRef(value)
+
+  return computed(() => {
+    const parsedNum = Number.parseFloat(val.value as string)
+    if (Number.isNaN(parsedNum)) {
+      return formatter.format(0)
+    }
+
+    return formatter.format(parsedNum)
+  })
+}
+
+export function useKiloBytesNumberFormat(
+  value: MaybeRef<number | string> | ComputedRef<number | string>,
+  options?: {
+    locales?: Intl.LocalesArgument
+  } & Intl.NumberFormatOptions,
+) {
+  return useNumberFormat(value, {
+    ...options,
+    style: 'unit',
+    unit: 'kilobyte',
+  })
+}