Implement Go Room Type Support and a Design Refresh #316
Conversation
This file contains hidden or 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
added 30 commits
August 31, 2020 14:59
…ain participant doesnt change
added 23 commits
September 28, 2020 10:45
Feature/design refresh cleanup
mobile fixes
Remove flip camera button firefox
Feature/design refresh doc updates
…ss-tests Feature/design refresh fix cypress tests
aaalaniz
approved these changes
Sep 30, 2020
uriasn
pushed a commit
to Mastermind-com/twilio-video-app-react
that referenced
this pull request
Oct 6, 2020
* Update settings menu with new styles * Add dominant speaker border color to ParticipantStrip * Change app layout so participant list is on the right * Rename ParticipantStrip to ParticipantList * Don't show the localParticipant's screen share * Fix problems with displaying video thumbnails with the correct aspect ratio * Change objectFit of videoTracks * Add some new icons * Update fonts in Menu * Move useScreenShareToggle to VideoContext * Add tooltip back to ScreenShareButton * Change MainParticipant so that videoPriority doesnt change when the main participant doesnt change * Add screen share banner to MenuBar * Change layout when there is a remote participant sharing their screen * Small adjustments * Update pin icon * Update AudioLevelIndicator to use new icons * Remove unneeded theme from login page * Add new Audio icons * Update video icons * Change all fill-rule attributes to fillRule * Add color for dominant speaker border * Increase sidebar width * Remove test code from MenuBar * Add avatar icon to participants with no video * Create IntroContainer component * Add IntroContainer component to login page * Remove unneeded styles from the login page * Fix networkQualityTests * Rename NewtorkQualityLevel to NetworkQualityLevel * Pass isLocalParticipant as prop instead of using useVideoContext * Add isLocalParticipant to local participant * Update ParticipantInfo tests * Update MainParticipantInfo tests * Update tests for ParticipantList * update Publication tests * Update useScreenShareToggleTests * Add prop to AudioLevelIndicator to change fill * Apply new designs to device selection dialog * Remove displayName from menu * Move buttons into menubar folder * Remove testing code * Add color to mic off icon in AudioLevelIndicator * Move AvatarIcon to new location * Remove unused variable * Fix AudioLevelIndicator tests * Fix ParticipantInfo components * Fix MainParticipant tests * Clean up tests for AudioLevelIndicator * Fix VideoTrack tests * Fix test for Buttons * Fix tests for Menu component * Delete tests for MenuBar component The pre-join experience will be completemly changed in a future PR, and these MenuBar tests will not be needed. Because of this, I'm removing them instead of fixing them. * Remove green border from dominant speaker * Fix issue with scroll container * Improve color of disabled screenshare button * Move and update LocalVideoPreview component * Update Audio and Video toggle buttons to accept new classNames * Add RoomName and DeviceSelection screens * Remove Logout option from Menu * Cleanup Menu Component * Remove unneeded code from MenuBar component * Add UserMenu to IntroContainer * Add subContent container to IntroContainer * Create useGetPreflightTokens Install nanoid Install SDK branch with preflight * Create usePreflightTest and add types * Create getNetworkCondition function and tests * Add SuccessIcon and ProgressIndicator * Create PreflightTest component * Add PreflightTest to PreJoinScreens * Move Icons to icon directory * Add screenShare icon to participantInfo * Pass isLocalParticipant to ParticipantInfo * Fix Button tests as icons have been moved to new directory * Fix ParticipantList tests * Fix ParticipantTracks tests * Fix ParticipantInfo tests * Fix VideoProvider tests * Add icons to preflighttest * Add isTurnRequired to PreflightTestReport * Adding preflight dependency * update lock file * Update lockfile * lockfile * Fixing signin if using passcode auth * Change swoosh svg from React component to svg file * Apply basic mobile styles to prejoin screens * Fix in-room grid layout for mobile * Create MobileTopMenuBar component * Add mobile styles to MenuBar to hide buttons * AHOYAPPS-733 Pass LocalTracks to ConnectOptions and disable audio/video toggling. * Update FlipCameraButton with new icon and text * Use better variable names * Remove extra form element from LoginPage * Update LoginPage tests * Update LocalVideoPreview tests * Update menu tests * Add tests for IntroContainer * Update tests for UserMenu * Add new tests for MenuBar component * Add tests for PreJoinScreens component * Add tests to RoomNameScreen * Add tests for the DeviceSelectionScreen * Add tests for App.tsx * Add test for PreJoinScreens component * AHOYAPPS-733 Incorporating feedback from @tmendoza. * Use better variable names in getNetworkCondition * Use better variable names in useGetPreflightTokens * Update progressIndicator style * Add tests for ProgressIndicator * Fix issue in PreJoinScreens and add test * Update MainParticipant so it adds the isLocalParitcipant prop * Add tests for useGetPreflightTokens hook * Change rendering and unmounting logic for PreflightTest component * Fix issue in PreJoinScreens and write test * Add localTracks to dependency array in useRoom hook * Update tests for useRoom * Add tests for usePreflightTest hook * Add tests for PreflightTest component * Add tests for DeviceSelectionScreen * Fix type declaration for the preflightTest * Remove ensureMediaPermissions as it appears to be unnecessary * Create custom SnackBar component * Create component for MediaError snackbars * Acquire media on deviceSelectionPage, not app load * Fix small issue in error dialog * Move deviceHooks file and add new hooks * Disable toggle buttons when there are no devices * Adjust paths * Fix issue in snackbar * Add error cases to MediaErrorSnackBar * Apply style improvements to the preJoin screens * Adjust menuBar padding and screenShareButton hover state * Adjust EndCallButton hover state * Remove SettingsDialog * Decouple DeviceSelector and ConnectionOptions dialogs * Add spacing to DialogActions * Add consistent styles to the AboutDialog * Add consistent styles to the ConnectionOptions dialog * Pass isLocalParticipant to ParticipantTracks * Add deviceSelector to Menu component * Add settings menu to the deviceSelection screen * Apply mobile styles to device selection menu * Make about dialog scrollable again * Hide screenshare button on mobile * Adjust spacing in buttons * Make connectionOptions scrollable * Move swoosh svg to a TS file. This prevents the browser from requesting the same svg file whenever it needed to be displayed. * Fix problems with mobile CSS grid * Add useVideoTrackDimensions hook and add it to video track * Add height variable to MobileTopBar * Adjust video preview size in settings modal * Improve mobile spacing for preflightTest * Adjust input styles Adjust mobile footer height * Adjust room name input styles * Adjust settings dropdown position * Adjust mobile header styles * Add support for 'go' rooms * Update test language * Add tests for useVideoTrackDimensions * Fix tests for DeviceSelectionScreen * Fix connectionOptions tests * Update preflightTest snapshots * Fix menu tests * Update videoTrack tests * Reorder imports * Add tests for settingsMenu * Fix mobile background when logged out * Add logout logo for passcode auth * Improve styles for passcode login page * Fix some tests * Fix getLocalTracks tests * Update tests for PreJoinScreen component * Add tests for MediaErrorSnackBar * Add more tests for MediaErrorSnackBar * Rename SnackBar to Snackbar * Renaming files to get around MacOS case insensitivity * Renaming files to get around macOS case insensitivity * Add tests for Snackbar component * Add more space to the PreflightTest result * Update MediaError cases * Update device error copy * Add more tests for deviceHooks * Remove BandwidthWarning component * Remove bandwidth warning from MainParticipantInfo and fix bug * Remove Bandwidth warning from the ParticipantInfo component and update tests * Add reconnecting ui to Participants * Update reconnecting snackbar to match new styles * Fix various styling bugs * Small fixes * Fix mobile styles * Update logic used to display participants in participantList * Fix tests * Move Button components up a level * Move AboutDialog, ConnectionOptionsDialog, and DeviceSelectionDialog to component/ directory * Move LocalAudioLevelIndicator up a level * Rename useMainSpeaker to useMainParticipant * Move status icons to icon folder * Rename disableAudio to videoOnly * Move SettingsIcon into icons directory * Disable pinch-to-zoom on mobile * Draw Avatars on top of switchedOff video * Adjust spacing of ParticipantList on mobile * Render AvatarIcon in LocalVideoPreview when there are no tracks * Add extra test to the preJoinScreens component * Update settingsMenu so it doesn't render bandwidth settings in go or p2p rooms * Instal 2.8.0 beta version of twilio-video SDK * Supress eventemitter warning * Don't render flip camera button when there are less than 2 video input devices * Add question issue template * Add info about go rooms to readme * Update image in readme * Add the AudioLevelIndicator to the MainParticipantInfo component * Fix cypress tests * Update changelog * Bump version Co-authored-by: csantos <[email protected]> Co-authored-by: Manjesh Malavalli <[email protected]>
jon-price-snke
added a commit
to visiontree-software/vtoc-fasttrack-video
that referenced
this pull request
Oct 21, 2020
* upstream/master: Update firebase (twilio#335) Revert "Increase throttle interval in ToggleVideoButton component" Increase throttle interval in ToggleVideoButton component Ahoyapps 771 store user preferences (twilio#333) Fix cypress flakiness (twilio#332) Bump @hapi/hoek from 8.5.0 to 8.5.1 (twilio#300) Update readme section about pricing (twilio#318) Implement Go Room Type Support and a Design Refresh (twilio#316) Add room type section to readme [skip ci] (twilio#306) Update twilio-video to version 2.7.2 (twilio#304)
jeferbc
added a commit
to jeferbc/twilio-video-app-react
that referenced
this pull request
Aug 4, 2021
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.
This PR contains support for the Programmable Video Go room type and an overhauled UI/UX experience.
Go Room Type
The Go room type provides a similar peer-to-peer video app experience except for a smaller limit of two participants. If more than two participants join a room with this room type, then the video app will present an error. To learn more about Go, please visit the Twilio blog.
Design Refresh
The user journey was redesigned from the ground up. Users are now presented with an updated “lobby” experience prior to joining the room. Users can select their audio and video devices, configure their connection settings, and leverage a new beta Video JS SDK Preflight API to determine if their network connection is suitable to provide an optimal video app experience.
Users are then presented with an updated “in room” experience. All of the media and room controls have been moved to a dedicated toolbar at the bottom of the page and the primary view remains the dominant speaker or the participant sharing their screen. In general the experience feels similar to before with just much more polish!
Additionally, all the UI/UX improvements have been implemented on mobile web browsers as well.