@ngenux/ngage-whiteboarding 1.0.4 → 1.0.6

package/dist/index.esm.js

@@ -37051,6 +37051,14 @@ const Undo2 = createLucideIcon("Undo2", [
 const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockToggle, isAdmin = false, hasToolAccess = false, isGloballyUnlocked = false, shouldBeOpenByDefault = true, hasVideoBackground = false }) => {
     const { state, dispatch } = useWhiteboard();
     const [isVisible, setIsVisible] = useState(shouldBeOpenByDefault);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Wait for context to be fully initialized before rendering
+    // Check that state.userId is set to ensure context is fully ready
+    useEffect(() => {
+        if (state && state.userId) {
+            setIsInitialized(true);
+        }
+    }, [state]);
     const handleToggleVisibility = () => {
         setIsVisible(!isVisible);
     };
@@ -37112,6 +37120,10 @@ const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockTog
             }
         }
     };
+    // Don't render until fully initialized to prevent race conditions
+    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
@@ -37129,13 +37141,23 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
     const [position, setPosition] = useState({ x: 20, y: 80 });
     const [hasEverHadAccess, setHasEverHadAccess] = useState(hasToolAccess);
     const [wasManuallyClosedAfterAccess, setWasManuallyClosedAfterAccess] = useState(false);
-    // Set white as default stroke color when video background is active
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Wait for context to be fully initialized before rendering
+    // Check that state.userId is set to ensure context is fully ready
     useEffect(() => {
-        if (hasVideoBackground && state.color === '#000000') {
-            // Only change if currently black, to avoid overriding user's choice
+        if (state && state.userId) {
+            setIsInitialized(true);
+        }
+    }, [state]);
+    // Set white as default stroke color when video background is first activated (only once)
+    const hasVideoBackgroundRef = React__default.useRef(false);
+    useEffect(() => {
+        // Only auto-switch to white on first video activation, and only if currently black
+        if (hasVideoBackground && !hasVideoBackgroundRef.current && state.color === '#000000') {
             dispatch({ type: 'SET_COLOR', payload: '#FFFFFF' });
         }
-    }, [hasVideoBackground, state.color, dispatch]);
+        hasVideoBackgroundRef.current = hasVideoBackground;
+    }, [hasVideoBackground, dispatch]);
     // Track initial access grant
     useEffect(() => {
         if (hasToolAccess && !hasEverHadAccess) {
@@ -37249,6 +37271,10 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
         // Only update local state - don't broadcast opacity changes to other users
         dispatch({ type: 'SET_OPACITY', payload: opacity });
     };
+    // Don't render until fully initialized to prevent race conditions
+    if (!isInitialized) {
+        return null;
+    }
     if (!isVisible) {
         // Only show the sidebar toggle button if user has tool access
         if (!hasToolAccess) {