feat(option panel): Setup timer options

src/assets/css/4-modules/options.css

@@ -59,11 +59,29 @@
   height: 1.5rem;
   background: url("/assets/img/boomerang-check.svg");
   content: "";
-  animation: btnCheckArrive .5s cubic-bezier(.18,.89,.32,1.28);
+  animation: btnOptionArrive .5s cubic-bezier(.18,.89,.32,1.28);
   animation-delay: 100ms;
 }
 
-@keyframes btnCheckArrive {
+.options__btn--timer {
+  position: relative;
+}
+
+.options__btn--timer::after {
+  position: absolute;
+  right: 1.8rem;
+  bottom: 1.6rem;
+  color: #fff;
+  content: attr(data-timer);
+  text-align: right;
+  text-shadow: .2rem 0 0 var(--color-tertiary), -.2rem 0 0 var(--color-tertiary), 0 .2rem 0 var(--color-tertiary), 0 -.2rem 0 var(--color-tertiary), 1px 1px var(--color-tertiary), -1px -1px 0 var(--color-tertiary), 1px -1px 0 var(--color-tertiary), -1px 1px 0 var(--color-tertiary);
+  font-weight: 600;
+  font-size: 1.3rem;
+  line-height: normal;
+  animation: btnOptionArrive .5s cubic-bezier(.18,.89,.32,1.28);
+}
+
+@keyframes btnOptionArrive {
   0% {
     transform: scale(1);
   }
@@ -74,7 +92,6 @@
     transform: scale(1);
   }
 }
-
 /* Panel
 -------------------------------------------------------------- */
 
@@ -113,6 +130,10 @@
   cursor: pointer;
 }
 
+.option__panelOption--big {
+  font-size: 1.6rem;
+}
+
 .option__panelOption.current {
   background-color: var(--color-primary);
 }

src/store.js

@@ -14,6 +14,7 @@ export default new Vuex.Store({
       list: [2, 3, 5]
     },
     boomerang: false,
+    timer: 0,
     camera: null,
     capture: null,
     gif: null,
@@ -29,6 +30,10 @@ export default new Vuex.Store({
     updateBoomerang (state, value) {
       state.boomerang = value
     },
+    updateTimer (state, value) {
+      console.log(typeof value)
+      state.timer = value
+    },
     updateCamera (state, camera) {
       if (state.camera) {
         state.camera.mediaStream.getTracks().forEach(track => track.stop())

src/views/components/capture-options.vue

@@ -6,13 +6,21 @@
         {{ timeLabel(time) }}
       </option>
     </select>
-    <button class="options__btn" :class="{ 'options__btn--check': boomerang }" title="Boomerang mode" @click="openBoomerang">
+    <button v-if="!disabledTimer" class="options__btn" :class="{ 'options__btn--timer': timer }" :data-timer="timer" title="Timer settings" @click="openTimer">
+      <icon-timer></icon-timer>
+    </button>
+    <button v-if="!disabledBoomerang" class="options__btn" :class="{ 'options__btn--check': boomerang }" title="Boomerang mode" @click="openBoomerang">
       <icon-boomerang></icon-boomerang>
     </button>
     <div v-if="!disabledBoomerang" class="options__panel" :class="{ 'active': boomerangOpen }">
       <button class="option__panelOption" :class="{ 'current': !boomerang }" @click="updateBoomerang(false)"><icon-disabled></icon-disabled>Linear</button>
       <button class="option__panelOption" :class="{ 'current': boomerang }" @click="updateBoomerang(true)"><icon-boomerang></icon-boomerang>Boomerang</button>
     </div>
+    <div v-if="!disabledTimer" class="options__panel" :class="{ 'active': timerOpen }">
+      <button class="option__panelOption option__panelOption--big" :class="{ 'current': timer === 0 }" @click="updateTimer(0)">0s</button>
+      <button class="option__panelOption option__panelOption--big" :class="{ 'current': timer === 3 }" @click="updateTimer(3)">3s</button>
+      <button class="option__panelOption option__panelOption--big" :class="{ 'current': timer === 10 }" @click="updateTimer(10)">10s</button>
+    </div>
   </div>
 </template>
 
@@ -20,17 +28,20 @@
 import { mapState } from 'vuex'
 
 import iconBoomerang from '/views/icons/ico-boomerang'
+import iconTimer from '/views/icons/ico-timer'
 import iconDisabled from '/views/icons/ico-disabled'
 
 export default {
   name: 'captureOptions',
   components: {
     iconBoomerang,
+    iconTimer,
     iconDisabled
   },
   data () {
     return {
-      boomerangOpen: false
+      boomerangOpen: false,
+      timerOpen: false
     }
   },
   props: {
@@ -45,12 +56,17 @@ export default {
     disabledBoomerang: {
       type: Boolean,
       default: false
+    },
+    disabledTimer: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
     ...mapState([
       'duration',
-      'boomerang'
+      'boomerang',
+      'timer'
     ]),
     selectedTime: {
       get: function () { return this.duration.selected },
@@ -73,7 +89,18 @@ export default {
     updateBoomerang (value) {
       this.$store.commit('updateBoomerang', value)
       this.closeBoomerang()
+    },
+    openTimer () {
+      this.timerOpen = true
+    },
+    closeTimer () {
+      this.timerOpen = false
+    },
+    updateTimer (value) {
+      this.$store.commit('updateTimer', value)
+      this.closeTimer()
     }
+
   }
 }
 </script>

src/views/icons/ico-timer.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21 12a9 9 0 1 1-18 0c0-2.238.815-4.282 2.167-5.858.58.736 1.45 1.727 2.291 2.687C8.762 10.315 10 11.727 10 12a2 2 0 1 0 2-2c-.227 0-1.677-1.06-3.244-2.205C7.66 6.994 6.505 6.15 5.673 5.6A8.965 8.965 0 0 1 12 3a9 9 0 0 1 9 9zm2 0c0 6.075-4.925 11-11 11S1 18.075 1 12c0-2.898 1.121-5.535 2.953-7.5A10.97 10.97 0 0 1 12 1c6.075 0 11 4.925 11 11z" fill="currentColor"/>
+  </svg>
+</template>

src/views/screens/capture.vue

@@ -36,7 +36,9 @@ export default {
   },
   data: () => ({
     capturing: false,
-    capturingProgress: 0
+    capturingProgress: 0,
+    countdown: false,
+    countdownProgress: 0
   }),
   computed: {
     ...mapState([

src/views/screens/preview.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div class="download">
-    <capture-options :disabled-time="true" :back-btn="back"></capture-options>
+    <capture-options :disabled-time="true" :disabledTimer="true" :back-btn="back"></capture-options>
 
     <div class="preview">
       <canvas ref="previewCanvas" class="preview-visual"></canvas>