Skip to content

v0.1.2 — scannability and feedback fixes

Choose a tag to compare

@NiKrause NiKrause released this 28 Jul 18:27
f39fab5

A maintenance release for the demo. The published package is unchanged@le-space/libp2p-webrtc-qr@0.1.0 remains current on npm, and nothing in packages/webrtc-qr moved.

Live: https://webrtc-qr.le-space.de

Both fixes come from using the demo on an actual phone rather than in a desktop browser window.

The QR code was giving away a quarter of the screen

On a 390 px phone the code rendered at 316 px — the rest lost to card padding and page margins — so it had to be pinch-zoomed before a camera could resolve it. Which is the opposite of the point: the whole interaction is meant to be hold one screen up to another camera.

Module size is what decides whether a scan catches. On narrow viewports the code now breaks out of both paddings and spans the full viewport width.

before after
390 px phone 316 px 390 px
desktop cap 340 px 440 px
rendered resolution 768 px 1280 px

The resolution bump matters because a 3× phone showing the code full-bleed asks for over 1100 device pixels — upscaling a dense pattern blurs exactly the module edges a camera needs to find.

The demo README now says this outright instead of leaving it implicit: show the code as large as the screen allows. A squeezed code is the most common reason a scan fails, and it is the one thing a user can fix immediately.

"Create offer" looked dead

Gathering ICE candidates can take seconds, and until it finishes nothing appears on screen — so the button read as if it had never been pressed. The natural reaction is to press it again.

It now shows a spinner and "Creating offer…" while pending, keeps its width so the layout does not jump, announces itself with aria-busy, and is handed back in a finally so a failed offer does not leave it spinning forever.

Tests

26 tests, all gating the deploy: 18 unit, 6 browser end-to-end (two new), 2 Helia.

The pending-state test asserts the state was actually entered, not just that the end state is clean. With host-only ICE the spinner is too quick to catch mid-flight, so the page records that it happened — asserting only the final state would pass even if the pending state had been deleted entirely.

The phone test asserts the rendered QR width equals the viewport width, so the layout cannot silently regress.

Full changes in #4.