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;
+ }
+}