tweak(triptych): Do not render slots outside the viewport when using …

…the 3-slot split layout

assets/src/apps/v2/triptych.tsx

@@ -28,7 +28,7 @@ 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";
+import TriptychEvergreenContent from "Components/v2/triptych/evergreen_content";
 
 const TYPE_TO_COMPONENT = {
   // Layouts
@@ -38,7 +38,7 @@ const TYPE_TO_COMPONENT = {
   page_load_no_data: PageLoadNoData,
   no_data: NoData,
   train_crowding: TrainCrowding,
-  evergreen_content: OutfrontEvergreenContent,
+  evergreen_content: TriptychEvergreenContent,
   placeholder: Placeholder,
 };
 

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

@@ -0,0 +1,51 @@
+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 "./version";
+import { usePlayerName } from "Hooks/outfront";
+import { TriptychPane, getTriptychPane } from "Util/outfront";
+
+const isInViewport = (thisComponentsPane: TriptychPane) => {
+  const triptychPane = getTriptychPane();
+  if (triptychPane == null) {
+    // Viewport is not limited/shifted, we're showing all 3 in a browser tab.
+    return true;
+  } else {
+    return thisComponentsPane == triptychPane;
+  }
+};
+
+/**
+ * Differences from standard evergreen content component:
+ * - allows showing identifiers (version, player name) over content
+ * - does not render content outside the viewport at all, besides identifiers, to save on work
+ */
+const TriptychEvergreenContent: ComponentType<{
+  asset_url: string;
+  show_identifiers: boolean;
+  triptychPane: TriptychPane;
+}> = ({
+  asset_url: assetUrl,
+  show_identifiers: showIdentifiers,
+  triptychPane,
+}) => {
+  const dupReadyUrl = imagePath(assetUrl);
+  const isPlaying = useIsOnScreen();
+  const playerName = usePlayerName();
+  let identifiers = `${TRIPTYCH_VERSION} ${playerName ? playerName : ""}`;
+
+  return (
+    <>
+      {isInViewport(triptychPane) && (
+        <EvergreenContent asset_url={dupReadyUrl} isPlaying={isPlaying} />
+      )}
+      {showIdentifiers && (
+        <div className="evergreen-content__identifiers">{identifiers}</div>
+      )}
+    </>
+  );
+};
+
+export default TriptychEvergreenContent;

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

@@ -16,13 +16,13 @@ const TriptychThreePane: React.ComponentType<Props> = ({
   return (
     <>
       <div className="left-pane">
-        <Widget data={leftPane} />
+        <Widget data={{ ...leftPane, triptychPane: "left" }} />
       </div>
       <div className="middle-pane">
-        <Widget data={middlePane} />
+        <Widget data={{ ...middlePane, triptychPane: "middle" }} />
       </div>
       <div className="right-pane">
-        <Widget data={rightPane} />
+        <Widget data={{ ...rightPane, triptychPane: "right" }} />
       </div>
     </>
   );