Misc fixes with vibrate and sound

package.json

@@ -15,6 +15,7 @@
     },
     "dependencies": {
         "es6-promise": "^4.2.4",
+        "howler": "^2.0.14",
         "isomorphic-fetch": "^2.2.1",
         "leaflet": "^1.3.1",
         "leaflet-tracksymbol": "^1.0.8",

src/components/ReportCard.vue

@@ -50,6 +50,7 @@
 
 <script>
 import moment from 'moment';
+import { Howl } from 'howler';
 
 import { REPORT_TYPES, REPORT_ALARM_VIBRATION_SEQUENCE } from '@/constants';
 import beepSound from '@/assets/beep.mp3';
@@ -60,10 +61,6 @@ export default {
             const reportID = this.$store.state.reportDetails.id;
             if (reportID != null) {
                 const report = this.$store.state.reports.find(item => item.id === reportID);
-                // If the report is automatically opened due to proximity
-                if (!this.$store.state.reportDetails.userAsked) {
-                    this.notifyUser();
-                }
                 return {
                     fromNow: moment(report.attributes.datetime).fromNow(),
                     icon: this.icons[report.attributes.type],
@@ -80,8 +77,12 @@ export default {
         Object.keys(REPORT_TYPES).forEach((type) => {
             icons[type] = REPORT_TYPES[type].image;
         });
+        const onplayerror = () => this.beepAudio.once('unlock', () => this.beepAudio.play());
         return {
-            beepAudio: new Audio(beepSound),
+            beepAudio: new Howl({
+                src: [beepSound],
+                onplayerror,
+            }),
             icons,
         };
     },
@@ -105,8 +106,6 @@ export default {
             }
         },
         playBeepSound() {
-            // Reset sound to the beginning
-            this.beepAudio.currentTime = 0;
             // Force play it
             this.beepAudio.play();
         },
@@ -116,6 +115,17 @@ export default {
             return this.$store.dispatch('upvote', { id: reportID });
         },
     },
+    watch: {
+        report(newReport, oldReport) {
+            if (newReport) {
+                const isDifferentReport = (oldReport === null) || (newReport.id !== oldReport.id);
+                // If the report is automatically opened due to proximity
+                if (!this.$store.state.reportDetails.userAsked && isDifferentReport) {
+                    this.notifyUser();
+                }
+            }
+        },
+    },
 };
 </script>
 

src/store/actions.js

@@ -25,8 +25,11 @@ import {
 export function fetchReports({ commit }) {
     commit(IS_LOADING);
     return api.getActiveReports()
-        .then(reports => commit(STORE_REPORTS, { reports }))
-        .finally(() => commit(IS_DONE_LOADING));
+        .then((reports) => {
+            commit(STORE_REPORTS, { reports });
+            commit(IS_DONE_LOADING);
+        })
+        .catch(() => commit(IS_DONE_LOADING));
 }
 
 export function downvote({ commit }, { id }) {
@@ -46,8 +49,11 @@ export function upvote({ commit }, { id }) {
 export function saveReport({ commit }, { type, lat, lng }) {
     commit(IS_LOADING);
     return api.saveReport(type, lat, lng)
-        .then(report => commit(PUSH_REPORT, { report }))
-        .finally(() => commit(IS_DONE_LOADING));
+        .then((report) => {
+            commit(PUSH_REPORT, { report });
+            commit(IS_DONE_LOADING);
+        })
+        .catch(() => commit(IS_DONE_LOADING));
 }
 
 export function saveUnsentReport({ commit }, { report }) {

src/views/Onboarding.vue

@@ -65,9 +65,15 @@ export default {
     },
     methods: {
         goToMap() {
+            // Eventually vibrate, to ensure permission is prompted before driving
+            if (this.$store.state.settings.hasVibratePermission && navigator.vibrate) {
+                navigator.vibrate(1);
+            }
+
             if (!this.$store.state.settings.skipOnboarding) {
                 this.$store.dispatch('setSetting', { setting: 'skipOnboarding', value: true });
             }
+
             this.$router.push({ name: 'Map' });
         },
     },

yarn.lock

@@ -3831,6 +3831,10 @@ hosted-git-info@^2.1.4:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.6.0.tgz#23235b29ab230c576aab0d4f13fc046b0b038222"
 
+howler@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/howler/-/howler-2.0.14.tgz#28e37800fea002fea147a3ca033660c4f1288a99"
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"