feat(design-v2): sdk and dogfood app design-v2 changes #1549
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
## 🎯 Goal - Jira Ticket: [PBE-5856](https://stream-io.atlassian.net/browse/PBE-5856) - consolidate and improve the theming options of the SDK ## 🛠 Implementation details ✅ theme color and options are improved ✅ new variants added (fontSizes, spacingSizes) ✅ new defaults added ✅ `colorPalette` usages in the SDK are removed ✅ `darkColors` are removed from SDK, so only one set of colors present in base theme ✅ new alternative `theme.get(componentOrPath: string, prop?: keyof Theme['defaults'] | string)` method added with unit test coverage TBD: 🚧 In the next tasks from the Design v2 provide additional fixes in the dogfood app - [PBE-5855-feat/react-native-video-design-v2](https://github.com/GetStream/stream-video-js/tree/PBE-5855-feat/react-native-video-design-v2) will serve as umbrella branch for tasks which are part of this epic Table with the color name changes for **easier reviewing**: old name | new name | value| ---|---|---| static_white| base1 | palette.grey50 borders | base2 | palette.grey300 text_low_emphasis| base3 | palette.grey500 static_gray | base4|palette.grey700 static_black | base5|palette.grey950 || | dark.conent_bg | background1| palette.grey950 + opacityToHex(0.05) dark_gray |background2| palette.grey800 overlay |background3| palette.grey950 + opacityToHex(0.4) overlay_dark | background4| palette.grey950 + opacityToHex(0.6) dark.bars & dark.controls_bg | background5| palette.grey900 static_overlay | background6| palette.grey950 + opacityToHex(0.85) ||| dark.text_high_emphasis | base1| palette.grey50 dark.borders| base4 | palette.grey700 dark.overlay | background3 | palette.grey950 + opacityToHex(0.4) ## 🎨 UI Changes <!-- Add relevant screenshots --> <details> <summary>iOS</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> </td> <td> <!--<img src="" /> --> </td> </tr> </tbody> </table> </details> <details> <summary>Android</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> </td> <td> <!--<img src="" /> --> </td> </tr> </tbody> </table> </details> ## 🧪 Testing <!-- Explain how this change can be tested (or why it can't be tested) --> ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android [PBE-5856]: https://stream-io.atlassian.net/browse/PBE-5856?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
## 🎯 Goal - Jira Ticket: [PBE-5857](https://stream-io.atlassian.net/browse/PBE-5857) - Add new call control buttons ## 🛠 Implementation details ✅ ParticipantInfo button is moved to the bottom call controls sections ✅ Around half of the call control buttons in the bottom section are moved to bottom drawer and the remaining main buttons are split in left and right sections ✅ Add more button is added that will open bottom drawer with more call controls ✅ New styling and icons is applied on the call controls ## 🎨 UI Changes <!-- Add relevant screenshots --> <summary>iOS</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <img src="https://github.com/user-attachments/assets/1a28a37e-2484-416e-9d4f-071e14a64731" alt="ios-after" width="200" height="440"/> </td> <td> <img src="https://github.com/user-attachments/assets/39f16ee8-7a9e-4199-9c51-c01d001fa1e4" alt="ios-after" width="200" height="440"/> </td> </tr> </tbody> </table> <details> <summary>Android</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> <img src="https://github.com/user-attachments/assets/292b9a06-02dc-4c11-8e87-35003831ea56" alt="ios-after" width="200" height="440"/> </td> <td> <img src="https://github.com/user-attachments/assets/d1d29fbf-8740-410f-aea3-c98085ba482f" alt="ios-after" width="200" height="440"/> </td> </tr> </tbody> </table> </details> [PBE-5857]: https://stream-io.atlassian.net/browse/PBE-5857?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
## 🎯 Goal - Jira Tickets: - [PBE-5858](https://stream-io.atlassian.net/browse/PBE-5858) [Demo App] Call Scene container - [PBE-5859](https://stream-io.atlassian.net/browse/PBE-5859) [Demo App] Call Duration / Recording badge + UI Cookbook ## 🛠 Implementation details - adds new - top call controls component - reuses the hangup call button - add new controls for layout switcher, video effects and camera swticher - call status badge (showing the call duration or call recording message if the call is recorded) - improves the Participant view - new stylings for the network quality status - adds new speech indicator component ## 🎨 UI Changes <!-- Add relevant screenshots --> <summary>iOS</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <img src="https://github.com/user-attachments/assets/ef9f1e5c-6939-4ed1-987d-2321b768556b" alt="ios-before" width="200" height="440"/> </td> <td> <img src="https://github.com/user-attachments/assets/993e466a-8104-4d34-a440-dfcb70c444bc" alt="ios-after" width="200" height="440"/> </td> </tr> </tbody> </table> [PBE-5858]: https://stream-io.atlassian.net/browse/PBE-5858?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ [PBE-5859]: https://stream-io.atlassian.net/browse/PBE-5859?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
This PR: - Adds layout switcher modal component. - Fixes some safe area issues in the dogfood app. - Introduces borderRadius sizes in the sdk theme object.
Fix the wrong imports in the `callUtilHooks.ts`
kristian-mkd
changed the title
This PR: - completes the Call recording flow - adds the Recording modal component - moves the `useToggleCallRecording` to `useCallStateHooks` so it can be used for React Native as well <img src="https://github.com/user-attachments/assets/637d5141-9236-40bd-96f7-3a42f9138468" alt="ios-after" width="250" height="560"/> <img src="https://github.com/user-attachments/assets/6d430ab3-6ce1-4d15-ac9a-da52680d5d2c" alt="ios-after" width="250" height="560"/> <img src="https://github.com/user-attachments/assets/65c79336-9264-427f-90d1-96123dbfd2a9" alt="ios-after" width="250" height="560"/>
…#1539) This PR: - adds the More action buttons drawer component - the emoji reactions are implemented and that completes the reactions flow - the other buttons are not functional and their actions/flows will be implemented in other PRs <img alt="Screenshot at Oct 29 14-24-22" src="https://github.com/user-attachments/assets/2c64405e-5c12-4db2-89ac-199ff08652bb" alt="ios-after" width="250" height="540"/>
kristian-mkd
changed the title
## Overview - consolidates the theme colors - adds support for Light/Dark theme for the dogfood app - updates the Lobby screen per design-v2 - updates iOS config so that iPad is target device as well - solves issues when the app is shown on iPad is not constrained in smaller screen size - fixes speech indicator issue to be animating only when the user is speaking - fixes participant name, network indicator and reaction position issues - updates the `FLOATING_VIDEO_VIEW_STYLE` width and height to bigger values according to new design-v2 - removes hardcoded Lobby video height const from the SDK `LOBBY_VIDEO_VIEW_HEIGHT` - fixes call recording modal and bottom drawer orientation issues ## Screenshots <kbd> <img src="https://github.com/user-attachments/assets/1872ed71-e9df-40d7-a725-a6b01d094640" alt="ios" width="200" height="440"/> </kbd> <kbd> <img src="https://github.com/user-attachments/assets/f75912fe-01be-45ba-810d-349d2eb6ef84" alt="ios" width="200" height="440" /> </kbd> <kbd> <img src="https://github.com/user-attachments/assets/69e63502-c56f-4b4d-ab95-8e707fcd72d6" alt="ios" width="200" height="440" /> </kbd> <img src="https://github.com/user-attachments/assets/9432eef3-7013-4b88-a9c3-fee172b15691" alt="ios" width="200" height="440" /> </kbd>
Fixes for the review remarks from the design-v2 review call.
- removed the CallTopView from SDK
- removed hardcoded sizes in some icons
- fixed spread styles `container: {
...toggleAudioPreviewButton.container },`
- fixed the lobby text message
- removed the topOffset in the floating participant video
- reverted the video and audio muted icons to the previous state
- fixed the SpeechIndicator useRef issue
- reverted the FLOATING_VIDEO_VIEW_STYLE changes, they can be easily
overriden from the theme
- added some inline docs for the theme insets and dimensions
- fixed the casting in the dogfood app theme customisation
kristian-mkd
requested review from
santhoshvai,
oliverlaz,
khushal87 and
isekovanic
…pported orientations
Fixes the floating participant view size on tablet: Before: <img src="https://github.com/user-attachments/assets/a595c695-4581-4d07-a745-03fe6d689216" alt="ios-before" width="300" height="440"/> After: <img src="https://github.com/user-attachments/assets/697a6443-53fc-4282-b904-6a70f39b21f7" alt="ios-after" width="300" height="440"/><img src="https://github.com/user-attachments/assets/c825064a-35e6-409f-9561-d82c440add07" alt="ios-after" width="200" height="440"/>
santhoshvai
approved these changes
Nov 25, 2024
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.
Overview
Design v2 changes of the SDK components and dogfood application.
RELEASE NOTES
PR: Docs update
Summary
We're excited to announce version 1.4.0 of our react-native library, bringing significant improvements and features. This update includes breaking changes, so please review the migration guide before upgrading.
✨ New Features
🔨 Enhancements
🚨 Breaking Changes
CallTopView Removal
The
CallTopViewprop inCallContentcomponent has been removed. Instead, you can now render your custom top view component as a sibling toCallContent. This provides more flexibility and better composition of UI elements.Before:
After:
Colors migration guide