@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4201443043 → 12.0.0-alpha.4220424021

package/Components/MasterCell/DefaultComponents/ImageBorderContainer/index.ts

@@ -0,0 +1,71 @@
+import { ImageStyle } from "react-native";
+
+import {
+  getImageContainerMarginStyles,
+  ifElseFocusedSelected,
+} from "@applicaster/zapp-react-native-utils/cellUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+export const ImageBorderContainer = ({
+  value,
+  state,
+  imageStyles,
+}: {
+  value: (key: string) => string;
+  state: CellState;
+  imageStyles: ImageStyle;
+}) => {
+  const imageMargins = getImageContainerMarginStyles({ value });
+
+  return {
+    type: "BorderContainerView",
+    style: {
+      position: "absolute",
+      // Image border now separated from the image, so cell padding affects the border position
+      marginTop:
+        toNumberWithDefaultZero(imageMargins.marginTop) +
+        toNumberWithDefaultZero(value("cell_padding_top")),
+      marginLeft:
+        toNumberWithDefaultZero(imageMargins.marginLeft) +
+        toNumberWithDefaultZero(value("cell_padding_left")),
+      marginRight:
+        toNumberWithDefaultZero(imageMargins.marginRight) +
+        toNumberWithDefaultZero(value("cell_padding_right")),
+      marginBottom:
+        toNumberWithDefaultZero(imageMargins.marginBottom) +
+        toNumberWithDefaultZero(value("cell_padding_bottom")),
+      zIndex: 1,
+      borderWidth: value("image_border_size"),
+      borderColor: ifElseFocusedSelected(
+        state,
+        value("image_focused_border_color"),
+        value("image_selected_border_color"),
+        value("image_focused_selected_border_color"),
+        value("image_border_color")
+      ),
+      borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+    },
+    additionalProps: {
+      pointerEvents: "none",
+      borderPosition: value("image_border_position"),
+      borderPaddingTop: toNumberWithDefaultZero(
+        value("image_border_padding_top")
+      ),
+      borderPaddingRight: toNumberWithDefaultZero(
+        value("image_border_padding_right")
+      ),
+      borderPaddingBottom: toNumberWithDefaultZero(
+        value("image_border_padding_bottom")
+      ),
+      borderPaddingLeft: toNumberWithDefaultZero(
+        value("image_border_padding_left")
+      ),
+    },
+    elements: [
+      {
+        type: "View",
+        style: imageStyles,
+      },
+    ],
+  };
+};

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

@@ -108,6 +108,26 @@ const prepareEntry = (entry) => {
     };
   }
 
+  const previewPlayback =
+    entry.extensions?.["brightcove"]?.["preview_playback"];
+
+  if (previewPlayback) {
+    return {
+      ...entry,
+      extensions: {
+        ...entry.extensions,
+        brightcove: {
+          ...entry?.extensions?.["brightcove"],
+          video_id: previewPlayback,
+        },
+      },
+    };
+  }
+
+  if (entry.extensions?.["brightcove"]?.["video_id"]) {
+    return entry;
+  }
+
   const src = entry.content?.src;
 
   if (!src) {

package/Components/MasterCell/DefaultComponents/index.ts

@@ -15,6 +15,7 @@ import { BorderContainerView } from "./BorderContainerView";
 import { CellBadge } from "./CellBadge";
 import { TvActionButtons } from "./tv/TvActionButtons";
 import { ButtonContainerView } from "./tv/ButtonContainerView";
+import { ImageBorderContainer } from "./ImageBorderContainer";
 
 export const defaultComponents = {
   View,
@@ -28,6 +29,7 @@ export const defaultComponents = {
   ProgressBar,
   Toggle,
   LiveImage,
+  ImageBorderContainer,
   BorderContainerView,
   DynamicBadge,
   SecondaryImage,

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.tsx

@@ -7,6 +7,10 @@ import type {
   ContainerProps,
   ContainerChildren,
 } from "./types";
+import {
+  useIsRTL,
+  applyRTLStylesIfNeeded,
+} from "@applicaster/zapp-react-native-utils/localizationUtils";
 
 const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
   <View style={{ width }} />
@@ -17,6 +21,7 @@ export function ButtonContainerView({
   children,
   ...otherProps
 }: ContainerProps) {
+  const isRTL = useIsRTL();
   const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
 
   const filteredChildren = useFilterChildren<ContainerChildren>(children);
@@ -26,7 +31,7 @@ export function ButtonContainerView({
   }
 
   return (
-    <View style={style}>
+    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
           <HorizontalSeparator

package/Components/MasterCell/SharedUI/ProgressBar/hooks/useFillInPercent.ts

@@ -5,6 +5,7 @@ import * as R from "ramda";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { normalizeProgressValue } from "./utils";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const ACTION_NAME = "continue-watching";
 const DEFAULT_FILL = 0;
@@ -27,6 +28,7 @@ const getProgressValue = (
 
 export const useFillInPercent = (entry: ZappEntry): number => {
   const action = useActions(ACTION_NAME);
+  const isActive = useIsScreenActive();
 
   const [fillInPercent, setFillInPercent] =
     React.useState<number>(DEFAULT_FILL);
@@ -39,6 +41,10 @@ export const useFillInPercent = (entry: ZappEntry): number => {
   }, []);
 
   React.useEffect(() => {
+    if (!isActive) {
+      return;
+    }
+
     // refresh progress in UI when it was changed in CW
     const unsubscribe = action?.addDataSourceListener?.(() => {
       getProgressValue(action, entry, (progress) => {
@@ -49,7 +55,7 @@ export const useFillInPercent = (entry: ZappEntry): number => {
     return () => {
       unsubscribe?.();
     };
-  }, []);
+  }, [isActive]);
 
   return fillInPercent;
 };

package/Components/MasterCell/dataAdapter.ts

@@ -37,14 +37,28 @@ function retrieveData(entry, func, args) {
  */
 
 export function configInflater(
-  entry,
-  { type, style, additionalProps = {}, data = [], elements }
+  entry: any,
+  {
+    type,
+    style,
+    additionalProps = {},
+    data = [],
+    elements,
+  }: {
+    type: any;
+    style: any;
+    additionalProps?: Record<string, any>;
+    data?: Array<{ propName: string; func: Function; args: any[] }>;
+    elements?: any[];
+  }
 ) {
-  const props = R.reduce(
-    (acc, curr) =>
-      R.assoc(curr.propName, retrieveData(entry, curr.func, curr.args), acc),
-    additionalProps,
-    data
+  const props = data.reduce(
+    (acc, curr) => {
+      acc[curr.propName] = retrieveData(entry, curr.func, curr.args);
+
+      return acc;
+    },
+    { ...additionalProps }
   );
 
   let adjustedElements;

package/Components/MasterCell/index.tsx

@@ -52,6 +52,8 @@ export function masterCellBuilder({
   const { View } = componentsMap;
   const elementsBuilder = dataAdapter(cellConfiguration);
 
+  // This is very expensive operation
+  // Keep calls to minimum
   const hasFocusableInside = hasFocusableInsideBuilder(elementsBuilder);
 
   /**
@@ -74,8 +76,8 @@ export function masterCellBuilder({
     const selectedState = screen?.selectedEntry;
 
     const entryIsSelected = React.useMemo(
-      () => selectedState?.id === item?.id,
-      [selectedState?.id]
+      () => !!(selectedState?.id && selectedState?.id === item?.id),
+      [selectedState?.id, item?.id]
     );
 
     const elements = React.useMemo(
@@ -84,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item, entryIsSelected]
+      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

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

@@ -9,4 +9,13 @@ describe("insertBetween", () => {
 
     expect(result).toEqual([1, "|", 2, "|", 3]);
   });
+
+  it("insertBetween", () => {
+    const separator = (index) => `separator:${index}`;
+    const items = [1, 2, 3];
+
+    const result = insertBetween(separator, items);
+
+    expect(result).toEqual([1, "separator:0", 2, "separator:1", 3]);
+  });
 });

package/Components/MasterCell/utils/index.ts

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo } from "react";
 import * as R from "ramda";
+import validateColor from "validate-color";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -9,6 +10,7 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
 import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { getCellState } from "../../Cell/utils";
+import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -47,44 +49,29 @@ export const hasElementsSpecificViewType = (viewType) => (elements) => {
   return R.any(hasElementSpecificViewType(viewType))(elements);
 };
 
-const isColorOrEmpty = (value) =>
-  value === null ||
-  value === undefined ||
-  value === "" ||
-  value.startsWith("#") ||
-  value.startsWith("rgba") ||
-  value === "transparent";
-
 function resolveColorForProp(entry, style, colorProp) {
-  const colorValue = style[colorProp];
-
-  if (isColorOrEmpty(colorValue)) {
-    return style;
+  const colorFromProp = style[colorProp];
+  const nestedEntryValue = R.path(colorFromProp.split("."), entry);
+
+  if (
+    nestedEntryValue === undefined &&
+    !validateColor(colorFromProp.replace(".00", "")) // https://github.com/dreamyguy/validate-color/issues/44
+  ) {
+    logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 
-  const pathParts = colorValue.split(".");
-  let nestedEntryValue = entry;
-
-  for (const part of pathParts) {
-    if (nestedEntryValue === null || typeof nestedEntryValue !== "object") {
-      logWarning(colorValue, style, entry, nestedEntryValue);
-
-      return style;
-    }
-
-    nestedEntryValue = nestedEntryValue[part];
-  }
+  const colorValue = getColorFromData({
+    data: entry,
+    valueFromLayout: colorFromProp,
+  });
 
-  if (nestedEntryValue === undefined) {
-    logWarning(colorValue, style, entry, nestedEntryValue);
+  if (!colorValue) {
+    logWarning(colorProp, style, entry, colorValue);
 
     return style;
   }
 
-  // After successful traversal, set the value.
-  style[colorProp] = nestedEntryValue;
-
-  return style;
+  return { ...style, [colorProp]: colorValue };
 }
 
 export function resolveColor(entry, style) {

package/Components/Navigator/StackNavigator.tsx

@@ -8,6 +8,8 @@ import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 
 import { Screen } from "../Screen/TV/index.web";
+import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -19,25 +21,32 @@ type Props = {
 };
 
 export const StackNavigator = ({ Components }: Props) => {
-  const { mainStack, currentRoute } = useNavigation();
+  const { mainStack } = useNavigation();
 
-  const renderScreen = ({ route, state }) => {
+  const renderScreen = ({ route, state }, index) => {
     const pathAttributes = getPathAttributes({ pathname: route });
 
     if (isEmpty(pathAttributes)) {
       return null;
     }
 
+    // HACK: Adding index to route to avoid conflicts in the navigator.
+    // Startup hooks are all using PUSH navigation action to navigate, but their routes are always like root routes.
+    // This means some hooks can have the same routes, e.g., ["hooks/context-setter", "/hooks/login-plug", "hooks/context-setter"].
+    const routeId = `${route}--${index}`;
+
     return (
       <FocusableGroup
         id={route}
-        preferredFocus={route === currentRoute}
+        preferredFocus={isLast(index, mainStack.length)}
         excludeFromFocusSearching
-        key={route}
+        key={routeId}
       >
         <ScreenDataContext.Provider value={state}>
           <PathnameContext.Provider value={route}>
-            <Screen route={route} Components={Components} />
+            <ScreenContextProvider pathname={route}>
+              <Screen route={route} Components={Components} />
+            </ScreenContextProvider>
           </PathnameContext.Provider>
         </ScreenDataContext.Provider>
       </FocusableGroup>

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -124,6 +124,7 @@ const nativeStyles = {
   playerScreen: {
     flex: 1,
     backgroundColor: "black",
+    overflow: "hidden",
   },
   playerWrapper: {
     flex: 1,
@@ -252,6 +253,7 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     showNavBar(true);
+    navigator.goBack();
   }, [isModal, navigator.goBack, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });

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

@@ -1,3 +1 @@
 export { useInitialFocus } from "./useInitialFocus";
-
-export { useRestoreFocus } from "./useRestoreFocus";

package/Components/Screen/TV/index.web.tsx

@@ -1,20 +1,29 @@
-import * as React from "react";
-import { last, pathOr } from "ramda";
-import { View, StyleSheet } from "react-native";
+import React from "react";
+import { last } from "ramda";
+import { StyleSheet, View } from "react-native";
 import {
+  findMenuPlugin,
   getNavigationProps,
   getPathAttributes,
-  resolveNavigationPlugin,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useIsScreenActive,
+  useNavigation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useScreenBackgroundColor } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import {
+  useNavbarState,
+  useScreenBackgroundColor,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
 import { ScreenResolver } from "../../ScreenResolver";
-import { useInitialFocus, useRestoreFocus } from "./hooks";
+import { useInitialFocus } from "./hooks";
+import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { FreezeWithCallback } from "../../FreezeWithCallback";
 
 const styles = StyleSheet.create({
   container: {
@@ -36,18 +45,6 @@ type Props = {
   Components: Components;
 };
 
-const getPluginType = pathOr("unknown_plugin_type", [
-  "state",
-  "screen",
-  "plugin_type",
-]);
-
-const isPlayerPlugin = (routeState): boolean =>
-  getPluginType(routeState) === "player";
-
-const isLoginPlugin = (routeState): boolean =>
-  getPluginType(routeState) === "login";
-
 const getActiveRiver = ({
   screenId,
   screenType,
@@ -111,7 +108,6 @@ export const Screen = ({ route, Components }: Props) => {
   const backgroundColor = useScreenBackgroundColor(screenId);
 
   useInitialFocus();
-  useRestoreFocus();
 
   const activeRiver = getActiveRiver({
     screenId,
@@ -139,41 +135,44 @@ export const Screen = ({ route, Components }: Props) => {
     fallbackNavigations: navigator.activeRiver.navigations,
   });
 
-  const menuPlugin = resolveNavigationPlugin({
-    category: "menu",
-    navigations,
-    plugins,
-  }) as QuickBrickPlugin;
+  const menuPlugin = findMenuPlugin(navigations, plugins);
 
   const NavBar = (Components.NavBar ||
     menuPlugin.module) as React.ComponentType<any>;
 
   const isPlayer = isPlayerPlugin(routeState);
-  const isLogin = isLoginPlugin(routeState);
 
-  const isNavBarVisible = !isPlayer && !isLogin;
+  const { visible: isNavBarVisible } = useNavbarState();
 
   const screenData =
     screenType === "hooks" || isPlayer
       ? routeState?.state?.entry
       : routeState?.state?.screen;
 
+  const isScreenActive = useIsScreenActive();
+
   return (
-    <View style={[styles.container, { backgroundColor }]}>
-      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
-        <NavBar
+    <FreezeWithCallback
+      freeze={!isScreenActive}
+      onRelease={() => {
+        focusManager.setInitialFocus();
+      }}
+    >
+      <View style={[styles.container, { backgroundColor }]}>
+        <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
+          <NavBar
+            isVisible={isNavBarVisible}
+            menuPlugin={menuPlugin}
+            navigationProps={navigationProps}
+          />
+        </NavBarContainer>
+        <ScreenResolver
+          screenType={screenType}
+          screenId={screenId}
+          screenData={screenData}
           groupId={route}
-          isVisible={isNavBarVisible}
-          menuPlugin={menuPlugin}
-          navigationProps={navigationProps}
         />
-      </NavBarContainer>
-      <ScreenResolver
-        screenType={screenType}
-        screenId={screenId}
-        screenData={screenData}
-        groupId={route}
-      />
-    </View>
+      </View>
+    </FreezeWithCallback>
   );
 };

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

@@ -10,6 +10,8 @@ const mock_navBarVisibleFlag = true;
 
 const mockIsNavBarVisible = jest.fn(() => mock_navBarVisibleFlag);
 
+const mockIsOrientationCompatible = jest.fn(() => true);
+
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),
 }));
@@ -21,6 +23,7 @@ jest.mock("../../RouteManager", () => ({
 jest.mock(
   "@applicaster/zapp-react-native-utils/appUtils/orientationHelper",
   () => ({
+    isOrientationCompatible: mockIsOrientationCompatible,
     allowedOrientationsForScreen: jest.fn(),
     getOrientation: jest.fn(),
     getScreenOrientation: jest.fn(),
@@ -96,14 +99,6 @@ jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
   }),
 }));
 
-const {
-  ORIENTATIONS,
-} = require("@applicaster/zapp-react-native-utils/appUtils/orientationHelper");
-
-const {
-  useCurrentScreenData,
-} = require("@applicaster/zapp-react-native-utils/reactHooks/screen");
-
 const {
   allowedOrientationsForScreen,
   getOrientation,
@@ -155,45 +150,4 @@ describe("<Screen Component />", () => {
       expect(wrapper.toJSON()).toMatchSnapshot();
     });
   });
-
-  it("invokes the orientation hook when the route changes", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
-    // @ts-ignore
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-      plugin_type: "player",
-    });
-
-    act(() => {
-      wrapper.update(
-        <Screen
-          {...screenProps}
-          pathname="/playable"
-          screenData={{
-            id: "player-testId",
-            general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-            plugin_type: "player",
-          }}
-        />
-      );
-    });
-
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-    });
-
-    act(() => {
-      wrapper.update(<Screen {...screenProps} />);
-    });
-
-    expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
-      1,
-      ORIENTATIONS.landscapeSensor
-    );
-  });
 });