cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-21 06:59:09 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

cleanup

Browse Source
This commit is contained in:
cv
2021-04-20 12:16:43 +02:00
parent e566424738
commit 2f205bcb55
14 changed files with 291 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/common/components/myProgressBar/MyProgressBar.jsx
+1 -1
View File
@@ -3,7 +3,7 @@ import styles from './MyProgressBar.module.css';
export default function MyProgressBar(props) { export default function MyProgressBar(props) {
const { now, complete } = props; const { now, complete } = props;
const percentComplete = clamp((now * 100) / complete, 0, 100); const percentComplete = clamp((now * 100) / complete - 1, 0, 100);
return ( return (
<div className={styles.progress}> <div className={styles.progress}>
client/src/common/components/myProgressBar/MyProgressBar.module.css
+3 -3
View File
@@ -5,10 +5,10 @@
} }
.progressBar { .progressBar {
width: 30%; width: 100%;
height: 2vh; height: 2vh;
background-color: rgba(255, 255, 255, 0.79); background-color: rgba(255, 255, 255, 0.79);
border-radius: 4px; border-radius: 4px;
transition: 0.4s linear; transition: 1s linear;
transition-property: width, background-color; transition-property: width;
} }
client/src/common/components/text/NumberedText.module.css
+1 -1
View File
@@ -5,7 +5,7 @@
font-weight: 600; font-weight: 600;
background-color: #ff5b7e; background-color: #ff5b7e;
border: 1px solid rgba(255,255,255,0.47); border: 1px solid rgba(255,255,255,0.17);
width: 1.5em; width: 1.5em;
border-radius: 1em; border-radius: 1em;
client/src/features/editors/Editor.jsx
+127 -115
View File
@@ -1,5 +1,5 @@
import { IconButton } from '@chakra-ui/button'; import { IconButton } from '@chakra-ui/button';
import { FiSettings } from "react-icons/fi"; import { FiSettings } from 'react-icons/fi';
import { Grid, GridItem, Heading } from '@chakra-ui/layout'; import { Grid, GridItem, Heading } from '@chakra-ui/layout';
import { Box } from '@chakra-ui/layout'; import { Box } from '@chakra-ui/layout';
import NumberedText from '../../common/components/text/NumberedText'; import NumberedText from '../../common/components/text/NumberedText';
@@ -8,130 +8,142 @@ import MessageControl from '../control/MessageControl';
import PreviewContainer from '../viewers/PreviewContainer'; import PreviewContainer from '../viewers/PreviewContainer';
import styles from './Editor.module.css'; import styles from './Editor.module.css';
import EventListWrapper from './list/EventListWrapper'; import EventListWrapper from './list/EventListWrapper';
import { useDisclosure } from '@chakra-ui/hooks';
import SettingsModal from '../modals/SettingsModal';
export default function Editor() { export default function Editor() {
const { isOpen, onOpen, onClose } = useDisclosure();
return ( return (
<Grid <>
templateRows='1fr 1fr 1fr' <SettingsModal isOpen={isOpen} onClose={onClose} />
templateColumns='1fr 25vw 25vw 5vw'
gap={5}
className={styles.mainContainer}
>
<GridItem rowSpan={3}>
<Box className={styles.editor} borderRadius='0.5em'>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Event List
</Heading>
<NumberedText number={1} text={'Manage and select event to run'} />
<div className={styles.content}>
<EventListWrapper />
</div>
</Box>
</GridItem>
<GridItem colStart={2} rowStart={2} rowSpan={2} colSpan={2}> <Grid
<Box className={styles.editor} borderRadius='0.5em' overflowX='auto'> templateRows='1fr 1fr 1fr'
<Heading size='lg' style={{ paddingBottom: '0.25em' }}> templateColumns='1fr 25vw 25vw 5vw'
Preview Displays gap={5}
</Heading> className={styles.mainContainer}
<NumberedText number={4} text={'Realtime screen preview'} /> >
<div className={styles.content}> <GridItem rowSpan={3}>
<PreviewContainer /> <Box className={styles.editor} borderRadius='0.5em'>
</div> <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
</Box> Event List
</GridItem> </Heading>
<NumberedText number={1} text={'Manage and select event to run'} />
<div className={styles.content}>
<EventListWrapper />
</div>
</Box>
</GridItem>
<GridItem colStart={2} rowStart={1} rowSpan={1} colSpan={1}> <GridItem colStart={2} rowStart={2} rowSpan={2} colSpan={2}>
<Box className={styles.editor} borderRadius='0.5em'> <Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}> <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Display Messages Preview Displays
</Heading> </Heading>
<NumberedText <NumberedText number={4} text={'Realtime screen preview'} />
number={2} <div className={styles.content}>
text={'Show realtime messages on separate screen types'} <PreviewContainer />
/> </div>
<div className={styles.content}> </Box>
<MessageControl /> </GridItem>
</div>
</Box>
</GridItem>
<GridItem colStart={3} rowStart={1}> <GridItem colStart={2} rowStart={1} rowSpan={1} colSpan={1}>
<Box className={styles.editor} borderRadius='0.5em'> <Box className={styles.editor} borderRadius='0.5em'>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}> <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Time Control Display Messages
</Heading> </Heading>
<NumberedText number={3} text={'Control Timer'} /> <NumberedText
<div className={styles.content}> number={2}
<PlaybackControl /> text={'Show realtime messages on separate screen types'}
</div> />
</Box> <div className={styles.content}>
</GridItem> <MessageControl />
</div>
</Box>
</GridItem>
<GridItem colStart={4} rowSpan={3}> <GridItem colStart={3} rowStart={1}>
<Box className={styles.editor} borderRadius='0.5em'> <Box className={styles.editor} borderRadius='0.5em'>
<div <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
style={{ Time Control
display: 'flex', </Heading>
flexDirection: 'column', <NumberedText number={3} text={'Control Timer'} />
alignItems: 'center', <div className={styles.content}>
gap: '2em', <PlaybackControl />
paddingTop: '3em', </div>
}} </Box>
> </GridItem>
<IconButton icon={<FiSettings />} isRound variant='outline' />
<GridItem colStart={4} rowSpan={3}>
<Box className={styles.editor} borderRadius='0.5em'>
<div <div
style={{ style={{
width: 35, display: 'flex',
height: 35, flexDirection: 'column',
backgroundColor: '#3b8cd8', alignItems: 'center',
borderRadius: '50%', gap: '2em',
paddingTop: '3em',
}} }}
/> >
<div <IconButton
style={{ icon={<FiSettings />}
width: 35, isRound
height: 35, variant='outline'
backgroundColor: '#3182ce', onClick={onOpen}
borderRadius: '50%', />
}} <div
/> style={{
<div width: 35,
style={{ height: 35,
width: 35, backgroundColor: '#3b8cd8',
height: 35, borderRadius: '50%',
backgroundColor: '#2778c4', }}
borderRadius: '50%', />
}} <div
/> style={{
<div width: 35,
style={{ height: 35,
width: 35, backgroundColor: '#3182ce',
height: 35, borderRadius: '50%',
backgroundColor: '#1d6eba', }}
borderRadius: '50%', />
}} <div
/> style={{
<div width: 35,
style={{ height: 35,
width: 35, backgroundColor: '#2778c4',
height: 35, borderRadius: '50%',
backgroundColor: '#1364b0', }}
borderRadius: '50%', />
}} <div
/> style={{
<div width: 35,
style={{ height: 35,
width: 35, backgroundColor: '#1d6eba',
height: 35, borderRadius: '50%',
backgroundColor: '#095aa6', }}
borderRadius: '50%', />
}} <div
/> style={{
</div> width: 35,
</Box> height: 35,
</GridItem> backgroundColor: '#1364b0',
</Grid> borderRadius: '50%',
}}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#095aa6',
borderRadius: '50%',
}}
/>
</div>
</Box>
</GridItem>
</Grid>
</>
); );
} }
client/src/features/modals/SettingsModal.jsx
+1 -5
View File
@@ -164,11 +164,7 @@ export default function SettingsModal(props) {
> >
Save Save
</Button> </Button>
<Button <Button variant='ghost' onClick={onClose} disabled={submitting}>
variant='ghost'
onClick={onClose}
disabled={submitting}
>
Cancel Cancel
</Button> </Button>
</ModalFooter> </ModalFooter>
client/src/features/viewers/DefaultPresenter.jsx
+115 -48
View File
@@ -1,62 +1,129 @@
import { differenceInSeconds, format, subMinutes } from 'date-fns'; import { useEffect, useState } from 'react';
import addMinutes from 'date-fns/addMinutes'; import { useSocket } from '../../app/context/socketContext';
import { useContext, useEffect, useState } from 'react'; import style from './DefaultPresenter.module.css';
import { EventContext } from '../../app/context/eventContext';
import { PresenterMessagesContext } from '../../app/context/presenterMessageContext';
import Countdown from '../../common/components/countdown/Countdown';
import MyProgressBar from '../../common/components/myProgressBar/MyProgressBar';
import SmallTimer from '../../common/components/smallTimer/SmallTimer';
import './viewers.css';
export default function DefaultPresenter() { export default function DefaultPresenter() {
const [event] = useContext(EventContext); const socket = useSocket();
const [presMessage] = useContext(PresenterMessagesContext); const [pres, setPres] = useState({
const [initialValues, setInitialValues] = useState(null); text: '',
visible: false,
const now = new Date(); });
let values = event ?? { const [publ, setPubl] = useState({
title: 'Presentation Title', text: '',
subtitle: 'Presentation Subtitle', visible: false,
presenter: 'Presenter Name', });
timerDuration: 10, const [lower, setLower] = useState({
timeStart: now, text: '',
timeEnd: now, visible: false,
}; });
const [timer, setTimer] = useState({
clock: null,
currentSeconds: null,
startedAt: null,
expectedFinish: null,
});
const [titles, setTitles] = useState({
titleNow: '',
subtitleNow: '',
presenterNow: '',
titleNext: '',
subtitleNext: '',
presenterNext: '',
});
// Ask for update on load
useEffect(() => { useEffect(() => {
values = event; if (socket == null) return;
}, [event]);
useEffect(() => { // Handle presenter messages
setInitialValues(event); socket.on('messages-presenter', (data) => {
}, [event]); setPres({ ...data });
});
// NOTE: test only // Handle public messages
const clockStarted = addMinutes(now, 6); socket.on('messages-public', (data) => {
setPubl({ ...data });
});
const timer = differenceInSeconds( // Handle lower third messages
now, socket.on('messages-lower', (data) => {
subMinutes(clockStarted, values.duration) setLower({ ...data });
); });
const timeStart = format(values.timeStart, 'HH:mm'); // Handle timer
const currentTime = format(now, 'HH:mm'); socket.on('timer', (data) => {
const timeEnd = format(values.timeEnd, 'HH:mm'); setTimer({ ...data });
const elapsed = timer / (values.duration * 60); });
// Handle timer
socket.on('titles', (data) => {
setTitles({ ...data });
});
// Ask for up to date data
socket.emit('get-messages');
// Ask for up to data
socket.emit('get-presenter');
// Ask for up titles
socket.emit('get-titles');
// Clear listeners
return () => {
socket.off('messages-public');
socket.off('messages-presenter');
socket.off('messages-lower');
socket.off('timer');
socket.off('titles');
};
}, [socket]);
return ( return (
<div className='presenter'> <div className={style.mainContainer}>
<div className='presentationTitle'>{values.title}</div> <div className={style.container}>
<div className='presentationSub'>{values.subtitle}</div> <span className={style.label}>Clock: </span>
<Countdown time={timer} /> <span>{timer.clock}</span>
{!presMessage.show && <MyProgressBar normalisedComplete={elapsed} />} <span className={style.label}>Timer: </span>
<div className={presMessage.show ? 'userMessage' : 'userMessage hidden'}> <span>{timer.currentSeconds}</span>
{presMessage.text} <span className={style.label}>Started: </span>
<span>{timer.startedAt}</span>
<span className={style.label}>Finish: </span>
<span>{timer.expectedFinish}</span>
</div> </div>
<div className='extra'> <div className={style.container}>
<SmallTimer label='Scheduled Start' time={timeStart} /> <span className={style.label}>Presenter Message: </span>
<SmallTimer label='Current Time' time={currentTime} /> <span>{pres.text}</span>
<SmallTimer label='Scheduled End' time={timeEnd} /> <span className={style.label}>Vis: </span>
<span>{pres.visible ? 'visible' : 'invisible'}</span>
</div>
<div className={style.container}>
<span className={style.label}>Public Message: </span>
<span>{publ.text}</span>
<span className={style.label}>Vis: </span>
<span>{publ.visible ? 'visible' : 'invisible'}</span>
</div>
<div className={style.container}>
<span className={style.label}>Lower third Message: </span>
<span>{lower.text}</span>
<span className={style.label}>Vis: </span>
<span>{lower.visible ? 'visible' : 'invisible'}</span>
</div>
<div className={style.container}>
<span className={style.label}>Title Now: </span>
<span>{titles.titleNow}</span>
<span className={style.label}>Subtitle Now: </span>
<span>{titles.subtitleNow}</span>
<span className={style.label}>Presenter Now: </span>
<span>{titles.presenterNow}</span>
</div>
<div className={style.container}>
<span className={style.label}>Title Next: </span>
<span>{titles.titleNext}</span>
<span className={style.label}>Subtitle Next: </span>
<span>{titles.subtitleNext}</span>
<span className={style.label}>Presenter Next: </span>
<span>{titles.presenterNext}</span>
</div> </div>
</div> </div>
); );
client/src/features/viewers/DefaultPresenter.module.css
+18
View File
@@ -0,0 +1,18 @@
.mainContainer {
color: white;
display: flex;
flex-direction: rows;
flex-wrap: wrap;
font-size: 28px;
gap: 2em
}
.container {
flex: 1 0 56%;
display: flex;
}
.label {
padding: 0 1em;
color: #fff5;
}
client/src/features/viewers/backstage/Paginator.jsx
+2 -6
View File
@@ -1,7 +1,6 @@
import TodayItem from './TodayItem'; import TodayItem from './TodayItem';
import style from './Paginator.module.css'; import style from './Paginator.module.css';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useTimeout } from '../../../app/hooks/useTimeout';
import { useInterval } from '../../../app/hooks/useInterval'; import { useInterval } from '../../../app/hooks/useInterval';
export default function Paginator(props) { export default function Paginator(props) {
@@ -23,24 +22,19 @@ export default function Paginator(props) {
useEffect(() => { useEffect(() => {
if (events == null) return; if (events == null) return;
console.log('debug events', events);
// how many events in list // how many events in list
let n = events.length; let n = events.length;
setNumEvents(n); setNumEvents(n);
console.log('debug ne', n);
// how many paginated views // how many paginated views
let p = Math.ceil(n / LIMIT_PER_PAGE); let p = Math.ceil(n / LIMIT_PER_PAGE);
setPages(p); setPages(p);
console.log('debug np', p);
// divide events in parts of LIMIT_PER_PAGE // divide events in parts of LIMIT_PER_PAGE
const eventStart = LIMIT_PER_PAGE * selPage; const eventStart = LIMIT_PER_PAGE * selPage;
const eventEnd = LIMIT_PER_PAGE * (selPage + 1); const eventEnd = LIMIT_PER_PAGE * (selPage + 1);
let e = events.slice(eventStart, eventEnd); let e = events.slice(eventStart, eventEnd);
setPage(e); setPage(e);
console.log('debug show', e);
// if array is completely in past, show depending on SCROLL_PAST // if array is completely in past, show depending on SCROLL_PAST
}, [events, selPage]); }, [events, selPage]);
@@ -58,6 +52,7 @@ export default function Paginator(props) {
<div className={style.nav}> <div className={style.nav}>
{[...Array(pages)].map((p, i) => ( {[...Array(pages)].map((p, i) => (
<div <div
key={i}
className={i === selPage ? style.navItemSelected : style.navItem} className={i === selPage ? style.navItemSelected : style.navItem}
/> />
))} ))}
@@ -69,6 +64,7 @@ export default function Paginator(props) {
else if (selectedYet === 1) selectedYet = 2; else if (selectedYet === 1) selectedYet = 2;
return ( return (
<TodayItem <TodayItem
key={e.id}
selected={selectedYet} selected={selectedYet}
timeStart={e.timeStart} timeStart={e.timeStart}
timeEnd={e.timeEnd} timeEnd={e.timeEnd}
client/src/features/viewers/backstage/TodayItem.jsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function TodayItem(props) {
if (selected === 1) selectStyle = style.entryNow; if (selected === 1) selectStyle = style.entryNow;
else if (selected === 2) selectStyle = style.entryFuture; else if (selected === 2) selectStyle = style.entryFuture;
return ( return (
<div class={selectStyle}> <div className={selectStyle}>
<div className={style.entryStart}>{start}</div> <div className={style.entryStart}>{start}</div>
<div className={style.entryEnd}>{end}</div> <div className={style.entryEnd}>{end}</div>
<div className={style.entryTitle}>{title}</div> <div className={style.entryTitle}>{title}</div>
client/src/features/viewers/presenter/PresenterView.module.css
+3 -2
View File
@@ -1,7 +1,6 @@
.container__gray, .container__gray,
.container__grayFinished { .container__grayFinished {
margin: 0; margin: 0;
padding: 0;
box-sizing: border-box; /* reset */ box-sizing: border-box; /* reset */
overflow: hidden; overflow: hidden;
width: 100%; /* restrict the page width to viewport */ width: 100%; /* restrict the page width to viewport */
@@ -113,7 +112,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.85); background-color: rgba(0, 0, 0, 0.85);
z-index: 2; z-index: -1;
opacity: 0; opacity: 0;
transition: 0.5s; transition: 0.5s;
} }
@@ -121,6 +120,8 @@
.messageOverlayActive { .messageOverlayActive {
opacity: 1; opacity: 1;
transition: 0.5s; transition: 0.5s;
transition-property: opacity;
z-index: 2;
} }
.message { .message {
client/src/index.js
+2 -1
View File
@@ -6,12 +6,13 @@ import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';
// 1. import `ChakraProvider` component // 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'; import { ChakraProvider, CSSReset } from '@chakra-ui/react';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<ChakraProvider> <ChakraProvider>
<BrowserRouter> <BrowserRouter>
<CSSReset />
<App /> <App />
</BrowserRouter> </BrowserRouter>
</ChakraProvider> </ChakraProvider>
server/controllers/eventsController.js
+1 -8
View File
@@ -109,7 +109,6 @@ exports.eventsPost = async (req, res) => {
res.sendStatus(201); res.sendStatus(201);
} catch (error) { } catch (error) {
res.status(400).send(error); res.status(400).send(error);
console.log('debug', error);
} }
}; };
@@ -119,19 +118,14 @@ exports.eventsPut = async (req, res) => {
// no valid params // no valid params
if (!req.body) { if (!req.body) {
res.status(400).send(`No object found`); res.status(400).send(`No object found`);
console.log('error here', 'noobj');
return; return;
} }
let eventId = req.body.id; let eventId = req.body.id;
if (!eventId) { if (!eventId) {
res.status(400).send(`No id found`); res.status(400).send(`Object malformed: id missing`);
console.log('error here', 'noid');
return; return;
} }
try { try {
db.get('events') db.get('events')
.find({ id: req.body.id }) .find({ id: req.body.id })
@@ -141,7 +135,6 @@ exports.eventsPut = async (req, res) => {
.then(res.sendStatus(200)); .then(res.sendStatus(200));
} catch (error) { } catch (error) {
res.status(400).send(error); res.status(400).send(error);
console.log('error here', error);
} }
}; };
server/data/dataModel.json
+14 -1
View File
@@ -1,3 +1,16 @@
{ {
"events": [] "events": [],
"event": {
"title": "",
"url": "",
"publicInfo": "",
"backStageInfo": ""
},
"settings": {
"app": "ontime",
"version": 1,
"osc_enabled": false,
"osc_port": 8008,
"lock": false
}
} }
server/routes/eventsRouter.js
+2 -2
View File
@@ -1,8 +1,8 @@
const express = require('express'); const express = require('express');
const router = express.Router(); const router = express.Router();
// import playback controller // import events controller
const eventsController = require('../controllers/eventsController'); const eventsController = require('../controllers/eventsController');
// create route between controller and '/events' endpoint // create route between controller and '/events' endpoint
router.get('/', eventsController.eventsGetAll); router.get('/', eventsController.eventsGetAll);