diff --git a/src/client/components/App.js b/src/client/components/App.js index 730e29f..f305d74 100644 --- a/src/client/components/App.js +++ b/src/client/components/App.js @@ -43,7 +43,7 @@ export default class App extends React.PureComponent { return (
- +
diff --git a/src/client/components/Chat.js b/src/client/components/Chat.js index d63432c..0edfe1c 100644 --- a/src/client/components/Chat.js +++ b/src/client/components/Chat.js @@ -23,7 +23,7 @@ export default class Chat extends React.PureComponent {
- arrow_back + arrow_forward
Chat
diff --git a/src/client/components/Toolbar.js b/src/client/components/Toolbar.js index b52103a..f19b0be 100644 --- a/src/client/components/Toolbar.js +++ b/src/client/components/Toolbar.js @@ -1,13 +1,28 @@ +import PropTypes from 'prop-types' import React from 'react' +import { MessagePropTypes } from './Chat.js' import { StreamPropType } from './Video.js' export default class Toolbar extends React.PureComponent { static propTypes = { + messages: PropTypes.arrayOf(MessagePropTypes).isRequired, stream: StreamPropType } + constructor () { + super() + this.state = { + isChatOpen: false, + totalMessages: 0 + } + } handleChatClick = e => { + const { messages } = this.props document.getElementById('chat').classList.toggle('show') e.currentTarget.classList.toggle('on') + this.setState({ + isChatOpen: document.getElementById('chat').classList.contains('show'), + totalMessages: messages.length + }) } handleMicClick = e => { const { stream } = this.props @@ -58,12 +73,14 @@ export default class Toolbar extends React.PureComponent { window.location.href = '/' } render () { - const { stream } = this.props + const { messages, stream } = this.props + const { isChatOpen, totalMessages } = this.state return (
chat diff --git a/src/scss/_toolbar.scss b/src/scss/_toolbar.scss index 3128b32..1fe321d 100644 --- a/src/scss/_toolbar.scss +++ b/src/scss/_toolbar.scss @@ -54,6 +54,11 @@ } .chat { + &[data-blink="true"] { + -webkit-animation: bg-blink 1s infinite; + -moz-animation: bg-blink 1s infinite; + animation: bg-blink 1s infinite; + } &:hover, &.on { background: #407cf7; } @@ -83,3 +88,33 @@ } } } + +@-webkit-keyframes bg_blink { + 50% { + background-color: #407cf7; + } + + 99% { + background-color: #407cf7; + } +} + +@-moz-keyframes bg-blink { + 50% { + background-color: #407cf7; + } + + 99% { + background-color: #407cf7; + } +} + +@keyframes bg-blink { + 50% { + background-color: #407cf7; + } + + 99% { + background-color: #407cf7; + } +}