@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4342066143 → 12.0.0-alpha.4354608902

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

@@ -1,79 +1,49 @@
 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("../index.web").default;
 
-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,
+    canGoBack: jest.fn(),
+    mainStack: [
+      {
+        route: "/river/A1234",
+        state: { screen: {} },
+      },
+    ],
   };
 
   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 +54,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

@@ -4,23 +4,14 @@ 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 { 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 { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
+import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -41,20 +32,9 @@ type Props = {
 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 { appState: { appReady = false } = {}, remoteConfigurations } =
+    usePickFromState(["appState", "remoteConfigurations", "plugins"]);
 
   const backgroundColor = React.useMemo(() => theme.app_background_color, []);
 
@@ -63,37 +43,6 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
     [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 isTVOS = isApplePlatform();
-
   if (!appReady) {
     return null;
   }
@@ -108,21 +57,16 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
         >
           <ScreenDataContext.Provider value={navigator.data}>
             <PathnameContext.Provider value={navigator.currentRoute}>
-              {!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)
-             **/
-                <ScreenContainer>{children}</ScreenContainer>
-              ) : null}
-              {/** Render NavBarContainer over ScreenContainer to let tvOS native
-          focus manager works correctly to focus nav bar items first **/}
-              {isTVOS ? navBarContainer : null}
+              <ScreenContextProvider pathname={navigator.currentRoute}>
+                <ScreenContainer
+                  ComponentsExtraProps={ComponentsExtraProps}
+                  NavBar={Components.NavBar}
+                >
+                  {children}
+                </ScreenContainer>
+              </ScreenContextProvider>
             </PathnameContext.Provider>
           </ScreenDataContext.Provider>
-          <TransitionOverlay />
         </Components.Background>
       </ScreenLayoutContextProvider>
     </LayoutContainer>

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { pathOr } from "ramda";
+
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
+import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
+import { StackNavigator } from "../../Navigator";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  Components: Components;
+};
+
+const Layout = ({ Components }: Props) => {
+  const { appState } = usePickFromState(["appState"]);
+  const appReady = pathOr(false, ["appReady"], appState);
+
+  if (!appReady) {
+    return null;
+  }
+
+  return (
+    <ScreenLayoutContextProvider>
+      <StackNavigator Components={Components} />
+    </ScreenLayoutContextProvider>
+  );
+};
+
+export default Layout;

package/Components/Layout/index.tsx

@@ -1,20 +1,24 @@
 import * as React from "react";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import {
+  isTV,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import Mobile from "./Mobile";
-import TV from "./TV";
 
-export default function Layout(props) {
-  const { currentRoute: pathname } = useNavigation();
+import TVWeb from "./TV/index.web";
+import TVDefault from "./TV/index";
+
+const TV = platformSelect({
+  samsung_tv: TVWeb,
+  lg_tv: TVWeb,
+  web: TVWeb,
+  default: TVDefault,
+});
 
+export default function Layout(props) {
   if (isTV()) {
-    return (
-      <ScreenContextProvider pathname={pathname}>
-        <TV {...props} />
-      </ScreenContextProvider>
-    );
+    return <TV {...props} />;
   } else {
     return <Mobile {...props} />;
   }

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

@@ -22,6 +22,10 @@ const styles = StyleSheet.create({
     borderWidth: 0,
     borderColor: COLOR_TRANSPARENT,
   },
+  border: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
+  },
 });
 
 const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
@@ -87,8 +91,9 @@ const Border = ({
 
   return (
     <View
+      pointerEvents="none"
       style={{
-        ...StyleSheet.absoluteFillObject,
+        ...styles.border,
         right: -containerPadding - paddingRight,
         bottom: -containerPadding - paddingBottom,
         left: -containerPadding - paddingLeft,
@@ -130,8 +135,8 @@ export const BorderContainerView = (props: Props) => {
       {...props}
       style={[style, styles.container, borderStyleForMissingBorder]}
     >
-      {children}
       <Border style={style} padding={padding} borderPosition={borderPosition} />
+      {children}
     </View>
   );
 };

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

@@ -4,6 +4,7 @@ import { Focusable } from "@applicaster/zapp-react-native-ui-components/Componen
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 const { Logger } = getXray();
 
@@ -35,7 +36,9 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const focusableId = getFocusableId(prefixId, suffixId);
 
-  const focused = focusableId === focusedButtonId;
+  const focused =
+    focusableId === focusedButtonId ||
+    toBooleanWithDefaultFalse(otherProps.focused);
 
   const additionalStyles = focused ? focusedStyles : normalStyles;
 

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/tv/ButtonContainerView/index.android.tsx

@@ -61,7 +61,10 @@ export function ButtonContainerView({
     <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator key={index} width={horizontalGutter} />
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
         ),
         cloneElementsWithIds(buttonIds, filteredChildren)
       )}

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,10 +31,13 @@ export function ButtonContainerView({
   }
 
   return (
-    <View style={style}>
+    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator key={index} width={horizontalGutter} />
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
         ),
         filteredChildren
       )}

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/NativeFocusables/{index.js → index.ts}

@@ -1,10 +1,12 @@
 import { requireNativeComponent, View } from "react-native";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 
+// @TODO define the types
 export const FocusableGroupNative = isAppleTV()
-  ? requireNativeComponent("FocusableGroupViewModule", null)
+  ? requireNativeComponent<any>("FocusableGroupViewModule")
   : View;
 
+// @TODO define the types
 export const FocusableItemNative = isAppleTV()
-  ? requireNativeComponent("FocusableViewModule", null)
+  ? requireNativeComponent<any>("FocusableViewModule")
   : View;

package/Components/Navigator/StackNavigator.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { isEmpty } from "ramda";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+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>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  Components: Components;
+};
+
+export const StackNavigator = ({ Components }: Props) => {
+  const { mainStack } = useNavigation();
+
+  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={isLast(index, mainStack.length)}
+        excludeFromFocusSearching
+        key={routeId}
+      >
+        <ScreenDataContext.Provider value={state}>
+          <PathnameContext.Provider value={route}>
+            <ScreenContextProvider pathname={route}>
+              <Screen route={route} Components={Components} />
+            </ScreenContextProvider>
+          </PathnameContext.Provider>
+        </ScreenDataContext.Provider>
+      </FocusableGroup>
+    );
+  };
+
+  return <>{mainStack.map(renderScreen)}</>;
+};

package/Components/Navigator/index.ts

@@ -0,0 +1 @@
+export { StackNavigator } from "./StackNavigator";

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -68,6 +68,7 @@ type Props = {
   mode?: VideoModalMode;
   loadPipesData: (url: string, options: {}) => void;
   disableCastAction?: boolean;
+  groupId?: string;
 };
 
 type ScreenStyles = ZappRiver["styles"] & {
@@ -123,6 +124,7 @@ const nativeStyles = {
   playerScreen: {
     flex: 1,
     backgroundColor: "black",
+    overflow: "hidden",
   },
   playerWrapper: {
     flex: 1,
@@ -200,6 +202,7 @@ const PlayerContainerComponent = (props: Props) => {
     style: videoStyle,
     mode = VideoModalMode.MAXIMIZED,
     disableCastAction = false,
+    groupId,
   } = props;
 
   // Hooks
@@ -249,8 +252,8 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
-    navigator.goBack();
     showNavBar(true);
+    navigator.goBack();
   }, [isModal, navigator.goBack, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
@@ -629,6 +632,7 @@ const PlayerContainerComponent = (props: Props) => {
                 style={styles.focusableGroup}
                 preferredFocus
                 shouldUsePreferredFocus
+                groupId={groupId}
               >
                 {/* Video player and components */}
                 <View