mirror of
https://github.com/cpvalente/ontime.git
synced 2026-09-01 04:19:12 +00:00
V3 (#657)
* refactor: cleanup routes * style: smaller base font * chore: upgrade dependencies * chore: lock node version to electron * refactor: pass HTTP to integration controller (#652) * refactor: deprecate onair control * refactor: remove playback router * Several project files user folder (#617) * chore: automated screenshots (#667) * feat: app settings (#658) * refactor: remove deprecated event data (#674) * Studio clock (#663) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Feat: reorder events with alt+ctrl + arrow up/down (#645) * Warning and danger per event (#677) --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> * refactor: stabilise actionHandler (#683) Co-authored-by: Fabian Posenau <fabian@fphome.de> * improvement: hide seconds (#675) * wip: overview (#688) * fix: focus cursor (#695) * refactor: update lower third (#665) * Refactor/time formatting (#696) --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * feat: multiple selection (#703) --------- Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com> Co-authored-by: Alex <ac@omnivox.dk> * fix: test - go to `Edit mode` befor tying to click `Event options` button (#708) * refactor: runtime service (#715) * fix: issue with loosing cursor position on message (#719) * remove info panel (#721) * Event editor continue (#722) * update API - part (#709) --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * refactor: update timers (#729) * feat: many timers (#706) --------- Co-authored-by: arc-alex <ac@omnivox.dk> * refactor: excel cleanup (#734) * refactor: allow import of blocks and skip import (#735) * Project manager (#697) * refactor: UI for linking events (#763) * upgraded pipeline actions (#777) * Over under (#771) * custom fields (#744) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Sheets settings (#774) --------- Co-authored-by: arc-alex <ac@omnivox.dk> * style: tweaks to lower thirds (#785) * refactor: delays account for gaps (#784) * refactor: partial state updates (#780) * feat: generate crash report (#787) * Sheet use limited input device auth flow (#782) --------- Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Custom fields views (#789) * refactor: deprecate presenter and subtitle (#795) * refactor: organise API around resources (#798) --------- Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com> * Time to end (#804) * Skip fixes (#805) * fix: onair derives from playback * Param nav (#822) --------- Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk> * refactor: download files from interface (#831) * Quick options (#814) * End pause (#832) * chore: bump node version in docker (#834) * refactor: follow in run mode (#840) * fix: uncaught error in http integration (#837) * Apply project (#843) Co-authored-by: Matteo Gheza <matteo.gheza07@gmail.com> Co-authored-by: Ary <arylmoraesn@gmail.com> Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk> Co-authored-by: Fabian Posenau <19673098+kellhogs@users.noreply.github.com> Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: Alex Rohleder <alexrohleder96@gmail.com> Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com> Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com> Co-authored-by: Fabian Posenau <fabianpos99+github@gmail.com>
This commit is contained in:
Carlos Valente
GitHub
@@ -0,0 +1,231 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { CustomFields, Message, OntimeEvent, ViewSettings } from 'ontime-types';
|
||||
|
||||
import { overrideStylesURL } from '../../../common/api/constants';
|
||||
import { getLowerThirdOptions } from '../../../common/components/view-params-editor/constants';
|
||||
import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
|
||||
import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
|
||||
import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
|
||||
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;
|
||||
bottomColour: string;
|
||||
topBg: string;
|
||||
bottomBg: string;
|
||||
topSize: string;
|
||||
bottomSize: string;
|
||||
transition: number;
|
||||
delay: number;
|
||||
key: string;
|
||||
lineColour: string;
|
||||
lineHeight: string;
|
||||
};
|
||||
|
||||
interface LowerProps {
|
||||
customFields: CustomFields;
|
||||
eventNow: OntimeEvent | null;
|
||||
viewSettings: ViewSettings;
|
||||
lower: Message;
|
||||
}
|
||||
|
||||
const defaultOptions: Readonly<LowerOptions> = {
|
||||
width: 45,
|
||||
trigger: TriggerType.Event,
|
||||
topSrc: 'title',
|
||||
bottomSrc: 'lowerMsg',
|
||||
topColour: '000000ff',
|
||||
bottomColour: '000000ff',
|
||||
topBg: '00000000',
|
||||
bottomBg: '00000000',
|
||||
topSize: '65px',
|
||||
bottomSize: '40px',
|
||||
transition: 3,
|
||||
delay: 3,
|
||||
key: 'ffffffff',
|
||||
lineColour: 'ff0000ff',
|
||||
lineHeight: '0.4em',
|
||||
};
|
||||
|
||||
export default function LowerThird(props: LowerProps) {
|
||||
const { customFields, eventNow, lower, viewSettings } = props;
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const options = useMemo(() => {
|
||||
const newOptions = { ...defaultOptions };
|
||||
|
||||
const width = searchParams.get('width');
|
||||
if (width !== null) {
|
||||
newOptions.width = Number(width);
|
||||
}
|
||||
|
||||
const trigger = Object.values(TriggerType).find((s) => s === searchParams.get('trigger'));
|
||||
if (trigger) {
|
||||
newOptions.trigger = trigger;
|
||||
}
|
||||
|
||||
const topSrc = searchParams.get('top-src');
|
||||
if (topSrc) {
|
||||
newOptions.topSrc = topSrc;
|
||||
}
|
||||
|
||||
const bottomSrc = searchParams.get('bottom-src');
|
||||
if (bottomSrc) {
|
||||
newOptions.bottomSrc = bottomSrc;
|
||||
}
|
||||
|
||||
const topColour = searchParams.get('top-colour');
|
||||
if (topColour !== null) {
|
||||
newOptions.topColour = topColour;
|
||||
}
|
||||
|
||||
const bottomColour = searchParams.get('bottom-colour');
|
||||
if (bottomColour !== null) {
|
||||
newOptions.bottomColour = bottomColour;
|
||||
}
|
||||
|
||||
const topBg = searchParams.get('top-bg');
|
||||
if (topBg !== null) {
|
||||
newOptions.topBg = topBg;
|
||||
}
|
||||
|
||||
const bottomBg = searchParams.get('bottom-bg');
|
||||
if (bottomBg !== null) {
|
||||
newOptions.bottomBg = bottomBg;
|
||||
}
|
||||
|
||||
const topSize = searchParams.get('top-size');
|
||||
if (topSize !== null) {
|
||||
newOptions.topSize = topSize;
|
||||
}
|
||||
|
||||
const bottomSize = searchParams.get('bottom-size');
|
||||
if (bottomSize && bottomSize != newOptions.bottomSize) {
|
||||
newOptions.bottomSize = bottomSize;
|
||||
}
|
||||
|
||||
const transition = searchParams.get('transition');
|
||||
if (transition !== null) {
|
||||
newOptions.transition = Number(transition);
|
||||
}
|
||||
|
||||
const delay = searchParams.get('delay');
|
||||
if (delay !== null) {
|
||||
newOptions.delay = Number(delay);
|
||||
}
|
||||
|
||||
const key = searchParams.get('key');
|
||||
if (key !== null) {
|
||||
newOptions.key = key;
|
||||
}
|
||||
|
||||
const lineColour = searchParams.get('line-colour');
|
||||
if (lineColour !== null) {
|
||||
newOptions.lineColour = lineColour;
|
||||
}
|
||||
|
||||
return newOptions;
|
||||
}, [searchParams]);
|
||||
|
||||
const [playState, setPlayState] = useState<'pre' | 'in' | 'out'>('pre');
|
||||
useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
|
||||
|
||||
useWindowTitle('Lower Third');
|
||||
|
||||
const trigger = useMemo(() => {
|
||||
if (options.trigger === TriggerType.Event) {
|
||||
return eventNow?.id;
|
||||
} else if (options.trigger === TriggerType.Manual) {
|
||||
return lower.visible;
|
||||
}
|
||||
return false;
|
||||
}, [eventNow?.id, lower.visible, options.trigger]);
|
||||
|
||||
// coordinate load-unload of lower third
|
||||
useEffect(() => {
|
||||
if (options.trigger === TriggerType.Event && trigger) {
|
||||
setPlayState('in');
|
||||
const animateOutInMs = options.delay * 1000 + options.transition * 1000;
|
||||
const timeout = setTimeout(() => {
|
||||
setPlayState('out');
|
||||
}, animateOutInMs);
|
||||
return () => clearTimeout(timeout);
|
||||
} else if (options.trigger === TriggerType.Manual) {
|
||||
setPlayState(trigger ? 'in' : 'out');
|
||||
} else {
|
||||
setPlayState('pre');
|
||||
}
|
||||
return () => null;
|
||||
}, [options.delay, options.transition, options.trigger, trigger]);
|
||||
|
||||
const topText = useMemo(() => {
|
||||
if (options.topSrc === 'lowerMsg') {
|
||||
return lower.text;
|
||||
}
|
||||
return getPropertyValue(eventNow, options.topSrc) ?? '';
|
||||
}, [eventNow, lower.text, options]);
|
||||
|
||||
const bottomText = useMemo(() => {
|
||||
if (options.bottomSrc === 'lowerMsg') {
|
||||
return lower.text;
|
||||
}
|
||||
return getPropertyValue(eventNow, options.bottomSrc) ?? '';
|
||||
}, [eventNow, lower.text, options]);
|
||||
|
||||
const transition = `${options.transition}s`;
|
||||
|
||||
return (
|
||||
<div className='lower-third' style={{ backgroundColor: `#${options.key}` }}>
|
||||
<ViewParamsEditor paramFields={getLowerThirdOptions(customFields)} />
|
||||
<div
|
||||
className={`container container--${playState}`}
|
||||
style={{ minWidth: `${options.width}vw`, animationDuration: transition }}
|
||||
>
|
||||
<div className='clip'>
|
||||
<div
|
||||
className='data-top'
|
||||
style={{
|
||||
animationDuration: transition,
|
||||
color: `#${options.topColour}`,
|
||||
backgroundColor: `#${options.topBg}`,
|
||||
fontSize: options.topSize,
|
||||
}}
|
||||
>
|
||||
{topText}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className='line'
|
||||
style={{
|
||||
backgroundColor: `#${options.lineColour}`,
|
||||
}}
|
||||
/>
|
||||
<div className='clip'>
|
||||
<div
|
||||
className='data-bottom'
|
||||
style={{
|
||||
animationDuration: transition,
|
||||
color: `#${options.bottomColour}`,
|
||||
backgroundColor: `#${options.bottomBg}`,
|
||||
fontSize: options.bottomSize,
|
||||
}}
|
||||
>
|
||||
{bottomText}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user