move refs from state to object, bug fix

src/widgets/vc-carousel-item.jsx

@@ -3,31 +3,42 @@ import React from 'react';
 
 import LetterTile from './letter-tile.jsx';
 
+/**
+ * Props:
+ *  - cameraPub
+ *  - micPub
+ *  - isSpeaking
+ *  - tinode
+ *  - photo
+ *  - userId
+ *  - name
+ */
 export default class VCCarouselItem extends React.PureComponent {
   constructor(props) {
     super(props);
 
-    this.state = {
-      videoRef: undefined,
-      audioRef: undefined
-    };
-
     this.handleVideoRefChange = this.handleVideoRefChange.bind(this);
     this.handleAudioRefChange = this.handleAudioRefChange.bind(this);
+
+    this.videoRef = null;
+    this.audioRef = null;
   }
 
   componentDidUpdate(prevProps) {
-    if (this.state.videoRef && !this.state.videoRef.srcObject && this.props.cameraPub && this.props.cameraPub.videoTrack) {
-      this.props.cameraPub.videoTrack.attach(this.state.videoRef);
+    if (this.videoRef && !this.videoRef.srcObject && this.props.cameraPub && this.props.cameraPub.videoTrack) {
+      this.props.cameraPub.videoTrack.attach(this.videoRef);
     }
-    if (this.state.audioRef && !this.state.audioRef.srcObject && this.props.micPub && this.props.micPub.audioTrack) {
-      this.props.micPub.audioTrack.attach(this.state.audioRef);
+    if (this.audioRef && !this.audioRef.srcObject && this.props.micPub && this.props.micPub.audioTrack) {
+      this.props.micPub.audioTrack.attach(this.audioRef);
     }
   }
 
   handleVideoRefChange(node) {
-    if (!node) { return; }
-    this.setState({videoRef: node});
+    if (!node) {
+      return;
+    }
+
+    this.videoRef = node;
 
     // Attach video track to video element.
     const cameraPub = this.props.cameraPub;
@@ -38,14 +49,17 @@ export default class VCCarouselItem extends React.PureComponent {
   }
 
   handleAudioRefChange(node) {
-    if (!node) { return; }
-    this.setState({audioRef: node});
+    if (!node) {
+      return;
+    }
+
+    this.audioRef = node;
 
     // Attach audio track to audio element.
     const micPub = this.props.micPub;
     const micEnabled = micPub && micPub.isSubscribed && !micPub.isMuted;
-    if (micEnabled && this.state.audioTrack) {
-      this.state.audioTrack.attach(node);
+    if (micEnabled && micPub.audioTrack) {
+      micPub.audioTrack.attach(node);
     }
   }
 
@@ -72,7 +86,7 @@ export default class VCCarouselItem extends React.PureComponent {
                 <LetterTile
                   tinode={this.props.tinode}
                   avatar={this.props.photo}
-                  topic={this.props.identity}
+                  topic={this.props.userId}
                   title={this.props.name} />
               </div>
             </>