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

performance enhancements

Browse Source
This commit is contained in:
cv
2021-05-02 15:05:32 +02:00
parent 7f94907056
commit 9715e13152
11 changed files with 137 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/common/components/countdown/Countdown.jsx
+5 -4
View File
@@ -1,9 +1,8 @@
import { useEffect, useState } from 'react';
import { memo, useEffect, useState } from 'react';
import { formatDisplay } from '../../dateConfig';
import styles from './Countdown.module.css';
export default function Countdown(props) {
const { time, small, hideZeroHours } = props;
const Countdown = ({ time, small, hideZeroHours }) => {
const [clock, setClock] = useState(time);
let display = '-- : -- : --';
@@ -20,4 +19,6 @@ export default function Countdown(props) {
{display}
</div>
);
}
};
export default memo(Countdown);
client/src/common/components/views/Paginator.module.css
-2
View File
@@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
.entries {
display: flex;
flex-direction: column;
client/src/features/control/PlaybackButtons.jsx
+73
View File
@@ -0,0 +1,73 @@
import { memo } from 'react';
import style from './PlaybackControl.module.css';
import StartIconBtn from '../../common/components/buttons/StartIconBtn';
import PauseIconBtn from '../../common/components/buttons/PauseIconBtn';
import PrevIconBtn from '../../common/components/buttons/PrevIconBtn';
import NextIconBtn from '../../common/components/buttons/NextIconBtn';
import RollIconBtn from '../../common/components/buttons/RollIconBtn';
import UnloadIconBtn from '../../common/components/buttons/UnloadIconBtn';
import ReloadIconButton from '../../common/components/buttons/ReloadIconBtn';
const areEqual = (prevProps, nextProps) => {
return (
prevProps.playback === nextProps.playback &&
prevProps.selectedId === nextProps.selectedId
);
};
const Playback = ({ playback, selectedId, playbackControl }) => {
return (
<div className={style.playbackContainer}>
<StartIconBtn
active={playback === 'start'}
clickhandler={() => playbackControl('start')}
disabled={!selectedId}
/>
<PauseIconBtn
active={playback === 'pause'}
clickhandler={() => playbackControl('pause')}
disabled={!selectedId}
/>
<RollIconBtn
active={playback === 'roll'}
clickhandler={() => playbackControl('roll')}
/>
</div>
);
};
const Transport = ({ selectedId, playbackControl }) => {
return (
<div className={style.playbackContainer}>
<PrevIconBtn clickhandler={() => playbackControl('previous')} />
<NextIconBtn clickhandler={() => playbackControl('next')} />
<UnloadIconBtn
clickhandler={() => playbackControl('unload')}
disabled={!selectedId}
/>
<ReloadIconButton
clickhandler={() => playbackControl('reload')}
disabled={!selectedId}
/>
</div>
);
};
const PlaybackButtons = (props) => {
const { playback, selectedId } = props;
return (
<>
<Playback
playback={playback}
selectedId={selectedId}
playbackControl={props.playbackControl}
/>
<Transport
selectedId={selectedId}
playbackControl={props.playbackControl}
/>
</>
);
};
export default memo(PlaybackButtons, areEqual);
client/src/features/control/PlaybackControl.jsx
+6 -36
View File
@@ -4,13 +4,7 @@ import { stringFromMillis } from '../../common/dateConfig';
import { useEffect, useState } from 'react';
import { useSocket } from '../../app/context/socketContext';
import { Button } from '@chakra-ui/button';
import StartIconBtn from '../../common/components/buttons/StartIconBtn';
import PauseIconBtn from '../../common/components/buttons/PauseIconBtn';
import PrevIconBtn from '../../common/components/buttons/PrevIconBtn';
import NextIconBtn from '../../common/components/buttons/NextIconBtn';
import RollIconBtn from '../../common/components/buttons/RollIconBtn';
import UnloadIconBtn from '../../common/components/buttons/UnloadIconBtn';
import ReloadIconButton from '../../common/components/buttons/ReloadIconBtn';
import PlaybackButtons from './PlaybackButtons';
export default function PlaybackControl() {
const socket = useSocket();
@@ -146,35 +140,11 @@ export default function PlaybackControl() {
</Button>
</div>
</div>
<div className={style.playbackContainer}>
<StartIconBtn
active={playback === 'start'}
clickhandler={() => playbackControl('start')}
disabled={!selectedId}
/>
<PauseIconBtn
active={playback === 'pause'}
clickhandler={() => playbackControl('pause')}
disabled={!selectedId}
/>
<RollIconBtn
active={playback === 'roll'}
clickhandler={() => playbackControl('roll')}
/>
</div>
<div className={style.playbackContainer}>
<PrevIconBtn clickhandler={() => playbackControl('previous')} />
<NextIconBtn clickhandler={() => playbackControl('next')} />
<UnloadIconBtn
clickhandler={() => playbackControl('unload')}
disabled={!selectedId}
/>
<ReloadIconButton
clickhandler={() => playbackControl('reload')}
disabled={!selectedId}
/>
</div>
<PlaybackButtons
playback={playback}
selectedId={selectedId}
playbackControl={playbackControl}
/>
</div>
);
}
client/src/features/editors/Editor.jsx
+1 -1
View File
@@ -40,7 +40,7 @@ export default function Editor() {
</Heading>
<NumberedText number={4} text={'Realtime screen preview'} />
<div className={styles.content}>
<PreviewContainer />
{/* <PreviewContainer /> */}
</div>
</Box>
client/src/features/editors/list/EventBlock.jsx
+30 -12
View File
@@ -1,5 +1,5 @@
import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi';
import { useState } from 'react';
import { memo, useEffect, useState } from 'react';
import EventTimes from '../../../common/components/eventTimes/EventTimes';
import { showErrorToast } from '../../../common/helpers/toastManager';
import style from './Block.module.css';
@@ -9,13 +9,30 @@ import ActionButtons from './ActionButtons';
import VisibleIconBtn from '../../../common/components/buttons/VisibleIconBtn';
import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
export default function EventBlock(props) {
const areEqual = (prevProps, nextProps) => {
let shouldNotRerender =
prevProps.data.revision === nextProps.data.revision &&
prevProps.selected === nextProps.selected &&
prevProps.next === nextProps.next;
console.log('debug memo2', shouldNotRerender);
return (
prevProps.data.revision === nextProps.data.revision &&
prevProps.selected === nextProps.selected &&
prevProps.next === nextProps.next
);
};
const EventBlock = (props) => {
const { data, selected, next, delay, index, eventsHandler } = props;
const [more, setMore] = useState(false);
// NOTE: cheating to add responsiveness
const [visible, setVisible] = useState(data.isPublic || false);
// Set visibility indicator
useEffect(() => {
setVisible(data.isPublic);
}, [data.isPublic]);
const updateValues = (field, value) => {
// validate field
if (field in data) {
@@ -56,7 +73,6 @@ export default function EventBlock(props) {
const handleVisibleToggle = () => {
let viz = !data.isPublic || !visible;
setVisible(viz);
updateValues('isPublic', viz);
};
@@ -85,13 +101,6 @@ export default function EventBlock(props) {
submitHandler={handleTitleSubmit}
underlined
/>
<EditableText
label='Subtitle'
defaultValue={data.subtitle}
placeholder='Add Subtitle'
submitHandler={handleSubtitleSubmit}
underlined
/>
<EditableText
label='Presenter'
defaultValue={data.presenter}
@@ -99,6 +108,13 @@ export default function EventBlock(props) {
submitHandler={handlePresenterSubmit}
underlined
/>
<EditableText
label='Subtitle'
defaultValue={data.subtitle}
placeholder='Add Subtitle'
submitHandler={handleSubtitleSubmit}
underlined
/>
</div>
) : (
<div className={style.titleContainer}>
@@ -129,4 +145,6 @@ export default function EventBlock(props) {
</div>
</div>
);
}
};
export default memo(EventBlock, areEqual);
client/src/features/editors/list/EventList.jsx
+3 -3
View File
@@ -1,6 +1,6 @@
import style from './List.module.css';
import { useEffect, useState } from 'react';
import { Fragment, useEffect, useState } from 'react';
import { useSocket } from '../../../app/context/socketContext';
import tinykeys from 'tinykeys';
import Empty from '../../../common/state/Empty';
@@ -111,7 +111,7 @@ export default function EventList(props) {
if (e.type === 'delay') cumulativeDelay += e.duration;
else if (e.type === 'block') cumulativeDelay = 0;
return (
<div key={index}>
<Fragment key={index}>
<EventListItem
type={e.type}
index={index}
@@ -132,7 +132,7 @@ export default function EventList(props) {
/>
)}
</AnimatePresence>
</div>
</Fragment>
);
})}
</div>
client/src/features/menu/EventListMenu.jsx
+9 -5
View File
@@ -1,3 +1,4 @@
import { memo, useCallback } from 'react';
import { FiChevronDown } from 'react-icons/fi';
import {
Button,
@@ -9,9 +10,9 @@ import {
} from '@chakra-ui/react';
import AddIconBtn from '../../common/components/buttons/AddIconBtn';
import style from './EventListMenu.module.css';
import MenuActionButtons from '../editors/list/MenuActionButtons';
export default function EventListMenu(props) {
const { eventsHandler } = props;
const EventListMenu = ({ eventsHandler }) => {
const buttonProps = {
size: 'sm',
variant: 'outline',
@@ -27,9 +28,9 @@ export default function EventListMenu(props) {
backgroundColor: 'rgba(255,255,255,0.67)',
};
const addHandler = () => {
const addHandler = useCallback(() => {
eventsHandler('add', { type: 'event', order: 0 });
};
}, [eventsHandler]);
return (
<div className={style.headerButtons}>
@@ -58,6 +59,9 @@ export default function EventListMenu(props) {
</MenuList>
</Menu>
<AddIconBtn clickhandler={addHandler} size='sm' />
{/* <MenuActionButtons size='sm' /> */}
</div>
);
}
};
export default memo(EventListMenu);
server/classes/EventTimer.js
+7
View File
@@ -1,5 +1,7 @@
const Timer = require('./Timer');
const socketIo = require('socket.io');
// DEBUG
const { instrument } = require("@socket.io/admin-ui");
/*
* EventTimer adds functions specific to APP
@@ -71,6 +73,11 @@ class EventTimer extends Timer {
},
});
// DEBUG
instrument(this.io, {
auth: false
});
// set recurrent emits
this._interval = setInterval(
() => this.broadcastTimer(),
server/controllers/eventsController.js
+2
View File
@@ -14,6 +14,7 @@ function incrementFrom(start, incr = 1) {
db.get('events')
.find({ id: e.id })
.assign({ order: e.order + incr })
.update('revision', (n) => n + 1)
.write();
});
}
@@ -163,6 +164,7 @@ exports.eventsPatch = async (req, res) => {
db.get('events')
.find({ id: req.body.id })
.assign({ ...req.body })
.update('revision', (n) => n + 1)
.write();
// update timer
server/data/eventsDefinition.js
+1
View File
@@ -7,6 +7,7 @@ const event = {
timeEnd: 0,
isPublic: false,
type: 'event',
revision: 0,
};
const delay = {