@applicaster/zapp-react-native-ui-components 14.0.0-alpha.3011001369 → 14.0.0-alpha.3065652724

package/Components/MasterCell/DefaultComponents/SecondaryImage/Image.tsx

@@ -28,17 +28,10 @@ interface Props {
   onAsyncRender: () => void;
 }
 
-const SecondaryImageComponent = (props: Props) => {
-  const {
-    uri,
-    style,
-    displayMode,
-    imageSizing,
-    fitPosition,
-    fixedHeight,
-    fixedWidth,
-    onAsyncRender,
-  } = props;
+/** Secondary Image Dynamic does not render until the image is loaded */
+const SecondaryImageDynamic = (props: Props) => {
+  const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
+    props;
 
   const imageDimension = useGetImageDimensions(
     uri,
@@ -46,13 +39,9 @@ const SecondaryImageComponent = (props: Props) => {
     isImageSizingFit(imageSizing) ? undefined : (style.height as number)
   );
 
-  const containerHeight = isDisplayModeFixed(displayMode)
-    ? fixedHeight
-    : imageDimension?.height;
+  const containerHeight = imageDimension?.height;
 
-  const containerWidth = isDisplayModeFixed(displayMode)
-    ? fixedWidth
-    : style?.width;
+  const containerWidth = style?.width;
 
   if (isNil(imageDimension?.aspectRatio)) {
     return null;
@@ -80,4 +69,63 @@ const SecondaryImageComponent = (props: Props) => {
   );
 };
 
+/** Secondary Image Fixed does not render  the image until the image is loaded, but keep container rendered */
+const SecondaryImageFixed = (props: Props) => {
+  const {
+    uri,
+    style,
+    displayMode,
+    imageSizing,
+    fitPosition,
+    fixedHeight,
+    fixedWidth,
+    onAsyncRender,
+  } = props;
+
+  const imageDimension = useGetImageDimensions(
+    uri,
+    style.width as number,
+    isImageSizingFit(imageSizing) ? undefined : (style.height as number)
+  );
+
+  return (
+    <View style={style} onLayout={onAsyncRender}>
+      {isNil(imageDimension?.aspectRatio) ? null : (
+        <Image
+          {...props}
+          source={{ uri }}
+          style={{
+            ...getStyle({
+              imageSizing,
+              fitPosition,
+              displayMode,
+              imageDimension,
+              containerHeight: fixedHeight,
+              containerWidth: fixedWidth,
+            }),
+            borderRadius: style.borderRadius,
+            aspectRatio: imageDimension.aspectRatio,
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+const SecondaryImageComponent = (props: Props) => {
+  const { uri, displayMode } = props;
+
+  if (!uri) {
+    return null;
+  }
+
+  const isFixed = isDisplayModeFixed(displayMode);
+
+  return isFixed ? (
+    <SecondaryImageFixed {...props} />
+  ) : (
+    <SecondaryImageDynamic {...props} />
+  );
+};
+
 export const SecondaryImage = withAsyncRenderHOC(SecondaryImageComponent);

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/Image.test.tsx

@@ -4,9 +4,26 @@ import { render } from "@testing-library/react-native";
 import { SecondaryImage } from "../Image";
 
 describe("SecondaryImage - Image", () => {
-  it("SecondaryImage should not render if no aspect ratio", async () => {
+  it("SecondaryImage should not render if no uri", async () => {
     const wrapper = await render(
-      <SecondaryImage uri="" style={{ width: 100 }} />
+      <SecondaryImage
+        displayMode="dynamic"
+        uri={undefined}
+        style={{ width: 100 }}
+      />
+    );
+
+    expect(wrapper.toJSON()).toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should not render if no aspect ratio (dynamic)", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="dynamic"
+        uri="someurl"
+        style={{ width: 100 }}
+      />
     );
 
     expect(wrapper.toJSON()).toEqual(null);
@@ -16,7 +33,8 @@ describe("SecondaryImage - Image", () => {
   it("SecondaryImage should render if known dimensions", async () => {
     const wrapper = await render(
       <SecondaryImage
-        uri=""
+        uri="someUrl"
+        displayMode="dynamic"
         style={{ width: 100, height: 100, borderRadius: 10 }}
       />
     );

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/__snapshots__/Image.test.tsx.snap

@@ -1,6 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio 1`] = `null`;
+exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio (dynamic) 1`] = `null`;
+
+exports[`SecondaryImage - Image SecondaryImage should not render if no uri 1`] = `null`;
 
 exports[`SecondaryImage - Image SecondaryImage should render if known dimensions 1`] = `
 <View
@@ -14,10 +16,11 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
   }
 >
   <Image
+    displayMode="dynamic"
     onAsyncRender={[Function]}
     source={
       {
-        "uri": "",
+        "uri": "someUrl",
       }
     }
     style={
@@ -28,7 +31,7 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
         "width": 100,
       }
     }
-    uri=""
+    uri="someUrl"
   />
 </View>
 `;

package/Components/MasterCell/DefaultComponents/Text/index.tsx

@@ -11,6 +11,8 @@ import { withScaledLineHeight } from "./utils";
 import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { CellFocusedStateContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellFocusedStateContext";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = {
   style: any;
@@ -35,10 +37,9 @@ const _Text = ({
 }: Props) => {
   const _label = useTextLabel({ label, entry });
   const isMeasurement = React.useContext(MeasurementPortalContext);
+  const cellFocused = React.useContext(CellFocusedStateContext);
 
-  if (isNilOrEmpty(_label)) {
-    return null;
-  }
+  const accessibilityManager = useAccessibilityManager({});
 
   // set maximum possible height for the text in case of measurement
   const height =
@@ -46,6 +47,27 @@ const _Text = ({
       ? toNumber(otherProps.numberOfLines) * toNumber(style.lineHeight)
       : undefined;
 
+  const textLabel = dateTransformEnabled
+    ? dateFormat(dateTransform, label)
+    : textTransform(transformText, _label);
+
+  React.useLayoutEffect(() => {
+    // For FocusableCells with action buttons
+    if (otherProps.state) {
+      if (otherProps.state === "focused" && cellFocused === true) {
+        accessibilityManager.addHeading(textLabel);
+      }
+    } else {
+      if (cellFocused === true) {
+        accessibilityManager.addHeading(textLabel);
+      }
+    }
+  }, [cellFocused, otherProps.state, textLabel]);
+
+  if (isNilOrEmpty(_label)) {
+    return null;
+  }
+
   return (
     <Text
       style={[
@@ -55,9 +77,7 @@ const _Text = ({
       allowFontScaling={false}
       {...withoutLabel(otherProps)}
     >
-      {dateTransformEnabled
-        ? dateFormat(dateTransform, label)
-        : textTransform(transformText, _label)}
+      {textLabel}
     </Text>
   );
 };

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -423,7 +423,10 @@ const PlayerContainerComponent = (props: Props) => {
       id: playerContainerId,
       listener: {
         onVideoEnd,
-        onError,
+        onError: (err: Error) => {
+          // Adapt Error to the expected shape for onError
+          onError({ error: err });
+        },
         onLoad,
         onPlayerClose: close,
         onPlayerDetached: close,

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet, FlatList } from "react-native";
+import { FlatList, StyleSheet, View } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -9,8 +9,8 @@ import { useScreenConfiguration } from "../useScreenConfiguration";
 import { RefreshControl } from "../RefreshControl";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 import {
-  useProfilerLogging,
   usePipesCacheReset,
+  useProfilerLogging,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useLoadingState } from "./hooks/useLoadingState";
 import { ViewportTracker } from "../../Viewport";
@@ -25,6 +25,8 @@ import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHo
 import { useShallow } from "zustand/react/shallow";
 
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { ComponentsMapHeightContext } from "./ContextProviders/ComponentsMapHeightContext";
+import { ComponentsMapRefContext } from "./ContextProviders/ComponentsMapRefContext";
 
 const isAndroid = isAndroidPlatform();
 
@@ -70,6 +72,7 @@ function ComponentsMapComponent(props: Props) {
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
+  const flatListWrapperRef = React.useRef<View | null>(null);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -265,47 +268,51 @@ function ComponentsMapComponent(props: Props) {
   // The Screen Picker in Mobile is completly different than the TV
   // so the various offsets / margins in TV do not apply here.
   return (
-    <View style={styles.container}>
-      <ScreenLoadingMeasurements
-        riverId={riverId}
-        numberOfComponents={riverComponents.length}
-      >
-        <ViewportTracker>
-          <FlatList
-            ref={(ref) => {
-              flatListRef.current = ref;
-            }}
-            // Fix for WebView rerender crashes on Android API 28+
-            // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-            overScrollMode={isAndroid ? "never" : "auto"}
-            scrollIndicatorInsets={scrollIndicatorInsets}
-            extraData={feed}
-            stickyHeaderIndices={stickyHeaderIndices}
-            removeClippedSubviews={isAndroid}
-            onLayout={handleOnLayout}
-            initialNumToRender={3}
-            maxToRenderPerBatch={10}
-            windowSize={12}
-            keyExtractor={keyExtractor}
-            renderItem={renderRiverItem}
-            data={riverComponents}
-            contentContainerStyle={contentContainerStyle}
-            ListFooterComponent={
-              <RiverFooter
-                flatListHeight={flatListHeight}
-                loadingState={loadingState}
+    <View style={styles.container} ref={flatListWrapperRef}>
+      <ComponentsMapHeightContext.Provider value={flatListHeight}>
+        <ComponentsMapRefContext.Provider value={flatListWrapperRef}>
+          <ScreenLoadingMeasurements
+            riverId={riverId}
+            numberOfComponents={riverComponents.length}
+          >
+            <ViewportTracker>
+              <FlatList
+                ref={(ref) => {
+                  flatListRef.current = ref;
+                }}
+                // Fix for WebView rerender crashes on Android API 28+
+                // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+                overScrollMode={isAndroid ? "never" : "auto"}
+                scrollIndicatorInsets={scrollIndicatorInsets}
+                extraData={feed}
+                stickyHeaderIndices={stickyHeaderIndices}
+                removeClippedSubviews={isAndroid}
+                onLayout={handleOnLayout}
+                initialNumToRender={3}
+                maxToRenderPerBatch={10}
+                windowSize={12}
+                keyExtractor={keyExtractor}
+                renderItem={renderRiverItem}
+                data={riverComponents}
+                contentContainerStyle={contentContainerStyle}
+                ListFooterComponent={
+                  <RiverFooter
+                    flatListHeight={flatListHeight}
+                    loadingState={loadingState}
+                  />
+                }
+                refreshControl={refreshControl}
+                onScrollBeginDrag={onScrollBeginDrag}
+                onScroll={onScroll}
+                onMomentumScrollEnd={_onMomentumScrollEnd}
+                onScrollEndDrag={_onScrollEndDrag}
+                scrollEventThrottle={16}
+                {...scrollViewExtraProps}
               />
-            }
-            refreshControl={refreshControl}
-            onScrollBeginDrag={onScrollBeginDrag}
-            onScroll={onScroll}
-            onMomentumScrollEnd={_onMomentumScrollEnd}
-            onScrollEndDrag={_onScrollEndDrag}
-            scrollEventThrottle={16}
-            {...scrollViewExtraProps}
-          />
-        </ViewportTracker>
-      </ScreenLoadingMeasurements>
+            </ViewportTracker>
+          </ScreenLoadingMeasurements>
+        </ComponentsMapRefContext.Provider>
+      </ComponentsMapHeightContext.Provider>
     </View>
   );
 }

package/Components/River/ComponentsMap/ContextProviders/ComponentsMapHeightContext.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+
+export const ComponentsMapHeightContext = React.createContext<number | null>(
+  null
+);
+
+export const useComponentsMapHeight = () =>
+  React.useContext(ComponentsMapHeightContext);

package/Components/River/ComponentsMap/ContextProviders/ComponentsMapRefContext.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { View } from "react-native";
+
+export const ComponentsMapRefContext =
+  React.createContext<React.RefObject<View | null> | null>(null);
+
+export const useComponentsMapRef = () =>
+  React.useContext(ComponentsMapRefContext);

package/Components/Screen/TV/hooks/useInitialFocus.ts

@@ -10,6 +10,8 @@ import {
   setFocusOnMenu,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux";
 
+import { waitUntilScreenRevealManagerIsReady } from "@applicaster/zapp-react-native-ui-components/Components/ScreenRevealManager/utils";
+
 type Return =
   | {
       onContent: true;
@@ -57,14 +59,22 @@ export const useInitialFocus = (): void => {
   React.useEffect(() => {
     const initialFocus = getInitialFocus(focusOnContent, isNavBarVisible);
 
-    if (initialFocus.onContent) {
-      setFocusOnContent(currentRoute);
+    if (initialFocus.onMenu) {
+      setFocusOnMenu(currentRoute);
 
       return;
     }
 
-    if (initialFocus.onMenu) {
-      setFocusOnMenu(currentRoute);
+    if (initialFocus.onContent) {
+      const subscription = waitUntilScreenRevealManagerIsReady().subscribe(
+        () => {
+          setFocusOnContent(currentRoute);
+        }
+      );
+
+      return () => {
+        subscription.unsubscribe();
+      };
     }
   }, []);
 };

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`<Screen Component /> when the navbar should be hidden renders correctly 1`] = `
 <View
+  importantForAccessibility="yes"
   style={
     {
       "backgroundColor": "blue",
@@ -34,6 +35,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
 
 exports[`<Screen Component /> when the navbar should show renders correctly 1`] = `
 <View
+  importantForAccessibility="yes"
   style={
     {
       "backgroundColor": "blue",

package/Components/Screen/__tests__/navigationHandler.test.ts

@@ -3,61 +3,172 @@ import { isMenuVisible } from "../navigationHandler";
 describe("NavigationHandler", () => {
   describe("isMenuVisible", () => {
     it("returns false when the route is a player route", () => {
-      const menuVisible = isMenuVisible("/playable/some_vod_item", {});
+      const menuVisible = isMenuVisible("/playable/some_vod_item", {}, [
+        {
+          identifier: "quick-brick-bottom-tabs",
+          category: "menu",
+          name: "Bottom Tabs",
+        },
+      ]);
+
       expect(menuVisible).toBe(false);
     });
 
     describe("when screen is a hook", () => {
       it("returns true if the `showNavBar` flag is set to true", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              showNavBar: true,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                showNavBar: true,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(true);
       });
 
       it("returns true if presentFullScreen flag is set to false", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              presentFullScreen: false,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: false,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(true);
       });
 
       it("returns false if presentFullScreen flag is set to true", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              presentFullScreen: true,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: true,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(false);
       });
     });
 
     it("returns false if the screen's general settings allow screen presentation", () => {
-      const menuVisible = isMenuVisible("", {
-        general: {
-          allow_screen_plugin_presentation: true,
+      const menuVisible = isMenuVisible(
+        "",
+        {
+          general: {
+            allow_screen_plugin_presentation: true,
+          },
+          navigations: [
+            {
+              navigation_type: "quick-brick-bottom-tabs",
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ],
         },
-      });
+        [
+          {
+            identifier: "quick-brick-bottom-tabs",
+            category: "menu",
+            name: "Bottom Tabs",
+          },
+        ]
+      );
 
       expect(menuVisible).toBe(false);
     });
 
-    it("returns true otherwise", () => {
-      const menuVisible = isMenuVisible("", {});
+    it("returns false otherwise", () => {
+      const menuVisible = isMenuVisible(
+        "any",
+        {
+          navigations: [
+            {
+              navigation_type: "quick-brick-bottom-tabs",
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ],
+        },
+        [
+          {
+            identifier: "quick-brick-bottom-tabs",
+            category: "menu",
+            name: "Bottom Tabs",
+          },
+        ]
+      );
+
       expect(menuVisible).toBe(true);
     });
+
+    it("returns false otherwise", () => {
+      const menuVisible = isMenuVisible("", {}, [
+        {
+          identifier: "quick-brick-bottom-tabs",
+          category: "menu",
+          name: "Bottom Tabs",
+        },
+      ]);
+
+      expect(menuVisible).toBe(false);
+    });
   });
 });