summaryrefslogtreecommitdiff
path: root/ui/app/components/bye_splash.js
blob: 0442c41e0f6a1f0bba65b00b8c1a127c60871d46 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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>
    )
  }
}