diff --git a/src/components/QrcodeCapture.vue b/src/components/QrcodeCapture.vue index 9fb8b293..b0887ffe 100644 --- a/src/components/QrcodeCapture.vue +++ b/src/components/QrcodeCapture.vue @@ -28,7 +28,7 @@ const onChangeInput = (event: Event) => { if (!(event.target instanceof HTMLInputElement) || !event.target.files) return for (const file of Array.from(event.target.files)) { - processFile(file, props.formats).then(detectedCodes => { + processFile(file, props.formats).then((detectedCodes) => { emit('detect', detectedCodes) }) } diff --git a/src/components/QrcodeDropZone.vue b/src/components/QrcodeDropZone.vue index 172e9fd4..19c5dac6 100644 --- a/src/components/QrcodeDropZone.vue +++ b/src/components/QrcodeDropZone.vue @@ -24,7 +24,7 @@ const props = defineProps({ const emit = defineEmits(['detect', 'dragover', 'error']) // methods -const onDetect = async (promise : Promise) => { +const onDetect = async (promise: Promise) => { try { const detectedCodes = await promise emit('detect', detectedCodes) diff --git a/src/components/QrcodeStream.vue b/src/components/QrcodeStream.vue index d3bed81e..4a369a7f 100644 --- a/src/components/QrcodeStream.vue +++ b/src/components/QrcodeStream.vue @@ -7,7 +7,7 @@ The video element is at the very bottom, the pause frame canvas is above it, the tracking layer is yet above and finally at the very top is the slot overlay. - --> + --> - + - +
- +
diff --git a/src/misc/callforth.ts b/src/misc/callforth.ts index 94647417..80cff8da 100644 --- a/src/misc/callforth.ts +++ b/src/misc/callforth.ts @@ -2,7 +2,7 @@ export const eventOn = ( eventTarget: EventTarget, successEvent: string, errorEvent = 'error' -) : Promise => { +): Promise => { let $resolve: (value: Event) => void let $reject: (reason?: Event) => void diff --git a/src/misc/errors.ts b/src/misc/errors.ts index 51c27aef..7f08e324 100644 --- a/src/misc/errors.ts +++ b/src/misc/errors.ts @@ -26,7 +26,9 @@ export class InsecureContextError extends Error { export class StreamLoadTimeoutError extends Error { constructor() { - super('Loading camera stream timed out after 3 seconds. If you are on iOS in PWA mode, this is a known issue (see https://github.com/gruhn/vue-qrcode-reader/issues/298)') + super( + 'Loading camera stream timed out after 3 seconds. If you are on iOS in PWA mode, this is a known issue (see https://github.com/gruhn/vue-qrcode-reader/issues/298)' + ) this.name = 'StreamLoadTimeoutError' } diff --git a/src/misc/scanner.ts b/src/misc/scanner.ts index 91cca311..eca15aac 100644 --- a/src/misc/scanner.ts +++ b/src/misc/scanner.ts @@ -7,7 +7,7 @@ export const setScanningFormats = (formats: BarcodeFormat[]) => { barcodeDetector = new BarcodeDetector({ formats }) } -type ScanHandler = (_ : DetectedBarcode[]) => void +type ScanHandler = (_: DetectedBarcode[]) => void /** * Continuously extracts frames from camera stream and tries to read @@ -20,16 +20,17 @@ export const keepScanning = async ( locateHandler, minDelay, formats - }: { detectHandler: ScanHandler; locateHandler: ScanHandler; minDelay: number, formats : BarcodeFormat[] } + }: { + detectHandler: ScanHandler + locateHandler: ScanHandler + minDelay: number + formats: BarcodeFormat[] + } ) => { barcodeDetector = new BarcodeDetector({ formats }) - + const processFrame = - (state: { - lastScanned: number - contentBefore: string[] - lastScanHadContent: boolean - }) => + (state: { lastScanned: number; contentBefore: string[]; lastScanHadContent: boolean }) => async (timeNow: number) => { if (videoElement.readyState > 1) { const { lastScanned, contentBefore, lastScanHadContent } = state @@ -38,23 +39,23 @@ export const keepScanning = async ( // the maximum possible frequency. In particular when visual tracking // is disabled. So we skip scanning a frame if `minDelay` has not passed // yet. Notice that this approach is different from doing a `setTimeout` - // after each scan. With `setTimeout`, delay and scanning are sequential: + // after each scan. With `setTimeout`, delay and scanning are sequential: // // |-- scan --|---- minDelay ----|-- scan --|---- minDelay ----| - // + // // Instead we do it concurrently: // // |---- minDelay ----|---- minDelay ----|---- minDelay ----| // |-- scan --| |-- scan --| |-- scan --| // - // Let's say `minDelay` is 40ms, then we scan every 40ms as long as - // scanning itself does not take more than 40ms. In particular when - // visual tracking is enabled, that means we can repaint the tracking - // canvas every 40ms. So we paint + // Let's say `minDelay` is 40ms, then we scan every 40ms as long as + // scanning itself does not take more than 40ms. In particular when + // visual tracking is enabled, that means we can repaint the tracking + // canvas every 40ms. So we paint // // 1000ms / 40ms = 25fps (frames per second) // - // 24fps is the minimum frame-rate that is perceived as a continuous + // 24fps is the minimum frame-rate that is perceived as a continuous // animation. We target 25fps just because 24 doesn't divide 1000ms // evenly. if (timeNow - lastScanned < minDelay) { @@ -69,7 +70,7 @@ export const keepScanning = async ( // // Implicitly we also don't emit a `detect` event if `detectedCodes` is an // empty array. - const anyNewCodesDetected = detectedCodes.some(code => { + const anyNewCodesDetected = detectedCodes.some((code) => { return !contentBefore.includes(code.rawValue) }) @@ -103,7 +104,7 @@ export const keepScanning = async ( // a `detect` event in such a case. So we don't reset `contentBefore`, // if we detect nothing, only if we detect something new. contentBefore: anyNewCodesDetected - ? detectedCodes.map(code => code.rawValue) + ? detectedCodes.map((code) => code.rawValue) : contentBefore } @@ -132,7 +133,10 @@ const imageElementFromUrl = async (url: string) => { return image } -export const processFile = async (file: File, formats: BarcodeFormat[] = ['qr_code']) : Promise => { +export const processFile = async ( + file: File, + formats: BarcodeFormat[] = ['qr_code'] +): Promise => { const barcodeDetector = new BarcodeDetector({ formats }) @@ -140,7 +144,10 @@ export const processFile = async (file: File, formats: BarcodeFormat[] = ['qr_co return await barcodeDetector.detect(file) } -export const processUrl = async (url: string, formats: BarcodeFormat[] = ['qr_code']) : Promise => { +export const processUrl = async ( + url: string, + formats: BarcodeFormat[] = ['qr_code'] +): Promise => { const barcodeDetector = new BarcodeDetector({ formats }) diff --git a/src/misc/util.ts b/src/misc/util.ts index 8c7e48e2..890dbed3 100644 --- a/src/misc/util.ts +++ b/src/misc/util.ts @@ -1,4 +1,3 @@ - /** * Takes a function `action` and returns a new function, that behaves * like action but when called a second time does nothing. @@ -20,28 +19,28 @@ export const indempotent = (action: (x: any) => T) => { } /** - * Throws an error if the `condition` in the first argument is `false`. - * This function is useful to make assumptions explicit. For example, - * let's say we have a variable - * + * Throws an error if the `condition` in the first argument is `false`. + * This function is useful to make assumptions explicit. For example, + * let's say we have a variable + * * const value : string | undefined = ... * * but from the context we know that it can actually never be `undefined`. - * We can access attributes of `value` with + * We can access attributes of `value` with * * value?.length * - * but if the assumption is actually broken, we can a silent error. + * but if the assumption is actually broken, we can a silent error. * In contrast, with - * + * * assert(value !== undefined, 'reason why we assume value always defined') * value.length // no type error * - * We make the assumption explicit and force a laud error. Also the type - * check can narrow the type of `value` to `string` after the `assert` and we + * We make the assumption explicit and force a laud error. Also the type + * check can narrow the type of `value` to `string` after the `assert` and we * can access properties without type error. */ -export function assert(condition : boolean, failureMessage? : string): asserts condition { +export function assert(condition: boolean, failureMessage?: string): asserts condition { if (condition === false) { throw new Error(failureMessage ?? 'assertion failure') }