Gracefully handle unsupported capture

ui/capture-button.js

@@ -1,11 +1,12 @@
 import { h, Component, Fragment } from 'preact';
 
-/** @extends Component<{ getFile: () => Promise<File> }, { inProgress: boolean }> */
+/** @extends Component<{ getFile: () => Promise<File> }, { status: string }> */
 export class CaptureButton extends Component {
-  state = { inProgress: false };
+  state = { status: '📷' };
 
   handleCapture = async () => {
-    this.setState({ inProgress: true });
+    this.setState({ status: '⌛' });
+    try {
       let file = await this.props.getFile();
       let url = URL.createObjectURL(file);
       Object.assign(document.createElement('a'), {
@@ -13,7 +14,11 @@ export class CaptureButton extends Component {
         href: url
       }).click();
       URL.revokeObjectURL(url);
-    this.setState({ inProgress: false });
+      this.setState({ status: '📷' });
+    } catch (err) {
+      console.error(err);
+      this.setState({ status: '❌' });
+    }
   };
 
   render() {
@@ -23,10 +28,10 @@ export class CaptureButton extends Component {
       h('input', {
         type: 'button',
         id: 'capture',
-        class:
+        disabled: this.state.status !== '📷',
-          'pure-button' + (this.state.inProgress ? ' pure-button-active' : ''),
+        class: 'pure-button',
         onclick: this.handleCapture,
-        value: `${this.state.inProgress ? '⌛' : '📷'} Capture image`
+        value: `${this.state.status} Capture image`
       })
     );
   }