@applicaster/zapp-react-native-ui-components 12.0.0-alpha.8433353116 → 12.0.0-alpha.8939308044

package/Components/BaseFocusable/index.tsx

@@ -66,7 +66,7 @@ export class BaseFocusable<
     const { initialFocus } = this.props;
 
     if (initialFocus) {
-      focusManager.setupInitialFocus(this.getId());
+      focusManager.setFocus(this.getId());
     }
   }
 

package/Components/Cell/Cell.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
+import { join, path, merge } from "ramda";
 import { View } from "react-native";
 
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
@@ -105,8 +105,8 @@ export class CellComponent extends React.Component<Props> {
       onPress(item, index);
     } else {
       const { item, navigator, component, appData } = this.props;
-      const itemTargetScreen = R.path(["screen_type"], item);
-      const componentTargetScreen = R.path(["data", "target"], component);
+      const itemTargetScreen = path(["screen_type"], item);
+      const componentTargetScreen = path(["data", "target"], component);
       const itemType = getItemType(item, appData?.layoutVersion);
 
       sendSelectCellEvent(item, component, item.title, index);
@@ -116,7 +116,7 @@ export class CellComponent extends React.Component<Props> {
         componentTargetScreen &&
         !itemTargetScreen
       ) {
-        navigator.push(R.merge(item, { screen_type: componentTargetScreen }));
+        navigator.push(merge(item, { screen_type: componentTargetScreen }));
 
         return;
       }
@@ -207,7 +207,7 @@ export class CellComponent extends React.Component<Props> {
 
     const { id } = item;
 
-    const focusableId = R.join("-", [component?.id, id, index]);
+    const focusableId = join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;

package/Components/Cell/CellWithFocusable.tsx

@@ -6,12 +6,20 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
 
-const useCellFocusedState = (groupId: string, id: string) => {
+const useCellFocusedState = (
+  skipFocusManagerRegistration: boolean,
+  groupId: string,
+  id: string
+) => {
   const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
 
   React.useEffect(() => {
-    const isGroupItemFocused = () =>
-      setCurrentCellFocused(focusManager.isGroupItemFocused(groupId, id));
+    const isGroupItemFocused = () => {
+      if (!skipFocusManagerRegistration) {
+        const isFocused = focusManager.isGroupItemFocused(groupId, id);
+        setCurrentCellFocused(isFocused);
+      }
+    };
 
     const handler = () => {
       // tvOS hack for properly checking focus
@@ -29,7 +37,7 @@ const useCellFocusedState = (groupId: string, id: string) => {
     return () => {
       focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
     };
-  }, [groupId]);
+  }, [groupId, skipFocusManagerRegistration]);
 
   return currentCellFocused;
 };
@@ -65,7 +73,11 @@ export function CellWithFocusable(props: Props) {
     selected,
   } = props;
 
-  const isFocused = useCellFocusedState(groupId, id);
+  const isFocused = useCellFocusedState(
+    skipFocusManagerRegistration,
+    groupId,
+    id
+  );
 
   const state = useCellState({
     id: item.id,

package/Components/FocusableGroup/index.tsx

@@ -26,6 +26,7 @@ type Props = {
   nextFocusLeft?: any;
   nextFocusRight?: any;
   onLayout?: any;
+  excludeFromFocusSearching?: boolean;
 };
 
 export class FocusableGroup extends BaseFocusable<Props> {

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -50,7 +50,11 @@ describe("getTransformedPreset should return the passed components if smartCompo
       );
 
       expect(transformed_preset).toBeDefined();
-      expect(transformed_preset.id).toEqual("comp10"); // id was transformed
+
+      expect(transformed_preset.id).toEqual(
+        `${mockComp.id}-${mockPreset.feed_url}-0`
+      ); // id was transformed
+
       expect(transformed_preset.data.source).toEqual(mockPreset.feed_url); // source was replaced with preset feed_url.
     });
   });
@@ -117,7 +121,10 @@ describe("getTransformedPreset should return the passed components if smartCompo
 
       expect(Array.isArray(result)).toBe(true);
       expect(result).toHaveLength(2);
-      expect(result[0].id).toEqual("smart10");
+
+      expect(result[0].id).toEqual(
+        `${mockSmartComp.id}-${mockFeeds.preset_source.data.entry[0].feed_url}-0`
+      );
 
       expect(result[0].data.source).toEqual(
         mockFeeds.preset_source.data.entry[0].feed_url
@@ -287,7 +294,7 @@ describe("getTransformedPreset should return the passed components if smartCompo
         mockComponents[0],
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[1].id + 1,
+          id: `${mockComponents[1].id}-${mockPresetEntry[0].feed_url}-1`,
           data: { source: mockPresetEntry[0].feed_url },
         },
       ];
@@ -344,12 +351,12 @@ describe("getTransformedPreset should return the passed components if smartCompo
       const mockTransformedComponents = [
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[0].id + 0,
+          id: `${mockComponents[0].id}-${mockPresetEntry1[0].feed_url}-0`,
           data: { source: mockPresetEntry1[0].feed_url },
         },
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[1].id + 1,
+          id: `${mockComponents[1].id}-${mockPresetEntry2[0].feed_url}-1`,
           data: { source: mockPresetEntry2[0].feed_url },
         },
       ];
@@ -412,7 +419,7 @@ describe("getTransformedPreset should return the passed components if smartCompo
     const mockTransformedComponents = mockPresetEntry.map((preset, i) => {
       return {
         ...mockLayoutPresets[preset.preset_name],
-        id: mockComponents[0].id + i,
+        id: `${mockComponents[0].id}-${preset.feed_url}-${i}`,
         data: { source: preset.feed_url },
       };
     });

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -41,7 +41,7 @@ export const getTransformedPreset = (
   }
 
   const updatedPresetComponent = produce(presetComponent, (draft) => {
-    draft.id = `${componentId}${index}`;
+    draft.id = `${componentId}-${preset?.feed_url}-${index}`;
     draft.data.source = preset?.feed_url;
 
     if (draft.ui_components) {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -19,6 +19,7 @@ type Props = {
   modalHeight?: number;
   modalWidth?: number;
   mode: VideoModalMode;
+  groupId?: string;
 };
 
 const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
@@ -93,6 +94,7 @@ export function HandlePlayable({
   modalHeight,
   modalWidth,
   mode,
+  groupId,
 }: Props): React.ReactElement | null {
   const state = usePickFromState();
 
@@ -167,6 +169,7 @@ export function HandlePlayable({
         isModal={isModal}
         mode={mode}
         disableCastAction={playerModuleProperties?.disableCastAction}
+        groupId={groupId}
       />
     );
   }

package/Components/Layout/TV/ScreenLayoutContextProvider.tsx

@@ -60,7 +60,7 @@ export function ScreenLayoutContextProvider(props: {
     initialState
   );
 
-  const screeenLayoutValue = React.useMemo(
+  const screenLayoutValue = React.useMemo(
     () => ({
       ...screenLayout,
       setScreenLayout,
@@ -69,7 +69,7 @@ export function ScreenLayoutContextProvider(props: {
   );
 
   return (
-    <ScreenLayoutContext.Provider value={screeenLayoutValue}>
+    <ScreenLayoutContext.Provider value={screenLayoutValue}>
       {props.children}
     </ScreenLayoutContext.Provider>
   );

package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,58 +2,18 @@
 
 exports[`Layout TV renders 1`] = `
 <View
-  style={
-    Object {
-      "flex": 1,
-      "height": 1080,
-      "width": 1920,
-    }
-  }
-  testID="layout-container"
+  excludeFromFocusSearching={true}
+  id="/river/A1234"
+  preferredFocus={true}
 >
   <View
-    backgroundImageUrl="http://applicaster.com"
-    testID="background-component"
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "position": "absolute",
-            "top": 0,
-            "width": 1920,
-            "zIndex": 10,
-          },
-          Object {
-            "maxHeight": 10,
-          },
-        ]
+    Components={
+      Object {
+        "Background": [Function],
+        "NavBar": [Function],
       }
-      testID="nav-bar-container"
-    >
-      <View
-        isVisible={true}
-        menuPlugin={
-          Object {
-            "module": [Function],
-            "name": "resolved-menu-plug",
-            "type": "menu",
-          }
-        }
-        navigationProps={
-          Object {
-            "assets": undefined,
-            "home": undefined,
-            "nav_items": undefined,
-            "rules": undefined,
-            "selected": undefined,
-            "styles": undefined,
-            "title": "",
-          }
-        }
-        testID="nav-bar-component"
-      />
-    </View>
-  </View>
+    }
+    route="/river/A1234"
+  />
 </View>
 `;

package/Components/Layout/TV/__tests__/index.test.tsx

@@ -1,79 +1,48 @@
 import * as React from "react";
-import * as R from "ramda";
+import { omit } from "ramda";
 import { View } from "react-native";
 import { render } from "@testing-library/react-native";
 import { Provider } from "react-redux";
-import { createStore } from "redux";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
+import configureStore from "redux-mock-store";
 
-import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
+const withoutChildren = omit(["children"]);
 
-jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
-  useRiverInitialState: () => ({}),
+jest.mock("../../../Screen/TV/index.web", () => ({
+  Screen: View,
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen");
-
 const Layout = require("..").default;
 
-const ResolvedMenuPlug = () => <View testID="resolved-menu-plug" />;
-
-const plugins = [
-  {
-    module: ResolvedMenuPlug,
-    type: "menu",
-    name: "resolved-menu-plug",
-  },
-];
-
-const bgImage = "http://applicaster.com";
-const isNavBarVisible = true;
-
-const store = createStore(() => ({
+const mockStore = configureStore()({
   appState: { appReady: true },
-  remoteConfigurations: { sdkAssets: { bgImage } },
-  plugins,
-}));
+});
 
 describe("Layout TV", () => {
-  const themes = {
-    myTheme: { screen_margin_top: 10, screen_margin_bottom: 10 },
-  };
-
-  const selectedThemeId = "myTheme";
-
   const navigator = {
-    activeRiver: {
-      navigations: [{ category: "menu", navigation_type: "menu" }],
-    },
-    canGoBack: () => false,
     currentRoute: "/river/A1234",
-    screenData: {
-      navigations: [{ category: "menu", navigation_type: "menu" }],
-    },
-    isNavBarVisible: isNavBarVisible,
+    mainStack: [
+      {
+        route: "/river/A1234",
+        state: "state",
+      },
+    ],
   };
 
   const wrapper = ({ children }) => (
-    <Provider store={store}>
+    <Provider store={mockStore}>
       <NavigationContext.Provider value={navigator}>
-        <ThemeContext.Provider value={{ themes, selectedThemeId }}>
-          {children}
-        </ThemeContext.Provider>
+        {children}
       </NavigationContext.Provider>
     </Provider>
   );
 
-  const Screen = (props) => (
-    <View testID="screen-component" {...R.omit(["children"])(props)} />
-  );
-
   const NavBar = (props) => (
-    <View testID="nav-bar-component" {...R.omit(["children"])(props)} />
+    <View testID="nav-bar-component" {...withoutChildren(props)} />
   );
 
   const Background = (props: Record<any, any>) => (
-    <View testID="background-component" {...R.omit(["children"])(props)}>
+    <View testID="background-component" {...withoutChildren(props)}>
       {props.children}
     </View>
   );
@@ -84,33 +53,8 @@ describe("Layout TV", () => {
   };
 
   it("renders", () => {
-    const { toJSON } = render(
-      <Layout Components={Components}>
-        <Screen />
-      </Layout>,
-      { wrapper }
-    );
+    const { toJSON } = render(<Layout Components={Components} />, { wrapper });
 
     expect(toJSON()).toMatchSnapshot();
   });
-
-  describe("props passed to background component", () => {
-    it("passes correct props", () => {
-      const { getByTestId } = render(
-        <Layout
-          Components={Components}
-          ComponentsExtraProps={{
-            Background: { testProp: true },
-          }}
-        >
-          <Screen />
-        </Layout>,
-        { wrapper }
-      );
-
-      const bgComponent = getByTestId("background-component");
-      expect(bgComponent.props.backgroundImageUrl).toBe(bgImage);
-      expect(bgComponent.props.testProp).toBe(true);
-    });
-  });
 });

package/Components/Layout/TV/index.tsx

@@ -1,128 +1,69 @@
 import * as React from "react";
-import * as R from "ramda";
+import { isEmpty, pathOr } from "ramda";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-
-import {
-  getNavigationProps,
-  resolveNavigationPlugin,
-  routeIsPlayerScreen,
-} from "@applicaster/zapp-react-native-utils/navigationUtils";
-
-import { getBackgroundImageUrl } from "../utils";
-import { LayoutContainer } from "./LayoutContainer";
-import { NavBarContainer } from "./NavBarContainer";
-import { ScreenContainer } from "./ScreenContainer";
-import { TransitionOverlay } from "./TransitionOverlay";
+import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
-import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
-import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { FocusableGroup } from "../../FocusableGroup";
+import { Screen } from "../../Screen/TV/index.web";
+
+export const ScreenDataContext = React.createContext(null);
 
 type Components = {
   NavBar: React.ComponentType<any>;
   Background: React.ComponentType<any>;
 };
 
-type ComponentsExtraProps = {
-  Background?: Record<string, any>;
-  NavBar?: Record<string, any>;
-};
-
 type Props = {
   Components: Components;
-  ComponentsExtraProps?: ComponentsExtraProps;
-  children: React.ReactNode;
 };
 
-const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
-  const navigator = useNavigation();
-  const theme = useTheme();
-  const { title, visible } = useNavbarState();
-  const { activeRiver, currentRoute } = navigator;
-
-  const {
-    appState: { appReady = false } = {},
-    remoteConfigurations,
-    plugins = [],
-  } = usePickFromState(["appState", "remoteConfigurations", "plugins"]);
-
-  const navigationProps = getNavigationProps({
-    navigator,
-    title,
-    category: "menu",
-  });
-
-  const backgroundColor = React.useMemo(() => theme.app_background_color, []);
-
-  const backgroundImageUrl = React.useMemo(
-    () => getBackgroundImageUrl(remoteConfigurations),
-    [remoteConfigurations]
-  );
-
-  const menuPlugin = React.useMemo(
-    () =>
-      resolveNavigationPlugin({
-        category: "menu",
-        navigations: activeRiver?.navigations,
-        plugins,
-      }) as QuickBrickPlugin,
-    []
-  );
-
-  const NavBar = React.useMemo(
-    () => Components.NavBar || (menuPlugin.module as React.ComponentType<any>),
-    []
-  );
-
-  const [navBarReady, setNavBarReady] = React.useState(false);
-
-  const navBarContainer = (
-    <NavBarContainer isVisible={visible} onReady={setNavBarReady}>
-      <NavBar
-        ref={ComponentsExtraProps?.NavBar?.ref}
-        isVisible={visible && !routeIsPlayerScreen(currentRoute)}
-        menuPlugin={menuPlugin}
-        navigationProps={navigationProps}
-        {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
-      />
-    </NavBarContainer>
-  );
+const StackNavigator = ({ Components }: Props) => {
+  // @ts-ignore
+  const { mainStack, currentRoute } = useNavigation();
+
+  const renderScreen = ({ route, state }) => {
+    const pathAttributes = getPathAttributes({ pathname: route });
+
+    if (isEmpty(pathAttributes)) {
+      return null;
+    }
+
+    const id = `${route}`;
+
+    return (
+      <FocusableGroup
+        id={id}
+        preferredFocus={route === currentRoute}
+        excludeFromFocusSearching
+        key={id}
+      >
+        <ScreenDataContext.Provider value={state}>
+          <PathnameContext.Provider value={route}>
+            <Screen route={route} Components={Components} />
+          </PathnameContext.Provider>
+        </ScreenDataContext.Provider>
+      </FocusableGroup>
+    );
+  };
+
+  return mainStack.map(renderScreen);
+};
 
-  const isTVOS = isApplePlatform();
+const Layout = ({ Components }: Props) => {
+  const { appState } = usePickFromState(["appState"]);
+  const appReady = pathOr(false, ["appReady"], appState);
 
   if (!appReady) {
     return null;
   }
 
   return (
-    <LayoutContainer>
-      <ScreenLayoutContextProvider>
-        <Components.Background
-          backgroundColor={backgroundColor}
-          backgroundImageUrl={backgroundImageUrl}
-          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-        >
-          {!isTVOS ? navBarContainer : null}
-          {navBarReady ? (
-            /**
-             Need to re-mount this component on each navigation event
-             It's a hack to work around the fact that we don't support
-             correct screen rendering in our navigator (shared currentRoute state)
-             **/
-            <PathnameContext.Provider value={navigator.currentRoute}>
-              <ScreenContainer>{children}</ScreenContainer>
-            </PathnameContext.Provider>
-          ) : null}
-          {/** Render NavBarContainer over ScreenContainer to let tvOS native
-          focus manager works correctly to focus nav bar items first **/}
-          {isTVOS ? navBarContainer : null}
-          <TransitionOverlay />
-        </Components.Background>
-      </ScreenLayoutContextProvider>
-    </LayoutContainer>
+    <ScreenLayoutContextProvider>
+      <StackNavigator Components={Components} />
+    </ScreenLayoutContextProvider>
   );
 };
 

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -25,6 +25,7 @@ type Props = {
   testID?: string;
   accessibilityLabel?: string;
   cellUUID?: string;
+  extraProps?: Record<string, any>;
 };
 
 function isStringAsset(asset) {
@@ -108,6 +109,7 @@ export function ActionButton(props: Props) {
           flavour={flavour}
           asset={getAssetValue(asset, flavour)}
           cellUUID={cellUUID}
+          {...(props?.extraProps ?? {})}
         />
       )}
     </TouchableOpacity>

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

@@ -43,14 +43,16 @@ function Image({
     [source, error]
   );
 
+  const _source = shouldRenderImg
+    ? withDimensions(source)
+    : defaultPlaceHolderImage;
+
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={
-        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
-      }
+      source={_source?.uri ? _source : undefined}
       {...R.omit(["source"], otherProps)}
     />
   );

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

@@ -2,6 +2,7 @@ import React from "react";
 import { isVideoPreviewEnabled } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/utils";
 import { LiveImage } from "../LiveImage";
 import PureImage from "../Image";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = {
   enable_video_preview: boolean;
@@ -9,7 +10,10 @@ type Props = {
 };
 
 export const ImageContainer = (props: Props) => {
-  const Component = isVideoPreviewEnabled(props) ? LiveImage : PureImage;
+  const isActive = useIsScreenActive();
+
+  const Component =
+    isVideoPreviewEnabled(props) && isActive ? LiveImage : PureImage;
 
   return <Component {...props} />;
 };

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

@@ -177,10 +177,23 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
 const positionAbsolute: ViewStyle = { position: "absolute" };
 
 const LiveImageComponent = (props: LiveImageProps) => {
-  const { item, style, cellUUID, imageKey, actionIdentifier, state } = props;
+  const {
+    item,
+    style: componentStyle,
+    cellUUID,
+    imageKey,
+    actionIdentifier,
+    state,
+  } = props;
 
   const component = useUIComponentContext();
 
+  // Fix for blinking on state change
+  const style = React.useMemo(
+    () => ({ ...componentStyle, backgroundColor: "transparent" }),
+    [componentStyle]
+  );
+
   const componentType = React.useMemo(
     () => getPropComponentType(component),
     [component?.id]