81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
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;
|