diff --git a/README.md b/README.md index 8af35bfc09775a3482a5d1f355f0f0fcc46bd960..d1d937e7f0ac2e0a67e1e3eb0e6f52ca8a1c3291 100644 --- a/README.md +++ b/README.md @@ -107,18 +107,19 @@ class Party extends Component { // Show fellow peers in the room generateRemotes = () => this.state.peers.map((p) => ( - <PeerTile key={p.id}> - <VideoContainer id={`container_${this.webrtc.getDomId(p)}`}> + <div key={p.id}> + <div id={`container_${this.webrtc.getDomId(p)}`}> <video key={this.webrtc.getDomId(p)} + // Important: The video element needs both an id and ref id={this.webrtc.getDomId(p)} ref={(v) => this.remoteVideos[p.id] = v} /> - </VideoContainer> - <PeerInfo> + </div> + <div> <p>{p.nick}</p> - </PeerInfo> - </PeerTile> + </div> + </div> )); disconnect = () => { @@ -133,25 +134,25 @@ class Party extends Component { render() { return ( - <Wrapper> - <PeerTile> - <VideoContainer> + <div> + <div> + <div> <video className={styles.vid} // Important: The local video element needs to have both an ID and ref id="localVideo" ref={(vid) => { this.localVid = vid; }} /> - </VideoContainer> - <PeerInfo> + </div> + <div> <p>{this.state.nick}</p> - </PeerInfo> - </PeerTile> + </div> + </div> <div id="remoteVideos"> {this.generateRemotes()} </div> - </Wrapper> + </div> ); } }