tweak: Triptych/OFM app packaging improvements (#1870)

* Move OFM app HTML out of priv/static and into version control; Update packaging instructions with additional steps to minimize package size * Bump triptych version * tweak: Adjust routes/endpoints to accept error logs from OFM clients * Add and use OFM app error boundary component * Prevent OFM util fns from swallowing errors so the boundary can catch and log them * Fix incorrect fn name in packaging READMEs * Bump triptych version * Completely remove closing-doors PSA set * Convert all rgba values to hex in CSS used by triptych app * Remove animation on "You are here" arrow :( * Use no-data graphic for triptych app preview image, since apparently it's used as a fallback * tweak: Label lowest crowding level as "Seats available" (#1881) * Replace triptych video with static only (#1880) --------- Co-authored-by: Hannah Purcell <[email protected]>
mbta · Oct 18, 2023 · 10fb6dc · 10fb6dc
1 parent 31f3885
commit 10fb6dc
Show file tree

Hide file tree

Showing 19 changed files with 197 additions and 135 deletions.
diff --git a/assets/css/v2/outfront_common/debug.scss b/assets/css/v2/outfront_common/debug.scss
@@ -6,7 +6,7 @@
   overflow-y: hidden;
   overflow-x: hidden;
 
-  background: rgba(0, 0, 0, 0.5);
+  background: #00000080;
 
   display: flex;
   flex-flow: column wrap;

diff --git a/assets/css/v2/placeholder.scss b/assets/css/v2/placeholder.scss
@@ -4,27 +4,27 @@
   border-radius: 16px;
 
   &--blue {
-    background-color: rgba(0, 61, 165, 0.4);
+    background-color: #003da566;
   }
 
   &--green {
-    background-color: rgba(0, 132, 61, 0.4);
+    background-color: #00843d66;
   }
 
   &--red {
-    background-color: rgba(218, 41, 28, 0.4);
+    background-color: #da291c66;
   }
 
   &--orange {
-    background-color: rgba(237, 139, 0, 0.4)
+    background-color: #ed8b0066;
   }
 
   &--grey,
   &--gray {
-    background-color: rgba(124, 135, 142, 0.4);
+    background-color: #7c878e66;
   }
 
   &--black {
-    background-color: rgba(0, 0, 0, 1);
+    background-color: #000000;
   }
 }
diff --git a/assets/css/v2/train_crowding.scss b/assets/css/v2/train_crowding.scss
@@ -8,14 +8,16 @@
     color: #e5e4e1;
     box-sizing: border-box;
   }
+
   &__body {
     display: flex;
     position: relative;
     flex-direction: column;
     height: 920px;
     background-color: #d9d6d0;
-    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.32);
+    box-shadow: 0px 8px 12px 0px #00000052;
   }
+
   &__footer {
     display: flex;
     background-color: #cccbc8;
@@ -40,6 +42,7 @@
   @include font--heading-3;
   margin-top: auto;
   color: #FFFFFF;
+
   .destination {
     padding-left: 109px;
   }
@@ -59,6 +62,7 @@
   @include font--body-2;
   display: inline-flex;
   align-items: center;
+
   .key-icon {
     padding-right: 72px;
   }
@@ -77,53 +81,12 @@
   padding: 161px 52px 58px 52px;
 }
 
-@keyframes up-arrow {
-  from {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-20px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes up-left-arrow {
-  from {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-12px) translateX(-12px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes up-right-arrow {
-  from {
-    transform: translateY(0) rotate(90deg);
-  }
-  50% {
-    transform: translateY(-12px) translateX(12px) rotate(90deg);
-  }
-  to {
-    transform: translateY(0) rotate(90deg);
-  }
-}
-
 .crowding-widget__you-are-here-arrow {
   width: 180px;
   height: 180px;
-  &--up {
-    animation: up-arrow 1.2s infinite ease-in-out;
-  }
-  &--up-left {
-    animation: up-left-arrow 1.2s infinite ease-in-out;
-  }
+
   &--up-right {
-    animation: up-right-arrow 1.2s infinite ease-in-out;
+    transform: rotate(90deg);
   }
 }
 
@@ -134,6 +97,7 @@
   margin-top: auto;
   padding: 0 72px 108px 72px;
   text-align: left;
+
   &--right-align {
     text-align: right;
   }

diff --git a/assets/css/v2/triptych/evergreen.scss b/assets/css/v2/triptych/evergreen.scss
@@ -5,7 +5,7 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    background-color: rgba(23, 31, 38, 0.7);
+    background-color: #171f26b3;
     @include font--caption-3;
     color: white;
     text-align: right;

diff --git a/assets/css/v2/triptych/simulation.scss b/assets/css/v2/triptych/simulation.scss
@@ -10,13 +10,15 @@
   &::-webkit-scrollbar {
     width: 12px;
   }
+
   &::-webkit-scrollbar-thumb {
     background-color: #607180;
     border-radius: 12px;
     border: 2px solid #2e3f4d;
   }
+
   &::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: inset 0 0 6px #0000004d;
     border-radius: 12px;
     background-color: #2e3f4d;
   }
@@ -51,7 +53,7 @@
         height: 1920px;
       }
 
-      & > * {
+      &>* {
         transform-origin: top left;
         transform: scale(17.92%);
       }
@@ -72,7 +74,7 @@
       width: 3240px;
     }
 
-    & > * {
+    &>* {
       transform-origin: top left;
       transform: scale(17.92%);
     }

diff --git a/assets/src/apps/v2/dup.tsx b/assets/src/apps/v2/dup.tsx
@@ -39,6 +39,7 @@ import NoData from "Components/v2/dup/no_data";
 import OvernightDepartures from "Components/v2/dup/overnight_departures";
 import { usePlayerName } from "Hooks/outfront";
 import { isDup } from "Util/outfront";
+import OutfrontErrorBoundary from "Components/v2/outfront_error_boundary";
 
 const TYPE_TO_COMPONENT = {
   screen_normal: NormalScreen,
@@ -124,14 +125,12 @@ const responseMapper: ResponseMapper = (apiResponse) => {
 
 const App = (): JSX.Element => {
   if (isDup()) {
-    const playerName = usePlayerName()!;
-    const id = `DUP-${playerName.trim()}`;
     return (
       <MappingContext.Provider value={TYPE_TO_COMPONENT}>
         <ResponseMapperContext.Provider value={responseMapper}>
-          <Viewport>
-            <ScreenPage id={id} />
-          </Viewport>
+          <OutfrontErrorBoundary>
+            <PackagedApp />
+          </OutfrontErrorBoundary>
         </ResponseMapperContext.Provider>
       </MappingContext.Provider>
     );
@@ -167,4 +166,17 @@ const App = (): JSX.Element => {
   );
 };
 
+// Defined as a separate component so that `usePlayerName` can execute
+// within the error boundary.
+const PackagedApp = (): JSX.Element => {
+  const playerName = usePlayerName()!;
+  const id = `DUP-${playerName.trim()}`;
+
+  return (
+    <Viewport>
+      <ScreenPage id={id} />
+    </Viewport>
+  );
+};
+
 ReactDOM.render(<App />, document.getElementById("app"));
diff --git a/assets/src/apps/v2/triptych.tsx b/assets/src/apps/v2/triptych.tsx
@@ -5,6 +5,7 @@ require("../../../css/triptych_v2.scss");
 import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import OutfrontErrorBoundary from "Components/v2/outfront_error_boundary";
 
 import { usePlayerName } from "Hooks/outfront";
 import { isTriptych } from "Util/outfront";
@@ -74,14 +75,12 @@ const responseMapper: ResponseMapper = (apiResponse) => {
 
 const App = (): JSX.Element => {
   if (isTriptych()) {
-    const playerName = usePlayerName()!;
-
     return (
       <MappingContext.Provider value={TYPE_TO_COMPONENT}>
         <ResponseMapperContext.Provider value={responseMapper}>
-          <Viewport>
-            <ScreenPage id={playerName} />
-          </Viewport>
+          <OutfrontErrorBoundary>
+            <PackagedApp />
+          </OutfrontErrorBoundary>
         </ResponseMapperContext.Provider>
       </MappingContext.Provider>
     );
@@ -114,6 +113,18 @@ const App = (): JSX.Element => {
         </Route>
       </Switch>
     </Router>
+  )
+};
+
+// Defined as a separate component so that `usePlayerName` can execute
+// within the error boundary.
+const PackagedApp = (): JSX.Element => {
+  const playerName = usePlayerName()!;
+
+  return (
+    <Viewport>
+      <ScreenPage id={playerName} />
+    </Viewport>
   );
 };
 

diff --git a/assets/src/components/dup/README.md b/assets/src/components/dup/README.md
@@ -1,3 +1,6 @@
+> [!WARNING]\
+> This app is no longer being used or developed. These instructions might be out of date. Use the v2 DUP app packaging instructions instead.
+
 # DUP app packaging
 
 - Ensure [Corsica](https://hexdocs.pm/corsica/Corsica.html) is used on the server to allow CORS requests (ideally limited to just the DUP-relevant routes). It should already be configured at [this line](/lib/screens_web/controllers/screen_api_controller.ex#L7) in the API controller--if it is, you don't need to do anything for this step.

diff --git a/assets/src/components/v2/dup/README.md b/assets/src/components/v2/dup/README.md
@@ -2,36 +2,15 @@
 
 - Ensure [Corsica](https://hexdocs.pm/corsica/Corsica.html) is used on the server to allow CORS requests (ideally limited to just the DUP-relevant routes). It should already be configured at [this line](/lib/screens_web/controllers/v2/screen_api_controller.ex#L9) in the API controller--if it is, you don't need to do anything for this step.
 - Double check that any behavior specific to the DUP screen environment happens inside of an `isDup()` or `isOFM()` check. This includes:
-  - `buildApiPath` in use_api_response.tsx should return a full URL for the API path: prefix `apiPath` string with "https://screens.mbta.com".
+  - `getOutfrontAbsolutePath` in use_api_response.tsx should return a full URL for the API path: prefix `apiPath` string with "https://screens.mbta.com".
   - `imagePath` in util.tsx should return relative paths (no leading `/`).
-- Create priv/static/dup-app.html if it doesn’t already exist. Copy paste the following contents in:
-
-  ```html
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="utf-8" />
-      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>Screens</title>
-      <link rel="stylesheet" href="dup_v2.css" />
-    </head>
-
-    <body>
-      <div
-        id="app"
-        data-last-refresh="2020-09-25T17:23:00Z"
-        data-environment-name="screens-prod"
-      ></div>
-      <script type="text/javascript" src="polyfills.js"></script>
-      <script type="text/javascript" src="dup_v2.js"></script>
-    </body>
-  </html>
-  ```
-
 - Set the version string in assets/src/components/v2/dup/version.tsx to `current_year.current_month.current_day.1`.
-- In assets/webpack.config.js, change `publicPath` in the font config to have value `'fonts/'`.
-- If you've renamed / removed image assets, you might want to delete the corresponding folder in `/priv/static`. The folder accumulates assets without clearing old ones out, and these will be included in the built bundle!
+- In assets/webpack.config.js:
+  - Comment out all lines in the `entry` object except for **polyfills** and **dup_v2**.
+  - Change `publicPath` in the font config to have value `'fonts/'`.
+- Delete priv/static with `rm -r priv/static` from the project root.
+- Temporarily start the server to have it repopulate priv/static. `iex -S mix phx.server` from the project root.
+  - You can stop the server as soon as it prints out the big list of files built by webpack.
 - **Only if you are packaging for local testing**
   - add the following to the top of assets/src/apps/v2/dup.tsx, filling in the string values:
     ```ts
@@ -49,7 +28,7 @@
   for ROTATION_INDEX in {0..2}; do
     echo "export const ROTATION_INDEX = ${ROTATION_INDEX};" > ../../assets/src/components/v2/dup/rotation_index.tsx && \
     npm --prefix ../../assets run deploy && \
-    cp -r css/dup_v2.css js/polyfills.js js/dup_v2.js ../dup_preview.png . && \
+    cp -r css/dup_v2.css js/polyfills.js js/dup_v2.js ../dup_preview.png ../dup-app.html . && \
     cp ../dup_template.json ./template.json && \
     sed -i "" "s/DUP APP ./DUP APP ${ROTATION_INDEX}/" template.json && \
     zip -r dup-app-${ROTATION_INDEX}.zip dup_v2.css polyfills.js dup_v2.js fonts images dup-app.html template.json dup_preview.png