From 26088b6152e64194a625cf69253281a749788171 Mon Sep 17 00:00:00 2001 From: Roman Drozd Date: Thu, 4 Jul 2024 15:12:13 +0200 Subject: [PATCH] Merge countdownTimerSlice with roomSlice --- .../countdowntimer/CountdownTimer.tsx | 6 +- .../countdowntimer/CountdownTimerChip.tsx | 6 +- src/store/actions/countdownTimerActions.tsx | 10 ++-- src/store/actions/roomActions.tsx | 7 +-- .../middlewares/countdownTimerMiddleware.tsx | 16 ++--- .../middlewares/notificationMiddleware.tsx | 4 +- src/store/slices/countdownTimerSlice.tsx | 58 ------------------- src/store/slices/roomSlice.tsx | 49 +++++++++++++++- src/store/store.tsx | 2 - src/views/room/Room.tsx | 8 +-- 10 files changed, 76 insertions(+), 90 deletions(-) delete mode 100644 src/store/slices/countdownTimerSlice.tsx diff --git a/src/components/countdowntimer/CountdownTimer.tsx b/src/components/countdowntimer/CountdownTimer.tsx index 942ded98..cfd54674 100644 --- a/src/components/countdowntimer/CountdownTimer.tsx +++ b/src/components/countdowntimer/CountdownTimer.tsx @@ -21,9 +21,9 @@ const CountdownTimerDiv = styled('div')(({ theme }) => ({ const CountdownTimer = () : JSX.Element => { const isMobile = useAppSelector(isMobileSelector); const dispatch = useAppDispatch(); - const isEnabled = useAppSelector((state) => state.countdownTimer.isEnabled); - const isStarted = useAppSelector((state) => state.countdownTimer.isStarted); - const remainingTime = useAppSelector((state) => state.countdownTimer.remainingTime); + const isEnabled = useAppSelector((state) => state.room.countdownTimer.isEnabled); + const isStarted = useAppSelector((state) => state.room.countdownTimer.isStarted); + const remainingTime = useAppSelector((state) => state.room.countdownTimer.remainingTime); const inputRef = useRef(null); diff --git a/src/components/countdowntimer/CountdownTimerChip.tsx b/src/components/countdowntimer/CountdownTimerChip.tsx index 61689f55..0c047408 100644 --- a/src/components/countdowntimer/CountdownTimerChip.tsx +++ b/src/components/countdowntimer/CountdownTimerChip.tsx @@ -7,9 +7,9 @@ import moment from 'moment'; const CountdownTimerChip = (): JSX.Element => { const dispatch = useAppDispatch(); - const isEnabled = useAppSelector((state) => state.countdownTimer.isEnabled); - const remainingTime = useAppSelector((state) => state.countdownTimer.remainingTime); - const initialTime = useAppSelector((state) => state.countdownTimer.initialTime); + const isEnabled = useAppSelector((state) => state.room.countdownTimer.isEnabled); + const remainingTime = useAppSelector((state) => state.room.countdownTimer.remainingTime); + const initialTime = useAppSelector((state) => state.room.countdownTimer.initialTime); const participantListOpen = useAppSelector((state) => state.ui.participantListOpen); diff --git a/src/store/actions/countdownTimerActions.tsx b/src/store/actions/countdownTimerActions.tsx index 41214040..764830d5 100644 --- a/src/store/actions/countdownTimerActions.tsx +++ b/src/store/actions/countdownTimerActions.tsx @@ -1,5 +1,5 @@ import { Logger } from '../../utils/Logger'; -import { countdownTimerActions } from '../slices/countdownTimerSlice'; +import { roomActions } from '../slices/roomSlice'; import { AppThunk } from '../store'; const logger = new Logger('CountdownTimerActions'); @@ -22,7 +22,7 @@ AppThunk> => async ( try { await signalingService.sendRequest('moderator:enableCountdownTimer'); - dispatch(countdownTimerActions.enableCountdownTimer()); + dispatch(roomActions.enableCountdownTimer()); } catch (error) { logger.error('moderator:enableCountdownTimer() [error:"%o"]', error); } @@ -41,7 +41,7 @@ AppThunk> => async ( // const peerId = getState().me.id; - dispatch(countdownTimerActions.disableCountdownTimer()); + dispatch(roomActions.disableCountdownTimer()); } catch (error) { logger.error('moderator:disableCountdownTimer() [error:"%o"]', error); } @@ -91,9 +91,9 @@ AppThunk> => async ( signalingService.sendRequest('moderator:setCountdownTimerInitialTime', time); - dispatch(countdownTimerActions.setCountdownTimerRemainingTime(time)); + dispatch(roomActions.setCountdownTimerRemainingTime(time)); - dispatch(countdownTimerActions.setCountdownTimerInitialTime(time)); + dispatch(roomActions.setCountdownTimerInitialTime(time)); } catch (error) { logger.error('setCountdownTimer() [error:"%o"]', error); diff --git a/src/store/actions/roomActions.tsx b/src/store/actions/roomActions.tsx index 7a09c070..c9080af5 100644 --- a/src/store/actions/roomActions.tsx +++ b/src/store/actions/roomActions.tsx @@ -11,7 +11,6 @@ import { initialRoomSession, roomSessionsActions } from '../slices/roomSessionsS import { getSignalingUrl } from '../../utils/signalingHelpers'; import { getTenantFromFqdn } from './managementActions'; import { Logger } from '../../utils/Logger'; -import { countdownTimerActions } from '../slices/countdownTimerSlice'; const logger = new Logger('RoomActions'); @@ -82,11 +81,11 @@ export const joinRoom = (): AppThunk> => async ( dispatch(lobbyPeersActions.addPeers(lobbyPeers)); dispatch(roomSessionsActions.addMessages({ sessionId, messages: chatHistory })); dispatch(roomSessionsActions.addFiles({ sessionId, files: fileHistory })); - dispatch(countdownTimerActions.joinCountdownTimer(countdownTimer)); + dispatch(roomActions.joinCountdownTimer(countdownTimer)); dispatch(countdownTimer.isStarted ? - countdownTimerActions.startCountdownTimer() : - countdownTimerActions.stopCountdownTimer() + roomActions.startCountdownTimer() : + roomActions.stopCountdownTimer() ); }); diff --git a/src/store/middlewares/countdownTimerMiddleware.tsx b/src/store/middlewares/countdownTimerMiddleware.tsx index b51952c1..74d6031c 100644 --- a/src/store/middlewares/countdownTimerMiddleware.tsx +++ b/src/store/middlewares/countdownTimerMiddleware.tsx @@ -1,7 +1,7 @@ import { Middleware } from '@reduxjs/toolkit'; import { Logger } from '../../utils/Logger'; -import { countdownTimerActions } from '../slices/countdownTimerSlice'; +import { roomActions } from '../slices/roomSlice'; import { signalingActions } from '../slices/signalingSlice'; import { AppDispatch, MiddlewareOptions, RootState } from '../store'; import { notificationsActions } from '../slices/notificationsSlice'; @@ -29,27 +29,27 @@ const createCountdownTimerMiddleware = ({ case 'moderator:enabledCountdownTimer': { - dispatch(countdownTimerActions.enableCountdownTimer()); + dispatch(roomActions.enableCountdownTimer()); break; } case 'moderator:disabledCountdownTimer': { - dispatch(countdownTimerActions.disableCountdownTimer()); + dispatch(roomActions.disableCountdownTimer()); break; } case 'moderator:startedCountdownTimer': { - dispatch(countdownTimerActions.startCountdownTimer()); + dispatch(roomActions.startCountdownTimer()); break; } case 'moderator:stoppedCountdownTimer': { - dispatch(countdownTimerActions.stopCountdownTimer()); + dispatch(roomActions.stopCountdownTimer()); break; } @@ -58,7 +58,7 @@ const createCountdownTimerMiddleware = ({ const time = notification.data; - dispatch(countdownTimerActions.setCountdownTimerInitialTime(time)); + dispatch(roomActions.setCountdownTimerInitialTime(time)); break; } @@ -67,7 +67,7 @@ const createCountdownTimerMiddleware = ({ const time = notification.data; - dispatch(countdownTimerActions.setCountdownTimerRemainingTime(time)); + dispatch(roomActions.setCountdownTimerRemainingTime(time)); break; } @@ -77,7 +77,7 @@ const createCountdownTimerMiddleware = ({ const isStarted = notification.data.isStarted; const remainingTime = notification.data.remainingTime; - dispatch(countdownTimerActions.finishCountdownTimer({ isStarted, remainingTime })); + dispatch(roomActions.finishCountdownTimer({ isStarted, remainingTime })); dispatch(notificationsActions.enqueueNotification({ message: countdownTimerFinishedLabel(), diff --git a/src/store/middlewares/notificationMiddleware.tsx b/src/store/middlewares/notificationMiddleware.tsx index 069af104..a97b68c3 100644 --- a/src/store/middlewares/notificationMiddleware.tsx +++ b/src/store/middlewares/notificationMiddleware.tsx @@ -3,7 +3,7 @@ import { lobbyPeersActions } from '../slices/lobbyPeersSlice'; import { peersActions } from '../slices/peersSlice'; import { MiddlewareOptions, RootState } from '../store'; import { roomSessionsActions } from '../slices/roomSessionsSlice'; -import { countdownTimerActions } from '../slices/countdownTimerSlice'; +import { roomActions } from '../slices/roomSlice'; import { notificationsActions } from '../slices/notificationsSlice'; import { HTMLMediaElementWithSink } from '../../utils/types'; import { settingsActions } from '../slices/settingsSlice'; @@ -98,7 +98,7 @@ const createNotificationMiddleware = ({ } // Finished countdownTimer - if (countdownTimerActions.finishCountdownTimer.match(action)) { + if (roomActions.finishCountdownTimer.match(action)) { playNotificationSounds('finishedCountdownTimer'); } diff --git a/src/store/slices/countdownTimerSlice.tsx b/src/store/slices/countdownTimerSlice.tsx deleted file mode 100644 index 16ebc1c3..00000000 --- a/src/store/slices/countdownTimerSlice.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { createSlice, PayloadAction } from '@reduxjs/toolkit'; - -interface CountdownTimerState { - isEnabled: boolean; - isStarted: boolean; - initialTime: string; - remainingTime: string; -} - -const initialState : CountdownTimerState = { - isEnabled: true, - isStarted: false, - initialTime: '00:00:00', - remainingTime: '00:00:00', -}; - -const countdownTimerSlice = createSlice({ - name: 'countdownTimer', - initialState, - reducers: { - enableCountdownTimer: ((state) => { - state.isEnabled = true; - }), - disableCountdownTimer: ((state) => { - state.isEnabled = false; - }), - startCountdownTimer: ((state) => { - state.isStarted = true; - }), - stopCountdownTimer: ((state) => { - state.isStarted = false; - }), - setCountdownTimerRemainingTime: ((state, action: PayloadAction) => { - - const time = action.payload; - - state.remainingTime = time; - }), - setCountdownTimerInitialTime: ((state, action: PayloadAction) => { - - const time = action.payload; - - state.initialTime = time; - }), - finishCountdownTimer: ((state, action: PayloadAction) => { - - state.isStarted = action.payload.isStarted; - state.remainingTime = action.payload.remainingTime; - }), - joinCountdownTimer: ((state, action: PayloadAction) => { - state.initialTime = action.payload.initialTime; - state.remainingTime = action.payload.remainingTime; - }), - } -}); - -export const countdownTimerActions = countdownTimerSlice.actions; -export default countdownTimerSlice; \ No newline at end of file diff --git a/src/store/slices/roomSlice.tsx b/src/store/slices/roomSlice.tsx index 09a1d374..02c4d135 100644 --- a/src/store/slices/roomSlice.tsx +++ b/src/store/slices/roomSlice.tsx @@ -5,6 +5,13 @@ export type RoomConnectionState = 'new' | 'lobby' | 'joined' | 'left'; export type RoomMode = 'P2P' | 'SFU'; export type VideoCodec = 'vp8' | 'vp9' | 'h264' | 'h265' | 'av1'; +interface CountdownTimerState { + isEnabled: boolean; + isStarted: boolean; + initialTime: string; + remainingTime: string; +} + export interface RoomState { headless?: boolean; logo?: string; @@ -36,9 +43,10 @@ export interface RoomState { audioCodec?: string; screenSharingCodec?: VideoCodec; screenSharingSimulcast?: boolean; + countdownTimer: CountdownTimerState; } -type RoomUpdate = Omit; +type RoomUpdate = Omit; const initialState: RoomState = { logo: edumeetConfig.theme.logo, @@ -56,6 +64,12 @@ const initialState: RoomState = { audioCodec: 'opus', screenSharingCodec: 'vp8', screenSharingSimulcast: edumeetConfig.simulcastSharing, + countdownTimer: { + isEnabled: true, + isStarted: false, + initialTime: '00:00:00', + remainingTime: '00:00:00', + }, }; const roomSlice = createSlice({ @@ -77,6 +91,39 @@ const roomSlice = createSlice({ ) => { state.state = action.payload; }), + enableCountdownTimer: ((state) => { + state.countdownTimer.isEnabled = true; + }), + disableCountdownTimer: ((state) => { + state.countdownTimer.isEnabled = false; + }), + startCountdownTimer: ((state) => { + state.countdownTimer.isStarted = true; + }), + stopCountdownTimer: ((state) => { + state.countdownTimer.isStarted = false; + }), + setCountdownTimerRemainingTime: ((state, action: PayloadAction) => { + + const time = action.payload; + + state.countdownTimer.remainingTime = time; + }), + setCountdownTimerInitialTime: ((state, action: PayloadAction) => { + + const time = action.payload; + + state.countdownTimer.initialTime = time; + }), + finishCountdownTimer: ((state, action: PayloadAction) => { + + state.countdownTimer.isStarted = action.payload.isStarted; + state.countdownTimer.remainingTime = action.payload.remainingTime; + }), + joinCountdownTimer: ((state, action: PayloadAction) => { + state.countdownTimer.initialTime = action.payload.initialTime; + state.countdownTimer.remainingTime = action.payload.remainingTime; + }), } }); diff --git a/src/store/store.tsx b/src/store/store.tsx index f4e30094..9a0d02ec 100644 --- a/src/store/store.tsx +++ b/src/store/store.tsx @@ -30,7 +30,6 @@ import createNotificationMiddleware from './middlewares/notificationMiddleware'; import createCountdownTimerMiddleware from './middlewares/countdownTimerMiddleware'; import roomSlice from './slices/roomSlice'; import meSlice from './slices/meSlice'; -import countdownTimerSlice from './slices/countdownTimerSlice'; import consumersSlice from './slices/consumersSlice'; import signalingSlice from './slices/signalingSlice'; import permissionsSlice from './slices/permissionsSlice'; @@ -126,7 +125,6 @@ const reducer = combineReducers({ settings: settingsSlice.reducer, signaling: signalingSlice.reducer, ui: uiSlice.reducer, - countdownTimer: countdownTimerSlice.reducer, }); const pReducer = persistReducer(persistConfig, reducer); diff --git a/src/views/room/Room.tsx b/src/views/room/Room.tsx index fd638ff6..6accef79 100644 --- a/src/views/room/Room.tsx +++ b/src/views/room/Room.tsx @@ -14,7 +14,7 @@ import HelpButton from '../../components/controlbuttons/HelpButton'; import { useNotifier, useAppSelector, useAppDispatch } from '../../store/hooks'; import moment from 'moment'; -import { countdownTimerActions as countdownTimerSlices } from '../../store/slices/countdownTimerSlice'; +import { roomActions as roomSlices } from '../../store/slices/roomSlice'; const Room = (): JSX.Element => { useNotifier(); @@ -40,8 +40,8 @@ const Room = (): JSX.Element => { const handleFullscreenChange = () => setFullscreen(fscreen.fullscreenElement !== null); - const remainingTime = useAppSelector((state) => state.countdownTimer.remainingTime); - const isStarted = useAppSelector((state) => state.countdownTimer.isStarted); + const remainingTime = useAppSelector((state) => state.room.countdownTimer.remainingTime); + const isStarted = useAppSelector((state) => state.room.countdownTimer.isStarted); const dispatch = useAppDispatch(); useEffect(() => { @@ -55,7 +55,7 @@ const Room = (): JSX.Element => { const remainingTimeString = moment.unix(remainingTimeUnix).format('HH:mm:ss'); - dispatch(countdownTimerSlices.setCountdownTimerRemainingTime(remainingTimeString)); + dispatch(roomSlices.setCountdownTimerRemainingTime(remainingTimeString)); }, 1000);