:
}
- onClick={() => setMessage.onAir(!data?.onAir)}
+ variant={data.onAir ? 'ontime-filled' : 'ontime-subtle'}
+ leftIcon={data.onAir ?
:
}
+ onClick={() => setMessage.onAir(!data.onAir)}
>
{data?.onAir ? 'Ontime is On Air' : 'Ontime is Off Air'}
diff --git a/apps/client/src/features/control/playback/PlaybackButtons.tsx b/apps/client/src/features/control/playback/PlaybackButtons.tsx
index 3fcffaefa..c459b0799 100644
--- a/apps/client/src/features/control/playback/PlaybackButtons.tsx
+++ b/apps/client/src/features/control/playback/PlaybackButtons.tsx
@@ -5,24 +5,15 @@ import Transport from './Transport';
interface PlaybackButtonsProps {
playback: Playback;
- selectedId: string | null;
noEvents: boolean;
}
export default function PlaybackButtons(props: PlaybackButtonsProps) {
- const { playback, selectedId, noEvents } = props;
+ const { playback, noEvents } = props;
return (
<>
-
-
+
+
);
};
diff --git a/apps/client/src/features/control/playback/PlaybackControl.tsx b/apps/client/src/features/control/playback/PlaybackControl.tsx
index aa8115709..4277e1618 100644
--- a/apps/client/src/features/control/playback/PlaybackControl.tsx
+++ b/apps/client/src/features/control/playback/PlaybackControl.tsx
@@ -8,19 +8,12 @@ import PlaybackTimer from './PlaybackTimer';
import style from './PlaybackControl.module.scss';
export default function PlaybackControl() {
- const { data } = usePlaybackControl();
+ const data = usePlaybackControl();
return (
);
}
diff --git a/apps/client/src/features/control/playback/PlaybackDisplay.tsx b/apps/client/src/features/control/playback/PlaybackDisplay.tsx
index f6f979ab4..d2000022a 100644
--- a/apps/client/src/features/control/playback/PlaybackDisplay.tsx
+++ b/apps/client/src/features/control/playback/PlaybackDisplay.tsx
@@ -11,23 +11,23 @@ import style from './PlaybackControl.module.scss';
interface PlaybackProps {
playback: Playback;
- selectedId: string | null;
noEvents: boolean;
}
export default function PlaybackDisplay(props: PlaybackProps) {
- const { playback, selectedId, noEvents } = props;
- const isRolling = playback === 'roll';
- const isPlaying = playback === 'play';
- const isPaused = playback === 'pause';
- const isArmed = playback === 'armed';
+ const { playback, noEvents } = props;
+ const isRolling = playback === Playback.Roll;
+ const isPlaying = playback === Playback.Play;
+ const isPaused = playback === Playback.Pause;
+ const isArmed = playback === Playback.Armed;
+ const isStopped = playback === Playback.Stop;
return (
setPlayback.start()}
- disabled={!selectedId || isRolling}
- theme='play'
+ disabled={isStopped || isRolling}
+ theme={Playback.Play}
active={isPlaying}
>
@@ -35,8 +35,8 @@ export default function PlaybackDisplay(props: PlaybackProps) {
setPlayback.pause()}
- disabled={!selectedId || isRolling || isArmed}
- theme='pause'
+ disabled={isStopped || isRolling || isArmed}
+ theme={Playback.Pause}
active={isPaused}
>
@@ -44,8 +44,8 @@ export default function PlaybackDisplay(props: PlaybackProps) {
setPlayback.roll()}
- disabled={noEvents}
- theme='roll'
+ disabled={!isStopped || noEvents}
+ theme={Playback.Roll}
active={isRolling}
>
diff --git a/apps/client/src/features/control/playback/PlaybackTimer.tsx b/apps/client/src/features/control/playback/PlaybackTimer.tsx
index c4dd8e2dd..2c382eafc 100644
--- a/apps/client/src/features/control/playback/PlaybackTimer.tsx
+++ b/apps/client/src/features/control/playback/PlaybackTimer.tsx
@@ -4,33 +4,33 @@ import { Playback } from 'ontime-types';
import TimerDisplay from '../../../common/components/timer-display/TimerDisplay';
import { setPlayback, useTimer } from '../../../common/hooks/useSocket';
import { millisToMinutes } from '../../../common/utils/dateConfig';
-import { stringFromMillis } from '../../../common/utils/time';
import { tooltipDelayMid } from '../../../ontimeConfig';
import TapButton from './TapButton';
import style from './PlaybackControl.module.scss';
+import { millisToString } from 'ontime-utils';
interface PlaybackTimerProps {
playback: Playback;
- selectedId: string | null;
}
export default function PlaybackTimer(props: PlaybackTimerProps) {
- const { playback, selectedId } = props;
- const { data: timerData } = useTimer();
+ const { playback } = props;
+ const data = useTimer();
// TODO: checkout typescript in utilities
- const started = stringFromMillis(timerData?.startedAt, true);
- const finish = stringFromMillis(timerData.expectedFinish, true);
- const isRolling = playback === 'roll';
- const isWaiting = timerData.secondaryTimer !== null && timerData.secondaryTimer > 0 && timerData.current === null;
- const disableButtons = selectedId === null || isRolling;
- const isOvertime = timerData.current !== null && timerData.current < 0;
- const hasAddedTime = Boolean(timerData.addedTime);
+ const started = millisToString(data.timer.startedAt);
+ const finish = millisToString(data.timer.expectedFinish);
+ const isRolling = playback === Playback.Roll;
+ const isStopped = playback === Playback.Stop;
+ const isWaiting = data.timer.secondaryTimer !== null && data.timer.secondaryTimer > 0 && data.timer.current === null;
+ const disableButtons = isStopped || isRolling;
+ const isOvertime = data.timer.current !== null && data.timer.current < 0;
+ const hasAddedTime = Boolean(data.timer.addedTime);
const rollLabel = isRolling ? 'Roll mode active' : '';
- const addedTimeLabel = hasAddedTime ? `Added ${millisToMinutes(timerData.addedTime)} minutes` : '';
+ const addedTimeLabel = hasAddedTime ? `Added ${millisToMinutes(data.timer.addedTime)} minutes` : '';
return (
@@ -44,7 +44,7 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
-
+
{isWaiting ? (
diff --git a/apps/client/src/features/control/playback/Transport.tsx b/apps/client/src/features/control/playback/Transport.tsx
index 0eb74f38b..918a037f2 100644
--- a/apps/client/src/features/control/playback/Transport.tsx
+++ b/apps/client/src/features/control/playback/Transport.tsx
@@ -14,46 +14,33 @@ import style from './PlaybackControl.module.scss';
interface TransportProps {
playback: Playback;
- selectedId: string | null;
noEvents: boolean;
}
export default function Transport(props: TransportProps) {
- const { playback, selectedId, noEvents } = props;
- const isRolling = playback === 'roll';
+ const { playback, noEvents } = props;
+ const isRolling = playback === Playback.Roll;
+ const isStopped = playback === Playback.Stop;
return (
- setPlayback.previous()}
- disabled={isRolling || noEvents}
- >
+ setPlayback.previous()} disabled={isRolling || noEvents}>
- setPlayback.next()}
- disabled={isRolling || noEvents}
- >
+ setPlayback.next()} disabled={isRolling || noEvents}>
- setPlayback.reload()}
- disabled={!selectedId || isRolling}
- >
+ setPlayback.reload()} disabled={isStopped || isRolling}>
- setPlayback.stop()}
- disabled={!selectedId && !isRolling}
- theme='stop'
- >
+ setPlayback.stop()} disabled={isStopped && !isRolling} theme={Playback.Stop}>
diff --git a/apps/client/src/features/event-editor/EventEditor.tsx b/apps/client/src/features/event-editor/EventEditor.tsx
index 5ffc5d8c2..2c5e18569 100644
--- a/apps/client/src/features/event-editor/EventEditor.tsx
+++ b/apps/client/src/features/event-editor/EventEditor.tsx
@@ -1,20 +1,20 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import { Button, Select, Switch } from '@chakra-ui/react';
import { IoBan } from '@react-icons/all-files/io5/IoBan';
import { useAtom } from 'jotai';
import { OntimeEvent, TimerType } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
import { editorEventId } from '../../common/atoms/LocalEventSettings';
import CopyTag from '../../common/components/copy-tag/CopyTag';
import ColourInput from '../../common/components/input/colour-input/ColourInput';
import TextInput from '../../common/components/input/text-input/TextInput';
import TimeInput from '../../common/components/input/time-input/TimeInput';
-import { LoggingContext } from '../../common/context/LoggingContext';
import { useEventAction } from '../../common/hooks/useEventAction';
import useRundown from '../../common/hooks-query/useRundown';
+import { useEmitLog } from '../../common/stores/logger';
import { millisToMinutes } from '../../common/utils/dateConfig';
import getDelayTo from '../../common/utils/getDelayTo';
-import { stringFromMillis } from '../../common/utils/time';
import { calculateDuration, TimeEntryField, validateEntry } from '../../common/utils/timesManager';
import style from './EventEditor.module.scss';
@@ -25,7 +25,7 @@ export type EventEditorSubmitActions = keyof OntimeEvent | 'durationOverride';
export default function EventEditor() {
const [openId] = useAtom(editorEventId);
const { data } = useRundown();
- const { emitWarning, emitError } = useContext(LoggingContext);
+ const { emitWarning, emitError } = useEmitLog();
const { updateEvent } = useEventAction();
const [event, setEvent] = useState
(null);
const [delay, setDelay] = useState(0);
@@ -121,8 +121,8 @@ export default function EventEditor() {
const delayed = delay !== 0;
const addedTime = delayed ? `${delay >= 0 ? '+' : '-'} ${millisToMinutes(Math.abs(delay))} minutes` : null;
- const newStart = delayed ? `New start ${stringFromMillis(event.timeStart + delay)}` : null;
- const newEnd = delayed ? `New end ${stringFromMillis(event.timeEnd + delay)}` : null;
+ const newStart = delayed ? `New start ${millisToString(event.timeStart + delay)}` : null;
+ const newEnd = delayed ? `New end ${millisToString(event.timeEnd + delay)}` : null;
return (
diff --git a/apps/client/src/features/info/CollapsableInfo.tsx b/apps/client/src/features/info/CollapsableInfo.tsx
index 1a2e4929a..207052c4b 100644
--- a/apps/client/src/features/info/CollapsableInfo.tsx
+++ b/apps/client/src/features/info/CollapsableInfo.tsx
@@ -1,52 +1,21 @@
-import { useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
import CollapseBar from '../../common/components/collapse-bar/CollapseBar';
import style from './Info.module.scss';
-type TitleShape = {
- title: string;
- presenter: string;
- subtitle: string;
- note: string;
-}
-
interface CollapsableInfoProps {
title: string;
- data: TitleShape;
}
-export default function CollapsableInfo(props: CollapsableInfoProps) {
- const { title, data } = props;
+export default function CollapsableInfo(props: PropsWithChildren
) {
+ const { title, children } = props;
const [collapsed, setCollapsed] = useState(false);
return (
-
setCollapsed((prev) => !prev)}
- />
- {!collapsed && (
-
-
- Title:
- {data.title}
-
-
- Presenter:
- {data.presenter}
-
-
- Subtitle:
- {data.subtitle}
-
-
- Note:
- {data.note}
-
-
- Ontime running on port 4001
- {selected}
-
-
-
-
-
-
- );
-}
diff --git a/apps/client/src/features/info/Info.tsx b/apps/client/src/features/info/Info.tsx
new file mode 100644
index 000000000..406ed85c6
--- /dev/null
+++ b/apps/client/src/features/info/Info.tsx
@@ -0,0 +1,53 @@
+import { useInfoPanel } from '../../common/hooks/useSocket';
+
+import CollapsableInfo from './CollapsableInfo';
+import InfoLogger from './InfoLogger';
+import InfoNif from './InfoNif';
+import InfoTitles from './InfoTitles';
+
+import style from './Info.module.scss';
+
+export default function Info() {
+ const data = useInfoPanel();
+
+ const titlesNow = {
+ title: data.titles.titleNow || '',
+ subtitle: data.titles.subtitleNow || '',
+ presenter: data.titles.presenterNow || '',
+ note: data.titles.noteNow || '',
+ };
+
+ const titlesNext = {
+ title: data.titles.titleNext || '',
+ subtitle: data.titles.subtitleNext || '',
+ presenter: data.titles.presenterNext || '',
+ note: data.titles.noteNext || '',
+ };
+
+ const selected = !data.numEvents
+ ? 'No events'
+ : `Event ${data.selectedEventIndex !== null ? data.selectedEventIndex + 1 : '-'} / ${
+ data.numEvents ? data.numEvents : '-'
+ }`;
+
+ return (
+ <>
+
+ Ontime running on port 4001
+ {selected}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/client/src/features/info/InfoLogger.module.scss b/apps/client/src/features/info/InfoLogger.module.scss
index d1e86e4a9..33ba38860 100644
--- a/apps/client/src/features/info/InfoLogger.module.scss
+++ b/apps/client/src/features/info/InfoLogger.module.scss
@@ -6,12 +6,7 @@ $info-hover: $section-white;
.infoLoggerContainer {
max-height: 80%;
- margin-top: 32px;
-
- &.expanded {
- min-height: 50%;
- height: 100%
- }
+ height: 100%
}
.log {
@@ -24,6 +19,7 @@ $info-hover: $section-white;
.logEntry {
display: flex;
margin-bottom: 2px;
+
&.INFO {
color: $info-gray;
}
diff --git a/apps/client/src/features/info/InfoLogger.tsx b/apps/client/src/features/info/InfoLogger.tsx
index 9ded93754..5abab2ada 100644
--- a/apps/client/src/features/info/InfoLogger.tsx
+++ b/apps/client/src/features/info/InfoLogger.tsx
@@ -1,24 +1,22 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
import { Button } from '@chakra-ui/react';
-import CollapseBar from '../../common/components/collapse-bar/CollapseBar';
-import { Log, LoggingContext } from '../../common/context/LoggingContext';
+import { clearLogs, useLogData } from '../../common/stores/logger';
import style from './InfoLogger.module.scss';
-enum LOG_FILTER {
- USER = 'USER',
- CLIENT = 'CLIENT',
- SERVER = 'SERVER',
+enum LogFilter {
+ User = 'USER',
+ Client = 'CLIENT',
+ Server = 'SERVER',
RX = 'RX',
TX = 'TX',
- PLAYBACK = 'PLAYBACK',
+ Playback = 'PLAYBACK',
}
export default function InfoLogger() {
- const { logData, clearLog } = useContext(LoggingContext);
- const [data, setData] = useState([]);
- const [collapsed, setCollapsed] = useState(false);
+ const { logs: logData } = useLogData();
+
const [showClient, setShowClient] = useState(true);
const [showServer, setShowServer] = useState(true);
const [showRx, setShowRx] = useState(true);
@@ -26,123 +24,107 @@ export default function InfoLogger() {
const [showPlayback, setShowPlayback] = useState(true);
const [showUser, setShowUser] = useState(true);
- useEffect(() => {
- if (!logData) {
- return;
- }
+ const matchers: LogFilter[] = [];
+ if (showUser) {
+ matchers.push(LogFilter.User);
+ }
+ if (showClient) {
+ matchers.push(LogFilter.Client);
+ }
+ if (showServer) {
+ matchers.push(LogFilter.Server);
+ }
+ if (showRx) {
+ matchers.push(LogFilter.RX);
+ }
+ if (showTx) {
+ matchers.push(LogFilter.TX);
+ }
+ if (showPlayback) {
+ matchers.push(LogFilter.Playback);
+ }
- const matchers: LOG_FILTER[] = [];
- if (showUser) {
- matchers.push(LOG_FILTER.USER);
- }
- if (showClient) {
- matchers.push(LOG_FILTER.CLIENT);
- }
- if (showServer) {
- matchers.push(LOG_FILTER.SERVER);
- }
- if (showRx) {
- matchers.push(LOG_FILTER.RX);
- }
- if (showTx) {
- matchers.push(LOG_FILTER.TX);
- }
- if (showPlayback) {
- matchers.push(LOG_FILTER.PLAYBACK);
- }
+ const filteredData = logData.filter((entry) => matchers.some((match) => entry.origin === match));
- const filteredData = logData.filter((entry) => matchers.some((match) => entry.origin === match));
- setData(filteredData);
- }, [logData, showUser, showClient, showServer, showPlayback, showRx, showTx]);
-
- const disableOthers = useCallback((toEnable: LOG_FILTER) => {
- toEnable === LOG_FILTER.USER ? setShowUser(true) : setShowUser(false);
- toEnable === LOG_FILTER.CLIENT ? setShowClient(true) : setShowClient(false);
- toEnable === LOG_FILTER.SERVER ? setShowServer(true) : setShowServer(false);
- toEnable === LOG_FILTER.RX ? setShowRx(true) : setShowRx(false);
- toEnable === LOG_FILTER.TX ? setShowTx(true) : setShowTx(false);
- toEnable === LOG_FILTER.PLAYBACK ? setShowPlayback(true) : setShowPlayback(false);
+ const disableOthers = useCallback((toEnable: LogFilter) => {
+ toEnable === LogFilter.User ? setShowUser(true) : setShowUser(false);
+ toEnable === LogFilter.Client ? setShowClient(true) : setShowClient(false);
+ toEnable === LogFilter.Server ? setShowServer(true) : setShowServer(false);
+ toEnable === LogFilter.RX ? setShowRx(true) : setShowRx(false);
+ toEnable === LogFilter.TX ? setShowTx(true) : setShowTx(false);
+ toEnable === LogFilter.Playback ? setShowPlayback(true) : setShowPlayback(false);
}, []);
return (
-
-
setCollapsed((prev) => !prev)} />
- {!collapsed && (
- <>
-
-
-
-
-
-
-
-
-
-
- {data.map((logEntry) => (
- -
- {logEntry.time}
- {logEntry.origin}
- {logEntry.text}
-
- ))}
-
-
- )}
+
+
+
+
+
+
+
+
+
+
+
+ {filteredData.map((logEntry) => (
+ -
+ {logEntry.time}
+ {logEntry.origin}
+ {logEntry.text}
+
+ ))}
+
-
setCollapsed((prev) => !prev)} />
- {!collapsed && (
-
- {data?.networkInterfaces.map((nif) => (
- handleClick(nif.address)} className={style.interface}>
- {`${nif.name} - ${nif.address}`}
-
-
- ))}
-
- )}
+
+ {data?.networkInterfaces.map((nif) => (
+ handleClick(nif.address)} className={style.interface}>
+ {`${nif.name} - ${nif.address}`}
+
+
+ ))}
);
}
diff --git a/apps/client/src/features/info/InfoTitles.tsx b/apps/client/src/features/info/InfoTitles.tsx
new file mode 100644
index 000000000..20b7bdb39
--- /dev/null
+++ b/apps/client/src/features/info/InfoTitles.tsx
@@ -0,0 +1,36 @@
+import style from './Info.module.scss';
+
+type TitleShape = {
+ title: string;
+ presenter: string;
+ subtitle: string;
+ note: string;
+};
+
+interface InfoTitleProps {
+ data: TitleShape;
+}
+
+export default function InfoTitles(props: InfoTitleProps) {
+ const { data } = props;
+ return (
+
+
+ Title:
+ {data.title}
+
+
+ Presenter:
+ {data.presenter}
+
+
+ Subtitle:
+ {data.subtitle}
+
+
+ Note:
+ {data.note}
+
+
-
- |
- Alias
- |
- Page URL |
-
-
- | mylower |
- lower?bg=ff2&text=f00&size=0.6&transition=5 |
-
+
+ |
+ Alias
+ |
+ Page URL |
+
+
+ | mylower |
+ lower?bg=ff2&text=f00&size=0.6&transition=5 |
+
@@ -212,16 +216,16 @@ export default function AliasesModal() {
eg. an unattended screen that you would need to change route from the app
-
- |
- Alias
- |
- Page URL |
-
-
- | thirdfloor |
- public |
-
+
+ |
+ Alias
+ |
+ Page URL |
+
+
+ | thirdfloor |
+ public |
+
{`Alias error: ${alias.aliasError}`}
- ) : null}
- {alias.urlError ? (
- {`URL error: ${alias.urlError}`}
- ) : null}
+ {alias.aliasError ? {`Alias error: ${alias.aliasError}`}
: null}
+ {alias.urlError ? {`URL error: ${alias.urlError}`}
: null}
-