diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts index 1ccbec87a..06948c53d 100644 --- a/apps/client/src/common/hooks/useSocket.ts +++ b/apps/client/src/common/hooks/useSocket.ts @@ -250,11 +250,3 @@ export const useIsOnline = () => { return useRuntimeStore(featureSelector); }; - -export const usePlayback = () => { - const featureSelector = (state: RuntimeStore) => ({ - playback: state.timer.playback, - }); - - return useRuntimeStore(featureSelector); -}; diff --git a/apps/client/src/features/rundown/Rundown.tsx b/apps/client/src/features/rundown/Rundown.tsx index 6106900cd..7099ab0f1 100644 --- a/apps/client/src/features/rundown/Rundown.tsx +++ b/apps/client/src/features/rundown/Rundown.tsx @@ -269,7 +269,6 @@ export default function Rundown({ data }: RundownProps) { // all events before the current selected are in the past let isPast = Boolean(featureData?.selectedEventId); let isNextDay = false; - let totalGap = 0; const isEditMode = appMode === AppMode.Edit; return ( @@ -298,7 +297,6 @@ export default function Rundown({ data }: RundownProps) { if (isPlayableEvent(entry)) { isNextDay = checkIsNextDay(entry, lastEvent); - totalGap += !isPast ? entry.gap : 0; if (isNewLatest(entry, lastEvent)) { // populate previous entry thisEvent = entry; @@ -333,7 +331,6 @@ export default function Rundown({ data }: RundownProps) { playback={isLoaded ? featureData.playback : undefined} isRolling={featureData.playback === Playback.Roll} isNextDay={isNextDay} - totalGap={totalGap} /> diff --git a/apps/client/src/features/rundown/RundownEntry.tsx b/apps/client/src/features/rundown/RundownEntry.tsx index 386950aa5..d7fb2ce7d 100644 --- a/apps/client/src/features/rundown/RundownEntry.tsx +++ b/apps/client/src/features/rundown/RundownEntry.tsx @@ -37,7 +37,6 @@ interface RundownEntryProps { previousEventId?: string; playback?: Playback; // we only care about this if this event is playing isRolling: boolean; // we need to know even if not related to this event - totalGap: number; } export default function RundownEntry(props: RundownEntryProps) { @@ -53,7 +52,6 @@ export default function RundownEntry(props: RundownEntryProps) { isRolling, eventIndex, isNextDay, - totalGap, } = props; const { emitError } = useEmitLog(); const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction(); @@ -175,8 +173,6 @@ export default function RundownEntry(props: RundownEntryProps) { isRolling={isRolling} gap={data.gap} isNextDay={isNextDay} - dayOffset={data.dayOffset} - totalGap={totalGap} actionHandler={actionHandler} /> ); diff --git a/apps/client/src/features/rundown/event-block/EventBlock.module.scss b/apps/client/src/features/rundown/event-block/EventBlock.module.scss index 1ee1bb917..2328b52e0 100644 --- a/apps/client/src/features/rundown/event-block/EventBlock.module.scss +++ b/apps/client/src/features/rundown/event-block/EventBlock.module.scss @@ -9,7 +9,7 @@ $skip-opacity: 0.2; display: grid; grid-template-areas: 'binder ... ... ...' - 'binder pb-actions times chip' + 'binder pb-actions times ...' 'binder pb-actions title title' 'binder pb-actions estatus estatus' 'binder ... ... ...'; @@ -131,10 +131,6 @@ $skip-opacity: 0.2; height: 100%; } -.chipSection { - grid-area: chip; -} - .titleSection { grid-area: title; display: flex; diff --git a/apps/client/src/features/rundown/event-block/EventBlock.tsx b/apps/client/src/features/rundown/event-block/EventBlock.tsx index 8fd2fc4ea..1f1de2ef3 100644 --- a/apps/client/src/features/rundown/event-block/EventBlock.tsx +++ b/apps/client/src/features/rundown/event-block/EventBlock.tsx @@ -49,8 +49,6 @@ interface EventBlockProps { isRolling: boolean; gap: number; isNextDay: boolean; - dayOffset: number; - totalGap: number; actionHandler: ( action: EventItemActions, payload?: @@ -89,8 +87,6 @@ export default function EventBlock(props: EventBlockProps) { isRolling, gap, isNextDay, - dayOffset, - totalGap, actionHandler, } = props; const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping(); @@ -307,9 +303,6 @@ export default function EventBlock(props: EventBlockProps) { loaded={loaded} playback={playback} isRolling={isRolling} - dayOffset={dayOffset} - isPast={isPast} - totalGap={totalGap} /> )} diff --git a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx index a59450486..6d64376fa 100644 --- a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx +++ b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx @@ -11,14 +11,12 @@ import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward' import { IoStop } from '@react-icons/all-files/io5/IoStop'; import { IoTime } from '@react-icons/all-files/io5/IoTime'; import { EndAction, MaybeString, Playback, TimerType, TimeStrategy } from 'ontime-types'; -import { dayInMs } from 'ontime-utils'; import { cx } from '../../../common/utils/styleUtils'; import { tooltipDelayMid } from '../../../ontimeConfig'; import EditableBlockTitle from '../common/EditableBlockTitle'; import TimeInputFlow from '../time-input-flow/TimeInputFlow'; -import EventBlockChip from './composite/EventBlockChip'; import EventBlockPlayback from './composite/EventBlockPlayback'; import EventBlockProgressBar from './composite/EventBlockProgressBar'; @@ -44,9 +42,6 @@ interface EventBlockInnerProps { loaded: boolean; playback?: Playback; isRolling: boolean; - dayOffset: number; - isPast: boolean; - totalGap: number; } function EventBlockInner(props: EventBlockInnerProps) { @@ -69,9 +64,6 @@ function EventBlockInner(props: EventBlockInnerProps) { loaded, playback, isRolling, - dayOffset, - isPast, - totalGap, } = props; const [renderInner, setRenderInner] = useState(false); @@ -116,17 +108,6 @@ function EventBlockInner(props: EventBlockInnerProps) { loaded={loaded} disablePlayback={skip || isRolling} /> - {!skip && ( - - )}
{note}
diff --git a/apps/client/src/features/rundown/event-block/composite/EventBlockChip.module.scss b/apps/client/src/features/rundown/event-block/composite/EventBlockChip.module.scss deleted file mode 100644 index b69696431..000000000 --- a/apps/client/src/features/rundown/event-block/composite/EventBlockChip.module.scss +++ /dev/null @@ -1,21 +0,0 @@ -.chip { - background-color: $gray-1100; - white-space: nowrap; - - font-size: calc(1rem - 3px); - color: $label-gray; - padding: 0.125rem 0.5rem; - border-radius: 2px; - - &.over { - color: $playback-negative; - } - - &.under { - color: $playback-ahead; - } - - &.due { - color: $warning-orange; - } -} diff --git a/apps/client/src/features/rundown/event-block/composite/EventBlockChip.tsx b/apps/client/src/features/rundown/event-block/composite/EventBlockChip.tsx deleted file mode 100644 index 7a6857cbb..000000000 --- a/apps/client/src/features/rundown/event-block/composite/EventBlockChip.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { useMemo } from 'react'; -import { Tooltip } from '@chakra-ui/react'; -import { isPlaybackActive, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils'; - -import { usePlayback, useTimelineStatus } from '../../../../common/hooks/useSocket'; -import { cx } from '../../../../common/utils/styleUtils'; -import { formatDuration } from '../../../../common/utils/time'; -import { tooltipDelayFast } from '../../../../ontimeConfig'; - -import style from './EventBlockChip.module.scss'; - -interface EventBlockChipProps { - id: string; - trueTimeStart: number; - isPast: boolean; - isLoaded: boolean; - className: string; - totalGap: number; - isLinkedAndNext: boolean; -} - -export default function EventBlockChip(props: EventBlockChipProps) { - const { trueTimeStart, isPast, isLoaded, className, totalGap, isLinkedAndNext } = props; - const { playback } = usePlayback(); - - if (isLoaded) { - return null; //TODO: the is a small flash of 'DUE' on the loaded event as clock data arrives before isLoaded propagates - } - - const playbackActive = isPlaybackActive(playback); - - if (!playbackActive || isPast) { - return null; //TODO: Event report will go here - } - - if (playbackActive) { - // we extracted the component to avoid unnecessary calculations and re-renders - return ( - - ); - } - - return null; -} - -interface EventUntilProps { - className: string; - trueTimeStart: number; - totalGap: number; - isLinkedAndNext: boolean; -} - -function EventUntil(props: EventUntilProps) { - const { trueTimeStart, className, totalGap, isLinkedAndNext } = props; - const { clock, offset } = useTimelineStatus(); - - const [timeUntilString, isDue] = useMemo(() => { - const consumedOffset = isLinkedAndNext ? offset : Math.min(offset + totalGap, 0); - const offsetTimestart = trueTimeStart - consumedOffset; - const timeUntil = offsetTimestart - clock; - const isDue = timeUntil < MILLIS_PER_SECOND; - return [isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`, isDue]; - }, [totalGap, isLinkedAndNext, offset, trueTimeStart, clock]); - - return ( - -
-
{timeUntilString}
-
-
- ); -} diff --git a/apps/client/src/theme/_ontimeStyles.scss b/apps/client/src/theme/_ontimeStyles.scss index 6254e8534..efaea7b83 100644 --- a/apps/client/src/theme/_ontimeStyles.scss +++ b/apps/client/src/theme/_ontimeStyles.scss @@ -25,7 +25,6 @@ $ontime-delay-text: #E69056; $ontime-paused: #c05621; $ontime-stop: #E4281E; $playback-negative: $red-500; -$playback-ahead: $green-500; $active-indicator: #8bb33d; $text-black: $gray-1350;