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

v2 lazy rundown (#317)

Browse Source 
* chore: update related deps

* refactor: memoise entrypoints

* refactor: store selectors

* refactor: improve component performance

* chore: remove unused dependencies

* refactor: improve component dnd
This commit is contained in:
Carlos Valente
2023-03-30 21:22:36 +02:00
committed by GitHub
parent 03d5389540
commit 9338a615d4
27 changed files with 701 additions and 698 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/package.json
+2 -4
View File
@@ -4,8 +4,8 @@
"private": true,
"dependencies": {
"@chakra-ui/react": "^2.5.1",
"@dnd-kit/core": "^6.0.6",
"@dnd-kit/sortable": "^7.0.1",
"@dnd-kit/core": "^6.0.8",
"@dnd-kit/sortable": "^7.0.2",
"@dnd-kit/utilities": "^3.2.1",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
@@ -22,7 +22,6 @@
"framer-motion": "^8.0.2",
"luxon": "^3.3.0",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^18.2.0",
"react-fast-compare": "^3.2.0",
"react-hook-form": "^7.43.5",
@@ -67,7 +66,6 @@
"@types/luxon": "^3.2.0",
"@types/prop-types": "^15.7.5",
"@types/react": "^18.0.26",
"@types/react-beautiful-dnd": "^13.1.3",
"@types/react-dom": "^18.0.10",
"@types/testing-library__jest-dom": "^5.14.5",
"@typescript-eslint/eslint-plugin": "^5.48.1",
apps/client/src/common/context/CursorContext.tsx
-85
View File
@@ -1,85 +0,0 @@
import { createContext, ReactNode, useCallback, useMemo, useState } from 'react';
import { useLocalStorage } from '../hooks/useLocalStorage';
interface CursorContextState {
cursor: number;
isCursorLocked: boolean;
toggleCursorLocked: (newValue?: boolean) => void;
setCursor: (index: number) => void;
moveCursorUp: () => void;
moveCursorDown: () => void;
moveCursorTo: (index: number) => void;
}
export const CursorContext = createContext<CursorContextState>({
cursor: 0,
isCursorLocked: false,
toggleCursorLocked: () => undefined,
setCursor: () => undefined,
moveCursorUp: () => undefined,
moveCursorDown: () => undefined,
moveCursorTo: () => undefined,
});
interface CursorProviderProps {
children: ReactNode
}
export const CursorProvider = ({ children }: CursorProviderProps) => {
const [cursor, setCursor] = useState(0);
const [_cursorLocked, _setCursorLocked] = useLocalStorage('isCursorLocked', 'locked');
const isCursorLocked = useMemo(() => _cursorLocked === 'locked', [_cursorLocked]);
const cursorLockedOff = useCallback(() => _setCursorLocked('unlocked'), [_setCursorLocked]);
const cursorLockedOn = useCallback(() => _setCursorLocked('locked'), [_setCursorLocked]);
const moveCursorUp = useCallback(() => {
setCursor((prev) => Math.max(prev - 1, 0));
}, []);
const moveCursorDown = useCallback(() => {
setCursor((prev) => prev + 1);
}, []);
/**
* @param {boolean | undefined} newValue
*/
const toggleCursorLocked = useCallback(
(newValue?: boolean) => {
if (typeof newValue === 'undefined') {
if (isCursorLocked) {
cursorLockedOff();
} else {
cursorLockedOn();
}
} else if (!newValue) {
cursorLockedOff();
} else if (newValue) {
cursorLockedOn();
}
},
[cursorLockedOff, cursorLockedOn, isCursorLocked]
);
// moves cursor to given index
const moveCursorTo = useCallback((index: number) => {
setCursor(index);
}, []);
return (
<CursorContext.Provider
value={{
cursor,
isCursorLocked,
toggleCursorLocked,
setCursor,
moveCursorUp,
moveCursorDown,
moveCursorTo,
}}
>
{children}
</CursorContext.Provider>
);
};
apps/client/src/common/hooks/useEventAction.ts
+1 -1
View File
@@ -22,7 +22,7 @@ import { useEmitLog } from '../stores/logger';
export const useEventAction = () => {
const queryClient = useQueryClient();
const { emitError } = useEmitLog();
const { eventSettings } = useLocalEvent();
const eventSettings = useLocalEvent((state) => state.eventSettings);
const defaultPublic = eventSettings.defaultPublic;
const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
apps/client/src/common/stores/cursorStore.ts
+24
View File
@@ -0,0 +1,24 @@
import { create } from 'zustand';
import { booleanFromLocalStorage } from '../utils/localStorage';
type CursorStore = {
cursor: number;
isCursorLocked: boolean;
toggleCursorLocked: (newValue?: boolean) => void;
moveCursorTo: (index: number) => void;
};
const cursorLockedKey = 'ontime-cursor-islocked';
export const useCursor = create<CursorStore>()((set) => ({
cursor: 0,
isCursorLocked: booleanFromLocalStorage(cursorLockedKey, false),
toggleCursorLocked: (newValue?: boolean) =>
set((state) => {
const val = typeof newValue === 'undefined' ? !state.isCursorLocked : newValue;
localStorage.setItem(cursorLockedKey, String(val));
return { isCursorLocked: val };
}),
moveCursorTo: (index: number) => set(() => ({ cursor: index })),
}));
apps/client/src/features/control/message/MessageControlExport.jsx
+6 -3
View File
@@ -1,3 +1,4 @@
import { memo } from 'react';
import { Box } from '@chakra-ui/react';
import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
@@ -8,9 +9,9 @@ import MessageControl from './MessageControl';
import style from '../../editors/Editor.module.scss';
export default function MessageControlExport() {
const MessageControlExport = () => {
return (
<Box className={style.messages} data-testid="panel-messages-control">
<Box className={style.messages} data-testid='panel-messages-control'>
<IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'messagecontrol')} />
<div className={style.content}>
<ErrorBoundary>
@@ -19,4 +20,6 @@ export default function MessageControlExport() {
</div>
</Box>
);
}
};
export default memo(MessageControlExport);
apps/client/src/features/control/playback/TimerControlExport.tsx
+5 -2
View File
@@ -1,3 +1,4 @@
import { memo } from 'react';
import { Box } from '@chakra-ui/react';
import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
@@ -8,7 +9,7 @@ import PlaybackControl from './PlaybackControl';
import style from '../../editors/Editor.module.scss';
export default function TimerControlExport() {
const TimerControlExport = () => {
return (
<Box className={style.playback} data-testid='panel-timer-control'>
<IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'timercontrol')} />
@@ -19,4 +20,6 @@ export default function TimerControlExport() {
</div>
</Box>
);
}
};
export default memo(TimerControlExport);
apps/client/src/features/event-editor/EventEditorExport.tsx
+6 -2
View File
@@ -1,3 +1,4 @@
import { memo } from 'react';
import { Box, IconButton } from '@chakra-ui/react';
import { FiX } from '@react-icons/all-files/fi/FiX';
@@ -16,7 +17,7 @@ const closeBtnStyle = {
_hover: { bg: '#ebedf0', color: '#333' },
};
export default function InfoExport() {
const EventEditorExport = () => {
const { openId, removeOpenEvent } = useEventEditorStore();
return (
@@ -31,4 +32,7 @@ export default function InfoExport() {
</ErrorBoundary>
</Box>
);
}
};
export default memo(EventEditorExport);
apps/client/src/features/info/InfoExport.tsx
+5 -2
View File
@@ -1,3 +1,4 @@
import { memo } from 'react';
import { Box } from '@chakra-ui/react';
import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
@@ -8,9 +9,9 @@ import Info from './Info';
import style from '../editors/Editor.module.scss';
export default function InfoExport() {
const InfoExport = () => {
return (
<Box className={style.info} data-testid="panel-info">
<Box className={style.info} data-testid='panel-info'>
<IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'info')} />
<div className={style.content}>
<ErrorBoundary>
@@ -20,3 +21,5 @@ export default function InfoExport() {
</Box>
);
}
export default memo(InfoExport)
apps/client/src/features/menu/RundownMenu.tsx
+26 -35
View File
@@ -1,4 +1,4 @@
import { memo, useCallback, useContext } from 'react';
import { memo, useCallback } from 'react';
import { Button, HStack, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Switch } from '@chakra-ui/react';
import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
import { FiTrash2 } from '@react-icons/all-files/fi/FiTrash2';
@@ -6,36 +6,32 @@ import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
import { IoTimerOutline } from '@react-icons/all-files/io5/IoTimerOutline';
import { SupportedEvent } from 'ontime-types';
import { CursorContext } from '../../common/context/CursorContext';
import { useEventAction } from '../../common/hooks/useEventAction';
import { useCursor } from '../../common/stores/cursorStore';
import style from './RundownMenu.module.scss';
const RundownMenu = () => {
const { isCursorLocked, toggleCursorLocked } = useContext(CursorContext);
const isCursorLocked = useCursor((state) => state.isCursorLocked);
const toggleCursorLocked = useCursor((state) => state.toggleCursorLocked);
const { addEvent, deleteAllEvents } = useEventAction();
// TODO: re-write this with stable functions
type ActionTypes = SupportedEvent | 'delete-all';
const eventAction = useCallback(
(action: ActionTypes) => {
switch (action) {
case SupportedEvent.Event:
addEvent({ type: action });
break;
case SupportedEvent.Delay:
addEvent({ type: action });
break;
case SupportedEvent.Block:
addEvent({ type: action });
break;
case 'delete-all':
deleteAllEvents();
break;
}
},
[addEvent, deleteAllEvents],
);
const newEvent = useCallback(() => {
addEvent({ type: SupportedEvent.Event });
}, [addEvent]);
const newBlock = useCallback(() => {
addEvent({ type: SupportedEvent.Block });
}, [addEvent]);
const newDelay = useCallback(() => {
addEvent({ type: SupportedEvent.Delay });
}, [addEvent]);
const deleteAll = useCallback(() => {
deleteAllEvents();
}, [deleteAllEvents]);
return (
<HStack className={style.headerButtons}>
@@ -45,29 +41,24 @@ const RundownMenu = () => {
onChange={(event) => toggleCursorLocked(event.target.checked)}
variant='ontime'
/>
Lock cursor to current
Follow loaded event
</label>
<Menu isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
<MenuButton
as={Button}
leftIcon={<IoAdd />}
size='sm'
variant='ontime-subtle'
>
<MenuButton as={Button} leftIcon={<IoAdd />} size='sm' variant='ontime-subtle'>
Event...
</MenuButton>
<MenuList>
<MenuItem icon={<IoAdd />} onClick={() => eventAction(SupportedEvent.Event)}>
<MenuItem icon={<IoAdd />} onClick={newEvent}>
Add event at start
</MenuItem>
<MenuItem icon={<IoTimerOutline />} onClick={() => eventAction(SupportedEvent.Delay)}>
<MenuItem icon={<IoTimerOutline />} onClick={newDelay}>
Add delay at start
</MenuItem>
<MenuItem icon={<FiMinusCircle />} onClick={() => eventAction(SupportedEvent.Block)}>
<MenuItem icon={<FiMinusCircle />} onClick={newBlock}>
Add block at start
</MenuItem>
<MenuDivider />
<MenuItem icon={<FiTrash2 />} onClick={() => eventAction('delete-all')} color='#D20300'>
<MenuItem icon={<FiTrash2 />} onClick={deleteAll} color='#D20300'>
Delete all events
</MenuItem>
</MenuList>
apps/client/src/features/modals/AppSettingsModal.jsx
+3 -1
View File
@@ -37,7 +37,9 @@ export default function AppSettingsModal() {
const [submitting, setSubmitting] = useState(false);
const [hidePin, setHidePin] = useState(true);
const { eventSettings, setLocalEventSettings } = useLocalEvent();
const eventSettings = useLocalEvent((state) => state.eventSettings);
const setLocalEventSettings = useLocalEvent((state) => state.setLocalEventSettings);
const [formSettings, setFormSettings] = useState(eventSettings);
const [updateMessage, setUpdateMessage] = useState(<a>Using ontime version: {version}</a>);
apps/client/src/features/rundown/Rundown.module.scss
+1
View File
@@ -9,6 +9,7 @@
}
.list {
overflow-x: clip;
display: flex;
flex-direction: column;
}
apps/client/src/features/rundown/Rundown.tsx
+110 -108
View File
@@ -1,17 +1,16 @@
import { createRef, Fragment, useCallback, useContext, useEffect } from 'react';
import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
import { Button } from '@chakra-ui/react';
import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
import { useCallback, useEffect, useRef, useState } from 'react';
import { closestCenter, DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { OntimeRundown, SupportedEvent } from 'ontime-types';
import Empty from '../../common/components/state/Empty';
import { CursorContext } from '../../common/context/CursorContext';
import { useEventAction } from '../../common/hooks/useEventAction';
import { useRundownEditor } from '../../common/hooks/useSocket';
import { useCursor } from '../../common/stores/cursorStore';
import { useLocalEvent } from '../../common/stores/localEvent';
import { cloneEvent } from '../../common/utils/eventsManager';
import QuickAddBlock from './quick-add-block/QuickAddBlock';
import RundownEmpty from './RundownEmpty';
import RundownEntry from './RundownEntry';
import style from './Rundown.module.scss';
@@ -22,16 +21,24 @@ interface RundownProps {
export default function Rundown(props: RundownProps) {
const { entries } = props;
const data = useRundownEditor();
const { cursor, moveCursorUp, moveCursorDown, moveCursorTo, isCursorLocked } = useContext(CursorContext);
const { addEvent, reorderEvent } = useEventAction();
const cursorRef = createRef<HTMLDivElement>();
const [statefulEntries, setStatefulEntries] = useState(entries);
const { eventSettings } = useLocalEvent();
const featureData = useRundownEditor();
const { addEvent, reorderEvent } = useEventAction();
const eventSettings = useLocalEvent((state) => state.eventSettings);
const defaultPublic = eventSettings.defaultPublic;
const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
const showQuickEntry = eventSettings.showQuickEntry;
// cursor
const cursor = useCursor((state) => state.cursor);
const isCursorLocked = useCursor((state) => state.isCursorLocked);
const moveCursorTo = useCursor((state) => state.moveCursorTo);
const cursorRef = useRef<HTMLDivElement>();
// DND KIT
const sensors = useSensors(useSensor(PointerSensor));
const insertAtCursor = useCallback(
(type: SupportedEvent | 'clone', cursor: number) => {
if (cursor === -1) {
@@ -78,11 +85,11 @@ export default function Rundown(props: RundownProps) {
if (event.altKey && (!event.ctrlKey || !event.shiftKey)) {
switch (event.code) {
case 'ArrowDown': {
if (cursor < entries.length - 1) moveCursorDown();
if (cursor < entries.length - 1) moveCursorTo(cursor + 1);
break;
}
case 'ArrowUp': {
if (cursor > 0) moveCursorUp();
if (cursor > 0) moveCursorTo(cursor - 1);
break;
}
case 'KeyE': {
@@ -112,25 +119,35 @@ export default function Rundown(props: RundownProps) {
}
}
},
[cursor, entries.length, insertAtCursor, moveCursorDown, moveCursorUp],
[cursor, entries.length, insertAtCursor, moveCursorTo],
);
// we copy the state from the store here
// to workaround async updates on the drag mutations
useEffect(() => {
if (entries) {
setStatefulEntries(entries);
}
}, [entries]);
// listen to keys
useEffect(() => {
// attach the event listener
document.addEventListener('keydown', handleKeyPress);
if (cursor > entries.length - 1) moveCursorTo(entries.length - 1);
if (entries.length > 0 && cursor === -1) moveCursorTo(0);
// remove the event listener
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, [handleKeyPress, cursor, entries, moveCursorTo]);
}, [handleKeyPress]);
// when cursor moves, view should follow
useEffect(() => {
if (cursorRef.current == null) return;
if (!cursorRef?.current) return;
// using start in block parameter causes jumpy behaviour
// could alternatively scroll using scrollTo and
// calculate position within a range
// if the item is near the top half, we are ok
// otherwise scroll difference
cursorRef.current.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
@@ -142,120 +159,105 @@ export default function Rundown(props: RundownProps) {
// or cursor settings changed
useEffect(() => {
// and if we are locked
if (!isCursorLocked || !data?.selectedEventId) {
if (!isCursorLocked || !featureData?.selectedEventId) {
return;
}
// move cursor
let gotoIndex = -1;
let found = false;
for (const e of entries) {
for (const entry of entries) {
gotoIndex++;
if (e.id === data.selectedEventId) {
if (entry.id === featureData.selectedEventId) {
found = true;
break;
}
}
if (found) {
// move cursor
moveCursorTo(gotoIndex);
}
}, [data?.selectedEventId, entries, isCursorLocked, moveCursorTo]);
}, [featureData?.selectedEventId, entries, isCursorLocked, moveCursorTo]);
const handleOnDragEnd = useCallback(
(result: DropResult) => {
// drop outside of area
if (!result?.destination) return;
const handleOnDragEnd = (event: DragEndEvent) => {
const { active, over } = event;
// no change
if (result.destination.index === result.source.index) return;
// Call API
reorderEvent(result.draggableId, result.source.index, result.destination.index);
},
[reorderEvent],
);
if (over?.id) {
if (active.id !== over?.id) {
const fromIndex = active.data.current?.sortable.index;
const toIndex = over.data.current?.sortable.index;
// ugly hack to handle inconsistencies between dnd-kit and async store updates
setStatefulEntries((currentEntries) => {
return arrayMove(currentEntries, fromIndex, toIndex);
});
reorderEvent(String(active.id), fromIndex, toIndex);
}
}
};
if (!entries.length) {
return (
<div className={style.alignCenter}>
<Empty text='No data yet' style={{ marginTop: '7vh' }} />
<Button
onClick={() => insertAtCursor(SupportedEvent.Event, -1)}
variant='ontime-filled'
className={style.spaceTop}
leftIcon={<IoAdd />}
>
Create Event
</Button>
</div>
);
return <RundownEmpty handleAddNew={() => insertAtCursor(SupportedEvent.Event, -1)} />;
}
let cumulativeDelay = 0;
let eventIndex = -1;
let previousEnd = 0;
let thisEnd = 0;
let previousEventId: string | undefined;
let eventIndex = -1;
return (
<div className={style.eventContainer}>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId='eventlist'>
{(provided) => (
<div className={style.list} {...provided.droppableProps} ref={provided.innerRef}>
{entries.map((entry, index) => {
if (index === 0) {
cumulativeDelay = 0;
eventIndex = -1;
}
if (entry.type === 'delay' && entry.duration != null) {
cumulativeDelay += entry.duration;
} else if (entry.type === 'block') {
cumulativeDelay = 0;
} else if (entry.type === 'event') {
eventIndex++;
previousEnd = thisEnd;
thisEnd = entry.timeEnd;
previousEventId = entry.id;
}
const isLast = index === entries.length - 1;
const isSelected = data?.selectedEventId === entry.id;
const isNext = data?.nextEventId === entry.id;
<DndContext onDragEnd={handleOnDragEnd} sensors={sensors} collisionDetection={closestCenter}>
<SortableContext items={statefulEntries} strategy={verticalListSortingStrategy}>
<div className={style.list}>
{statefulEntries.map((entry, index) => {
if (index === 0) {
cumulativeDelay = 0;
eventIndex = -1;
}
if (entry.type === SupportedEvent.Delay && entry.duration !== null) {
cumulativeDelay += entry.duration;
} else if (entry.type === SupportedEvent.Block) {
cumulativeDelay = 0;
} else if (entry.type === SupportedEvent.Event) {
eventIndex++;
previousEnd = thisEnd;
thisEnd = entry.timeEnd;
previousEventId = entry.id;
}
const isLast = index === entries.length - 1;
const isSelected = featureData?.selectedEventId === entry.id;
const isNext = featureData?.nextEventId === entry.id;
return (
<Fragment key={entry.id}>
<div ref={cursor === index ? cursorRef : undefined}>
<RundownEntry
type={entry.type}
index={index}
eventIndex={eventIndex}
data={entry}
selected={isSelected}
hasCursor={cursor === index}
next={isNext}
delay={cumulativeDelay}
previousEnd={previousEnd}
previousEventId={previousEventId}
playback={isSelected ? data.playback || undefined : undefined}
/>
</div>
{((showQuickEntry && index === cursor) || isLast) && (
<QuickAddBlock
showKbd={index === cursor}
eventId={entry.id}
previousEventId={previousEventId}
disableAddDelay={entry.type === 'delay'}
disableAddBlock={entry.type === 'block'}
/>
)}
</Fragment>
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
return (
<div key={entry.id} ref={cursor === index ? cursorRef : undefined}>
<RundownEntry
type={entry.type}
index={index}
eventIndex={eventIndex}
data={entry}
selected={isSelected}
hasCursor={cursor === index}
next={isNext}
delay={cumulativeDelay}
previousEnd={previousEnd}
previousEventId={previousEventId}
playback={isSelected ? featureData.playback : undefined}
/>
{((showQuickEntry && index === cursor) || isLast) && (
<QuickAddBlock
showKbd={false}
eventId={entry.id}
previousEventId={previousEventId}
disableAddDelay={entry.type === 'delay'}
disableAddBlock={entry.type === 'block'}
/>
)}
</div>
);
})}
</div>
</SortableContext>
</DndContext>
</div>
);
}
apps/client/src/features/rundown/RundownEmpty.tsx
+23
View File
@@ -0,0 +1,23 @@
import { Button } from '@chakra-ui/react';
import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
import Empty from '../../common/components/state/Empty';
import style from './Rundown.module.scss';
interface RundownEmptyProps {
handleAddNew: () => void;
}
export default function RundownEmpty(props: RundownEmptyProps) {
const { handleAddNew } = props;
return (
<div className={style.alignCenter}>
<Empty text='No data yet' style={{ marginTop: '7vh' }} />
<Button onClick={handleAddNew} variant='ontime-filled' className={style.spaceTop} leftIcon={<IoAdd />}>
Create Event
</Button>
</div>
);
}
apps/client/src/features/rundown/RundownEntry.tsx
+72 -91
View File
@@ -1,7 +1,6 @@
import { useCallback, useContext } from 'react';
import { useCallback } from 'react';
import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';
import { CursorContext } from '../../common/context/CursorContext';
import { useEventAction } from '../../common/hooks/useEventAction';
import { useEventEditorStore } from '../../common/stores/eventEditor';
import { useLocalEvent } from '../../common/stores/localEvent';
@@ -32,11 +31,12 @@ interface RundownEntryProps {
export default function RundownEntry(props: RundownEntryProps) {
const { index, eventIndex, data, selected, hasCursor, next, delay, previousEnd, previousEventId, playback } = props;
const { emitError } = useEmitLog();
const { openId, removeOpenEvent } = useEventEditorStore();
const { addEvent, updateEvent, deleteEvent } = useEventAction();
const { moveCursorTo } = useContext(CursorContext);
const { eventSettings } = useLocalEvent();
const openId = useEventEditorStore((state) => state.openId);
const removeOpenEvent = useEventEditorStore((state) => state.removeOpenEvent);
const eventSettings = useLocalEvent((state) => state.eventSettings);
const defaultPublic = eventSettings.defaultPublic;
const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
@@ -45,90 +45,73 @@ export default function RundownEntry(props: RundownEntryProps) {
field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
value: unknown;
};
const actionHandler = useCallback(
(action: EventItemActions, payload?: number | FieldValue) => {
switch (action) {
case 'set-cursor': {
moveCursorTo(payload as number);
break;
}
case 'event': {
const newEvent = { type: SupportedEvent.Event };
const options = {
startTimeIsLastEnd,
defaultPublic,
lastEventId: previousEventId,
after: data.id,
};
addEvent(newEvent, options);
break;
}
case 'delay': {
addEvent({ type: SupportedEvent.Delay }, { after: data.id });
break;
}
case 'block': {
addEvent({ type: SupportedEvent.Block }, { after: data.id });
break;
}
case 'delete': {
if (openId === data.id) {
removeOpenEvent();
}
deleteEvent(data.id);
break;
}
case 'clone': {
const newEvent = cloneEvent(data as OntimeEvent, data.id);
addEvent(newEvent);
break;
}
case 'update': {
// Handles and filters update requests
const { field, value } = payload as FieldValue;
const newData: Partial<OntimeEvent> = { id: data.id };
if (field === 'durationOverride' && data.type === SupportedEvent.Event) {
// duration defines timeEnd
newData.duration = value as number;
newData.timeEnd = data.timeStart + (value as number);
updateEvent(newData);
} else if (field === 'timeStart' && data.type === SupportedEvent.Event) {
newData.duration = calculateDuration(value as number, data.timeEnd);
newData.timeStart = value as number;
updateEvent(newData);
} else if (field === 'timeEnd' && data.type === SupportedEvent.Event) {
newData.duration = calculateDuration(data.timeStart, value as number);
newData.timeEnd = value as number;
updateEvent(newData);
} else if (field in data) {
// @ts-expect-error not sure how to type this
newData[field] = value;
updateEvent(newData);
} else {
emitError(`Unknown field: ${field}`);
}
break;
}
default:
emitError(`Unknown action called: ${action}`);
break;
// we assume the data is not changing in the lifecycle of this component
// changes to the data would make rundown re-render, also re-rendering this component
const actionHandler = useCallback((action: EventItemActions, payload?: number | FieldValue) => {
switch (action) {
case 'event': {
const newEvent = { type: SupportedEvent.Event };
const options = {
startTimeIsLastEnd,
defaultPublic,
lastEventId: previousEventId,
after: data.id,
};
addEvent(newEvent, options);
break;
}
},
[
addEvent,
data,
defaultPublic,
deleteEvent,
emitError,
moveCursorTo,
openId,
previousEventId,
removeOpenEvent,
startTimeIsLastEnd,
updateEvent,
],
);
case 'delay': {
addEvent({ type: SupportedEvent.Delay }, { after: data.id });
break;
}
case 'block': {
addEvent({ type: SupportedEvent.Block }, { after: data.id });
break;
}
case 'delete': {
if (openId === data.id) {
removeOpenEvent();
}
deleteEvent(data.id);
break;
}
case 'clone': {
const newEvent = cloneEvent(data as OntimeEvent, data.id);
addEvent(newEvent);
break;
}
case 'update': {
// Handles and filters update requests
const { field, value } = payload as FieldValue;
const newData: Partial<OntimeEvent> = { id: data.id };
if (field === 'durationOverride' && data.type === SupportedEvent.Event) {
// duration defines timeEnd
newData.duration = value as number;
newData.timeEnd = data.timeStart + (value as number);
updateEvent(newData);
} else if (field === 'timeStart' && data.type === SupportedEvent.Event) {
newData.duration = calculateDuration(value as number, data.timeEnd);
newData.timeStart = value as number;
updateEvent(newData);
} else if (field === 'timeEnd' && data.type === SupportedEvent.Event) {
newData.duration = calculateDuration(data.timeStart, value as number);
newData.timeEnd = value as number;
updateEvent(newData);
} else if (field in data) {
// @ts-expect-error not sure how to type this
newData[field] = value;
updateEvent(newData);
} else {
emitError(`Unknown field: ${field}`);
}
break;
}
default:
throw new Error(`Unhandled event ${action}`);
}
}, []);
if (data.type === SupportedEvent.Event) {
return (
@@ -154,11 +137,9 @@ export default function RundownEntry(props: RundownEntryProps) {
/>
);
} else if (data.type === SupportedEvent.Block) {
// @ts-expect-error -- revise types here
return <BlockBlock index={index} data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
return <BlockBlock data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
} else if (data.type === SupportedEvent.Delay) {
// @ts-expect-error -- revise types here
return <DelayBlock index={index} data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
return <DelayBlock data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
}
return null;
}
apps/client/src/features/rundown/RundownExport.tsx
+12 -14
View File
@@ -1,25 +1,23 @@
import { memo } from 'react';
import { Box } from '@chakra-ui/react';
import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
import { CursorProvider } from '../../common/context/CursorContext';
import { handleLinks } from '../../common/utils/linkUtils';
import RundownWrapper from './RundownWrapper';
import style from '../editors/Editor.module.scss';
export default function RundownExport() {
const RundownExport = () => {
return (
<CursorProvider>
<Box className={style.editor} data-testid='panel-rundown'>
<IoArrowUp
className={style.corner}
onClick={(event) => handleLinks(event, 'rundown')}
/>
<ErrorBoundary>
<RundownWrapper />
</ErrorBoundary>
</Box>
</CursorProvider>
<Box className={style.editor} data-testid='panel-rundown'>
<IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'rundown')} />
<ErrorBoundary>
<RundownWrapper />
</ErrorBoundary>
</Box>
);
}
};
export default memo(RundownExport);
apps/client/src/features/rundown/RundownWrapper.tsx
+1 -5
View File
@@ -13,11 +13,7 @@ export default function RundownWrapper() {
<>
<RundownMenu />
<div className={styles.content}>
{status === 'success' && data ? (
<Rundown entries={data} />
) : (
<Empty text='Connecting to server' />
)}
{status === 'success' && data ? <Rundown entries={data} /> : <Empty text='Connecting to server' />}
</div>
</>
);
apps/client/src/features/rundown/_blockMixins.scss
+1
View File
@@ -19,6 +19,7 @@ $block-cursor-color: $blue-400;
font-family: $ontime-font-family;
border-radius: $block-border-radius;
margin: 4px 2px;
position: relative;
}
@mixin block-spacing() {
apps/client/src/features/rundown/block-block/BlockBlock.tsx
+38 -27
View File
@@ -1,5 +1,6 @@
import { useEffect, useRef } from 'react';
import { Draggable } from 'react-beautiful-dnd';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
import { OntimeBlock, OntimeEvent } from 'ontime-types';
@@ -10,43 +11,53 @@ import { EventItemActions } from '../RundownEntry';
import style from './BlockBlock.module.scss';
interface BlockBlockProps {
index: number;
data: OntimeBlock;
hasCursor: boolean;
actionHandler: (action: EventItemActions, payload?: number | { field: keyof OntimeEvent, value: unknown }) => void;
actionHandler: (
action: EventItemActions,
payload?:
| number
| {
field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
value: unknown;
},
) => void;
}
export default function BlockBlock(props: BlockBlockProps) {
const { index, data, hasCursor, actionHandler } = props;
const onFocusRef = useRef<null | HTMLSpanElement>(null);
const { data, hasCursor, actionHandler } = props;
const handleRef = useRef<null | HTMLSpanElement>(null);
const {
attributes: dragAttributes,
listeners: dragListeners,
setNodeRef,
transform,
transition,
} = useSortable({
id: data.id,
animateLayoutChanges: () => false,
});
const dragStyle = {
transform: CSS.Translate.toString(transform),
transition,
};
useEffect(() => {
if (hasCursor) {
onFocusRef?.current?.focus();
handleRef?.current?.focus();
}
}, [hasCursor])
}, [hasCursor]);
const blockClasses = cx([
style.block,
hasCursor ? style.hasCursor : null,
]);
const blockClasses = cx([style.block, hasCursor ? style.hasCursor : null]);
return (
<Draggable key={data.id} draggableId={data.id} index={index}>
{(provided) => (
<div className={blockClasses} {...provided.draggableProps} ref={provided.innerRef}>
<span className={style.drag} {...provided.dragHandleProps} ref={onFocusRef}>
<IoReorderTwo />
</span>
<BlockActionMenu
className={style.actionOverlay}
showAdd
showDelay
enableDelete
actionHandler={actionHandler}
/>
</div>
)}
</Draggable>
<div className={blockClasses} ref={setNodeRef} style={dragStyle}>
<span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
<IoReorderTwo />
</span>
<BlockActionMenu className={style.actionOverlay} showAdd showDelay enableDelete actionHandler={actionHandler} />
</div>
);
}
apps/client/src/features/rundown/delay-block/DelayBlock.tsx
+42 -22
View File
@@ -1,6 +1,7 @@
import { useCallback, useEffect, useRef } from 'react';
import { Draggable } from 'react-beautiful-dnd';
import { Button, HStack } from '@chakra-ui/react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
import { OntimeDelay, OntimeEvent } from 'ontime-types';
@@ -16,19 +17,42 @@ import style from './DelayBlock.module.scss';
interface DelayBlockProps {
data: OntimeDelay;
index: number;
hasCursor: boolean;
actionHandler: (action: EventItemActions, payload?: number | { field: keyof OntimeEvent; value: unknown }) => void;
actionHandler: (
action: EventItemActions,
payload?:
| number
| {
field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
value: unknown;
},
) => void;
}
export default function DelayBlock(props: DelayBlockProps) {
const { data, index, hasCursor, actionHandler } = props;
const { data, hasCursor, actionHandler } = props;
const { applyDelay, updateEvent } = useEventAction();
const onFocusRef = useRef<null | HTMLSpanElement>(null);
const handleRef = useRef<null | HTMLSpanElement>(null);
const {
attributes: dragAttributes,
listeners: dragListeners,
setNodeRef,
transform,
transition,
} = useSortable({
id: data.id,
animateLayoutChanges: () => false,
});
const dragStyle = {
transform: CSS.Translate.toString(transform),
transition,
};
useEffect(() => {
if (hasCursor) {
onFocusRef?.current?.focus();
handleRef?.current?.focus();
}
}, [hasCursor]);
@@ -53,21 +77,17 @@ export default function DelayBlock(props: DelayBlockProps) {
const delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
return (
<Draggable key={data.id} draggableId={data.id} index={index}>
{(provided) => (
<div className={blockClasses} {...provided.draggableProps} ref={provided.innerRef}>
<span className={style.drag} {...provided.dragHandleProps} ref={onFocusRef}>
<IoReorderTwo />
</span>
<DelayInput value={delayValue} submitHandler={delaySubmitHandler} />
<HStack spacing='8px' className={style.actionOverlay}>
<Button onClick={applyDelayHandler} size='sm' leftIcon={<IoCheckmark />} variant='ontime-subtle-white'>
Apply delay
</Button>
<BlockActionMenu showAdd enableDelete actionHandler={actionHandler} />
</HStack>
</div>
)}
</Draggable>
<div className={blockClasses} ref={setNodeRef} style={dragStyle}>
<span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
<IoReorderTwo />
</span>
<DelayInput value={delayValue} submitHandler={delaySubmitHandler} />
<HStack spacing='8px' className={style.actionOverlay}>
<Button onClick={applyDelayHandler} size='sm' leftIcon={<IoCheckmark />} variant='ontime-subtle-white'>
Apply delay
</Button>
<BlockActionMenu showAdd enableDelete actionHandler={actionHandler} />
</HStack>
</div>
);
}
apps/client/src/features/rundown/event-block/EventBlock.tsx
+85 -177
View File
@@ -1,39 +1,18 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { Draggable } from 'react-beautiful-dnd';
import { Editable, EditableInput, EditablePreview, Tooltip } from '@chakra-ui/react';
import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
import { IoPlayOutline } from '@react-icons/all-files/io5/IoPlayOutline';
import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
import { IoReload } from '@react-icons/all-files/io5/IoReload';
import { IoRemoveCircle } from '@react-icons/all-files/io5/IoRemoveCircle';
import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
import { Playback } from 'ontime-types';
import { OntimeEvent, Playback } from 'ontime-types';
import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
import { useEventAction } from '../../../common/hooks/useEventAction';
import { setEventPlayback } from '../../../common/hooks/useSocket';
import { useCursor } from '../../../common/stores/cursorStore';
import { useEventEditorStore } from '../../../common/stores/eventEditor';
import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
import { tooltipDelayMid } from '../../../ontimeConfig';
import { EventItemActions } from '../RundownEntry';
import BlockActionMenu from './composite/BlockActionMenu';
import EventBlockProgressBar from './composite/EventBlockProgressBar';
import EventBlockTimers from './composite/EventBlockTimers';
import EventBlockInner from './EventBlockInner';
import style from './EventBlock.module.scss';
const blockBtnStyle = {
size: 'sm',
};
const tooltipProps = {
openDelay: tooltipDelayMid,
};
interface EventBlockProps {
timeStart: number;
timeEnd: number;
@@ -52,7 +31,15 @@ interface EventBlockProps {
selected: boolean;
hasCursor: boolean;
playback?: Playback;
actionHandler: (action: EventItemActions, payload?: any) => void;
actionHandler: (
action: EventItemActions,
payload?:
| number
| {
field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
value: unknown;
},
) => void;
}
export default function EventBlock(props: EventBlockProps) {
@@ -77,54 +64,61 @@ export default function EventBlock(props: EventBlockProps) {
actionHandler,
} = props;
const { openId, setOpenEvent, removeOpenEvent } = useEventEditorStore();
const { updateEvent } = useEventAction();
const [blockTitle, setBlockTitle] = useState<string>(title || '');
const onFocusRef = useRef<null | HTMLSpanElement>(null);
const moveCursorTo = useCursor((state) => state.moveCursorTo);
const handleRef = useRef<null | HTMLSpanElement>(null);
const [isVisible, setIsVisible] = useState(false);
const openId = useEventEditorStore((state) => state.openId);
const {
isDragging,
attributes: dragAttributes,
listeners: dragListeners,
setNodeRef,
transform,
transition,
} = useSortable({
id: eventId,
animateLayoutChanges: () => false,
});
const dragStyle = {
zIndex: isDragging ? 2 : 'inherit',
transform: CSS.Translate.toString(transform),
transition,
};
const binderColours = colour && getAccessibleColour(colour);
// Todo: could I re-render the item without causing a state change here?
// ?? use refs instead?
useEffect(() => {
setBlockTitle(title);
}, [title]);
useEffect(() => {
if (hasCursor) {
onFocusRef?.current?.focus();
handleRef?.current?.focus();
}
}, [hasCursor]);
const handleTitle = useCallback(
(text: string) => {
if (text === title) {
return;
}
useLayoutEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
}
},
{
root: null,
threshold: 1,
},
);
const cleanVal = text.trim();
setBlockTitle(cleanVal);
updateEvent({ id: eventId, title: cleanVal });
},
[title, updateEvent, eventId],
);
const toggleOpenEvent = useCallback(() => {
if (openId === eventId) {
removeOpenEvent();
} else {
setOpenEvent(eventId);
const handleRefCurrent = handleRef.current;
if (handleRefCurrent) {
observer.observe(handleRefCurrent);
}
}, [eventId, openId, removeOpenEvent, setOpenEvent]);
const eventIsPlaying = selected && playback === Playback.Play;
const playBtnStyles = { _hover: {} };
if (!skip && eventIsPlaying) {
playBtnStyles._hover = { bg: '#c05621' };
} else if (!skip && !eventIsPlaying) {
playBtnStyles._hover = {};
}
return () => {
if (handleRefCurrent) {
observer.unobserve(handleRefCurrent);
}
};
}, [handleRef]);
const blockClasses = cx([
style.eventBlock,
@@ -134,118 +128,32 @@ export default function EventBlock(props: EventBlockProps) {
]);
return (
<Draggable key={eventId} draggableId={eventId} index={index}>
{(provided) => (
<div className={blockClasses} {...provided.draggableProps} ref={provided.innerRef}>
<div
className={style.binder}
style={{ ...binderColours }}
tabIndex={-1}
onClick={() => actionHandler('set-cursor', index)}
>
<span className={style.drag} {...provided.dragHandleProps} ref={onFocusRef}>
<IoReorderTwo />
</span>
{eventIndex}
</div>
<div className={style.playbackActions}>
<TooltipActionBtn
variant='ontime-subtle-white'
aria-label='Skip event'
tooltip='Skip event'
icon={skip ? <IoRemoveCircle /> : <IoRemoveCircleOutline />}
{...tooltipProps}
{...blockBtnStyle}
clickHandler={() => actionHandler('update', { field: 'skip', value: !skip })}
tabIndex={-1}
disabled={selected}
/>
<TooltipActionBtn
variant='ontime-subtle-white'
aria-label='Load event'
tooltip='Load event'
icon={<IoReload className={style.flip} />}
disabled={skip}
{...tooltipProps}
{...blockBtnStyle}
clickHandler={() => setEventPlayback.loadEvent(eventId)}
tabIndex={-1}
/>
<TooltipActionBtn
variant='ontime-subtle-white'
aria-label='Start event'
tooltip='Start event'
icon={eventIsPlaying ? <IoPlay /> : <IoPlayOutline />}
disabled={skip}
{...tooltipProps}
{...blockBtnStyle}
clickHandler={() => setEventPlayback.startEvent(eventId)}
backgroundColor={eventIsPlaying ? '#58A151' : undefined}
_hover={{ backgroundColor: eventIsPlaying ? '#58A151' : undefined }}
tabIndex={-1}
/>
</div>
<EventBlockTimers
timeStart={timeStart}
timeEnd={timeEnd}
duration={duration}
delay={delay}
actionHandler={actionHandler}
previousEnd={previousEnd}
/>
<Editable
variant='ontime'
value={blockTitle}
className={`${style.eventTitle} ${!title ? style.noTitle : ''}`}
placeholder='Event title'
onChange={(value) => setBlockTitle(value)}
onSubmit={(value) => handleTitle(value)}
>
<EditablePreview className={style.preview} />
<EditableInput />
</Editable>
<div className={style.statusElements}>
<span className={style.eventNote}>{note}</span>
<div className={selected ? style.progressBg : `${style.progressBg} ${style.hidden}`}>
<EventBlockProgressBar playback={playback} />
</div>
<div className={style.eventStatus} tabIndex={-1}>
<Tooltip label='Next event' isDisabled={!next} {...tooltipProps}>
<span>
<IoPlaySkipForward className={`${style.statusIcon} ${next ? style.active : ''}`} />
</span>
</Tooltip>
<Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
<span>
<IoPeople className={`${style.statusIcon} ${isPublic ? style.active : ''}`} />
</span>
</Tooltip>
</div>
</div>
<div className={style.eventActions}>
<TooltipActionBtn
{...blockBtnStyle}
variant='ontime-subtle-white'
size='sm'
icon={<IoOptions />}
clickHandler={toggleOpenEvent}
tooltip='Event options'
aria-label='Event options'
tabIndex={-1}
backgroundColor={openId === eventId ? '#2B5ABC' : undefined}
color={openId === eventId ? 'white' : '#f6f6f6'}
/>
<BlockActionMenu
showAdd
showDelay
showBlock
showClone
enableDelete={!selected}
actionHandler={actionHandler}
/>
</div>
</div>
<div className={blockClasses} ref={setNodeRef} style={dragStyle}>
<div className={style.binder} style={{ ...binderColours }} tabIndex={-1} onClick={() => moveCursorTo(index)}>
<span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
<IoReorderTwo />
</span>
{eventIndex}
</div>
{isVisible && (
<EventBlockInner
isOpen={openId === eventId}
timeStart={timeStart}
timeEnd={timeEnd}
duration={duration}
eventId={eventId}
isPublic={isPublic}
title={title}
note={note}
delay={delay}
previousEnd={previousEnd}
next={next}
skip={skip}
selected={selected}
playback={playback}
actionHandler={actionHandler}
/>
)}
</Draggable>
</div>
);
}
apps/client/src/features/rundown/event-block/EventBlockInner.tsx
+214
View File
@@ -0,0 +1,214 @@
import { memo, useCallback, useEffect, useState } from 'react';
import { Editable, EditableInput, EditablePreview, Tooltip } from '@chakra-ui/react';
import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
import { IoPlayOutline } from '@react-icons/all-files/io5/IoPlayOutline';
import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
import { IoReload } from '@react-icons/all-files/io5/IoReload';
import { IoRemoveCircle } from '@react-icons/all-files/io5/IoRemoveCircle';
import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
import { Playback } from 'ontime-types';
import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
import { useEventAction } from '../../../common/hooks/useEventAction';
import { setEventPlayback } from '../../../common/hooks/useSocket';
import { useEventEditorStore } from '../../../common/stores/eventEditor';
import { tooltipDelayMid } from '../../../ontimeConfig';
import { EventItemActions } from '../RundownEntry';
import BlockActionMenu from './composite/BlockActionMenu';
import EventBlockProgressBar from './composite/EventBlockProgressBar';
import EventBlockTimers from './composite/EventBlockTimers';
import style from './EventBlock.module.scss';
const blockBtnStyle = {
size: 'sm',
};
const tooltipProps = {
openDelay: tooltipDelayMid,
};
interface EventBlockInnerProps {
isOpen: boolean;
timeStart: number;
timeEnd: number;
duration: number;
eventId: string;
isPublic: boolean;
title: string;
note: string;
delay: number;
previousEnd: number;
next: boolean;
skip: boolean;
selected: boolean;
playback?: Playback;
actionHandler: (action: EventItemActions, payload?: any) => void;
}
const EventBlockInner = (props: EventBlockInnerProps) => {
const {
isOpen,
timeStart,
timeEnd,
duration,
eventId,
isPublic = true,
title,
note,
delay,
previousEnd,
next,
skip = false,
selected,
playback,
actionHandler,
} = props;
const { updateEvent } = useEventAction();
const [blockTitle, setBlockTitle] = useState<string>(title || '');
const [renderInner, setRenderInner] = useState(false);
const setOpenEvent = useEventEditorStore((state) => state.setOpenEvent);
const removeOpenEvent = useEventEditorStore((state) => state.removeOpenEvent);
// Todo: could I re-render the item without causing a state change here?
// ?? use refs instead?
useEffect(() => {
setRenderInner(true);
}, []);
useEffect(() => {
setBlockTitle(title);
}, [title]);
const handleTitle = useCallback(
(text: string) => {
if (text === title) {
return;
}
const cleanVal = text.trim();
setBlockTitle(cleanVal);
updateEvent({ id: eventId, title: cleanVal });
},
[title, updateEvent, eventId],
);
const toggleOpenEvent = useCallback(() => {
if (isOpen) {
removeOpenEvent();
} else {
setOpenEvent(eventId);
}
}, [eventId, isOpen, removeOpenEvent, setOpenEvent]);
const eventIsPlaying = selected && playback === Playback.Play;
const playBtnStyles = { _hover: {} };
if (!skip && eventIsPlaying) {
playBtnStyles._hover = { bg: '#c05621' };
} else if (!skip && !eventIsPlaying) {
playBtnStyles._hover = {};
}
return !renderInner ? null : (
<>
<div className={style.playbackActions}>
<TooltipActionBtn
variant='ontime-subtle-white'
aria-label='Skip event'
tooltip='Skip event'
icon={skip ? <IoRemoveCircle /> : <IoRemoveCircleOutline />}
{...tooltipProps}
{...blockBtnStyle}
clickHandler={() => actionHandler('update', { field: 'skip', value: !skip })}
tabIndex={-1}
disabled={selected}
/>
<TooltipActionBtn
variant='ontime-subtle-white'
aria-label='Load event'
tooltip='Load event'
icon={<IoReload className={style.flip} />}
disabled={skip}
{...tooltipProps}
{...blockBtnStyle}
clickHandler={() => setEventPlayback.loadEvent(eventId)}
tabIndex={-1}
/>
<TooltipActionBtn
variant='ontime-subtle-white'
aria-label='Start event'
tooltip='Start event'
icon={eventIsPlaying ? <IoPlay /> : <IoPlayOutline />}
disabled={skip}
{...tooltipProps}
{...blockBtnStyle}
clickHandler={() => setEventPlayback.startEvent(eventId)}
backgroundColor={eventIsPlaying ? '#58A151' : undefined}
_hover={{ backgroundColor: eventIsPlaying ? '#58A151' : undefined }}
tabIndex={-1}
/>
</div>
<EventBlockTimers
timeStart={timeStart}
timeEnd={timeEnd}
duration={duration}
delay={delay}
actionHandler={actionHandler}
previousEnd={previousEnd}
/>
<Editable
variant='ontime'
value={blockTitle}
className={`${style.eventTitle} ${!title ? style.noTitle : ''}`}
placeholder='Event title'
onChange={(value) => setBlockTitle(value)}
onSubmit={(value) => handleTitle(value)}
>
<EditablePreview className={style.preview} />
<EditableInput />
</Editable>
<div className={style.statusElements}>
<span className={style.eventNote}>{note}</span>
<div className={selected ? style.progressBg : `${style.progressBg} ${style.hidden}`}>
{selected && <EventBlockProgressBar playback={playback} />}
</div>
<div className={style.eventStatus} tabIndex={-1}>
<Tooltip label='Next event' isDisabled={!next} {...tooltipProps}>
<span>
<IoPlaySkipForward className={`${style.statusIcon} ${next ? style.active : ''}`} />
</span>
</Tooltip>
<Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
<span>
<IoPeople className={`${style.statusIcon} ${isPublic ? style.active : ''}`} />
</span>
</Tooltip>
</div>
</div>
<div className={style.eventActions}>
<TooltipActionBtn
{...blockBtnStyle}
variant='ontime-subtle-white'
size='sm'
icon={<IoOptions />}
clickHandler={toggleOpenEvent}
tooltip='Event options'
aria-label='Event options'
tabIndex={-1}
backgroundColor={isOpen ? '#2B5ABC' : undefined}
color={isOpen ? 'white' : '#f6f6f6'}
/>
<BlockActionMenu showAdd showDelay showBlock showClone enableDelete={!selected} actionHandler={actionHandler} />
</div>
</>
);
};
export default memo(EventBlockInner);
apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export default function QuickAddBlock(props: QuickAddBlockProps) {
const doStartTime = useRef<HTMLInputElement | null>(null);
const doPublic = useRef<HTMLInputElement | null>(null);
const { eventSettings } = useLocalEvent();
const eventSettings = useLocalEvent((state) => state.eventSettings);
const defaultPublic = eventSettings.defaultPublic;
const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
apps/client/src/features/table/OntimeTable.jsx
+1 -1
View File
@@ -148,7 +148,7 @@ export default function OntimeTable({ tableData, userFields, selectedId, handleU
if (el) {
el.scrollIntoView({
behavior: 'smooth',
block: 'center',
block: 'start',
inline: 'nearest',
});
}
apps/client/src/features/table/tableElements/SortableCell.jsx
+3 -10
View File
@@ -13,22 +13,15 @@ export default function SortableCell({ column }) {
id: column.id,
});
// prevent scaling on drag
const cssTransform = {
...transform,
scaleX: 1,
scaleY: 1,
}
// build drag styles
const dragStyle = {
transform: CSS.Transform.toString(cssTransform),
transition,
...style,
transform: CSS.Translate.toString(transform),
transition,
};
return (
<th {...restColumn} ref={setNodeRef} style={{...dragStyle}} className={isDragging ? styles.dragging: ''}>
<th {...restColumn} ref={setNodeRef} style={dragStyle} className={isDragging ? styles.dragging : ''}>
<div {...attributes} {...listeners}>
<Tooltip label={column.Header} openDelay={tooltipDelayFast}>
{column.render('Header')}
apps/client/src/features/viewers/ViewWrapper.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export type TitleManager = TitleBlock & { showNow: boolean; showNext: boolean };
const withData = (Component: ReactNode) => {
return (props) => {
// persisted app state
const { mirror: isMirrored } = useViewOptionsStore();
const isMirrored = useViewOptionsStore((state) => state.mirror);
// HTTP API data
const { data: eventsData } = useRundown();
apps/client/src/theme/ontimeMenu.ts
+1 -1
View File
@@ -1,6 +1,6 @@
export const ontimeMenuOnDark = {
list: {
borderRadius: "3px",
borderRadius: '3px',
border: 'none',
bg: '#fff', // $gray-50
zIndex: 100,
pnpm-lock.yaml
Generated
+17 -105
View File
@@ -31,8 +31,8 @@ importers:
apps/client:
specifiers:
'@chakra-ui/react': ^2.5.1
'@dnd-kit/core': ^6.0.6
'@dnd-kit/sortable': ^7.0.1
'@dnd-kit/core': ^6.0.8
'@dnd-kit/sortable': ^7.0.2
'@dnd-kit/utilities': ^3.2.1
'@emotion/react': ^11.10.5
'@emotion/styled': ^11.10.5
@@ -50,7 +50,6 @@ importers:
'@types/luxon': ^3.2.0
'@types/prop-types': ^15.7.5
'@types/react': ^18.0.26
'@types/react-beautiful-dnd': ^13.1.3
'@types/react-dom': ^18.0.10
'@types/testing-library__jest-dom': ^5.14.5
'@typescript-eslint/eslint-plugin': ^5.48.1
@@ -77,7 +76,6 @@ importers:
prettier: ^2.8.3
prop-types: ^15.8.1
react: ^18.2.0
react-beautiful-dnd: ^13.1.1
react-dom: ^18.2.0
react-fast-compare: ^3.2.0
react-hook-form: ^7.43.5
@@ -97,8 +95,8 @@ importers:
zustand: ^4.3.6
dependencies:
'@chakra-ui/react': 2.5.1_loo4skotrnm7icurwgkplqpnwq
'@dnd-kit/core': 6.0.7_biqbaboplfbrettd7655fr4n2y
'@dnd-kit/sortable': 7.0.2_pmudlfv2z3i7vvlookxjkeidxe
'@dnd-kit/core': 6.0.8_biqbaboplfbrettd7655fr4n2y
'@dnd-kit/sortable': 7.0.2_52scne4zmdeyjh2otzkgz2xfvu
'@dnd-kit/utilities': 3.2.1_react@18.2.0
'@emotion/react': 11.10.5_kzbn2opkn2327fwg5yzwzya5o4
'@emotion/styled': 11.10.5_qvatmowesywn4ye42qoh247szu
@@ -115,7 +113,6 @@ importers:
framer-motion: 8.4.3_biqbaboplfbrettd7655fr4n2y
luxon: 3.3.0
react: 18.2.0
react-beautiful-dnd: 13.1.1_biqbaboplfbrettd7655fr4n2y
react-dom: 18.2.0_react@18.2.0
react-fast-compare: 3.2.0
react-hook-form: 7.43.5_react@18.2.0
@@ -135,7 +132,6 @@ importers:
'@types/luxon': 3.2.0
'@types/prop-types': 15.7.5
'@types/react': 18.0.26
'@types/react-beautiful-dnd': 13.1.3
'@types/react-dom': 18.0.10
'@types/testing-library__jest-dom': 5.14.5
'@typescript-eslint/eslint-plugin': 5.48.1_3jon24igvnqaqexgwtxk6nkpse
@@ -1632,11 +1628,11 @@ packages:
react: '>=16.8.0'
dependencies:
react: 18.2.0
tslib: 2.4.1
tslib: 2.5.0
dev: false
/@dnd-kit/core/6.0.7_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-qcLBTVTjmLuLqC0RHQ+dFKN5neWmAI56H9xZ+he9WEJEkAvR76YAcz7DSWDJfjErepfG2H3Fkb9lYiX7cPR62g==}
/@dnd-kit/core/6.0.8_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
@@ -1645,19 +1641,19 @@ packages:
'@dnd-kit/utilities': 3.2.1_react@18.2.0
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
tslib: 2.4.1
tslib: 2.5.0
dev: false
/@dnd-kit/sortable/7.0.2_pmudlfv2z3i7vvlookxjkeidxe:
/@dnd-kit/sortable/7.0.2_52scne4zmdeyjh2otzkgz2xfvu:
resolution: {integrity: sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==}
peerDependencies:
'@dnd-kit/core': ^6.0.7
react: '>=16.8.0'
dependencies:
'@dnd-kit/core': 6.0.7_biqbaboplfbrettd7655fr4n2y
'@dnd-kit/core': 6.0.8_biqbaboplfbrettd7655fr4n2y
'@dnd-kit/utilities': 3.2.1_react@18.2.0
react: 18.2.0
tslib: 2.4.1
tslib: 2.5.0
dev: false
/@dnd-kit/utilities/3.2.1_react@18.2.0:
@@ -2379,7 +2375,7 @@ packages:
'@motionone/easing': 10.15.1
'@motionone/types': 10.15.1
'@motionone/utils': 10.15.1
tslib: 2.4.1
tslib: 2.5.0
dev: false
/@motionone/dom/10.15.5:
@@ -2390,14 +2386,14 @@ packages:
'@motionone/types': 10.15.1
'@motionone/utils': 10.15.1
hey-listen: 1.0.8
tslib: 2.4.1
tslib: 2.5.0
dev: false
/@motionone/easing/10.15.1:
resolution: {integrity: sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==}
dependencies:
'@motionone/utils': 10.15.1
tslib: 2.4.1
tslib: 2.5.0
dev: false
/@motionone/generators/10.15.1:
@@ -2405,7 +2401,7 @@ packages:
dependencies:
'@motionone/types': 10.15.1
'@motionone/utils': 10.15.1
tslib: 2.4.1
tslib: 2.5.0
dev: false
/@motionone/types/10.15.1:
@@ -2417,7 +2413,7 @@ packages:
dependencies:
'@motionone/types': 10.15.1
hey-listen: 1.0.8
tslib: 2.4.1
tslib: 2.5.0
dev: false
/@nodelib/fs.scandir/2.1.5:
@@ -2959,13 +2955,6 @@ packages:
dev: true
optional: true
/@types/hoist-non-react-statics/3.3.1:
resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
dependencies:
'@types/react': 18.0.26
hoist-non-react-statics: 3.3.2
dev: false
/@types/istanbul-lib-coverage/2.0.4:
resolution: {integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==}
dev: true
@@ -3069,27 +3058,12 @@ packages:
resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
dev: true
/@types/react-beautiful-dnd/13.1.3:
resolution: {integrity: sha512-BNdmvONKtsrZq3AGrujECQrIn8cDT+fZsxBLXuX3YWY/nHfZinUFx4W88eS0rkcXzuLbXpKOsu/1WCMPMLEpPg==}
dependencies:
'@types/react': 18.0.26
dev: true
/@types/react-dom/18.0.10:
resolution: {integrity: sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==}
dependencies:
'@types/react': 18.0.26
dev: true
/@types/react-redux/7.1.25:
resolution: {integrity: sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==}
dependencies:
'@types/hoist-non-react-statics': 3.3.1
'@types/react': 18.0.26
hoist-non-react-statics: 3.3.2
redux: 4.2.0
dev: false
/@types/react/18.0.26:
resolution: {integrity: sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==}
dependencies:
@@ -6508,10 +6482,6 @@ packages:
engines: {node: '>= 0.6'}
dev: false
/memoize-one/5.2.1:
resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
dev: false
/meow/9.0.0:
resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==}
engines: {node: '>=10'}
@@ -7308,10 +7278,6 @@ packages:
engines: {node: '>=8'}
dev: true
/raf-schd/4.0.3:
resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
dev: false
/random-bytes/1.0.0:
resolution: {integrity: sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ==}
engines: {node: '>= 0.8'}
@@ -7332,25 +7298,6 @@ packages:
unpipe: 1.0.0
dev: false
/react-beautiful-dnd/13.1.1_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==}
peerDependencies:
react: ^16.8.5 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0
dependencies:
'@babel/runtime': 7.20.7
css-box-model: 1.2.1
memoize-one: 5.2.1
raf-schd: 4.0.3
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-redux: 7.2.9_biqbaboplfbrettd7655fr4n2y
redux: 4.2.0
use-memo-one: 1.1.3_react@18.2.0
transitivePeerDependencies:
- react-native
dev: false
/react-clientside-effect/1.2.6_react@18.2.0:
resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
peerDependencies:
@@ -7406,6 +7353,7 @@ packages:
/react-is/17.0.2:
resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
dev: true
/react-is/18.2.0:
resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
@@ -7425,28 +7373,6 @@ packages:
react: 18.2.0
dev: false
/react-redux/7.2.9_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
peerDependencies:
react: ^16.8.3 || ^17 || ^18
react-dom: '*'
react-native: '*'
peerDependenciesMeta:
react-dom:
optional: true
react-native:
optional: true
dependencies:
'@babel/runtime': 7.20.7
'@types/react-redux': 7.1.25
hoist-non-react-statics: 3.3.2
loose-envify: 1.4.0
prop-types: 15.8.1
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-is: 17.0.2
dev: false
/react-refresh/0.14.0:
resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
engines: {node: '>=0.10.0'}
@@ -7614,12 +7540,6 @@ packages:
strip-indent: 3.0.0
dev: true
/redux/4.2.0:
resolution: {integrity: sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==}
dependencies:
'@babel/runtime': 7.20.7
dev: false
/regenerator-runtime/0.13.11:
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
@@ -8768,14 +8688,6 @@ packages:
tslib: 2.5.0
dev: false
/use-memo-one/1.1.3_react@18.2.0:
resolution: {integrity: sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
dependencies:
react: 18.2.0
dev: false
/use-sidecar/1.1.2_kzbn2opkn2327fwg5yzwzya5o4:
resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
engines: {node: '>=10'}