WIP: Triptych app changes (#2038)

* Add a doc with triptych testing tips

* Formatting.

* Ignore refreshRate for OFM.

* Added new webpack module for packaged triptychs.

* Updated package instructions to use new packaged triptych entry.

* Version bump.

* Image load changes.

* Triptych instruction updates.

* TSConfig changes to help resolve png imports.

* Formatting.

* Added webpack-env for require.context.

* Fixed SVGR configuration for Triptych packages.

* Temporarily always show crowding widget.

* Fixed file-loader config for deployed apps.

* Formatting.

* Doc update.

* Revert change that shouldn't have been committed.

* Fix lint.

* Moved declarations to existing file.

* Added a custom path to webpack and tsconfig for static images.

* Added a comment.

* Made some common webpack objects to reduce code duplication.

* Wording change brought over from #1877.

* Simplified README by providing the file in the repo.

* Removed doc.

* Fixed regex.

* Forgot how to make variables apparently.

* Version bump.

* Version bump.

---------

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

assets/package.json

@@ -50,6 +50,7 @@
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",
+    "@types/webpack-env": "^1.18.4",
     "babel-loader": "^8.2.2",
     "concurrently": "^8.2.2",
     "copy-webpack-plugin": "^6.4.1",

assets/src/components/v2/cr_departures/cr_departure_time.tsx

@@ -2,7 +2,7 @@ import BaseDepartureTime from "Components/eink/base_departure_time";
 import moment from "moment";
 import React from "react";
 import { TimeRepresentation } from "Util/time_representation";
-import LiveDataSvg from "../../../../static/images/svgr_bundled/live-data-small.svg";
+import LiveDataSvg from "Images/svgr_bundled/live-data-small.svg";
 
 interface CRDepartureTimeProps {
   departureType: "schedule" | "prediction";

assets/src/components/v2/cr_departures/cr_departures_header_free.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import CRPill from "../../../../static/images/svgr_bundled/pills/commuter-rail.svg";
+import CRPill from "Images/svgr_bundled/pills/commuter-rail.svg";
 import RoutePill from "../departures/route_pill";
 import { getHexColor } from "Util/svg_utils";
 

assets/src/components/v2/cr_departures/cr_departures_header_normal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import CRPill from "../../../../static/images/svgr_bundled/pills/commuter-rail.svg";
+import CRPill from "Images/svgr_bundled/pills/commuter-rail.svg";
 import { getHexColor } from "Util/svg_utils";
 
 const CRDeparturesHeaderNormal = () => {

assets/src/components/v2/cr_departures/overnight_cr_departures.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentType } from "react";
 import DeparturesTable from "Components/v2/cr_departures/cr_departures_table";
 import CRDeparturesHeader from "Components/v2/cr_departures/cr_departures_header_normal";
-import OvernightMoon from "../../../../static/images/svgr_bundled/overnight.svg";
+import OvernightMoon from "Images/svgr_bundled/overnight.svg";
 import moment from "moment";
 import { imagePath } from "Util/util";
 import { Direction } from "./cr_departures";

assets/src/components/v2/disruption_diagram/disruption_diagram.tsx

@@ -9,13 +9,13 @@ import React, {
 } from "react";
 import { classWithModifier, classWithModifiers } from "Util/util";
 
-import LargeXOctagonBordered from "../../../../static/images/svgr_bundled/disruption_diagram/large-x-octagon-bordered.svg";
-import SmallXOctagon from "../../../../static/images/svgr_bundled/disruption_diagram/small-x-octagon.svg";
-import CurrentStopDiamond from "../../../../static/images/svgr_bundled/disruption_diagram/current-stop-diamond.svg";
-import CurrentStopOpenDiamond from "../../../../static/images/svgr_bundled/disruption_diagram/current-stop-open-diamond.svg";
-import ArrowLeftEndpoint from "../../../../static/images/svgr_bundled/disruption_diagram/arrow-left-endpoint.svg";
-import ArrowRightEndpoint from "../../../../static/images/svgr_bundled/disruption_diagram/arrow-right-endpoint.svg";
-import ShuttleBusIcon from "../../../../static/images/svgr_bundled/disruption_diagram/shuttle-emphasis-icon.svg";
+import LargeXOctagonBordered from "Images/svgr_bundled/disruption_diagram/large-x-octagon-bordered.svg";
+import SmallXOctagon from "Images/svgr_bundled/disruption_diagram/small-x-octagon.svg";
+import CurrentStopDiamond from "Images/svgr_bundled/disruption_diagram/current-stop-diamond.svg";
+import CurrentStopOpenDiamond from "Images/svgr_bundled/disruption_diagram/current-stop-open-diamond.svg";
+import ArrowLeftEndpoint from "Images/svgr_bundled/disruption_diagram/arrow-left-endpoint.svg";
+import ArrowRightEndpoint from "Images/svgr_bundled/disruption_diagram/arrow-right-endpoint.svg";
+import ShuttleBusIcon from "Images/svgr_bundled/disruption_diagram/shuttle-emphasis-icon.svg";
 
 // Width of the disruption diagram, dependent on the screen width
 const DIAGRAM_WIDTH = 904;

assets/src/components/v2/dup/departures/no_data_section.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import NoConnection from "../../../../../static/images/svgr_bundled/live-data-none.svg";
+import NoConnection from "Images/svgr_bundled/live-data-none.svg";
 import FreeText from "Components/v2/free_text";
 
 const NoDataSection = ({ text }) => {

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

@@ -1,6 +1,6 @@
 import React, { ComponentType } from "react";
 import LinkArrow from "../bundled_svg/link_arrow";
-import Loading from "../../../../static/images/svgr_bundled/loading.svg";
+import Loading from "Images/svgr_bundled/loading.svg";
 import NormalHeader from "./normal_header";
 import { REPLACEMENTS } from "./no_data";
 import { useStationName } from "Hooks/outfront";

assets/src/components/v2/eink/bottom_screen_filler.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType } from "react";
-import HandWithPhone from "../../../../static/images/svgr_bundled/hand-with-phone.svg";
+import HandWithPhone from "Images/svgr_bundled/hand-with-phone.svg";
 
 const BottomScreenFiller: ComponentType = () => (
   <div className="bottom-screen-filler">

assets/src/components/v2/eink/departures_no_data.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType } from "react";
-import NoConnection from "../../../../static/images/svgr_bundled/live-data-none.svg";
+import NoConnection from "Images/svgr_bundled/live-data-none.svg";
 
 interface Props {
   show_alternatives: boolean;

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

@@ -1,6 +1,6 @@
 import React, { ComponentType } from "react";
 import { imagePath } from "Util/util";
-import NoConnection from "../../../../static/images/svgr_bundled/live-data-none.svg";
+import NoConnection from "Images/svgr_bundled/live-data-none.svg";
 import BottomScreenFiller from "Components/v2/eink/bottom_screen_filler";
 import moment from "moment";
 

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

@@ -1,7 +1,7 @@
 import React, { ComponentType } from "react";
 import { imagePath } from "Util/util";
 import BottomScreenFiller from "Components/v2/eink/bottom_screen_filler";
-import Loading from "../../../../static/images/svgr_bundled/loading.svg";
+import Loading from "Images/svgr_bundled/loading.svg";
 
 const PageLoadNoData: ComponentType = () => {
   return (

assets/src/components/v2/lcd/departures_no_data.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType } from "react";
-import NoConnection from "../../../../static/images/svgr_bundled/live-data-none.svg";
+import NoConnection from "Images/svgr_bundled/live-data-none.svg";
 
 interface Props {
   show_alternatives: boolean;

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

@@ -1,6 +1,6 @@
-import NoConnection from "../../../../static/images/svgr_bundled/live-data-none.svg";
+import NoConnection from "Images/svgr_bundled/live-data-none.svg";
 import React, { ComponentType } from "react";
-import TLogo from "../../../../static/images/svgr_bundled/logo.svg";
+import TLogo from "Images/svgr_bundled/logo.svg";
 
 interface Props {
   show_alternatives: boolean;

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

@@ -1,5 +1,5 @@
 import React, { ComponentType } from "react";
-import Loading from "../../../../static/images/svgr_bundled/loading.svg";
+import Loading from "Images/svgr_bundled/loading.svg";
 
 const coolBlack = "#171F26";
 

assets/src/components/v2/normal_header.tsx

@@ -2,7 +2,7 @@ import useTextResizer from "Hooks/v2/use_text_resizer";
 import React, { forwardRef, ComponentType } from "react";
 import { getDatasetValue } from "Util/dataset";
 
-import LiveDataSvg from "../../../static/images/svgr_bundled/live-data-small.svg";
+import LiveDataSvg from "Images/svgr_bundled/live-data-small.svg";
 
 import {
   classWithModifier,

assets/src/components/v2/outfront_evergreen_content.tsx

@@ -5,6 +5,11 @@ import useIsOnScreen from "Hooks/v2/use_is_on_screen";
 import { imagePath } from "Util/util";
 import { TRIPTYCH_VERSION } from "./triptych/version";
 import { usePlayerName } from "Hooks/outfront";
+import { isOFM } from "Util/outfront";
+
+if (isOFM()) {
+  require.context("Images/triptych_psas", true, /\.webp$/);
+}
 
 const OutfrontEvergreenContent: ComponentType<{
   asset_url: string;

assets/src/components/v2/pre_fare_single_screen_alert.tsx

@@ -6,12 +6,12 @@ import DisruptionDiagram, {
 } from "./disruption_diagram/disruption_diagram";
 import { classWithModifier, classWithModifiers, formatCause } from "Util/util";
 
-import ClockIcon from "../../../static/images/svgr_bundled/clock-negative.svg";
-import NoServiceIcon from "../../../static/images/svgr_bundled/no-service.svg";
-import InfoIcon from "../../../static/images/svgr_bundled/info.svg";
-import ISAIcon from "../../../static/images/svgr_bundled/isa.svg";
-import WalkingIcon from "../../../static/images/svgr_bundled/nearby.svg";
-import ShuttleBusIcon from "../../../static/images/svgr_bundled/bus.svg";
+import ClockIcon from "Images/svgr_bundled/clock-negative.svg";
+import NoServiceIcon from "Images/svgr_bundled/no-service.svg";
+import InfoIcon from "Images/svgr_bundled/info.svg";
+import ISAIcon from "Images/svgr_bundled/isa.svg";
+import WalkingIcon from "Images/svgr_bundled/nearby.svg";
+import ShuttleBusIcon from "Images/svgr_bundled/bus.svg";
 
 interface PreFareSingleScreenAlertProps {
   issue: string;

assets/src/components/v2/shuttle_bus_info.tsx

@@ -1,8 +1,8 @@
 import Arrow, { Direction } from "Components/solari/arrow";
 import React, { ComponentType } from "react";
 import { imagePath } from "Util/util";
-import IsaSvg from "../../../static/images/svgr_bundled/isa-negative.svg";
-import Free from "../../../static/images/svgr_bundled/free.svg";
+import IsaSvg from "Images/svgr_bundled/isa-negative.svg";
+import Free from "Images/svgr_bundled/free.svg";
 import ClockIcon from "Components/v2/clock_icon";
 
 interface Props {

assets/src/components/v2/train_crowding.tsx

@@ -5,33 +5,33 @@ import { NormalHeaderTime } from "./normal_header";
 import { usePlayerName } from "Hooks/outfront";
 import { TRIPTYCH_VERSION } from "./triptych/version";
 
-import Logo from "../../../static/images/svgr_bundled/logo.svg";
-import ArrowUp from "../../../static/images/svgr_bundled/Arrow-90.svg";
-import ArrowUpLeft from "../../../static/images/svgr_bundled/Arrow-45.svg";
+import Logo from "Images/svgr_bundled/logo.svg";
+import ArrowUp from "Images/svgr_bundled/Arrow-90.svg";
+import ArrowUpLeft from "Images/svgr_bundled/Arrow-45.svg";
 
-import KeyNotCrowded from "../../../static/images/svgr_bundled/train_crowding/Car-NotCrowded-Key.svg";
-import KeySomeCrowding from "../../../static/images/svgr_bundled/train_crowding/Car-SomeCrowding-Key.svg";
-import KeyCrowded from "../../../static/images/svgr_bundled/train_crowding/Car-Crowded-Key.svg";
-import KeyNoData from "../../../static/images/svgr_bundled/train_crowding/Car-NoData-Key.svg";
-import KeyClosed from "../../../static/images/svgr_bundled/train_crowding/Car-Closed-Key.svg";
+import KeyNotCrowded from "Images/svgr_bundled/train_crowding/Car-NotCrowded-Key.svg";
+import KeySomeCrowding from "Images/svgr_bundled/train_crowding/Car-SomeCrowding-Key.svg";
+import KeyCrowded from "Images/svgr_bundled/train_crowding/Car-Crowded-Key.svg";
+import KeyNoData from "Images/svgr_bundled/train_crowding/Car-NoData-Key.svg";
+import KeyClosed from "Images/svgr_bundled/train_crowding/Car-Closed-Key.svg";
 
-import CarNotCrowdedLeft from "../../../static/images/svgr_bundled/train_crowding/Car-NotCrowded-Left.svg";
-import CarSomeCrowdingLeft from "../../../static/images/svgr_bundled/train_crowding/Car-SomeCrowding-Left.svg";
-import CarCrowdedLeft from "../../../static/images/svgr_bundled/train_crowding/Car-Crowded-Left.svg";
-import CarNoDataLeft from "../../../static/images/svgr_bundled/train_crowding/Car-NoData-Left.svg";
-import CarClosedLeft from "../../../static/images/svgr_bundled/train_crowding/Car-Closed-Left.svg";
+import CarNotCrowdedLeft from "Images/svgr_bundled/train_crowding/Car-NotCrowded-Left.svg";
+import CarSomeCrowdingLeft from "Images/svgr_bundled/train_crowding/Car-SomeCrowding-Left.svg";
+import CarCrowdedLeft from "Images/svgr_bundled/train_crowding/Car-Crowded-Left.svg";
+import CarNoDataLeft from "Images/svgr_bundled/train_crowding/Car-NoData-Left.svg";
+import CarClosedLeft from "Images/svgr_bundled/train_crowding/Car-Closed-Left.svg";
 
-import CarNotCrowdedMiddle from "../../../static/images/svgr_bundled/train_crowding/Car-NotCrowded-Middle.svg";
-import CarSomeCrowdingMiddle from "../../../static/images/svgr_bundled/train_crowding/Car-SomeCrowding-Middle.svg";
-import CarCrowdedMiddle from "../../../static/images/svgr_bundled/train_crowding/Car-Crowded-Middle.svg";
-import CarNoDataMiddle from "../../../static/images/svgr_bundled/train_crowding/Car-NoData-Middle.svg";
-import CarClosedMiddle from "../../../static/images/svgr_bundled/train_crowding/Car-Closed-Middle.svg";
+import CarNotCrowdedMiddle from "Images/svgr_bundled/train_crowding/Car-NotCrowded-Middle.svg";
+import CarSomeCrowdingMiddle from "Images/svgr_bundled/train_crowding/Car-SomeCrowding-Middle.svg";
+import CarCrowdedMiddle from "Images/svgr_bundled/train_crowding/Car-Crowded-Middle.svg";
+import CarNoDataMiddle from "Images/svgr_bundled/train_crowding/Car-NoData-Middle.svg";
+import CarClosedMiddle from "Images/svgr_bundled/train_crowding/Car-Closed-Middle.svg";
 
-import CarNotCrowdedRight from "../../../static/images/svgr_bundled/train_crowding/Car-NotCrowded-Right.svg";
-import CarSomeCrowdingRight from "../../../static/images/svgr_bundled/train_crowding/Car-SomeCrowding-Right.svg";
-import CarCrowdedRight from "../../../static/images/svgr_bundled/train_crowding/Car-Crowded-Right.svg";
-import CarNoDataRight from "../../../static/images/svgr_bundled/train_crowding/Car-NoData-Right.svg";
-import CarClosedRight from "../../../static/images/svgr_bundled/train_crowding/Car-Closed-Right.svg";
+import CarNotCrowdedRight from "Images/svgr_bundled/train_crowding/Car-NotCrowded-Right.svg";
+import CarSomeCrowdingRight from "Images/svgr_bundled/train_crowding/Car-SomeCrowding-Right.svg";
+import CarCrowdedRight from "Images/svgr_bundled/train_crowding/Car-Crowded-Right.svg";
+import CarNoDataRight from "Images/svgr_bundled/train_crowding/Car-NoData-Right.svg";
+import CarClosedRight from "Images/svgr_bundled/train_crowding/Car-Closed-Right.svg";
 
 type FrontCarDirection = "left" | "right";
 type OccupancyStatus =
@@ -222,8 +222,8 @@ const TrainCrowding: React.ComponentType<Props> = ({
           identifiers={identifiers}
         >
           <div className="crowding-widget__footer__key-row">
-            <KeyNotCrowded width="137" height="100" className="key-icon" /> Not
-            crowded
+            <KeyNotCrowded width="137" height="100" className="key-icon" />{" "}
+            Seats available
           </div>
           <div className="crowding-widget__footer__key-row">
             <KeySomeCrowding width="137" height="100" className="key-icon" />{" "}