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
|
* [Accident icon](https://www.flaticon.com/free-icon/car-running-over-a-bicycle_91680) is
|
||||||
coming from Flaticon.
|
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
|
The map background is using tiles from <a
|
||||||
href=\"https://carto.com/location-data-services/basemaps/\">Carto.com</a> or
|
href=\"https://carto.com/location-data-services/basemaps/\">Carto.com</a> or
|
||||||
<a href=\"http://thunderforest.com/\">Thunderforest</a>, thanks to <a
|
<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>
|
<script>
|
||||||
import moment from 'moment';
|
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 {
|
export default {
|
||||||
computed: {
|
computed: {
|
||||||
@ -59,6 +60,10 @@ export default {
|
|||||||
const reportID = this.$store.state.reportDetails.id;
|
const reportID = this.$store.state.reportDetails.id;
|
||||||
if (reportID != null) {
|
if (reportID != null) {
|
||||||
const report = this.$store.state.reports.find(item => item.id === reportID);
|
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 {
|
return {
|
||||||
fromNow: moment(report.attributes.datetime).fromNow(),
|
fromNow: moment(report.attributes.datetime).fromNow(),
|
||||||
icon: this.icons[report.attributes.type],
|
icon: this.icons[report.attributes.type],
|
||||||
@ -76,6 +81,7 @@ export default {
|
|||||||
icons[type] = REPORT_TYPES[type].image;
|
icons[type] = REPORT_TYPES[type].image;
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
|
beepAudio: new Audio(beepSound),
|
||||||
icons,
|
icons,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -88,6 +94,22 @@ export default {
|
|||||||
this.closeReportCard(); // Resets this.report
|
this.closeReportCard(); // Resets this.report
|
||||||
return this.$store.dispatch('downvote', { id: reportID });
|
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() {
|
upvote() {
|
||||||
const reportID = this.report.id;
|
const reportID = this.report.id;
|
||||||
this.closeReportCard(); // Resets this.report
|
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
|
// Delay in milliseconds between two consecutive calls to the backend API when
|
||||||
// doing batch requests
|
// doing batch requests
|
||||||
export const DELAY_BETWEEN_API_BATCH_REQUESTS = 1000;
|
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": {
|
"about": {
|
||||||
"availableReportsTitle": "The available reports so far are:",
|
"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.",
|
"summary": "This app lets you track and share issues with bike lanes.",
|
||||||
"usage": "How to use",
|
"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."
|
"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