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 Carto.com or Thunderforest, thanks to 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 MIT license (source code). Icons are based on creations from Wikimedia, Vecteezy, Pixabay or Flaticon. The map background is using tiles from Carto.com or Thunderforest, thanks to OpenStreetMap contributors and Leaflet. Collected reports are available under ODbL license. Manual location picking uses the awesome API from adresse.data.gouv.fr.", + "license": "It is released under an MIT license (source code). Icons are based on creations from Wikimedia, Vecteezy, Pixabay or Flaticon. Sounds are based on CC0 works from freesound.org. The map background is using tiles from Carto.com or Thunderforest, thanks to OpenStreetMap contributors and Leaflet. Collected reports are available under ODbL license. Manual location picking uses the awesome API from adresse.data.gouv.fr.", "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."