snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/whiteboard/components/web/WhiteboardWrapper.tsx

@@ -0,0 +1,80 @@
+import i18next from 'i18next';
+import React, { Suspense, useCallback, useRef } from 'react';
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { WHITEBOARD_UI_OPTIONS } from '../../constants';
+import { getStorageBackendUrl } from '../../functions';
+
+const LazyExcalidrawApp = React.lazy(async () => {
+    const [ { ExcalidrawApp } ] = await Promise.all([
+        import(/* webpackChunkName: "excalidraw" */ '@jitsi/excalidraw'),
+        import(/* webpackChunkName: "excalidraw" */ '@jitsi/excalidraw/index.css')
+    ]);
+
+    return { default: ExcalidrawApp };
+});
+
+/**
+ * Whiteboard wrapper for mobile.
+ *
+ * @returns {JSX.Element}
+ */
+const WhiteboardWrapper = ({
+    className,
+    collabDetails,
+    collabServerUrl,
+    localParticipantName
+}: {
+    className?: string;
+    collabDetails: {
+        roomId: string;
+        roomKey: string;
+    };
+    collabServerUrl: string;
+    localParticipantName: string;
+}) => {
+    const excalidrawAPIRef = useRef<any>(null);
+    const collabAPIRef = useRef<any>(null);
+    const storageBackendUrl = useSelector(getStorageBackendUrl);
+    const jwt = useSelector((state: IReduxState) => state['features/base/jwt']).jwt || '';
+
+    const getExcalidrawAPI = useCallback(excalidrawAPI => {
+        if (excalidrawAPIRef.current) {
+            return;
+        }
+        excalidrawAPIRef.current = excalidrawAPI;
+    }, []);
+
+    const getCollabAPI = useCallback(collabAPI => {
+        if (collabAPIRef.current) {
+            return;
+        }
+        collabAPIRef.current = collabAPI;
+        collabAPIRef.current.setUsername(localParticipantName);
+    }, [ localParticipantName ]);
+
+    return (
+        <div className = { className }>
+            <div className = 'excalidraw-wrapper'>
+                <Suspense fallback = { null }>
+                    <LazyExcalidrawApp
+                        collabDetails = { collabDetails }
+                        collabServerUrl = { collabServerUrl }
+                        excalidraw = {{
+                            isCollaborating: true,
+                            langCode: i18next.language,
+                            theme: 'light',
+                            UIOptions: WHITEBOARD_UI_OPTIONS
+                        }}
+                        getCollabAPI = { getCollabAPI }
+                        getExcalidrawAPI = { getExcalidrawAPI }
+                        jwt = { jwt }
+                        storageBackendUrl = { storageBackendUrl } />
+                </Suspense>
+            </div>
+        </div>
+    );
+};
+
+export default WhiteboardWrapper;