From 4f64204ff0629860144d88e469436dced8315ef1 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Mon, 30 Jul 2018 23:08:10 +0200
Subject: [PATCH] Add beep and vibration when coming close to a known report

---
 README.md                     |   3 +++
 src/assets/beep.mp3           | Bin 0 -> 5869 bytes
 src/components/ReportCard.vue |  24 +++++++++++++++++++++++-
 src/constants.js              |   3 +++
 src/i18n/en.json              |   2 +-
 5 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/beep.mp3

diff --git a/README.md b/README.md
index 2286c19..ce77ee9 100644
--- a/README.md
+++ b/README.md
@@ -146,6 +146,9 @@ Icons are made from the original works:
 * [Accident icon](https://www.flaticon.com/free-icon/car-running-over-a-bicycle_91680) is
     coming from Flaticon.
 
+Beep sound is provided under CC0 license and coming from
+[freesound.org](https://freesound.org/people/thisusernameis/sounds/426888/).
+
 The map background is using tiles from <a
 href=\"https://carto.com/location-data-services/basemaps/\">Carto.com</a> or
 <a href=\"http://thunderforest.com/\">Thunderforest</a>, thanks to <a
diff --git a/src/assets/beep.mp3 b/src/assets/beep.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..3cd971292c9320685e176d1aa9516bdfb0c6f35c
GIT binary patch
literal 5869
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

literal 0
HcmV?d00001

diff --git a/src/components/ReportCard.vue b/src/components/ReportCard.vue
index d540f09..189a38e 100644
--- a/src/components/ReportCard.vue
+++ b/src/components/ReportCard.vue
@@ -51,7 +51,8 @@
 <script>
 import moment from 'moment';
 
-import { REPORT_TYPES } from '@/constants';
+import { REPORT_TYPES, REPORT_ALARM_VIBRATION_SEQUENCE } from '@/constants';
+import beepSound from '@/assets/beep.mp3';
 
 export default {
     computed: {
@@ -59,6 +60,10 @@ 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],
@@ -76,6 +81,7 @@ export default {
             icons[type] = REPORT_TYPES[type].image;
         });
         return {
+            beepAudio: new Audio(beepSound),
             icons,
         };
     },
@@ -88,6 +94,22 @@ export default {
             this.closeReportCard();  // Resets this.report
             return this.$store.dispatch('downvote', { id: reportID });
         },
+        notifyUser() {
+            // Eventually play sound
+            if (this.$store.state.settings.hasPlaySoundPermission) {
+                this.playBeepSound();
+            }
+            // Eventually vibrate
+            if (this.$store.state.settings.hasVibratePermission && navigator.vibrate) {
+                navigator.vibrate(REPORT_ALARM_VIBRATION_SEQUENCE);
+            }
+        },
+        playBeepSound() {
+            // Reset sound to the beginning
+            this.beepAudio.currentTime = 0;
+            // Force play it
+            this.beepAudio.play();
+        },
         upvote() {
             const reportID = this.report.id;
             this.closeReportCard();  // Resets this.report
diff --git a/src/constants.js b/src/constants.js
index eaca419..5b85c01 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -145,3 +145,6 @@ export const GEOCODING_API_ENDPOINT = 'https://api-adresse.data.gouv.fr/search/'
 // Delay in milliseconds between two consecutive calls to the backend API when
 // doing batch requests
 export const DELAY_BETWEEN_API_BATCH_REQUESTS = 1000;
+
+// A vibration sequence for report alarms
+export const REPORT_ALARM_VIBRATION_SEQUENCE = [500];
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 607628f..d407c51 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1,7 +1,7 @@
 {
     "about": {
         "availableReportsTitle": "The available reports so far are:",
-        "license": "It is released under an <a href=\"https://opensource.org/licenses/MIT\">MIT license</a> (<a href=\"https://framagit.org/phyks/cyclassist\">source code</a>). Icons are based on creations from Wikimedia, Vecteezy, Pixabay or Flaticon. The map background is using tiles from <a href=\"https://carto.com/location-data-services/basemaps/\">Carto.com</a> or <a href=\"http://thunderforest.com/\">Thunderforest</a>, thanks to <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap contributors</a> and <a href=\"http://leafletjs.com/\">Leaflet</a>. Collected reports are available under <a href=\"https://opendatacommons.org/licenses/odbl/\">ODbL license</a>. Manual location picking uses the awesome API from <a href=\"https://adresse.data.gouv.fr\">adresse.data.gouv.fr</a>.",
+        "license": "It is released under an <a href=\"https://opensource.org/licenses/MIT\">MIT license</a> (<a href=\"https://framagit.org/phyks/cyclassist\">source code</a>). Icons are based on creations from Wikimedia, Vecteezy, Pixabay or Flaticon. Sounds are based on CC0 works from <a href=\"https://freesound.org/\">freesound.org</a>. The map background is using tiles from <a href=\"https://carto.com/location-data-services/basemaps/\">Carto.com</a> or <a href=\"http://thunderforest.com/\">Thunderforest</a>, thanks to <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap contributors</a> and <a href=\"http://leafletjs.com/\">Leaflet</a>. Collected reports are available under <a href=\"https://opendatacommons.org/licenses/odbl/\">ODbL license</a>. Manual location picking uses the awesome API from <a href=\"https://adresse.data.gouv.fr\">adresse.data.gouv.fr</a>.",
         "summary": "This app lets you track and share issues with bike lanes.",
         "usage": "How to use",
         "usageDescription": "Use the button in the lower right corner to add a new report at your current location. To add a report elsewhere, do a click where you want the report to be shown. Press on a marker on the map to display more informations and report the problem as being still there or solved."