@ngenux/ngage-whiteboarding 1.0.3 → 1.0.5

package/dist/index.js

@@ -36730,9 +36730,27 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
         const activeShapes = Object.values(state.activeDrawings);
         return activeShapes.map(shape => (jsxRuntime.jsx(MemoizedShapeComponent, { shape: shape }, `active-${shape.id}`)));
     }, [state.activeDrawings]);
+    const getStageDataURL = React.useCallback((format = 'png') => {
+        if (!stageRef.current) {
+            return '';
+        }
+        try {
+            const stage = stageRef.current;
+            return stage.toDataURL({
+                mimeType: format === 'png' ? 'image/png' : 'image/jpeg',
+                quality: 1,
+                pixelRatio: 2,
+            });
+        }
+        catch (error) {
+            console.error('Failed to get stage data URL:', error);
+            return '';
+        }
+    }, []);
     React.useImperativeHandle(ref, () => ({
         exportAsImage,
         exportAsPDF,
+        getStageDataURL,
     }));
     // Memoized cursor style for performance
     const cursorStyle = React.useMemo(() => ({
@@ -37053,6 +37071,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] = React.useState(shouldBeOpenByDefault);
+    const [isInitialized, setIsInitialized] = React.useState(false);
+    // Wait for context to be fully initialized before rendering
+    // Check that state.userId is set to ensure context is fully ready
+    React.useEffect(() => {
+        if (state && state.userId) {
+            setIsInitialized(true);
+        }
+    }, [state]);
     const handleToggleVisibility = () => {
         setIsVisible(!isVisible);
     };
@@ -37114,6 +37140,10 @@ const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockTog
             }
         }
     };
+    // Don't render until fully initialized to prevent race conditions
+    if (!isInitialized) {
+        return null;
+    }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "absolute top-5 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-10", children: [!isVisible && (jsxRuntime.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: jsxRuntime.jsx(ChevronDown, { size: 16, className: "text-current" }) })), isVisible && (jsxRuntime.jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1 p-1", children: [isAdmin && (jsxRuntime.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 ? jsxRuntime.jsx(LockOpen, { size: 16, className: "text-current" }) : jsxRuntime.jsx(Lock, { size: 16, className: "text-current" }) })), jsxRuntime.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: jsxRuntime.jsx(Undo2, { size: 16, className: "text-current" }) }), jsxRuntime.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: jsxRuntime.jsx(Redo2, { size: 16, className: "text-current" }) }), jsxRuntime.jsx("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" }), tools.map((tool) => (jsxRuntime.jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded transition-colors ${!hasToolAccess
@@ -37131,6 +37161,14 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
     const [position, setPosition] = React.useState({ x: 20, y: 80 });
     const [hasEverHadAccess, setHasEverHadAccess] = React.useState(hasToolAccess);
     const [wasManuallyClosedAfterAccess, setWasManuallyClosedAfterAccess] = React.useState(false);
+    const [isInitialized, setIsInitialized] = React.useState(false);
+    // Wait for context to be fully initialized before rendering
+    // Check that state.userId is set to ensure context is fully ready
+    React.useEffect(() => {
+        if (state && state.userId) {
+            setIsInitialized(true);
+        }
+    }, [state]);
     // Set white as default stroke color when video background is active
     React.useEffect(() => {
         if (hasVideoBackground && state.color === '#000000') {
@@ -37251,6 +37289,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) {
@@ -37264,16 +37306,20 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
             width: '250px',
             maxHeight: '80vh',
             cursor: isDragging ? 'grabbing' : 'grab'
-        }, onMouseDown: handleMouseDown, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-t-lg", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200", children: "Style Panel" }), !hasToolAccess && (jsxRuntime.jsx("span", { className: "text-xs bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-300 px-2 py-1 rounded", children: "Locked" }))] }), jsxRuntime.jsx("button", { className: "close-button p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded", onClick: handleManualClose, onMouseDown: (e) => e.stopPropagation(), title: "Close Panel", children: jsxRuntime.jsx(ChevronLeft, { size: 14, className: "text-gray-600 dark:text-gray-300" }) })] }), jsxRuntime.jsxs("div", { className: "sidebar-content p-3 overflow-y-auto", style: { maxHeight: 'calc(80vh - 40px)' }, children: [!hasToolAccess && (jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-orange-50 dark:bg-orange-900/30 border border-orange-200 dark:border-orange-800 rounded-lg text-center", children: [jsxRuntime.jsx("div", { className: "text-orange-700 dark:text-orange-300 text-sm font-medium mb-1", children: "\uD83D\uDD12 Tools Locked" }), jsxRuntime.jsx("div", { className: "text-orange-600 dark:text-orange-400 text-xs", children: "Contact admin for access" })] })), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Stroke Color" }), jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-1", children: strokeColors.map((color) => (jsxRuntime.jsx("button", { className: `w-6 h-6 rounded border-2 transition-all ${!hasToolAccess
-                                        ? 'opacity-50 cursor-not-allowed border-gray-200 dark:border-gray-700'
+        }, onMouseDown: handleMouseDown, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-t-lg", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200", children: "Style Panel" }), !hasToolAccess && (jsxRuntime.jsx("span", { className: "text-xs bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-300 px-2 py-1 rounded", children: "Locked" }))] }), jsxRuntime.jsx("button", { className: "close-button p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded", onClick: handleManualClose, onMouseDown: (e) => e.stopPropagation(), title: "Close Panel", children: jsxRuntime.jsx(ChevronLeft, { size: 14, className: "text-gray-600 dark:text-gray-300" }) })] }), jsxRuntime.jsxs("div", { className: "sidebar-content p-3 overflow-y-auto", style: { maxHeight: 'calc(80vh - 40px)' }, children: [!hasToolAccess && (jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-orange-50 dark:bg-orange-900/30 border border-orange-200 dark:border-orange-800 rounded-lg text-center", children: [jsxRuntime.jsx("div", { className: "text-orange-700 dark:text-orange-300 text-sm font-medium mb-1", children: "\uD83D\uDD12 Tools Locked" }), jsxRuntime.jsx("div", { className: "text-orange-600 dark:text-orange-400 text-xs", children: "Contact admin for access" })] })), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Stroke Color" }), jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-1", children: strokeColors.map((color) => (jsxRuntime.jsx("button", { className: `w-6 h-6 rounded transition-all relative ${!hasToolAccess
+                                        ? 'opacity-50 cursor-not-allowed border-2 border-gray-200 dark:border-gray-700'
                                         : state.color === color
-                                            ? 'border-purple-400 dark:border-purple-500 scale-110'
+                                            ? 'border-[3px] border-yellow-400 dark:border-yellow-300 scale-125 shadow-lg'
                                             : color === '#FFFFFF'
-                                                ? 'border-gray-400 dark:border-gray-500 hover:border-gray-500 dark:hover:border-gray-400'
-                                                : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`, style: {
+                                                ? 'border-2 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
+                                                : 'border-2 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`, style: {
                                         backgroundColor: color,
-                                        boxShadow: color === '#FFFFFF' ? 'inset 0 0 0 1px rgba(0,0,0,0.1)' : 'none'
-                                    }, onClick: () => handleColorChange(color), disabled: !hasToolAccess, title: hasToolAccess ? (color === '#FFFFFF' ? 'White' : color) : 'Access restricted' }, color))) })] }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Background" }), disableBackgroundChange && (jsxRuntime.jsx("div", { className: "p-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg text-center", children: jsxRuntime.jsx("div", { className: "text-blue-700 dark:text-blue-300 text-xs", title: "Disabled when video background is active", children: "\uD83D\uDD12 Background selection locked" }) })), !disableBackgroundChange && (jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-1", children: backgroundColors.map((color) => (jsxRuntime.jsx("button", { className: `w-6 h-6 rounded border-2 transition-all relative ${!hasToolAccess
+                                        boxShadow: color === '#FFFFFF'
+                                            ? 'inset 0 0 0 1px rgba(0,0,0,0.15)'
+                                            : state.color === color
+                                                ? '0 4px 12px rgba(234, 179, 8, 0.5), 0 0 0 2px rgba(234, 179, 8, 0.3)'
+                                                : 'none'
+                                    }, onClick: () => handleColorChange(color), disabled: !hasToolAccess, title: hasToolAccess ? (color === '#FFFFFF' ? 'White' : color) : 'Access restricted', children: state.color === color && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: color === '#FFFFFF' || color === '#EA580C' || color === '#DC2626' ? '#000000' : '#FFFFFF', strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) })) }, color))) })] }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Background" }), disableBackgroundChange && (jsxRuntime.jsx("div", { className: "p-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg text-center", children: jsxRuntime.jsx("div", { className: "text-blue-700 dark:text-blue-300 text-xs", title: "Disabled when video background is active", children: "\uD83D\uDD12 Background selection locked" }) })), !disableBackgroundChange && (jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-1", children: backgroundColors.map((color) => (jsxRuntime.jsx("button", { className: `w-6 h-6 rounded border-2 transition-all relative ${!hasToolAccess
                                         ? 'opacity-50 cursor-not-allowed border-gray-200 dark:border-gray-700'
                                         : state.backgroundColor === color
                                             ? 'border-blue-400 dark:border-blue-500 scale-110'
@@ -42455,10 +42501,57 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
     }, [state.activeDrawings, state.lastClearTimestamp, dispatch]);
     // Export functions to pass to toolbar
     const handleExportImage = React.useCallback((format) => {
-        if (boardRef.current) {
+        if (!boardRef.current) {
+            return;
+        }
+        // If video is active, capture both video and canvas
+        if (videoStream && videoRef.current) {
+            const video = videoRef.current;
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            // Set canvas size to match the whiteboard
+            canvas.width = video.videoWidth || video.offsetWidth;
+            canvas.height = video.videoHeight || video.offsetHeight;
+            try {
+                // Draw the video frame
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                // Get the Konva stage data URL
+                const stageDataURL = boardRef.current.getStageDataURL(format);
+                // Create an image from the stage
+                const stageImage = new Image();
+                stageImage.onload = () => {
+                    // Draw the annotations on top of the video
+                    ctx.drawImage(stageImage, 0, 0, canvas.width, canvas.height);
+                    // Convert to blob and download
+                    canvas.toBlob((blob) => {
+                        if (blob) {
+                            const timestamp = new Date().toISOString().slice(0, 16).replace('T', '_').replace(/:/g, '-');
+                            const filename = `whiteboard_video_annotation_${timestamp}.${format}`;
+                            const link = document.createElement('a');
+                            link.download = filename;
+                            link.href = URL.createObjectURL(blob);
+                            document.body.appendChild(link);
+                            link.click();
+                            document.body.removeChild(link);
+                            URL.revokeObjectURL(link.href);
+                        }
+                    }, format === 'png' ? 'image/png' : 'image/jpeg', 1.0);
+                };
+                stageImage.src = stageDataURL;
+            }
+            catch (error) {
+                console.error('Failed to export video with annotations:', error);
+                // Fallback to regular export
+                boardRef.current.exportAsImage(format);
+            }
+        }
+        else {
+            // No video - regular export
             boardRef.current.exportAsImage(format);
         }
-    }, []);
+    }, [videoStream]);
     const handleExportPDF = React.useCallback(() => {
         if (boardRef.current) {
             boardRef.current.exportAsPDF();