diff options
Diffstat (limited to 'ui/app/components/bye_splash.js')
-rw-r--r-- | ui/app/components/bye_splash.js | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/ui/app/components/bye_splash.js b/ui/app/components/bye_splash.js new file mode 100644 index 00000000..633aa3d3 --- /dev/null +++ b/ui/app/components/bye_splash.js @@ -0,0 +1,99 @@ +/* + * a parting window + */ + +import React from 'react' +import Center from 'components/center' +import bitmask from 'lib/bitmask' + +export default class ByeSplash extends React.Component { + + static get defaultProps() {return{ + delay: 1000 + }} + + constructor(props) { + super(props) + this.state = { + errorMessage: null, + readyToQuit: false + } + this.tick = this.tick.bind(this) + } + + componentDidMount() { + this.interval = setInterval(this.tick, this.props.delay) + bitmask.core.stop().then(msg => { + console.log(msg) + this.setState({readyToQuit: true}) + }, error => { + console.log(error) + this.setState({errorMessage: error}) + }) + } + + componentWillUnmount() { + clearInterval(this.interval) + } + + tick() { + if (this.state.readyToQuit) { + if (typeof(bitmaskApp) == 'undefined') { + window.close() + } else { + bitmaskApp.shutdown() + } + } else { + clearInterval(this.interval) + this.interval = setInterval(this.tick, 200) + } + } + + render () { + let message = null + let messageClass = "ok" + if (this.state.errorMessage) { + messageClass = "error" + message = this.state.errorMessage + } + + let backgroundStyle = { + position: "absolute", + width: "100%", + height: "100%", + backgroundColor: "#333" + } + let foregroundStyle = { + marginTop: "10px", + color: "#999", + textAlign: "center" + } + let style = ` + .mask, .ok { + animation: fadeout 2s infinite ease-in-out; + -webkit-animation: fadeout 2s infinite ease-in-out; + } + @keyframes fadeout { + 0% {opacity: 1} + 50% {opacity: 0} + 100% {opacity: 1} + } + @-webkit-keyframes fadeout { + 0% {opacity: 1} + 50% {opacity: 0} + 100% {opacity: 1} + } + ` + return ( + <div style={backgroundStyle}> + <style>{style}</style> + <Center> + <img className="mask" src='img/mask.svg' width='200px' /> + <div className={messageClass} style={foregroundStyle}> + {message} + </div> + </Center> + </div> + ) + } +}
\ No newline at end of file |