call in progress animation, crash if button is clicked too soon

src/widgets/call-incoming.jsx

@@ -1,6 +1,5 @@
-// IncomingCallView: displays Accept & Reject buttons for incoming calls.
+// IncomingCall: displays Accept & Reject buttons for incoming calls.
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 
 import BadgeList from './badge-list.jsx';
 import LetterTile from './letter-tile.jsx';
@@ -13,7 +12,7 @@ import { clipStr } from '../lib/utils.js'
 
 const RING_SOUND = new Audio('audio/call-in.m4a');
 
-export default class IncomingCallView extends React.Component {
+export default class IncomingCall extends React.Component {
   constructor(props) {
     super(props);
 
@@ -121,7 +120,7 @@ export default class IncomingCallView extends React.Component {
     return (
       <div className="alert-container">
         <div className="incoming-call">
-          <div className="caller-card incoming">
+          <div className="caller-card incoming pulse">
             <div className="avatar-box">
               <LetterTile
                 tinode={this.props.tinode}

src/widgets/call-panel.jsx

@@ -343,6 +343,7 @@ class CallPanel extends React.PureComponent {
 
   render() {
     const remoteActive = this.remoteRef.current && this.remoteRef.current.srcObject;
+    const disabled = !(this.state.localStream && this.state.localStream.getTracks());
     const audioIcon = this.state.localStream && this.state.localStream.getAudioTracks()[0].enabled ? 'mic' : 'mic_off';
     const videoIcon = this.state.localStream && this.state.localStream.getVideoTracks()[0].enabled ? 'videocam' : 'videocam_off';
     const peerTitle = clipStr(this.props.title, MAX_PEER_TITLE_LENGTH);
@@ -362,7 +363,7 @@ class CallPanel extends React.PureComponent {
               <video ref={this.remoteRef} autoPlay playsInline></video>
               {remoteActive ?
                 <div className="caller-name inactive">{peerTitle}</div> :
-                <div className="caller-card">
+                <div className="caller-card pulse">
                   <div className="avatar-box">
                     <LetterTile
                       tinode={this.props.tinode}
@@ -376,9 +377,15 @@ class CallPanel extends React.PureComponent {
             </div>
           </div>
           <div className="controls">
-            <button className="danger" onClick={this.handleCloseClick}><i className="material-icons">call_end</i></button>
-            <button className="secondary" onClick={this.handleToggleCameraClick}><i className="material-icons">{videoIcon}</i></button>
-            <button className="secondary" onClick={this.handleToggleMicClick}><i className="material-icons">{audioIcon}</i></button>
+            <button className="danger" onClick={this.handleCloseClick}>
+              <i className="material-icons">call_end</i>
+            </button>
+            <button className="secondary" onClick={this.handleToggleCameraClick} disabled={disabled}>
+              <i className="material-icons">{videoIcon}</i>
+            </button>
+            <button className="secondary" onClick={this.handleToggleMicClick} disabled={disabled}>
+              <i className="material-icons">{audioIcon}</i>
+            </button>
           </div>
         </div>
       </>