Skip to content

Commit 300675c

Browse files
raj-dubey1raj-dubey1
committed
Updated UIKit version to 6.0.1
1 parent 3355e4d commit 300675c

File tree

37 files changed

+354
-207
lines changed

37 files changed

+354
-207
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@cometchat/chat-uikit-react",
3-
"version": "6.0.0",
3+
"version": "6.0.1",
44
"description": "Ready-to-use Chat UI Components for React(Javascript/Web)",
55
"author": "CometChat",
66
"dependencies": {

‎sample-app/package-lock.json‎

Lines changed: 26 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/CometChatUIKit/CometChatUIKit.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ class CometChatUIKit {
100100
return new Promise((resolve, reject) => {
101101
window.CometChatUiKit = {
102102
name: "@cometchat/chat-uikit-react",
103-
version: "6.0.0",
103+
version: "6.0.1",
104104
};
105105
CometChat.init(uiKitSettings?.appId, appSettings).then(() => {
106106
CometChat.getLoggedinUser().then((user: CometChat.User | null) => {

‎src/components/BaseComponents/CometChatActionSheet/CometChatActionSheet.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ const CometChatActionSheet = (props: ActionSheetProps) => {
2222
height: "inherit",
2323
width: "max-content"
2424
}}>
25-
<div className="cometchat-action-sheet">
26-
{actions?.map((action: CometChatMessageComposerAction | CometChatActionsView) => {
27-
return <div className="cometchat-action-sheet__item" onClick={() => { onActionItemClick(action) }}>
25+
<div className="cometchat-action-sheet">
26+
{actions?.map((action: CometChatMessageComposerAction | CometChatActionsView,index) => {
27+
return <div className="cometchat-action-sheet__item" key={ `cometchat-action-sheet__item-${index}`} onClick={() => { onActionItemClick(action) }}>
2828
<div
2929
className="cometchat-action-sheet__item-icon"
3030
style={action.iconURL ? { WebkitMask: `url(${action.iconURL}), center, center, no-repeat` } : undefined}
3131
/>
32-
<div className="cometchat-action-sheet__item-body">
32+
<div className="cometchat-action-sheet__item-body" key={action.title || `action-${index}`}>
3333
{action.title!}
3434
</div>
3535
</div>

‎src/components/BaseComponents/CometChatMediaRecorder/CometChatMediaRecorder.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
2525
const audioChunks = useRef<Blob[]>([]);
2626
const counterRunning = useRef<boolean>(true);
2727
const createMedia = useRef<boolean>(false);
28+
const hasInitializedRef = useRef(false);
29+
2830

2931
useEffect(() => {
3032
if (autoRecording) {
@@ -33,10 +35,13 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
3335
return () => {
3436
handleStopRecording();
3537
clearInterval(timerIntervalRef.current);
38+
clearStream();
39+
hasInitializedRef.current = false;
3640
};
3741
}, []);
3842

3943
const startTimer = () => {
44+
if (timerIntervalRef.current) clearInterval(timerIntervalRef.current);
4045
timerIntervalRef.current = window.setInterval(() => {
4146
if (counterRunning.current) {
4247
setCounter((prevCounter) => prevCounter + 1);
@@ -56,11 +61,15 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
5661

5762
const initMediaRecorder = async () => {
5863
try {
64+
if (hasInitializedRef.current) {
65+
return;
66+
}
67+
hasInitializedRef.current = true;
68+
clearStream();
5969
const stream = await navigator.mediaDevices.getUserMedia({
6070
audio: true,
6171
});
6272
streamRef.current = stream;
63-
6473
const audioRecorder = new MediaRecorder(stream);
6574
audioRecorder.ondataavailable = (e: any) => {
6675
if (e.data.size > 0) {
@@ -132,6 +141,7 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
132141
stopTimer();
133142
clearStream();
134143
setMediaRecorder(undefined);
144+
hasInitializedRef.current = false;
135145
};
136146

137147
const handleCloseRecording = () => {
@@ -140,6 +150,8 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
140150
createMedia.current = false
141151
onCloseRecording?.();
142152
reset();
153+
hasInitializedRef.current = false;
154+
143155
};
144156

145157
const handleSubmitRecording = () => {
@@ -161,6 +173,7 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
161173

162174
const clearStream = () => {
163175
streamRef.current?.getTracks().forEach((track) => track.stop());
176+
streamRef.current = undefined;
164177
};
165178

166179
const formatTime = (timeInSeconds: number): string => {
@@ -174,10 +187,11 @@ const CometChatMediaRecorder: React.FC<MediaRecorderProps> = ({
174187
const handlePauseRecording = () => {
175188
setIsPaused(true);
176189
pauseTimer();
190+
if(mediaRecorder)
177191
(mediaRecorder as MediaRecorder).pause();
178192
counterRunning.current = false;
193+
hasInitializedRef.current = false;
179194
}
180-
181195
return (
182196
<div className="cometchat" style={{
183197
height: "inherit",

‎src/components/BaseComponents/CometChatPopover/CometChatPopover.tsx‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState, useRef, useEffect, ReactNode, useCallback, forwardRef, useImperativeHandle, CSSProperties, useLayoutEffect } from 'react';
2+
import { isMobileDevice } from '../../../utils/util';
23

34
export enum Placement {
45
top = 'top',
@@ -54,11 +55,19 @@ const CometChatPopover = forwardRef<{
5455
setIsOpen(prev => !prev);
5556
}, []);
5657
const handleClickOutside = (event: MouseEvent) => {
57-
if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
58-
setIsOpen(false);
59-
if (onOutsideClick) {
60-
onOutsideClick()
61-
}
58+
if (popoverRef.current) {
59+
const popoverRect = popoverRef.current.getBoundingClientRect();
60+
const isInsideClick =
61+
event.clientX >= popoverRect.left &&
62+
event.clientX <= popoverRect.right &&
63+
event.clientY >= popoverRect.top &&
64+
event.clientY <= popoverRect.bottom;
65+
if (!popoverRef.current.contains(event.target as Node) && !isInsideClick) {
66+
setIsOpen(false);
67+
if (onOutsideClick) {
68+
onOutsideClick()
69+
}
70+
}
6271
}
6372
};
6473
useEffect(() => {
@@ -67,6 +76,18 @@ const CometChatPopover = forwardRef<{
6776
return () => document.removeEventListener('click', handleClickOutside);
6877
}
6978
}, [closeOnOutsideClick, isOpen]);
79+
useEffect(() => {
80+
if (!popoverRef.current) return;
81+
const observer = new MutationObserver(() => {
82+
requestAnimationFrame(() => getPopoverPositionStyle());
83+
});
84+
observer.observe(popoverRef.current, {
85+
childList: true,
86+
subtree: true,
87+
attributes: true,
88+
});
89+
return () => observer.disconnect();
90+
}, [isOpen]);
7091

7192
useEffect(() => {
7293
const handleScroll = () => {
@@ -109,50 +130,66 @@ const CometChatPopover = forwardRef<{
109130
}
110131
}, [content, isOpen]);
111132

133+
const getAvailablePlacement = useCallback((rect: DOMRect,height: number)=>{
134+
const spaceAbove = rect.top;
135+
if (isMobileDevice()) {
136+
if (spaceAbove >= height + 10) {
137+
return Placement.bottom;
138+
}
139+
return Placement.top;
140+
}
141+
return placement
142+
},[placement])
143+
112144
const getPopoverPositionStyle = useCallback(() => {
113145
const height = popoverRef.current?.scrollHeight!;
114146
const width = popoverRef.current?.scrollWidth!;
115147
const rect = childRef.current?.getBoundingClientRect();
148+
if(!rect) return;
116149
const x_left = rect?.left!,
117150
x_right = rect?.right!,
118151
y_bot = rect?.bottom!,
119152
y_top = rect?.top!;
153+
120154
const positionStyle = { top: "", right: "", bottom: "", left: "", };
121155
const viewportHeight = window.innerHeight, viewportWidth = window.innerWidth;
156+
const availablePlacement = getAvailablePlacement(rect,height);
122157
if (Object.keys(positionStyleState).length == 0) {
123-
if (placement === Placement.top || placement === Placement.bottom) {
124-
if (placement === Placement.top) {
158+
if (availablePlacement === Placement.top || availablePlacement === Placement.bottom) {
159+
if (availablePlacement === Placement.top) {
125160
if (y_top - height - 10 < 0) {
126161
positionStyle["top"] = `${y_bot + 10}px`;
127162
} else {
128163
positionStyle["bottom"] = `${viewportHeight - y_top}px`;
129164
}
130-
} else if (placement === Placement.bottom) {
165+
} else if (availablePlacement === Placement.bottom) {
131166
if ((y_bot + height + 10) > viewportHeight) {
132167
positionStyle["top"] = `${y_top - height - 10}px`;
133168
} else {
134169
positionStyle["top"] = `${y_bot + 10}px`;
135170
}
136171
}
172+
137173
if (((x_left + width) - 10) > viewportWidth) {
138174
positionStyle["left"] = `${viewportWidth - width - 10}px`;
139175
} else {
140176
positionStyle["left"] = `${x_left - 10}px`;
141177
}
142-
} else if (placement === Placement.left || placement === Placement.right) {
143-
if (placement === Placement.left) {
178+
} else if (availablePlacement === Placement.left || availablePlacement === Placement.right) {
179+
if (availablePlacement === Placement.left) {
144180
if (x_left - width - 10 < 0) {
145181
positionStyle["left"] = `${x_right + 10}px`;
146182
} else {
147183
positionStyle["left"] = `${x_left - width - 10}px`;
148184
}
149-
} else if (placement === Placement.right) {
185+
} else if (availablePlacement === Placement.right) {
150186
if (x_right + width + 10 > viewportWidth) {
151187
positionStyle["left"] = `${x_left - width - 10}px`;
152188
} else {
153189
positionStyle["left"] = `${x_right + 10}px`;
154190
}
155191
}
192+
156193
if (((y_top + height) - 10) > viewportHeight) {
157194
positionStyle["top"] = `${viewportHeight - height - 10}px`;
158195
} else {

‎src/components/BaseComponents/CometChatVideoBubble/CometChatVideoBubble.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ const CometChatVideoBubble = (props: VideoBubbleProps) => {
3535
* Function to request fullscreen when video starts to play.
3636
*/
3737
const startVideoInFullscreen = () => {
38+
if (!currentMediaPlayer.video || currentMediaPlayer.video !== videoRef.current) {
3839
closeCurrentMediaPlayer();
40+
}
3941
const videoElement: any = videoRef.current;
4042
currentMediaPlayer.video = videoElement;
4143
if (videoElement) {

‎src/components/Calling/CometChatIncomingCall/CometChatIncomingCall.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -313,14 +313,15 @@ const CometChatIncomingCall = (props: IncomingCallProps) => {
313313
const ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe(
314314
(call: CometChat.Call) => {
315315
clearStoredActiveCall()
316-
if (call?.getSessionId() === callRef.current?.getSessionId()) {
316+
if (call?.getSessionId() === callRef.current?.getSessionId() || call?.getSessionId() === currentOutgoingCallRef.current?.getSessionId()) {
317317
setShowOngoingCallScreen(false);
318318
setShowOutGoingCallScreen(false);
319+
currentOutgoingCallRef.current = null;
320+
319321
} else if (call?.getSessionId() === currentOutgoingCallRef.current?.getSessionId()) {
320322
currentOutgoingCallRef.current = null;
321-
} else {
322323
setShowOutGoingCallScreen(false);
323-
}
324+
}
324325
}
325326
);
326327
return () => {

‎src/components/CometChatGroups/CometChatGroups.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -629,14 +629,13 @@ export function CometChatGroups(props: GroupsProps) {
629629
groupsSearchText,
630630
errorHandler,
631631
});
632-
633632
return (
634633
<div className="cometchat" style={{ width: "100%", height: "100%" }}>
635634
<div
636635
className="cometchat-groups">
637636
<CometChatList
638637
title={titleRef.current}
639-
searchPlaceholderText={searchPlaceholderTextRef.current}
638+
searchPlaceholderText={searchPlaceholderTextRef.current || getLocalizedString("group_search_placeholder")}
640639
hideSearch={hideSearch}
641640
searchText={state.searchText}
642641
onSearch={onSearch}

‎src/components/CometChatMessageComposer/CometChatMessageComposer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -824,10 +824,10 @@ try {
824824
const mySetAddToMsgInputText = useCallback(
825825
function (text: string): void {
826826
try {
827-
flushSync(() => {
828-
dispatch({ type: "setAddToMsgInputText", addToMsgInputText: "" });
829-
});
830-
dispatch({ type: "setAddToMsgInputText", addToMsgInputText: text });
827+
dispatch({ type: "setAddToMsgInputText", addToMsgInputText: "" });
828+
setTimeout(() => {
829+
dispatch({ type: "setAddToMsgInputText", addToMsgInputText: text });
830+
}, 0);
831831
} catch (error) {
832832
errorHandler(error,"setAddToMsgInputText")
833833
}

0 commit comments

Comments
 (0)