From ee7c9a3301a7740716867c6791672a99cc4c01dc Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Sun, 6 Oct 2024 22:43:17 +0200 Subject: [PATCH] refactor: compound timeline --- .../viewers/timeline/Timeline.module.scss | 37 ++++---- .../features/viewers/timeline/Timeline.tsx | 90 +++++++++---------- .../viewers/timeline/TimelineEntry.tsx | 4 +- .../timeline/__tests__/timeline.utils.test.ts | 9 +- .../TimelineMarkers.module.scss | 15 ++-- .../timeline-markers/TimelineMarkers.tsx | 7 +- .../TimelineProgressBar.module.scss | 19 ---- .../TimelineProgressBar.tsx | 25 ------ .../viewers/timeline/timeline.utils.ts | 2 +- 9 files changed, 82 insertions(+), 126 deletions(-) delete mode 100644 apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.module.scss delete mode 100644 apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.tsx diff --git a/apps/client/src/features/viewers/timeline/Timeline.module.scss b/apps/client/src/features/viewers/timeline/Timeline.module.scss index 430bb9ee47..74ca8a3b00 100644 --- a/apps/client/src/features/viewers/timeline/Timeline.module.scss +++ b/apps/client/src/features/viewers/timeline/Timeline.module.scss @@ -1,7 +1,5 @@ @use '../../../theme/viewerDefs' as *; -$timeline-entry-height: 20px; -$lane-height: 120px; $timeline-height: 1rem; .timeline { @@ -9,11 +7,9 @@ $timeline-height: 1rem; font-weight: 600; color: $ui-white; background-color: $ui-black; -} - -.timelineEvents { + box-sizing: content-box; + box-shadow: inset 0 1rem 0 0 $gray-1100; position: relative; - height: 100%; } .column { @@ -23,17 +19,24 @@ $timeline-height: 1rem; border-left: 1px solid $ui-black; // avoiding content being larger than the view height: calc(100% - 3rem); +} - // decorate timeline element - &::before { - content: ''; - position: absolute; - box-sizing: content-box; - top: -$timeline-height; - left: 0; - right: 0; - height: $timeline-height; - background-color: $white-40; +// generate combined timeline +.timelineBlock { + height: $timeline-height; + background-color: $white-40; + width: 100%; + + &[data-status='done'] { + &::before { + background-color: $active-red; + } + } + + &[data-status='live'] { + &::before { + background-color: red; + } } } @@ -69,6 +72,8 @@ $timeline-height: 1rem; border-bottom: 2px solid $ui-black; box-shadow: 0 0.25rem 0 0 var(--color, $gray-300); + // TODO: can I use has to avoid having this in multiple places? + &[data-status='done'] { opacity: $opacity-disabled; } diff --git a/apps/client/src/features/viewers/timeline/Timeline.tsx b/apps/client/src/features/viewers/timeline/Timeline.tsx index a8463f36d1..6cfeb8ab69 100644 --- a/apps/client/src/features/viewers/timeline/Timeline.tsx +++ b/apps/client/src/features/viewers/timeline/Timeline.tsx @@ -4,7 +4,6 @@ import { isOntimeEvent, isPlayableEvent, MaybeNumber, OntimeRundown } from 'onti import { checkIsNextDay, dayInMs, getLastEvent, MILLIS_PER_HOUR } from 'ontime-utils'; import TimelineMarkers from './timeline-markers/TimelineMarkers'; -import TimelineProgressBar from './timeline-progress-bar/TimelineProgressBar'; import { getElementPosition, getEndHour, getStartHour } from './timeline.utils'; import { ProgressStatus, TimelineEntry } from './TimelineEntry'; @@ -39,57 +38,54 @@ function Timeline(props: TimelineProps) { return (
- -
- {rundown.map((event) => { - // for now we dont render delays and blocks - if (!isOntimeEvent(event) || !isPlayableEvent(event)) { - return null; - } + {rundown.map((event) => { + // for now we dont render delays and blocks + if (!isOntimeEvent(event) || !isPlayableEvent(event)) { + return null; + } - // keep track of progress of rundown - if (eventStatus === 'live') { - eventStatus = 'future'; - } - if (event.id === selectedEventId) { - eventStatus = 'live'; - } + // keep track of progress of rundown + if (eventStatus === 'live') { + eventStatus = 'future'; + } + if (event.id === selectedEventId) { + eventStatus = 'live'; + } - // we only need to check for next day if we have a previous event - if ( - previousEventStartTime !== null && - checkIsNextDay(previousEventStartTime, event.timeStart, event.duration) - ) { - elapsedDays++; - } - const normalisedStart = event.timeStart + elapsedDays * dayInMs; + // we only need to check for next day if we have a previous event + if ( + previousEventStartTime !== null && + checkIsNextDay(previousEventStartTime, event.timeStart, event.duration) + ) { + elapsedDays++; + } + const normalisedStart = event.timeStart + elapsedDays * dayInMs; - const { left: elementLeftPosition, width: elementWidth } = getElementPosition( - startHour * MILLIS_PER_HOUR, - endHour * MILLIS_PER_HOUR, - normalisedStart + (event.delay ?? 0), - event.duration, - screenWidth, - ); + const { left: elementLeftPosition, width: elementWidth } = getElementPosition( + startHour * MILLIS_PER_HOUR, + endHour * MILLIS_PER_HOUR, + normalisedStart + (event.delay ?? 0), + event.duration, + screenWidth, + ); - // prepare values for next iteration - previousEventStartTime = normalisedStart; + // prepare values for next iteration + previousEventStartTime = normalisedStart; - return ( - - ); - })} -
+ return ( + + ); + })}
); } diff --git a/apps/client/src/features/viewers/timeline/TimelineEntry.tsx b/apps/client/src/features/viewers/timeline/TimelineEntry.tsx index 433af75b82..ca3de3c1d8 100644 --- a/apps/client/src/features/viewers/timeline/TimelineEntry.tsx +++ b/apps/client/src/features/viewers/timeline/TimelineEntry.tsx @@ -41,6 +41,7 @@ export function TimelineEntry(props: TimelineEntryProps) { return (
+
{ }); }); -describe('makeTmelineSections', () => { +describe('makeTimelineSections', () => { it('creates an array between the hours given, end excluded', () => { const result = makeTimelineSections(11, 17); - expect(result).toEqual(['11:00', '12:00', '13:00', '14:00', '15:00', '16:00']); - }); - - it('wraps around midnight', () => { - const result = makeTimelineSections(22, 26); - expect(result).toEqual(['22:00', '23:00', '00:00', '01:00']); + expect(result).toEqual([11, 12, 13, 14, 15, 16]); }); }); diff --git a/apps/client/src/features/viewers/timeline/timeline-markers/TimelineMarkers.module.scss b/apps/client/src/features/viewers/timeline/timeline-markers/TimelineMarkers.module.scss index b2961ee42c..8969a2d7e1 100644 --- a/apps/client/src/features/viewers/timeline/timeline-markers/TimelineMarkers.module.scss +++ b/apps/client/src/features/viewers/timeline/timeline-markers/TimelineMarkers.module.scss @@ -1,16 +1,17 @@ .markers { + position: absolute; + left: 0; width: 100%; - color: $ui-white; + height: 100%; + display: flex; - height: 1rem; - line-height: 1rem; - margin-bottom: 0.25rem; - font-size: calc(1rem - 2px); justify-content: space-evenly; & > span { flex-grow: 1; - border-left: 1px solid $white-7; - height: 100vh; + + &:not(:first-child) { + border-left: 1px solid $white-7; + } } } diff --git a/apps/client/src/features/viewers/timeline/timeline-markers/TimelineMarkers.tsx b/apps/client/src/features/viewers/timeline/timeline-markers/TimelineMarkers.tsx index 2b91b3107e..96b8a35dfb 100644 --- a/apps/client/src/features/viewers/timeline/timeline-markers/TimelineMarkers.tsx +++ b/apps/client/src/features/viewers/timeline/timeline-markers/TimelineMarkers.tsx @@ -7,6 +7,7 @@ interface TimelineMarkersProps { endHour: number; } +/** Creates a line for every hour in the timeline */ export default function TimelineMarkers(props: TimelineMarkersProps) { const { startHour, endHour } = props; @@ -14,9 +15,9 @@ export default function TimelineMarkers(props: TimelineMarkersProps) { return (
- {elements.map((tag, index) => { - return {tag}; - })} + {elements.map((tag) => ( + + ))}
); } diff --git a/apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.module.scss b/apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.module.scss deleted file mode 100644 index 1997b1a099..0000000000 --- a/apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -.progressBar { - width: 100%; - height: 1rem; - position: relative; - - background-color: $gray-1000; -} - -.progress { - height: 100%; - position: absolute; - left: 0; - top: 0; - z-index: 2; - - background-color: $active-red; - transition-duration: 0.3s; - transition-property: width; -} diff --git a/apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.tsx b/apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.tsx deleted file mode 100644 index 53480800c9..0000000000 --- a/apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { MILLIS_PER_HOUR } from 'ontime-utils'; - -import { useClock } from '../../../../common/hooks/useSocket'; -import { getRelativePositionX } from '../timeline.utils'; - -import style from './TimelineProgressBar.module.scss'; - -interface ProgressBarProps { - startHour: number; - endHour: number; -} - -export default function ProgressBar(props: ProgressBarProps) { - const { startHour, endHour } = props; - // TODO: how to account for days? - const { clock } = useClock(); - - const width = getRelativePositionX(startHour * MILLIS_PER_HOUR, endHour * MILLIS_PER_HOUR, clock); - - return ( -
-
-
- ); -} diff --git a/apps/client/src/features/viewers/timeline/timeline.utils.ts b/apps/client/src/features/viewers/timeline/timeline.utils.ts index 1903abaf84..7fa253af4c 100644 --- a/apps/client/src/features/viewers/timeline/timeline.utils.ts +++ b/apps/client/src/features/viewers/timeline/timeline.utils.ts @@ -71,7 +71,7 @@ export function getEndHour(endTime: number): number { export function makeTimelineSections(firstHour: number, lastHour: number) { const timelineSections = []; for (let i = firstHour; i < lastHour; i++) { - timelineSections.push(removeSeconds(millisToString((i % 24) * MILLIS_PER_HOUR))); + timelineSections.push(i); } return timelineSections; }