feat(ui): display error on scan page if camera permissions not grante…

…d, display button to open app settings -- requesting permissions every time not working :(
holochain-apps · Oct 16, 2024 · d6e85c2 · d6e85c2
1 parent ee79f12
commit d6e85c2
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 19 deletions.
diff --git a/ui/src/lib/svgIcons.ts b/ui/src/lib/svgIcons.ts
@@ -32,4 +32,5 @@ export const svgIcons : { [key: string] : string } = {
   write: '<svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><path d="M33.4084 4.59165C31.6667 2.84998 28.6584 2.84998 26.7584 4.59165L13.9334 17.1C12.825 18.2083 12.0334 19.6333 11.7167 21.2167L11.0834 24.7C10.925 25.175 11.0834 25.8083 11.5584 26.125C11.875 26.4417 12.1917 26.6 12.6667 26.6H12.9834L16.4667 25.9667C18.05 25.65 19.475 24.8583 20.5834 23.75L33.4084 11.0833C34.3584 10.2917 34.8334 9.02498 34.8334 7.75832C34.8334 6.49165 34.3584 5.38332 33.4084 4.59165ZM18.525 21.375C17.8917 22.0083 16.9417 22.4833 15.9917 22.6417L14.725 22.9583L15.0417 21.85C15.2 20.9 15.675 20.1083 16.4667 19.3167L26.2834 9.65832L28.5 11.7167L18.525 21.375ZM31.1917 8.86665L30.5584 9.49998L28.3417 7.44165L28.975 6.80832C29.2917 6.49165 29.7667 6.33332 30.0834 6.33332C30.5584 6.33332 30.875 6.49165 31.1917 6.80832C31.5084 7.12498 31.6667 7.44165 31.6667 7.75832C31.6667 8.07498 31.6667 8.54998 31.1917 8.86665Z" /><path d="M31.6667 15.675C30.7167 15.675 30.0833 16.3083 30.0833 17.2583V25.3333C30.0833 28.025 28.025 30.0833 25.3333 30.0833H12.6667C9.975 30.0833 7.91667 28.025 7.91667 25.3333V12.6667C7.91667 9.975 9.975 7.91667 12.6667 7.91667H20.5833C21.5333 7.91667 22.1667 7.28333 22.1667 6.33333C22.1667 5.38333 21.5333 4.75 20.5833 4.75H12.6667C8.23333 4.75 4.75 8.23333 4.75 12.6667V25.3333C4.75 29.7667 8.23333 33.25 12.6667 33.25H25.3333C29.7667 33.25 33.25 29.7667 33.25 25.3333V17.2583C33.25 16.4667 32.6167 15.675 31.6667 15.675Z" /></svg>',
   x: '<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" d="M17.6234 2.19485C18.1255 1.69275 18.1255 0.87868 17.6234 0.376577C17.1213 -0.125526 16.3073 -0.125526 15.8051 0.376577L9 7.18173L2.19485 0.376577C1.69275 -0.125526 0.87868 -0.125526 0.376577 0.376577C-0.125526 0.87868 -0.125526 1.69275 0.376577 2.19485L7.18173 9L0.376577 15.8051C-0.125526 16.3073 -0.125526 17.1213 0.376577 17.6234C0.87868 18.1255 1.69275 18.1255 2.19485 17.6234L9 10.8183L15.8051 17.6234C16.3073 18.1255 17.1213 18.1255 17.6234 17.6234C18.1255 17.1213 18.1255 16.3073 17.6234 15.8051L10.8183 9L17.6234 2.19485Z" /></svg>',
   qrCodeScan: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="evenodd" d="M4 4h6v6H4zm16 0v6h-6V4zm-6 11h2v-2h-2v-2h2v2h2v-2h2v2h-2v2h2v3h-2v2h-2v-2h-3v2h-2v-4h3zm2 0v3h2v-3zM4 20v-6h6v6zM6 6v2h2V6zm10 0v2h2V6zM6 16v2h2v-2zm-2-5h2v2H4zm5 0h4v4h-2v-2H9zm2-5h2v4h-2zM2 2v4H0V2a2 2 0 0 1 2-2h4v2zm20-2a2 2 0 0 1 2 2v4h-2V2h-4V0zM2 18v4h4v2H2a2 2 0 0 1-2-2v-4zm20 4v-4h2v4a2 2 0 0 1-2 2h-4v-2z"/></svg>',
+  warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="evenodd" d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"/></svg>',
 }
diff --git a/ui/src/lib/translations/en/common.json b/ui/src/lib/translations/en/common.json
@@ -25,5 +25,7 @@
   "welcome": "Welcome",
   "welcome_text_1": "On Volla Messages, your data is only shared with the people you message with.",
   "welcome_text_2": "Private, encrypted and secured by keys only you control.",
-  "what_is_your_name": "What is your name?"
+  "what_is_your_name": "What is your name?",
+  "need_camera_permission": "Camera permission is required to scan codes.",
+  "open_app_settings": "Open App Settings"
 }
diff --git a/ui/src/routes/scan/+page.svelte b/ui/src/routes/scan/+page.svelte
@@ -1,40 +1,41 @@
 <script lang="ts">
-  import { scan, cancel, checkPermissions, requestPermissions, Format } from '@tauri-apps/plugin-barcode-scanner'
+  import { scan, cancel, checkPermissions, requestPermissions, openAppSettings,  Format } from '@tauri-apps/plugin-barcode-scanner'
   import Button from '$lib/Button.svelte';
   import { t } from '$lib/translations';
   import { scanStore } from '$store/ScanStore';
   import { setBackgroundColor } from '$lib/background';
-  
+  import { onDestroy, onMount } from 'svelte';
+  import SvgIcon from '$lib/SvgIcon.svelte';
+
   let needsPermission = false;
 
   $: isSupported = scanStore.isSupported;
 
   async function ensurePermissions() {
-    const permissionsState = await checkPermissions();
-    if(permissionsState === "prompt") {
-      try {
-        await requestPermissions();
-      } catch(e) {
-        console.error(e);
-        needsPermission = true;
-      }
-    } else {
-      needsPermission = true;
+    let permissionsState = await checkPermissions();
+    if(permissionsState === "granted") return;
+
+    try {
+      permissionsState = await requestPermissions();
+      if(permissionsState === "granted") return;
+    } catch(e) {
+      console.error('requestPermissions error', e);
     }
+
+    needsPermission = true;
   }
 
   async function executeScan() {
     try {
       const res = await scan({ windowed: true, formats: [Format.QRCode] });
       scanSuccess(res.content);
     } catch (e) {
-      console.error(e);
+      console.error('executeScan error', e);
     }
   }
   
   function scanSuccess(value: string) {
     scanStore.value.set(value);
-    resetBackgroundColor();
     scanStore.complete();
   }
 
@@ -45,8 +46,6 @@
     } catch(e) {
       console.error(e);
     }
-
-    resetBackgroundColor();
     scanStore.complete();
   }
 
@@ -55,25 +54,57 @@
     await executeScan();
   }
 
+
   load();
+
+  // tauri-plugin-barcode-scanner is launched in its own View BEHIND the current webview
+  // Thus we must set the body background color to transparent for this page only,
+  // to expose the View behind it.
   let resetBackgroundColor = setBackgroundColor('transparent');
+  onDestroy(() => {
+    resetBackgroundColor();
+  });
 </script>
 
 {#if $isSupported}
   <div class="z-10 fixed top-0 left-0 w-screen h-screen text-black">
     <div class="flex flex-col w-screen h-screen justify-center items-center">
 
       <!-- Scanning Area -->
-      <div class="w-64 h-64 border-solid border-white border-2 rounded-lg shadow-full"></div>
+      <div class="w-64 h-64 border-solid border-white border-2 rounded-lg shadow-full">
+        {#if needsPermission}
+          <div class="h-full w-full flex justify-center items-center">
+            <SvgIcon icon='warning' color="%232e2e2e" size='120' />
+          </div>
+        {/if}
+      </div>
 
       <!-- Action Buttons -->
-      <div class="my-8">
+      {#if needsPermission}
+        <div class="mt-4">
+          <p class='text-error-500 text-sm mt-2'>{$t('common.need_camera_permissions')}</p>
+        </div>
+      {/if}
+
+      <div class="my-8 flex justify-center items-center space-x-4">
         <Button
           moreClasses='w-36 justify-center !variant-filled-tertiary dark:!variant-filled-secondary'
           onClick={() => scanCancel()}
         >
           <strong>{$t('common.cancel')}</strong>
         </Button>
+
+        {#if needsPermission}
+          <Button
+            moreClasses='w-36 justify-center !variant-filled-tertiary dark:!variant-filled-secondary'
+            onClick={() => {
+              scanCancel();
+              openAppSettings();
+            }}
+          >
+            <strong>{$t('common.open_app_settings')}</strong>
+          </Button>
+        {/if}
       </div>
     </div>
   </div>