diff --git a/client/src/js/Timer.js b/client/src/js/Timer.js
new file mode 100644
index 00000000..4658ef54
--- /dev/null
+++ b/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 (
+
+ { timeFormat( time ) }
+
+ );
+ }
+}
+
+Timer.propTypes = {
+ time : PropTypes.number
+};
+
+export default Timer;
\ No newline at end of file
diff --git a/client/src/js/Watch.js b/client/src/js/Watch.js
new file mode 100644
index 00000000..00c52676
--- /dev/null
+++ b/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 (
+
+
+
Tiempo
+
+
+
+ );
+ }
+}
+
+export default Watch;
\ No newline at end of file
diff --git a/client/src/js/app.js b/client/src/js/app.js
index b59fc592..fcbe478a 100644
--- a/client/src/js/app.js
+++ b/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 (