Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#1318] Actual 1/2: Enable “Scan QR” button only if camera available #1732

Merged
merged 4 commits into from
Nov 29, 2018

Conversation

ranbena
Copy link
Contributor

@ranbena ranbena commented Nov 28, 2018

Fixes #1318.

tl;dr The actual feature work

NOTICE: This PR depends on #1730 and #1731 to be merged so defer review till then plz.

The #1318 Pull Request stack

  1. ([#1318] PrepWork 1/3: Added util/poll.js unit tests #1730) PrepWork 1/3: Added util/poll.js unit tests
  2. ([#1318] PrepWork 2+3/3: Added cancellable ability to util/poll.js #1731) PrepWork 2/3: Made util/poll.js cancellable with cancellablePoll
  3. ([#1318] PrepWork 2+3/3: Added cancellable ability to util/poll.js #1731) PrepWork 3/3: Added cancellablePoll unit tests
  4. ([#1318] Actual 1/2: Enable “Scan QR” button only if camera available #1732) Actual 1/2: Enable “Scan QR” button only if camera available ☜☜☜ YOU ARE HERE
  5. ([#1318] Actual 2/2: Added camera availability unit tests #1733) Actual 2/2: Added camera availability unit tests

What's this commit about?

The main feature finally. Basically, once the Private Key Login tab is clicked, the "Scan QR" button isn't enabled until a camera source is found (not "active" but rather "available" in the OS).

This enhancement to LoginPrivateKey is implemented with an HOC withCameraAvailability which adds a prop cameraAvailable to the wrapped component and automatically toggles the boolean value according to actual camera availability.

The availability is determined depending on navigator.mediaDevices.enumerateDevices(). This required updating Flow's BOM declarations (this browser feature isn't yet supported in IE 😪...)

The listener is implemented with the util/poll.js polling mechanism. When the state of availability changes (for instance, a usb camera was connected), the polling ends, and another is set listening to the opposite value (when the camera is disconnected). Eventually, polling is stopped when component is unmounted.

LETS SEE IT IN ACTION
ezgif com-video-to-gif

type Props = {}

// $FlowFixMe
export default function withCameraAvailability(Component) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome use case for a HOC 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants