@applicaster/zapp-react-native-ui-components 16.0.0-rc.117 → 16.0.0-rc.119

package/Components/MasterCell/__tests__/masterCell.test.js

@@ -76,6 +76,66 @@ describe("masterCellBuilder", () => {
     });
   });
 
+  describe("cellOptions.interactive", () => {
+    // renders a single View tagged with the state the cell was built with
+    const dataAdapter =
+      () =>
+      ({ state }) => [
+        { type: "View", style: {}, props: { testID: `state-${state}` } },
+      ];
+
+    // Only the root View gets this testID: cell elements pass their own testID, which overrides it
+    const ROOT_TEST_ID = "master-cell-root";
+
+    // forwardRef: MasterCell attaches a ref to its root View
+    const TestView = React.forwardRef((props, ref) => (
+      <View testID={ROOT_TEST_ID} {...props} ref={ref} />
+    ));
+
+    const renderCell = (cellOptions, state) => {
+      const MasterCell = masterCellBuilder({
+        cellConfiguration: singleView,
+        dataAdapter,
+        components: { View: TestView },
+        cellOptions,
+      });
+
+      return renderWithProviders(<MasterCell item={entry} state={state} />);
+    };
+
+    const getRoot = (wrapper) => wrapper.getByTestId(ROOT_TEST_ID);
+
+    it("keeps focused state and default root props when omitted", () => {
+      const wrapper = renderCell(undefined, "focused");
+      const root = getRoot(wrapper);
+
+      expect(wrapper.getByTestId("state-focused")).toBeDefined();
+      expect(root.props.onStartShouldSetResponder).toBeUndefined();
+      expect(root.props.collapsable).toBeUndefined();
+    });
+
+    it("claims body touches on a non-collapsable root when false", () => {
+      const wrapper = renderCell({ interactive: false }, "default");
+      const root = getRoot(wrapper);
+
+      expect(root.props.onStartShouldSetResponder()).toBe(true);
+      expect(root.props.collapsable).toBe(false);
+    });
+
+    it("renders focused as default when false", () => {
+      const wrapper = renderCell({ interactive: false }, "focused");
+
+      expect(wrapper.getByTestId("state-default")).toBeDefined();
+      expect(wrapper.queryByTestId("state-focused")).toBeNull();
+    });
+
+    it("renders focused_selected as selected when false", () => {
+      const wrapper = renderCell({ interactive: false }, "focused_selected");
+
+      expect(wrapper.getByTestId("state-selected")).toBeDefined();
+    });
+  });
+
   describe.skip("when using custom default components", () => {
     // the collapsable prop is added here to easily check from the snapshot that the mock
     // component is being used instead of the default one

package/Components/MasterCell/index.tsx

@@ -10,7 +10,11 @@ import { useScreenState } from "@applicaster/zapp-react-native-utils/screenState
 import { defaultComponents } from "./DefaultComponents";
 import { defaultDataAdapter } from "./dataAdapter";
 import { elementMapper, mapElementWithKey } from "./elementMapper";
-import { getEntryState, hasFocusableInsideBuilder } from "./utils";
+import {
+  getEntryState,
+  hasFocusableInsideBuilder,
+  withoutFocusedState,
+} from "./utils";
 
 type Props = {
   item: ZappEntry;
@@ -19,6 +23,16 @@ type Props = {
 
 const defaultContainerStyle = { flex: 1 };
 
+/**
+ * Root props of a non-interactive cell: the root view claims touches on the cell body,
+ * so the host list's touchable never fires (buttons, being deeper, still receive theirs).
+ * `collapsable: false` keeps Android / Fabric from flattening the view away.
+ */
+const nonInteractiveRootProps = {
+  onStartShouldSetResponder: () => true,
+  collapsable: false,
+};
+
 /**
  * Constructs a MasterCell with the provided options
  * @param {Object} options
@@ -27,6 +41,8 @@ const defaultContainerStyle = { flex: 1 };
  * @param {Function} options.dataAdapter optional dataAdapter to use instead of the default one.
  * See dataAdapter.js for more info
  * @param {containerStyles} options.containerStyle style to apply at the top level of the master cell
+ * @param {Object} options.cellOptions optional cell options. `interactive: false` makes the cell body
+ * ignore taps and render without focused / pressed states (inner buttons keep working). Defaults to `true`.
  * @returns {Function} Functional React Component to render the masterCell with the provided options
  */
 
@@ -39,6 +55,7 @@ type MasterCellBuilderOptions = {
     isRTL?: boolean;
     skipButtons?: boolean;
     component?: ZappComponent;
+    interactive?: boolean;
   };
 };
 
@@ -49,7 +66,7 @@ export function masterCellBuilder({
   containerStyle = defaultContainerStyle,
   cellOptions = {},
 }: MasterCellBuilderOptions) {
-  const { skipButtons = false, component } = cellOptions;
+  const { skipButtons = false, component, interactive = true } = cellOptions;
 
   const componentsMap = R.merge(defaultComponents, components);
   const { View } = componentsMap;
@@ -88,7 +105,10 @@ export function masterCellBuilder({
       () =>
         elementsBuilder({
           entry: item,
-          state: getEntryState(state, entryIsSelected),
+          state: getEntryState(
+            interactive ? state : withoutFocusedState(state),
+            entryIsSelected
+          ),
           allowDynamicColorsOutsideExtensions:
             theme?.allow_dynamic_colors_outside_extensions,
         }),
@@ -134,7 +154,11 @@ export function masterCellBuilder({
     );
 
     return (
-      <View style={containerStyle} ref={wrapperRef}>
+      <View
+        style={containerStyle}
+        ref={wrapperRef}
+        {...(interactive ? undefined : nonInteractiveRootProps)}
+      >
         {elements.map(remapElements)}
       </View>
     );

package/Components/MasterCell/utils/__tests__/withoutFocusedState.test.js

@@ -0,0 +1,20 @@
+import { withoutFocusedState } from "..";
+
+describe("withoutFocusedState", () => {
+  it("maps focused to default", () => {
+    expect(withoutFocusedState("focused")).toBe("default");
+  });
+
+  it("maps focused_selected to selected", () => {
+    expect(withoutFocusedState("focused_selected")).toBe("selected");
+  });
+
+  it("keeps default and selected states", () => {
+    expect(withoutFocusedState("default")).toBe("default");
+    expect(withoutFocusedState("selected")).toBe("selected");
+  });
+
+  it("keeps a missing state", () => {
+    expect(withoutFocusedState(undefined)).toBeUndefined();
+  });
+});

package/Components/MasterCell/utils/index.ts

@@ -386,3 +386,21 @@ export function getEntryState(state, selected) {
 
   return selected ? "selected" : "default";
 }
+
+/**
+ * Drops focused (pressed) variants of a cell state, so a non-interactive cell
+ * always renders its idle look. `selected` is kept – it is not touch feedback.
+ */
+export function withoutFocusedState(
+  state?: CellState | null
+): CellState | null | undefined {
+  if (state === "focused_selected") {
+    return "selected";
+  }
+
+  if (state === "focused") {
+    return "default";
+  }
+
+  return state;
+}

package/Components/VideoModal/PlayerWrapper.tsx

@@ -14,6 +14,7 @@ type Props = {
   inline?: boolean;
   docked?: boolean;
   pip?: boolean;
+  vertical?: boolean;
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
@@ -32,6 +33,7 @@ const PlayerWrapperComponent = (props: Props) => {
     isTabletPortrait,
     configuration,
     pip,
+    vertical,
     playerContent,
   } = props;
 
@@ -42,6 +44,7 @@ const PlayerWrapperComponent = (props: Props) => {
     isTabletPortrait,
     configuration,
     pip,
+    vertical,
   });
 
   const isTablet = useIsTablet();
@@ -52,7 +55,7 @@ const PlayerWrapperComponent = (props: Props) => {
 
   return (
     <WrapperView
-      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+      edges={getEdges(isTablet, isInlineModal, vertical) as readonly Edge[]}
       style={playerDimensionsHack}
     >
       <View

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -37,6 +37,7 @@ jest.mock(
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
   useIsTablet: mockUseIsDeviceTablet,
+  useOrientation: () => "portrait",
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({

package/Components/VideoModal/__tests__/playerWrapperStyle.test.ts

@@ -0,0 +1,58 @@
+import { renderHook } from "@testing-library/react-native";
+
+import { useStyle } from "../playerWrapperStyle";
+import { getScreenAspectRatio } from "../playerWrapperUtils";
+
+let mockOrientation = "portrait";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useIsTablet: () => false,
+  useOrientation: () => mockOrientation,
+}));
+
+const getAspectRatio = (props: {
+  vertical: boolean;
+  inline?: boolean;
+  isModal?: boolean;
+}) => {
+  const { result } = renderHook(() =>
+    useStyle({
+      style: {},
+      inline: false,
+      isModal: true,
+      isTabletPortrait: false,
+      configuration: {},
+      pip: false,
+      ...props,
+    })
+  );
+
+  return result.current.containerDimensions.aspectRatio;
+};
+
+describe("useStyle aspectRatio", () => {
+  const screenRatio = getScreenAspectRatio();
+
+  it("uses the screen ratio when not vertical", () => {
+    mockOrientation = "portrait";
+    expect(getAspectRatio({ vertical: false })).toBeCloseTo(screenRatio);
+  });
+
+  it("inverts the screen ratio for vertical fullscreen in portrait", () => {
+    mockOrientation = "portrait";
+    expect(getAspectRatio({ vertical: true })).toBeCloseTo(1 / screenRatio);
+  });
+
+  it("keeps the screen ratio for vertical fullscreen in landscape", () => {
+    mockOrientation = "landscape";
+    expect(getAspectRatio({ vertical: true })).toBeCloseTo(screenRatio);
+  });
+
+  it("inverts 16:9 for the vertical inline modal in landscape", () => {
+    mockOrientation = "landscape";
+
+    expect(getAspectRatio({ vertical: true, inline: true })).toBeCloseTo(
+      9 / 16
+    );
+  });
+});

package/Components/VideoModal/__tests__/playerWrapperUtils.test.ts

@@ -0,0 +1,16 @@
+import { getEdges } from "../playerWrapperUtils";
+
+describe("getEdges", () => {
+  it("keeps the top edge in fullscreen when not vertical", () => {
+    expect(getEdges(false, false)).toEqual(["top"]);
+  });
+
+  it("has no edges in vertical fullscreen", () => {
+    expect(getEdges(false, false, true)).toEqual([]);
+    expect(getEdges(true, false, true)).toEqual([]);
+  });
+
+  it("keeps the top edge for the vertical inline modal", () => {
+    expect(getEdges(false, true, true)).toEqual(["top"]);
+  });
+});

package/Components/VideoModal/playerWrapperStyle.ts

@@ -1,7 +1,10 @@
 import * as React from "react";
 import { StyleSheet, ViewStyle } from "react-native";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useIsTablet,
+  useOrientation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 import { playerDimensionsHack } from "./utils";
 import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
 import {
@@ -22,8 +25,10 @@ export const useStyle = ({
   isTabletPortrait,
   configuration,
   pip,
+  vertical,
 }) => {
   const isTablet = useIsTablet();
+  const isLandscape = useOrientation() === "landscape";
 
   const isInlineModal = inline && isModal;
 
@@ -40,10 +45,23 @@ export const useStyle = ({
   );
 
   const aspectRatio = React.useMemo(
-    () => calculateAspectRatio(isInlineModal, pip),
+    () => {
+      const value = calculateAspectRatio(isInlineModal, pip);
+
+      if (!vertical) {
+        return value;
+      }
+
+      // vertical fullscreen in landscape: the width is the long side, keep the screen ratio so the container matches the screen
+      if (isLandscape && !isInlineModal && !pip) {
+        return value;
+      }
+
+      return 1 / value;
+    },
     // ignoring insets - only initial needed
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isInlineModal, pip]
+    [isInlineModal, pip, vertical, isLandscape]
   );
 
   return React.useMemo(() => {

package/Components/VideoModal/playerWrapperUtils.ts

@@ -44,8 +44,14 @@ export const getScreenAspectRatio = () => {
 
 export const getEdges = (
   isTablet: boolean,
-  isInlineModal: boolean
+  isInlineModal: boolean,
+  vertical: boolean = false
 ): readonly Edge[] => {
+  // vertical fullscreen: the player takes the full screen height, a top inset would push it below the screen
+  if (vertical && !isInlineModal) {
+    return [];
+  }
+
   if (isTablet) {
     return ["top"];
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.117",
+  "version": "16.0.0-rc.119",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.117",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.117",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.117",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.117",
+    "@applicaster/applicaster-types": "16.0.0-rc.119",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.119",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.119",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.119",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",