Ahoyapps 30 readme

CHANGELOG.md

@@ -1,13 +1,12 @@
 ## 0.1.0
 
-This release marks the first iteration of the Twilio Video Collaboration App: a canonical multi-party collaboration video application built with Programmable Video. This application is intended to demonstrate the capabilities of Programmable Video and serve as a reference to developers building video apps.
+This release marks the first iteration of the Twilio Video Collaboration App: a canonical multi-party collaboration video application built with Programmable Video. This application demonstrates the capabilities of Programmable Video and serve as a reference to developers building video apps.
 
 This initial release comes with the following features:
 
 - Join rooms with up to 50 participants
 - Toggle local media: camera, audio, and screen.
 - Show a Room’s dominant speaker in the primary video view
 - Show a participant’s network quality
-- Click on a participant to show them in the primary video view
 
 We intend to iterate on this initial set of features and we look forward to collaborating with the community.

README.md

@@ -1,18 +1,19 @@
-# twilio-video-app-react
+# Twilio React Video App
 
 [![CircleCI](https://circleci.com/gh/twilio/twilio-video-app-react.svg?style=svg&circle-token=9d6b1e89d148181aaa6874c29849c730b8ca406d)](https://circleci.com/gh/twilio/twilio-video-app-react)
 
-This is a video collaboration application built with the [twilio-video.js SDK](https://github.com/twilio/twilio-video.js) and [Create React App](https://github.com/facebook/create-react-app).
+This application demonstrates a multi-party video application built with [twilio-video.js](https://github.com/twilio/twilio-video.js) and [Create React App](https://github.com/facebook/create-react-app).
 
 ## Getting Started
 
 Run `npm install` to install all dependencies.
 
-In order to run the local token server (which is required to connect to a room), you will need to create an account in the [Twilio Console](https://www.twilio.com/console). After you log in to the console, click on 'Settings' and find your Account SID.
+This application requires an access token to connect to a Room. A local token server provides the application with access tokens. Perform the following steps to setup the local token server:
 
-Next, you'll need to create an API Key and Secret. You can do this in the [API Keys Section](https://www.twilio.com/console/video/project/api-keys) under Programmable Video Tools in the Twilio Console.
-
-Once you have your Account SID, API Key, and API Secret, store them in a new file called `.env` in the root level of the application (example below).
+- Create an account in the [Twilio Console](https://www.twilio.com/console).
+- Click on 'Settings' and take note of your Account SID.
+- Create an API Key and Secret in the [API Keys Section](https://www.twilio.com/console/video/project/api-keys) under Programmable Video Tools in the Twilio Console.
+- Store your Account SID, API Key, and API Secret in a new file called `.env` in the root level of the application (example below).
 
 ```
 ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
@@ -60,7 +61,7 @@ Try it out with this sample `curl` command:
 
 If you want to see how the application behaves with multiple participants, you can simply open `localhost:3000` in multiple tabs in your browser and connect to the same room using different user names.
 
-Or, if you'd like to invite real people to join a room, you can use the free tool [ngrok](https://ngrok.com/). Once ngrok is set up, run `npm start` and then use the following command to create a shareable link:
+Additionally, you can use the free tool [ngrok](https://ngrok.com/) to invite people to join your room. Once ngrok is set up, run `npm start` and then use the following command to create a shareable link:
 
 `./ngrok http --host-header=rewrite 3000`
 
@@ -88,23 +89,23 @@ This will run all unit tests with Jest and output the results to the console.
 
 This will open the Cypress test runner. When it's open, select a test file to run.
 
-Note: Be sure to have `npm start` running in a separate terminal before running the tests. If you haven't already done so, you will need to add account credentials to the `.env` file. These Cypress tests will connect to real Twilio rooms, so you may be billed for any time that is used.
+Note: Be sure to complete the 'Getting Started' section before running these tests. These Cypress tests will connect to real Twilio rooms, so you may be billed for any time that is used.
 
 ## Configuration
 
-The `connect` function from the SDK accepts a [configuration object](https://media.twiliocdn.com/sdk/js/video/releases/2.0.0-beta16/docs/global.html#ConnectOptions). The configuration object for this application can be found in [src/index.ts](https://github.com/twilio/twilio-video-app-react/blob/AHOYAPPS-30-readme/src/index.tsx#L19). In this object, we 1) enable dominant speaker detection, 2) enable the network quality API, and 3) supply various options to configure the [bandwidth profile](https://www.twilio.com/docs/video/tutorials/using-bandwidth-profile-api).
+The `connect` function from the SDK accepts a [configuration object](https://media.twiliocdn.com/sdk/js/video/releases/2.0.0/docs/global.html#ConnectOptions). The configuration object for this application can be found in [src/index.ts](https://github.com/twilio/twilio-video-app-react/blob/AHOYAPPS-30-readme/src/index.tsx#L19). In this object, we 1) enable dominant speaker detection, 2) enable the network quality API, and 3) supply various options to configure the [bandwidth profile](https://www.twilio.com/docs/video/tutorials/using-bandwidth-profile-api).
 
 ### Track Priority Settings
 
-This application dynamically changes the priority of certain remote video tracks in order to provide a good user experience. Any video track that will be displayed in the main video area will have `track.setPriority('high')` called on it (see the [VideoTrack](https://github.com/twilio/twilio-video-app-react/blob/AHOYAPPS-30-readme/src/components/VideoTrack/VideoTrack.tsx#L24) component) when the component is mounted. This higher priority enables the track to be rendered at a high resolution. `track.setPriority(null)` is called when the component is unmounted so that the track's priority is set to its publish priority (low).
+This application dynamically changes the priority of remote video tracks to provide an optimal collaboration experience. Any video track that will be displayed in the main video area will have `track.setPriority('high')` called on it (see the [VideoTrack](https://github.com/twilio/twilio-video-app-react/blob/AHOYAPPS-30-readme/src/components/VideoTrack/VideoTrack.tsx#L24) component) when the component is mounted. This higher priority enables the track to be rendered at a high resolution. `track.setPriority(null)` is called when the component is unmounted so that the track's priority is set to its publish priority (low).
 
 ## Application Architecture
 
-This state of this application (with a few exceptions) is managed by the [room object](https://media.twiliocdn.com/sdk/js/video/releases/2.0.0-beta16/docs/Room.html) that is supplied by the SDK. The `room` object contains all information about the room that the user is connected to. The class hierarchy of the `room` object can be viewed [here](https://www.twilio.com/docs/video/migrating-1x-2x#object-model).
+This state of this application (with a few exceptions) is managed by the [room object](https://media.twiliocdn.com/sdk/js/video/releases/2.0.0/docs/Room.html) that is supplied by the SDK. The `room` object contains all information about the room that the user is connected to. The class hierarchy of the `room` object can be viewed [here](https://www.twilio.com/docs/video/migrating-1x-2x#object-model).
 
 One great way to learn about the room object is to explore it in the browser console. When you are connected to a room, the application will expose the room object as a window variable: `window.twilioRoom`.
 
-Since the `room` object maintains all state that relates to the connected room, it isn't necessary to use a tool like Redux to track the state of the room. We can instead use the `room` object as our source of truth. One caveat is that we will need some way of triggering component re-renders in React. The `room` object and most child properties are [event emitters](https://nodejs.org/api/events.html#events_class_eventemitter), which means that we can subscribe to these events to update React components as the room state changes.
+Since the Twilio Video SDK manages the `room` object state, it can be used as the source of truth. It isn't necessary to use a tool like Redux to manage state. The `room` object and most child properties are [event emitters](https://nodejs.org/api/events.html#events_class_eventemitter), which means that we can subscribe to these events to update React components as the room state changes.
 
 [React hooks](https://reactjs.org/docs/hooks-intro.html) can be used to subscribe to events and trigger component re-renders. This application frequently uses the `useState` and `useEffect` hooks to subscribe to changes in room state. Here is a simple example: