1
0
mirror of https://github.com/franjsco/tomadoro synced 2024-12-12 08:16:08 +01:00

edit timer notification

This commit is contained in:
Francesco Esposito 2019-03-21 14:58:26 +01:00
parent 8bf48310d3
commit 26c6c0564a
2 changed files with 125 additions and 86 deletions

View File

@ -0,0 +1,106 @@
import React, { Component } from 'react';
import WebNotification from 'react-web-notification';
import sound from '../sound.mp3';
class Notification extends Component {
constructor(props) {
super(props);
this.state = {
ignore: true,
title: ''
};
this.handlePermissionGranted = this.handlePermissionGranted.bind(this);
this.handlePermissionDenied = this.handlePermissionDenied.bind(this);
this.handleNotSupported = this.handleNotSupported.bind(this);
this.sendNotification = this.sendNotification.bind(this);
this.handleNotificationOnShow = this.handleNotificationOnShow.bind(this);
this.playSound = this.playSound.bind(this);
}
componentDidUpdate() {
if(this.props.send) {
this.sendNotification()
this.props.handleNotification(false)
};
}
handlePermissionGranted() {
this.setState({
ignore: false
});
}
handlePermissionDenied() {
this.setState({
ignore: true
});
}
handleNotSupported() {
this.setState({
ignore: true
});
}
handleNotificationOnError(e, tag) {
console.log(e, 'Notification error tag:' + tag);
}
handleNotificationOnShow() {
this.playSound();
}
sendNotification() {
if (this.state.ignore) {
return;
}
const title = 'tomadoro';
const body = 'Time is Up! 🍅';
const tag = Date.now();
const options = {
tag: tag,
body: body,
lang: 'en',
sound: { sound }
};
this.setState({
title: title,
options: options
});
}
playSound() {
document.getElementById('sound').play();
}
render() {
return(
<div>
<WebNotification
ignore={this.state.ignore}
onPermissionGranted={this.handlePermissionGranted}
onPermissionDenied={this.handlePermissionDenied}
notSupported={this.handleNotSupported}
onError={this.onError}
timeout={5000}
title={this.state.title}
options={this.state.options}
onShow={this.handleNotificationOnShow}
>
</WebNotification>
<audio id='sound' preload='auto'>
<source src={sound} type='audio/mpeg' />
<embed hidden src={sound} />
</audio>
</div>
);
}
}
export default Notification;

View File

@ -1,100 +1,46 @@
import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import Notification from 'react-web-notification';
import Notification from './Notification';
import ButtonBox from './ButtonBox';
import LogoSpin from './LogoSpin';
import './Timer.css';
import sound from '../sound.mp3';
class Timer extends Component {
constructor(props) {
super(props);
this.state = {
seconds: 1500,
seconds: 4,
started: false,
ignore: true,
send: false,
title: ''
};
this.handleNotification = this.handleNotification.bind(this);
this.startTimer = this.startTimer.bind(this);
this.stopTimer = this.stopTimer.bind(this);
this.resetTimer = this.resetTimer.bind(this);
this.handlePermissionGranted = this.handlePermissionGranted.bind(this);
this.handlePermissionDenied = this.handlePermissionDenied.bind(this);
this.handleNotSupported = this.handleNotSupported.bind(this);
this.sendNotification = this.sendNotification.bind(this);
this.handleNotificationOnShow = this.handleNotificationOnShow.bind(this);
this.playSound = this.playSound.bind(this);
}
handleNotification(flag) {
this.setState({
send: flag
});
}
formatMinute(s) {
return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s;
}
handlePermissionGranted() {
this.setState({
ignore: false
});
}
handlePermissionDenied() {
this.setState({
ignore: true
});
}
handleNotSupported() {
this.setState({
ignore: true
});
}
handleNotificationOnError(e, tag) {
console.log(e, 'Notification error tag:' + tag);
}
handleNotificationOnShow() {
this.playSound();
}
sendNotification() {
if (this.state.ignore) {
return;
}
const title = 'tomadoro';
const body = 'Time is Up! 🍅';
const tag = Date.now();
const options = {
tag: tag,
body: body,
lang: 'en',
sound: { sound }
};
this.setState({
title: title,
options: options
});
}
playSound() {
document.getElementById('sound').play();
}
tick() {
this.setState(state => ({
seconds: state.seconds - 1
}));
if (this.state.seconds <= 0) {
this.sendNotification();
this.stopTimer();
this.resetTimer();
this.setState({
send: true
});
}
}
@ -146,29 +92,16 @@ class Timer extends Component {
stopTimer={this.stopTimer}
isStarted={this.state.started}
resetTimer={this.resetTimer}
seconds={this.state.seconds}
/>
</Col>
</Row>
</Container>
<Notification
ignore={this.state.ignore}
onPermissionGranted={this.handlePermissionGranted}
onPermissionDenied={this.handlePermissionDenied}
notSupported={this.handleNotSupported}
onError={this.onError}
timeout={5000}
title={this.state.title}
options={this.state.options}
onShow={this.handleNotificationOnShow}
>
</Notification>
<audio id='sound' preload='auto'>
<source src={sound} type='audio/mpeg' />
<embed hidden src={sound} />
</audio>
send={this.state.send}
handleNotification={this.handleNotification}
/>
</div>
);
}