refactor: edge cases on midnight

apps/client/src/features/viewers/timeline/__tests__/timeline.utils.test.ts

@@ -1,6 +1,6 @@
 import { dayInMs } from 'ontime-utils';
 
-import { getElementPosition, getLaneLevel } from '../timeline.utils';
+import { getElementPosition, getLaneLevel, makeTimelineSections } from '../timeline.utils';
 
 describe('getCSSPosition()', () => {
   it('accounts for rundown with one event', () => {
@@ -82,3 +82,15 @@ describe('getLaneLevel()', () => {
     expect(result).toBe(0);
   });
 });
+
+describe('makeTmelineSections', () => {
+  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']);
+  });
+});

apps/client/src/features/viewers/timeline/timeline.utils.ts

@@ -36,6 +36,7 @@ export function getEstimatedWidth(content: string): number {
   // 12 is a rough estimate of the width of a character at 15px font size
   return Math.max(content.length, 8) * 12;
 }
+
 /**
  * Calculates an absolute position of an element based on a schedule
  */
@@ -46,33 +47,44 @@ export function getElementPosition(
   eventDuration: number,
   containerWidth: number,
 ): CSSPosition {
-  // TODO: events that finish at midnight have lastEnd 0
-  const totalDuration = scheduleEnd - scheduleStart;
+  const normalEnd = scheduleEnd < scheduleStart ? scheduleEnd + dayInMs : scheduleEnd;
+  const totalDuration = normalEnd - scheduleStart;
   const width = (eventDuration * containerWidth) / totalDuration;
   const left = ((eventStart - scheduleStart) * containerWidth) / totalDuration;
 
   return { left, width };
 }
 
+/**
+ * Gets rounded down hour for a given time
+ */
 export function getStartHour(startTime: number): number {
   const hours = Math.floor(startTime / MILLIS_PER_HOUR);
   return hours;
 }
 
+/**
+ * Gets rounded up hour for a given time
+ */
 export function getEndHour(endTime: number): number {
   const hours = Math.ceil(endTime / MILLIS_PER_HOUR);
   return hours;
 }
 
+/**
+ * converts a time span into an array of hours
+ */
 export function makeTimelineSections(firstHour: number, lastHour: number) {
   const timelineSections = [];
   for (let i = firstHour; i < lastHour; i++) {
-    timelineSections.push(removeSeconds(millisToString(i * MILLIS_PER_HOUR)));
+    timelineSections.push(removeSeconds(millisToString((i % 24) * MILLIS_PER_HOUR)));
   }
   return timelineSections;
 }
 
-// TODO: account for elapsed days
+/**
+ * Extracts the timeline sections from a rundown
+ */
 export function getTimelineSections(rundown: NormalisedRundown, order: string[]): string[] {
   if (order.length === 0) {
     return [];