refactor timer and slide display

client/src/pages/presentationEditor/components/SlideDisplay.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { getTypes } from '../../../actions/typesAction'
 import { useAppDispatch, useAppSelector } from '../../../hooks'
 import PresentationComponent from '../../views/components/PresentationComponent'
+import Timer from '../../views/components/Timer'
 import RndComponent from './RndComponent'
 import { Center, SlideEditorContainer, SlideEditorContainerRatio, SlideEditorPaper } from './styled'
 
@@ -22,6 +23,10 @@ const SlideDisplay = ({ variant, activeViewTypeId, currentSlideId }: SlideDispla
       return state.editor.competition.slides.find((slide) => slide.id === state.editor.activeSlideId)
     return state.presentation.competition.slides.find((slide) => slide.id === state.presentation.activeSlideId)
   })
+  const totalSlides = useAppSelector((state) => {
+    if (variant === 'presentation') return state.presentation.competition.slides.length
+    return state.editor.competition.slides.length
+  })
   const components = slide?.components
   const competitionBackgroundImage = useAppSelector((state) => {
     if (variant === 'editor') return state.editor.competition.background_image
@@ -54,6 +59,13 @@ const SlideDisplay = ({ variant, activeViewTypeId, currentSlideId }: SlideDispla
     <SlideEditorContainer>
       <SlideEditorContainerRatio>
         <SlideEditorPaper ref={editorPaperRef}>
+          <Typography variant="h3" style={{ position: 'absolute', left: 5, top: 5 }}>
+            {variant === 'editor' && `Tid kvar: ${slide?.timer}`}
+            {variant === 'presentation' && <Timer />}
+          </Typography>
+          <Typography variant="h3" style={{ position: 'absolute', right: 5, top: 5 }}>
+            {slide && `Sida: ${slide?.order + 1} / ${totalSlides}`}
+          </Typography>
           {(competitionBackgroundImage || slideBackgroundImage) && (
             <img
               src={`/static/images/${

client/src/pages/views/TeamViewPage.tsx

-import { Snackbar, Typography } from '@material-ui/core'
+import { Snackbar } 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 Timer from '../views/components/Timer'
-import {
-  OperatorContainer,
-  OperatorHeader,
-  OperatorHeaderItem,
-  PresentationBackground,
-  PresentationContainer,
-} from './styled'
+import { OperatorContainer, OperatorHeader, PresentationBackground, PresentationContainer } from './styled'
 
 const TeamViewPage: React.FC = () => {
   const code = useAppSelector((state) => state.presentation.code)
@@ -36,16 +29,7 @@ const TeamViewPage: React.FC = () => {
   }, [])
   return (
     <OperatorContainer>
-      <OperatorHeader>
-        <Typography variant="h1">
-          <Timer />
-        </Typography>
-        <OperatorHeaderItem>
-          <Typography variant="h3">
-            {activeSlideOrder !== undefined && activeSlideOrder + 1} / {presentation.competition.slides.length}
-          </Typography>
-        </OperatorHeaderItem>
-      </OperatorHeader>
+      <OperatorHeader></OperatorHeader>
       <PresentationBackground>
         <PresentationContainer>
           {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}

client/src/pages/views/components/Timer.tsx

@@ -40,7 +40,7 @@ const Timer: React.FC = () => {
     }
   }, [timer.enabled])
 
-  return <div>{timer.value}</div>
+  return <div>{`Tid kvar: ${timer.value}`}</div>
 }
 
 export default Timer