@samparkchat/sampark-web-chat 0.1.1 → 0.1.3

package/package.json

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

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

@@ -134,35 +134,35 @@ var AttachmentFileSharing = function (_a) {
             position: 'absolute',
             bottom: '70px',
             left: '20px',
-            backgroundColor: 'white',
+            backgroundColor: colors.white,
             borderRadius: '12px',
             boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
             padding: '8px',
             minWidth: '200px',
             zIndex: 1000
         } },
-        React.createElement("div", { style: styles.attachmentMenuItem, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () {
+        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 () {
                 var _a;
                 (_a = imageInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
             } },
             React.createElement("div", { style: styles.attachmentIcon },
                 React.createElement(FontAwesomeIcon, { icon: CustomIcons.faImage.icon, style: { fontSize: CustomIcons.faImage.size, color: colors.white } })),
             React.createElement("span", { style: styles.attachmentText }, "Attach Image")),
-        React.createElement("div", { style: styles.attachmentMenuItem, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () {
+        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 () {
                 var _a;
                 (_a = videoInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
             } },
             React.createElement("div", { style: styles.attachmentIcon },
                 React.createElement(FontAwesomeIcon, { icon: CustomIcons.faVideo.icon, style: { fontSize: CustomIcons.faVideo.size, color: colors.white } })),
             React.createElement("span", { style: styles.attachmentText }, "Attach Video")),
-        React.createElement("div", { style: styles.attachmentMenuItem, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () {
+        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 () {
                 var _a;
                 (_a = audioInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
             } },
             React.createElement("div", { style: styles.attachmentIcon },
                 React.createElement(FontAwesomeIcon, { icon: CustomIcons.faHeadphones.icon, style: { fontSize: CustomIcons.faHeadphones.size, color: colors.white } })),
             React.createElement("span", { style: styles.attachmentText }, "Attach Audio")),
-        React.createElement("div", { style: styles.attachmentMenuItem, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () {
+        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 () {
                 var _a;
                 (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
             } },

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

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -38,6 +49,7 @@ import React, { useRef } from 'react';
 import colors from '../theme/colors';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import CustomIcons from '../theme/icons';
+import fonts from '../theme/fonts';
 var AttachmentGroupFileSharing = function (_a) {
     var isVisible = _a.isVisible, onClose = _a.onClose, onAttachImage = _a.onAttachImage, onAttachVideo = _a.onAttachVideo, onAttachAudio = _a.onAttachAudio, onAttachFile = _a.onAttachFile, client = _a.client, roomId = _a.roomId, userId = _a.userId, userName = _a.userName, _b = _a.uploadSource, uploadSource = _b === void 0 ? 'group_chat' : _b, onFileUpload = _a.onFileUpload;
     var imageInputRef = useRef(null);
@@ -65,7 +77,6 @@ var AttachmentGroupFileSharing = function (_a) {
                     _a.label = 3;
                 case 3:
                     if (uploadResult) {
-                        // console.log('[AttachmentGroupFileSharing] file uploaded successfully:', uploadResult);
                         onFileUpload === null || onFileUpload === void 0 ? void 0 : onFileUpload(uploadResult.fileId);
                         onClose();
                     }
@@ -116,53 +127,52 @@ var AttachmentGroupFileSharing = function (_a) {
             marginRight: '12px'
         },
         iconStyle: {
-            color: 'white',
+            color: colors.white,
             fontSize: '16px'
         },
         attachmentText: {
-            fontSize: '16px',
-            color: '#333'
+        // fontSize: '16px',
         }
     };
     return (React.createElement("div", { className: "attachment-menu", style: {
             position: 'absolute',
             bottom: '70px',
             left: '20px',
-            backgroundColor: 'white',
+            backgroundColor: colors.white,
             borderRadius: '12px',
             boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
             padding: '8px',
             minWidth: '200px',
             zIndex: 1000
         } },
-        React.createElement("div", { style: styles.attachmentMenuItem, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () {
+        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 () {
                 var _a;
                 (_a = imageInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
             } },
             React.createElement("div", { style: styles.attachmentIcon },
                 React.createElement(FontAwesomeIcon, { icon: CustomIcons.faImage.icon, style: { fontSize: CustomIcons.faImage.size, color: colors.white } })),
-            React.createElement("span", { style: styles.attachmentText }, "Attach Image")),
-        React.createElement("div", { style: styles.attachmentMenuItem, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () {
+            React.createElement("span", { style: __assign({}, fonts.content) }, "Attach Image")),
+        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 () {
                 var _a;
                 (_a = videoInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
             } },
             React.createElement("div", { style: styles.attachmentIcon },
                 React.createElement(FontAwesomeIcon, { icon: CustomIcons.faVideo.icon, style: { fontSize: CustomIcons.faVideo.size, color: colors.white } })),
-            React.createElement("span", { style: styles.attachmentText }, "Attach Video")),
-        React.createElement("div", { style: styles.attachmentMenuItem, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () {
+            React.createElement("span", { style: __assign({}, fonts.content) }, "Attach Video")),
+        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 () {
                 var _a;
                 (_a = audioInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
             } },
             React.createElement("div", { style: styles.attachmentIcon },
                 React.createElement(FontAwesomeIcon, { icon: CustomIcons.faHeadphones.icon, style: { fontSize: CustomIcons.faHeadphones.size, color: colors.white } })),
-            React.createElement("span", { style: styles.attachmentText }, "Attach Audio")),
-        React.createElement("div", { style: styles.attachmentMenuItem, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () {
+            React.createElement("span", { style: __assign({}, fonts.content) }, "Attach Audio")),
+        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 () {
                 var _a;
                 (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
             } },
             React.createElement("div", { style: styles.attachmentIcon },
                 React.createElement(FontAwesomeIcon, { icon: CustomIcons.faFile.icon, style: { fontSize: CustomIcons.faFile.size, color: colors.white } })),
-            React.createElement("span", { style: styles.attachmentText }, "Attach File")),
+            React.createElement("span", { style: __assign({}, fonts.content) }, "Attach File")),
         React.createElement("input", { type: "file", ref: imageInputRef, accept: "image/*", style: { display: 'none' }, onChange: function (e) {
                 var files = e.target.files;
                 if (onAttachImage) {

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import CustomIcons from '../theme/icons';
+import colors from '../theme/colors';
 var formatTime = function (s) {
     if (!isFinite(s))
         return '0:00';
@@ -64,19 +65,19 @@ var AudioPlayerInline = function (_a) {
                 justifyContent: 'center'
             } },
             React.createElement(FontAwesomeIcon, { icon: playing ? CustomIcons.faCirclePause.icon : CustomIcons.faPlay.icon, style: {
-                    color: (playing ? CustomIcons.faCirclePause.color : CustomIcons.faPlay.color) || 'white',
+                    color: (playing ? CustomIcons.faCirclePause.color : CustomIcons.faPlay.color),
                     fontSize: (playing ? CustomIcons.faCirclePause.size : CustomIcons.faPlay.size) || 18
                 } })),
         React.createElement("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', gap: 6 } },
             React.createElement("div", { style: { height: 18, display: 'flex', alignItems: 'center', gap: 8 } },
                 React.createElement("div", { style: { flex: 1, height: 6, background: 'rgba(255,255,255,0.12)', borderRadius: 6, position: 'relative' } },
                     React.createElement("div", { style: { position: 'absolute', left: 0, top: 0, bottom: 0, width: "".concat((duration ? (current / duration) * 100 : 0), "%"), background: 'rgba(255,255,255,0.28)', borderRadius: 6 } }))),
-            React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end', fontSize: 12, color: 'rgba(255,255,255,0.95)' } },
+            React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end', fontSize: 12, color: colors.white } },
                 React.createElement("div", null,
                     formatTime(current),
                     " / ",
                     formatTime(duration)))),
-        React.createElement("a", { href: url, download: fileName, style: { color: CustomIcons.faArrowDown.color || 'white', textDecoration: 'none', fontSize: CustomIcons.faArrowDown.size || 18 }, "aria-label": "Download audio" },
-            React.createElement(FontAwesomeIcon, { icon: CustomIcons.faArrowDown.icon, style: { color: CustomIcons.faArrowDown.color || 'white', fontSize: CustomIcons.faArrowDown.size || 18 } }))));
+        React.createElement("a", { href: url, download: fileName, style: { color: CustomIcons.faArrowDown.color, textDecoration: 'none', fontSize: CustomIcons.faArrowDown.size || 18 }, "aria-label": "Download audio" },
+            React.createElement(FontAwesomeIcon, { icon: CustomIcons.faArrowDown.icon, style: { color: CustomIcons.faArrowDown.color, fontSize: CustomIcons.faArrowDown.size || 18 } }))));
 };
 export default AudioPlayerInline;

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;
@@ -2474,10 +2572,7 @@ var GroupVideoCall = function (_a) {
                         React.createElement(FontAwesomeIcon, { style: { fontSize: '20px' }, icon: faUserPlus })),
                     React.createElement("span", { className: "custom-tooltip" }, "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")))),
             showScreenSharePopup && (React.createElement("div", { style: styles.screenSharePopupOverlay, onClick: function () { return setShowScreenSharePopup(false); } },
@@ -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",