From 91501ba477ed3d45eb7a80eb09b25a7e84335651 Mon Sep 17 00:00:00 2001
From: Mathieu Leplatre <mathieu@mozilla.com>
Date: Sun, 26 Nov 2017 01:08:56 +0100
Subject: [PATCH] Add scanning and flash effects

---
 docs/app.js    | 12 +++++++++++-
 docs/style.css | 27 +++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/docs/app.js b/docs/app.js
index 9a49084e..8375bbe4 100644
--- a/docs/app.js
+++ b/docs/app.js
@@ -8,15 +8,25 @@ var app = new Vue({
   },
   mounted: function () {
     var self = this;
-    self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
+    var preview = document.getElementById('preview');
+    var previewClassname = 'preview-container active';
+
+    self.scanner = new Instascan.Scanner({ video: preview, scanPeriod: 5 });
     self.scanner.addListener('scan', function (content, image) {
       self.scans.unshift({ date: +(Date.now()), content: content });
+
+      preview.parentNode.className = previewClassname + ' flash';
+      setTimeout(function() {
+        preview.parentNode.className = previewClassname;
+      }, 1200);
     });
+
     Instascan.Camera.getCameras().then(function (cameras) {
       self.cameras = cameras;
       if (cameras.length > 0) {
         self.activeCameraId = cameras[0].id;
         self.scanner.start(cameras[0]);
+        preview.parentNode.className = previewClassname;
       } else {
         console.error('No cameras found.');
       }
diff --git a/docs/style.css b/docs/style.css
index a7b51ade..68116be9 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -75,3 +75,30 @@ body, html {
   width: 100%;
   overflow: hidden;
 }
+
+@keyframes scanner {
+  from { background-position: center 0%; }
+  to { background-position: center 90%; }
+}
+
+@keyframes flash {
+ 0% { background-color: #ffffffff }
+ 100% { background-color: #ffffff05; }
+}
+
+.preview-container.active:after {
+  content: "";
+  position: absolute;
+  min-width: 100%;
+  min-height: 100%;
+
+  animation: scanner 5s linear infinite;
+  background-size: 50% 10%;
+  background-image: linear-gradient(0deg, yellow 0%, transparent 10%);
+  background-position: center 90%;
+  background-repeat: no-repeat;
+}
+
+.preview-container.flash:after {
+  animation: flash 1s;
+}