-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
/
CallingHeader.tsx
96 lines (93 loc) · 2.81 KB
/
CallingHeader.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// Copyright 2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import classNames from 'classnames';
import { LocalizerType } from '../types/Util';
import { Tooltip, TooltipTheme } from './Tooltip';
export type PropsType = {
canPip?: boolean;
i18n: LocalizerType;
isGroupCall?: boolean;
message?: string;
participantCount: number;
showParticipantsList: boolean;
title?: string;
toggleParticipants?: () => void;
togglePip?: () => void;
toggleSettings: () => void;
};
export const CallingHeader = ({
canPip = false,
i18n,
isGroupCall = false,
message,
participantCount,
showParticipantsList,
title,
toggleParticipants,
togglePip,
toggleSettings,
}: PropsType): JSX.Element => (
<div className="module-calling__header">
{title ? (
<div className="module-calling__header--header-name">{title}</div>
) : null}
{message ? (
<div className="module-ongoing-call__header-message">{message}</div>
) : null}
<div className="module-calling-tools">
{isGroupCall ? (
<div className="module-calling-tools__button">
<Tooltip
content={i18n('calling__participants', [String(participantCount)])}
theme={TooltipTheme.Dark}
>
<button
aria-label={i18n('calling__participants', [
String(participantCount),
])}
className={classNames(
'module-calling-button__participants--container',
{
'module-calling-button__participants--shown': showParticipantsList,
}
)}
onClick={toggleParticipants}
type="button"
>
<i className="module-calling-button__participants" />
<span className="module-calling-button__participants--count">
{participantCount}
</span>
</button>
</Tooltip>
</div>
) : null}
<div className="module-calling-tools__button">
<Tooltip
content={i18n('callingDeviceSelection__settings')}
theme={TooltipTheme.Dark}
>
<button
aria-label={i18n('callingDeviceSelection__settings')}
className="module-calling-button__settings"
onClick={toggleSettings}
type="button"
/>
</Tooltip>
</div>
{canPip && (
<div className="module-calling-tools__button">
<Tooltip content={i18n('calling__pip--on')} theme={TooltipTheme.Dark}>
<button
aria-label={i18n('calling__pip--on')}
className="module-calling-button__pip"
onClick={togglePip}
type="button"
/>
</Tooltip>
</div>
)}
</div>
</div>
);