@applicaster/zapp-react-native-ui-components 12.0.0-rc.99 → 12.0.2-alpha.1558929238

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -9,6 +9,18 @@ import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import {
+  ZappPipesEntryContext,
+  ZappPipesScreenContext,
+  ZappPipesSearchContext,
+} from "@applicaster/zapp-react-native-ui-components/Contexts";
+
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+} from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
+
 import { produce } from "immer";
 // types reference
 
@@ -20,6 +32,7 @@ type LayoutPresets = PresetsMapping["presets_mappings"];
 
 const SMART_COMPONENT_TYPE = "quick-brick-smart-component";
 const SOURCE_PATH = ["data", "source"];
+const MAPPING_PATH = ["data", "mapping"];
 
 const isSmartComponent = (component) =>
   component.component_type === SMART_COMPONENT_TYPE;
@@ -58,13 +71,14 @@ export const enrichComponent = (
   comp: ZappUIComponent,
   index: number,
   feeds: Feeds,
-  layoutPresets: LayoutPresets
+  layoutPresets: LayoutPresets,
+  urlsMap: { [key: string]: string }
 ): ZappUIComponent[] | null => {
   if (!isSmartComponent(comp)) {
     return [comp];
   }
 
-  const presets = prop<string[]>(path(SOURCE_PATH, comp), feeds);
+  const presets = prop<string[]>(urlsMap[comp.id], feeds);
 
   if (presets && presets.data && presets.data.entry) {
     return presets.data.entry
@@ -113,11 +127,35 @@ export const useCurationAPI = (
     [components]
   );
 
-  const urls = useMemo<string[]>(
-    () =>
-      smartComponents?.map?.((component) => path(SOURCE_PATH, component)) ?? [],
-    [smartComponents]
-  );
+  const { pathname } = useRoute();
+  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
+  const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
+  const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
+
+  const urlsMap = useMemo<{ [key: string]: string }>(() => {
+    const map = {};
+
+    smartComponents?.forEach?.((component) => {
+      const url = path(SOURCE_PATH, component);
+      const mapping = path(MAPPING_PATH, component);
+
+      map[component.id] = mapping
+        ? getInflatedDataSourceUrl({
+            source: url,
+            contexts: {
+              entry: entryContext,
+              screen: screenContext,
+              search: getSearchContext(searchContext, mapping),
+            },
+            mapping,
+          })
+        : url;
+    });
+
+    return map;
+  }, [smartComponents, entryContext, screenContext, searchContext]);
+
+  const urls = useMemo<string[]>(() => Object.values(urlsMap), [urlsMap]);
 
   useEffect(() => {
     urls.forEach((url, index) => {
@@ -138,11 +176,17 @@ export const useCurationAPI = (
     if (!components) return [];
 
     return components.reduce((acc, comp, index) => {
-      const enrichedComp = enrichComponent(comp, index, feeds, layoutPresets);
+      const enrichedComp = enrichComponent(
+        comp,
+        index,
+        feeds,
+        layoutPresets,
+        urlsMap
+      );
 
       return enrichedComp ? [...acc, ...enrichedComp] : acc;
     }, [] as Array<ZappUIComponent>);
-  }, [components, feeds, layoutPresets]);
+  }, [components, feeds, layoutPresets, urlsMap]);
 
   return getFinalComponents(
     enrichedComponents,

package/Components/Image/Image.android.tsx

@@ -8,5 +8,5 @@ import { useImageSource } from "./utils";
 export const QBImage = (props: FastImageProps) => {
   const source = useImageSource(props.source);
 
-  return <FastImage {...props} source={source} />;
+  return <FastImage useLastImageAsDefaultSource {...props} source={source} />;
 };

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -66,20 +66,24 @@ export function ActionButton(props: Props) {
   );
 
   useEffect(() => {
-    if (actionDisabled || !actionContext) return;
-
-    setActionState(actionContext.initialEntryState(item));
-  }, [actionDisabled, item?.id, actionContext]);
+    if (!((actionDisabled || !actionContext) && actionState !== null)) {
+      setActionState(actionContext.initialEntryState(item));
+    }
+  }, [actionDisabled, item?.id, actionContext, action]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
-      updateState: setActionState,
+      updateState: (state) => {
+        setActionState(state);
+      },
     });
-  }, [actionState, actionContext?.state, setActionState, item?.id]);
+  }, [actionState, actionContext?.state, item?.id]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {
-      return actionContext?.addListener(item.id as string, setActionState);
+      return actionContext?.addListener(String(item.id), (state) => {
+        setActionState(state);
+      });
     }
   }, [item?.id]);
 

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

@@ -117,9 +117,6 @@ export const BorderContainerView = (props: Props) => {
     children,
   } = props;
 
-  const borderStyleForMissingBorder =
-    style?.borderWidth === 0 || !style?.borderColor ? { borderRadius: 0 } : {};
-
   const padding =
     borderPosition === "outside"
       ? {
@@ -131,10 +128,7 @@ export const BorderContainerView = (props: Props) => {
       : {};
 
   return (
-    <View
-      {...props}
-      style={[style, styles.container, borderStyleForMissingBorder]}
-    >
+    <View pointerEvents="box-none" {...props} style={[style, styles.container]}>
       <Border style={style} padding={padding} borderPosition={borderPosition} />
       {children}
     </View>

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

@@ -3,6 +3,7 @@ import {
   ifElseFocusedSelected,
   ifElseSelected,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { getPositionStyles } from "./utils";
 
@@ -31,7 +32,11 @@ export const CellBadge = ({
   return {
     type: View, // Cell badge view
     style: {
-      flex: 1,
+      flex: platformSelect({
+        tvos: 0,
+        android_tv: 0,
+        default: 1,
+      }),
       position: "absolute",
       ...getPositionStyles(position, {
         width: value("cell_badge_width"),

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

@@ -5,6 +5,7 @@ import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/acti
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 const { Logger } = getXray();
 
@@ -44,6 +45,11 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const actionContext = useActions(pluginIdentifier);
 
+  const accessibilityManager = useAccessibilityManager({});
+
+  const { ttsLabel = "" } =
+    actionContext?.initialEntryState(item)?.getAccessibility?.(item) || {};
+
   const onPress = (event) => {
     event?.preventDefault?.();
 
@@ -88,6 +94,12 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
         mouse: focusable.mouse,
       });
     });
+
+    if (ttsLabel) {
+      accessibilityManager.readText({
+        text: ttsLabel,
+      });
+    }
   };
 
   const handleBlur = (_focusable, _direction) => {

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

@@ -38,21 +38,22 @@ function Image({
 
   const shouldRenderImg = source && !error;
 
+  // Default placeholder image fallback is empty string because it won't rerender
+  // in case of undefined or {uri: undefined} source
+  // https://github.com/facebook/react-native/issues/9195
   const defaultPlaceHolderImage = React.useMemo(
     () => ({ uri: placeholderImage || "" }),
     [source, error]
   );
 
-  const _source = shouldRenderImg
-    ? withDimensions(source)
-    : defaultPlaceHolderImage;
-
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={_source?.uri ? _source : undefined}
+      source={
+        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
+      }
       {...R.omit(["source"], otherProps)}
     />
   );

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

@@ -31,10 +31,10 @@ function Image({
 
   return (
     <RnImage
-      defaultSource={placeholderImage || ""}
+      defaultSource={placeholderImage || null}
       style={style}
       source={updatedSource}
-      {...R.omit(["source"], otherProps)}
+      {...R.omit(["source", "placeholderImage"], otherProps)}
     />
   );
 }

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/__tests__/image.test.js

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toBeUndefined();
+    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
   });
 });

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/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/index.ts

@@ -53,10 +53,9 @@ function resolveColorForProp(entry, style, colorProp) {
   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
-  ) {
+  const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
+
+  if (nestedEntryValue === undefined && !validateColor(color)) {
     logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -362,13 +362,15 @@ const PlayerContainerComponent = (props: Props) => {
   const toggleFullscreen = (event) => {
     const { fullscreen = false } = event || {};
 
-    if (fullscreen) {
-      playerEvent("onFullscreenPlayerWillPresent");
-      navigator.fullscreenVideoModal();
-    } else {
-      playerEvent("onFullscreenPlayerWillDismiss");
-      navigator.maximiseVideoModal();
-    }
+    setTimeout(() => {
+      if (fullscreen) {
+        navigator.fullscreenVideoModal();
+        playerEvent("onFullscreenPlayerWillPresent");
+      } else {
+        navigator.maximiseVideoModal();
+        playerEvent("onFullscreenPlayerWillDismiss");
+      }
+    });
   };
 
   const onCellTap = (entry) => {
@@ -463,6 +465,10 @@ const PlayerContainerComponent = (props: Props) => {
 
     if (mode === VideoModalMode.FULLSCREEN) {
       toggleFullscreen({ fullscreen: false });
+
+      if (!isModal) {
+        playerManager.closeNativePlayer();
+      }
     }
 
     return !!(
@@ -519,7 +525,7 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     return () => {
-      playerEvent("player_did_close");
+      playerEvent("player_did_close", { item });
 
       if (!isModal) {
         showNavBar(true);

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,12 +1,15 @@
-import * as React from "react";
+import React from "react";
 import { last } from "ramda";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import {
   findMenuPlugin,
   getNavigationProps,
   getPathAttributes,
 } 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 {
@@ -17,8 +20,10 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 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: {
@@ -103,7 +108,6 @@ export const Screen = ({ route, Components }: Props) => {
   const backgroundColor = useScreenBackgroundColor(screenId);
 
   useInitialFocus();
-  useRestoreFocus();
 
   const activeRiver = getActiveRiver({
     screenId,
@@ -145,21 +149,30 @@ export const Screen = ({ route, Components }: Props) => {
       ? routeState?.state?.entry
       : routeState?.state?.screen;
 
+  const isScreenActive = useIsScreenActive();
+
   return (
-    <View style={[styles.container, { backgroundColor }]}>
-      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
-        <NavBar
-          isVisible={isNavBarVisible}
-          menuPlugin={menuPlugin}
-          navigationProps={navigationProps}
+    <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}
         />
-      </NavBarContainer>
-      <ScreenResolver
-        screenType={screenType}
-        screenId={screenId}
-        screenData={screenData}
-        groupId={route}
-      />
-    </View>
+      </View>
+    </FreezeWithCallback>
   );
 };

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

@@ -99,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,
@@ -158,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
-    );
-  });
 });