@@ -7,10 +7,18 @@ import React, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'r
77import { useCombinedRefs } from '../../../shared/utils/useCombinedRefs' ;
88import EmptyWhiteboard from '../EmptyWhiteboard' ;
99import { ExcalidrawElement } from '@alkemio/excalidraw/types/element/types' ;
10- import { CollabAPI } from './collab/Collab' ;
1110import { useUserContext } from '../../../community/user' ;
1211import { WhiteboardFilesManager } from './useWhiteboardFilesManager' ;
13- import useCollab from './collab/useCollab' ;
12+ import useCollab , { CollabAPI } from './collab/useCollab' ;
13+ import Dialog from '@mui/material/Dialog' ;
14+ import DialogHeader from '../../../../core/ui/dialog/DialogHeader' ;
15+ import { DialogContent } from '../../../../core/ui/dialog/deprecated' ;
16+ import WrapperMarkdown from '../../../../core/ui/markdown/WrapperMarkdown' ;
17+ import { Text } from '../../../../core/ui/typography' ;
18+ import { formatTimeElapsed } from '../../../shared/utils/formatTimeElapsed' ;
19+ import { Button , DialogActions } from '@mui/material' ;
20+ import { useTranslation } from 'react-i18next' ;
21+ import { LoadingButton } from '@mui/lab' ;
1422
1523const useActorWhiteboardStyles = makeStyles ( theme => ( {
1624 container : {
@@ -30,6 +38,7 @@ const useActorWhiteboardStyles = makeStyles(theme => ({
3038export interface WhiteboardWhiteboardEntities {
3139 whiteboard : { id ?: string ; content : string } | undefined ;
3240 filesManager : WhiteboardFilesManager ;
41+ lastSavedDate : Date | undefined ;
3342}
3443
3544export interface WhiteboardWhiteboardActions {
@@ -38,32 +47,22 @@ export interface WhiteboardWhiteboardActions {
3847 onSavedToDatabase ?: ( ) => void ;
3948}
4049
41- export interface WhiteboardWhiteboardEvents {
42- onCollaborationEnabledChange ?: ( collaborationEnabled : boolean ) => void ;
43- }
50+ export interface WhiteboardWhiteboardEvents { }
4451
45- export interface WhiteboardWhiteboardOptions extends ExcalidrawProps {
46- collaborationEnabled : boolean ;
47- }
52+ export interface WhiteboardWhiteboardOptions extends ExcalidrawProps { }
4853
4954export interface WhiteboardWhiteboardProps {
5055 entities : WhiteboardWhiteboardEntities ;
5156 options : WhiteboardWhiteboardOptions ;
5257 actions : WhiteboardWhiteboardActions ;
53- events : WhiteboardWhiteboardEvents ;
58+ events ? : WhiteboardWhiteboardEvents ;
5459 collabApiRef ?: Ref < CollabAPI | null > ;
5560}
5661
5762const WINDOW_SCROLL_HANDLER_DEBOUNCE_INTERVAL = 100 ;
5863
59- const CollaborativeExcalidrawWrapper = ( {
60- entities,
61- actions,
62- options,
63- events,
64- collabApiRef,
65- } : WhiteboardWhiteboardProps ) => {
66- const { whiteboard, filesManager } = entities ;
64+ const CollaborativeExcalidrawWrapper = ( { entities, actions, options, collabApiRef } : WhiteboardWhiteboardProps ) => {
65+ const { whiteboard, filesManager, lastSavedDate } = entities ;
6766
6867 const combinedCollabApiRef = useCombinedRefs < CollabAPI | null > ( null , collabApiRef ) ;
6968
@@ -116,11 +115,11 @@ const CollaborativeExcalidrawWrapper = ({
116115 [ ]
117116 ) ;
118117
119- const { UIOptions : externalUIOptions , collaborationEnabled , ...restOptions } = options ;
118+ const { UIOptions : externalUIOptions , ...restOptions } = options ;
120119
121120 const mergedUIOptions = useMemo ( ( ) => merge ( UIOptions , externalUIOptions ) , [ UIOptions , externalUIOptions ] ) ;
122121
123- const [ collabApi , initializeCollab ] = useCollab ( {
122+ const [ collabApi , initializeCollab , { connecting , collaborating } ] = useCollab ( {
124123 username,
125124 onSavedToDatabase : actions . onSavedToDatabase ,
126125 filesManager,
@@ -138,11 +137,10 @@ const CollaborativeExcalidrawWrapper = ({
138137 return { success : false , errors : [ 'ExcalidrawAPI not yet ready' ] } ;
139138 } ,
140139 onCloseConnection : ( ) => {
141- events . onCollaborationEnabledChange ?. ( false ) ;
140+ setCollaborationStoppedNoticeOpen ( true ) ;
142141 } ,
143142 onInitialize : collabApi => {
144143 combinedCollabApiRef . current = collabApi ;
145- events . onCollaborationEnabledChange ?.( true ) ;
146144 } ,
147145 } ) ;
148146
@@ -153,14 +151,26 @@ const CollaborativeExcalidrawWrapper = ({
153151
154152 const [ excalidrawApi , setExcalidrawApi ] = useState < ExcalidrawImperativeAPI | null > ( null ) ;
155153
154+ const [ collaborationStartTime , setCollaborationStartTime ] = useState < number | null > ( Date . now ( ) ) ;
155+
156+ const restartCollaboration = ( ) => {
157+ setCollaborationStartTime ( Date . now ( ) ) ;
158+ } ;
159+
160+ useEffect ( ( ) => {
161+ if ( ! connecting && collaborating ) {
162+ setCollaborationStoppedNoticeOpen ( false ) ;
163+ }
164+ } , [ connecting , collaborating ] ) ;
165+
156166 useEffect ( ( ) => {
157- if ( excalidrawApi && whiteboard ?. id ) {
167+ if ( excalidrawApi && whiteboard ?. id && collaborationStartTime !== null ) {
158168 return initializeCollab ( {
159169 excalidrawApi,
160170 roomId : whiteboard . id ,
161171 } ) ;
162172 }
163- } , [ excalidrawApi , whiteboard ?. id ] ) ;
173+ } , [ excalidrawApi , whiteboard ?. id , collaborationStartTime ] ) ;
164174
165175 const handleInitializeApi = useCallback (
166176 ( excalidrawApi : ExcalidrawImperativeAPI ) => {
@@ -170,29 +180,68 @@ const CollaborativeExcalidrawWrapper = ({
170180 [ actions . onInitApi ]
171181 ) ;
172182
183+ const [ collaborationStoppedNoticeOpen , setCollaborationStoppedNoticeOpen ] = useState ( false ) ;
184+
185+ const { t } = useTranslation ( ) ;
186+
187+ const [ isOnline , setIsOnline ] = useState ( navigator . onLine ) ;
188+
189+ useEffect ( ( ) => {
190+ const handleOnlineChange = ( ) => setIsOnline ( navigator . onLine ) ;
191+ window . addEventListener ( 'online' , handleOnlineChange ) ;
192+ window . addEventListener ( 'offline' , handleOnlineChange ) ;
193+ setIsOnline ( navigator . onLine ) ;
194+ return ( ) => {
195+ window . removeEventListener ( 'online' , handleOnlineChange ) ;
196+ window . removeEventListener ( 'offline' , handleOnlineChange ) ;
197+ } ;
198+ } , [ ] ) ;
199+
173200 return (
174- < div className = { styles . container } >
175- { whiteboard && (
176- < Excalidraw
177- key = { whiteboard . id } // initializing a fresh Excalidraw for each whiteboard
178- excalidrawAPI = { handleInitializeApi }
179- initialData = { data }
180- UIOptions = { mergedUIOptions }
181- isCollaborating = { collaborationEnabled }
182- viewModeEnabled = { ! collaborationEnabled }
183- gridModeEnabled
184- onChange = { onChange }
185- onPointerUpdate = { collabApi ?. onPointerUpdate }
186- detectScroll = { false }
187- autoFocus
188- generateIdForFile = { addNewFile }
189- /*renderTopRightUI={_isMobile => {
190- return <LiveCollaborationStatus />;
191- }}*/
192- { ...restOptions }
193- />
194- ) }
195- </ div >
201+ < >
202+ < div className = { styles . container } >
203+ { whiteboard && (
204+ < Excalidraw
205+ key = { whiteboard . id } // initializing a fresh Excalidraw for each whiteboard
206+ excalidrawAPI = { handleInitializeApi }
207+ initialData = { data }
208+ UIOptions = { mergedUIOptions }
209+ isCollaborating = { collaborating }
210+ viewModeEnabled = { ! collaborating }
211+ gridModeEnabled
212+ onChange = { onChange }
213+ onPointerUpdate = { collabApi ?. onPointerUpdate }
214+ detectScroll = { false }
215+ autoFocus
216+ generateIdForFile = { addNewFile }
217+ /*renderTopRightUI={_isMobile => {
218+ return <LiveCollaborationStatus />;
219+ }}*/
220+ { ...restOptions }
221+ />
222+ ) }
223+ </ div >
224+ < Dialog open = { collaborationStoppedNoticeOpen } onClose = { ( ) => setCollaborationStoppedNoticeOpen ( false ) } >
225+ < DialogHeader title = { t ( 'pages.whiteboard.whiteboardDisconnected.title' ) } />
226+ < DialogContent >
227+ { isOnline && < WrapperMarkdown > { t ( 'pages.whiteboard.whiteboardDisconnected.message' ) } </ WrapperMarkdown > }
228+ { ! isOnline && < WrapperMarkdown > { t ( 'pages.whiteboard.whiteboardDisconnected.offline' ) } </ WrapperMarkdown > }
229+ { lastSavedDate && (
230+ < Text >
231+ { t ( 'pages.whiteboard.whiteboardDisconnected.lastSaved' , {
232+ lastSaved : formatTimeElapsed ( lastSavedDate , t ) ,
233+ } ) }
234+ </ Text >
235+ ) }
236+ </ DialogContent >
237+ < DialogActions >
238+ < LoadingButton onClick = { restartCollaboration } disabled = { ! isOnline } loading = { connecting } >
239+ Reconnect
240+ </ LoadingButton >
241+ < Button onClick = { ( ) => setCollaborationStoppedNoticeOpen ( false ) } > { t ( 'buttons.ok' ) } </ Button >
242+ </ DialogActions >
243+ </ Dialog >
244+ </ >
196245 ) ;
197246} ;
198247
0 commit comments