[feature] Store triptych psas (#1845)

* Test PSAs uploaded, to be replaced

* New local evergreen widget backend

* Split-pane support for triptychs frontend

* Make conversion of filename to slot_name more robust; pluralize config key

* Seed :rand with current time / 15

* Evergreen takes conditional prop for video playing

* Hook determines if app is onscreen to decide if video should be playing

* feat: Add admin config columns (thus far) for triptych app (#1841)

* fix: Handle unrecognized screen IDs in `screen_name_for_id` (#1842)

* Send and log version in data requests from OFM clients

* Always include logging params for triptych, even if we fail to determine pane

* Add a new log fn for unrecognized triptych player name (#1844)

* Accommodate various psa file types

* Log when PSA file retrieval fails

* Use stricter positioning for the panes

* Added new config boolean to allow for conditionally display version and playername.

* Added a couple of font mixins.

* Added identifiers to TrainCrowding.

* Added an EvergreenContent component for Triptychs. Just a wrapper of the OG with identifiers.

* Allowed props to only change when needed.

* Changed where identifiers are rendered for PSAs.

* Add remaining admin columns for triptych config

* Fix header font color for crowding widget (#1848)

* Bring box-shadow of key to foreground (#1849)

* Default to first folder of psas if needed

* Set evergreen image size

* Replace test psas with real ones

---------

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

assets/css/triptych_v2.scss

@@ -27,6 +27,18 @@
   line-height: 118px;
 }
 
+@mixin font--caption-2 {
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
+}
+
+@mixin font--caption-3 {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 40px;
+}
+
 // Top level stuff
 @import "v2/triptych/screen_container";
 @import "v2/triptych/viewport";
@@ -47,6 +59,8 @@
 @import "v2/outfront_common/debug";
 @import "v2/triptych/debug";
 
+@import "v2/triptych/evergreen";
+
 body {
   margin: 0px;
   font-family: Inter, sans-serif;

assets/css/v2/train_crowding.scss

@@ -10,6 +10,7 @@
   }
   &__body {
     display: flex;
+    position: relative;
     flex-direction: column;
     height: 920px;
     background-color: #d9d6d0;
@@ -38,6 +39,7 @@
 .crowding-widget__header__destination-sentence {
   @include font--heading-3;
   margin-top: auto;
+  color: #FFFFFF;
   .destination {
     padding-left: 109px;
   }
@@ -50,6 +52,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  position: relative;
 }
 
 .crowding-widget__footer__key-row {
@@ -61,6 +64,13 @@
   }
 }
 
+.crowding-widget__footer__identifiers {
+  @include font--caption-2;
+  position: absolute;
+  bottom: 18px;
+  right: 24px;
+}
+
 .crowding-widget__train-row {
   display: flex;
   justify-content: space-between;

assets/css/v2/triptych/evergreen.scss

@@ -0,0 +1,20 @@
+.left-pane,
+.middle-pane,
+.right-pane {
+  .evergreen-content__identifiers {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(23, 31, 38, 0.7);
+    @include font--caption-3;
+    color: white;
+    text-align: right;
+    padding: 12px 24px 18px 24px;
+  }
+}
+
+.evergreen-content-image__image,
+.evergreen-content-video.looping-video {
+  width: 1080px;
+  height: 1920px;
+}

assets/css/v2/triptych/screen_container.scss

@@ -5,3 +5,21 @@
   margin: 0px auto;
   overflow: hidden;
 }
+
+.left-pane,
+.middle-pane,
+.right-pane {
+  overflow: hidden;
+  position: absolute;
+  width: 1080px;
+  height: 1920px;
+  top: 0;
+}
+
+.middle-pane {
+  left: 1080px;
+}
+
+.right-pane {
+  left: 2160px;
+}

assets/src/apps/v2/triptych.tsx

@@ -21,19 +21,25 @@ import SimulationScreenPage from "Components/v2/simulation_screen_page";
 import Viewport from "Components/v2/triptych/viewport";
 
 import FullScreen from "Components/v2/basic_layouts/full_screen";
+import TriptychThreePane from "Components/v2/triptych/triptych_three_pane";
 
 import PageLoadNoData from "Components/v2/triptych/page_load_no_data";
 import NoData from "Components/v2/triptych/no_data";
 
 import Placeholder from "Components/v2/placeholder";
 import TrainCrowding from "Components/v2/train_crowding";
+import OutfrontEvergreenContent from "Components/v2/outfront_evergreen_content";
 
 const TYPE_TO_COMPONENT = {
+  // Layouts
   screen_normal: FullScreen,
-  placeholder: Placeholder,
+  screen_split: TriptychThreePane,
+  // Components
   page_load_no_data: PageLoadNoData,
   no_data: NoData,
   train_crowding: TrainCrowding,
+  evergreen_content: OutfrontEvergreenContent,
+  placeholder: Placeholder,
 };
 
 const LOADING_LAYOUT = {

assets/src/components/admin/admin_tables.tsx

@@ -549,6 +549,30 @@ const v2Columns = [
   },
 ];
 
+const screenIDColumn = {
+  Header: "Screen ID",
+  accessor: "id",
+  Filter: DefaultColumnFilter,
+  FormCell: FormStaticCell,
+};
+
+const screenNameColumn = {
+  Header: "Name",
+  accessor: "name",
+  Cell: EditableCell,
+  Filter: DefaultColumnFilter,
+  FormCell: FormTextCell,
+};
+
+const evergreenContentColumn = {
+  Header: "Evergreen Content",
+  accessor: buildAppParamAccessor("evergreen_content"),
+  mutator: buildAppParamMutator("evergreen_content"),
+  Cell: EditableTextarea,
+  disableFilters: true,
+  FormCell: FormTextarea,
+};
+
 const alertsColumn = {
   Header: "Alerts",
   accessor: buildAppParamAccessor("alerts"),
@@ -705,6 +729,15 @@ const localEvergreenSetsColumn = {
   FormCell: FormTextarea,
 };
 
+const showIdentifiersColumn = {
+  Header: "Show Version & Player Name?",
+  accessor: buildAppParamAccessor("show_identifiers"),
+  mutator: buildAppParamMutator("show_identifiers"),
+  Cell: EditableCheckbox,
+  Filter: DefaultColumnFilter,
+  FormCell: FormBoolean,
+}
+
 const PreFareV2ScreensTable = (): JSX.Element => {
   const dataFilter = ({ app_id }) => {
     return app_id === "pre_fare_v2";
@@ -783,8 +816,12 @@ const TriptychV2ScreensTable = (): JSX.Element => {
   return (
     <AdminTable
       columns={[
+        screenIDColumn,
+        screenNameColumn,
         trainCrowdingColumn,
         localEvergreenSetsColumn,
+        evergreenContentColumn,
+        showIdentifiersColumn
       ]}
       dataFilter={dataFilter}
     />

assets/src/components/v2/evergreen_content.tsx

@@ -7,36 +7,41 @@ const VIDEO_EXTENSIONS = ["mp4", "ogg", "ogv", "webm"];
 
 interface Props {
   asset_url: string;
+  isPlaying?: boolean;
 }
 
-const EvergreenContent: ComponentType<Props> = ({ asset_url: assetUrl }) => {
+const EvergreenContent: ComponentType<Props> = ({
+  asset_url: assetUrl,
+  isPlaying = true,
+}) => {
   const parts = assetUrl.split(".");
   const extension = parts[parts.length - 1].toLowerCase();
 
   if (IMAGE_EXTENSIONS.includes(extension)) {
     return <Image assetUrl={assetUrl} />;
   } else if (VIDEO_EXTENSIONS.includes(extension)) {
-    return <Video assetUrl={assetUrl} />;
+    return <Video assetUrl={assetUrl} isPlaying={isPlaying} />;
   }
   return null;
 };
 
-interface ProperProps {
-  assetUrl: string;
-}
-
-const Image: ComponentType<ProperProps> = ({ assetUrl }) => {
+const Image: ComponentType<{ assetUrl: string }> = ({ assetUrl }) => {
   return (
     <div className="evergreen-content-image__container">
       <img className="evergreen-content-image__image" src={assetUrl} />
     </div>
   );
 };
 
-const Video: ComponentType<ProperProps> = ({ assetUrl }) => {
+interface VideoProps {
+  assetUrl: string;
+  isPlaying: boolean;
+}
+
+const Video: ComponentType<VideoProps> = ({ assetUrl, isPlaying }) => {
   return (
     <div className="evergreen-content-video">
-      <LoopingVideoPlayer src={assetUrl} isPlaying />
+      <LoopingVideoPlayer src={assetUrl} isPlaying={isPlaying} />
     </div>
   );
 };

assets/src/components/v2/outfront_evergreen_content.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentType } from "react";
+
+import EvergreenContent from "./evergreen_content";
+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";
+
+const OutfrontEvergreenContent: ComponentType<{
+  asset_url: string;
+  show_identifiers: boolean;
+}> = ({ asset_url: assetUrl, show_identifiers: showIdentifiers }) => {
+  const dupReadyUrl = imagePath(assetUrl);
+  const isPlaying = useIsOnScreen();
+  const playerName = usePlayerName();
+  let identifiers = `${TRIPTYCH_VERSION} ${playerName ? playerName : ""}`;
+  return (
+    <>
+      <EvergreenContent asset_url={dupReadyUrl} isPlaying={isPlaying} />
+      {showIdentifiers && (
+        <div className="evergreen-content__identifiers">{identifiers}</div>
+      )}
+    </>
+  );
+};
+
+export default OutfrontEvergreenContent;