add "pin" query parameter for komar specialness

front-end/src/apps/audience-display/displays/ad-default.tsx

@@ -3,24 +3,49 @@ import { DisplayModeProps } from 'src/apps/audience-display/displays';
 import { useRecoilValue } from 'recoil';
 import { matchOccurringAtom, matchOccurringRanksAtom } from 'src/stores/recoil';
 import { useEvent } from 'src/api/use-event-data';
-import { Displays } from '@toa-lib/models';
+import { AudienceScreens, Displays } from '@toa-lib/models';
 import { getDisplays } from './displays';
 import { FadeInOut, SlideInBottom } from 'src/components/animations';
 import AbsolouteLocator from 'src/components/util/absoloute-locator';
+import { useSearchParams } from 'react-router-dom';
 
 /**
  * Classic audience display that handles all scenarios.
  */
 export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
   const match = useRecoilValue(matchOccurringAtom);
   const ranks = useRecoilValue(matchOccurringRanksAtom);
+  const [searchParams] = useSearchParams();
+  const pin = searchParams.get('pin');
   // Make sure you use the event key from the match to make sure we get the correct event, not
   // the one loaded from the url.
   const { data: event } = useEvent(match?.eventKey);
   const displays = getDisplays(event?.seasonKey || '');
   // TODO - Have better error handling here.
   if (!match || !event || !ranks || !displays) return null;
 
+  // Handle "pinning" screens
+  if (pin && typeof pin === 'string') {
+    switch (pin) {
+      case AudienceScreens.PREVIEW:
+        return (
+          <displays.matchPreview event={event} match={match} ranks={ranks} />
+        );
+      case AudienceScreens.MATCH_FULL:
+        return <displays.matchPlay event={event} match={match} ranks={ranks} />;
+      case AudienceScreens.RESULTS:
+        return (
+          <displays.matchResults event={event} match={match} ranks={ranks} />
+        );
+      case AudienceScreens.MATCH_STREAM:
+        return <displays.matchPlayStream event={event} match={match} ranks={ranks} />;
+      case AudienceScreens.RESULTS_STREAM:
+        return (
+          <displays.matchResultsStream event={event} match={match} ranks={ranks} />
+        );
+    }
+  }
+
   return (
     <>
       {/* Displays.BLANK (show nothing) */}

front-end/src/apps/audience-display/displays/displays.tsx

@@ -12,19 +12,25 @@ export interface DisplayProps {
 interface SeasonDisplay {
   matchPreview: FC<DisplayProps>;
   matchPlay: FC<DisplayProps>;
+  matchPlayStream: FC<DisplayProps>;
   matchResults: FC<DisplayProps>;
+  matchResultsStream: FC<DisplayProps>;
 }
 
 export const frcDefault: SeasonDisplay = {
   matchPlay: FRCDefault.MatchPlay,
+  matchPlayStream: FRCDefault.MatchPlay,
   matchPreview: FRCDefault.MatchPreview,
-  matchResults: FRCDefault.MatchResults
+  matchResults: FRCDefault.MatchResults,
+  matchResultsStream: FRCDefault.MatchResults
 };
 
 export const fgcDefault: SeasonDisplay = {
   matchPlay: FGCDefault.MatchPlay,
+  matchPlayStream: FGCDefault.MatchPlay,
   matchPreview: FGCDefault.MatchPreview,
-  matchResults: FGCDefault.MatchResults
+  matchResults: FGCDefault.MatchResults,
+  matchResultsStream: FGCDefault.MatchResults
 };
 
 // Map that contains all the displays for their seasons.

lib/models/src/base/Audience.ts

@@ -12,3 +12,12 @@ export enum DisplayModes {
   TIMER_ONLY = 'timer-only',
   STREAM = 'stream'
 }
+
+export enum AudienceScreens {
+  PREVIEW = 'preview',
+  MATCH_FULL = 'match-full',
+  MATCH_STREAM = 'match-stream',
+  RESULTS = 'results',
+  RESULTS_STREAM = 'results-stream',
+  RANKINGS = 'rankings'
+}