Merge branch 'toolbar'

.editorconfig

@@ -0,0 +1,11 @@
+; top-most EditorConfig file
+root = true
+
+; Unix-style newlines
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 *.swp
 *.swo
 dist/

package.json

@@ -53,6 +53,7 @@
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^4.2.0",
     "redux-thunk": "^2.2.0",
+    "screenfull": "^3.3.3",
     "seamless-immutable": "^7.1.2",
     "simple-peer": "^8.1.0",
     "socket.io": "^2.1.1",

src/client/__mocks__/window.js

@@ -4,7 +4,18 @@ export const createObjectURL = jest.fn()
 .mockImplementation(object => 'blob://' + String(object))
 export const revokeObjectURL = jest.fn()
 
-export class MediaStream {}
+export class MediaStream {
+  getVideoTracks () {
+    return [{
+      enabled: true
+    }]
+  }
+  getAudioTracks () {
+    return [{
+      enabled: true
+    }]
+  }
+}
 export function getUserMedia () {
   return !getUserMedia.shouldFail
   ? Promise.resolve(getUserMedia.stream)

src/client/actions/ChatActions.js

@@ -0,0 +1,16 @@
+import * as constants from '../constants.js'
+
+export const addMessage = ({ userId, message, timestamp, image }) => ({
+  type: constants.MESSAGE_ADD,
+  payload: {
+    userId,
+    message,
+    timestamp,
+    image
+  }
+})
+
+export const loadHistory = messages => ({
+  type: constants.MESSAGES_HISTORY,
+  messages
+})

src/client/actions/SocketActions.js

@@ -1,3 +1,4 @@
+import * as ChatActions from '../actions/ChatActions.js'
 import * as NotifyActions from '../actions/NotifyActions.js'
 import * as PeerActions from '../actions/PeerActions.js'
 import * as constants from '../constants.js'
@@ -41,6 +42,16 @@ class SocketHandler {
     .filter(id => !newUsersMap[id])
     .forEach(id => peers[id].destroy())
   }
+  handleMessages = (messages) => {
+    const { dispatch } = this
+    debug('socket messages: %o', messages)
+    dispatch(ChatActions.loadHistory(messages))
+  }
+  handleNewMessage = (payload) => {
+    const { dispatch } = this
+    debug('socket message: %o', payload)
+    dispatch(ChatActions.addMessage(payload))
+  }
 }
 
 export function handshake ({ socket, roomName, stream }) {
@@ -55,6 +66,8 @@ export function handshake ({ socket, roomName, stream }) {
 
     socket.on(constants.SOCKET_EVENT_SIGNAL, handler.handleSignal)
     socket.on(constants.SOCKET_EVENT_USERS, handler.handleUsers)
+    socket.on(constants.SOCKET_EVENT_MESSAGES, handler.handleMessages)
+    socket.on(constants.SOCKET_EVENT_NEW_MESSAGE, handler.handleNewMessage)
 
     debug('socket.id: %s', socket.id)
     debug('emit ready for room: %s', roomName)

src/client/components/App.js

@@ -1,7 +1,8 @@
 import Alerts, { AlertPropType } from './Alerts.js'
 import * as constants from '../constants.js'
-import Input from './Input.js'
+import Toolbar from './Toolbar.js'
 import Notifications, { NotificationPropTypes } from './Notifications.js'
+import Chat, { MessagePropTypes } from './Chat.js'
 import PropTypes from 'prop-types'
 import React from 'react'
 import Video, { StreamPropType } from './Video.js'
@@ -15,11 +16,18 @@ export default class App extends React.PureComponent {
     init: PropTypes.func.isRequired,
     notifications: PropTypes.objectOf(NotificationPropTypes).isRequired,
     notify: PropTypes.func.isRequired,
+    messages: PropTypes.arrayOf(MessagePropTypes).isRequired,
     peers: PropTypes.object.isRequired,
     sendMessage: PropTypes.func.isRequired,
     streams: PropTypes.objectOf(StreamPropType).isRequired,
     toggleActive: PropTypes.func.isRequired
   }
+  constructor () {
+    super()
+    this.state = {
+      videos: {}
+    }
+  }
   componentDidMount () {
     const { init } = this.props
     init()
@@ -31,18 +39,37 @@ export default class App extends React.PureComponent {
       dismissAlert,
       notifications,
       notify,
+      messages,
       peers,
       sendMessage,
       toggleActive,
       streams
     } = this.props
 
-    return (<div className="app">
+    const { videos } = this.state
+
+    return (
+      <div className="app">
+        <Toolbar
+          chatRef={this.chatRef}
+          messages={messages}
+          stream={streams[constants.ME]}
+          ref={node => { this.toolbarRef = node }}
+        />
         <Alerts alerts={alerts} dismiss={dismissAlert} />
         <Notifications notifications={notifications} />
-      <Input notify={notify} sendMessage={sendMessage} />
+        <div className="chat-container" ref={node => { this.chatRef = node }}>
+          <Chat
+            messages={messages}
+            videos={videos}
+            notify={notify}
+            sendMessage={sendMessage}
+            toolbarRef={this.toolbarRef}
+          />
+        </div>
         <div className="videos">
           <Video
+            videos={videos}
             active={active === constants.ME}
             onClick={toggleActive}
             stream={streams[constants.ME]}
@@ -59,6 +86,7 @@ export default class App extends React.PureComponent {
             />
           ))}
         </div>
-    </div>)
+      </div>
+    )
   }
 }

src/client/components/Chat.js

@@ -0,0 +1,103 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import socket from '../socket.js'
+import Input from './Input.js'
+
+export const MessagePropTypes = PropTypes.shape({
+  userId: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  timestamp: PropTypes.string.isRequired,
+  image: PropTypes.string
+})
+
+export default class Chat extends React.PureComponent {
+  static propTypes = {
+    messages: PropTypes.arrayOf(MessagePropTypes).isRequired,
+    videos: PropTypes.object.isRequired,
+    notify: PropTypes.func.isRequired,
+    sendMessage: PropTypes.func.isRequired,
+    toolbarRef: PropTypes.object.isRequired
+  }
+  handleCloseChat = e => {
+    const { toolbarRef } = this.props
+    toolbarRef.chatButton.click()
+  }
+  scrollToBottom = () => {
+    this.chatScroll.scrollTop = this.chatScroll.scrollHeight
+  }
+  componentDidMount () {
+    this.scrollToBottom()
+  }
+  componentDidUpdate () {
+    this.scrollToBottom()
+  }
+  render () {
+    const { messages, videos, notify, sendMessage } = this.props
+    return (
+      <div>
+        <div className="chat-header">
+          <div className="chat-close" onClick={this.handleCloseChat}>
+            <div className="button button-icon">
+              <span className="icon icon-arrow_forward" />
+            </div>
+          </div>
+          <div className="chat-title">Chat</div>
+        </div>
+        <div className="chat-history" ref={div => { this.chatScroll = div }}>
+
+          {messages.length ? (
+            messages.map((message, i) => (
+              <div key={i}>
+                {message.userId === socket.id ? (
+                  <div className="chat-item chat-item-me">
+                    <div className="message">
+                      <span className="message-user-name">
+                        {message.userId}
+                      </span>
+                      <span className="icon icon-schedule" />
+                      <time className="message-time">{message.timestamp}</time>
+                      <p className="message-text">{message.message}</p>
+                    </div>
+                    {message.image ? (
+                      <img className="chat-item-img" src={message.image} />
+                    ) : (
+                      <span className="chat-item-img icon icon-face" />
+                    )}
+                  </div>
+                ) : (
+                  <div className="chat-item chat-item-other">
+                    {message.image ? (
+                      <img className="chat-item-img" src={message.image} />
+                    ) : (
+                      <span className="chat-item-img icon icon-face" />
+                    )}
+                    <div className="message">
+                      <span className="message-user-name">
+                        {message.userId}
+                      </span>
+                      <span className="icon icon-schedule" />
+                      <time className="message-time">{message.timestamp}</time>
+                      <p className="message-text">{message.message}</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))
+          ) : (
+            <div className="chat-empty">
+              <span className="chat-empty-icon icon icon-question_answer" />
+              <div className="chat-empty-message">No Notifications</div>
+            </div>
+          )}
+
+        </div>
+
+        <Input
+          videos={videos}
+          notify={notify}
+          sendMessage={sendMessage}
+        />
+      </div>
+    )
+  }
+}

src/client/components/Input.js

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import socket from '../socket.js'
 
 export default class Input extends React.PureComponent {
   static propTypes = {
+    videos: PropTypes.object.isRequired,
     notify: PropTypes.func.isRequired,
     sendMessage: PropTypes.func.isRequired
   }
@@ -22,30 +24,85 @@ export default class Input extends React.PureComponent {
     this.submit()
   }
   handleKeyPress = e => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault()
       this.submit()
     }
   }
+  handleSmileClick = e => {
+    this.setState({
+      message: this.textArea.value + e.currentTarget.innerHTML
+    })
+  }
   submit = () => {
-    const { notify, sendMessage } = this.props
+    const { videos, notify, sendMessage } = this.props
     const { message } = this.state
+    if (message) {
       notify('You: ' + message)
       sendMessage(message)
+
+      const userId = socket.id
+      const timestamp = new Date().toLocaleString('en-US', {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: false
+      })
+      let image = null
+
+      // take snapshoot
+      try {
+        const video = videos[userId]
+        if (video) {
+          const canvas = document.createElement('canvas')
+          canvas.height = video.videoHeight
+          canvas.width = video.videoWidth
+          const avatar = canvas.getContext('2d')
+          avatar.drawImage(video, 0, 0, canvas.width, canvas.height)
+          image = canvas.toDataURL()
+        }
+      } catch (e) {}
+
+      const payload = { userId, message, timestamp, image }
+      socket.emit('new_message', payload)
+    }
     this.setState({ message: '' })
   }
   render () {
     const { message } = this.state
     return (
-      <form className="input" onSubmit={this.handleSubmit}>
+      <form className="chat-controls" onSubmit={this.handleSubmit}>
-        <input
+        <textarea
+          className="chat-controls-textarea"
           onChange={this.handleChange}
           onKeyPress={this.handleKeyPress}
-          placeholder="Enter your message..."
+          placeholder="Type a message"
-          type="text"
           value={message}
+          ref={node => { this.textArea = node }}
         />
-        <input type="submit" value="Send" />
+        <div className="chat-controls-buttons">
+          <input type="submit" value="Send"
+            className="chat-controls-buttons-send" />
+
+          <div className="chat-controls-buttons-wrapper">
+            <div className="emoji">
+              <div className="chat-controls-buttons-smiles">
+                <span className="icon icon-sentiment_satisfied" />
+                <div className="chat-controls-buttons-smiles-menu">
+                  <div className="chat-controls-buttons-smile"
+                    onClick={this.handleSmileClick}>😑</div>
+                  <div className="chat-controls-buttons-smile"
+                    onClick={this.handleSmileClick}>😕</div>
+                  <div className="chat-controls-buttons-smile"
+                    onClick={this.handleSmileClick}>😊</div>
+                  <div className="chat-controls-buttons-smile"
+                    onClick={this.handleSmileClick}>😎</div>
+                  <div className="chat-controls-buttons-smile"
+                    onClick={this.handleSmileClick}>💪</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </form>
     )
   }

src/client/components/Toolbar.js

@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import screenfull from 'screenfull'
+import { MessagePropTypes } from './Chat.js'
+import { StreamPropType } from './Video.js'
+
+export default class Toolbar extends React.PureComponent {
+  static propTypes = {
+    chatRef: PropTypes.object.isRequired,
+    messages: PropTypes.arrayOf(MessagePropTypes).isRequired,
+    stream: StreamPropType
+  }
+  constructor () {
+    super()
+    this.state = {
+      isChatOpen: false,
+      totalMessages: 0
+    }
+  }
+  handleChatClick = () => {
+    const { chatRef, messages } = this.props
+    chatRef.classList.toggle('show')
+    this.chatButton.classList.toggle('on')
+    this.setState({
+      isChatOpen: chatRef.classList.contains('show'),
+      totalMessages: messages.length
+    })
+  }
+  handleMicClick = () => {
+    const { stream } = this.props
+    stream.mediaStream.getAudioTracks().forEach(track => {
+      track.enabled = !track.enabled
+    })
+    this.mixButton.classList.toggle('on')
+  }
+  handleCamClick = () => {
+    const { stream } = this.props
+    stream.mediaStream.getVideoTracks().forEach(track => {
+      track.enabled = !track.enabled
+    })
+    this.camButton.classList.toggle('on')
+  }
+  handleFullscreenClick = () => {
+    if (screenfull.enabled) {
+      screenfull.toggle(this.fullscreenButton)
+      this.fullscreenButton.classList.toggle('on')
+    }
+  }
+  handleHangoutClick = () => {
+    window.location.href = '/'
+  }
+  render () {
+    const { messages, stream } = this.props
+    const { isChatOpen, totalMessages } = this.state
+
+    return (
+      <div className="toolbar active">
+        <div onClick={this.handleChatClick}
+          ref={node => { this.chatButton = node }}
+          className="button chat"
+          data-blink={messages.length !== totalMessages && !isChatOpen}
+          title="Chat"
+        >
+          <span className="icon icon-question_answer" />
+        </div>
+
+        {stream && (
+          <div>
+            <div onClick={this.handleMicClick}
+              ref={node => { this.mixButton = node }}
+              className="button mute-audio"
+              title="Mute audio"
+            >
+              <span className="on icon icon-mic_off" />
+              <span className="off icon icon-mic" />
+            </div>
+            <div onClick={this.handleCamClick}
+              ref={node => { this.camButton = node }}
+              className="button mute-video"
+              title="Mute video"
+            >
+              <span className="on icon icon-videocam_off" />
+              <span className="off icon icon-videocam" />
+            </div>
+          </div>
+        )}
+
+        <div onClick={this.handleFullscreenClick}
+          ref={node => { this.fullscreenButton = node }}
+          className="button fullscreen"
+          title="Enter fullscreen"
+        >
+          <span className="on icon icon-fullscreen_exit" />
+          <span className="off icon icon-fullscreen" />
+        </div>
+
+        <div onClick={this.handleHangoutClick}
+          className="button hangup"
+          title="Hangup"
+        >
+          <span className="icon icon-call_end" />
+        </div>
+      </div>
+    )
+  }
+}

src/client/components/Video.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import classnames from 'classnames'
-import { ME } from '../constants.js'
 import { MediaStream } from '../window.js'
+import socket from '../socket.js'
 
 export const StreamPropType = PropTypes.shape({
   mediaStream: PropTypes.instanceOf(MediaStream).isRequired,
@@ -11,6 +11,7 @@ export const StreamPropType = PropTypes.shape({
 
 export default class Video extends React.PureComponent {
   static propTypes = {
+    videos: PropTypes.object.isRequired,
     onClick: PropTypes.func,
     active: PropTypes.bool.isRequired,
     stream: StreamPropType,
@@ -29,7 +30,7 @@ export default class Video extends React.PureComponent {
     this.componentDidUpdate()
   }
   componentDidUpdate () {
-    const { stream } = this.props
+    const { videos, stream } = this.props
     const { video } = this.refs
     const mediaStream = stream && stream.mediaStream
     const url = stream && stream.url
@@ -37,20 +38,21 @@ export default class Video extends React.PureComponent {
       if (video.srcObject !== mediaStream) {
         this.refs.video.srcObject = mediaStream
       }
-    } else {
+    } else if (video.src !== url) {
-      if (video.src !== url) {
       video.src = url
     }
+    if (socket.id) {
+      videos[socket.id] = video
     }
   }
   render () {
-    const { active, userId } = this.props
+    const { active } = this.props
     const className = classnames('video-container', { active })
     return (
       <div className={className}>
         <video
+          id={`video-${socket.id}`}
           autoPlay
-          muted={userId === ME}
           onClick={this.handleClick}
           onLoadedMetadata={this.play}
           playsInline

src/client/components/__tests__/Input-test.js

@@ -5,12 +5,14 @@ import TestUtils from 'react-dom/test-utils'
 
 describe('components/Input', () => {
 
-  let component, node, notify, sendMessage
+  let component, node, videos, notify, sendMessage
   function render () {
+    videos = {}
     notify = jest.fn()
     sendMessage = jest.fn()
     component = TestUtils.renderIntoDocument(
       <Input
+        videos={videos}
         sendMessage={sendMessage}
         notify={notify}
       />
@@ -26,7 +28,7 @@ describe('components/Input', () => {
     let input
     beforeEach(() => {
       sendMessage.mockClear()
-      input = node.querySelector('input')
+      input = node.querySelector('textarea')
       TestUtils.Simulate.change(input, {
         target: { value: message }
       })
@@ -61,6 +63,14 @@ describe('components/Input', () => {
       })
     })
 
+    describe('handleSmileClick', () => {
+      it('adds smile to message', () => {
+        const div = node.querySelector('.chat-controls-buttons-smile')
+        TestUtils.Simulate.click(div)
+        expect(input.value).toBe('test message😑')
+      })
+    })
+
   })
 
 })

src/client/components/__tests__/Toolbar-test.js

@@ -0,0 +1,87 @@
+jest.mock('../../window.js')
+import React from 'react'
+import ReactDOM from 'react-dom'
+import TestUtils from 'react-dom/test-utils'
+import Toolbar from '../Toolbar.js'
+import { MediaStream } from '../../window.js'
+
+describe('components/Video', () => {
+
+  class ToolbarWrapper extends React.PureComponent {
+    static propTypes = Toolbar.propTypes
+    constructor () {
+      super()
+      this.state = {}
+    }
+    render () {
+      return <Toolbar
+        chatRef={this.props.chatRef}
+        messages={this.props.messages}
+        stream={this.state.stream || this.props.stream}
+      />
+    }
+  }
+
+  let component, node, chatRef, mediaStream, url
+  function render () {
+    mediaStream = new MediaStream()
+    chatRef = ReactDOM.findDOMNode(
+      TestUtils.renderIntoDocument(<div />)
+    )
+    component = TestUtils.renderIntoDocument(
+      <ToolbarWrapper
+        chatRef={chatRef}
+        messages={[]}
+        stream={{ mediaStream, url }}
+      />
+    )
+    node = ReactDOM.findDOMNode(component)
+  }
+
+  describe('render', () => {
+    it('should not fail', () => {
+      render()
+    })
+  })
+
+  describe('handleChatClick', () => {
+    it('toggle chat', () => {
+      const button = node.querySelector('.chat')
+      TestUtils.Simulate.click(button)
+      expect(button.classList.contains('on')).toBe(true)
+    })
+  })
+
+  describe('handleMicClick', () => {
+    it('toggle mic', () => {
+      const button = node.querySelector('.mute-audio')
+      TestUtils.Simulate.click(button)
+      expect(button.classList.contains('on')).toBe(true)
+    })
+  })
+
+  describe('handleCamClick', () => {
+    it('toggle cam', () => {
+      const button = node.querySelector('.mute-video')
+      TestUtils.Simulate.click(button)
+      expect(button.classList.contains('on')).toBe(true)
+    })
+  })
+
+  describe('handleFullscreenClick', () => {
+    it('toggle fullscreen', () => {
+      const button = node.querySelector('.fullscreen')
+      TestUtils.Simulate.click(button)
+      expect(button.classList.contains('on')).toBe(false)
+    })
+  })
+
+  describe('handleHangoutClick', () => {
+    it('hangout', () => {
+      const button = node.querySelector('.hangup')
+      TestUtils.Simulate.click(button)
+      expect(window.location.href).toBe('http://localhost/')
+    })
+  })
+
+})

src/client/components/__tests__/Video-test.js

@@ -14,6 +14,7 @@ describe('components/Video', () => {
     }
     render () {
       return <Video
+        videos={this.props.videos}
         active={this.props.active}
         stream={this.state.stream || this.props.stream}
         onClick={this.props.onClick}
@@ -22,12 +23,14 @@ describe('components/Video', () => {
     }
   }
 
-  let component, video, onClick, mediaStream, url
+  let component, videos, video, onClick, mediaStream, url
   function render () {
+    videos = {}
     onClick = jest.fn()
     mediaStream = new MediaStream()
     component = TestUtils.renderIntoDocument(
       <VideoWrapper
+        videos={videos}
         active
         stream={{ mediaStream, url }}
         onClick={onClick}

src/client/constants.js

@@ -17,6 +17,9 @@ export const NOTIFY = 'NOTIFY'
 export const NOTIFY_DISMISS = 'NOTIFY_DISMISS'
 export const NOTIFY_CLEAR = 'NOTIFY_CLEAR'
 
+export const MESSAGE_ADD = 'MESSAGE_ADD'
+export const MESSAGES_HISTORY = 'MESSAGES_HISTORY'
+
 export const PEER_ADD = 'PEER_ADD'
 export const PEER_REMOVE = 'PEER_REMOVE'
 export const PEERS_DESTROY = 'PEERS_DESTROY'
@@ -30,6 +33,8 @@ export const PEER_EVENT_DATA = 'data'
 
 export const SOCKET_EVENT_SIGNAL = 'signal'
 export const SOCKET_EVENT_USERS = 'users'
+export const SOCKET_EVENT_MESSAGES = 'messages'
+export const SOCKET_EVENT_NEW_MESSAGE = 'new_message'
 
 export const STREAM_ADD = 'PEER_STREAM_ADD'
 export const STREAM_REMOVE = 'PEER_STREAM_REMOVE'

src/client/containers/App.js

@@ -12,6 +12,7 @@ function mapStateToProps (state) {
     peers: state.peers,
     alerts: state.alerts,
     notifications: state.notifications,
+    messages: state.messages,
     active: state.active
   }
 }

src/client/reducers/__tests__/messages-test.js

@@ -0,0 +1,28 @@
+import * as ChatActions from '../../actions/ChatActions.js'
+import messages from '../messages.js'
+
+describe('reducers/messages', () => {
+
+  describe('addMessage', () => {
+    it('add message to chat', () => {
+      const payload = {
+        userId: 'test',
+        message: 'hello',
+        timestamp: new Date(),
+        image: null
+      }
+      let state = messages()
+      state = messages(state, ChatActions.addMessage(payload))
+      expect(state).toEqual([payload])
+    })
+  })
+
+  describe('messageHistory', () => {
+    it('get chat message hisotry', () => {
+      let state = messages()
+      state = messages(state, ChatActions.loadHistory([]))
+      expect(state).toEqual([])
+    })
+  })
+
+})

src/client/reducers/index.js

@@ -1,6 +1,7 @@
 import active from './active.js'
 import alerts from './alerts.js'
 import notifications from './notifications.js'
+import messages from './messages.js'
 import peers from './peers.js'
 import streams from './streams.js'
 import { combineReducers } from 'redux'
@@ -9,6 +10,7 @@ export default combineReducers({
   active,
   alerts,
   notifications,
+  messages,
   peers,
   streams
 })

src/client/reducers/messages.js

@@ -0,0 +1,17 @@
+import * as constants from '../constants.js'
+import Immutable from 'seamless-immutable'
+
+const defaultState = Immutable([])
+
+export default function messages (state = defaultState, action) {
+  switch (action && action.type) {
+    case constants.MESSAGE_ADD:
+      const messages = state.asMutable()
+      messages.push(action.payload)
+      return Immutable(messages)
+    case constants.MESSAGES_HISTORY:
+      return Immutable(action.messages)
+    default:
+      return state
+  }
+}

src/res/fonts/icons.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icons" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="870.4" descent="-153.6" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="0" d="" />
+<glyph unicode="&#xe029;" glyph-name="mic" d="M738 383.333h72c0-146-116-266-256-286v-140h-84v140c-140 20-256 140-256 286h72c0-128 108-216 226-216s226 88 226 216zM512 255.333c-70 0-128 58-128 128v256c0 70 58 128 128 128s128-58 128-128v-256c0-70-58-128-128-128z" />
+<glyph unicode="&#xe02b;" glyph-name="mic_off" d="M182 725.333l714-714-54-54-178 178c-32-20-72-32-110-38v-140h-84v140c-140 20-256 140-256 286h72c0-128 108-216 226-216 34 0 68 8 98 22l-70 70c-8-2-18-4-28-4-70 0-128 58-128 128v32l-256 256zM640 377.333l-256 254v8c0 70 58 128 128 128s128-58 128-128v-262zM810 383.333c0-50-14-98-38-140l-52 54c12 26 18 54 18 86h72z" />
+<glyph unicode="&#xe04b;" glyph-name="videocam" d="M726 405.333l170 170v-468l-170 170v-150c0-24-20-42-44-42h-512c-24 0-42 18-42 42v428c0 24 18 42 42 42h512c24 0 44-18 44-42v-150z" />
+<glyph unicode="&#xe04c;" glyph-name="videocam_off" d="M140 767.333l756-756-54-54-136 136c-6-4-16-8-24-8h-512c-24 0-42 18-42 42v428c0 24 18 42 42 42h32l-116 116zM896 575.333v-456l-478 478h264c24 0 44-18 44-42v-150z" />
+<glyph unicode="&#xe0b1;" glyph-name="call_end" d="M512 469.333c-68 0-134-10-196-30v-132c0-16-10-34-24-40-42-20-80-46-114-78-8-8-18-12-30-12s-22 4-30 12l-106 106c-8 8-12 18-12 30s4 22 12 30c130 124 306 200 500 200s370-76 500-200c8-8 12-18 12-30s-4-22-12-30l-106-106c-8-8-18-12-30-12s-22 4-30 12c-34 32-72 58-114 78-14 6-24 20-24 38v132c-62 20-128 32-196 32z" />
+<glyph unicode="&#xe5c8;" glyph-name="arrow_forward" d="M512 683.333l342-342-342-342-60 60 238 240h-520v84h520l-238 240z" />
+<glyph unicode="&#xe5d0;" glyph-name="fullscreen" d="M598 639.333h212v-212h-84v128h-128v84zM726 127.333v128h84v-212h-212v84h128zM214 427.333v212h212v-84h-128v-128h-84zM298 255.333v-128h128v-84h-212v212h84z" />
+<glyph unicode="&#xe5d1;" glyph-name="fullscreen_exit" d="M682 511.333h128v-84h-212v212h84v-128zM598 43.333v212h212v-84h-128v-128h-84zM342 511.333v128h84v-212h-212v84h128zM214 171.333v84h212v-212h-84v128h-128z" />
+<glyph unicode="&#xe5d4;" glyph-name="more_vert" d="M512 171.333c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 427.333c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 511.333c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />
+<glyph unicode="&#xe813;" glyph-name="sentiment_satisfied" d="M512 171.333c64 0 118 34 148 84h70c-34-88-118-148-218-148s-184 60-218 148h70c30-50 84-84 148-84zM512-0.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 767.333c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426zM298 447.333c0 36 28 64 64 64s64-28 64-64-28-64-64-64-64 28-64 64zM598 447.333c0 36 28 64 64 64s64-28 64-64-28-64-64-64-64 28-64 64z" />
+<glyph unicode="&#xe87c;" glyph-name="face" d="M512-0.667c188 0 342 154 342 342 0 34-6 66-14 96-30-8-62-10-96-10-144 0-270 70-348 180-42-102-124-186-224-230-2-12-2-24-2-36 0-188 154-342 342-342zM512 767.333c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426zM640 351.333c30 0 54-22 54-52s-24-54-54-54-54 24-54 54 24 52 54 52zM384 351.333c30 0 54-22 54-52s-24-54-54-54-54 24-54 54 24 52 54 52z" />
+<glyph unicode="&#xe8af;" glyph-name="question_answer" d="M726 341.333c0-24-20-42-44-42h-426l-170-172v598c0 24 18 42 42 42h554c24 0 44-18 44-42v-384zM896 597.333c24 0 42-18 42-42v-640l-170 170h-470c-24 0-42 18-42 42v86h554v384h86z" />
+<glyph unicode="&#xe8b4;" glyph-name="room" d="M512 363.333c58 0 106 48 106 106s-48 106-106 106-106-48-106-106 48-106 106-106zM512 767.333c166 0 298-132 298-298 0-224-298-554-298-554s-298 330-298 554c0 166 132 298 298 298z" />
+<glyph unicode="&#xe8b5;" glyph-name="schedule" d="M534 555.333v-224l192-114-32-54-224 136v256h64zM512-0.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 767.333c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
+</font></defs></svg>

src/scss/_alert.scss

@@ -0,0 +1,32 @@
+.alert {
+  background-color: black;
+  background-color: rgba(0, 0, 0, 0.3);
+  left: 0;
+  opacity: 1;
+  position: fixed;
+  right: 0;
+  text-align: center;
+  top: 0;
+  transition: visibility 100ms ease-in, opacity 100ms ease-in;
+  z-index: 4;
+
+  span {
+    display: inline-block;
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+
+  button {
+    line-height: 1.4rem;
+    border: none;
+    border-radius: 0.3rem;
+    color: $color-info;
+    background-color: $color-fg;
+    vertical-align: middle;
+  }
+}
+
+.alert.hidden {
+  opacity: 0;
+  visibility: hidden;
+}

src/scss/_chat.scss

@@ -0,0 +1,276 @@
+.chat-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  -ms-transform: translateX(100%);
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0, 1), box-shadow 0.5s cubic-bezier(0.55, 0, 0, 1);
+  transition: transform 0.5s cubic-bezier(0.55, 0, 0, 1), box-shadow 0.5s cubic-bezier(0.55, 0, 0, 1);
+  width: 320px;
+  margin: 0 auto;
+  z-index: 3;
+
+  &.show {
+    -ms-transform: none;
+    -webkit-transform: none;
+    transform: none;
+    box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.19), 0 1px 6px rgba(0, 0, 0, 0.12);
+  }
+
+  @media (max-width: 375.98px) {
+    &.show {
+      width: 100% !important;
+    }
+  }
+}
+
+.chat-header {
+  background: #42a7a1;
+  color: #fff;
+  height: 52px;
+  line-height: 52px;
+
+  .chat-close {
+    font-size: 24px;
+    height: 100%;
+    line-height: 24px;
+    padding: 12px;
+    text-align: center;
+    float: left;
+    width: 64px;
+    cursor: pointer;
+
+    .chat-button {
+      float: right;
+      a {
+        font-size: 24px;
+        color: #fff;
+      }
+    }
+  }
+
+  .chat-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #fff;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+  }
+}
+
+.chat-history {
+  bottom: 0;
+  left: 0;
+  overflow-y: auto;
+  position: absolute;
+  right: 0;
+  top: 52px;
+  bottom: 130px;
+  padding: 20px 20px 0;
+  background-color: #fff;
+
+  .chat-empty {
+    color: #f6f6f6;
+    left: 0;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+
+    .chat-empty-icon {
+      font-size: 88px;
+    }
+
+    .chat-empty-message {
+      font-size: 15px;
+      font-weight: bold;
+    }
+  }
+
+  .chat-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 15px;
+
+    .chat-item-img {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+
+      &.icon {
+        font-size: 36px;
+        color: #777;
+      }
+    }
+
+    .message {
+      position: relative;
+      padding: 10px;
+      border-radius: 5px;
+      background: #f6f6f6;
+      width: calc(100% - 40px);
+
+      div {
+        font-size: 13px;
+        color: #777;
+        word-wrap: break-word;
+      }
+
+      .message-user-name {
+        font-size: 12px;
+        font-weight: bold;
+        color: #000;
+      }
+
+      .icon:before {
+        color: #999;
+        font-size: 11px;
+        margin: 0 2px;
+      }
+
+      .message-time {
+        font-size: 11px;
+        color: #999;
+      }
+
+      .message-text {
+        font-size: 13px;
+        color: #777;
+        overflow: hidden;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        margin: 5px 0;
+      }
+    }
+
+    &.chat-item-me {
+      .message {
+        margin-right: 15px;
+
+        &::after {
+          left: 100%;
+          border: solid transparent;
+          border-left-color: #f6f6f6;
+          content: "";
+          height: 0;
+          width: 0;
+          position: absolute;
+          pointer-events: none;
+          border-width: 10px;
+          top: 10px;
+        }
+      }
+    }
+
+    &.chat-item-other {
+      .message {
+        margin-left: 15px;
+
+        &::before {
+          right: 100%;
+          border: solid transparent;
+          border-right-color: #f6f6f6;
+          content: "";
+          height: 0;
+          width: 0;
+          position: absolute;
+          pointer-events: none;
+          border-width: 10px;
+          top: 10px;
+        }
+      }
+    }
+  }
+}
+
+.chat-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin-top: 10px;
+  background-color: #fff;
+  border-top: 1px solid #f6f6f6;
+  padding: 20px;
+
+  .chat-controls-textarea {
+    width: 100%;
+    border: none;
+    border-radius: 5px;
+    resize: none;
+    outline: none;
+    max-height: 80px;
+    height: 50px;
+    overflow: auto;
+    color: #777;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .chat-controls-buttons {
+    margin-top: 15px;
+    display: flex;
+    justify-content: space-between;
+
+    .chat-controls-buttons-send {
+      padding: 0 15px;
+      background: #407cf7;
+      line-height: 25px;
+      display: inline-block;
+      color: #fff;
+      text-decoration: none;
+      border-radius: 3px;
+      border: 0;
+      cursor: pointer;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .chat-controls-buttons-wrapper {
+      display: flex;
+    }
+  }
+}
+
+.emoji {
+  display: flex;
+
+  .chat-controls-buttons-smiles {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .icon {
+      color: #777;
+      z-index: 1;
+    }
+
+    .chat-controls-buttons-smiles-menu {
+      background-color: #fff;
+      display: none;
+      position: absolute;
+      width: 140px;
+      height: 50px;
+      line-height: 50px;
+
+      .chat-controls-buttons-smile {
+        margin-left: 5px;
+      }
+    }
+
+    &:hover {
+      .chat-controls-buttons-smiles-menu {
+        display: flex;
+        right: 10px;
+      }
+    }
+  }
+}

src/scss/_fonts.scss

@@ -1,23 +1,24 @@
 @font-face {
   font-family: 'icons';
-  src: url('./fonts/icons.eot?37351711');
+  src: url('../res/fonts/icons.eot?tcgv6b');
-  src: url('./fonts/icons.eot?37351711#iefix') format('embedded-opentype'),
+  src: url('../res/fonts/icons.eot?tcgv6b#iefix') format('embedded-opentype'),
-       url('./fonts/icons.woff?37351711') format('woff'),
+       url('../res/fonts/icons.woff?tcgv6b') format('woff'),
-       url('./fonts/icons.ttf?37351711') format('truetype'),
+       url('../res/fonts/icons.ttf?tcgv6b') format('truetype'),
-       url('./fonts/icons.svg?37351711#icons') format('svg');
+       url('../res/fonts/icons.svg?tcgv6b#icons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
+
 // Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it.
 // Note, that will break hinting! In other OS-es font will be not as sharp as it could be
 // @media screen and (-webkit-min-device-pixel-ratio:0) {
 //   @font-face {
 //     font-family: 'icons';
-//     src: url('../font/icons.svg?37351711#icons') format('svg');
+//     src: url('./fonts/icons.svg?tcgv6b#icons') format('svg');
 //   }
 // }
 
-[class^="icon-"]:before, [class*=" icon-"]:before {
+[class^="icon-"], [class*=" icon-"] {
   font-family: "icons";
   font-style: normal;
   font-weight: normal;
@@ -25,8 +26,6 @@
 
   display: inline-block;
   text-decoration: inherit;
-  width: 1em;
-  margin-right: .2em;
   text-align: center;
   /* opacity: .8; */
 
@@ -37,10 +36,6 @@
   /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
 
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: .2em;
-
   /* you can be more comfortable with increased icons size */
   /* font-size: 120%; */
 
@@ -52,19 +47,45 @@
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
-.icon-down-open-big:before { content: '\e800'; } /* '' */
+.icon-schedule:before {
-.icon-down-open:before { content: '\e801'; } /* '' */
+  content: "\e8b5";
-.icon-mouse:before { content: '\e802'; } /* '' */
+}
-.icon-keyboard:before { content: '\e803'; } /* '' */
+.icon-arrow_forward:before {
-.icon-left-open:before { content: '\e804'; } /* '' */
+  content: "\e5c8";
-.icon-right-open:before { content: '\e805'; } /* '' */
+}
-.icon-up-open:before { content: '\e806'; } /* '' */
+.icon-call_end:before {
-.icon-arrows:before { content: '\e807'; } /* '' */
+  content: "\e0b1";
-.icon-up-hand:before { content: '\e808'; } /* '' */
+}
-.icon-check:before { content: '\e80b'; } /* '' */
+.icon-face:before {
-.icon-cancel:before { content: '\e80c'; } /* '' */
+  content: "\e87c";
-.icon-level-up:before { content: '\e80d'; } /* '' */
+}
-.icon-login:before { content: '\e80e'; } /* '' */
+.icon-question_answer:before {
-.icon-left-open-big:before { content: '\e81d'; } /* '' */
+  content: "\e8af";
-.icon-right-open-big:before { content: '\e81e'; } /* '' */
+}
-.icon-up-open-big:before { content: '\e81f'; } /* '' */
+.icon-fullscreen:before {
+  content: "\e5d0";
+}
+.icon-fullscreen_exit:before {
+  content: "\e5d1";
+}
+.icon-room:before {
+  content: "\e8b4";
+}
+.icon-mic:before {
+  content: "\e029";
+}
+.icon-mic_off:before {
+  content: "\e02b";
+}
+.icon-more_vert:before {
+  content: "\e5d4";
+}
+.icon-sentiment_satisfied:before {
+  content: "\e813";
+}
+.icon-videocam:before {
+  content: "\e04b";
+}
+.icon-videocam_off:before {
+  content: "\e04c";
+}

src/scss/_notification.scss

@@ -0,0 +1,24 @@
+.notifications {
+  font-family: $font-monospace;
+  font-size: 10px;
+  left: 1rem;
+  position: fixed;
+  right: 1rem;
+  text-align: right;
+  top: 1rem;
+  z-index: 3;
+
+  .notification {
+    color: $color-info;
+    padding: 0.25rem;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  .notification.error {
+    color: $color-error;
+  }
+
+  .notification.warning {
+    color: $color-warning;
+  }
+}

src/scss/_toolbar.scss

@@ -0,0 +1,121 @@
+.toolbar {
+  bottom: 20px;
+  left: 6vw;
+  position: absolute;
+  z-index: 3;
+
+  /* on icons are hidden by default */
+
+  .icon {
+    &.on {
+      display: none;
+    }
+    &.off {
+      display: block;
+    }
+    font-size: 24px;
+    color: #fff;
+    position: absolute;
+    top: 12px;
+    left: 12px;
+  }
+
+  /* off icons are displayed by default */
+
+  /* on icons are displayed when parent svg has class 'on' */
+
+  .button {
+    &.on .icon {
+      &.on {
+        display: block;
+      }
+      &.off {
+        display: none;
+      }
+    }
+    width: 48px;
+    height: 48px;
+    border-radius: 48px;
+    box-shadow: 2px 2px 24px #444;
+    display: block;
+    margin: 0 0 3vh 0;
+    transform: translateX(calc(-6vw - 96px));
+    transition: all .1s;
+    transition-timing-function: ease-in-out;
+    &:hover {
+      box-shadow: 4px 4px 48px #666;
+      cursor: pointer;
+    }
+  }
+
+  /* off icons are hidden when parent svg has class 'on' */
+
+  &.active .button {
+    transform: translateX(0);
+  }
+
+  .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;
+    }
+  }
+
+  .mute-audio {
+    &:hover, &.on {
+      background: #407cf7;
+    }
+  }
+
+  .mute-video {
+    &:hover, &.on {
+      background: #407cf7;
+    }
+  }
+
+  .fullscreen {
+    &:hover, &.on {
+      background: #407cf7;
+    }
+  }
+
+  .hangup {
+    &:hover {
+      background: #dd2c00;
+    }
+  }
+}
+
+@-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;
+  }
+}

src/scss/_variables.scss

@@ -0,0 +1,12 @@
+$font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-monospace: Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
+
+$color-bg: #086788;
+$color-fg: #07A0C3;
+$color-btn: #FFF1D0;
+$icon-size: 48px;
+
+$color-primary: white;
+$color-info: #31EF40;
+$color-warning: #F0C808;
+$color-error: #EE7600;

src/scss/_video.scss

@@ -0,0 +1,46 @@
+.videos {
+  position: fixed;
+  height: 100px;
+  bottom: 15px;
+  right: 0px;
+  text-align: right;
+
+  $video-size: 100px;
+
+  .video-container {
+    background-color: black;
+    box-shadow: 0px 0px 5px black;
+    border-radius: 10px;
+    display: inline-block;
+    margin-right: 10px;
+    width: $video-size;
+    height: 100%;
+    z-index: 2;
+
+    video {
+      border-radius: 10px;
+      cursor: pointer;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .video-container.active {
+    background-color: transparent;
+    box-shadow: none;
+    border-radius: 0;
+    position: fixed;
+    width: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+
+    video {
+      border-radius: 0;
+      cursor: inherit;
+    }
+  }
+}

src/scss/fonts/icons.svg

@@ -1,27 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
-<defs>
-<font id="icons" horiz-adv-x="1000" >
-<font-face font-family="icons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
-<missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="down-open-big" unicode="&#xe800;" d="m63 570l370-356 372 356q22 26 48 0 26-22 0-48l-396-392q-22-22-48 0l-396 392q-26 26 0 48 24 24 50 0z" horiz-adv-x="866" />
-<glyph glyph-name="down-open" unicode="&#xe801;" d="m564 422l-234-224q-18-18-40-18t-40 18l-234 224q-16 16-16 41t16 41q38 38 78 0l196-188 196 188q40 38 78 0 16-16 16-41t-16-41z" horiz-adv-x="580" />
-<glyph glyph-name="mouse" unicode="&#xe802;" d="m551 130q28-80-17-157t-139-111q-94-28-175 9t-103 117l-106 384q-20 68 6 134t84 106l-96 186q-14 34 14 48 30 18 48-14l98-192q80 22 154-16t102-116z m-324 274q28 10 40 36t4 54q-10 28-35 41t-53 5q-28-10-40-36t-4-54q10-28 35-41t53-5z" horiz-adv-x="561" />
-<glyph glyph-name="keyboard" unicode="&#xe803;" d="m930 650q28 0 49-21t21-49l0-460q0-30-21-50t-49-20l-860 0q-28 0-49 20t-21 50l0 460q0 28 21 49t49 21l860 0z m-380-100l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-50-250l0 100-100 0 0-100 100 0z m550 0l0 100-500 0 0-100 500 0z m150 0l0 100-100 0 0-100 100 0z m-150 150l100 0 0 100-100 0 0-100z m150 150l0 100-200 0 0-100 200 0z" horiz-adv-x="1000" />
-<glyph glyph-name="left-open" unicode="&#xe804;" d="m242 626q14 16 39 16t41-16q38-36 0-80l-186-196 186-194q38-44 0-80-16-16-40-16t-40 16l-226 236q-16 16-16 38 0 24 16 40 206 214 226 236z" horiz-adv-x="341" />
-<glyph glyph-name="right-open" unicode="&#xe805;" d="m98 626l226-236q16-16 16-40 0-22-16-38l-226-236q-16-16-40-16t-40 16q-36 36 0 80l186 194-186 196q-36 44 0 80 16 16 41 16t39-16z" horiz-adv-x="340" />
-<glyph glyph-name="up-open" unicode="&#xe806;" d="m564 280q16-16 16-41t-16-41q-38-38-78 0l-196 188-196-188q-40-38-78 0-16 16-16 41t16 41l234 224q16 16 40 16t40-16z" horiz-adv-x="580" />
-<glyph glyph-name="arrows" unicode="&#xe807;" d="m784 111l127 128 0-336-335 0 128 130-128 127 79 79z m-431 686l-129-127 128-127-80-80-126 128-128-129 0 335 335 0z m0-637l-129-127 129-130-335 0 0 336 128-128 128 128z m558 637l0-335-127 129-128-128-79 80 127 127-128 127 335 0z" horiz-adv-x="928" />
-<glyph glyph-name="up-hand" unicode="&#xe808;" d="m714-43q0 15-10 25t-25 11-26-11-10-25 10-25 26-11 25 11 10 25z m72 426q0 106-93 106-15 0-32-3-9 17-29 27t-41 9-39-10q-27 30-66 30-14 0-31-6t-26-14v185q0 29-22 50t-50 22q-28 0-50-22t-21-50v-321q-11 0-27 8t-31 19-38 18-47 8q-37 0-55-25t-17-64q0-13 78-50 25-14 36-21 36-22 81-62 45-40 59-57 32-38 32-78v-18h357v18q0 40 18 93t36 108 18 100z m71 3q0-74-38-179-33-92-33-125v-161q0-29-21-50t-51-21h-357q-29 0-50 21t-21 50v161q0 6-3 12t-8 13-10 13-12 13-12 12-12 10-10 8q-41 36-72 56-11 7-34 18t-40 21-36 23-27 30-10 39q0 70 37 115t106 46q38 0 71-13v209q0 58 43 101t100 42q58 0 101-42t42-101v-94q35-2 66-21 12 2 24 2 57 0 100-34 77 1 122-47t45-127z" horiz-adv-x="857.1" />
-<glyph glyph-name="check" unicode="&#xe80b;" d="m249 0q-34 0-56 28l-180 236q-16 24-12 52t26 46 51 14 47-28l118-154 296 474q16 24 43 30t53-8q24-16 30-43t-8-53l-350-560q-20-32-56-32z" horiz-adv-x="667" />
-<glyph glyph-name="cancel" unicode="&#xe80c;" d="m452 194q18-18 18-43t-18-43q-18-16-43-16t-43 16l-132 152-132-152q-18-16-43-16t-43 16q-16 18-16 43t16 43l138 156-138 158q-16 18-16 43t16 43q18 16 43 16t43-16l132-152 132 152q18 16 43 16t43-16q18-18 18-43t-18-43l-138-158z" horiz-adv-x="470" />
-<glyph glyph-name="level-up" unicode="&#xe80d;" d="m200 350l0-90-200 160 200 170 0-100 550 0q40 0 70-29t30-71l0-280-140 0 0 240-510 0z" horiz-adv-x="850" />
-<glyph glyph-name="login" unicode="&#xe80e;" d="m800 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-450 0q-40 0-69 30t-29 70l0 100 98 0 0-100 450 0 0 700-450 0 0-150-98 0 0 150q0 42 29 71t69 29l450 0z m-350-670l0 120-450 0 0 150 450 0 0 120 200-194z" horiz-adv-x="900" />
-<glyph glyph-name="left-open-big" unicode="&#xe81d;" d="m452-20q26-26 0-48-26-26-48 0l-392 394q-24 24 0 50l392 394q22 26 48 0 26-22 0-48l-358-372z" horiz-adv-x="465" />
-<glyph glyph-name="right-open-big" unicode="&#xe81e;" d="m13-20l358 370-358 372q-26 26 0 48 26 26 48 0l392-394q24-26 0-50l-392-394q-22-26-48 0-26 22 0 48z" horiz-adv-x="465" />
-<glyph glyph-name="up-open-big" unicode="&#xe81f;" d="m804 130l-372 358-370-358q-26-22-50 0-24 24 0 50l396 390q26 26 48 0l396-390q24-26 0-50-26-22-48 0z" horiz-adv-x="864" />
-</font>
-</defs>
-</svg>

src/scss/style.scss

@@ -1,17 +1,5 @@
-@import "_fonts";
+@import '_fonts';
-
+@import '_variables';
-$font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-monospace: Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
-
-$color-bg: #086788;
-$color-fg: #07A0C3;
-$color-btn: #FFF1D0;
-$icon-size: 48px;
-
-$color-primary: white;
-$color-info: #31EF40;
-$color-warning: #F0C808;
-$color-error: #EE7600;
 
 *,
 *:before,
@@ -150,134 +138,11 @@ body.call {
 }
 
 .app {
-
+  @import '_alert';
-  .alert {
+  @import '_notification';
-    background-color: black;
+  @import '_video';
-    background-color: rgba(0, 0, 0, 0.3);
+  @import '_chat';
-    left: 0;
+  @import '_toolbar';
-    opacity: 1;
-    position: fixed;
-    right: 0;
-    text-align: center;
-    top: 0;
-    transition: visibility 100ms ease-in, opacity 100ms ease-in;
-    z-index: 4;
-
-    span {
-      display: inline-block;
-      margin: 1rem 0;
-      padding: 0 1rem;
-    }
-
-    button {
-      line-height: 1.4rem;
-      border: none;
-      border-radius: 0.3rem;
-      color: $color-info;
-      background-color: $color-fg;
-      vertical-align: middle;
-    }
-  }
-
-  .alert.hidden {
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  .notifications {
-    font-family: $font-monospace;
-    font-size: 10px;
-    left: 1rem;
-    position: fixed;
-    right: 1rem;
-    text-align: right;
-    top: 1rem;
-    z-index: 3;
-
-    .notification {
-      color: $color-info;
-      padding: 0.25rem;
-      background-color: rgba(0, 0, 0, 0.2);
-    }
-
-    .notification.error {
-      color: $color-error;
-    }
-
-    .notification.warning {
-      color: $color-warning;
-    }
-
-  }
-
-  .videos {
-    position: fixed;
-    height: 100px;
-    bottom: 15px;
-    right: 0px;
-    text-align: right;
-
-    $video-size: 100px;
-
-    .video-container {
-      background-color: black;
-      box-shadow: 0px 0px 5px black;
-      border-radius: 10px;
-      display: inline-block;
-      margin-right: 10px;
-      width: $video-size;
-      height: 100%;
-      z-index: 2;
-
-      video {
-        border-radius: 10px;
-        cursor: pointer;
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .video-container.active {
-      background-color: transparent;
-      box-shadow: none;
-      border-radius: 0;
-      position: fixed;
-      width: 100%;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      z-index: -1;
-
-      video {
-        border-radius: 0;
-        cursor: inherit;
-      }
-    }
-  }
-
-  .input {
-    position: fixed;
-    left: 10pxpx;
-    bottom: 15px;
-    z-index: 3;
-
-    input {
-      box-shadow: 0px 0px 5px black;
-      // background-color: black;
-      background-color: #333;
-      border: none;
-      color: #ccc;
-      padding: 0.5rem;
-      font-family: $font-monospace;
-    }
-
-    input[type="submit"] {
-
-    }
-  }
-
 }
 
 .fade-enter {

src/server/__tests__/socket-test.js

@@ -83,8 +83,9 @@ describe('server/socket', () => {
       it('should emit users', () => {
         socket.emit('ready', 'room3')
 
-        expect(io.to.mock.calls).toEqual([[ 'room3' ]])
+        expect(io.to.mock.calls).toEqual([[ 'room3' ], [ 'room3' ]])
-        expect(io.to('room3').emit.mock.calls).toEqual([[
+        expect(io.to('room3').emit.mock.calls).toEqual([
+          [
             'users', {
               initiator: 'socket0',
               users: [{
@@ -95,7 +96,9 @@ describe('server/socket', () => {
                 id: 'socket2'
               }]
             }
-        ]])
+          ],
+          ['messages', []]
+        ])
       })
     })
   })

src/server/socket.js

@@ -2,15 +2,22 @@
 const debug = require('debug')('peer-calls:socket')
 const _ = require('underscore')
 
+const messages = {}
+
 module.exports = function (socket, io) {
   socket.on('signal', payload => {
-    // debug('signal: %s, payload: %o', socket.id, payload);
+    // debug('signal: %s, payload: %o', socket.id, payload)
     io.to(payload.userId).emit('signal', {
       userId: socket.id,
       signal: payload.signal
     })
   })
 
+  socket.on('new_message', payload => {
+    addMesssage(socket.room, payload)
+    io.to(socket.room).emit('new_message', payload)
+  })
+
   socket.on('ready', roomName => {
     debug('ready: %s, room: %s', socket.id, roomName)
     if (socket.room) socket.leave(socket.room)
@@ -19,11 +26,17 @@ module.exports = function (socket, io) {
     socket.room = roomName
 
     let users = getUsers(roomName)
-    debug('ready: %s, room: %s, users: %o', socket.id, roomName, users)
+    let messages = getMesssages(roomName)
+
+    debug('ready: %s, room: %s, users: %o, messages: %o',
+      socket.id, roomName, users, messages)
+
     io.to(roomName).emit('users', {
       initiator: socket.id,
       users
     })
+
+    io.to(roomName).emit('messages', messages)
   })
 
   function getUsers (roomName) {
@@ -31,4 +44,15 @@ module.exports = function (socket, io) {
       return { id }
     })
   }
+
+  function getMesssages (roomName) {
+    if (_.isUndefined(messages[roomName])) {
+      messages[roomName] = []
+    }
+    return messages[roomName]
+  }
+
+  function addMesssage (roomName, payload) {
+    getMesssages(roomName).push(payload)
+  }
 }