WIP - including watch

.gitignore

@@ -1,2 +1,3 @@
 client/dist/
 client/index.html
+node_modules

client/src/css/main-window.scss

@@ -1,4 +1,8 @@
 .main-window {
+	display: flex;
+    justify-content: center;
+    align-items: center;
+	flex-direction: column;
 	padding-top: 80px;
 	font-size: 1.75em;
 

client/src/css/timer.scss

@@ -0,0 +1,5 @@
+.Timer {
+    text-align: center;
+    font-size: 40px;
+    padding: 20px;
+}

client/src/js/CallWindow.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'proptypes';
 import classnames from 'classnames';
 import _ from 'lodash';
+import Timer from './Timer';
 
 class CallWindow extends Component {
   constructor(props) {
@@ -71,12 +72,20 @@ class CallWindow extends Component {
     ));
   }
 
+  renderTimeControl() {
+    const { time } = this.props;
+    return (
+      <Timer time={ time } />
+    )
+  }
+
   render() {
     const { status, endCall } = this.props;
     return (
       <div className={classnames('call-window', status)}>
         <video id="peerVideo" ref={el => this.peerVideo = el} autoPlay />
         <video id="localVideo" ref={el => this.localVideo = el} autoPlay muted />
+        {this.renderTimeControl()}
         <div className="video-control">
           {this.renderControlButtons()}
           <button

client/src/js/MainWindow.js

@@ -21,22 +21,22 @@ class MainWindow extends Component {
       <div className="container main-window">
         <div>
           <h3>
-            Hi, your ID is
+            Hola, tu alias es
             <input
               type="text"
               className="txt-clientId"
               defaultValue={clientId}
               readOnly
             />
           </h3>
-          <h4>Get started by calling a friend below</h4>
+          <h4>Puedes llamar a un amigo</h4>
         </div>
         <div>
           <input
             type="text"
             className="txt-clientId"
             spellCheck={false}
-            placeholder="Your friend ID"
+            placeholder="Alias de tu amigo"
             onChange={event => friendID = event.target.value}
           />
           <div>

client/src/js/Timer.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'proptypes';
+
+// Add zero padding
+function zeroPad(number, size = 2) {
+    let s = String(number);
+    while (s.length < size) { s = '0' + s;}
+    return s;
+  }
+
+  // Convert time from miliseconds int to hh:mm:ss.S string
+  function timeFormat(miliseconds) {
+
+    let remaining = miliseconds / 1000;
+
+    const hh = parseInt( remaining / 3600, 10 );
+
+    remaining %= 3600;
+
+    const mm = parseInt( remaining / 60, 10 );
+    const ss = parseInt( remaining % 60, 10 );
+    const S  = parseInt( (miliseconds % 1000) / 100, 10 );
+
+    return `${ zeroPad( hh ) }:${ zeroPad( mm ) }:${ zeroPad( ss ) }.${ S }`;
+  }
+
+class Timer extends Component {
+
+  render() {
+    const { time } = this.props;
+
+    return (
+      <div className="Timer">
+        { timeFormat( time ) }
+      </div>
+    );
+  }
+}
+
+Timer.propTypes = {
+  time : PropTypes.number
+};
+
+export default Timer;

client/src/js/Watch.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import Timer         from './Timer';
+
+const UPDATE_INTERVAL = 1000;
+
+function getDefaultState() {
+  return {
+    isRunning : false,
+    time      : 0
+  }
+}
+
+class Watch extends Component {
+
+  constructor( props ) {
+    super(props);
+    this.state    = getDefaultState();
+    this.timerRef = null;
+  }
+
+  componentDidMount() {
+    this.start();
+  }
+
+  updateTimer(extraTime) {
+    const { time } = this.state;
+    this.setState({ time : time + extraTime });
+  }
+
+  start() {
+    this.setState({
+      isRunning : true 
+    }, () => {
+      this.timerRef = setInterval(
+        () => { this.updateTimer( UPDATE_INTERVAL ) }, UPDATE_INTERVAL
+      )
+    });
+  }
+
+  stop() {
+    this.setState({
+      isRunning : false 
+    }, () => {
+      clearInterval(this.timerRef);
+    });
+  }
+
+  render() {
+
+    const { time } = this.state;
+
+    return (
+      <div className="watch">
+
+        <h1>Tiempo</h1>
+
+        <Timer time={ time } />
+      </div>
+    );
+  }
+}
+
+export default Watch;

client/src/js/app.js

@@ -7,6 +7,8 @@ import MainWindow from './MainWindow';
 import CallWindow from './CallWindow';
 import CallModal from './CallModal';
 
+const UPDATE_INTERVAL = 1000;
+
 class App extends Component {
   constructor(props) {
     super(props);
@@ -16,13 +18,17 @@ class App extends Component {
       callModal: '',
       callFrom: '',
       localSrc: null,
-      peerSrc: null
+      peerSrc: null,
+      time: 0
     };
     this.pc = {};
     this.config = null;
     this.startCallHandler = this.startCall.bind(this);
     this.endCallHandler = this.endCall.bind(this);
     this.rejectCallHandler = this.rejectCall.bind(this);
+    this.startTimer = this.startTimer.bind(this);
+    this.stopTimer = this.stopTimer.bind(this);
+    this.updateTimer = this.updateTimer.bind(this);
   }
 
   componentDidMount() {
@@ -32,11 +38,13 @@ class App extends Component {
       .on('call', (data) => {
         if (data.sdp) {
           this.pc.setRemoteDescription(data.sdp);
+          this.startTimer();
           if (data.sdp.type === 'offer') this.pc.createAnswer();
         } else this.pc.addIceCandidate(data.candidate);
       })
       .on('end', this.endCall.bind(this, false))
       .emit('init');
+    this.timerRef = null;
   }
 
   startCall(isCaller, friendID, config) {
@@ -66,10 +74,34 @@ class App extends Component {
       localSrc: null,
       peerSrc: null
     });
+    this.stopTimer()
+  }
+
+  updateTimer(extraTime) {
+    const { time } = this.state;
+    this.setState({ time : time + extraTime });
+  }
+
+  startTimer() {
+    this.setState({
+      isRunning : true 
+    }, () => {
+      this.timerRef = setInterval(
+        () => { this.updateTimer(UPDATE_INTERVAL) }, UPDATE_INTERVAL
+      )
+    });
+  }
+
+  stopTimer() {
+    this.setState({
+      isRunning : false 
+    }, () => {
+      clearInterval(this.timerRef);
+    });
   }
 
   render() {
-    const { clientId, callFrom, callModal, callWindow, localSrc, peerSrc } = this.state;
+    const { clientId, callFrom, callModal, callWindow, localSrc, peerSrc, timer } = this.state;
     return (
       <div>
         <MainWindow
@@ -83,6 +115,7 @@ class App extends Component {
           config={this.config}
           mediaDevice={this.pc.mediaDevice}
           endCall={this.endCallHandler}
+          timer={timer}
         />
         <CallModal
           status={callModal}