diff --git a/client/src/pages/presentationEditor/components/slideSettingsComponents/Timer.tsx b/client/src/pages/presentationEditor/components/slideSettingsComponents/Timer.tsx index 7a8208d4ecdcfccd98168a218835acf9d153697e..415152d3e9e9301c17a0462280a891c9ba3443e5 100644 --- a/client/src/pages/presentationEditor/components/slideSettingsComponents/Timer.tsx +++ b/client/src/pages/presentationEditor/components/slideSettingsComponents/Timer.tsx @@ -12,9 +12,10 @@ type TimerProps = { } const Timer = ({ activeSlide, competitionId }: TimerProps) => { - const maxTime = 1000 + const maxTime = 1000 // ms const dispatch = useAppDispatch() const updateTimer = async (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { + /** If timer value is above the max value, set the timer value to max value to not overflow the server */ if (+event.target.value > maxTime) { setTimer(maxTime) await axios diff --git a/client/src/pages/views/TeamViewPage.tsx b/client/src/pages/views/TeamViewPage.tsx index fd51c8844f29c50bd2463519c15b02692aef99bf..daca5c09d748436f0643607e54620c2a9d58758c 100644 --- a/client/src/pages/views/TeamViewPage.tsx +++ b/client/src/pages/views/TeamViewPage.tsx @@ -1,10 +1,17 @@ -import { Snackbar } from '@material-ui/core' +import { Snackbar, Typography } from '@material-ui/core' import { Alert } from '@material-ui/lab' import React, { useEffect, useState } from 'react' import { useAppSelector } from '../../hooks' import { socketConnect, socketJoinPresentation } from '../../sockets' import SlideDisplay from '../presentationEditor/components/SlideDisplay' -import { PresentationBackground, PresentationContainer } from './styled' +import Timer from '../views/components/Timer' +import { + OperatorContainer, + OperatorHeader, + PresentationBackground, + PresentationContainer, + SlideCounter, +} from './styled' const TeamViewPage: React.FC = () => { const code = useAppSelector((state) => state.presentation.code) @@ -12,6 +19,11 @@ const TeamViewPage: React.FC = () => { const activeViewTypeId = viewTypes.find((viewType) => viewType.name === 'Team')?.id const [successMessageOpen, setSuccessMessageOpen] = useState(true) const competitionName = useAppSelector((state) => state.presentation.competition.name) + const presentation = useAppSelector((state) => state.presentation) + const activeSlideOrder = useAppSelector( + (state) => + state.presentation.competition.slides.find((slide) => slide.id === state.presentation.activeSlideId)?.order + ) const teamName = useAppSelector( (state) => state.presentation.competition.teams.find((team) => team.id === state.competitionLogin.data?.team_id)?.name @@ -23,14 +35,26 @@ const TeamViewPage: React.FC = () => { } }, []) return ( - <PresentationBackground> - <PresentationContainer> - {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />} - </PresentationContainer> - <Snackbar open={successMessageOpen} autoHideDuration={4000} onClose={() => setSuccessMessageOpen(false)}> - <Alert severity="success">{`Du har gått med i tävlingen "${competitionName}" som lag ${teamName}`}</Alert> - </Snackbar> - </PresentationBackground> + <OperatorContainer> + <OperatorHeader> + <Typography variant="h1"> + <Timer></Timer> + </Typography> + <SlideCounter> + <Typography variant="h3"> + {activeSlideOrder !== undefined && activeSlideOrder + 1} / {presentation.competition.slides.length} + </Typography> + </SlideCounter> + </OperatorHeader> + <PresentationBackground> + <PresentationContainer> + {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />} + </PresentationContainer> + <Snackbar open={successMessageOpen} autoHideDuration={4000} onClose={() => setSuccessMessageOpen(false)}> + <Alert severity="success">{`Du har gått med i tävlingen "${competitionName}" som lag ${teamName}`}</Alert> + </Snackbar> + </PresentationBackground> + </OperatorContainer> ) }