Rewrite the UI using React #3
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The video stage can now display multiple video feeds within a fixed area. The feeds are layed out to maximize the total area covered within the video stage. They layout is fully responsive and recomputed any time the screen is resized or a video feed is added or removed. The video stage layout uses Flexbox (the video stage has `display: flex` with `flex-wrap: wrap`). Layout works by first computing how many rows and columns are needed to include all video feeds. Once the minimum number of rows and columns is known, a scaling factor is then computed and applied to calculate the height and width of each video feed. With the proper scaling factor, the video feeds can simply be added to the Flexbox and are layed out in the appropriate number of (implicit) rows and columns.
VideoFeeds only rescale on window resize events or React re-renderings, so toggling the sidebar would not previously cause VideoFeeds to rescale. This implementation is not ideal, but works. In the future, it may be possible to use a Resize Observer to listen for changes in the dimensions of the VideoStage (see https://drafts.csswg.org/resize-observer-1/).
Replace the Bootstrap modal that asked for a display name with a modal implemented in React. The new modal also allows the user to select a camera and microphone, which was not possible before (devices were automatically selected).
Users can drag one video feed onto another to swap their locations in the video stage.
Adding propTypes to each component class allows React to perform type checking on props in development mode. See https://reactjs.org/docs/typechecking-with-proptypes.html.
The modal that appears on entering a room creates a new MediaStream object for the video preview every time a video device is selected. Now we stop the associated tracks of the MediaStream when another device is selected and when the component unmounts. This allows the camera to turn off and prevents having unused tracks running.
Occasionally audio or video would not show up on the other end of the connection. There were two issues causing this. First, a track might come in that has no associated stream, so the stream array that comes with the track is actually empty. We now check for streams[0] before updating feed.stream, which prevents the <video> srcObject from being set to undefined. Second, it seems that <video> will refuse to play an audio track if it is also given a muted video track. This is remedied by having separate <video> and <audio> elements for each VideoFeed so that audio will play regardless of what is happening with video. In a small refactoring, starting and stopping the manager has been moved from chat.js to App.js.
Previously when a remote video track was stopped, there would remain a frozen image in the video feed. We now detect when a remote track has ended by listening for the mute event, then remove the stream from the corresponding <video> or <audio> element. This prevents the frozen image and instead displays black when a remote video track has been stopped.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
React makes it easier to build responsive self-contained components compared to vanilla JavaScript. With React, it should be easier to add new features to the UI in the future.