{
if (socket == null) return;
// Handle presenter messages
socket.on('messages-presenter', (data) => {
- setPres({ ...data });
+ setPres({...data});
});
// Handle public messages
socket.on('messages-public', (data) => {
- setPubl({ ...data });
+ setPubl({...data});
});
// Handle lower third messages
socket.on('messages-lower', (data) => {
- setLower({ ...data });
+ setLower({...data});
+ });
+
+ // Handle lower third messages
+ socket.on('onAir', (data) => {
+ setonAir(data);
});
// Ask for up to date data
socket.emit('get-messages');
+ // Ask for onAir state
+ socket.emit('get-onAir');
// Clear listeners
return () => {
socket.off('messages-public');
socket.off('messages-presenter');
socket.off('messages-lower');
+ socket.off('onAir');
};
}, [socket]);
@@ -99,38 +109,54 @@ export default function MessageControl() {
case 'toggle-lower-visible':
socket.emit('set-lower-visible', !lower.visible);
break;
-
+ case 'toggle-onAir':
+ socket.emit('set-onAir', !onAir);
+ break;
default:
break;
}
};
return (
-
- messageControl('pres-text', event)}
- actionHandler={() => messageControl('toggle-pres-visible')}
- />
- messageControl('publ-text', event)}
- actionHandler={() => messageControl('toggle-publ-visible')}
- />
- messageControl('lower-text', event)}
- actionHandler={() => messageControl('toggle-lower-visible')}
- />
-
+ <>
+
+ messageControl('pres-text', event)}
+ actionHandler={() => messageControl('toggle-pres-visible')}
+ />
+ messageControl('publ-text', event)}
+ actionHandler={() => messageControl('toggle-publ-visible')}
+ />
+ messageControl('lower-text', event)}
+ actionHandler={() => messageControl('toggle-lower-visible')}
+ />
+
+
+ messageControl('toggle-onAir')}>
+ On Air?
+
+
+ {`/ontime/offAir << OSC >> /ontime/onAir`}
+
+
+
);
}
diff --git a/client/src/features/control/MessageControl.module.css b/client/src/features/control/MessageControl.module.css
deleted file mode 100644
index 6c67eeb37..000000000
--- a/client/src/features/control/MessageControl.module.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.messageContainer {
- background-color: rgba(0, 0, 0, 0.05);
- border: 1px solid rgba(0, 0, 0, 0.05);
- border-radius: 4px;
- display: flex;
- flex-direction: column;
- gap: 0.5em;
- padding: 0.5em;
-}
-
-.inputItems {
- display: grid;
- grid-template-columns: 1fr auto;
- gap: 1em;
-}
-
-.label {
- padding: 0;
- margin: 0;
- font-size: 0.9em;
- color: #ccc;
-}
-
-.inline {
- border-radius: 4px;
- background-color: rgba(255, 255, 255, 0.05);
- border: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.padleft {
- padding-left: 0.5em;
-}
diff --git a/client/src/features/control/MessageControl.module.scss b/client/src/features/control/MessageControl.module.scss
new file mode 100644
index 000000000..52889d3fb
--- /dev/null
+++ b/client/src/features/control/MessageControl.module.scss
@@ -0,0 +1,54 @@
+.messageContainer,
+.onAirToggle {
+ background-color: rgba(0, 0, 0, 0.05);
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ border-radius: 4px;
+ display: flex;
+ gap: 0.5em;
+ padding: 0.5em;
+
+}
+
+.messageContainer {
+ flex-direction: column;
+
+ .inputItems {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ gap: 1em;
+ }
+ .label {
+ padding: 0;
+ margin: 0;
+ font-size: 0.9em;
+ color: #ccc;
+ }
+ .inline {
+ border-radius: 4px;
+ background-color: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ }
+ .padleft {
+ padding-left: 0.5em;
+ }
+}
+
+.onAirToggle {
+ margin-top: 1em;
+ display: flex;
+ gap: 1em;
+ align-items: center;
+ line-height: 3em;
+
+ .onAirLabel {
+ font-size: 1.2em;
+ }
+ .oscLabel {
+ color: #4bffabcc;
+ font-size: 0.8em;
+ float: right;
+ padding-right: 1em;
+ -webkit-user-select: text;
+ user-select: text;
+ }
+}
diff --git a/client/src/features/viewers/ViewWrapper.jsx b/client/src/features/viewers/ViewWrapper.jsx
index 6d90c0a7e..7f58dea19 100644
--- a/client/src/features/viewers/ViewWrapper.jsx
+++ b/client/src/features/viewers/ViewWrapper.jsx
@@ -10,13 +10,9 @@ const withSocket = (Component) => {
const WrappedComponent = (props) => {
const {
data: eventsData,
- status: eventsDataStatus,
- isError: eventsDataIsError,
} = useFetch(EVENTS_TABLE, fetchAllEvents);
const {
data: genData,
- status: genDataStatus,
- isError: genDataIsError,
} = useFetch(EVENT_TABLE, fetchEvent);
const [publicEvents, setPublicEvents] = useState([]);
@@ -58,6 +54,7 @@ const withSocket = (Component) => {
presenterNext: '',
});
const [selectedId, setSelectedId] = useState(null);
+ const [nextId, setNextId] = useState(null);
const [publicSelectedId, setPublicSelectedId] = useState(null);
const [general, setGeneral] = useState({
title: '',
@@ -67,6 +64,7 @@ const withSocket = (Component) => {
endMessage: '',
});
const [playback, setPlayback] = useState(null);
+ const [onAir, setOnAir] = useState(false);
// Ask for update on load
useEffect(() => {
@@ -96,6 +94,9 @@ const withSocket = (Component) => {
socket.on('playstate', (data) => {
setPlayback(data);
});
+ socket.on('onAir', (data) => {
+ setOnAir(data);
+ });
// Handle titles
socket.on('titles', (data) => {
@@ -112,6 +113,9 @@ const withSocket = (Component) => {
socket.on('publicselected-id', (data) => {
setPublicSelectedId(data);
});
+ socket.on('next-id', (data) => {
+ setNextId(data);
+ });
// Ask for up to date data
socket.emit('get-messages');
@@ -124,6 +128,7 @@ const withSocket = (Component) => {
// ask for playstate
socket.emit('get-playstate');
+ socket.emit('get-onAir')
// Ask for up titles
socket.emit('get-titles');
@@ -131,6 +136,7 @@ const withSocket = (Component) => {
// Ask for up selected
socket.emit('get-selected-id');
+ socket.emit('get-next-id');
// Clear listeners
return () => {
@@ -139,9 +145,11 @@ const withSocket = (Component) => {
socket.off('messages-lower');
socket.off('timer');
socket.off('playstate');
+ socket.off('onAir');
socket.off('titles');
socket.off('publictitles');
socket.off('selected-id');
+ socket.emit('next-id');
};
}, [socket]);
@@ -224,6 +232,7 @@ const withSocket = (Component) => {
...timer,
finished: playback === 'start' && timer.running <= 0 && timer.startedAt,
clock: stringFromMillis(timer.clock),
+ clockNoSeconds: stringFromMillis(timer.clock, false),
playstate: playback,
};
@@ -240,7 +249,9 @@ const withSocket = (Component) => {
backstageEvents={backstageEvents}
selectedId={selectedId}
publicSelectedId={publicSelectedId}
+ nextId={nextId}
general={general}
+ onAir={onAir}
/>
);
};
diff --git a/client/src/features/viewers/backstage/StageManager.jsx b/client/src/features/viewers/backstage/StageManager.jsx
index 3e843b2a1..39d507a83 100644
--- a/client/src/features/viewers/backstage/StageManager.jsx
+++ b/client/src/features/viewers/backstage/StageManager.jsx
@@ -6,6 +6,7 @@ import NavLogo from 'common/components/nav/NavLogo';
import { useEffect, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import TitleSide from 'common/components/views/TitleSide';
+import {getEventsWithDelay} from "../../../common/utils/eventsManager";
export default function StageManager(props) {
const { publ, title, time, backstageEvents, selectedId, general } = props;
@@ -20,23 +21,9 @@ export default function StageManager(props) {
useEffect(() => {
if (backstageEvents == null) return;
- let events = [...backstageEvents];
+ setFilteredEvents(getEventsWithDelay(backstageEvents));
- // Add running delay
- let delay = 0;
- for (const e of events) {
- if (e.type === 'block') delay = 0;
- else if (e.type === 'delay') delay = delay + e.duration;
- else if (e.type === 'event' && delay > 0) {
- e.timeStart += delay;
- e.timeEnd += delay;
- }
- }
-
- // filter just events
- let filtered = events.filter((e) => e.type === 'event');
-
- setFilteredEvents(filtered);
+ console.log('hhh', getEventsWithDelay(backstageEvents))
}, [backstageEvents]);
// Format messages
diff --git a/client/src/features/viewers/presenter/PresenterView.jsx b/client/src/features/viewers/presenter/PresenterView.jsx
index 59957f1f1..7e185b1e1 100644
--- a/client/src/features/viewers/presenter/PresenterView.jsx
+++ b/client/src/features/viewers/presenter/PresenterView.jsx
@@ -11,7 +11,7 @@ export default function PresenterView(props) {
// Set window title
useEffect(() => {
- document.title = 'ontime - Speaker Screen';
+ document.title = 'ontime - Presenter Screen';
}, []);
const showOverlay = pres.text !== '' && pres.visible;
diff --git a/client/src/features/viewers/production/lower/LowerClean.jsx b/client/src/features/viewers/production/lower/LowerClean.jsx
index fb9fc8c40..b26dec608 100644
--- a/client/src/features/viewers/production/lower/LowerClean.jsx
+++ b/client/src/features/viewers/production/lower/LowerClean.jsx
@@ -1,6 +1,7 @@
import { AnimatePresence, motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import style from './LowerClean.module.css';
+import NavLogo from "../../../../common/components/nav/NavLogo";
export default function LowerClean(props) {
const { lower, title, options } = props;
@@ -86,6 +87,9 @@ export default function LowerClean(props) {
fontSize: `${sizeMultiplier}vh`,
}}
>
+
+
+
{showLower && (
+
+
+
{showLower && (
{
+ document.title = 'ontime - Studio Clock';
+ }, []);
+
+ // Prepare event list
+ // Todo: useMemo()
+ useEffect(() => {
+ if (backstageEvents == null) return;
+
+ const events = backstageEvents.filter((e) => e.type === 'event');
+
+ let e = trimEventlist(events, selectedId, MAX_TITLES);
+ e = formatEventList(e, selectedId, nextId);
+ setSchedule(e);
+
+ }, [backstageEvents, selectedId, nextId]);
+
+ return (
+
+
+
+
{time.clockNoSeconds}
+
+ {title.titleNext}
+
+
0 ? style.nextCountdown: style.nextCountdown__overtime}>
+ {selectedId != null && formatDisplay(time.running)}
+
+
+ {hoursIndicators.map(i => (
+
+ )
+ )}
+ {minutesIndicators.map(i => (
+
+ )
+ )}
+
+
+
+
ON AIR
+
+
+ {schedule.map((s) => (
+ -
+ {`${s.time} ${s.title}`}
+
+ ))
+ }
+
+
+
+