From dea26be498450e5bbf3c4acc9f2bb2408f2a9561 Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Fri, 14 May 2021 11:09:37 +0200
Subject: [PATCH] refactor timer and slide display
---
.../components/SlideDisplay.tsx | 12 ++++++++++
client/src/pages/views/TeamViewPage.tsx | 22 +++----------------
client/src/pages/views/components/Timer.tsx | 2 +-
3 files changed, 16 insertions(+), 20 deletions(-)
diff --git a/client/src/pages/presentationEditor/components/SlideDisplay.tsx b/client/src/pages/presentationEditor/components/SlideDisplay.tsx
index 9fd6ed70..8326bf86 100644
--- a/client/src/pages/presentationEditor/components/SlideDisplay.tsx
+++ b/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/${
diff --git a/client/src/pages/views/TeamViewPage.tsx b/client/src/pages/views/TeamViewPage.tsx
index 4c3266bc..2ebc0926 100644
--- a/client/src/pages/views/TeamViewPage.tsx
+++ b/client/src/pages/views/TeamViewPage.tsx
@@ -1,17 +1,10 @@
-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} />}
diff --git a/client/src/pages/views/components/Timer.tsx b/client/src/pages/views/components/Timer.tsx
index 1bab9968..032effb7 100644
--- a/client/src/pages/views/components/Timer.tsx
+++ b/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
--
GitLab