Allow settings for camera (#183)

* Allow settings for camera

* Bump deps

* Linting

* Add settings listener

packages/extension-ui/src/Popup/Settings/index.tsx

@@ -10,9 +10,15 @@ import { Button, Dropdown, Header } from '../../components';
 import { windowOpen } from '../../messaging';
 import { Back } from '../../partials';
 
+interface Option {
+  text: string;
+  value: string;
+}
+
 // There are probably better ways, but since we set the popup size, use that
 const isPopup = window.innerWidth <= 480;
-const options = settings.availablePrefixes.map(({ text, value }): { text: string; value: string } => ({
+const cameraOptions = settings.availableCamera.map(({ text, value }): Option => ({ text, value: `${value}` }));
+const prefixOptions = settings.availablePrefixes.map(({ text, value }): Option => ({
   text: value === -1
     ? 'Default (Substrate or as specified)'
     : text,
@@ -20,14 +26,21 @@ const options = settings.availablePrefixes.map(({ text, value }): { text: string
 }));
 
 export default function Settings (): React.ReactElement<{}> {
+  const [camera, setCamera] = useState(settings.camera);
   const [prefix, setPrefix] = useState(`${settings.prefix}`);
 
+  const _onChangeCamera = (camera: string): void => {
+    setCamera(camera);
+
+    settings.set({ camera });
+  };
+
   // FIXME check against index, we need a better solution
   const _onChangePrefix = (value: string): void => {
     const prefix = parseInt(value, 10);
 
-    setPrefix(value);
     setSS58Format(prefix === -1 ? 42 : prefix);
+    setPrefix(value);
 
     settings.set({ prefix });
   };
@@ -39,9 +52,15 @@ export default function Settings (): React.ReactElement<{}> {
       <Dropdown
         label='display addresses formatted for'
         onChange={_onChangePrefix}
-        options={options}
+        options={prefixOptions}
         value={`${prefix}`}
       />
+      <Dropdown
+        label='external QR accounts and access'
+        onChange={_onChangeCamera}
+        options={cameraOptions}
+        value={camera}
+      />
       {isPopup && (
         <Button
           label='Open extension in new window'

packages/extension-ui/src/Popup/index.tsx

@@ -23,8 +23,19 @@ import Settings from './Settings';
 import Signing from './Signing';
 import Welcome from './Welcome';
 
+// load the ui settings, actually only used for address prefix atm
+// probably overkill (however can replace once we have actual others)
+const { prefix } = settings.get();
+
+// FIXME Duplicated in Settings, horrible...
+setSS58Format(prefix === -1 ? 42 : prefix);
+
 // Request permission for video, based on access we can hide/show import
-async function requestMediaAccess (): Promise<boolean> {
+async function requestMediaAccess (cameraOn: boolean): Promise<boolean> {
+  if (!cameraOn) {
+    return false;
+  }
+
   try {
     await navigator.mediaDevices.getUserMedia({ video: true });
 
@@ -36,16 +47,10 @@ async function requestMediaAccess (): Promise<boolean> {
   return false;
 }
 
-// load the ui settings, actually only used for address prefix atm
-// probably overkill (however can replace once we have actual others)
-const { prefix } = settings.get();
-
-// FIXME Duplicated in Settings, horrible...
-setSS58Format(prefix === -1 ? 42 : prefix);
-
 export default function Popup (): React.ReactElement<{}> {
   const [accounts, setAccounts] = useState<null | AccountJson[]>(null);
   const [authRequests, setAuthRequests] = useState<null | AuthorizeRequest[]>(null);
+  const [cameraOn, setCameraOn] = useState(settings.get().camera === 'on');
   const [mediaAllowed, setMediaAllowed] = useState(false);
   const [signRequests, setSignRequests] = useState<null | SigningRequest[]>(null);
   const [isWelcomeDone, setWelcomeDone] = useState(false);
@@ -60,14 +65,20 @@ export default function Popup (): React.ReactElement<{}> {
 
   useEffect((): void => {
     Promise.all([
-      requestMediaAccess().then(setMediaAllowed),
       subscribeAccounts(setAccounts),
       subscribeAuthorize(setAuthRequests),
       subscribeSigning(setSignRequests)
     ]).catch((error: Error) => console.error(error));
+
+    settings.on('change', ({ camera }): void => setCameraOn(camera === 'on'));
+
     _onAction();
   }, []);
 
+  useEffect((): void => {
+    requestMediaAccess(cameraOn).then(setMediaAllowed);
+  }, [cameraOn]);
+
   const Root = isWelcomeDone
     ? authRequests && authRequests.length
       ? Authorize
@@ -81,7 +92,7 @@ export default function Popup (): React.ReactElement<{}> {
       <ActionContext.Provider value={_onAction}>
         <AccountContext.Provider value={accounts}>
           <AuthorizeContext.Provider value={authRequests}>
-            <MediaContext.Provider value={mediaAllowed}>
+            <MediaContext.Provider value={cameraOn && mediaAllowed}>
               <SigningContext.Provider value={signRequests}>
                 <Switch>
                   <Route path='/account/create' component={Create} />