Add beep and vibration when coming close to a known report
This commit is contained in:
parent
66b110e9ef
commit
4f64204ff0
@ -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
|
||||
|
BIN
src/assets/beep.mp3
Normal file
BIN
src/assets/beep.mp3
Normal file
Binary file not shown.
@ -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
|
||||
|
@ -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];
|
||||
|
@ -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."
|
||||
|
Loading…
Reference in New Issue
Block a user