@ngenux/ngage-whiteboarding 1.0.8 → 1.0.9

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { WhiteboardProvider } from './src/context/WhiteboardContext';
 import { useCapture } from './src/hooks/useCapture';
 import { cn } from './src/lib/utils';
 export { Whiteboard, WhiteboardProvider, useCapture as useWhiteboardStream, cn };
+export { isSocketConnected, getSocket, onSocketStatusChange, onSend, onReceive, leaveRoom, disconnectSocket, waitForSocket } from './src/utils/socket-utility';
 export type { WhiteboardProps } from './src/components/Whiteboard/index';
 export type { ShapeProps, ToolType, StrokeStyle, WhiteboardState, DrawingAction, CompressedData } from './src/types';
 export interface WhiteboardProviderProps {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,UAAU,IAAI,mBAAmB,EAAE,EAAE,EAAE,CAAC;AAGjF,YAAY,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,YAAY,EACV,UAAU,EACV,QAAQ,EACR,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACf,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,UAAU,IAAI,mBAAmB,EAAE,EAAE,EAAE,CAAC;AAGjF,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,MAAM,EACN,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,aAAa,EACd,MAAM,4BAA4B,CAAC;AAGpC,YAAY,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,YAAY,EACV,UAAU,EACV,QAAQ,EACR,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACf,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/index.esm.js

@@ -35255,12 +35255,16 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
     };
     const requestStateFromPeers = () => {
         if (currentQueueAction) {
-            currentQueueAction({
-                type: 'request_state',
-                payload: '',
-                requesterId: state.userId,
-                timestamp: Date.now(),
-            });
+            setTimeout(() => {
+                if (currentQueueAction) {
+                    currentQueueAction({
+                        type: 'request_state',
+                        payload: '',
+                        requesterId: state.userId,
+                        timestamp: Date.now(),
+                    });
+                }
+            }, 2000);
         }
         else {
             console.warn('[STATE_SYNC] No queue action available for state request');
@@ -37069,32 +37073,6 @@ const Eraser = createLucideIcon("Eraser", [
  */
 
 
-const LockOpen = createLucideIcon("LockOpen", [
-  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
-  ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
-]);
-
-/**
- * @license lucide-react v0.460.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const Lock = createLucideIcon("Lock", [
-  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
-  ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
-]);
-
-/**
- * @license lucide-react v0.460.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
 const Minus = createLucideIcon("Minus", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
 
 /**
@@ -37175,7 +37153,7 @@ const Undo2 = createLucideIcon("Undo2", [
 ]);
 
 // Top Toolbar Component
-const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockToggle, isAdmin = false, hasToolAccess = false, isGloballyUnlocked = false, shouldBeOpenByDefault = true, hasVideoBackground = false }) => {
+const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockToggle, isAdmin = false, hasToolAccess = false, isGloballyUnlocked = true, shouldBeOpenByDefault = true, hasVideoBackground = false }) => {
     const { state, dispatch } = useWhiteboard();
     const [isVisible, setIsVisible] = useState(shouldBeOpenByDefault);
     const [isInitialized, setIsInitialized] = useState(false);
@@ -37251,9 +37229,7 @@ const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockTog
     if (!isInitialized) {
         return null;
     }
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "absolute top-5 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-10", children: [!isVisible && (jsx("button", { className: "w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300", onClick: handleToggleVisibility, title: "Show Tools", children: jsx(ChevronDown, { size: 16, className: "text-current" }) })), isVisible && (jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: jsxs("div", { className: "flex items-center gap-1 p-1", children: [isAdmin && (jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded transition-colors ${isGloballyUnlocked
-                                        ? 'bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-900/70'
-                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'}`, onClick: handleLockToggle, title: isGloballyUnlocked ? 'Whiteboard unlocked for all users - Click to lock' : 'Whiteboard locked - Click to unlock for all users', children: isGloballyUnlocked ? jsx(LockOpen, { size: 16, className: "text-current" }) : jsx(Lock, { size: 16, className: "text-current" }) })), jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded ${hasToolAccess ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300' : 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'}`, onClick: handleUndo, disabled: !hasToolAccess, title: hasToolAccess ? 'Undo' : 'Access restricted', children: jsx(Undo2, { size: 16, className: "text-current" }) }), jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded ${hasToolAccess ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300' : 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'}`, onClick: handleRedo, disabled: !hasToolAccess, title: hasToolAccess ? 'Redo' : 'Access restricted', children: jsx(Redo2, { size: 16, className: "text-current" }) }), jsx("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" }), tools.map((tool) => (jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded transition-colors ${!hasToolAccess
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "absolute top-5 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-10", children: [!isVisible && (jsx("button", { className: "w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300", onClick: handleToggleVisibility, title: "Show Tools", children: jsx(ChevronDown, { size: 16, className: "text-current" }) })), isVisible && (jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: jsxs("div", { className: "flex items-center gap-1 p-1", children: [jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded ${hasToolAccess ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300' : 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'}`, onClick: handleUndo, disabled: !hasToolAccess, title: hasToolAccess ? 'Undo' : 'Access restricted', children: jsx(Undo2, { size: 16, className: "text-current" }) }), jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded ${hasToolAccess ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300' : 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'}`, onClick: handleRedo, disabled: !hasToolAccess, title: hasToolAccess ? 'Redo' : 'Access restricted', children: jsx(Redo2, { size: 16, className: "text-current" }) }), jsx("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" }), tools.map((tool) => (jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded transition-colors ${!hasToolAccess
                                         ? 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'
                                         : state.tool === tool.type
                                             ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-600 dark:text-purple-300'
@@ -42311,6 +42287,7 @@ Object.assign(lookup, {
 let socket = null;
 const joinedRooms = new Set();
 const setupCallbacks = new Map();
+const statusChangeCallbacks = new Set();
 let currentWebSocketUrl = undefined;
 // Initialize socket connection
 const initializeSocket = (webSocketUrl) => {
@@ -42326,7 +42303,6 @@ const initializeSocket = (webSocketUrl) => {
             setupCallbacks.clear();
         }
         currentWebSocketUrl = webSocketUrl;
-        console.log('[SOCKET] Using socket server URL:', socketServerUrl);
         if (!socketServerUrl) {
             console.error('[SOCKET] No socket server URL provided');
         }
@@ -42337,29 +42313,21 @@ const initializeSocket = (webSocketUrl) => {
             reconnectionDelay: 1000,
         });
         socket.on('connect', () => {
-            console.log('[SOCKET] Connected to server');
-            // Re-join all rooms after reconnection
+            statusChangeCallbacks.forEach(callback => callback(true));
             joinedRooms.forEach(roomId => {
                 socket.emit('join-room', roomId);
-                console.log('[SOCKET] Re-joined room:', roomId);
             });
         });
         socket.on('disconnect', () => {
-            console.log('[SOCKET] Disconnected from server');
+            statusChangeCallbacks.forEach(callback => callback(false));
         });
-        socket.on('connect_error', (error) => {
-            console.error('[SOCKET] Connection error:', error);
+        socket.on('connect_error', () => {
+            // Connection error handled by Socket.IO reconnection logic
         });
         // Set up the global receive-message listener once
         socket.on('receive-message', (message) => {
             const callback = setupCallbacks.get(message.roomId);
             if (callback) {
-                console.log('[SOCKET] Received message from room:', message.roomId, {
-                    compression: message.data.compressionType,
-                    originalSize: message.data.originalSize,
-                    compressedSize: message.data.compressedSize,
-                    from: message.from
-                });
                 callback(message.data);
             }
         });
@@ -42393,18 +42361,23 @@ const onSend = (roomId, data, webSocketUrl) => {
         console.error('[SOCKET] Error sending message:', error);
     }
 };
-const onReceive = (roomId, callback, webSocketUrl) => {
+const onReceive = (roomId, callback, webSocketUrl, onRoomJoined) => {
     const socketInstance = initializeSocket(webSocketUrl);
     // Store the callback for this room
     setupCallbacks.set(roomId, callback);
-    // Only join the room if we haven't already
     if (!joinedRooms.has(roomId)) {
         socketInstance.emit('join-room', roomId);
         joinedRooms.add(roomId);
-        console.log('[SOCKET] Joined room:', roomId);
+        if (onRoomJoined) {
+            setTimeout(() => {
+                onRoomJoined();
+            }, 100);
+        }
     }
     else {
-        console.log('[SOCKET] Already in room:', roomId);
+        if (onRoomJoined) {
+            onRoomJoined();
+        }
     }
 };
 const leaveRoom = (roomId) => {
@@ -42421,20 +42394,66 @@ const disconnectSocket = () => {
         socket = null;
         joinedRooms.clear();
         setupCallbacks.clear();
-        console.log('[SOCKET] Socket disconnected and cleaned up');
     }
 };
+// Get current socket connection status
+const isSocketConnected = () => {
+    return socket?.connected ?? false;
+};
+// Get current socket instance
+const getSocket = () => {
+    return socket;
+};
+// Subscribe to connection status changes
+const onSocketStatusChange = (callback) => {
+    const socketInstance = socket || initializeSocket();
+    statusChangeCallbacks.add(callback);
+    callback(socketInstance.connected);
+    return () => {
+        statusChangeCallbacks.delete(callback);
+    };
+};
+const waitForSocket = (webSocketUrl, timeoutMs = 5000) => {
+    return new Promise((resolve) => {
+        const socketInstance = initializeSocket(webSocketUrl);
+        if (socketInstance.connected) {
+            resolve();
+            return;
+        }
+        const handleConnect = () => {
+            socketInstance.off('connect', handleConnect);
+            clearTimeout(timeoutHandle);
+            resolve();
+        };
+        socketInstance.on('connect', handleConnect);
+        const timeoutHandle = setTimeout(() => {
+            socketInstance.off('connect', handleConnect);
+            resolve();
+        }, timeoutMs);
+    });
+};
 
 const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transparentBackground = false, videoStream }) => {
     const { state, dispatch, setQueueAction, requestStateFromPeers, webSocketUrl } = useWhiteboard();
     const [lastCollaborativeAction, setLastCollaborativeAction] = useState(null);
     const [hasRequestedState, setHasRequestedState] = useState(false);
     const [lastStateRequestTime, setLastStateRequestTime] = useState(0);
-    const [isGloballyUnlocked, setIsGloballyUnlocked] = useState(false); // Global unlock status
+    const [isSocketConnected, setIsSocketConnected] = useState(false);
+    const [isRoomJoined, setIsRoomJoined] = useState(false);
+    const [isGloballyUnlocked, setIsGloballyUnlocked] = useState(true); // Global unlock status
     const [syncedAllowedUsers, setSyncedAllowedUsers] = useState(allowedUsers); // Synced allowed users from collaboration
     const isCollaborativeUpdateRef = useRef(false); // Track if update came from collaboration
     const lastClearTimeRef = useRef(0); // Track when last clear happened
     const boardRef = useRef(null);
+    useEffect(() => {
+        const unsubscribe = onSocketStatusChange((connected) => {
+            setIsSocketConnected(connected);
+        });
+        return () => {
+            console.log('[WHITEBOARD] Unsubscribing from socket status listener');
+            unsubscribe();
+        };
+    }, []); // Empty dependencies - single listener for component lifecycle
     // Set userId in context when component mounts or userId changes
     useEffect(() => {
         dispatch({ type: 'SET_USER_ID', payload: userId });
@@ -42515,7 +42534,9 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
                 setHasRequestedState(false);
             }
             callback(data);
-        }, webSocketUrl);
+        }, webSocketUrl, () => {
+            setIsRoomJoined(true);
+        });
     }, [roomId, webSocketUrl]);
     // Initialize the collaborative whiteboard hook
     const collaborativeConfig = useMemo(() => ({
@@ -42552,48 +42573,42 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
             });
         }
     }, [allowedUsers, queueAction, userId, syncedAllowedUsers]);
-    // Request state from peers when joining/rejoining the room
+    // Request state from peers when room is successfully joined AND socket is connected
+    // Need both conditions to ensure message can actually be sent
     useEffect(() => {
-        if (queueAction && typeof queueAction === 'function' && !hasRequestedState) {
-            const requestTimer = setTimeout(() => {
-                const now = Date.now();
-                if (now - lastClearTimeRef.current < 10000) {
-                    return;
-                }
-                if (now - lastStateRequestTime > 5000) {
-                    requestStateFromPeers();
-                    setHasRequestedState(true);
-                    setLastStateRequestTime(now);
-                }
-            }, 500);
-            return () => clearTimeout(requestTimer);
+        if (!isRoomJoined || !isSocketConnected || hasRequestedState || state.shapes.length > 0 || !queueAction) {
+            return;
         }
-    }, [roomId, queueAction, requestStateFromPeers, hasRequestedState, lastStateRequestTime]);
+        const now = Date.now();
+        if (now - lastClearTimeRef.current < 10000) {
+            return;
+        }
+        requestStateFromPeers();
+        setHasRequestedState(true);
+        setLastStateRequestTime(Date.now());
+    }, [isRoomJoined, isSocketConnected, state.shapes.length, hasRequestedState, queueAction, requestStateFromPeers, userId, roomId]);
     // Reset request flag when room changes
     useEffect(() => {
         setHasRequestedState(false);
         setLastStateRequestTime(0);
+        setIsRoomJoined(false);
     }, [roomId]);
-    // Monitor for empty canvas and request state only if we haven't tried recently
+    // Retry state request if canvas is still empty after 3 seconds
     useEffect(() => {
-        if (queueAction &&
-            typeof queueAction === 'function' &&
-            state.shapes.length === 0 &&
-            !hasRequestedState) {
-            const now = Date.now();
-            if (now - lastClearTimeRef.current < 10000) {
-                return;
-            }
-            if (now - lastStateRequestTime > 10000) {
-                const reconnectTimer = setTimeout(() => {
-                    requestStateFromPeers();
-                    setHasRequestedState(true);
-                    setLastStateRequestTime(now);
-                }, 2000);
-                return () => clearTimeout(reconnectTimer);
-            }
+        if (!isRoomJoined || !isSocketConnected || hasRequestedState || state.shapes.length > 0 || !queueAction) {
+            return;
+        }
+        const now = Date.now();
+        // Don't retry if we recently cleared
+        if (now - lastClearTimeRef.current < 10000) {
+            return;
         }
-    }, [queueAction, state.shapes.length, requestStateFromPeers, hasRequestedState, lastStateRequestTime]);
+        const retryTimer = setTimeout(() => {
+            requestStateFromPeers();
+            setLastStateRequestTime(Date.now());
+        }, 3000);
+        return () => clearTimeout(retryTimer);
+    }, [isRoomJoined, isSocketConnected, state.shapes.length, queueAction, requestStateFromPeers, lastStateRequestTime, userId]);
     // Cleanup stale active drawings periodically
     useEffect(() => {
         const cleanupInterval = setInterval(() => {
@@ -42795,7 +42810,7 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
                 });
             }
         };
-    }, [isAdmin, queueAction, userId, dispatch]);
+    }, [isAdmin, userId, dispatch]);
     // Global cleanup on app unmount
     useEffect(() => {
         const handleBeforeUnload = () => {
@@ -45838,5 +45853,5 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
-export { Whiteboard, WhiteboardProvider, cn, useCapture as useWhiteboardStream };
+export { Whiteboard, WhiteboardProvider, cn, disconnectSocket, getSocket, isSocketConnected, leaveRoom, onReceive, onSend, onSocketStatusChange, useCapture as useWhiteboardStream, waitForSocket };
 //# sourceMappingURL=index.esm.js.map