@samparkchat/sampark-web-chat 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/sampark/sampark-chat/components/Actions/GroupMessageActions.d.ts +5 -0
- package/sampark/sampark-chat/components/Actions/GroupMessageActions.js +49 -33
- package/sampark/sampark-chat/components/Actions/MessageActions.d.ts +4 -0
- package/sampark/sampark-chat/components/Actions/MessageActions.js +69 -40
- package/sampark/sampark-chat/components/AttachmentGroupFileSharing.js +7 -0
- package/sampark/sampark-chat/components/GroupVideoCall.js +6 -12
- package/sampark/sampark-chat/components/Headers/ChatHeader.d.ts +3 -0
- package/sampark/sampark-chat/components/Headers/ChatHeader.js +41 -8
- package/sampark/sampark-chat/components/Headers/GroupChatHeader.d.ts +2 -0
- package/sampark/sampark-chat/components/Headers/GroupChatHeader.js +11 -6
- package/sampark/sampark-chat/components/Headers/HeaderPanel/GroupList.js +150 -82
- package/sampark/sampark-chat/components/bottomsheets/GroupBottomSheet.d.ts +2 -0
- package/sampark/sampark-chat/components/bottomsheets/GroupBottomSheet.js +47 -23
- package/sampark/sampark-chat/components/lists/CommonList.d.ts +1 -0
- package/sampark/sampark-chat/components/lists/CommonList.js +29 -6
- package/sampark/sampark-chat/components/lists/UserInfo.d.ts +2 -0
- package/sampark/sampark-chat/components/lists/UserInfo.js +16 -12
- package/sampark/sampark-chat/components/lists/ViewParticipents.d.ts +2 -0
- package/sampark/sampark-chat/components/lists/ViewParticipents.js +331 -47
- package/sampark/sampark-chat/components/modals/MessageInfoModal.d.ts +26 -0
- package/sampark/sampark-chat/components/modals/MessageInfoModal.js +177 -0
- package/sampark/sampark-chat/components/modals/UnbanRequestModal.js +5 -4
- package/sampark/sampark-chat/models/ConfirmActionModal.d.ts +1 -0
- package/sampark/sampark-chat/models/ConfirmActionModal.js +2 -2
- package/sampark/sampark-chat/screens/PeerChatScreen.d.ts +2 -0
- package/sampark/sampark-chat/screens/PeerChatScreen.js +152 -79
- package/sampark/sampark-chat/screens/SamparkChatsScreen.js +201 -62
- package/sampark/sampark-chat/screens/groupChatScreen.d.ts +2 -0
- package/sampark/sampark-chat/screens/groupChatScreen.js +231 -53
- package/sampark/sampark-chat/sdk/client/Groupchat.d.ts +33 -2
- package/sampark/sampark-chat/sdk/client/Groupchat.js +189 -15
- package/sampark/sampark-chat/sdk/interface/SamparkGroupChatService.d.ts +6 -0
- package/sampark/sampark-chat/sdk/types/DirectUnbanParticipantRequest.d.ts +12 -0
- package/sampark/sampark-chat/sdk/types/DirectUnbanParticipantRequest.js +15 -0
- package/sampark/sampark-chat/sdk/types/UpdateGroupStatus.d.ts +3 -1
- package/sampark/sampark-chat/sdk/types/UpdateGroupStatus.js +4 -2
- package/sampark/sampark-chat/services/Common.d.ts +4 -0
- package/sampark/sampark-chat/services/Common.js +17 -0
- package/sampark/sampark-chat/theme/icons.d.ts +5 -0
- package/sampark/sampark-chat/theme/icons.js +2 -1
- package/sampark/sampark-chat/types/ChatSettings.d.ts +23 -0
- package/sampark/sampark-chat/types/ChatSettings.js +45 -0
package/package.json
CHANGED
|
@@ -16,11 +16,16 @@ interface GroupMessageActionsProps {
|
|
|
16
16
|
onEditClick?: () => void;
|
|
17
17
|
onReplyClick?: () => void;
|
|
18
18
|
onThreadClick?: () => void;
|
|
19
|
+
onInfoClick?: () => void;
|
|
19
20
|
allowReact?: boolean;
|
|
20
21
|
visible?: boolean;
|
|
21
22
|
canDelete?: boolean;
|
|
22
23
|
onDeleteClick?: () => void;
|
|
23
24
|
messageType?: string;
|
|
25
|
+
is_thread?: boolean;
|
|
26
|
+
isQuoteReplyDisabled?: boolean;
|
|
27
|
+
isMessageReactionDisabled?: boolean;
|
|
28
|
+
isDeleteChatDisabled?: boolean;
|
|
24
29
|
}
|
|
25
30
|
declare const GroupMessageActions: React.FC<GroupMessageActionsProps>;
|
|
26
31
|
export default GroupMessageActions;
|
|
@@ -15,19 +15,20 @@ import EmojiPicker from 'emoji-picker-react';
|
|
|
15
15
|
import CustomIcons, { AppIcons } from '../../theme/icons';
|
|
16
16
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
17
17
|
import colors from '../../theme/colors';
|
|
18
|
+
import Tooltip from '../Tooltip';
|
|
18
19
|
var GroupMessageActions = function (_a) {
|
|
19
20
|
var _b;
|
|
20
|
-
var showEmojiPicker = _a.showEmojiPicker, showMenu = _a.showMenu, onEmojiClick = _a.onEmojiClick, onMenuClick = _a.onMenuClick, onEmojiSelect = _a.onEmojiSelect, onCloseEmojiPicker = _a.onCloseEmojiPicker, onCloseMenu = _a.onCloseMenu, message = _a.message, _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.inline, inline = _d === void 0 ? false : _d, _e = _a.canEdit, canEdit = _e === void 0 ? false : _e, onEditClick = _a.onEditClick, onReplyClick = _a.onReplyClick, onThreadClick = _a.onThreadClick, _f = _a.allowReact, allowReact = _f === void 0 ? true : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, _h = _a.canDelete, canDelete = _h === void 0 ? false : _h, onDeleteClick = _a.onDeleteClick, _j = _a.messageType, messageType = _j === void 0 ? 'text' : _j;
|
|
21
|
-
var
|
|
22
|
-
var
|
|
21
|
+
var showEmojiPicker = _a.showEmojiPicker, showMenu = _a.showMenu, onEmojiClick = _a.onEmojiClick, onMenuClick = _a.onMenuClick, onEmojiSelect = _a.onEmojiSelect, onCloseEmojiPicker = _a.onCloseEmojiPicker, onCloseMenu = _a.onCloseMenu, message = _a.message, _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.inline, inline = _d === void 0 ? false : _d, _e = _a.canEdit, canEdit = _e === void 0 ? false : _e, onEditClick = _a.onEditClick, onReplyClick = _a.onReplyClick, onThreadClick = _a.onThreadClick, onInfoClick = _a.onInfoClick, _f = _a.allowReact, allowReact = _f === void 0 ? true : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, _h = _a.canDelete, canDelete = _h === void 0 ? false : _h, onDeleteClick = _a.onDeleteClick, _j = _a.messageType, messageType = _j === void 0 ? 'text' : _j, _k = _a.is_thread, is_thread = _k === void 0 ? true : _k, _l = _a.isQuoteReplyDisabled, isQuoteReplyDisabled = _l === void 0 ? false : _l, _m = _a.isMessageReactionDisabled, isMessageReactionDisabled = _m === void 0 ? false : _m, _o = _a.isDeleteChatDisabled, isDeleteChatDisabled = _o === void 0 ? false : _o;
|
|
22
|
+
var _p = React.useState(false), copied = _p[0], setCopied = _p[1];
|
|
23
|
+
var _q = React.useState(false), isHovered = _q[0], setIsHovered = _q[1];
|
|
23
24
|
var containerRef = React.useRef(null);
|
|
24
|
-
var
|
|
25
|
-
var
|
|
26
|
-
var
|
|
25
|
+
var _r = React.useState('above'), menuPlacement = _r[0], setMenuPlacement = _r[1];
|
|
26
|
+
var _s = React.useState('right'), menuAlign = _s[0], setMenuAlign = _s[1];
|
|
27
|
+
var _t = React.useState(null), anchorRect = _t[0], setAnchorRect = _t[1];
|
|
27
28
|
var menuRef = React.useRef(null);
|
|
28
29
|
var emojiRef = React.useRef(null);
|
|
29
|
-
var
|
|
30
|
-
var
|
|
30
|
+
var _u = React.useState(null), menuPortalStyle = _u[0], setMenuPortalStyle = _u[1];
|
|
31
|
+
var _v = React.useState(null), emojiPortalStyle = _v[0], setEmojiPortalStyle = _v[1];
|
|
31
32
|
var handleCopy = function () {
|
|
32
33
|
if (navigator && navigator.clipboard) {
|
|
33
34
|
navigator.clipboard.writeText(message);
|
|
@@ -138,7 +139,7 @@ var GroupMessageActions = function (_a) {
|
|
|
138
139
|
setMenuPortalStyle(computeStyle(false));
|
|
139
140
|
setEmojiPortalStyle(computeStyle(true));
|
|
140
141
|
}, [anchorRect, menuPlacement, menuAlign, showMenu, showEmojiPicker]);
|
|
141
|
-
var emojiPortalEl = (emojiPortalStyle && showEmojiPicker && allowReact) ? ReactDOM.createPortal(React.createElement("div", { ref: emojiRef, className: "emoji-picker-container", onClick: function (e) { return e.stopPropagation(); }, style: __assign(__assign({}, emojiPortalStyle), { borderRadius: 12, boxShadow: '0 4px 20px rgba(0,0,0,0.15)', border: '1px solid #e0e0e0', overflow: 'hidden' }) },
|
|
142
|
+
var emojiPortalEl = (emojiPortalStyle && showEmojiPicker && allowReact && !isMessageReactionDisabled) ? ReactDOM.createPortal(React.createElement("div", { ref: emojiRef, className: "emoji-picker-container", onClick: function (e) { return e.stopPropagation(); }, style: __assign(__assign({}, emojiPortalStyle), { borderRadius: 12, boxShadow: '0 4px 20px rgba(0,0,0,0.15)', border: '1px solid #e0e0e0', overflow: 'hidden' }) },
|
|
142
143
|
React.createElement(EmojiPicker, { onEmojiClick: function (emojiData) {
|
|
143
144
|
var _a;
|
|
144
145
|
var emojiId = emojiData.unified;
|
|
@@ -147,23 +148,33 @@ var GroupMessageActions = function (_a) {
|
|
|
147
148
|
onEmojiSelect({ emojiId: emojiId, emojiType: emojiType });
|
|
148
149
|
}, width: 280, height: 300, previewConfig: { showPreview: false }, searchDisabled: true })), document.body) : null;
|
|
149
150
|
var menuPortalEl = (menuPortalStyle && showMenu) ? ReactDOM.createPortal(React.createElement("div", { ref: menuRef, className: "message-menu-container", style: __assign(__assign({}, menuPortalStyle), { background: '#fff', borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.10)', border: '1px solid rgba(15,23,42,0.06)', minWidth: 150, padding: '6px 0', display: 'flex', flexDirection: 'column', gap: 0, animation: 'fadeInScale 0.12s ease-out', overflow: 'hidden' }) },
|
|
150
|
-
React.createElement("button", { style: { background: 'none', border: 'none', width: '100%', display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 16px', fontSize: '14px', color: '#444', cursor: 'pointer' }, onClick: function () { onCloseMenu(); onThreadClick === null || onThreadClick === void 0 ? void 0 : onThreadClick(); } },
|
|
151
|
+
is_thread ? (React.createElement("button", { style: { background: 'none', border: 'none', width: '100%', display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 16px', fontSize: '14px', color: '#444', cursor: 'pointer' }, onClick: function () { onCloseMenu(); onThreadClick === null || onThreadClick === void 0 ? void 0 : onThreadClick(); } },
|
|
151
152
|
React.createElement(FontAwesomeIcon, { icon: AppIcons.faCommentDots.icon, style: { fontSize: AppIcons.faCommentDots.size, color: AppIcons.faCommentDots.color }, "aria-hidden": true }),
|
|
152
|
-
"Thread"),
|
|
153
|
+
"Thread")) : (React.createElement(Tooltip, { content: "this is disabled" },
|
|
154
|
+
React.createElement("div", { style: { background: 'none', border: 'none', width: '100%', display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 16px', fontSize: '14px', color: '#444', cursor: 'not-allowed', opacity: 0.5 } },
|
|
155
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.faCommentDots.icon, style: { fontSize: AppIcons.faCommentDots.size, color: AppIcons.faCommentDots.color }, "aria-hidden": true }),
|
|
156
|
+
"Thread"))),
|
|
153
157
|
messageType === 'text' && React.createElement("button", { style: { background: 'none', border: 'none', width: '100%', display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 16px', fontSize: '14px', color: copied ? '#007bff' : '#444', cursor: 'pointer', position: 'relative' }, onClick: handleCopy },
|
|
154
158
|
React.createElement(FontAwesomeIcon, { icon: AppIcons.faCopy.icon, style: { fontSize: AppIcons.faCopy.size, color: AppIcons.faCopy.color }, "aria-hidden": true }),
|
|
155
159
|
copied ? 'Copied' : 'Copy'),
|
|
156
160
|
canEdit && messageType === 'text' && (React.createElement("button", { style: { background: 'none', border: 'none', width: '100%', display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 16px', fontSize: '14px', color: '#444', cursor: 'pointer' }, onClick: function () { onCloseMenu(); onEditClick && onEditClick(); } },
|
|
157
161
|
React.createElement(FontAwesomeIcon, { icon: AppIcons.faPenToSquare.icon, style: { fontSize: AppIcons.faPenToSquare.size, color: AppIcons.faPenToSquare.color }, "aria-hidden": true }),
|
|
158
162
|
"Edit")),
|
|
159
|
-
React.createElement(
|
|
160
|
-
React.createElement(
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
163
|
+
React.createElement(Tooltip, { content: isQuoteReplyDisabled ? "Reply is disabled by admin" : "", position: "bottom", disabled: !isQuoteReplyDisabled },
|
|
164
|
+
React.createElement("button", { className: isQuoteReplyDisabled ? "disabled-reply" : "", style: { background: 'none', border: 'none', width: '100%', display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 16px', fontSize: '14px', color: '#444', cursor: isQuoteReplyDisabled ? 'not-allowed' : 'pointer',
|
|
165
|
+
opacity: isQuoteReplyDisabled ? 0.5 : 1,
|
|
166
|
+
pointerEvents: isQuoteReplyDisabled ? 'none' : 'auto' }, onClick: isQuoteReplyDisabled ? undefined : function () { onCloseMenu(); onReplyClick === null || onReplyClick === void 0 ? void 0 : onReplyClick(); } },
|
|
167
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.faReply.icon, style: { fontSize: AppIcons.faReply.size, color: AppIcons.faReply.color }, "aria-hidden": true }),
|
|
168
|
+
"Reply")),
|
|
169
|
+
onInfoClick && (React.createElement("button", { style: { background: 'none', border: 'none', width: '100%', display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 16px', fontSize: '14px', color: '#444', cursor: 'pointer' }, onClick: function () { onCloseMenu(); onInfoClick(); } },
|
|
170
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.faMessage.icon, style: { fontSize: AppIcons.faMessage.size, color: AppIcons.faMessage.color }, "aria-hidden": true }),
|
|
171
|
+
"Info")),
|
|
172
|
+
canDelete && (React.createElement(Tooltip, { content: isDeleteChatDisabled ? "this is disabled by admin" : "", position: "bottom", disabled: !isDeleteChatDisabled },
|
|
173
|
+
React.createElement("button", { style: { background: 'none', border: 'none', width: '100%', display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 16px', fontSize: '14px', color: '#444', cursor: isDeleteChatDisabled ? 'not-allowed' : 'pointer', opacity: isDeleteChatDisabled ? 0.5 : 1, pointerEvents: isDeleteChatDisabled ? 'none' : 'auto' }, onClick: isDeleteChatDisabled ? undefined : function () { onCloseMenu(); onDeleteClick && onDeleteClick(); } },
|
|
174
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.DeleteChat.icon, style: { fontSize: AppIcons.DeleteChat.size, color: AppIcons.DeleteChat.color }, "aria-hidden": true }),
|
|
175
|
+
"Delete")))), document.body) : null;
|
|
165
176
|
return (React.createElement(React.Fragment, null,
|
|
166
|
-
React.createElement("style", null, "\n @keyframes fadeInScale {\n from { opacity: 0; transform: scale(0.98); }\n to { opacity: 1; transform: scale(1); }\n }\n .message-menu-container button:hover { background: rgba(0,0,0,0.04); }\n .message-menu-container i { width: 18px; text-align: center; }\n /* Prevent vertical movement on hover; keep icons visually interactive without shifting layout */\n .chat-message-icons span button:hover { transform: none; }\n "),
|
|
177
|
+
React.createElement("style", null, "\n @keyframes fadeInScale {\n from { opacity: 0; transform: scale(0.98); }\n to { opacity: 1; transform: scale(1); }\n }\n .message-menu-container button:hover:not(.disabled-reply) { background: rgba(0,0,0,0.04); }\n .message-menu-container i { width: 18px; text-align: center; }\n /* Prevent vertical movement on hover; keep icons visually interactive without shifting layout */\n .chat-message-icons span button:hover { transform: none; }\n "),
|
|
167
178
|
React.createElement("div", { ref: containerRef, className: "chat-message-icons", style: (_b = {
|
|
168
179
|
display: 'flex',
|
|
169
180
|
flexDirection: 'row',
|
|
@@ -191,21 +202,26 @@ var GroupMessageActions = function (_a) {
|
|
|
191
202
|
boxShadow: '0 2px 8px rgba(0,0,0,0.10)',
|
|
192
203
|
border: '1px solid #eee',
|
|
193
204
|
} },
|
|
194
|
-
React.createElement("
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
205
|
+
React.createElement(Tooltip, { content: isMessageReactionDisabled ? "this is disabled by admin" : "", position: "bottom", disabled: !isMessageReactionDisabled, offset: -5 },
|
|
206
|
+
React.createElement("button", { style: {
|
|
207
|
+
background: 'none',
|
|
208
|
+
border: 'none',
|
|
209
|
+
padding: 0,
|
|
210
|
+
cursor: isMessageReactionDisabled ? 'not-allowed' : 'pointer',
|
|
211
|
+
color: '#888',
|
|
212
|
+
fontSize: '20px',
|
|
213
|
+
display: 'flex',
|
|
214
|
+
alignItems: 'center',
|
|
215
|
+
justifyContent: 'center',
|
|
216
|
+
opacity: isMessageReactionDisabled ? 0.5 : 1,
|
|
217
|
+
pointerEvents: isMessageReactionDisabled ? 'none' : 'auto',
|
|
218
|
+
}, onClick: function (e) {
|
|
219
|
+
e.stopPropagation();
|
|
220
|
+
if (!isMessageReactionDisabled) {
|
|
221
|
+
onEmojiClick();
|
|
222
|
+
}
|
|
223
|
+
} },
|
|
224
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.faFaceSmile.icon, style: { fontSize: AppIcons.faFaceSmile.size, color: AppIcons.faFaceSmile.color }, "aria-hidden": true }))))),
|
|
209
225
|
React.createElement("span", { style: {
|
|
210
226
|
display: 'flex',
|
|
211
227
|
alignItems: 'center',
|
|
@@ -18,7 +18,11 @@ interface MessageActionsProps {
|
|
|
18
18
|
onReplyClick?: () => void;
|
|
19
19
|
canDelete?: boolean;
|
|
20
20
|
onDeleteClick?: () => void;
|
|
21
|
+
onInfoClick?: () => void;
|
|
21
22
|
messageType?: string;
|
|
23
|
+
isQuoteReplyDisabled?: boolean;
|
|
24
|
+
isMessageReactionDisabled?: boolean;
|
|
25
|
+
isDeleteChatDisabled?: boolean;
|
|
22
26
|
}
|
|
23
27
|
declare const MessageActions: React.FC<MessageActionsProps>;
|
|
24
28
|
export default MessageActions;
|
|
@@ -14,13 +14,14 @@ import EmojiPicker from 'emoji-picker-react';
|
|
|
14
14
|
import CustomIcons, { AppIcons } from '../../theme/icons';
|
|
15
15
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
16
16
|
import colors from '../../theme/colors';
|
|
17
|
+
import Tooltip from '../Tooltip';
|
|
17
18
|
var MessageActions = function (_a) {
|
|
18
19
|
var _b;
|
|
19
|
-
var showEmojiPicker = _a.showEmojiPicker, showMenu = _a.showMenu, onEmojiClick = _a.onEmojiClick, onMenuClick = _a.onMenuClick, onEmojiSelect = _a.onEmojiSelect, onCloseEmojiPicker = _a.onCloseEmojiPicker, onCloseMenu = _a.onCloseMenu, message = _a.message, _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.canEdit, canEdit = _d === void 0 ? false : _d, _e = _a.allowReact, allowReact = _e === void 0 ? true : _e, onEditClick = _a.onEditClick, onThreadClick = _a.onThreadClick, _f = _a.canDelete, canDelete = _f === void 0 ? false : _f, onDeleteClick = _a.onDeleteClick, _g = _a.messageType, messageType = _g === void 0 ? 'text' : _g, onReplyClick = _a.onReplyClick;
|
|
20
|
-
var
|
|
21
|
-
var
|
|
20
|
+
var showEmojiPicker = _a.showEmojiPicker, showMenu = _a.showMenu, onEmojiClick = _a.onEmojiClick, onMenuClick = _a.onMenuClick, onEmojiSelect = _a.onEmojiSelect, onCloseEmojiPicker = _a.onCloseEmojiPicker, onCloseMenu = _a.onCloseMenu, message = _a.message, _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.canEdit, canEdit = _d === void 0 ? false : _d, _e = _a.allowReact, allowReact = _e === void 0 ? true : _e, onEditClick = _a.onEditClick, onThreadClick = _a.onThreadClick, _f = _a.canDelete, canDelete = _f === void 0 ? false : _f, onDeleteClick = _a.onDeleteClick, onInfoClick = _a.onInfoClick, _g = _a.messageType, messageType = _g === void 0 ? 'text' : _g, onReplyClick = _a.onReplyClick, _h = _a.isQuoteReplyDisabled, isQuoteReplyDisabled = _h === void 0 ? false : _h, _j = _a.isMessageReactionDisabled, isMessageReactionDisabled = _j === void 0 ? false : _j, _k = _a.isDeleteChatDisabled, isDeleteChatDisabled = _k === void 0 ? false : _k;
|
|
21
|
+
var _l = React.useState(false), copied = _l[0], setCopied = _l[1];
|
|
22
|
+
var _m = React.useState(false), isHovered = _m[0], setIsHovered = _m[1];
|
|
22
23
|
var containerRef = React.useRef(null);
|
|
23
|
-
var
|
|
24
|
+
var _o = React.useState('above'), menuPlacement = _o[0], setMenuPlacement = _o[1];
|
|
24
25
|
var handleCopy = function () {
|
|
25
26
|
if (navigator && navigator.clipboard) {
|
|
26
27
|
navigator.clipboard.writeText(message);
|
|
@@ -69,7 +70,7 @@ var MessageActions = function (_a) {
|
|
|
69
70
|
};
|
|
70
71
|
}, [showMenu, showEmojiPicker]);
|
|
71
72
|
return (React.createElement(React.Fragment, null,
|
|
72
|
-
React.createElement("style", null, "\n @keyframes fadeInScale {\n from { opacity: 0; transform: scale(0.98); }\n to { opacity: 1; transform: scale(1); }\n }\n .message-menu-container button:hover { background: rgba(0,0,0,0.04); }\n .message-menu-container i { width: 18px; text-align: center; }\n /* Prevent vertical movement on hover; keep icons visually interactive without shifting layout */\n .chat-message-icons span button:hover { transform: none; }\n "),
|
|
73
|
+
React.createElement("style", null, "\n @keyframes fadeInScale {\n from { opacity: 0; transform: scale(0.98); }\n to { opacity: 1; transform: scale(1); }\n }\n .message-menu-container button:hover:not(.disabled-reply) { background: rgba(0,0,0,0.04); }\n .message-menu-container i { width: 18px; text-align: center; }\n /* Prevent vertical movement on hover; keep icons visually interactive without shifting layout */\n .chat-message-icons span button:hover { transform: none; }\n "),
|
|
73
74
|
React.createElement("div", { ref: containerRef, className: "chat-message-icons", style: (_b = {
|
|
74
75
|
display: 'flex',
|
|
75
76
|
flexDirection: 'row',
|
|
@@ -97,21 +98,26 @@ var MessageActions = function (_a) {
|
|
|
97
98
|
boxShadow: '0 2px 8px rgba(0,0,0,0.10)',
|
|
98
99
|
border: '1px solid #eee',
|
|
99
100
|
} },
|
|
100
|
-
React.createElement("
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
101
|
+
React.createElement(Tooltip, { content: isMessageReactionDisabled ? "this is disabled by admin" : "", position: "bottom", disabled: !isMessageReactionDisabled, offset: -5 },
|
|
102
|
+
React.createElement("button", { style: {
|
|
103
|
+
background: 'none',
|
|
104
|
+
border: 'none',
|
|
105
|
+
padding: 0,
|
|
106
|
+
cursor: isMessageReactionDisabled ? 'not-allowed' : 'pointer',
|
|
107
|
+
color: '#888',
|
|
108
|
+
fontSize: '20px',
|
|
109
|
+
display: 'flex',
|
|
110
|
+
alignItems: 'center',
|
|
111
|
+
justifyContent: 'center',
|
|
112
|
+
opacity: isMessageReactionDisabled ? 0.5 : 1,
|
|
113
|
+
pointerEvents: isMessageReactionDisabled ? 'none' : 'auto',
|
|
114
|
+
}, onClick: function (e) {
|
|
115
|
+
e.stopPropagation();
|
|
116
|
+
if (!isMessageReactionDisabled) {
|
|
117
|
+
onEmojiClick();
|
|
118
|
+
}
|
|
119
|
+
} },
|
|
120
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.faFaceSmile.icon, style: { fontSize: AppIcons.faFaceSmile.size, color: AppIcons.faFaceSmile.color }, "aria-hidden": true }))))),
|
|
115
121
|
React.createElement("span", { style: {
|
|
116
122
|
display: 'flex',
|
|
117
123
|
alignItems: 'center',
|
|
@@ -138,7 +144,7 @@ var MessageActions = function (_a) {
|
|
|
138
144
|
onMenuClick();
|
|
139
145
|
} },
|
|
140
146
|
React.createElement(FontAwesomeIcon, { icon: CustomIcons.faEllipsisV.icon, style: { fontSize: CustomIcons.faEllipsisV.size, color: colors.muted } }))),
|
|
141
|
-
showEmojiPicker && allowReact && (React.createElement("div", { className: "emoji-picker-container", onClick: function (e) { return e.stopPropagation(); }, style: __assign(__assign({ position: 'absolute' }, (menuPlacement === 'above' ? { bottom: '100%', marginBottom: '8px' } : { top: '100%', marginTop: '8px' })), { zIndex: 9999, backgroundColor: 'white', borderRadius: '12px', boxShadow: '0 4px 20px rgba(0,0,0,0.15)', border: '1px solid #e0e0e0' }) },
|
|
147
|
+
showEmojiPicker && allowReact && !isMessageReactionDisabled && (React.createElement("div", { className: "emoji-picker-container", onClick: function (e) { return e.stopPropagation(); }, style: __assign(__assign({ position: 'absolute' }, (menuPlacement === 'above' ? { bottom: '100%', marginBottom: '8px' } : { top: '100%', marginTop: '8px' })), { zIndex: 9999, backgroundColor: 'white', borderRadius: '12px', boxShadow: '0 4px 20px rgba(0,0,0,0.15)', border: '1px solid #e0e0e0' }) },
|
|
142
148
|
React.createElement(EmojiPicker, { onEmojiClick: function (emojiData) {
|
|
143
149
|
var _a;
|
|
144
150
|
var emojiId = emojiData.unified; // unique
|
|
@@ -146,7 +152,7 @@ var MessageActions = function (_a) {
|
|
|
146
152
|
var emojiType = rawType.toLowerCase().replace(/\s+/g, "_");
|
|
147
153
|
onEmojiSelect({ emojiId: emojiId, emojiType: emojiType });
|
|
148
154
|
}, width: 300, height: 300, previewConfig: { showPreview: false }, searchDisabled: true }))),
|
|
149
|
-
showMenu && (React.createElement("div", { className: "message-menu-container", style: __assign(__assign({ position: 'absolute' }, (menuPlacement === 'above' ? { bottom: '100%', marginBottom: '8px' } : { top: '100%', marginTop: '8px' })), { right: position === 'right' ? '0' : 'auto', left: position === 'left' ? '0' : '-20px', zIndex: 9999, background: colors.white, borderRadius: '10px', boxShadow: '0 8px 24px rgba(0,0,0,0.10)', border: '1px solid rgba(15,23,42,0.06)', minWidth: '160px', padding: '6px 0', display: 'flex', flexDirection: 'column', gap: '0', animation: 'fadeInScale 0.12s ease-out' }) },
|
|
155
|
+
showMenu && (React.createElement("div", { className: "message-menu-container", style: __assign(__assign({ position: 'absolute' }, (menuPlacement === 'above' ? { bottom: '100%', marginBottom: '8px' } : { top: '100%', marginTop: '8px' })), { right: position === 'right' ? '0' : 'auto', left: position === 'left' ? '0' : '-20px', zIndex: 9999, background: colors.white, borderRadius: '10px', boxShadow: '0 8px 24px rgba(0,0,0,0.10)', border: '1px solid rgba(15,23,42,0.06)', minWidth: '160px', padding: '6px 0', display: 'flex', flexDirection: 'column', gap: '0', animation: 'fadeInScale 0.12s ease-out', overflow: 'visible' }) },
|
|
150
156
|
React.createElement("button", { style: {
|
|
151
157
|
background: 'none',
|
|
152
158
|
border: 'none',
|
|
@@ -196,7 +202,24 @@ var MessageActions = function (_a) {
|
|
|
196
202
|
} },
|
|
197
203
|
React.createElement(FontAwesomeIcon, { icon: AppIcons.faPenToSquare.icon, style: { fontSize: AppIcons.faPenToSquare.size, color: AppIcons.faPenToSquare.color }, "aria-hidden": true }),
|
|
198
204
|
"Edit")),
|
|
199
|
-
React.createElement("
|
|
205
|
+
React.createElement(Tooltip, { content: isQuoteReplyDisabled ? "Reply is disabled by admin" : "", position: "bottom", disabled: !isQuoteReplyDisabled },
|
|
206
|
+
React.createElement("button", { className: isQuoteReplyDisabled ? "disabled-reply" : "", style: {
|
|
207
|
+
background: 'none',
|
|
208
|
+
border: 'none',
|
|
209
|
+
width: '100%',
|
|
210
|
+
display: 'flex',
|
|
211
|
+
alignItems: 'center',
|
|
212
|
+
gap: '12px',
|
|
213
|
+
padding: '10px 16px',
|
|
214
|
+
fontSize: '14px',
|
|
215
|
+
color: '#444',
|
|
216
|
+
cursor: isQuoteReplyDisabled ? 'not-allowed' : 'pointer',
|
|
217
|
+
opacity: isQuoteReplyDisabled ? 0.5 : 1,
|
|
218
|
+
pointerEvents: isQuoteReplyDisabled ? 'none' : 'auto',
|
|
219
|
+
}, onClick: isQuoteReplyDisabled ? undefined : function () { onCloseMenu(); onReplyClick && onReplyClick(); } },
|
|
220
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.faReply.icon, style: { fontSize: AppIcons.faReply.size, color: AppIcons.faReply.color }, "aria-hidden": true }),
|
|
221
|
+
"Reply")),
|
|
222
|
+
onInfoClick && (React.createElement("button", { style: {
|
|
200
223
|
background: 'none',
|
|
201
224
|
border: 'none',
|
|
202
225
|
width: '100%',
|
|
@@ -207,22 +230,28 @@ var MessageActions = function (_a) {
|
|
|
207
230
|
fontSize: '14px',
|
|
208
231
|
color: '#444',
|
|
209
232
|
cursor: 'pointer',
|
|
210
|
-
}, onClick: function () {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
233
|
+
}, onClick: function () {
|
|
234
|
+
onCloseMenu();
|
|
235
|
+
onInfoClick();
|
|
236
|
+
} },
|
|
237
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.faMessage.icon, style: { fontSize: AppIcons.faMessage.size, color: AppIcons.faMessage.color }, "aria-hidden": true }),
|
|
238
|
+
"Info")),
|
|
239
|
+
canDelete && (React.createElement(Tooltip, { content: isDeleteChatDisabled ? "this is disabled by admin" : "", position: "top", disabled: !isDeleteChatDisabled },
|
|
240
|
+
React.createElement("button", { style: {
|
|
241
|
+
background: 'none',
|
|
242
|
+
border: 'none',
|
|
243
|
+
width: '100%',
|
|
244
|
+
display: 'flex',
|
|
245
|
+
alignItems: 'center',
|
|
246
|
+
gap: '12px',
|
|
247
|
+
padding: '10px 16px',
|
|
248
|
+
fontSize: '14px',
|
|
249
|
+
color: '#444',
|
|
250
|
+
cursor: isDeleteChatDisabled ? 'not-allowed' : 'pointer',
|
|
251
|
+
opacity: isDeleteChatDisabled ? 0.5 : 1,
|
|
252
|
+
pointerEvents: isDeleteChatDisabled ? 'none' : 'auto',
|
|
253
|
+
}, onClick: isDeleteChatDisabled ? undefined : function () { onCloseMenu(); onDeleteClick && onDeleteClick(); } },
|
|
254
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.DeleteChat.icon, style: { fontSize: AppIcons.DeleteChat.size, color: colors.muted }, "aria-hidden": true }),
|
|
255
|
+
"Delete"))))))));
|
|
227
256
|
};
|
|
228
257
|
export default MessageActions;
|
|
@@ -173,6 +173,13 @@ var AttachmentGroupFileSharing = function (_a) {
|
|
|
173
173
|
React.createElement("div", { style: styles.attachmentIcon },
|
|
174
174
|
React.createElement(FontAwesomeIcon, { icon: CustomIcons.faFile.icon, style: { fontSize: CustomIcons.faFile.size, color: colors.white } })),
|
|
175
175
|
React.createElement("span", { style: __assign({}, fonts.content) }, "Attach File")),
|
|
176
|
+
React.createElement("div", { style: styles.attachmentMenuItem, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = colors.optionHover; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () {
|
|
177
|
+
console.log('Polls clicked');
|
|
178
|
+
onClose();
|
|
179
|
+
} },
|
|
180
|
+
React.createElement("div", { style: styles.attachmentIcon },
|
|
181
|
+
React.createElement(FontAwesomeIcon, { icon: CustomIcons.faChartBar.icon, style: { fontSize: CustomIcons.faChartBar.size, color: colors.white } })),
|
|
182
|
+
React.createElement("span", { style: __assign({}, fonts.content) }, "Polls")),
|
|
176
183
|
React.createElement("input", { type: "file", ref: imageInputRef, accept: "image/*", style: { display: 'none' }, onChange: function (e) {
|
|
177
184
|
var files = e.target.files;
|
|
178
185
|
if (onAttachImage) {
|
|
@@ -2533,12 +2533,10 @@ var GroupVideoCall = function (_a) {
|
|
|
2533
2533
|
!isMinimized && (React.createElement("div", { style: isScreenSharing ? __assign(__assign({}, styles.controlsContainer), styles.fullScreenControls) : styles.controlsContainer },
|
|
2534
2534
|
React.createElement("div", { className: "control-button-wrapper" },
|
|
2535
2535
|
React.createElement("button", { style: __assign(__assign({}, styles.controlButton), { color: cameraEnabled ? '#fff' : '#e50d0dff' }), onClick: toggleCamera },
|
|
2536
|
-
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: cameraEnabled ? faVideo : faVideoSlash })),
|
|
2537
|
-
React.createElement("span", { className: "custom-tooltip tooltip-top" }, cameraEnabled ? "Turn off camera" : "Turn on camera")),
|
|
2536
|
+
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: cameraEnabled ? faVideo : faVideoSlash }))),
|
|
2538
2537
|
React.createElement("div", { className: "control-button-wrapper" },
|
|
2539
2538
|
React.createElement("button", { style: __assign(__assign({}, styles.controlButton), { color: micEnabled ? '#fff' : '#e50d0dff' }), onClick: toggleMic },
|
|
2540
|
-
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: micEnabled ? faMicrophone : faMicrophoneSlash })),
|
|
2541
|
-
React.createElement("span", { className: "custom-tooltip tooltip-top" }, micEnabled ? "Mute microphone" : "Unmute microphone")),
|
|
2539
|
+
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: micEnabled ? faMicrophone : faMicrophoneSlash }))),
|
|
2542
2540
|
React.createElement("div", { className: "control-button-wrapper" },
|
|
2543
2541
|
React.createElement("button", { style: isScreenSharing ? __assign(__assign({}, styles.controlButton), styles.screenShareActive) : styles.controlButton, ref: screenShareButtonRef, onClick: function () {
|
|
2544
2542
|
if (isScreenSharing) {
|
|
@@ -2555,26 +2553,22 @@ var GroupVideoCall = function (_a) {
|
|
|
2555
2553
|
startScreenShare();
|
|
2556
2554
|
}
|
|
2557
2555
|
} },
|
|
2558
|
-
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faDesktop })),
|
|
2559
|
-
React.createElement("span", { className: "custom-tooltip tooltip-top" }, isScreenSharing ? "Screen share options" : "Start screen share")),
|
|
2556
|
+
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faDesktop }))),
|
|
2560
2557
|
React.createElement("div", { className: "control-button-wrapper" },
|
|
2561
2558
|
React.createElement("button", { style: styles.controlButton, onClick: function () {
|
|
2562
2559
|
setIsMinimized(true);
|
|
2563
2560
|
setWasDragged(false);
|
|
2564
2561
|
} },
|
|
2565
|
-
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faCompress })),
|
|
2566
|
-
React.createElement("span", { className: "custom-tooltip tooltip-top" }, "Minimize call")),
|
|
2562
|
+
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faCompress }))),
|
|
2567
2563
|
React.createElement("div", { className: "control-button-wrapper" },
|
|
2568
2564
|
React.createElement("button", { style: styles.controlButton, onClick: function () {
|
|
2569
2565
|
setShowInvitePanel(true);
|
|
2570
2566
|
setShowAvailableUsers(false);
|
|
2571
2567
|
} },
|
|
2572
|
-
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faUserPlus })),
|
|
2573
|
-
React.createElement("span", { className: "custom-tooltip tooltip-top" }, "Invite participants")),
|
|
2568
|
+
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faUserPlus }))),
|
|
2574
2569
|
React.createElement("div", { className: "control-button-wrapper" },
|
|
2575
2570
|
React.createElement("button", { style: __assign(__assign({}, styles.controlButton), styles.endCallButton), onClick: handleEndCall },
|
|
2576
|
-
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faPhoneSlash })),
|
|
2577
|
-
React.createElement("span", { className: "custom-tooltip tooltip-top" }, "End call")))),
|
|
2571
|
+
React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faPhoneSlash }))))),
|
|
2578
2572
|
showScreenSharePopup && (React.createElement("div", { style: styles.screenSharePopupOverlay, onClick: function () { return setShowScreenSharePopup(false); } },
|
|
2579
2573
|
React.createElement("div", { style: __assign(__assign({}, styles.screenSharePopup), { top: popupPosition.top, left: popupPosition.left }), onClick: function (e) { return e.stopPropagation(); } },
|
|
2580
2574
|
React.createElement("button", { style: styles.popupButton, onClick: function () {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { ChatSettings } from "../../types/ChatSettings";
|
|
2
3
|
type PeerChatHeaderProps = {
|
|
3
4
|
userProfilePic?: string;
|
|
4
5
|
onclick?: any;
|
|
@@ -21,6 +22,8 @@ type PeerChatHeaderProps = {
|
|
|
21
22
|
participantStatuses?: {
|
|
22
23
|
[userId: string]: string;
|
|
23
24
|
};
|
|
25
|
+
chatSettings?: ChatSettings;
|
|
26
|
+
showProfile?: boolean;
|
|
24
27
|
};
|
|
25
28
|
declare const PeerChatHeader: React.FC<PeerChatHeaderProps>;
|
|
26
29
|
export default PeerChatHeader;
|
|
@@ -17,33 +17,66 @@ import fonts from "../../theme/fonts";
|
|
|
17
17
|
import ProfileAvatar from "../modals/ProfileAvatar";
|
|
18
18
|
import Tooltip from "../Tooltip";
|
|
19
19
|
var PeerChatHeader = function (_a) {
|
|
20
|
-
var userProfilePic = _a.userProfilePic, onclick = _a.onclick, _b = _a.showBackButton, showBackButton = _b === void 0 ? true : _b, mainHeading = _a.mainHeading, _c = _a.headingStyle, headingStyle = _c === void 0 ? {} : _c, isPeerOnline = _a.isPeerOnline, _d = _a.showActionButtons, showActionButtons = _d === void 0 ? true : _d, onVideoCall = _a.onVideoCall, onAudioCall = _a.onAudioCall, onUserClick = _a.onUserClick, _e = _a.showVideoCall, showVideoCall = _e === void 0 ? false : _e, onSearch = _a.onSearch, _f = _a.showOptions, showOptions = _f === void 0 ? false : _f, onOptionsClick = _a.onOptionsClick, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, busyCallusersList = _a.busyCallusersList, peerUserId = _a.peerUserId,
|
|
20
|
+
var userProfilePic = _a.userProfilePic, onclick = _a.onclick, _b = _a.showBackButton, showBackButton = _b === void 0 ? true : _b, mainHeading = _a.mainHeading, _c = _a.headingStyle, headingStyle = _c === void 0 ? {} : _c, isPeerOnline = _a.isPeerOnline, _d = _a.showActionButtons, showActionButtons = _d === void 0 ? true : _d, onVideoCall = _a.onVideoCall, onAudioCall = _a.onAudioCall, onUserClick = _a.onUserClick, _e = _a.showVideoCall, showVideoCall = _e === void 0 ? false : _e, onSearch = _a.onSearch, _f = _a.showOptions, showOptions = _f === void 0 ? false : _f, onOptionsClick = _a.onOptionsClick, _g = _a.showProfile, showProfile = _g === void 0 ? true : _g, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, busyCallusersList = _a.busyCallusersList, peerUserId = _a.peerUserId, _h = _a.participantStatuses, participantStatuses = _h === void 0 ? {} : _h, chatSettings = _a.chatSettings;
|
|
21
21
|
var getHeaderGradient = function () {
|
|
22
22
|
var primary = primaryColor || colors.blue;
|
|
23
23
|
var secondary = secondaryColor || colors.blueLight;
|
|
24
24
|
return "linear-gradient(115deg, ".concat(primary, " 0%, ").concat(secondary, " 100%)");
|
|
25
25
|
};
|
|
26
|
+
var getDisplayedStatus = function () {
|
|
27
|
+
if (!isPeerOnline)
|
|
28
|
+
return 'Offline';
|
|
29
|
+
var explicit = participantStatuses && peerUserId ? participantStatuses[peerUserId] : undefined;
|
|
30
|
+
if (explicit)
|
|
31
|
+
return explicit;
|
|
32
|
+
if (busyCallusersList === null || busyCallusersList === void 0 ? void 0 : busyCallusersList.includes(peerUserId || ""))
|
|
33
|
+
return 'Busy';
|
|
34
|
+
return 'Available';
|
|
35
|
+
};
|
|
36
|
+
var formatStatusLabel = function (raw) {
|
|
37
|
+
if (!raw)
|
|
38
|
+
return '';
|
|
39
|
+
var lower = raw.toLowerCase();
|
|
40
|
+
var mapping = {
|
|
41
|
+
'do_not_disturb': 'Do Not Disturb',
|
|
42
|
+
'dnd': 'Do Not Disturb',
|
|
43
|
+
'in_call': 'In a call',
|
|
44
|
+
'on_call': 'In a call',
|
|
45
|
+
'busy': 'Busy',
|
|
46
|
+
'available': 'Available',
|
|
47
|
+
'online': 'Available',
|
|
48
|
+
'offline': 'Offline',
|
|
49
|
+
'away': 'Away',
|
|
50
|
+
};
|
|
51
|
+
if (mapping[lower])
|
|
52
|
+
return mapping[lower];
|
|
53
|
+
return raw.replace(/[_-]+/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); });
|
|
54
|
+
};
|
|
26
55
|
return (React.createElement("div", { style: __assign(__assign({}, styles.headerContainer), { background: getHeaderGradient() }) },
|
|
27
56
|
showBackButton && (React.createElement("button", { onClick: onclick, style: styles.backButton },
|
|
28
57
|
React.createElement(FontAwesomeIcon, { icon: CustomIcons.BackArrow.icon, style: { fontSize: CustomIcons.BackArrow.size, color: CustomIcons.BackArrow.color } }))),
|
|
29
58
|
React.createElement("div", { style: styles.userInfo },
|
|
30
|
-
React.createElement("div", { style: styles.profilePicContainer },
|
|
31
|
-
React.createElement(ProfileAvatar, { userName: mainHeading || '', profilePic: userProfilePic, size: 45, showOnlineIndicator: true, isOnline: isPeerOnline || false, isBusy: busyCallusersList === null || busyCallusersList === void 0 ? void 0 : busyCallusersList.includes(peerUserId || ""), userId: peerUserId, participantStatuses: participantStatuses, primaryColor: primaryColor, secondaryColor: secondaryColor })),
|
|
59
|
+
React.createElement("div", { style: styles.profilePicContainer }, showProfile ? (React.createElement(ProfileAvatar, { userName: mainHeading || '', profilePic: userProfilePic, size: 45, showOnlineIndicator: true, isOnline: isPeerOnline || false, isBusy: busyCallusersList === null || busyCallusersList === void 0 ? void 0 : busyCallusersList.includes(peerUserId || ""), userId: peerUserId, participantStatuses: participantStatuses, primaryColor: primaryColor, secondaryColor: secondaryColor })) : (React.createElement("div", { style: { width: 45, height: 45, borderRadius: 22, display: 'block' } }))),
|
|
32
60
|
React.createElement("div", { style: styles.userDetails },
|
|
33
61
|
React.createElement("h2", { style: styles.userName, onClick: onUserClick },
|
|
34
62
|
" ",
|
|
35
63
|
mainHeading),
|
|
36
|
-
React.createElement("span", { style: __assign(__assign({}, styles.onlineStatus), {
|
|
64
|
+
showProfile && (React.createElement("span", { style: __assign(__assign({}, styles.onlineStatus), { marginTop: 4, fontSize: 13 }) }, formatStatusLabel(getDisplayedStatus()))))),
|
|
37
65
|
(showActionButtons || showOptions) && (React.createElement("div", { style: styles.actionButtons },
|
|
38
66
|
showActionButtons && (React.createElement(React.Fragment, null,
|
|
39
|
-
React.createElement(Tooltip, { content: "Audio Call", position: "
|
|
67
|
+
React.createElement(Tooltip, { content: "Audio Call", position: "bottom" },
|
|
40
68
|
React.createElement("button", { disabled: !isPeerOnline || showVideoCall || (busyCallusersList === null || busyCallusersList === void 0 ? void 0 : busyCallusersList.includes(peerUserId || "")), style: __assign(__assign({}, styles.actionButton), { opacity: (!isPeerOnline || showVideoCall || (busyCallusersList === null || busyCallusersList === void 0 ? void 0 : busyCallusersList.includes(peerUserId || ""))) ? 0.5 : 1 }), "aria-label": "Call", onClick: onAudioCall },
|
|
41
69
|
React.createElement(FontAwesomeIcon, { icon: CustomIcons.faPhone.icon, style: { fontSize: CustomIcons.faPhone.size, color: colors.white } }))),
|
|
42
|
-
React.createElement(Tooltip, { content: "Video Call", position: "
|
|
70
|
+
React.createElement(Tooltip, { content: "Video Call", position: "bottom" },
|
|
43
71
|
React.createElement("button", { disabled: !isPeerOnline || showVideoCall || (busyCallusersList === null || busyCallusersList === void 0 ? void 0 : busyCallusersList.includes(peerUserId || "")), style: __assign(__assign({}, styles.actionButton), { opacity: (!isPeerOnline || showVideoCall || (busyCallusersList === null || busyCallusersList === void 0 ? void 0 : busyCallusersList.includes(peerUserId || ""))) ? 0.5 : 1 }), "aria-label": "Video Call", onClick: onVideoCall },
|
|
44
72
|
React.createElement(FontAwesomeIcon, { icon: CustomIcons.faVideo.icon, style: { fontSize: CustomIcons.faVideo.size, color: colors.white } }))),
|
|
45
|
-
React.createElement(Tooltip, { content: "Search", position: "
|
|
46
|
-
React.createElement("button", { style: styles.actionButton, "aria-label": "Search", onClick:
|
|
73
|
+
React.createElement(Tooltip, { content: (chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.is_search_message) === false ? "Search is disabled by admin" : "Search", position: "bottom", offset: 4 },
|
|
74
|
+
React.createElement("button", { style: __assign(__assign({}, styles.actionButton), { cursor: (chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.is_search_message) === false ? 'not-allowed' : 'pointer', opacity: (chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.is_search_message) === false ? 0.5 : 1 }), "aria-label": "Search", onClick: function () {
|
|
75
|
+
if ((chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.is_search_message) === false) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
onSearch === null || onSearch === void 0 ? void 0 : onSearch();
|
|
79
|
+
} },
|
|
47
80
|
React.createElement(FontAwesomeIcon, { icon: CustomIcons.faSearch.icon, style: { fontSize: CustomIcons.faSearch.size, color: colors.white } }))))),
|
|
48
81
|
showOptions && (React.createElement(Tooltip, { content: "Options", position: "top", offset: 12 },
|
|
49
82
|
React.createElement("button", { style: styles.actionButton, "aria-label": "Options", onClick: onOptionsClick },
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { FunctionComponent } from 'react';
|
|
2
|
+
import { ChatSettings } from '../../types/ChatSettings';
|
|
2
3
|
type props = {
|
|
3
4
|
onClick: () => void;
|
|
4
5
|
showBackButton: boolean;
|
|
@@ -20,6 +21,7 @@ type props = {
|
|
|
20
21
|
showVideoCall?: boolean;
|
|
21
22
|
primaryColor?: string;
|
|
22
23
|
secondaryColor?: string;
|
|
24
|
+
chatSettings?: ChatSettings;
|
|
23
25
|
};
|
|
24
26
|
declare const GroupChatHeader: FunctionComponent<props>;
|
|
25
27
|
export default GroupChatHeader;
|
|
@@ -53,7 +53,7 @@ import CustomIcons from '../../theme/icons';
|
|
|
53
53
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
54
54
|
import Tooltip from '../Tooltip';
|
|
55
55
|
var GroupChatHeader = function (_a) {
|
|
56
|
-
var onClick = _a.onClick, showBackButton = _a.showBackButton, mainHeading = _a.mainHeading, setShowParticipantsList = _a.setShowParticipantsList, headingStyle = _a.headingStyle, setShowHideParticipantScreen = _a.setShowHideParticipantScreen, setViewParticipantsList = _a.setViewParticipantsList, setShowGroupOptionBottomSheet = _a.setShowGroupOptionBottomSheet, onSearch = _a.onSearch, userJoinedGroupStatus = _a.userJoinedGroupStatus, _b = _a.groupType, groupType = _b === void 0 ? 'public' : _b, _c = _a.participantsCount, participantsCount = _c === void 0 ? 0 : _c, onHeaderClick = _a.onHeaderClick, handleVideoCall = _a.handleVideoCall, handleAudioCall = _a.handleAudioCall, rejoinGroupCall = _a.rejoinGroupCall, _d = _a.showJoinGroupCallBtn, showJoinGroupCallBtn = _d === void 0 ? false : _d, _e = _a.showVideoCall, showVideoCall = _e === void 0 ? false : _e, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor;
|
|
56
|
+
var onClick = _a.onClick, showBackButton = _a.showBackButton, mainHeading = _a.mainHeading, setShowParticipantsList = _a.setShowParticipantsList, headingStyle = _a.headingStyle, setShowHideParticipantScreen = _a.setShowHideParticipantScreen, setViewParticipantsList = _a.setViewParticipantsList, setShowGroupOptionBottomSheet = _a.setShowGroupOptionBottomSheet, onSearch = _a.onSearch, userJoinedGroupStatus = _a.userJoinedGroupStatus, _b = _a.groupType, groupType = _b === void 0 ? 'public' : _b, _c = _a.participantsCount, participantsCount = _c === void 0 ? 0 : _c, onHeaderClick = _a.onHeaderClick, handleVideoCall = _a.handleVideoCall, handleAudioCall = _a.handleAudioCall, rejoinGroupCall = _a.rejoinGroupCall, _d = _a.showJoinGroupCallBtn, showJoinGroupCallBtn = _d === void 0 ? false : _d, _e = _a.showVideoCall, showVideoCall = _e === void 0 ? false : _e, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, chatSettings = _a.chatSettings;
|
|
57
57
|
var _f = React.useState(false), showInfoModal = _f[0], setShowInfoModal = _f[1];
|
|
58
58
|
var _g = React.useState(""), infoModalMessage = _g[0], setInfoModalMessage = _g[1];
|
|
59
59
|
var getHeaderGradient = function () {
|
|
@@ -116,17 +116,22 @@ var GroupChatHeader = function (_a) {
|
|
|
116
116
|
React.createElement("h3", { style: __assign(__assign({}, headingStyle), styles.groupName) }, mainHeading),
|
|
117
117
|
React.createElement("p", { style: styles.statusText }, participantsCount > 0 ? "".concat(participantsCount, " participants") : '')))),
|
|
118
118
|
showBackButton && (React.createElement("div", { style: styles.rightSection },
|
|
119
|
-
!showJoinGroupCallBtn && (React.createElement(Tooltip, { content: "Audio Call", position: "
|
|
119
|
+
!showJoinGroupCallBtn && (React.createElement(Tooltip, { content: "Audio Call", position: "bottom" },
|
|
120
120
|
React.createElement("button", { style: __assign(__assign({}, styles.actionButton), { opacity: showVideoCall ? 0.5 : 1 }), disabled: showVideoCall, onClick: handleAudioCall },
|
|
121
121
|
React.createElement(FontAwesomeIcon, { icon: CustomIcons.faPhone.icon, style: { fontSize: CustomIcons.faPhone.size, color: colors.white } })))),
|
|
122
|
-
!showJoinGroupCallBtn && (React.createElement(Tooltip, { content: "Video Call", position: "
|
|
122
|
+
!showJoinGroupCallBtn && (React.createElement(Tooltip, { content: "Video Call", position: "bottom" },
|
|
123
123
|
React.createElement("button", { style: __assign(__assign({}, styles.actionButton), { opacity: showVideoCall ? 0.5 : 1 }), disabled: showVideoCall, onClick: handleVideoCall },
|
|
124
124
|
React.createElement(FontAwesomeIcon, { icon: CustomIcons.faVideo.icon, style: { fontSize: CustomIcons.faVideo.size, color: colors.white } })))),
|
|
125
|
-
showJoinGroupCallBtn && (React.createElement(Tooltip, { content: "Rejoin Call", position: "
|
|
125
|
+
showJoinGroupCallBtn && (React.createElement(Tooltip, { content: "Rejoin Call", position: "bottom" },
|
|
126
126
|
React.createElement("button", { style: __assign(__assign({}, styles.actionButton), { opacity: showVideoCall ? 0.5 : 1 }), disabled: showVideoCall, onClick: rejoinGroupCall },
|
|
127
127
|
React.createElement(FontAwesomeIcon, { icon: CustomIcons.faVideo.icon, style: { fontSize: CustomIcons.faVideo.size, color: 'red' } })))),
|
|
128
|
-
React.createElement(Tooltip, { content: "Search", position: "
|
|
129
|
-
React.createElement("button", { onClick: function () {
|
|
128
|
+
React.createElement(Tooltip, { content: (chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.is_search_message) === false ? "Search is disabled by admin" : "Search", position: "bottom", offset: 4 },
|
|
129
|
+
React.createElement("button", { onClick: function () {
|
|
130
|
+
if ((chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.is_search_message) === false) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
onSearch && onSearch();
|
|
134
|
+
}, style: __assign(__assign({}, styles.actionButton), { cursor: (chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.is_search_message) === false ? 'not-allowed' : 'pointer', opacity: (chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.is_search_message) === false ? 0.5 : 1 }), "aria-label": "Search" },
|
|
130
135
|
React.createElement(FontAwesomeIcon, { icon: CustomIcons.faSearch.icon, style: { fontSize: CustomIcons.faSearch.size, color: colors.white } })))))),
|
|
131
136
|
React.createElement(InfoModal, { open: showInfoModal, message: infoModalMessage, onClose: function () { return setShowInfoModal(false); } })));
|
|
132
137
|
};
|