chore(ui): bandwidth as composables

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

Author: nekomeowww

app/app.vue

@@ -20,6 +20,7 @@ body,
   height: 100vh;
   margin: 0;
   padding: 0;
+  overscroll-behavior: none;
 }
 
 html.dark {

app/components/Scan.vue

@@ -12,27 +12,8 @@ const props = withDefaults(defineProps<{
   height: 512,
 })
 
-const kiloBytesFormatter = new Intl.NumberFormat('en-US', {
-  style: 'unit',
-  unit: 'kilobyte-per-second',
-  unitDisplay: 'short',
-})
-
-// All Bandwidth calculation variables
-const bytesReceivedInLastSecond = ref(0)
-const currentValidBandwidth = ref(0)
-const currentValidBandwidthFormatted = computed(() => {
-  return kiloBytesFormatter.format(currentValidBandwidth.value)
-})
-// Valid Bandwidth calculation variables
-const validBytesReceivedInLastSecond = ref(0)
-const currentBandwidth = ref(0)
-const currentBandwidthFormatted = computed(() => {
-  return kiloBytesFormatter.format(currentBandwidth.value)
-})
-
-let lastUpdateTime = 0
-let animationFrameId: number | null = null
+const { bytesReceived: validBytesReceivedInLastSecond, currentFormatted: currentValidBandwidthFormatted } = useBandwidth()
+const { bytesReceived: bytesReceivedInLastSecond, currentFormatted: currentBandwidthFormatted } = useBandwidth()
 
 const { devices } = useDevicesList({
   requestPermissions: true,
@@ -78,16 +59,6 @@ onMounted(async () => {
   )
 })
 
-onMounted(() => {
-  animationFrameId = requestAnimationFrame(updateBandwidth)
-})
-
-onUnmounted(() => {
-  if (animationFrameId !== null) {
-    cancelAnimationFrame(animationFrameId)
-  }
-})
-
 function disconnectCamera() {
   stream?.getTracks().forEach(track => track.stop())
   stream = undefined
@@ -112,36 +83,6 @@ async function connectCamera() {
   }
 }
 
-function updateBandwidth(timestamp: number) {
-  const now = timestamp
-  const elapsedTime = now - lastUpdateTime
-
-  if (elapsedTime >= 1000) {
-    // Calculate bandwidth for the last second
-    currentValidBandwidth.value = Number.parseFloat(
-      (
-        (validBytesReceivedInLastSecond.value / 1024)
-        / (elapsedTime / 1000)
-      ).toFixed(2),
-    )
-
-    currentBandwidth.value = Number.parseFloat(
-      (
-        (bytesReceivedInLastSecond.value / 1024)
-        / (elapsedTime / 1000)
-      ).toFixed(2),
-    )
-
-    // Reset for the next second
-    validBytesReceivedInLastSecond.value = 0
-    bytesReceivedInLastSecond.value = 0
-
-    lastUpdateTime = now
-  }
-
-  requestAnimationFrame(updateBandwidth)
-}
-
 const chunks: SliceData[] = reactive([])
 
 const length = computed(() => chunks.find(i => i?.[1])?.[1] || 0)
@@ -268,7 +209,7 @@ watch(() => results.value.size, (size) => {
         </template>
       </div>
       <p absolute right-1 top-1 border border-gray:50 rounded-md bg-black:75 px2 py1 text-sm text-white font-mono shadow>
-        {{ shutterCount }} | {{ fps.toFixed(0) }} hz | {{ currentValidBandwidthFormatted }} (<span text-neutral-400>{{ currentBandwidthFormatted }}</span>)
+        {{ shutterCount }} | {{ fps.toFixed(0) }} hz | {{ currentValidBandwidthFormatted }} <span text-neutral-400>({{ currentBandwidthFormatted }})</span>
       </p>
     </div>
   </div>

app/composables/bandwidth.ts

@@ -0,0 +1,54 @@
+export function useBandwidth() {
+  const kiloBytesFormatter = new Intl.NumberFormat('en-US', {
+    style: 'unit',
+    unit: 'kilobyte-per-second',
+    unitDisplay: 'short',
+  })
+
+  const bytesReceived = ref(0)
+  const current = ref(0)
+  const animationFrameId = ref<number | null>(null)
+  const lastUpdateTime = ref(0)
+
+  const currentFormatted = computed(() => {
+    return kiloBytesFormatter.format(current.value)
+  })
+
+  function updateBandwidth(timestamp: number) {
+    const now = timestamp
+    const elapsedTime = now - lastUpdateTime.value
+
+    if (elapsedTime >= 1000) {
+      // Calculate bandwidth for the last second
+      current.value = Number.parseFloat(
+        (
+          (bytesReceived.value / 1024)
+          / (elapsedTime / 1000)
+        ).toFixed(2),
+      )
+
+      // Reset for the next second
+      bytesReceived.value = 0
+
+      lastUpdateTime.value = now
+    }
+
+    requestAnimationFrame(updateBandwidth)
+  }
+
+  onMounted(() => {
+    animationFrameId.value = requestAnimationFrame(updateBandwidth)
+  })
+
+  onUnmounted(() => {
+    if (animationFrameId.value !== null) {
+      cancelAnimationFrame(animationFrameId.value)
+    }
+  })
+
+  return {
+    bytesReceived,
+    current,
+    currentFormatted,
+  }
+}

app/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <main h-full>
-    <div flex flex-col gap-4 px-4 pb-2 pt-4>
+    <div flex flex-col gap-4 px-4 pb-4 pt-4>
       <h1 text-4xl>
         Qrs
       </h1>

app/pages/index.vue

@@ -62,11 +62,11 @@ async function onFileChange(file?: File) {
       </div>
     </div>
     <div v-if="readPhase === ReadPhase.Ready" h-full w-full flex justify-center>
-      <Generate :speed="speed" :data="data" min-h="[calc(100vh-224px)]" max-w="[calc(100vh-224px)]" h-full w-full />
+      <Generate :speed="speed" :data="data" min-h="[calc(100vh-250px)]" max-w="[calc(100vh-250px)]" h-full w-full />
     </div>
     <InputFile
       v-else
-      min-h="[calc(100vh-224px)]" h-full w-full
+      min-h="[calc(100vh-250px)]" h-full w-full
       text="neutral-600 dark:neutral-400"
       @file="onFileChange"
     >