Merge pull request #579 from Adamant-im/feat/vibro

feat: page with sound vibrations

src/lib/vibrate.js

@@ -1,10 +1,11 @@
 const VIBRATION_PATTERN = {
-  VERY_SHORT: [25],
-  SHORT: [50],
-  MEDIUM: [80],
+  VERY_SHORT: [40],
+  SHORT: [80],
+  MEDIUM: [160],
   LONG: [300],
-  DOUBLE_VERY_SHORT: [25, 25],
-  TRIPLE_VERY_SHORT: [25, 25, 25]
+  DOUBLE_VERY_SHORT: [40, 60, 40],
+  TRIPLE_VERY_SHORT: [40, 60, 40, 60, 40],
+  DOUBLE_SHORT: [80, 60, 80]
 }
 
 function checkVibrateIsSupported() {
@@ -30,5 +31,6 @@ export const vibrate = {
   medium: createVibrationPattern(VIBRATION_PATTERN.MEDIUM),
   long: createVibrationPattern(VIBRATION_PATTERN.LONG),
   doubleVeryShort: createVibrationPattern(VIBRATION_PATTERN.DOUBLE_VERY_SHORT),
-  tripleVeryShort: createVibrationPattern(VIBRATION_PATTERN.TRIPLE_VERY_SHORT)
+  tripleVeryShort: createVibrationPattern(VIBRATION_PATTERN.TRIPLE_VERY_SHORT),
+  doubleShort: createVibrationPattern(VIBRATION_PATTERN.DOUBLE_SHORT)
 }

src/router/index.js

@@ -15,6 +15,7 @@ import Votes from '@/views/Votes.vue'
 import Nodes from '@/views/Nodes.vue'
 import Login from '@/views/Login.vue'
 import ExportKeys from '@/views/ExportKeys.vue'
+import Vibro from '@/views/Vibro.vue'
 
 /**
  * @type {Readonly<import("vue-router").RouteRecordRaw[]>}
@@ -148,6 +149,11 @@ const routes = [
   {
     path: '/:pathMatch(.*)*',
     redirect: '/'
+  },
+  {
+    path: '/vibro',
+    name: 'Vibro',
+    component: Vibro
   }
 ]
 

src/views/Vibro.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <input v-model="vibro" class="input" placeholder="Example 30,20,30" />
+    <v-btn @click="vibration" class="btnPlay"> play</v-btn>
+    <v-btn @click="veryShort" class="btn" append-icon="mdi-play"
+      >Very short
+      <template v-slot:append>
+        <v-icon color="warning"></v-icon>
+      </template>
+    </v-btn>
+    <v-btn @click="short" class="btn" append-icon="mdi-play"
+      >Short
+      <template v-slot:append>
+        <v-icon color="warning"></v-icon>
+      </template>
+    </v-btn>
+    <v-btn @click="medium" class="btn" append-icon="mdi-play"
+      >Medium
+      <template v-slot:append>
+        <v-icon color="warning"></v-icon>
+      </template>
+    </v-btn>
+    <v-btn @click="long" class="btn" append-icon="mdi-play"
+      >Long
+      <template v-slot:append>
+        <v-icon color="warning"></v-icon>
+      </template>
+    </v-btn>
+    <v-btn @click="doubleVeryShort" class="btn" append-icon="mdi-play"
+      >Double-v-Short
+      <template v-slot:append>
+        <v-icon color="warning"></v-icon>
+      </template>
+    </v-btn>
+    <v-btn @click="tripleVeryShort" class="btn" append-icon="mdi-play"
+      >Triple-v-Short
+      <template v-slot:append>
+        <v-icon color="warning"></v-icon>
+      </template>
+    </v-btn>
+    <v-btn @click="doubleVeryShort" class="btn" append-icon="mdi-play"
+      >Double-Short
+      <template v-slot:append>
+        <v-icon color="warning"></v-icon>
+      </template>
+    </v-btn>
+  </div>
+</template>
+<script>
+import { vibrate } from '@/lib/vibrate.js'
+export default {
+  data: () => ({
+    vibro: undefined
+  }),
+
+  methods: {
+    vibration() {
+      let num = this.vibro.split(',').map((i) => Number(i))
+      return navigator.vibrate(num)
+    },
+    veryShort() {
+      return vibrate.veryShort()
+    },
+    short() {
+      return vibrate.short()
+    },
+    medium() {
+      return vibrate.medium()
+    },
+    long() {
+      return vibrate.long()
+    },
+    doubleVeryShort() {
+      return vibrate.doubleVeryShort()
+    },
+    tripleVeryShort() {
+      return vibrate.tripleVeryShort()
+    },
+    doubleShort() {
+      return vibrate.doubleShort()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import 'vuetify/settings';
+@import '@/assets/styles/settings/_colors.scss';
+.input {
+  border: 2px solid orange;
+  margin-right: 16px;
+}
+.btnPlay {
+  background-color: rgba(205, 144, 31, 0.93);
+  height: 32px;
+}
+.btn {
+  display: flex;
+  margin-top: 12px;
+  background-color: map-get($adm-colors, 'regular');
+}
+</style>