Skip to content
Snippets Groups Projects
Commit dea26be4 authored by Albin Henriksson's avatar Albin Henriksson
Browse files

refactor timer and slide display

parent 1ddd7e39
No related branches found
No related tags found
1 merge request!143refactor timer and slide display
Pipeline #45297 passed with warnings
......@@ -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/${
......
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} />}
......
......@@ -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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment