| Props | Description | Type | Example |
|---|---|---|---|
| id | Unique id to be attached to video tag | string | "2" |
| uri | URI for the src attribute of the video tag | string | "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" |
| isPaused | User has stopped sharing their camera | boolean | false |
| isMuted | User has stopped sharing their microphone | boolean | false |
| isHandRaised | User has raised their hand | boolean | false |
| isPinned | Video tile has been pinned | boolean | false |
| username | Full Name of the user. | string | "Elon Musk" |
| highlightBorder | Pass CSS Border property to highlight the video tile. | string | "3px solid #aaa" |
| placeholder? | Placeholder to be shown when the user has stopped sharing their camera. A string which is a valid URL to an image or a custom React Component | string or React.ReactNode | Custom React Component |
| width? | Width of the video tile. All valid CSS width can be passed. If no width is passed then it takes as much width available | string or number | "200px" or 200 |
| height? | Height of the video tile. All valid CSS height can be passed. If no height is passed then it takes as much height available | string or number | "200px" or 200 |
| Topbar? | Custom React Component to be shown at the top of video tile | React.ReactNode | Custom React Component |
| Popup? | Custom React Component to be shown within the popup. It follows render props pattern. To close the popup when clicked within the popup execute close function. Any clicks outside the popup will automatically close the popup | (close) => React.ReactNode | (close) => <MyPopup close={close} /> |
| onPin | Function to be executed when video tile is pinned | function | - |
| onUnpin | Function to be executed when video tile in unpinned | function | - |
| onHandClick? | Function to be executed when hand is clicked | function | |
| onMicrophoneClick? | Function to be executed when disabled microphone is clicked | function | - |