Skip to content

Commit 09551f9

Browse files
gabriellshgabriellsh
authored
feat: Show peer's muted and held state on Media call widget (RocketChat#37469)
1 parent 150efb9 commit 09551f9

12 files changed

Lines changed: 286 additions & 128 deletions

‎.changeset/young-cherries-battle.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@rocket.chat/ui-voip": minor
3+
---
4+
5+
Introduces visualization of the peer's muted and held state inside the Media Call widget

‎packages/ui-voip/src/v2/MediaCallContext.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ type MediaCallContextType = {
3737
muted: boolean;
3838
held: boolean;
3939

40+
remoteMuted: boolean;
41+
remoteHeld: boolean;
42+
4043
onMute: () => void;
4144
onHold: () => void;
4245

@@ -69,6 +72,9 @@ export const defaultMediaCallContextValue: MediaCallContextType = {
6972

7073
muted: false,
7174
held: false,
75+
remoteMuted: false,
76+
remoteHeld: false,
77+
7278
onMute: () => undefined,
7379
onHold: () => undefined,
7480

‎packages/ui-voip/src/v2/MediaCallProvider.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,8 @@ const MediaCallProvider = ({ children }: { children: React.ReactNode }) => {
251251
peerInfo: session.peerInfo,
252252
transferredBy: session.transferredBy,
253253
hidden: session.hidden,
254+
remoteMuted: session.remoteMuted,
255+
remoteHeld: session.remoteHeld,
254256
onMute,
255257
onHold,
256258
onDeviceChange,

‎packages/ui-voip/src/v2/MockedMediaCallProvider.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,18 @@ const MediaCallProviderMock = ({
1111
children,
1212
state = 'closed',
1313
transferredBy = undefined,
14+
remoteMuted = false,
15+
remoteHeld = false,
16+
muted = false,
17+
held = false,
1418
}: {
1519
children: React.ReactNode;
1620
state?: State;
1721
transferredBy?: string;
22+
remoteMuted?: boolean;
23+
remoteHeld?: boolean;
24+
muted?: boolean;
25+
held?: boolean;
1826
}) => {
1927
const [peerInfo, setPeerInfo] = useState<PeerInfo | undefined>({
2028
displayName: 'John Doe',
@@ -25,15 +33,15 @@ const MediaCallProviderMock = ({
2533
status: UserStatus.ONLINE,
2634
});
2735
const [widgetState, setWidgetState] = useState<State>(state);
28-
const [muted, setMuted] = useState(false);
29-
const [held, setHeld] = useState(false);
36+
const [mutedState, setMutedState] = useState(muted);
37+
const [heldState, setHeldState] = useState(held);
3038

31-
const onMute = () => setMuted((prev) => !prev);
32-
const onHold = () => setHeld((prev) => !prev);
39+
const onMute = () => setMutedState((prev) => !prev);
40+
const onHold = () => setHeldState((prev) => !prev);
3341

3442
const clearState = () => {
35-
setMuted(false);
36-
setHeld(false);
43+
setMutedState(false);
44+
setHeldState(false);
3745
};
3846

3947
const onDeviceChange = (device: any) => {
@@ -118,8 +126,10 @@ const MediaCallProviderMock = ({
118126
connectionState: 'CONNECTED' as const,
119127
peerInfo,
120128
transferredBy,
121-
muted,
122-
held,
129+
muted: mutedState,
130+
held: heldState,
131+
remoteMuted,
132+
remoteHeld,
123133
onMute,
124134
onHold,
125135
onDeviceChange,

‎packages/ui-voip/src/v2/__snapshots__/MediaCallWidget.spec.tsx.snap‎

Lines changed: 131 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -71,27 +71,31 @@ exports[`renders IncomingCall without crashing 1`] = `
7171
</figure>
7272
</div>
7373
<div
74-
class="rcx-box rcx-box--full rcx-css-1tbw8nv"
74+
class="rcx-box rcx-box--full rcx-css-jgzlgu"
7575
>
7676
<div
77-
class="rcx-box rcx-box--full rcx-css-tfsv0s"
78-
>
79-
<svg
80-
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
81-
height="24"
82-
viewBox="0 0 24 24"
83-
width="24"
84-
xmlns="http://www.w3.org/2000/svg"
85-
>
86-
<path
87-
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
88-
/>
89-
</svg>
90-
<div
91-
class="rcx-box rcx-box--full rcx-css-nc7kyx"
77+
class="rcx-box rcx-box--full rcx-css-14t6xuk"
78+
>
79+
<span
80+
class="rcx-box rcx-box--full rcx-css-ilfe77"
9281
>
93-
John Doe
94-
</div>
82+
<svg
83+
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
84+
height="24"
85+
viewBox="0 0 24 24"
86+
width="24"
87+
xmlns="http://www.w3.org/2000/svg"
88+
>
89+
<path
90+
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
91+
/>
92+
</svg>
93+
<div
94+
class="rcx-box rcx-box--full rcx-css-nc7kyx"
95+
>
96+
John Doe
97+
</div>
98+
</span>
9599
</div>
96100
<div
97101
class="rcx-box rcx-box--full rcx-css-1c8uhnw"
@@ -234,27 +238,31 @@ exports[`renders IncomingCallTransfer without crashing 1`] = `
234238
</figure>
235239
</div>
236240
<div
237-
class="rcx-box rcx-box--full rcx-css-1tbw8nv"
241+
class="rcx-box rcx-box--full rcx-css-jgzlgu"
238242
>
239243
<div
240-
class="rcx-box rcx-box--full rcx-css-tfsv0s"
241-
>
242-
<svg
243-
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
244-
height="24"
245-
viewBox="0 0 24 24"
246-
width="24"
247-
xmlns="http://www.w3.org/2000/svg"
248-
>
249-
<path
250-
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
251-
/>
252-
</svg>
253-
<div
254-
class="rcx-box rcx-box--full rcx-css-nc7kyx"
244+
class="rcx-box rcx-box--full rcx-css-14t6xuk"
245+
>
246+
<span
247+
class="rcx-box rcx-box--full rcx-css-ilfe77"
255248
>
256-
John Doe
257-
</div>
249+
<svg
250+
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
251+
height="24"
252+
viewBox="0 0 24 24"
253+
width="24"
254+
xmlns="http://www.w3.org/2000/svg"
255+
>
256+
<path
257+
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
258+
/>
259+
</svg>
260+
<div
261+
class="rcx-box rcx-box--full rcx-css-nc7kyx"
262+
>
263+
John Doe
264+
</div>
265+
</span>
258266
</div>
259267
<div
260268
class="rcx-box rcx-box--full rcx-css-1c8uhnw"
@@ -455,27 +463,31 @@ exports[`renders NewCall without crashing 1`] = `
455463
</figure>
456464
</div>
457465
<div
458-
class="rcx-box rcx-box--full rcx-css-1tbw8nv"
466+
class="rcx-box rcx-box--full rcx-css-jgzlgu"
459467
>
460468
<div
461-
class="rcx-box rcx-box--full rcx-css-tfsv0s"
469+
class="rcx-box rcx-box--full rcx-css-14t6xuk"
462470
>
463-
<svg
464-
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
465-
height="24"
466-
viewBox="0 0 24 24"
467-
width="24"
468-
xmlns="http://www.w3.org/2000/svg"
471+
<span
472+
class="rcx-box rcx-box--full rcx-css-ilfe77"
469473
>
470-
<path
471-
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
472-
/>
473-
</svg>
474-
<div
475-
class="rcx-box rcx-box--full rcx-css-nc7kyx"
476-
>
477-
John Doe
478-
</div>
474+
<svg
475+
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
476+
height="24"
477+
viewBox="0 0 24 24"
478+
width="24"
479+
xmlns="http://www.w3.org/2000/svg"
480+
>
481+
<path
482+
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
483+
/>
484+
</svg>
485+
<div
486+
class="rcx-box rcx-box--full rcx-css-nc7kyx"
487+
>
488+
John Doe
489+
</div>
490+
</span>
479491
</div>
480492
<div
481493
class="rcx-box rcx-box--full rcx-css-1c8uhnw"
@@ -612,27 +624,31 @@ exports[`renders OngoingCall without crashing 1`] = `
612624
</figure>
613625
</div>
614626
<div
615-
class="rcx-box rcx-box--full rcx-css-1tbw8nv"
627+
class="rcx-box rcx-box--full rcx-css-jgzlgu"
616628
>
617629
<div
618-
class="rcx-box rcx-box--full rcx-css-tfsv0s"
619-
>
620-
<svg
621-
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
622-
height="24"
623-
viewBox="0 0 24 24"
624-
width="24"
625-
xmlns="http://www.w3.org/2000/svg"
626-
>
627-
<path
628-
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
629-
/>
630-
</svg>
631-
<div
632-
class="rcx-box rcx-box--full rcx-css-nc7kyx"
630+
class="rcx-box rcx-box--full rcx-css-14t6xuk"
631+
>
632+
<span
633+
class="rcx-box rcx-box--full rcx-css-ilfe77"
633634
>
634-
John Doe
635-
</div>
635+
<svg
636+
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
637+
height="24"
638+
viewBox="0 0 24 24"
639+
width="24"
640+
xmlns="http://www.w3.org/2000/svg"
641+
>
642+
<path
643+
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
644+
/>
645+
</svg>
646+
<div
647+
class="rcx-box rcx-box--full rcx-css-nc7kyx"
648+
>
649+
John Doe
650+
</div>
651+
</span>
636652
</div>
637653
<div
638654
class="rcx-box rcx-box--full rcx-css-1c8uhnw"
@@ -801,27 +817,31 @@ exports[`renders OutgoingCall without crashing 1`] = `
801817
</figure>
802818
</div>
803819
<div
804-
class="rcx-box rcx-box--full rcx-css-1tbw8nv"
820+
class="rcx-box rcx-box--full rcx-css-jgzlgu"
805821
>
806822
<div
807-
class="rcx-box rcx-box--full rcx-css-tfsv0s"
808-
>
809-
<svg
810-
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
811-
height="24"
812-
viewBox="0 0 24 24"
813-
width="24"
814-
xmlns="http://www.w3.org/2000/svg"
815-
>
816-
<path
817-
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
818-
/>
819-
</svg>
820-
<div
821-
class="rcx-box rcx-box--full rcx-css-nc7kyx"
823+
class="rcx-box rcx-box--full rcx-css-14t6xuk"
824+
>
825+
<span
826+
class="rcx-box rcx-box--full rcx-css-ilfe77"
822827
>
823-
John Doe
824-
</div>
828+
<svg
829+
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
830+
height="24"
831+
viewBox="0 0 24 24"
832+
width="24"
833+
xmlns="http://www.w3.org/2000/svg"
834+
>
835+
<path
836+
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
837+
/>
838+
</svg>
839+
<div
840+
class="rcx-box rcx-box--full rcx-css-nc7kyx"
841+
>
842+
John Doe
843+
</div>
844+
</span>
825845
</div>
826846
<div
827847
class="rcx-box rcx-box--full rcx-css-1c8uhnw"
@@ -947,27 +967,31 @@ exports[`renders OutgoingCallTransfer without crashing 1`] = `
947967
</figure>
948968
</div>
949969
<div
950-
class="rcx-box rcx-box--full rcx-css-1tbw8nv"
970+
class="rcx-box rcx-box--full rcx-css-jgzlgu"
951971
>
952972
<div
953-
class="rcx-box rcx-box--full rcx-css-tfsv0s"
954-
>
955-
<svg
956-
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
957-
height="24"
958-
viewBox="0 0 24 24"
959-
width="24"
960-
xmlns="http://www.w3.org/2000/svg"
961-
>
962-
<path
963-
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
964-
/>
965-
</svg>
966-
<div
967-
class="rcx-box rcx-box--full rcx-css-nc7kyx"
973+
class="rcx-box rcx-box--full rcx-css-14t6xuk"
974+
>
975+
<span
976+
class="rcx-box rcx-box--full rcx-css-ilfe77"
968977
>
969-
John Doe
970-
</div>
978+
<svg
979+
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
980+
height="24"
981+
viewBox="0 0 24 24"
982+
width="24"
983+
xmlns="http://www.w3.org/2000/svg"
984+
>
985+
<path
986+
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
987+
/>
988+
</svg>
989+
<div
990+
class="rcx-box rcx-box--full rcx-css-nc7kyx"
991+
>
992+
John Doe
993+
</div>
994+
</span>
971995
</div>
972996
<div
973997
class="rcx-box rcx-box--full rcx-css-1c8uhnw"

0 commit comments

Comments
 (0)