Updates examples and docs for 2.x

* Updates the example. * Removes the android-specific example. Since the two platforms are pretty much in sync now, it doens't make sense to have two separate examples to grok. * Update the example in the readme. * Add in the section in the readme about migrating from 1.x to 2.x.

Author: slycoder

Example/index.android.js

@@ -139,7 +139,7 @@ export default class Example extends Component {
  this.setState({
  videoTracks: new Map([
  ...this.state.videoTracks,
- [track.trackId, { ...participant, ...track }]
+ [track.trackSid, { participantSid: participant.sid, videoTrackSid: track.trackSid }]
  ]),
  });
  }
@@ -148,7 +148,7 @@ export default class Example extends Component {
  console.log("onParticipantRemovedVideoTrack: ", participant, track)
 
  const videoTracks = this.state.videoTracks
- videoTracks.delete(track.trackId)
+ videoTracks.delete(track.trackSid)
 
  this.setState({ videoTracks: new Map([ ...videoTracks ]) });
  }
@@ -189,15 +189,12 @@ export default class Example extends Component {
  this.state.status === 'connected' &&
  <View style={styles.remoteGrid}>
  {
- Array.from(this.state.videoTracks, ([trackId, track]) => {
+ Array.from(this.state.videoTracks, ([trackSid, trackIdentifier]) => {
  return (
  <TwilioVideoParticipantView
  style={styles.remoteVideo}
- key={trackId}
- trackIdentifier={{
- participantIdentity: track.identity,
- videoTrackId: trackId
- }}
+ key={trackSid}
+ trackIdentifier={trackIdentifier}
  />
  )
  })

Example/index.ios.js Example/index.jsExample/index.ios.js renamed to Example/index.js

@@ -214,14 +214,19 @@ export default class Example extends Component {
  _onParticipantAddedVideoTrack = ({participant, track}) => {
  console.log("onParticipantAddedVideoTrack: ", participant, track)
 
- this.setState({videoTracks: { ...this.state.videoTracks, [track.trackId]: { ...participant, ...track }}})
+ this.setState({
+ videoTracks: new Map([
+ ...this.state.videoTracks,
+ [track.trackSid, { participantSid: participant.sid, videoTrackSid: track.trackSid }]
+ ]),
+ });
  }
 
  _onParticipantRemovedVideoTrack = ({participant, track}) => {
  console.log("onParticipantRemovedVideoTrack: ", participant, track)
 
  const videoTracks = this.state.videoTracks
- videoTracks.delete(track.trackId)
+ videoTracks.delete(track.trackSid)
 
  this.setState({videoTracks: { ...videoTracks }})
  }
@@ -262,15 +267,12 @@ export default class Example extends Component {
  this.state.status === 'connected' &&
  <View style={styles.remoteGrid}>
  {
- Object.keys(this.state.videoTracks).map(trackId => {
+ Array.from(this.state.videoTracks, ([trackSid, trackIdentifier]) => {
  return (
  <TwilioVideoParticipantView
  style={styles.remoteVideo}
- key={trackId}
- trackIdentifier={{
- participantIdentity: this.state.videoTracks[trackId].identity,
- videoTrackId: trackId
- }}
+ key={trackSid}
+ trackIdentifier={trackIdentifier}
  />
  )
  })
@@ -327,6 +329,19 @@ To run the example application:
 - Install objective-c dependencies: `cd ios && pod install`
 - Open the xcworkspace and run the app: `open Example.xcworkspace`
 
+## Migrating from 1.x to 2.x
+
+* Make sure your pod dependencies are updated. If you manually specified a pod version, you'll want to update it as follows:
+
+```
+ s.dependency 'TwilioVideo', '~> 2.2.0'
+```
+
+* Both participants and tracks are uniquely identified by their `sid`/`trackSid` field.
+The `trackId` field no longer exists and should be replaced by `trackSid`. Commensurate with this change,
+participant views now expect `participantSid` and `videoTrackSid` keys in the `trackIdentity` prop (instead of
+`identity` and `trackId`).
+
 ## Contact
 
 - Martín Fernández <fmartin91@gmail.com>