feat: Triptych NoData/Loading (#1840)

* Rename `isDup` -> `isOFM` since we now run on two different OFM screen types

* Triptych app setup + packaging instructions

* Working triptych app with viewport shifter

* Remove TODO--made an asana task for it

* Use matching param for triptych pane in data requests

* Cleanup and fix accidentally committed test code

* Working triptych frontend with new route + cleaned up OFM utilities

* Address credo complaints

* Use default simulation component for triptychs

* Add triptych player name mapping for tests

* fix: Tweak config so vscode can consistently resolve aliased import paths

* Remove a few console.logs that I missed

* Unclutter useBaseApiResponse and memoize logic that computes API url

* Add some missing config for the test env :doh:

* A no-op change in lib/, because the last commit didn't trigger CI for some reason??

* Revert "A no-op change in lib/, because the last commit didn't trigger CI for some reason??"

This reverts commit 88e5511.

* Revert "Revert "A no-op change in lib/, because the last commit didn't trigger CI for some reason??""

This reverts commit 7db3eae.

* Uncomment accidentally commented line of code

* Revert `isDUP` name to `isDup`

* Rename a few more isDUPs that the vscode refactor tool missed

* Run prettier

* Rename split-screen slots to left_, middle_, right_pane for consistency

* "Closed" -> "Car closed" per designs (plus some tweaks to avoid prettier making a mess of the existing code)

* Add packaging README section on communicating with Outfront

* Document `platform_position` value

* Adjust no-data/disabled templates to match new slot names

* New images.

* Changed loading and no_data to use new images.

---------

Co-authored-by: Jon Zimbel <[email protected]>

assets/src/apps/v2/triptych.tsx

@@ -46,7 +46,6 @@ const LOADING_LAYOUT = {
 const DISABLED_LAYOUT = {
   full_screen: {
     type: "no_data",
-    show_alternatives: true,
   },
   type: "screen_normal",
 };

assets/src/components/v2/triptych/no_data.tsx

@@ -1,24 +1,21 @@
 import React, { ComponentType } from "react";
-import LcdNoData from "Components/v2/lcd/no_data";
+import { imagePath } from "Util/util";
 
 interface Props {
   show_alternatives: boolean;
 }
 
-const NoData: ComponentType<Props> = ({
-  show_alternatives: showAlternatives,
-}) => {
-  // TODO: We likely want to show something different from the usual when we fail to fetch data for this screen type.
+const NoData: ComponentType<Props> = () => {
   return (
     <>
       <div className="no-data-left">
-        <LcdNoData show_alternatives={showAlternatives} />
+        <img src={imagePath("no-data-triptych.png")} />
       </div>
       <div className="no-data-middle">
-        <LcdNoData show_alternatives={showAlternatives} />
+        <img src={imagePath("no-data-triptych.png")} />
       </div>
       <div className="no-data-right">
-        <LcdNoData show_alternatives={showAlternatives} />
+        <img src={imagePath("no-data-triptych.png")} />
       </div>
     </>
   );

assets/src/components/v2/triptych/page_load_no_data.tsx

@@ -1,17 +1,17 @@
 import React, { ComponentType } from "react";
-import LcdPageLoadNoData from "Components/v2/lcd/page_load_no_data";
+import { imagePath } from "Util/util";
 
 const PageLoadNoData: ComponentType = () => {
   return (
     <>
       <div className="no-data-left">
-        <LcdPageLoadNoData />
+        <img src={imagePath("loading-triptych.png")} />
       </div>
       <div className="no-data-middle">
-        <LcdPageLoadNoData />
+        <img src={imagePath("loading-triptych.png")} />
       </div>
       <div className="no-data-right">
-        <LcdPageLoadNoData />
+        <img src={imagePath("loading-triptych.png")} />
       </div>
     </>
   );

assets/src/util/outfront.tsx

@@ -123,7 +123,7 @@ const getTags = (): OFMTag[] | null => {
 };
 
 const arrayConfigurationToTriptychPane = (
-  arrayConfiguration: string | null,
+  arrayConfiguration: string | null
 ): TriptychPane | null => {
   switch (arrayConfiguration) {
     case "Triple-Left":
@@ -154,7 +154,7 @@ interface MRAID {
   addEventListener(
     eventID: EventID,
     callback: () => void,
-    layoutID: LayoutID,
+    layoutID: LayoutID
   ): void;
   EVENTS: { ONSCREEN: EventID };
 }
@@ -205,9 +205,7 @@ export const __TEST_setFakeMRAID__ = (options: {
 
   // Be noisy about it so that we don't accidentally ship a package that calls this function.
   alert(
-    `Setting fake MRAID object for testing purposes: ${JSON.stringify(
-      options,
-    )}`,
+    `Setting fake MRAID object for testing purposes: ${JSON.stringify(options)}`
   );
 
   // Since `window.parent.parent.parent...` returns itself if the window does not have a parent, we can just set the mraid object
@@ -224,7 +222,7 @@ const BASE_MRAID: Pick<MRAID, "EVENTS" | "requestInit" | "addEventListener"> = {
   addEventListener(eventID, callback, layoutID) {
     if (eventID == "fakeOnscreenEvent" && layoutID == "fakeLayoutID") {
       console.log(
-        "FakeMRAID: Setting fake ONSCREEN event to fire in 3 seconds",
+        "FakeMRAID: Setting fake ONSCREEN event to fire in 3 seconds"
       );
 
       setTimeout(() => {
@@ -233,7 +231,7 @@ const BASE_MRAID: Pick<MRAID, "EVENTS" | "requestInit" | "addEventListener"> = {
       }, 2000);
     } else {
       throw new Error(
-        "FakeMRAID: Stubbed addEventListener method expected eventID of 'fakeOnscreenEvent' and layoutID of 'fakeLayoutID'",
+        "FakeMRAID: Stubbed addEventListener method expected eventID of 'fakeOnscreenEvent' and layoutID of 'fakeLayoutID'"
       );
     }
   },