Add beep and vibration when coming close to a known report

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

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

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];

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."