VIDSOL-498: Create Vera Room embeddable component#384
Conversation
There was a problem hiding this comment.
Pull request overview
This PR introduces an embeddable <vera-room> web component that allows the Vera video call application to be embedded into external websites. The implementation creates a Shadow DOM-based custom element with React integration, enabling isolated styling and a self-contained three-stage flow (waiting room → meeting room → goodbye screen).
Changes:
- Added
languageHTML attribute support to allow embedding consumers to control the UI locale - Created three new stage components (WaitingRoomStage, MeetingRoomStage, GoodByeStage) that provide embeddable versions of existing pages without the Vera chrome (Banner, Footer)
- Implemented VeraRoomElement custom element that manages attribute observation and React rendering via Shadow DOM
- Extended bridge store to handle new attributes and maintain state between the web component and React app
Reviewed changes
Copilot reviewed 14 out of 15 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/index.d.ts | Added language attribute type definition for VeraRoomAttributes |
| frontend/src/VeraRoom/stores/bridge/constants/initialState.ts | Updated initial state to include language attribute |
| frontend/src/VeraRoom/stores/bridge/constants/bridgeAttributesMap.ts | Added language attribute metadata with BCP-47 documentation |
| frontend/src/VeraRoom/stores/bridge/constants/bridgeAttributes.ts | Extended attributes array to include 'language' |
| frontend/src/VeraRoom/stores/bridge/bridge$.ts | Added update action to the bridge context (currently unused) |
| frontend/src/VeraRoom/stages/WaitingRoomStage/index.ts | Created barrel export for WaitingRoomStage |
| frontend/src/VeraRoom/stages/WaitingRoomStage/WaitingRoomStage.tsx | Implemented embeddable waiting room with publisher initialization and device selection |
| frontend/src/VeraRoom/stages/MeetingRoomStage/index.ts | Created barrel export for MeetingRoomStage |
| frontend/src/VeraRoom/stages/MeetingRoomStage/MeetingRoomStage.tsx | Implemented embeddable meeting room with session and publisher providers |
| frontend/src/VeraRoom/stages/GoodByeStage/index.ts | Created barrel export for GoodByeStage |
| frontend/src/VeraRoom/stages/GoodByeStage/GoodByeStage.tsx | Implemented embeddable goodbye screen with archive list and re-entry option |
| frontend/src/VeraRoom/index.ts | Added i18n initialization import |
| frontend/src/VeraRoom/example/Example.tsx | Updated example to demonstrate web component usage with attributes |
| frontend/src/VeraRoom/VeraRoomElement.tsx | Implemented custom element with attribute observation and React rendering |
| frontend/src/VeraRoom/VeraRoom.tsx | Created root component with routing and context providers |
frontend/src/VeraRoom/stages/WaitingRoomStage/WaitingRoomStage.tsx
Outdated
Show resolved
Hide resolved
frontend/src/VeraRoom/stages/WaitingRoomStage/WaitingRoomStage.tsx
Outdated
Show resolved
Hide resolved
…eGoodByePage hook for state management
…t and functionality; add useMeetingRoom hook for state management
|
No tests for |
…ShadowPortalContext for MUI portals in Shadow DOM
…e synchronization; remove unused ShadowPortalContext
…ooks; enhance VeraRoomElement logic for attribute handling
…t screenshot comparison tolerance in utils
frontend/src/VeraRoom/stages/MeetingRoomStage/MeetingRoomStage.spec.tsx
Outdated
Show resolved
Hide resolved
frontend/src/VeraRoom/stages/WaitingRoomStage/WaitingRoomStage.spec.tsx
Outdated
Show resolved
Hide resolved
johnny-quesada-developer
left a comment
johnny-quesada-developer
left a comment
There was a problem hiding this comment.
Hi @OscarFava ,
Incredible job! I just added some minor comments... But this is looking awesome!
…nhance MeetingRoom component with BoxProps and tailwind-merge
|
✅ Deployed to VCRURL: https://neru-ca37991c-vonage-video-react-app-vera-pr-384.euw1.runtime.vonage.cloud Commit: |
|
Tested the fix for https://jira.vonage.com/browse/VIDSOL-634 on Chrome, Firefox, and Safari with multiple screen widths and different browser zoom levels. Also verified in mobile view using responsive mode. The layout and margins appear correct and no alignment issues were observed. |
sharad-srivastava2
left a comment
sharad-srivastava2
left a comment
There was a problem hiding this comment.
VIDSOL-634 LGTM
What is this PR doing?
Creating Vera Room embeddable component
How should this be manually tested?
Generic testing executing: yarn dev room.
What are the relevant tickets?
A maintainer will add this ticket number.
Resolves VIDSOL-498
Checklist
[X] Branch is based on
develop(notmain).[ ] Resolves a
Known Issue.[ ] If yes, did you remove the item from the
docs/KNOWN_ISSUES.md?[ ] Resolves an item reported in
Issues.If yes, which issue? Issue Number?