diff --git a/apps/client/src/common/components/view-params-editor/constants.ts b/apps/client/src/common/components/view-params-editor/constants.ts index 74f94ec76..ab86c440f 100644 --- a/apps/client/src/common/components/view-params-editor/constants.ts +++ b/apps/client/src/common/components/view-params-editor/constants.ts @@ -249,12 +249,11 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [ export const getLowerThirdOptions = (customFields: CustomFields): ParamField[] => { const topSourceOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', - lowerMsg: 'Lower Third Message', }); const bottomSourceOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', - lowerMsg: 'Lower Third Message', + none: 'None', }); return [ @@ -267,7 +266,7 @@ export const getLowerThirdOptions = (customFields: CustomFields): ParamField[] = event: 'Event Load', manual: 'Manual', }, - defaultValue: 'event', + defaultValue: 'manual', }, { id: 'top-src', @@ -283,7 +282,7 @@ export const getLowerThirdOptions = (customFields: CustomFields): ParamField[] = description: 'Select the data source for the bottom element', type: 'option', values: bottomSourceOptions, - defaultValue: 'lowerMsg', + defaultValue: 'none', }, { id: 'top-colour', diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts index 2f41b3804..287e07520 100644 --- a/apps/client/src/common/hooks/useSocket.ts +++ b/apps/client/src/common/hooks/useSocket.ts @@ -25,7 +25,6 @@ export const useOperator = () => { export const useMessageControl = () => { const featureSelector = (state: RuntimeStore) => ({ timer: state.message.timer, - lower: state.message.lower, external: state.message.external, onAir: state.onAir, }); @@ -36,8 +35,6 @@ export const useMessageControl = () => { export const setMessage = { timerText: (payload: string) => socketSendJson('message', { timer: { text: payload } }), timerVisible: (payload: boolean) => socketSendJson('message', { timer: { visible: payload } }), - lowerText: (payload: string) => socketSendJson('message', { lower: { text: payload } }), - lowerVisible: (payload: boolean) => socketSendJson('message', { lower: { visible: payload } }), timerBlink: (payload: boolean) => socketSendJson('message', { timer: { blink: payload } }), timerBlackout: (payload: boolean) => socketSendJson('message', { timer: { blackout: payload } }), }; diff --git a/apps/client/src/common/stores/runtime.ts b/apps/client/src/common/stores/runtime.ts index c2d8def6f..e72e39b32 100644 --- a/apps/client/src/common/stores/runtime.ts +++ b/apps/client/src/common/stores/runtime.ts @@ -23,10 +23,6 @@ export const runtimeStorePlaceholder: RuntimeStore = { blink: false, blackout: false, }, - lower: { - text: '', - visible: false, - }, external: { text: '', visible: false, diff --git a/apps/client/src/features/control/message/InputRow.module.scss b/apps/client/src/features/control/message/InputRow.module.scss index 877549f99..769b4eaf2 100644 --- a/apps/client/src/features/control/message/InputRow.module.scss +++ b/apps/client/src/features/control/message/InputRow.module.scss @@ -1,3 +1,5 @@ +@import "./MessageControl.module.scss"; + .inputItems { display: grid; grid-template-columns: 1fr auto; @@ -6,10 +8,5 @@ } .label { - font-size: $inner-section-text-size; - color: $label-gray; - - &.active { - color: $action-text-color; - } + @extend .label; } diff --git a/apps/client/src/features/control/message/MessageControl.module.scss b/apps/client/src/features/control/message/MessageControl.module.scss index b2040d597..3419afec2 100644 --- a/apps/client/src/features/control/message/MessageControl.module.scss +++ b/apps/client/src/features/control/message/MessageControl.module.scss @@ -10,3 +10,19 @@ gap: $element-spacing; margin-top: -0.5rem; } + +.singleAction { + display: flex; + flex-direction: column; + gap: $element-spacing; + margin-top: $element-inner-spacing; +} + +.label { + font-size: $inner-section-text-size; + color: $label-gray; + + &.active { + color: $action-text-color; + } +} diff --git a/apps/client/src/features/control/message/MessageControl.tsx b/apps/client/src/features/control/message/MessageControl.tsx index 21dc84c86..ae08096b7 100644 --- a/apps/client/src/features/control/message/MessageControl.tsx +++ b/apps/client/src/features/control/message/MessageControl.tsx @@ -17,21 +17,14 @@ export default function MessageControl() { const message = useMessageControl(); const blink = message.timer.blink; const blackout = message.timer.blackout; + return (
(Component: ComponentType
) => {
external={message.external}
general={project}
isMirrored={isMirrored}
- lower={message.lower}
nextId={nextId}
onAir={onAir}
pres={message.timer}
diff --git a/apps/client/src/features/viewers/common/viewUtils.ts b/apps/client/src/features/viewers/common/viewUtils.ts
index a3b44888f..4b2159ac5 100644
--- a/apps/client/src/features/viewers/common/viewUtils.ts
+++ b/apps/client/src/features/viewers/common/viewUtils.ts
@@ -41,10 +41,7 @@ export function isStringBoolean(text: string | null) {
* Considers custom fields
*/
export function getPropertyValue(event: OntimeEvent | null, property: MaybeString): string | undefined {
- if (!event) {
- return undefined;
- }
- if (typeof property !== 'string') {
+ if (!event || typeof property !== 'string' || property === 'none') {
return undefined;
}
diff --git a/apps/client/src/features/viewers/lower-thirds/LowerThird.scss b/apps/client/src/features/viewers/lower-thirds/LowerThird.scss
index b17ffe078..8a5797803 100644
--- a/apps/client/src/features/viewers/lower-thirds/LowerThird.scss
+++ b/apps/client/src/features/viewers/lower-thirds/LowerThird.scss
@@ -72,6 +72,9 @@
font-family: var(--lowerThird-font-family-override), Lato, Arial, sans-serif;
text-align: var(--lowerThird-text-align-override, left);
white-space: nowrap;
+ &::after {
+ content: '\200b';
+ }
}
.data-top {
@@ -86,7 +89,6 @@
}
}
-
@keyframes in {
0% {
transform: translateX(-100%);
diff --git a/apps/client/src/features/viewers/lower-thirds/LowerThird.tsx b/apps/client/src/features/viewers/lower-thirds/LowerThird.tsx
index 5c6b3c348..34dcf582d 100644
--- a/apps/client/src/features/viewers/lower-thirds/LowerThird.tsx
+++ b/apps/client/src/features/viewers/lower-thirds/LowerThird.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
-import { CustomFields, Message, OntimeEvent, ViewSettings } from 'ontime-types';
+import { CustomFields, OntimeEvent, ViewSettings } from 'ontime-types';
import { overrideStylesURL } from '../../../common/api/constants';
import { getLowerThirdOptions } from '../../../common/components/view-params-editor/constants';
@@ -11,14 +11,8 @@ import { getPropertyValue } from '../common/viewUtils';
import './LowerThird.scss';
-enum TriggerType {
- Event = 'event',
- Manual = 'manual',
-}
-
type LowerOptions = {
width: number;
- trigger: TriggerType;
topSrc: string;
bottomSrc: string;
topColour: string;
@@ -38,12 +32,10 @@ interface LowerProps {
customFields: CustomFields;
eventNow: OntimeEvent | null;
viewSettings: ViewSettings;
- lower: Message;
}
const defaultOptions: Readonly