@samparkchat/sampark-web-chat 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samparkchat/sampark-web-chat",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "sampark/sampark-web-chat/index.js",
   "types": "sampark/sampark-web-chat/index.d.ts",
   "private": false,

package/sampark/sampark-chat/components/GroupVideoCall.d.ts

@@ -16,11 +16,21 @@ interface GroupVideoCallProps {
     clientUsers: User[];
     primaryColor: any;
     secondaryColor: any;
+    callSettings: CallSettings;
 }
 interface User {
     user_id: string;
     user_name: string;
     profile_pic?: string;
 }
+interface CallSettings {
+    is_one_to_one_calls: boolean;
+    is_group_calls: boolean;
+    is_invite_users: boolean;
+    is_shared_screen: boolean;
+    is_remove_participants: boolean;
+    is_record_calls: boolean;
+    is_microphone_control: boolean;
+}
 declare const _default: React.NamedExoticComponent<GroupVideoCallProps>;
 export default _default;

package/sampark/sampark-chat/components/GroupVideoCall.js

@@ -60,8 +60,9 @@ import { faVideo, faVideoSlash, faMicrophone, faMicrophoneSlash, faPhoneSlash, f
 import CustomIcons from "../theme/icons";
 import colors from "../theme/colors";
 import fonts from "../theme/fonts";
+import MeetingAdminTransferModal from "./modals/MeetingAdminTransferModal";
 var GroupVideoCall = function (_a) {
-    var client = _a.client, userId = _a.userId, userName = _a.userName, onClose = _a.onClose, isInitiator = _a.isInitiator, callingMode = _a.callingMode, janusClient = _a.janusClient, janusHandleId = _a.janusHandleId, createSubscriberHandle = _a.createSubscriberHandle, roomId = _a.roomId, janusCallGroupId = _a.janusCallGroupId, janusCallGroupName = _a.janusCallGroupName, _b = _a.clientUsers, clientUsers = _b === void 0 ? [] : _b, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor;
+    var client = _a.client, userId = _a.userId, userName = _a.userName, onClose = _a.onClose, isInitiator = _a.isInitiator, callingMode = _a.callingMode, janusClient = _a.janusClient, janusHandleId = _a.janusHandleId, createSubscriberHandle = _a.createSubscriberHandle, roomId = _a.roomId, janusCallGroupId = _a.janusCallGroupId, janusCallGroupName = _a.janusCallGroupName, _b = _a.clientUsers, clientUsers = _b === void 0 ? [] : _b, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, callSettings = _a.callSettings;
     var getHeaderGradient = function () {
         var primary = primaryColor || colors.blue;
         var secondary = secondaryColor || colors.blueLight;
@@ -126,6 +127,8 @@ var GroupVideoCall = function (_a) {
     var subscriberCreationQueue = useRef(Promise.resolve());
     var activeSubscriberCreations = useRef(0);
     var maxConcurrentCreations = 2; // Limit concurrent attach operations
+    var _17 = useState(false), showOwnershipTransferModal = _17[0], setShowOwnershipTransferModal = _17[1];
+    var previousIsInitiatorRef = useRef(isInitiator);
     var logICEDiagnostics = function (type, pc) { return __awaiter(void 0, void 0, void 0, function () {
         var stats, err_1;
         return __generator(this, function (_a) {
@@ -414,6 +417,12 @@ var GroupVideoCall = function (_a) {
             onClose();
         }
     }, [exitedByAdmin]);
+    useEffect(function () {
+        if (!previousIsInitiatorRef.current && isInitiator) {
+            showJoinNotification("Now you are owner of this call");
+        }
+        previousIsInitiatorRef.current = isInitiator;
+    }, [isInitiator]);
     useEffect(function () {
         if (isScreenSharing) {
             busyUsers.forEach(function (busyUserId) {
@@ -575,7 +584,7 @@ var GroupVideoCall = function (_a) {
         });
     }); };
     var recreatePublisherConnection = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var pc_1, candidatesSent_1, offer, hasAudio, hasVideo, response, err_4;
+        var pc_1, candidatesSent_1, offer, hasAudio, hasVideo, uniqueFileName, response, updateKafkaResponse, err_4;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -585,7 +594,7 @@ var GroupVideoCall = function (_a) {
                     }
                     _a.label = 1;
                 case 1:
-                    _a.trys.push([1, 7, 8, 9]);
+                    _a.trys.push([1, 8, 9, 10]);
                     isPublishingRef.current = true;
                     setPublisherState('joining');
                     if (pcRef.current) {
@@ -597,7 +606,7 @@ var GroupVideoCall = function (_a) {
                     return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
                 case 2:
                     _a.sent();
-                    if (!(janusClient && janusHandleId && localStream && publisherState !== 'published')) return [3 /*break*/, 6];
+                    if (!(janusClient && janusHandleId && localStream && publisherState !== 'published')) return [3 /*break*/, 7];
                     setIsPublishing(true);
                     setPublisherState('publishing');
                     pc_1 = new RTCPeerConnection(pcConfig);
@@ -699,22 +708,27 @@ var GroupVideoCall = function (_a) {
                     _a.sent();
                     hasAudio = localStream.getAudioTracks().length > 0 && micEnabled;
                     hasVideo = localStream.getVideoTracks().length > 0 && cameraEnabled;
-                    return [4 /*yield*/, janusClient.sendMessage(janusHandleId, { request: "publish", audio: hasAudio, video: hasVideo }, offer)];
+                    uniqueFileName = "".concat(roomId, "_").concat(userId, "_").concat(Date.now());
+                    return [4 /*yield*/, janusClient.sendMessage(janusHandleId, { request: "publish", audio: hasAudio, video: hasVideo, record: callSettings.is_record_calls, filename: uniqueFileName }, offer)];
                 case 5:
                     response = _a.sent();
                     setPublisherState('published');
-                    _a.label = 6;
-                case 6: return [3 /*break*/, 9];
-                case 7:
+                    if (!callSettings.is_record_calls) return [3 /*break*/, 7];
+                    return [4 /*yield*/, client.groupVideoCall.updateKafkaHandler(roomId, janusHandleId, uniqueFileName, uniqueFileName)];
+                case 6:
+                    updateKafkaResponse = _a.sent();
+                    _a.label = 7;
+                case 7: return [3 /*break*/, 10];
+                case 8:
                     err_4 = _a.sent();
                     console.error("Error recreating publisher connection:", err_4);
                     setIsPublishing(false);
                     setPublisherState('idle');
-                    return [3 /*break*/, 9];
-                case 8:
+                    return [3 /*break*/, 10];
+                case 9:
                     isPublishingRef.current = false;
                     return [7 /*endfinally*/];
-                case 9: return [2 /*return*/];
+                case 10: return [2 /*return*/];
             }
         });
     }); };
@@ -1464,30 +1478,43 @@ var GroupVideoCall = function (_a) {
                         pd = event.plugindata;
                         if (!(event.janus === "event" && ((_c = pd === null || pd === void 0 ? void 0 : pd.data) === null || _c === void 0 ? void 0 : _c.videoroom))) return [3 /*break*/, 3];
                         handlePublishers = function (publishers) { return __awaiter(void 0, void 0, void 0, function () {
-                            var myPubId, _i, publishers_1, pub, pubId;
+                            var myPubId, _loop_2, _i, publishers_1, pub;
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0:
                                         if (!Array.isArray(publishers)) return [3 /*break*/, 4];
                                         myPubId = myPublisherIdRef.current;
+                                        _loop_2 = function (pub) {
+                                            var pubId, isNewPublisher;
+                                            return __generator(this, function (_b) {
+                                                switch (_b.label) {
+                                                    case 0:
+                                                        pubId = Number(pub.id);
+                                                        if (!(pubId !== myPubId)) return [3 /*break*/, 2];
+                                                        isNewPublisher = !notifiedPublishersRef.current.has(pubId) &&
+                                                            !remoteStreams.some(function (s) { return s.id === pubId; }) &&
+                                                            !Array.from(remoteSubscribersRef.current.values()).some(function (sub) { return sub.publisherId === pubId; });
+                                                        return [4 /*yield*/, subscribeToPublisher(pub.id, pub.display)];
+                                                    case 1:
+                                                        _b.sent();
+                                                        if (pd.data.videoroom === "event" && pub.display && isNewPublisher) {
+                                                            notifiedPublishersRef.current.add(pubId); // Mark as notified
+                                                            showJoinNotification("".concat(pub.display, " has joined the call"));
+                                                        }
+                                                        return [3 /*break*/, 2];
+                                                    case 2: return [2 /*return*/];
+                                                }
+                                            });
+                                        };
                                         _i = 0, publishers_1 = publishers;
                                         _a.label = 1;
                                     case 1:
                                         if (!(_i < publishers_1.length)) return [3 /*break*/, 4];
                                         pub = publishers_1[_i];
-                                        pubId = Number(pub.id);
-                                        if (!(pubId !== myPubId)) return [3 /*break*/, 3];
-                                        return [4 /*yield*/, subscribeToPublisher(pub.id, pub.display)];
+                                        return [5 /*yield**/, _loop_2(pub)];
                                     case 2:
                                         _a.sent();
-                                        // Show notification when new user joins (only for event, not initial join)
-                                        // Check if we haven't already notified about this publisher
-                                        if (pd.data.videoroom === "event" && pub.display && !notifiedPublishersRef.current.has(pubId)) {
-                                            console.log("🎉 New user joined! Showing notification for:", pub.display);
-                                            notifiedPublishersRef.current.add(pubId); // Mark as notified
-                                            showJoinNotification(pub.display);
-                                        }
-                                        return [3 /*break*/, 3];
+                                        _a.label = 3;
                                     case 3:
                                         _i++;
                                         return [3 /*break*/, 1];
@@ -1922,7 +1949,7 @@ var GroupVideoCall = function (_a) {
     }); };
     useEffect(function () {
         var publishStream = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var pc_3, candidatesGenerated_1, offer, hasAudio, hasVideo, response, err_27;
+            var pc_3, candidatesGenerated_1, offer, hasAudio, hasVideo, uniqueFileName, response, updateKafkaResponse, err_27;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -1933,10 +1960,10 @@ var GroupVideoCall = function (_a) {
                             !isPublishing &&
                             streamInitialized &&
                             hasJoinedRoom &&
-                            publisherState !== 'published')) return [3 /*break*/, 6];
+                            publisherState !== 'published')) return [3 /*break*/, 8];
                         _a.label = 1;
                     case 1:
-                        _a.trys.push([1, 5, , 6]);
+                        _a.trys.push([1, 7, , 8]);
                         setIsPublishing(true);
                         setPublisherState('publishing');
                         pc_3 = new RTCPeerConnection(pcConfig);
@@ -2004,14 +2031,21 @@ var GroupVideoCall = function (_a) {
                         _a.sent();
                         hasAudio = localStream.getAudioTracks().length > 0 && micEnabled;
                         hasVideo = localStream.getVideoTracks().length > 0 && cameraEnabled;
-                        return [4 /*yield*/, janusClient.sendMessage(janusHandleId, { request: "publish", audio: hasAudio, video: hasVideo }, offer)];
+                        uniqueFileName = "".concat(roomId, "_").concat(userId, "_").concat(Date.now());
+                        return [4 /*yield*/, janusClient.sendMessage(janusHandleId, { request: "publish", audio: hasAudio, video: hasVideo, record: callSettings.is_record_calls, filename: uniqueFileName }, offer)];
                     case 4:
                         response = _a.sent();
+                        if (!callSettings.is_record_calls) return [3 /*break*/, 6];
+                        return [4 /*yield*/, client.groupVideoCall.updateKafkaHandler(roomId, janusHandleId, uniqueFileName, uniqueFileName)];
+                    case 5:
+                        updateKafkaResponse = _a.sent();
+                        _a.label = 6;
+                    case 6:
                         if (response === null || response === void 0 ? void 0 : response.error) {
                             throw new Error("Janus publish error: ".concat(response.error));
                         }
-                        return [3 /*break*/, 6];
-                    case 5:
+                        return [3 /*break*/, 8];
+                    case 7:
                         err_27 = _a.sent();
                         console.error("Error publishing initial stream:", err_27);
                         setIsPublishing(false);
@@ -2022,8 +2056,8 @@ var GroupVideoCall = function (_a) {
                                 setIsPublishing(false);
                             }, 2000 * (reconnectAttempts + 1));
                         }
-                        return [3 /*break*/, 6];
-                    case 6: return [2 /*return*/];
+                        return [3 /*break*/, 8];
+                    case 8: return [2 /*return*/];
                 }
             });
         }); };
@@ -2176,23 +2210,37 @@ var GroupVideoCall = function (_a) {
         return map;
     }, [remoteStreams, speakingUsers]);
     var filteredAvailableUsers = React.useMemo(function () {
-        if (!searchQuery.trim())
-            return availableUsers;
-        var query = searchQuery.toLowerCase();
-        return availableUsers.filter(function (user) {
+        var users = availableUsers;
+        if (searchQuery.trim()) {
+            var query_1 = searchQuery.toLowerCase();
+            users = availableUsers.filter(function (user) {
+                var _a, _b;
+                return ((_a = user.user_name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query_1)) ||
+                    ((_b = user.user_id) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(query_1));
+            });
+        }
+        return users.sort(function (a, b) {
             var _a, _b;
-            return ((_a = user.user_name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query)) ||
-                ((_b = user.user_id) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(query));
+            var nameA = ((_a = a.user_name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+            var nameB = ((_b = b.user_name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '';
+            return nameA.localeCompare(nameB);
         });
     }, [availableUsers, searchQuery]);
     var filteredCurrentCallUsers = React.useMemo(function () {
-        if (!searchQuery.trim())
-            return usersInCurrentCall;
-        var query = searchQuery.toLowerCase();
-        return usersInCurrentCall.filter(function (user) {
+        var users = usersInCurrentCall;
+        if (searchQuery.trim()) {
+            var query_2 = searchQuery.toLowerCase();
+            users = usersInCurrentCall.filter(function (user) {
+                var _a, _b;
+                return ((_a = user.user_name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query_2)) ||
+                    ((_b = user.user_id) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(query_2));
+            });
+        }
+        return users.sort(function (a, b) {
             var _a, _b;
-            return ((_a = user.user_name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query)) ||
-                ((_b = user.user_id) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(query));
+            var nameA = ((_a = a.user_name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+            var nameB = ((_b = b.user_name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '';
+            return nameA.localeCompare(nameB);
         });
     }, [usersInCurrentCall, searchQuery]);
     var getStreamForUserId = function (targetUserId) {
@@ -2212,14 +2260,14 @@ var GroupVideoCall = function (_a) {
     var gridCols = Math.ceil(Math.sqrt(Math.max(1, count)));
     var gridRows = Math.ceil(count / gridCols);
     var forceRepublish = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var hasAudio, hasVideo, offer, response, err_28;
+        var hasAudio, hasVideo, offer, uniqueFileName, response, updateKafkaResponse, err_28;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!(pcRef.current && janusClient && janusHandleId && localStream)) return [3 /*break*/, 7];
+                    if (!(pcRef.current && janusClient && janusHandleId && localStream)) return [3 /*break*/, 9];
                     _a.label = 1;
                 case 1:
-                    _a.trys.push([1, 6, , 7]);
+                    _a.trys.push([1, 8, , 9]);
                     hasAudio = localStream.getAudioTracks().length > 0 && micEnabled;
                     hasVideo = localStream.getVideoTracks().length > 0 && cameraEnabled;
                     return [4 /*yield*/, janusClient.sendMessage(janusHandleId, {
@@ -2238,15 +2286,21 @@ var GroupVideoCall = function (_a) {
                     return [4 /*yield*/, pcRef.current.setLocalDescription(offer)];
                 case 4:
                     _a.sent();
-                    return [4 /*yield*/, janusClient.sendMessage(janusHandleId, { request: "publish", audio: hasAudio, video: hasVideo }, offer)];
+                    uniqueFileName = "".concat(roomId, "_").concat(userId, "_").concat(Date.now());
+                    return [4 /*yield*/, janusClient.sendMessage(janusHandleId, { request: "publish", audio: hasAudio, video: hasVideo, record: callSettings.is_record_calls, filename: uniqueFileName }, offer)];
                 case 5:
                     response = _a.sent();
-                    return [3 /*break*/, 7];
+                    if (!callSettings.is_record_calls) return [3 /*break*/, 7];
+                    return [4 /*yield*/, client.groupVideoCall.updateKafkaHandler(roomId, janusHandleId, uniqueFileName, uniqueFileName)];
                 case 6:
+                    updateKafkaResponse = _a.sent();
+                    _a.label = 7;
+                case 7: return [3 /*break*/, 9];
+                case 8:
                     err_28 = _a.sent();
                     console.error("Error in force republish:", err_28);
-                    return [3 /*break*/, 7];
-                case 7: return [2 /*return*/];
+                    return [3 /*break*/, 9];
+                case 9: return [2 /*return*/];
             }
         });
     }); };
@@ -2289,6 +2343,50 @@ var GroupVideoCall = function (_a) {
             }
         });
     }); };
+    var handleEndCall = function () {
+        if (isInitiator && usersInCurrentCall.length > 1) {
+            // Show ownership transfer modal if initiator and there are other participants
+            setShowOwnershipTransferModal(true);
+        }
+        else {
+            // Directly end the call if not initiator or alone in the call
+            cleanupSession();
+            onClose();
+        }
+    };
+    var handleOwnershipTransfer = function (newOwnerId) { return __awaiter(void 0, void 0, void 0, function () {
+        var error_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, , 4]);
+                    if (!(client && roomId)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, client.groupVideoCall.transferOwnership(roomId, newOwnerId)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    // Close modal and end call
+                    setShowOwnershipTransferModal(false);
+                    cleanupSession();
+                    onClose();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_3 = _a.sent();
+                    console.error("Error transferring ownership:", error_3);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancelOwnershipTransfer = function () {
+        setShowOwnershipTransferModal(false);
+    };
+    var handleEndCallAnyway = function () {
+        setShowOwnershipTransferModal(false);
+        cleanupSession();
+        onClose();
+    };
     useEffect(function () {
         window.forceRepublish = forceRepublish;
         window.recreateConnection = recreatePublisherConnection;
@@ -2436,11 +2534,11 @@ var GroupVideoCall = function (_a) {
                 React.createElement("div", { className: "control-button-wrapper" },
                     React.createElement("button", { style: __assign(__assign({}, styles.controlButton), { color: cameraEnabled ? '#fff' : '#e50d0dff' }), onClick: toggleCamera },
                         React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: cameraEnabled ? faVideo : faVideoSlash })),
-                    React.createElement("span", { className: "custom-tooltip" }, cameraEnabled ? "Turn off camera" : "Turn on camera")),
+                    React.createElement("span", { className: "custom-tooltip tooltip-top" }, cameraEnabled ? "Turn off camera" : "Turn on camera")),
                 React.createElement("div", { className: "control-button-wrapper" },
                     React.createElement("button", { style: __assign(__assign({}, styles.controlButton), { color: micEnabled ? '#fff' : '#e50d0dff' }), onClick: toggleMic },
                         React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: micEnabled ? faMicrophone : faMicrophoneSlash })),
-                    React.createElement("span", { className: "custom-tooltip" }, micEnabled ? "Mute microphone" : "Unmute microphone")),
+                    React.createElement("span", { className: "custom-tooltip tooltip-top" }, micEnabled ? "Mute microphone" : "Unmute microphone")),
                 React.createElement("div", { className: "control-button-wrapper" },
                     React.createElement("button", { style: isScreenSharing ? __assign(__assign({}, styles.controlButton), styles.screenShareActive) : styles.controlButton, ref: screenShareButtonRef, onClick: function () {
                             if (isScreenSharing) {
@@ -2458,28 +2556,25 @@ var GroupVideoCall = function (_a) {
                             }
                         } },
                         React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faDesktop })),
-                    React.createElement("span", { className: "custom-tooltip" }, isScreenSharing ? "Screen share options" : "Start screen share")),
+                    React.createElement("span", { className: "custom-tooltip tooltip-top" }, isScreenSharing ? "Screen share options" : "Start screen share")),
                 React.createElement("div", { className: "control-button-wrapper" },
                     React.createElement("button", { style: styles.controlButton, onClick: function () {
                             setIsMinimized(true);
                             setWasDragged(false);
                         } },
                         React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faCompress })),
-                    React.createElement("span", { className: "custom-tooltip" }, "Minimize call")),
+                    React.createElement("span", { className: "custom-tooltip tooltip-top" }, "Minimize call")),
                 React.createElement("div", { className: "control-button-wrapper" },
                     React.createElement("button", { style: styles.controlButton, onClick: function () {
                             setShowInvitePanel(true);
                             setShowAvailableUsers(false);
                         } },
                         React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faUserPlus })),
-                    React.createElement("span", { className: "custom-tooltip" }, "Invite participants")),
+                    React.createElement("span", { className: "custom-tooltip tooltip-top" }, "Invite participants")),
                 React.createElement("div", { className: "control-button-wrapper" },
-                    React.createElement("button", { style: __assign(__assign({}, styles.controlButton), styles.endCallButton), onClick: function () {
-                            cleanupSession();
-                            onClose();
-                        } },
+                    React.createElement("button", { style: __assign(__assign({}, styles.controlButton), styles.endCallButton), onClick: handleEndCall },
                         React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faPhoneSlash })),
-                    React.createElement("span", { className: "custom-tooltip" }, "End call")))),
+                    React.createElement("span", { className: "custom-tooltip tooltip-top" }, "End call")))),
             showScreenSharePopup && (React.createElement("div", { style: styles.screenSharePopupOverlay, onClick: function () { return setShowScreenSharePopup(false); } },
                 React.createElement("div", { style: __assign(__assign({}, styles.screenSharePopup), { top: popupPosition.top, left: popupPosition.left }), onClick: function (e) { return e.stopPropagation(); } },
                     React.createElement("button", { style: styles.popupButton, onClick: function () {
@@ -2695,8 +2790,8 @@ var GroupVideoCall = function (_a) {
             } },
             React.createElement("span", { style: { fontSize: '20px' } }, "\uD83D\uDC4B"),
             React.createElement("span", null,
-                React.createElement("strong", null, notification.userName),
-                " joined the call"))); }))));
+                React.createElement("strong", null, notification.userName)))); })),
+        React.createElement(MeetingAdminTransferModal, { open: showOwnershipTransferModal, onClose: handleCancelOwnershipTransfer, onTransfer: handleOwnershipTransfer, onEndCallAnyway: handleEndCallAnyway, participants: usersInCurrentCall, currentUserId: userId, primaryColor: primaryColor, secondaryColor: secondaryColor })));
 };
 var styles = {
     container: {
@@ -2884,7 +2979,7 @@ var styles = {
         display: "grid",
         gap: "10px",
         padding: "20px",
-        height: "calc(100vh - 120px)",
+        height: "calc(100vh - 100px)",
     },
     videoWrapper: {
         position: "relative",
@@ -2941,8 +3036,8 @@ var styles = {
         position: "absolute",
         top: "8px",
         right: "8px",
-        width: "20px",
-        height: "20px",
+        width: "30px",
+        height: "30px",
         borderRadius: "50%",
         background: "rgba(34, 197, 94, 0.8)",
         border: "2px solid rgba(34, 197, 94, 0.4)",
@@ -2990,7 +3085,7 @@ var styles = {
     controlsContainer: {
         position: "absolute",
         left: "50%",
-        bottom: "32px",
+        bottom: "12px",
         transform: "translateX(-50%)",
         display: "flex",
         gap: "24px",
@@ -3438,5 +3533,5 @@ var styles = {
         fontSize: "14px",
     },
 };
-var inviteKeyframes = "\n/* Custom Tooltip Styling - Hide native tooltip and show custom one */\n.control-button-wrapper {\n  position: relative;\n  display: inline-block;\n}\n\n.control-button-wrapper .custom-tooltip {\n  visibility: hidden;\n  opacity: 0;\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #000;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  white-space: nowrap;\n  z-index: 10000;\n  pointer-events: none;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n}\n\n.control-button-wrapper .custom-tooltip::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: #000;\n}\n\n.control-button-wrapper:hover .custom-tooltip {\n  visibility: visible;\n  opacity: 1;\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes slideInRight {\n  0% {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slideDown {\n  0% {\n    opacity: 0;\n    transform: translateY(-12px) scale(0.95);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes invitePulse {\n  0% {\n    transform: scale(1.05);\n    box-shadow: 0 0 20px rgba(16,185,129,0.4), inset 0 1px 0 rgba(255,255,255,0.1);\n  }\n  50% {\n    transform: scale(1.08);\n    box-shadow: 0 0 30px rgba(16,185,129,0.6), inset 0 1px 0 rgba(255,255,255,0.2);\n  }\n  100% {\n    transform: scale(1.05);\n    box-shadow: 0 0 20px rgba(16,185,129,0.4), inset 0 1px 0 rgba(255,255,255,0.1);\n  }\n}\n\n@keyframes speakingPulse {\n  0% {\n    transform: scale(1);\n    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);\n  }\n  50% {\n    transform: scale(1.2);\n    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);\n  }\n  100% {\n    transform: scale(1);\n    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);\n  }\n}\n\n@keyframes microphoneGreenBlink {\n  0% {\n    color: #22c55e;\n    background: rgba(34, 197, 94, 0.2);\n    text-shadow: 0 0 5px rgba(34, 197, 94, 0.6);\n    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);\n  }\n  50% {\n    color: #16a34a;\n    background: rgba(34, 197, 94, 0.4);\n    text-shadow: 0 0 10px rgba(34, 197, 94, 0.8);\n    transform: scale(1.1);\n    box-shadow: 0 0 15px rgba(34, 197, 94, 0.7);\n  }\n  100% {\n    color: #22c55e;\n    background: rgba(34, 197, 94, 0.2);\n    text-shadow: 0 0 5px rgba(34, 197, 94, 0.6);\n    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);\n  }\n}\n\n@keyframes microphoneSilentBlink {\n  0% {\n    background: rgba(107, 114, 128, 0.1);\n    box-shadow: 0 0 5px rgba(107, 114, 128, 0.3);\n  }\n  50% {\n    background: rgba(107, 114, 128, 0.3);\n    transform: scale(1.05);\n    box-shadow: 0 0 10px rgba(107, 114, 128, 0.5);\n  }\n  100% {\n    background: rgba(107, 114, 128, 0.1);\n    box-shadow: 0 0 5px rgba(107, 114, 128, 0.3);\n  }\n}\n\n@keyframes fadeOut {\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(20px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n\n/* Search Input Interactions */\ninput[type=\"text\"]:focus {\n  border-color: #007bff !important;\n  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);\n}\n\nbutton[aria-label=\"Clear search\"]:hover {\n  color: #333 !important;\n}\n";
+var inviteKeyframes = "\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes slideInRight {\n  0% {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slideDown {\n  0% {\n    opacity: 0;\n    transform: translateY(-12px) scale(0.95);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes invitePulse {\n  0% {\n    transform: scale(1.05);\n    box-shadow: 0 0 20px rgba(16,185,129,0.4), inset 0 1px 0 rgba(255,255,255,0.1);\n  }\n  50% {\n    transform: scale(1.08);\n    box-shadow: 0 0 30px rgba(16,185,129,0.6), inset 0 1px 0 rgba(255,255,255,0.2);\n  }\n  100% {\n    transform: scale(1.05);\n    box-shadow: 0 0 20px rgba(16,185,129,0.4), inset 0 1px 0 rgba(255,255,255,0.1);\n  }\n}\n\n@keyframes speakingPulse {\n  0% {\n    transform: scale(1);\n    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);\n  }\n  50% {\n    transform: scale(1.2);\n    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);\n  }\n  100% {\n    transform: scale(1);\n    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);\n  }\n}\n\n@keyframes microphoneGreenBlink {\n  0% {\n    color: #22c55e;\n    background: rgba(34, 197, 94, 0.2);\n    text-shadow: 0 0 5px rgba(34, 197, 94, 0.6);\n    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);\n  }\n  50% {\n    color: #16a34a;\n    background: rgba(34, 197, 94, 0.4);\n    text-shadow: 0 0 10px rgba(34, 197, 94, 0.8);\n    transform: scale(1.1);\n    box-shadow: 0 0 15px rgba(34, 197, 94, 0.7);\n  }\n  100% {\n    color: #22c55e;\n    background: rgba(34, 197, 94, 0.2);\n    text-shadow: 0 0 5px rgba(34, 197, 94, 0.6);\n    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);\n  }\n}\n\n@keyframes microphoneSilentBlink {\n  0% {\n    background: rgba(107, 114, 128, 0.1);\n    box-shadow: 0 0 5px rgba(107, 114, 128, 0.3);\n  }\n  50% {\n    background: rgba(107, 114, 128, 0.3);\n    transform: scale(1.05);\n    box-shadow: 0 0 10px rgba(107, 114, 128, 0.5);\n  }\n  100% {\n    background: rgba(107, 114, 128, 0.1);\n    box-shadow: 0 0 5px rgba(107, 114, 128, 0.3);\n  }\n}\n\n@keyframes fadeOut {\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(20px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n\n/* Search Input Interactions */\ninput[type=\"text\"]:focus {\n  border-color: #007bff !important;\n  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);\n}\n\nbutton[aria-label=\"Clear search\"]:hover {\n  color: #333 !important;\n}\n";
 export default React.memo(GroupVideoCall);

package/sampark/sampark-chat/components/Headers/ChatHeader.d.ts

@@ -18,6 +18,9 @@ type PeerChatHeaderProps = {
     secondaryColor?: string;
     busyCallusersList?: string[];
     peerUserId?: string;
+    participantStatuses?: {
+        [userId: string]: string;
+    };
 };
 declare const PeerChatHeader: React.FC<PeerChatHeaderProps>;
 export default PeerChatHeader;

package/sampark/sampark-chat/components/Headers/ChatHeader.js

@@ -11,13 +11,12 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { getInitials } from "../../services/Common";
 import CustomIcons from "../../theme/icons";
 import colors from "../../theme/colors";
 import fonts from "../../theme/fonts";
-import OnlineIndicator from "../OnlineIndicator";
+import ProfileAvatar from "../modals/ProfileAvatar";
 var PeerChatHeader = function (_a) {
-    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;
+    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, _g = _a.participantStatuses, participantStatuses = _g === void 0 ? {} : _g;
     var getHeaderGradient = function () {
         var primary = primaryColor || colors.blue;
         var secondary = secondaryColor || colors.blueLight;
@@ -27,22 +26,8 @@ var PeerChatHeader = function (_a) {
         showBackButton && (React.createElement("button", { onClick: onclick, style: styles.backButton },
             React.createElement(FontAwesomeIcon, { icon: CustomIcons.BackArrow.icon, style: { fontSize: CustomIcons.BackArrow.size, color: CustomIcons.BackArrow.color } }))),
         React.createElement("div", { style: styles.userInfo },
-            React.createElement("div", { style: styles.profilePicContainer }, userProfilePic && userProfilePic.trim() ? (React.createElement("div", { style: styles.profileWrapper },
-                React.createElement("img", { src: userProfilePic, alt: "User Profile", style: styles.profilePic, onError: function (e) {
-                        try {
-                            var img = e.currentTarget;
-                            // console.debug('[PeerChatHeader] profile image failed to load, falling back to logo192.png', img.src);
-                            img.onerror = null;
-                            img.src = '/logo192.png';
-                        }
-                        catch (err) {
-                            // console.debug('[PeerChatHeader] error setting fallback image', err);
-                        }
-                    } }),
-                React.createElement(OnlineIndicator, { isOnline: isPeerOnline || false, isBusy: busyCallusersList === null || busyCallusersList === void 0 ? void 0 : busyCallusersList.includes(peerUserId || ""), variant: "avatar" }))) : (React.createElement("div", { style: styles.profileWrapper },
-                React.createElement("div", { style: styles.profilePlaceholder },
-                    React.createElement("span", { style: styles.initials }, getInitials(mainHeading || ''))),
-                React.createElement(OnlineIndicator, { isOnline: isPeerOnline || false, variant: "avatar" })))),
+            React.createElement("div", { style: styles.profilePicContainer },
+                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: styles.userDetails },
                 React.createElement("h2", { style: styles.userName, onClick: onUserClick },
                     " ",
@@ -50,14 +35,22 @@ var PeerChatHeader = function (_a) {
                 React.createElement("span", { style: __assign(__assign({}, styles.onlineStatus), { color: isPeerOnline ? colors.onlineColor : colors.disabledColor }) }))),
         (showActionButtons || showOptions) && (React.createElement("div", { style: styles.actionButtons },
             showActionButtons && (React.createElement(React.Fragment, null,
-                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 },
-                    React.createElement(FontAwesomeIcon, { icon: CustomIcons.faPhone.icon, style: { fontSize: CustomIcons.faPhone.size, color: colors.white } })),
-                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 },
-                    React.createElement(FontAwesomeIcon, { icon: CustomIcons.faVideo.icon, style: { fontSize: CustomIcons.faVideo.size, color: colors.white } })),
-                React.createElement("button", { style: styles.actionButton, "aria-label": "Search", onClick: onSearch },
-                    React.createElement(FontAwesomeIcon, { icon: CustomIcons.faSearch.icon, style: { fontSize: CustomIcons.faSearch.size, color: colors.white } })))),
-            showOptions && (React.createElement("button", { style: styles.actionButton, "aria-label": "Options", onClick: onOptionsClick },
-                React.createElement(FontAwesomeIcon, { icon: CustomIcons.faEllipsisV.icon, style: { fontSize: CustomIcons.faEllipsisV.size, color: colors.white } })))))));
+                React.createElement("div", { className: "control-button-wrapper" },
+                    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 },
+                        React.createElement(FontAwesomeIcon, { icon: CustomIcons.faPhone.icon, style: { fontSize: CustomIcons.faPhone.size, color: colors.white } })),
+                    React.createElement("span", { className: "custom-tooltip" }, "Audio Call")),
+                React.createElement("div", { className: "control-button-wrapper" },
+                    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 },
+                        React.createElement(FontAwesomeIcon, { icon: CustomIcons.faVideo.icon, style: { fontSize: CustomIcons.faVideo.size, color: colors.white } })),
+                    React.createElement("span", { className: "custom-tooltip" }, "Video Call")),
+                React.createElement("div", { className: "control-button-wrapper" },
+                    React.createElement("button", { style: styles.actionButton, "aria-label": "Search", onClick: onSearch },
+                        React.createElement(FontAwesomeIcon, { icon: CustomIcons.faSearch.icon, style: { fontSize: CustomIcons.faSearch.size, color: colors.white } })),
+                    React.createElement("span", { className: "custom-tooltip" }, "Search")))),
+            showOptions && (React.createElement("div", { className: "control-button-wrapper" },
+                React.createElement("button", { style: styles.actionButton, "aria-label": "Options", onClick: onOptionsClick },
+                    React.createElement(FontAwesomeIcon, { icon: CustomIcons.faEllipsisV.icon, style: { fontSize: CustomIcons.faEllipsisV.size, color: colors.white } })),
+                React.createElement("span", { className: "custom-tooltip" }, "Options")))))));
 };
 var styles = {
     headerContainer: {
@@ -108,51 +101,6 @@ var styles = {
         justifyContent: "center",
         flexShrink: 0,
     },
-    profileWrapper: {
-        position: "relative",
-        display: "inline-block",
-        width: "clamp(36px, 6vw, 46px)",
-        height: "clamp(36px, 6vw, 46px)",
-        flexShrink: 0,
-    },
-    profilePic: {
-        width: "100%",
-        height: "100%",
-        borderRadius: "50%",
-        objectFit: "cover",
-        border: "2px solid rgba(255, 255, 255, 0.16)",
-        boxShadow: "0 4px 10px rgba(0,0,0,0.12)",
-        display: "block",
-    },
-    profilePlaceholder: {
-        width: "90%",
-        height: "90%",
-        borderRadius: "50%",
-        backgroundColor: "rgba(255,255,255,0.12)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        border: "2px solid rgba(255, 255, 255, 0.16)",
-        boxShadow: "0 4px 8px rgba(0,0,0,0.08)",
-    },
-    statusDot: {
-        position: "absolute",
-        right: "-2px",
-        bottom: "0px",
-        width: "10px",
-        height: "10px",
-        borderRadius: "50%",
-        border: "2px solid white",
-        boxShadow: "0 1px 2px rgba(0,0,0,0.22)",
-        transform: "none",
-        backgroundColor: colors.onlineColor,
-    },
-    initials: {
-        color: colors.white,
-        fontSize: "14px",
-        fontWeight: 700,
-        letterSpacing: "0.2px",
-    },
     userDetails: {
         display: "flex",
         flexDirection: "column",