feat: Setup countdown overlay

src/assets/css/2-components/_buttons.css

@@ -56,6 +56,19 @@
   background: var(--btn-primary);
 }
 
+.btn--danger,
+.btn--danger:link,
+.btn--danger:visited {
+  background: linear-gradient(116.15deg, #dd2828 0%, #a72020 100%);
+  font-weight: bold;
+}
+
+.btn--danger:hover,
+.btn--danger:active,
+.btn--danger:focus {
+  background: linear-gradient(116.15deg, #dd2828 0%, #a72020 100%);
+}
+
 /* Loading state
 -------------------------------------------------------------- */
 

src/assets/css/5-screens/capture.css

@@ -121,3 +121,21 @@
   width: 3rem;
   height: 3rem;
 }
+
+/* Timer overlay
+-------------------------------------------------------------- */
+
+.capture-timer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  text-shadow: 0 0 1rem var(--color-tertiary);
+  font-weight: bold;
+  font-size: 10rem;
+}

src/views/components/capture-timer.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="capture-timer">{{ time }}</div>
+</template>
+
+<script>
+export default {
+  name: 'captureTimer',
+  props: {
+    time: {
+      type: Number,
+      required: true,
+      default: 0
+    }
+  }
+}
+</script>

src/views/screens/capture.vue

@@ -7,18 +7,26 @@
 
     <div class="preview">
       <video ref="preview" class="preview-visual" :class="{ 'preview--flip': shouldFlip }" preload="yes" autoplay muted playsinline webkit-playsinline></video>
+      <capture-timer v-if="timerActive" :time="timerProgress"></capture-timer>
     </div>
 
     <div class="capture-actions">
-      <button class="capture-btn" :class="{ 'capture-btn--capturing': capturing }" :disabled="!camera" @click.prevent="startCapturing">Capture</button>
+      <template v-if="!timerActive">
-      <button class="capture-switch" title="Switch camera" @click="switchCamera"><icon-switch></icon-switch></button>
+        <button class="capture-btn" :class="{ 'capture-btn--capturing': capturing }" :disabled="!camera" @click.prevent="startCapturing">Capture</button>
+        <button class="capture-switch" title="Switch camera" @click="switchCamera"><icon-switch></icon-switch></button>
+      </template>
+      <template v-else>
+        <button class="btn btn--danger w100">Cancel countdown</button>
+      </template>
     </div>
+
   </div>
 </template>
 
 <script>
 import captureOptions from '/views/components/capture-options'
 import captureProgress from '/views/components/capture-progress'
+import captureTimer from '/views/components/capture-timer'
 import { capture } from '/services/capture.js'
 
 import 'objectFitPolyfill'
@@ -32,19 +40,21 @@ export default {
   components: {
     captureOptions,
     captureProgress,
+    captureTimer,
     iconSwitch
   },
   data: () => ({
     capturing: false,
     capturingProgress: 0,
-    countdown: false,
+    timerActive: false,
-    countdownProgress: 0
+    timerProgress: 5
   }),
   computed: {
     ...mapState([
       'camera',
       'duration',
-      'capture'
+      'capture',
+      'timer'
     ]),
     shouldFlip () {
       if (this.camera) {