Show duration based remote progress

Author: coder13

src/components/NotifyCompRemoteBar/NotifyCompRemoteBar.tsx

@@ -3,9 +3,8 @@ import { Container } from '@/components/Container';
 import { useCompetitionRemoteControl } from '@/hooks/useCompetitionRemoteControl';
 import { useNow } from '@/hooks/useNow';
 import {
-  formatElapsedMMSS,
+  formatElapsedDuration,
   formatNextActivityOffset,
-  getActiveGroupStartTime,
   getRemoteBarProgress,
 } from './remoteBarProgress';
 
@@ -32,13 +31,17 @@ export function NotifyCompRemoteBar({ competitionId }: NotifyCompRemoteBarProps)
   const activeNames = remote.activeGroups.map((group) => group.name);
   const currentTitle = activeNames.length > 0 ? activeNames.join(', ') : 'No active activity';
   const nextTitle = remote.nextGroup?.name || 'No next activity';
-  const elapsed = formatElapsedMMSS(getActiveGroupStartTime(remote.activeGroups), now);
+  const elapsed = formatElapsedDuration(remote.activeGroups, now);
   const nextOffset = formatNextActivityOffset(remote.nextGroup, now);
   const progress = getRemoteBarProgress({
     activeGroups: remote.activeGroups,
-    nextGroup: remote.nextGroup,
     now,
   });
+  const progressBarClassName = classNames('block h-full rounded-full', {
+    'bg-blue-500 dark:bg-blue-400': progress.tone === 'normal',
+    'bg-yellow-400 dark:bg-yellow-300': progress.tone === 'warning',
+    'bg-red-500 dark:bg-red-400': progress.tone === 'overdue',
+  });
 
   const runSwitch = (direction: 'previous' | 'next') => {
     const group = direction === 'previous' ? remote.previousGroup : remote.nextGroup;
@@ -126,10 +129,7 @@ export function NotifyCompRemoteBar({ competitionId }: NotifyCompRemoteBarProps)
 
             <div className="flex h-4 items-center">
               <div className="h-1 w-full overflow-hidden rounded-full bg-tertiary">
-                <span
-                  className="block h-full rounded-full bg-blue-500 dark:bg-blue-400"
-                  style={{ width: `${progress}%` }}
-                />
+                <span className={progressBarClassName} style={{ width: `${progress.percent}%` }} />
               </div>
             </div>
           </div>

src/components/NotifyCompRemoteBar/remoteBarProgress.test.ts

@@ -1,5 +1,6 @@
 import { RemoteActivityGroup } from '@/lib/notifyCompRemoteActivities';
 import {
+  formatElapsedDuration,
   formatElapsedMMSS,
   formatNextActivityOffset,
   getRemoteBarProgress,
@@ -35,6 +36,26 @@ describe('remoteBarProgress', () => {
     );
   });
 
+  it('formats elapsed time against scheduled activity duration', () => {
+    expect(
+      formatElapsedDuration(
+        [
+          group({
+            liveActivities: [
+              {
+                activityId: 101,
+                endTime: null,
+                startTime: '2026-06-01T10:01:05Z',
+              },
+            ],
+            status: 'current',
+          }),
+        ],
+        new Date('2026-06-01T10:06:09Z'),
+      ),
+    ).toBe('05:04 / 10 minutes');
+  });
+
   it('describes how many minutes remain until the next activity', () => {
     expect(
       formatNextActivityOffset(
@@ -68,7 +89,7 @@ describe('remoteBarProgress', () => {
     ).toBe('In 4 hours');
   });
 
-  it('fills progress based on live start time and next scheduled start time', () => {
+  it('fills progress based on live start time and scheduled activity duration', () => {
     expect(
       getRemoteBarProgress({
         activeGroups: [
@@ -83,19 +104,57 @@ describe('remoteBarProgress', () => {
             status: 'current',
           }),
         ],
-        nextGroup: group({
-          id: '222-r1-g1',
-          name: '2x2x2 Cube, Round 1, Group 1',
-          scheduledActivities: [
-            {
-              ...group({}).scheduledActivities[0],
-              id: 102,
-              startTime: '2026-06-01T10:20:00Z',
-            },
-          ],
-        }),
         now: new Date('2026-06-01T10:05:00Z'),
       }),
-    ).toBe(25);
+    ).toEqual({
+      percent: 50,
+      tone: 'normal',
+    });
+  });
+
+  it('uses a warning tone once the activity is within 5 percent of done', () => {
+    expect(
+      getRemoteBarProgress({
+        activeGroups: [
+          group({
+            liveActivities: [
+              {
+                activityId: 101,
+                endTime: null,
+                startTime: '2026-06-01T10:00:00Z',
+              },
+            ],
+            status: 'current',
+          }),
+        ],
+        now: new Date('2026-06-01T10:09:30Z'),
+      }),
+    ).toEqual({
+      percent: 95,
+      tone: 'warning',
+    });
+  });
+
+  it('uses an overdue tone once the scheduled duration has elapsed', () => {
+    expect(
+      getRemoteBarProgress({
+        activeGroups: [
+          group({
+            liveActivities: [
+              {
+                activityId: 101,
+                endTime: null,
+                startTime: '2026-06-01T10:00:00Z',
+              },
+            ],
+            status: 'current',
+          }),
+        ],
+        now: new Date('2026-06-01T10:11:00Z'),
+      }),
+    ).toEqual({
+      percent: 100,
+      tone: 'overdue',
+    });
   });
 });

src/components/NotifyCompRemoteBar/remoteBarProgress.ts

@@ -19,6 +19,11 @@ const getEarliestTime = (times: Array<number | undefined>) => {
   return validTimes.length ? Math.min(...validTimes) : undefined;
 };
 
+const getLatestTime = (times: Array<number | undefined>) => {
+  const validTimes = times.filter((time): time is number => time !== undefined);
+  return validTimes.length ? Math.max(...validTimes) : undefined;
+};
+
 export const formatElapsedMMSS = (startTime: number | string | undefined, now: Date) => {
   const start = typeof startTime === 'number' ? startTime : getTime(startTime);
 
@@ -36,6 +41,20 @@ export const formatElapsedMMSS = (startTime: number | string | undefined, now: D
 export const getGroupScheduledStartTime = (group?: RemoteActivityGroup) =>
   getEarliestTime(group?.scheduledActivities.map((activity) => getTime(activity.startTime)) || []);
 
+const getActiveGroupsScheduledStartTime = (groups: RemoteActivityGroup[]) =>
+  getEarliestTime(
+    groups.flatMap((group) =>
+      group.scheduledActivities.map((activity) => getTime(activity.startTime)),
+    ),
+  );
+
+const getActiveGroupsScheduledEndTime = (groups: RemoteActivityGroup[]) =>
+  getLatestTime(
+    groups.flatMap((group) =>
+      group.scheduledActivities.map((activity) => getTime(activity.endTime)),
+    ),
+  );
+
 export const getActiveGroupStartTime = (groups: RemoteActivityGroup[]) =>
   getEarliestTime(
     groups.flatMap((group) => {
@@ -51,6 +70,33 @@ export const getActiveGroupStartTime = (groups: RemoteActivityGroup[]) =>
     }),
   );
 
+export const getActiveGroupsScheduledDuration = (groups: RemoteActivityGroup[]) => {
+  const start = getActiveGroupsScheduledStartTime(groups);
+  const end = getActiveGroupsScheduledEndTime(groups);
+
+  if (start === undefined || end === undefined || end <= start) {
+    return undefined;
+  }
+
+  return end - start;
+};
+
+const formatDurationMinutes = (duration: number | undefined) => {
+  if (duration === undefined) {
+    return '0 minutes';
+  }
+
+  const minutes = Math.max(1, Math.round(duration / MINUTE));
+  const unit = minutes === 1 ? 'minute' : 'minutes';
+
+  return `${minutes} ${unit}`;
+};
+
+export const formatElapsedDuration = (groups: RemoteActivityGroup[], now: Date) =>
+  `${formatElapsedMMSS(getActiveGroupStartTime(groups), now)} / ${formatDurationMinutes(
+    getActiveGroupsScheduledDuration(groups),
+  )}`;
+
 export const formatNextActivityOffset = (nextGroup: RemoteActivityGroup | undefined, now: Date) => {
   const nextStart = getGroupScheduledStartTime(nextGroup);
 
@@ -79,25 +125,31 @@ export const formatNextActivityOffset = (nextGroup: RemoteActivityGroup | undefi
 
 export const getRemoteBarProgress = ({
   activeGroups,
-  nextGroup,
   now,
 }: {
   activeGroups: RemoteActivityGroup[];
-  nextGroup?: RemoteActivityGroup;
   now: Date;
 }) => {
   const activeStart = getActiveGroupStartTime(activeGroups);
-  const nextStart = getGroupScheduledStartTime(nextGroup);
-
-  if (activeStart === undefined || nextStart === undefined) {
-    return nextStart !== undefined && now.getTime() >= nextStart ? 100 : 0;
-  }
-
-  const duration = nextStart - activeStart;
+  const duration = getActiveGroupsScheduledDuration(activeGroups);
 
-  if (duration <= 0) {
-    return now.getTime() >= nextStart ? 100 : 0;
+  if (activeStart === undefined || duration === undefined) {
+    return {
+      percent: 0,
+      tone: 'normal' as const,
+    };
   }
 
-  return clampPercent(((now.getTime() - activeStart) / duration) * 100);
+  const elapsed = Math.max(0, now.getTime() - activeStart);
+  const percent = (elapsed / duration) * 100;
+
+  return {
+    percent: clampPercent(percent),
+    tone:
+      percent > 100
+        ? ('overdue' as const)
+        : percent >= 95
+          ? ('warning' as const)
+          : ('normal' as const),
+  };
 };