From fa34cb621239f326839996a5270cb71ae9250b6d Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Fri, 14 May 2021 11:25:38 +0200
Subject: [PATCH] Fix operator timer
---
.../presentationEditor/components/SlideDisplay.tsx | 12 ++++++++++++
client/src/pages/views/OperatorViewPage.tsx | 2 +-
client/src/pages/views/components/Timer.tsx | 8 ++++++--
3 files changed, 19 insertions(+), 3 deletions(-)
diff --git a/client/src/pages/presentationEditor/components/SlideDisplay.tsx b/client/src/pages/presentationEditor/components/SlideDisplay.tsx
index 9fd6ed70..517deb54 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'
@@ -27,6 +28,10 @@ const SlideDisplay = ({ variant, activeViewTypeId, currentSlideId }: SlideDispla
if (variant === 'editor') return state.editor.competition.background_image
return state.presentation.competition.background_image
})
+ const totalSlides = useAppSelector((state) => {
+ if (variant === 'presentation') return state.presentation.competition.slides.length
+ return state.editor.competition.slides.length
+ })
const slideBackgroundImage = slide?.background_image
const dispatch = useAppDispatch()
@@ -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/OperatorViewPage.tsx b/client/src/pages/views/OperatorViewPage.tsx
index 0936abaf..a23809e4 100644
--- a/client/src/pages/views/OperatorViewPage.tsx
+++ b/client/src/pages/views/OperatorViewPage.tsx
@@ -309,7 +309,7 @@ const OperatorViewPage: React.FC = () => {
<Tooltip title="Starta Timer" arrow>
<OperatorButton onClick={socketStartTimer} variant="contained">
<TimerIcon fontSize="large" />
- <Timer></Timer>
+ <Timer disableText />
</OperatorButton>
</Tooltip>
diff --git a/client/src/pages/views/components/Timer.tsx b/client/src/pages/views/components/Timer.tsx
index 1bab9968..f96806e2 100644
--- a/client/src/pages/views/components/Timer.tsx
+++ b/client/src/pages/views/components/Timer.tsx
@@ -18,7 +18,11 @@ const mapDispatchToProps = (dispatch: any) => {
let timerIntervalId: NodeJS.Timeout
-const Timer: React.FC = () => {
+type TimerProps = {
+ disableText?: boolean
+}
+
+const Timer = ({ disableText }: TimerProps) => {
const dispatch = useAppDispatch()
const slide = store
.getState()
@@ -40,7 +44,7 @@ const Timer: React.FC = () => {
}
}, [timer.enabled])
- return <div>{timer.value}</div>
+ return <div>{`${!disableText ? 'Tid kvar:' : ''} ${timer.value}`}</div>
}
export default Timer
--
GitLab