diff --git a/src/app.postcss b/src/app.postcss index a8c0fc4b..c978705d 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -305,4 +305,12 @@ section.ae_quick_popover_small { } .fade_50:hover { opacity: 1; +} + + +.auth_view_only { + display: none; +} +.ae_root--auth_access .auth_view_only { + display: initial; } \ No newline at end of file diff --git a/src/lib/element_qr_scanner.svelte b/src/lib/element_qr_scanner.svelte index b2bce7d1..045fbfb9 100644 --- a/src/lib/element_qr_scanner.svelte +++ b/src/lib/element_qr_scanner.svelte @@ -5,6 +5,8 @@ import { createEventDispatcher, onDestroy, onMount } from 'svelte'; import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats} from 'html5-qrcode'; // *** Import Aether core variables and functions +import { api } from '$lib/api'; +import { ae_api } from '$lib/ae_stores'; // *** Import Aether core components // import Element_input from './element_input.svelte'; @@ -35,6 +37,9 @@ let qr_entered_badge_id: null|string = null; let show_qr_manual_entry: null|boolean = null; let disable_submit_badge_id_btn: boolean = true; +let user_media_status = 'not_requested'; + + // let max_results: number = 50; const dispatch = createEventDispatcher(); @@ -53,36 +58,52 @@ let qr_scan_cfg = { fps: qr_fps, qrbox: qr_viewfinder_width }; // 275 seems good onMount(() => { console.log('** Element Mounted: ** QR Scanner'); - // NOTE: This can only be done after the page has fully loaded. At least that is what my tests have shown so far. -2022-12-02 - if (start_qr_scanner) { - handle_start_qr_scanning(); - } - + // NOTE: We only want to trigger the scanning to start after the page has fully loaded. navigator.mediaDevices.getUserMedia({video: true}) .then(successCallback, errorCallback); + + // NOTE: This can only be done after the page has fully loaded. + // if (start_qr_scanner) { + // handle_start_qr_scanning(); + // } }); -onDestroy(() => { +onDestroy(async () => { console.log('** Element Destroyed: ** QR Scanner'); qr_scan_result = null; qr_found_text = null; - handle_stop_qr_scanning(); + await handle_stop_qr_scanning(); }); var successCallback = function(error: any) { console.log('Camera access allowed'); + user_media_status = 'allowed'; + + // let subject = 'Camera Access Allowed'; + // let message = error; + // send_init_confirm_email(subject, message); dispatch('qr_camera', { status: 'allowed', }); + + // NOTE: This can only be done after the page has fully loaded. + if (start_qr_scanner) { + handle_start_qr_scanning(); + } }; var errorCallback = function(error: any) { if (error.name == 'NotAllowedError') { console.log('Camera access not allowed!'); + user_media_status = 'denied'; + + // let subject = 'Camera Access Denied'; + // let message = error; + // send_init_confirm_email(subject, message); dispatch('qr_camera', { status: 'denied', @@ -103,13 +124,21 @@ var errorCallback = function(error: any) { function handle_start_qr_scanning() { console.log('*** handle_start_qr_scanning() ***'); + if (user_media_status == 'denied') { + console.log('Camera access not allowed!'); + return; + } else if (user_media_status == 'not_requested') { + console.log('Camera access not requested yet!'); + return; + } + qr_scan_result = null; qr_found_text = null; if (html5_qr_code) { console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...'); // html5_qr_code.clear(); - document.getElementById('qr_scanner_viewfinder').classList.remove('d_none'); + // document.getElementById('qr_scanner_viewfinder').classList.remove('d_none'); html5_qr_code = new Html5Qrcode( 'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] } @@ -128,7 +157,8 @@ function handle_start_qr_scanning() { // return; // } - html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error).then((ignore: any) => { + html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error) + .then((ignore: any) => { console.log('Scanning has started'); scanning_status = 'scanning'; return true; @@ -161,20 +191,17 @@ function handle_resume_qr_scanning() { } -function handle_stop_qr_scanning() { +async function handle_stop_qr_scanning() { if (html5_qr_code && html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) { console.log('Scanner is not started'); return; } - // qr_scan_result = null; - // qr_found_text = null; - // html5_qr_code.pause(); - html5_qr_code.stop().then((ignore) => { + await html5_qr_code.stop().then((ignore) => { console.log('Scanning has stopped'); - document.getElementById('qr_scanner_viewfinder').classList.add('d_none'); + // document.getElementById('qr_scanner_viewfinder').classList.add('d_none'); scanning_status = 'not_started'; }).then((ignore) => { // html5_qr_code = null; @@ -185,6 +212,7 @@ function handle_stop_qr_scanning() { }); // html5_qr_code = null; + return; } @@ -204,29 +232,7 @@ function handle_qr_scan_success(decoded_text, decoded_result) { }); // handle_pause_qr_scanning(); - handle_stop_qr_scanning(); - - // html5_qr_code.stop().then((ignore) => { - // console.log('Scanning has stopped'); - // scanning_status = 'not_started'; - // document.getElementById('qr_scanner_viewfinder').classList.add('d_none'); - - // qr_scan_result = decoded_text; - // qr_found_text = decoded_text; - - // dispatch('qr_scan_result', { - // result: qr_scan_result, - // entry_method: 'QR', - // }); - - // // qr_scan_result = null; - // // qr_found_text = null; - // return true; - // }).catch((err) => { - // console.log('There was an error while trying to stop the scanning'); - // return false; - // }); } @@ -277,6 +283,46 @@ function handle_qr_manual_entry() { qr_scan_result = null; qr_entered_text = null; } + + + + + +function send_init_confirm_email(subject, message) { + console.log(`*** send_init_confirm_email() *** ${subject}`); + + let to_email = 'scott.idem+skdev@oneskyit.com'; + + // let origin_url = encodeURI(`${data.url.origin}`); + + let full_subject = `${subject} Aether QR Scanner Debugging`; + + let body_html = ` +
Scott, +

This is an automatic debug email from the Aether QR scanner.

+
+ +
+ +
+ Message:
+ 
+    ${JSON.stringify(message)}
+
+
+ `; + + api.send_email({ + api_cfg: $ae_api, + from_email: 'noreply+ae_qr_debug@oneskyit.com', + from_name: 'AE QR Debug', + to_email: to_email, + subject: full_subject, + body_html: body_html, + }); +} + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5a03da4d..f0d838c1 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -22,7 +22,12 @@ onMount(() => { -
+
{ for_type={null} for_id={null} ds_name="Default: AE Hub - Site root page content HTML" + show_edit={false} class_li={$ae_sess.ds_loaded.hub__site__root_page_content === false ? 'hidden' : 'grow'} bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_content} /> -
+