Add timer and slide counter

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

client/src/pages/views/TeamViewPage.tsx

-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>
   )
 }