From 817ebcdd26a1e993666cf7c8a990684721da84ae Mon Sep 17 00:00:00 2001 From: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Date: Wed, 24 Apr 2024 20:13:51 +0200 Subject: [PATCH] Event defaults (#910) * chore: cleanup outdated comment * style: align blocks * style: use ui-black background * chore: clarify docs * feat: event defaults * chore: cleanup --- .../client/src/common/hooks/useEventAction.ts | 16 +++- .../src/common/stores/editorSettings.ts | 95 +++++++++++-------- .../app-settings/AppSettings.module.scss | 2 +- .../panel/general-panel/ViewSettingsForm.tsx | 2 +- .../interface-panel/EditorSettingsForm.tsx | 69 +++++++++++--- apps/client/src/features/rundown/Rundown.tsx | 8 +- .../src/features/rundown/RundownEntry.tsx | 9 -- .../src/features/rundown/_blockMixins.scss | 6 +- .../block-block/BlockBlock.module.scss | 1 + .../delay-block/DelayBlock.module.scss | 1 + apps/client/src/theme/ontimeTextInputs.ts | 2 +- 11 files changed, 133 insertions(+), 78 deletions(-) diff --git a/apps/client/src/common/hooks/useEventAction.ts b/apps/client/src/common/hooks/useEventAction.ts index 9ec11f7da..67ed5a00b 100644 --- a/apps/client/src/common/hooks/useEventAction.ts +++ b/apps/client/src/common/hooks/useEventAction.ts @@ -25,7 +25,7 @@ import { forgivingStringToMillis } from '../utils/dateConfig'; */ export const useEventAction = () => { const queryClient = useQueryClient(); - const { defaultPublic, linkPrevious, defaultDuration } = useEditorSettings((state) => state.eventSettings); + const { defaultPublic, linkPrevious, defaultDuration, defaultWarnTime, defaultDangerTime } = useEditorSettings(); /** * Calls mutation to add new event @@ -48,6 +48,8 @@ export const useEventAction = () => { defaultPublic: boolean; linkPrevious: boolean; lastEventId: string; + defaultWarnTime: number; + defaultDangerTime: number; }>; /** @@ -64,6 +66,8 @@ export const useEventAction = () => { defaultPublic: options?.defaultPublic ?? defaultPublic, lastEventId: options?.lastEventId, linkPrevious: options?.linkPrevious ?? linkPrevious, + defaultWarnTime, + defaultDangerTime, }; if (applicationOptions.linkPrevious && applicationOptions?.lastEventId) { @@ -85,6 +89,14 @@ export const useEventAction = () => { if (newEvent.duration === undefined && newEvent.timeEnd === undefined) { newEvent.duration = forgivingStringToMillis(defaultDuration); } + + if (newEvent.timeDanger === undefined) { + newEvent.timeDanger = forgivingStringToMillis(defaultDangerTime); + } + + if (newEvent.timeWarning === undefined) { + newEvent.timeWarning = forgivingStringToMillis(defaultWarnTime); + } } // handle adding options that concern all event type @@ -98,7 +110,7 @@ export const useEventAction = () => { logAxiosError('Failed adding event', error); } }, - [_addEventMutation, defaultDuration, defaultPublic, linkPrevious], + [_addEventMutation, defaultDangerTime, defaultDuration, defaultPublic, defaultWarnTime, linkPrevious, queryClient], ); /** diff --git a/apps/client/src/common/stores/editorSettings.ts b/apps/client/src/common/stores/editorSettings.ts index 0a74311f0..405c9718d 100644 --- a/apps/client/src/common/stores/editorSettings.ts +++ b/apps/client/src/common/stores/editorSettings.ts @@ -2,55 +2,68 @@ import { create } from 'zustand'; import { booleanFromLocalStorage } from '../utils/localStorage'; -type EditorSettings = { - linkPrevious: boolean; - defaultPublic: boolean; +type EditorSettingsStore = { defaultDuration: string; + linkPrevious: boolean; + defaultWarnTime: string; + defaultDangerTime: string; + defaultPublic: boolean; + setDefaultDuration: (defaultDuration: string) => void; + setLinkPrevious: (linkPrevious: boolean) => void; + setWarnTime: (warnTime: string) => void; + setDangerTime: (dangerTime: string) => void; + setDefaultPublic: (defaultPublic: boolean) => void; }; -type EditorSettingsStore = { - eventSettings: EditorSettings; - setLocalEventSettings: (newState: EditorSettings) => void; - setLinkPrevious: (linkPrevious: boolean) => void; - setDefaultPublic: (defaultPublic: boolean) => void; - setDefaultDuration: (defaultDuration: string) => void; +export const editorSettingsDefaults = { + duration: '00:10:00', + linkPrevious: true, + warnTime: '00:02:00', // 120000 same as backend + dangerTime: '00:01:00', // 60000 same as backend + isPublic: true, }; enum EditorSettingsKeys { - LinkPrevious = 'ontime-link-previous', - DefaultPublic = 'ontime-default-public', DefaultDuration = 'ontime-default-duration', + LinkPrevious = 'ontime-link-previous', + DefaultWarnTime = 'ontime-default-warn-time', + DefaultDangerTime = 'ontime-default-danger-time', + DefaultPublic = 'ontime-default-public', } -export const useEditorSettings = create((set) => ({ - eventSettings: { - linkPrevious: booleanFromLocalStorage(EditorSettingsKeys.LinkPrevious, true), - defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.DefaultPublic, true), - defaultDuration: localStorage.getItem(EditorSettingsKeys.DefaultDuration) ?? '00:10:00', - }, +export const useEditorSettings = create((set) => { + return { + defaultDuration: localStorage.getItem(EditorSettingsKeys.DefaultDuration) ?? editorSettingsDefaults.duration, + linkPrevious: booleanFromLocalStorage(EditorSettingsKeys.LinkPrevious, editorSettingsDefaults.linkPrevious), + defaultWarnTime: localStorage.getItem(EditorSettingsKeys.DefaultWarnTime) ?? editorSettingsDefaults.warnTime, + defaultDangerTime: localStorage.getItem(EditorSettingsKeys.DefaultDangerTime) ?? editorSettingsDefaults.dangerTime, + defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.DefaultPublic, editorSettingsDefaults.isPublic), - setLocalEventSettings: (value) => - set(() => { - localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(value.linkPrevious)); - localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(value.defaultPublic)); - return { eventSettings: value }; - }), + setDefaultDuration: (defaultDuration) => + set(() => { + localStorage.setItem(EditorSettingsKeys.DefaultDuration, String(defaultDuration)); + return { defaultDuration }; + }), - setLinkPrevious: (linkPrevious) => - set((state) => { - localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(linkPrevious)); - return { eventSettings: { ...state.eventSettings, linkPrevious } }; - }), - - setDefaultPublic: (defaultPublic) => - set((state) => { - localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic)); - return { eventSettings: { ...state.eventSettings, defaultPublic } }; - }), - - setDefaultDuration: (defaultDuration) => - set((state) => { - localStorage.setItem(EditorSettingsKeys.DefaultDuration, String(defaultDuration)); - return { eventSettings: { ...state.eventSettings, defaultDuration } }; - }), -})); + setLinkPrevious: (linkPrevious) => + set(() => { + localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(linkPrevious)); + return { linkPrevious }; + }), + setWarnTime: (defaultWarnTime) => + set(() => { + localStorage.setItem(EditorSettingsKeys.DefaultWarnTime, String(defaultWarnTime)); + return { defaultWarnTime }; + }), + setDangerTime: (defaultDangerTime) => + set(() => { + localStorage.setItem(EditorSettingsKeys.DefaultDangerTime, String(defaultDangerTime)); + return { defaultDangerTime }; + }), + setDefaultPublic: (defaultPublic) => + set(() => { + localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic)); + return { defaultPublic }; + }), + }; +}); diff --git a/apps/client/src/features/app-settings/AppSettings.module.scss b/apps/client/src/features/app-settings/AppSettings.module.scss index 11a8558b3..5fb17cc17 100644 --- a/apps/client/src/features/app-settings/AppSettings.module.scss +++ b/apps/client/src/features/app-settings/AppSettings.module.scss @@ -7,5 +7,5 @@ gap: 0.25rem; overflow: hidden; - background-color: black; + background-color: $ui-black; } diff --git a/apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx b/apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx index 94d4bc128..f226fe7be 100644 --- a/apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx +++ b/apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx @@ -126,7 +126,7 @@ export default function ViewSettingsForm() { state.eventSettings); - const setLinkPrevious = useEditorSettings((state) => state.setLinkPrevious); - const setDefaultPublic = useEditorSettings((state) => state.setDefaultPublic); - const setDefaultDuration = useEditorSettings((state) => state.setDefaultDuration); + const eventSettings = useEditorSettings((state) => state); + + const setDefaultDuration = eventSettings.setDefaultDuration; + const setLinkPrevious = eventSettings.setLinkPrevious; + const setWarnTime = eventSettings.setWarnTime; + const setDangerTime = eventSettings.setDangerTime; + const setDefaultPublic = eventSettings.setDefaultPublic; const durationInMs = forgivingStringToMillis(eventSettings.defaultDuration); + const warnTimeInMs = forgivingStringToMillis(eventSettings.defaultWarnTime); + const dangerTimeInMs = forgivingStringToMillis(eventSettings.defaultDangerTime); return ( @@ -19,24 +25,21 @@ export default function EditorSettingsForm() { Editor settings - Rundown options + Rundown defaults for new events - + name='defaultDuration' submitHandler={(_field, value) => setDefaultDuration(value)} time={durationInMs} - placeholder='00:10:00' + placeholder={editorSettingsDefaults.duration} /> setLinkPrevious(event.target.checked)} /> + + + + + + + + + + + + + + name='warnTime' + submitHandler={(_field, value) => setWarnTime(value)} + time={warnTimeInMs} + placeholder={editorSettingsDefaults.warnTime} + /> + + + + + name='dangerTime' + submitHandler={(_field, value) => setDangerTime(value)} + time={dangerTimeInMs} + placeholder={editorSettingsDefaults.dangerTime} + /> + + + state.eventSettings); - const defaultPublic = eventSettings.defaultPublic; - const linkPrevious = eventSettings.linkPrevious; // cursor const { cursor, mode: appMode, setCursor } = useAppMode(); @@ -65,16 +61,14 @@ export default function Rundown({ data }: RundownProps) { }; const options = { after: cursor, - defaultPublic, lastEventId: cursor, - linkPrevious, }; addEvent(newEvent, options); } else { addEvent({ type }, { after: cursor }); } }, - [addEvent, rundown, defaultPublic, linkPrevious], + [addEvent, rundown], ); // Handle keyboard shortcuts diff --git a/apps/client/src/features/rundown/RundownEntry.tsx b/apps/client/src/features/rundown/RundownEntry.tsx index d241d240b..1c20afd07 100644 --- a/apps/client/src/features/rundown/RundownEntry.tsx +++ b/apps/client/src/features/rundown/RundownEntry.tsx @@ -4,7 +4,6 @@ import { MaybeNumber, OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent import { useEventAction } from '../../common/hooks/useEventAction'; import useMemoisedFn from '../../common/hooks/useMemoisedFn'; import { useAppMode } from '../../common/stores/appModeStore'; -import { useEditorSettings } from '../../common/stores/editorSettings'; import { useEmitLog } from '../../common/stores/logger'; import { cloneEvent } from '../../common/utils/eventsManager'; @@ -61,10 +60,6 @@ export default function RundownEntry(props: RundownEntryProps) { const setCursor = useAppMode((state) => state.setCursor); const { selectedEvents, clearSelectedEvents } = useEventSelection(); - const eventSettings = useEditorSettings((state) => state.eventSettings); - const defaultPublic = eventSettings.defaultPublic; - const linkPrevious = eventSettings.linkPrevious; - const removeOpenEvent = useCallback(() => { if (selectedEvents.has(data.id)) { clearSelectedEvents(); @@ -88,9 +83,7 @@ export default function RundownEntry(props: RundownEntryProps) { const newEvent = { type: SupportedEvent.Event }; const options = { after: data.id, - defaultPublic, lastEventId: previousEventId, - linkPrevious, }; return addEvent(newEvent, options); } @@ -98,8 +91,6 @@ export default function RundownEntry(props: RundownEntryProps) { const newEvent = { type: SupportedEvent.Event }; const options = { after: previousEventId, - defaultPublic, - linkPrevious, }; return addEvent(newEvent, options); } diff --git a/apps/client/src/features/rundown/_blockMixins.scss b/apps/client/src/features/rundown/_blockMixins.scss index aa92b3b56..079249364 100644 --- a/apps/client/src/features/rundown/_blockMixins.scss +++ b/apps/client/src/features/rundown/_blockMixins.scss @@ -18,10 +18,10 @@ $block-cursor-color: $orange-400; @mixin block-styling() { box-sizing: content-box; - border: 1px solid $white-10; - font-family: $ontime-font-family; + border: 1px solid $white-7; border-radius: $block-border-radius; - margin: 0.25rem 0.125rem; + margin-block: 0.25rem; + margin-right: 0.125rem; position: relative; color: $block-text-color; diff --git a/apps/client/src/features/rundown/block-block/BlockBlock.module.scss b/apps/client/src/features/rundown/block-block/BlockBlock.module.scss index 6be287a51..e645de0f3 100644 --- a/apps/client/src/features/rundown/block-block/BlockBlock.module.scss +++ b/apps/client/src/features/rundown/block-block/BlockBlock.module.scss @@ -3,6 +3,7 @@ .block { @include block-spacing; @include block-styling; + margin-left: 0.5rem; background-color: $block-bg2; diff --git a/apps/client/src/features/rundown/delay-block/DelayBlock.module.scss b/apps/client/src/features/rundown/delay-block/DelayBlock.module.scss index 3087c1170..094e801a4 100644 --- a/apps/client/src/features/rundown/delay-block/DelayBlock.module.scss +++ b/apps/client/src/features/rundown/delay-block/DelayBlock.module.scss @@ -3,6 +3,7 @@ .delay { @include block-spacing; @include block-styling; + margin-left: 0.5rem; background-color: $block-bg2; diff --git a/apps/client/src/theme/ontimeTextInputs.ts b/apps/client/src/theme/ontimeTextInputs.ts index 05e5fa3e9..0547b58db 100644 --- a/apps/client/src/theme/ontimeTextInputs.ts +++ b/apps/client/src/theme/ontimeTextInputs.ts @@ -32,7 +32,7 @@ export const ontimeInputGhosted = { backgroundColor: 'transparent', color: '#f6f6f6', // $gray-50 _hover: { - backgroundColor: 'transparent', // $gray-1100 + backgroundColor: 'transparent', border: '1px solid #2B5ABC', // $blue-500 }, },