Add start step to init user interaction

kevinvennitti · Sep 16, 2024 · d272bc4 · d272bc4
1 parent 293ce04
commit d272bc4
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 23 deletions.
diff --git a/core/main.css b/core/main.css
@@ -471,4 +471,47 @@ body[data-has-audio="1"][data-is-playing="0"] #pause-button {
   stroke-linecap: round !important;
   stroke-linejoin: round !important;
   border-radius:100px;
-} */
+} */
+
+#start {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,.8);
+  z-index:100;
+  transition: all 1000ms cubic-bezier(.32, .3, .12, .99);
+  color:white;
+  font-size:50px;
+
+}
+
+#start svg {
+  transform: translate(-50%, -50%);
+  position: absolute !important;
+  top: 50%;
+  left: 50%;
+  width: 96px;
+  height: 96px;
+  padding:24px;
+  border: solid 2px rgba(255, 255, 255, 0.3);
+  border-radius: 100%;
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 1000ms cubic-bezier(.32, .3, .12, .99);
+}
+
+body.can-scan #start {
+  opacity:0;
+  pointer-events: none;
+}
+
+body.can-scan #start svg {
+  transform: translate(-50%, -50%) scale(1.2);
+  opacity:0;
+}
diff --git a/index.html b/index.html
@@ -13,6 +13,13 @@
 
 <body data-has-audio="0" data-is-playing="0">
   <div id="video-container">
+
+    <div id="start">
+      <svg width="44" height="44" fill="none" viewBox="0 0 44 44">
+        <path fill="currentColor" d="M34.209 20.294c1.275.78 1.275 2.633 0 3.412L14.543 35.728c-1.332.815-3.043-.144-3.043-1.706V9.978c0-1.562 1.71-2.52 3.043-1.706L34.21 20.294Z" />
+      </svg>
+    </div>
+
     <video id="qr-video"></video>
 
     <div id="pulse"></div>
@@ -52,6 +59,8 @@
   <script type="module">
     import QrScanner from "./core/qr-scanner.min.js";
 
+    let CAN_SCAN = false;
+
     const body = document.body;
 
     const video = document.getElementById('qr-video');
@@ -88,34 +97,46 @@
 
     // ####### Web Cam Scanning #######
 
-    const scanner = new QrScanner(video, result => onResult(result), {
-      onDecodeError: error => {
-        // console.log(error);
-        // camQrResult.textContent = error;
-      },
-      preferredCamera: config.camera,
-      highlightScanRegion: config.highlightScanRegion || false,
-      highlightCodeOutline: config.highlightQRCodeOutline || false,
-    });
-
-    scanner.start().then(() => {
-      scanner._updateOverlay();
-    });
+    function init() {
+
+      const scanner = new QrScanner(video, result => onResult(result), {
+        onDecodeError: error => {
+          // console.log(error);
+          // camQrResult.textContent = error;
+        },
+        preferredCamera: config.camera,
+        highlightScanRegion: config.highlightScanRegion || false,
+        highlightCodeOutline: config.highlightQRCodeOutline || false,
+      });
+
+      scanner.start().then(() => {
+        scanner._updateOverlay();
+      });
+
+      // for debugging
+      window.scanner = scanner;
+
+      if (config.theme) {
+        const detections = {
+          'black-on-white': 'original',
+          'white-on-black': 'invert',
+          'both': 'both',
+        };
 
-    // for debugging
-    window.scanner = scanner;
+        scanner.setInversionMode(detections[config.theme]);
+      }
+    }
 
-    if (config.theme) {
-      const detections = {
-        'black-on-white': 'original',
-        'white-on-black': 'invert',
-        'both': 'both',
-      };
+    init();
 
-      scanner.setInversionMode(detections[config.theme]);
+    function enableScan() {
+      CAN_SCAN = true;
+      body.classList.add('can-scan');
     }
 
     function onResult(result) {
+      if (!CAN_SCAN) return;
+
       const code = result.data;
 
       let newAudio = new Audio('sounds/' + code + '.mp3');
@@ -150,6 +171,10 @@
       }
     }
 
+    document.getElementById('start').addEventListener('click', () => {
+      enableScan();
+    });
+
     document.getElementById('play-button').addEventListener('click', () => {
       if (audio !== null) {
         playAudio()