mirror of
https://github.com/franjsco/tomadoro
synced 2024-12-12 08:16:08 +01:00
edit timer notification
This commit is contained in:
parent
8bf48310d3
commit
26c6c0564a
106
src/components/Notification.js
Normal file
106
src/components/Notification.js
Normal 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;
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user