VIDSOL-515: Recording indication not always visible#418
Merged
Conversation
…mallViewportHeader Adjust customSize for audio icons in AudioIndicator and DeviceControlButton Update tests to include rendering of RecordingIndicator
OscarFava
requested review from
Hossein-Movahed,
VZaphod and
johnny-quesada-developer
Contributor
There was a problem hiding this comment.
Pull request overview
Ensures the “recording active” visual indicator is visible in the Meeting Room across viewport sizes by introducing a dedicated RecordingIndicator component and rendering it on desktop as well as small viewports.
Changes:
- Add a reusable
RecordingIndicatorcomponent and associated unit tests. - Render the recording indicator on desktop (MeetingRoom root) when recording is active.
- Refactor SmallViewportHeader to use Tailwind classes and the new indicator component; update related tests.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/pages/MeetingRoom/MeetingRoom.tsx | Converts root styling from MUI sx to Tailwind classes and adds a desktop recording indicator overlay. |
| frontend/src/pages/MeetingRoom/MeetingRoom.spec.tsx | Adds coverage asserting the desktop recording indicator renders when archiveId is set. |
| frontend/src/components/MeetingRoom/SmallViewportHeader/SmallViewportHeader.tsx | Replaces the old recording icon with the shared RecordingIndicator and moves styling to Tailwind utilities. |
| frontend/src/components/MeetingRoom/SmallViewportHeader/SmallViewportHeader.spec.tsx | Updates assertions to match the new RecordingIndicator test id. |
| frontend/src/components/MeetingRoom/RecordingIndicator/index.tsx | Adds barrel export for the new component. |
| frontend/src/components/MeetingRoom/RecordingIndicator/RecordingIndicator.tsx | Introduces the new animated dot/pulse indicator with compact/regular sizing. |
| frontend/src/components/MeetingRoom/RecordingIndicator/RecordingIndicator.spec.tsx | Adds unit tests for indicator structure and compact sizing behavior. |
| frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.tsx | Adjusts several toolbar icon sizes. |
| frontend/src/components/MeetingRoom/AudioIndicator/AudioIndicator.tsx | Adjusts microphone icon sizing. |
johnny-quesada-developer
requested changes
Mar 20, 2026
frontend/src/components/MeetingRoom/RecordingIndicator/RecordingIndicator.tsx
Outdated
Show resolved
Hide resolved
frontend/src/components/MeetingRoom/RecordingIndicator/RecordingIndicator.tsx
Outdated
Show resolved
Hide resolved
…st MeetingRoom classNames
johnny-quesada-developer
previously approved these changes
Mar 20, 2026
johnny-quesada-developer
approved these changes
Mar 20, 2026
|
Contributor
|
Tested and LGTM |
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
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.
What is this PR doing?
when you start the recording you expect to have a visual indicatoin visible at all times.
Now a red indication seems to appear only when the viewport is small and is a valid icon.
How should this be manually tested?
Check red indicator is always visible.
What are the relevant tickets?
A maintainer will add this ticket number.
Resolves VIDSOL-515
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?