add remote control bar

Author: coder13

src/components/NotifyCompRemoteBar/NotifyCompRemoteBar.tsx

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/Button';
+import { Container } from '@/components/Container';
+import { useCompetitionRemoteControl } from '@/hooks/useCompetitionRemoteControl';
+
+interface NotifyCompRemoteBarProps {
+  competitionId: string;
+}
+
+const groupLabel = (count: number) => `${count} active activit${count === 1 ? 'y' : 'ies'}`;
+
+export function NotifyCompRemoteBar({ competitionId }: NotifyCompRemoteBarProps) {
+  const remote = useCompetitionRemoteControl({ competitionId });
+
+  if (!remote.isAuthenticated || remote.scheduledActivities.length === 0) {
+    return null;
+  }
+
+  const activeNames = remote.activeGroups.map((group) => group.name);
+  const title = activeNames.length > 0 ? activeNames.join(', ') : 'No active activities';
+  const detail =
+    activeNames.length > 0
+      ? groupLabel(activeNames.length)
+      : remote.nextGroup
+        ? `Next: ${remote.nextGroup.name}`
+        : 'Remote overview';
+
+  const runSwitch = (direction: 'previous' | 'next') => {
+    const group = direction === 'previous' ? remote.previousGroup : remote.nextGroup;
+    void remote.switchToGroup(group);
+  };
+
+  return (
+    <nav
+      aria-label="Remote control"
+      className="z-20 w-full border-t border-tertiary-weak bg-panel shadow-md shadow-tertiary-dark print:hidden">
+      <Container className="flex-row items-center gap-2 px-2 py-2">
+        <Button
+          type="button"
+          variant="light"
+          className="min-w-[76px] justify-center"
+          disabled={remote.isSaving || !remote.previousGroup}
+          onClick={() => runSwitch('previous')}>
+          Back
+        </Button>
+
+        <Link
+          to={`/competitions/${competitionId}/remote`}
+          className={classNames(
+            'min-w-0 flex-1 rounded border border-tertiary-weak px-3 py-2 hover-transition hover:bg-gray-100 dark:hover:bg-gray-700',
+            {
+              'opacity-60': remote.isLoading,
+            },
+          )}>
+          <div className="flex min-w-0 flex-col">
+            <span className="truncate type-label">{title}</span>
+            <span className="truncate type-meta">
+              {remote.error ? `Remote error: ${remote.error}` : detail}
+            </span>
+          </div>
+        </Link>
+
+        <Button
+          type="button"
+          variant="green"
+          className="min-w-[76px] justify-center"
+          disabled={remote.isSaving || !remote.nextGroup}
+          onClick={() => runSwitch('next')}>
+          Next
+        </Button>
+      </Container>
+    </nav>
+  );
+}

src/components/NotifyCompRemoteBar/index.ts

@@ -0,0 +1 @@
+export * from './NotifyCompRemoteBar';

src/components/index.ts

@@ -16,4 +16,5 @@ export * from './LastFetchedAt';
 export * from './LinkButton';
 export * from './LoggedOutPromptCard';
 export * from './Notebox';
+export * from './NotifyCompRemoteBar';
 export * from './PinCompetitionButton';

src/hooks/useCompetitionRemoteControl/index.ts

@@ -0,0 +1 @@
+export * from './useCompetitionRemoteControl';

src/hooks/useCompetitionRemoteControl/useCompetitionRemoteControl.ts

@@ -0,0 +1,94 @@
+import { useMemo } from 'react';
+import { useNotifyCompRemoteActivities } from '@/hooks/useNotifyCompRemoteActivities';
+import {
+  getRemoteActiveGroups,
+  getRemoteActivityGroups,
+  getRemoteActivityStates,
+  getRemoteNextGroup,
+  getRemotePreviousGroup,
+  getRemoteScheduledActivities,
+  RemoteActivityGroup,
+} from '@/lib/notifyCompRemoteActivities';
+import { useNotifyCompRemoteAuth } from '@/providers/NotifyCompRemoteAuthProvider';
+import { useWCIF } from '@/providers/WCIFProvider';
+
+interface UseCompetitionRemoteControlParams {
+  competitionId: string;
+  enabled?: boolean;
+  roomId?: number;
+}
+
+const activityIdsForGroup = (group: RemoteActivityGroup) =>
+  group.scheduledActivities.map((activity) => activity.id);
+
+export function useCompetitionRemoteControl({
+  competitionId,
+  enabled = true,
+  roomId,
+}: UseCompetitionRemoteControlParams) {
+  const { wcif } = useWCIF();
+  const remoteAuth = useNotifyCompRemoteAuth();
+  const isAuthenticated = remoteAuth.isAuthenticatedForCompetition(competitionId);
+  const isEnabled = enabled && isAuthenticated;
+
+  const remote = useNotifyCompRemoteActivities({
+    competitionId,
+    enabled: isEnabled,
+    roomId,
+  });
+
+  const scheduledActivities = useMemo(
+    () => (wcif ? getRemoteScheduledActivities(wcif, roomId) : []),
+    [roomId, wcif],
+  );
+
+  const activityStates = useMemo(
+    () => getRemoteActivityStates(scheduledActivities, remote.activities),
+    [remote.activities, scheduledActivities],
+  );
+
+  const activityGroups = useMemo(
+    () => getRemoteActivityGroups(scheduledActivities, remote.activities),
+    [remote.activities, scheduledActivities],
+  );
+
+  const activeGroups = useMemo(() => getRemoteActiveGroups(activityGroups), [activityGroups]);
+  const previousGroup = useMemo(() => getRemotePreviousGroup(activityGroups), [activityGroups]);
+  const nextGroup = useMemo(() => getRemoteNextGroup(activityGroups), [activityGroups]);
+
+  const startGroup = (group: RemoteActivityGroup) =>
+    remote.startActivities(activityIdsForGroup(group));
+  const stopGroup = (group: RemoteActivityGroup) =>
+    remote.stopActivities(activityIdsForGroup(group));
+  const resetGroup = (group: RemoteActivityGroup) =>
+    remote.resetActivities(activityIdsForGroup(group));
+
+  const switchToGroup = async (group?: RemoteActivityGroup) => {
+    if (!group) {
+      return;
+    }
+
+    const currentActivityIds = activeGroups.flatMap(activityIdsForGroup);
+
+    if (currentActivityIds.length > 0) {
+      await remote.stopActivities(currentActivityIds);
+    }
+
+    await remote.startActivities(activityIdsForGroup(group));
+  };
+
+  return {
+    ...remote,
+    activeGroups,
+    activityGroups,
+    activityStates,
+    isAuthenticated,
+    nextGroup,
+    previousGroup,
+    resetGroup,
+    scheduledActivities,
+    startGroup,
+    stopGroup,
+    switchToGroup,
+  };
+}

src/layouts/CompetitionLayout/CompetitionLayout.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Outlet, useLocation, useParams } from 'react-router-dom';
 import { BarLoader } from 'react-spinners';
-import { ErrorFallback, LastFetchedAt, NoteBox } from '@/components';
+import { ErrorFallback, LastFetchedAt, NoteBox, NotifyCompRemoteBar } from '@/components';
 import { Container } from '@/components/Container';
 import { StyledNavLink } from '@/components/StyledNavLink/StyledNavLink';
 import { useWcif } from '@/hooks/queries/useWcif';
@@ -65,7 +65,7 @@ export function CompetitionLayout() {
         )}
         {isFetching ? <BarLoader width="100%" /> : <div style={{ height: '4px' }} />}
         <div
-          className="flex flex-col w-full items-center overflow-y-auto [scrollbar-gutter:stable;]"
+          className="flex flex-1 flex-col w-full items-center overflow-y-auto [scrollbar-gutter:stable;]"
           ref={ref}>
           <ErrorBoundary FallbackComponent={ErrorFallback}>
             <Outlet />
@@ -80,6 +80,7 @@ export function CompetitionLayout() {
             </Container>
           )}
         </div>
+        {competitionId && <NotifyCompRemoteBar competitionId={competitionId} />}
       </div>
     </WCIFProvider>
   );

src/lib/notifyCompRemoteActivities.test.ts

@@ -1,6 +1,8 @@
 import {
   getRemoteActivityGroups,
   getRemoteActivityState,
+  getRemoteNextGroup,
+  getRemotePreviousGroup,
   RemoteScheduledActivity,
 } from './notifyCompRemoteActivities';
 
@@ -71,4 +73,48 @@ describe('notifyCompRemoteActivities', () => {
     expect(groups).toHaveLength(1);
     expect(groups[0].scheduledActivities.map((candidate) => candidate.id)).toEqual([201, 202]);
   });
+
+  it('finds the next group after the current activity group', () => {
+    const groups = getRemoteActivityGroups(
+      [
+        activity({ id: 301, activityCode: '333-r1-g1' }),
+        activity({
+          id: 302,
+          activityCode: '222-r1-g1',
+          name: '2x2x2 Cube Round 1 Group 1',
+          startTime: '2026-06-01T10:20:00Z',
+        }),
+      ],
+      [{ activityId: 301, startTime: '2026-06-01T10:01:00Z', endTime: null }],
+    );
+
+    expect(getRemoteNextGroup(groups)?.scheduledActivities[0].id).toBe(302);
+  });
+
+  it('finds the previous group before the current activity group', () => {
+    const groups = getRemoteActivityGroups(
+      [
+        activity({
+          id: 401,
+          activityCode: '222-r1-g1',
+          name: '2x2x2 Cube Round 1 Group 1',
+        }),
+        activity({
+          id: 402,
+          activityCode: '333-r1-g1',
+          startTime: '2026-06-01T10:20:00Z',
+        }),
+      ],
+      [
+        {
+          activityId: 401,
+          startTime: '2026-06-01T10:01:00Z',
+          endTime: '2026-06-01T10:09:00Z',
+        },
+        { activityId: 402, startTime: '2026-06-01T10:21:00Z', endTime: null },
+      ],
+    );
+
+    expect(getRemotePreviousGroup(groups)?.scheduledActivities[0].id).toBe(401);
+  });
 });

src/lib/notifyCompRemoteActivities.ts

@@ -112,6 +112,61 @@ export const getRemoteActivityGroups = (
   });
 };
 
+export const splitRemoteActivityGroups = (groups: RemoteActivityGroup[]) => ({
+  current: groups.filter((group) => group.status === 'current' || group.status === 'mixed'),
+  next: groups.filter((group) => group.status === 'next'),
+  done: groups.filter((group) => group.status === 'done'),
+});
+
+export const getRemoteActiveGroups = (groups: RemoteActivityGroup[]) =>
+  groups.filter((group) => group.status === 'current' || group.status === 'mixed');
+
+export const getRemoteNavigationFocusIndex = (groups: RemoteActivityGroup[]) => {
+  const activeIndex = groups.findIndex(
+    (group) => group.status === 'current' || group.status === 'mixed',
+  );
+
+  if (activeIndex >= 0) {
+    return activeIndex;
+  }
+
+  const nextIndex = groups.findIndex((group) => group.status === 'next');
+
+  return nextIndex >= 0 ? nextIndex : groups.length - 1;
+};
+
+export const getRemotePreviousGroup = (groups: RemoteActivityGroup[]) => {
+  const focusIndex = getRemoteNavigationFocusIndex(groups);
+
+  if (focusIndex <= 0) {
+    return undefined;
+  }
+
+  return [...groups.slice(0, focusIndex)]
+    .reverse()
+    .find((group) => group.status !== 'current' && group.status !== 'mixed');
+};
+
+export const getRemoteNextGroup = (groups: RemoteActivityGroup[]) => {
+  const activeIndex = groups.findIndex(
+    (group) => group.status === 'current' || group.status === 'mixed',
+  );
+
+  if (activeIndex < 0) {
+    return groups.find((group) => group.status === 'next');
+  }
+
+  const focusIndex = getRemoteNavigationFocusIndex(groups);
+
+  if (focusIndex < 0) {
+    return groups.find((group) => group.status === 'next');
+  }
+
+  return groups
+    .slice(focusIndex + 1)
+    .find((group) => group.status !== 'done' && group.status !== 'current');
+};
+
 export const splitRemoteActivityStates = (states: RemoteActivityState[]) => ({
   current: states.filter((state) => state.status === 'current'),
   next: states.filter((state) => state.status === 'next'),