diff --git a/src/components/Timer.js b/src/components/Timer.js index 7cad822..ecc8232 100644 --- a/src/components/Timer.js +++ b/src/components/Timer.js @@ -1,29 +1,27 @@ import React, { Component } from 'react'; import { Button, Container, Row, Col } from 'reactstrap'; +import Notification from 'react-web-notification'; import './Timer.css'; import logo from '../logo.svg'; -import Notification from 'react-web-notification'; import sound from '../sound.mp3'; class Timer extends Component { constructor(props) { super(props); - this.defaultSeconds = 1500; - this.defaultLogoSpin = 'App-logo-rotation'; + this.seconds = 1500; + this.logoSpingCSS = 'App-logo-rotation'; this.state = { - seconds: this.defaultSeconds, + seconds: this.seconds, started: false, logoSpin: '', ignore: true, title: '' }; - // binding 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); @@ -36,7 +34,7 @@ class Timer extends Component { return ( s - ( s%=60 )) / 60 + ( 9 < s ?':':':0') +s; } - // handleNotification + handlePermissionGranted() { this.setState({ ignore: false @@ -59,10 +57,6 @@ class Timer extends Component { console.log(e, 'Notification error tag:' + tag); } - playSound(){ - document.getElementById('sound').play(); - } - handleNotificationOnShow() { this.playSound(); } @@ -89,6 +83,11 @@ class Timer extends Component { }); } + playSound(){ + document.getElementById('sound').play(); + } + + tick() { this.setState(state => ({ seconds: state.seconds -1 @@ -104,7 +103,7 @@ class Timer extends Component { startTimer() { this.setState({ started: true, - logoSpin: this.defaultLogoSpin + logoSpin: this.logoSpingCSS }); this.interval = setInterval(() => this.tick(), 1000); } @@ -119,79 +118,84 @@ class Timer extends Component { resetTimer() { this.stopTimer(); - this.setState({ seconds: this.defaultSeconds}); + this.setState({ seconds: this.seconds}); } + render() { return (
- - - Tomato - - - - - -

- {this.formatMinute(this.state.seconds)} -

- -
-
- - - - - - - - - + + + Tomato + + - - - - - -
+ + +

+ {this.formatMinute(this.state.seconds)} +

+ +
+ +
+ + + + + + + + + + + + + + + +
+ +
+ +
); }