From 81933d81dd22b6e76efcc5fd8320200d6b749c06 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Wed, 2 Oct 2024 21:22:45 +0200 Subject: [PATCH] Add communication with server (sharing enabled/disabled state) --- src/components/menuitems/Drawing.tsx | 5 +- src/store/actions/drawingActions.tsx | 90 +-------------------- src/store/actions/roomActions.tsx | 6 ++ src/store/middlewares/drawingMiddleware.tsx | 56 +++++++++++++ src/store/slices/drawingSlice.tsx | 5 +- src/store/store.tsx | 2 + 6 files changed, 74 insertions(+), 90 deletions(-) create mode 100644 src/store/middlewares/drawingMiddleware.tsx diff --git a/src/components/menuitems/Drawing.tsx b/src/components/menuitems/Drawing.tsx index 223ada10..935beb4a 100644 --- a/src/components/menuitems/Drawing.tsx +++ b/src/components/menuitems/Drawing.tsx @@ -11,6 +11,7 @@ import { import { MenuItemProps } from '../floatingmenu/FloatingMenu'; import MoreActions from '../moreactions/MoreActions'; import { drawingActions } from '../../store/slices/drawingSlice'; // eslint-disable-line +import { enableDrawing, disableDrawing } from '../../store/actions/drawingActions'; // eslint-disable-line import { permissions } from '../../utils/roles'; // eslint-disable-line import DrawingIcon from '@mui/icons-material/Edit'; // import RemoveDrawingIcon from '@mui/icons-material/Backspace'; @@ -32,9 +33,7 @@ const Drawing = ({ // disabled={!hasExtraVideoPermission} onClick={() => { onClick(); - - // drawingOpen ? dispatch(unlock()) : dispatch(lock()); - dispatch(drawingActions.setDrawingEnabled(!drawingEnabled)); + dispatch(!drawingEnabled ? enableDrawing() : disableDrawing()); }} > { } diff --git a/src/store/actions/drawingActions.tsx b/src/store/actions/drawingActions.tsx index b99ec39c..54457eae 100644 --- a/src/store/actions/drawingActions.tsx +++ b/src/store/actions/drawingActions.tsx @@ -9,24 +9,19 @@ const logger = new Logger('DrawingActions'); * * @returns {AppThunk>} Promise. */ -export const enableDrawing = (): -AppThunk> => async ( - dispatch, - getState, - { signalingService } -): Promise => { +export const enableDrawing = (): AppThunk> => async (dispatch, getState, { signalingService }): Promise => { logger.debug('moderator:enableDrawing()'); try { await signalingService.sendRequest('moderator:enableDrawing'); - dispatch(drawingActions.enableDrawing()); + dispatch(drawingActions.enableDrawing(true)); } catch (error) { logger.error('moderator:enableDrawing() [error:"%o"]', error); } }; -/** +/** * This thunk action disables the drawing. * * @returns {AppThunk>} Promise. @@ -42,85 +37,8 @@ AppThunk> => async ( try { await signalingService.sendRequest('moderator:disableDrawing'); - // const peerId = getState().me.id; - - dispatch(drawingActions.disableDrawing()); + dispatch(drawingActions.disableDrawing(false)); } catch (error) { logger.error('moderator:disableDrawing() [error:"%o"]', error); } -}; - -/** - * - * This thunk action starts the drawing. - * - * @returns {AppThunk>} Promise. - * - */ -export const startDrawing = (): -AppThunk> => async ( - dispatch, - getState, - { signalingService } -): Promise => { - logger.debug('startDrawing)'); - - try { - await signalingService.sendRequest('moderator:startDrawing'); - - } catch (error) { - logger.error('startDrawing() [error:"%o"]', error); - } -}; - -/** - * - * This thunk action stops the drawing. - * - * @returns {AppThunk>} Promise. - * - */ -export const stopDrawing = (): -AppThunk> => async ( - dispatch, - getState, - { signalingService } -): Promise => { - logger.debug('stopDrawing()'); - - try { - await signalingService.sendRequest('moderator:stopDrawing'); - - } catch (error) { - logger.error('stopDrawing() [error:"%o"]', error); - } -}; - -/** - * - * This thunk action sets the drawing remaining time. - * - * @param time - Time to set. - * @returns {AppThunk>} Promise. - * - */ -export const updateDrawing = (time : string): -AppThunk> => async ( - dispatch, - getState, - { signalingService } -): Promise => { - logger.debug('updateDrawing() [time:"%s"]', time); - - try { - - signalingService.sendRequest('moderator:updateDrawing', time); - - // dispatch(drawingActions.updateDrawingRemainingTime(time)); - - // dispatch(drawingActions.updateDrawing(time)); - - } catch (error) { - logger.error('updateDrawing() [error:"%o"]', error); - } }; \ No newline at end of file diff --git a/src/store/actions/roomActions.tsx b/src/store/actions/roomActions.tsx index 0105c66c..3e7f7f2b 100644 --- a/src/store/actions/roomActions.tsx +++ b/src/store/actions/roomActions.tsx @@ -4,6 +4,7 @@ import { meActions } from '../slices/meSlice'; import { peersActions } from '../slices/peersSlice'; import { permissionsActions } from '../slices/permissionsSlice'; import { roomActions } from '../slices/roomSlice'; +import { drawingActions } from '../slices/drawingSlice'; import { signalingActions } from '../slices/signalingSlice'; import { AppThunk, fileService } from '../store'; import { updateMic, updateWebcam } from './mediaActions'; @@ -62,6 +63,7 @@ export const joinRoom = (): AppThunk> => async ( tracker, chatHistory, fileHistory, + drawing, breakoutRooms, locked, lobbyPeers, @@ -80,6 +82,10 @@ export const joinRoom = (): AppThunk> => async ( dispatch(lobbyPeersActions.addPeers(lobbyPeers)); dispatch(roomSessionsActions.addMessages({ sessionId, messages: chatHistory })); dispatch(roomSessionsActions.addFiles({ sessionId, files: fileHistory })); + dispatch(drawing.isEnabled ? + drawingActions.enableDrawing(true) : + drawingActions.disableDrawing(false) + ); }); if (!getState().me.audioMuted) dispatch(updateMic()); diff --git a/src/store/middlewares/drawingMiddleware.tsx b/src/store/middlewares/drawingMiddleware.tsx new file mode 100644 index 00000000..0d79e7ed --- /dev/null +++ b/src/store/middlewares/drawingMiddleware.tsx @@ -0,0 +1,56 @@ +import { Middleware } from '@reduxjs/toolkit'; +import { Logger } from '../../utils/Logger'; + +import { drawingActions } from '../slices/drawingSlice'; +import { signalingActions } from '../slices/signalingSlice'; +import { AppDispatch, MiddlewareOptions, RootState } from '../store'; +// import { notificationsActions } from '../slices/notificationsSlice'; +// import { drawingFinishedLabel } from '../../components/translated/translatedComponents'; + +const logger = new Logger('ChatMiddleware'); + +const createDrawingMiddleware = ({ + signalingService +}: MiddlewareOptions): Middleware => { + logger.debug('createChatMiddleware()'); + + const middleware: Middleware = ({ + dispatch + }: { + dispatch: AppDispatch, + getState: () => RootState + }) => + (next) => (action) => { + + if (signalingActions.connect.match(action)) { + signalingService.on('notification', (notification) => { + try { + switch (notification.method) { + + case 'moderator:enabledDrawing': { + + dispatch(drawingActions.enableDrawing(true)); + + break; + } + + case 'moderator:disabledDrawing': { + + dispatch(drawingActions.disableDrawing(false)); + + break; + } + } + } catch (error) { + logger.error('error on signalService "notification" event [error:%o]', error); + } + }); + } + + return next(action); + }; + + return middleware; +}; + +export default createDrawingMiddleware; \ No newline at end of file diff --git a/src/store/slices/drawingSlice.tsx b/src/store/slices/drawingSlice.tsx index b35b6c67..5085930f 100644 --- a/src/store/slices/drawingSlice.tsx +++ b/src/store/slices/drawingSlice.tsx @@ -48,7 +48,10 @@ const drawingSlice = createSlice({ name: 'drawing', initialState, reducers: { - setDrawingEnabled: ((state, action: PayloadAction) => { + enableDrawing: ((state, action: PayloadAction) => { + state.drawingEnabled = action.payload; + }), + disableDrawing: ((state, action: PayloadAction) => { state.drawingEnabled = action.payload; }), setDrawingTool: ((state, action: PayloadAction) => { diff --git a/src/store/store.tsx b/src/store/store.tsx index 1fd66c37..c2a5fe02 100644 --- a/src/store/store.tsx +++ b/src/store/store.tsx @@ -27,6 +27,7 @@ import createPeerMiddleware from './middlewares/peerMiddleware'; import createPermissionsMiddleware from './middlewares/permissionsMiddleware'; import createChatMiddleware from './middlewares/chatMiddleware'; import createNotificationMiddleware from './middlewares/notificationMiddleware'; +import createDrawingMiddleware from './middlewares/drawingMiddleware'; import roomSlice from './slices/roomSlice'; import meSlice from './slices/meSlice'; import consumersSlice from './slices/consumersSlice'; @@ -150,6 +151,7 @@ export const store = configureStore({ createRoomMiddleware(middlewareOptions), createNotificationMiddleware(middlewareOptions), createEffectsMiddleware(middlewareOptions), + createDrawingMiddleware(middlewareOptions), ...(edumeetConfig.reduxLoggingEnabled ? [ createLogger({ duration: true, timestamp: false,