From f8a7abf88727e1cbfc77e2cd0fa4596e06445102 Mon Sep 17 00:00:00 2001
From: Sciuridae0603 <Sciuridae0603@gmail.com>
Date: Mon, 3 Aug 2020 21:34:59 +0800
Subject: [PATCH 1/3] Change qr-scanner to vue-qrcode-reader lib

---
 package-lock.json            | 27 +++++++++++++----
 package.json                 |  2 +-
 src/components/QRScanner.vue | 58 ++++++++++++------------------------
 src/views/Bingo.vue          |  2 +-
 src/views/Reward.vue         |  2 +-
 src/views/Stamp.vue          |  2 +-
 vue.config.js                |  5 ----
 7 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3785bf3..204ecca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4196,6 +4196,11 @@
         "caller-callsite": "^2.0.0"
       }
     },
+    "callforth": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/callforth/-/callforth-0.3.1.tgz",
+      "integrity": "sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA=="
+    },
     "callsites": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
@@ -10761,11 +10766,6 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
-    "qr-scanner": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/qr-scanner/-/qr-scanner-1.1.1.tgz",
-      "integrity": "sha512-vZmtaIpxx4rqnrg4iX62pQJ12bcIpfTEe/hL4Pr5PwQ/fih8W+ErfAZVFnnrdipeDC6L+5BfzMIqs/s6SYi4WA=="
-    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
@@ -13090,6 +13090,23 @@
         }
       }
     },
+    "vue-qrcode-reader": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-2.3.11.tgz",
+      "integrity": "sha512-5A/zeGpIG8ky1GHIv+L6QTlvyugilRmskQEOppa4+lQ4MVKLVeL55EYnnBw+YQ0N45LBVcUwBLr//AHjdfkmZA==",
+      "requires": {
+        "callforth": "^0.3.1",
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+          "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+        }
+      }
+    },
     "vue-router": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",
diff --git a/package.json b/package.json
index 9b5bcec..c90ce5d 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,9 @@
   "dependencies": {
     "axios": "^0.18.1",
     "core-js": "^3.4.4",
-    "qr-scanner": "^1.1.1",
     "vue": "^2.6.6",
     "vue-i18n": "^8.0.0",
+    "vue-qrcode-reader": "^2.3.11",
     "vue-router": "^3.0.1",
     "vuex": "^3.1.1"
   },
diff --git a/src/components/QRScanner.vue b/src/components/QRScanner.vue
index 181bf50..47043b6 100644
--- a/src/components/QRScanner.vue
+++ b/src/components/QRScanner.vue
@@ -3,28 +3,28 @@
   <center>
       <h2 class="ma-0" v-if=" title != '' ">{{ title }}</h2>
       <p role="subTitle" v-if="subTitle !== '' ">{{ subTitle }}</p>
+      <h6 class="ma-0" v-if=" !noResult " role="result">{{ result }}</h6>
       <div v-if="!isWebRTCSupported">
         <p>連 iOS 都支援 WebRTC 了，您是不是該換裝置了呢？</p>
       </div>
       <template v-else>
-        <div v-show="enable">
-          <video ref="preview" :width="previewWidth" autoplay playsinline></video>
+        <div :style="{width:previewWidth}" v-show="enable">
+          <qrcode-stream @decode="scannerCallback"></qrcode-stream>
         </div>
         <div v-show="!enable">
-        <button id="enableButton" class="OpenCamera" @click="startScanner"></button>
-      </div>
+          <button id="enableButton" class="OpenCamera" @click="startScanner"></button>
+        </div>
       </template>
-      <h6 class="ma-0" v-if=" !noResult ">{{ result }}</h6>
     </center>
   </div>
 </template>
 
 <script>
-import QrScanner from 'qr-scanner'
-import _ from 'lodash'
+import { QrcodeStream } from 'vue-qrcode-reader'
 
 export default {
   name: 'QRScanner',
+  components: { QrcodeStream },
   props: {
     title: {
       type: String,
@@ -43,10 +43,9 @@ export default {
   },
   data () {
     return {
-      result: 'Loading...',
-      scanner: null,
       previewWidth: null,
-      enable: false
+      enable: false,
+      result: null
     }
   },
   computed: {
@@ -60,12 +59,6 @@ export default {
       return window.navigator.userAgent.match(/iPhone|iPad|iPod/i)
     }
   },
-  watch: {
-    result (newValue) {
-      if (newValue === null) return
-      this.emitResult(this, newValue)
-    }
-  },
   mounted () {
     if (!this.isIOS) {
       this.startScanner()
@@ -74,24 +67,18 @@ export default {
   methods: {
     scannerCallback (result) {
       this.result = result
+      this.$emit('success', result)
+      let oldValue = result
+      setTimeout(_ => {
+        if (oldValue === this.result) {
+          this.result = ''
+        }
+      }, 5000)
     },
-    emitResult: _.debounce((that, newValue) => {
-      console.warn('emit result, is', newValue)
-      if (that.isIOS) {
-        that.disableScanner()
-      }
-      that.result = null
-      that.$emit('success', newValue)
-    }, 100),
     startScanner () {
       if (this.isWebRTCSupported) {
         this.enable = true
-
-        QrScanner.WORKER_PATH = 'js/qr-scanner-worker.min.js'
-        this.scanner = new QrScanner(this.$refs.preview, this.scannerCallback)
-        this.scanner.setInversionMode('both')
         this.setPreviewSize()
-        this.scanner.start()
       }
     },
     setPreviewSize () {
@@ -111,17 +98,7 @@ export default {
           this.previewWidth = (Math.round(height * 0.4 * aspect)) + 'px'
         }
       }
-    },
-    disableScanner () {
-      if (this.scanner) {
-        this.enable = false
-        this.scanner.destroy()
-        this.scanner = null
-      }
     }
-  },
-  beforeDestroy () {
-    this.disableScanner()
   }
 }
 </script>
@@ -144,4 +121,7 @@ export default {
 
   [role="subTitle"]
     margin-bottom: 3rem
+
+  [role="result"]
+    font-size: 1rem
 </style>
diff --git a/src/views/Bingo.vue b/src/views/Bingo.vue
index 89b388a..e3abde4 100644
--- a/src/views/Bingo.vue
+++ b/src/views/Bingo.vue
@@ -5,7 +5,7 @@
     <template v-if="showScanner">
       <qrcode-reader
         :enable="showScanner"
-        :noResult="true"
+        :noResult="false"
         title
         :subTitle="$t('scan_qrcode')"
         @success="onScanSuccess"
diff --git a/src/views/Reward.vue b/src/views/Reward.vue
index df3c606..6aafa57 100644
--- a/src/views/Reward.vue
+++ b/src/views/Reward.vue
@@ -4,7 +4,7 @@
     <template v-if="showScanner">
       <qrcode-reader
         v-if="showScanner"
-        :noResult="true"
+        :noResult="false"
         title
         :subTitle="$t('scan_qrcode')"
         @success="onScanSuccess"
diff --git a/src/views/Stamp.vue b/src/views/Stamp.vue
index d5d20bf..8f6c508 100644
--- a/src/views/Stamp.vue
+++ b/src/views/Stamp.vue
@@ -14,7 +14,7 @@
     </template>
     <h6 role="detected" class="ma-0" v-if="playerToken">{{ $t('detected_qrcode_value_is', { value: playerToken.slice(0, 10) + playerToken.slice(10).replace(/[a-z0-9]/g, '*') }) }}</h6>
     <qrcode-reader
-        :noResult="true"
+        :noResult="false"
         @success="onScanSuccess"
         @error="onScanFail"
         role="stampScanner"
diff --git a/vue.config.js b/vue.config.js
index 79742cb..35f8bbd 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -26,11 +26,6 @@ module.exports = {
     config
       .plugin('copy')
       .tap(args => {
-        args[0].push({
-          from: path.join(__dirname, 'node_modules/qr-scanner/qr-scanner-worker.min.js'),
-          toType: 'dir',
-          to: path.join(__dirname, './dist/js')
-        })
         return args
       })
   },

From fb3cfed97b6f153a5ac11046be59645f47b184b4 Mon Sep 17 00:00:00 2001
From: Sciuridae0603 <Sciuridae0603@gmail.com>
Date: Fri, 7 Aug 2020 09:45:15 +0800
Subject: [PATCH 2/3] Add workaround for getCapabilities not exists

---
 src/components/QRScanner.vue | 3 ---
 src/main.js                  | 6 ++++++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/QRScanner.vue b/src/components/QRScanner.vue
index 47043b6..6fec369 100644
--- a/src/components/QRScanner.vue
+++ b/src/components/QRScanner.vue
@@ -20,11 +20,8 @@
 </template>
 
 <script>
-import { QrcodeStream } from 'vue-qrcode-reader'
-
 export default {
   name: 'QRScanner',
-  components: { QrcodeStream },
   props: {
     title: {
       type: String,
diff --git a/src/main.js b/src/main.js
index 13defdf..8f1860a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,8 +4,14 @@ import router from './router'
 import Components from './components'
 import i18n from './i18n'
 import store from './store'
+import VueQrcodeReader from 'vue-qrcode-reader'
 
 Vue.config.productionTip = false
+Vue.use(VueQrcodeReader)
+
+if (!MediaStreamTrack.prototype.getCapabilities) {
+  MediaStreamTrack.prototype.getCapabilities = () => {}
+}
 
 Object.keys(Components).forEach(key => {
   Vue.component(key, Components[key])

From 65e75886b6afe21195a8cf14f59b091014fd476c Mon Sep 17 00:00:00 2001
From: Sciuridae <sciuridae0603@gmail.com>
Date: Sat, 8 Aug 2020 19:15:10 +0800
Subject: [PATCH 3/3] Change v-show to v-if

---
 src/components/QRScanner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/QRScanner.vue b/src/components/QRScanner.vue
index 6fec369..8ac4b32 100644
--- a/src/components/QRScanner.vue
+++ b/src/components/QRScanner.vue
@@ -8,7 +8,7 @@
         <p>連 iOS 都支援 WebRTC 了，您是不是該換裝置了呢？</p>
       </div>
       <template v-else>
-        <div :style="{width:previewWidth}" v-show="enable">
+        <div :style="{width:previewWidth}" v-if="enable">
           <qrcode-stream @decode="scannerCallback"></qrcode-stream>
         </div>
         <div v-show="!enable">