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

package/Components/BaseFocusable/index.tsx

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

package/Components/Cell/Cell.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { join, path, merge } from "ramda";
+import * as R 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 = path(["screen_type"], item);
-      const componentTargetScreen = path(["data", "target"], component);
+      const itemTargetScreen = R.path(["screen_type"], item);
+      const componentTargetScreen = R.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(merge(item, { screen_type: componentTargetScreen }));
+        navigator.push(R.merge(item, { screen_type: componentTargetScreen }));
 
         return;
       }
@@ -207,7 +207,7 @@ export class CellComponent extends React.Component<Props> {
 
     const { id } = item;
 
-    const focusableId = join("-", [component?.id, id, index]);
+    const focusableId = R.join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;

package/Components/Cell/CellWithFocusable.tsx

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

package/Components/FocusableGroup/index.tsx

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

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -19,7 +19,6 @@ type Props = {
   modalHeight?: number;
   modalWidth?: number;
   mode: VideoModalMode;
-  groupId?: string;
 };
 
 const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
@@ -94,7 +93,6 @@ export function HandlePlayable({
   modalHeight,
   modalWidth,
   mode,
-  groupId,
 }: Props): React.ReactElement | null {
   const state = usePickFromState();
 
@@ -169,7 +167,6 @@ 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 screenLayoutValue = React.useMemo(
+  const screeenLayoutValue = React.useMemo(
     () => ({
       ...screenLayout,
       setScreenLayout,
@@ -69,7 +69,7 @@ export function ScreenLayoutContextProvider(props: {
   );
 
   return (
-    <ScreenLayoutContext.Provider value={screenLayoutValue}>
+    <ScreenLayoutContext.Provider value={screeenLayoutValue}>
       {props.children}
     </ScreenLayoutContext.Provider>
   );

package/Components/Layout/TV/TransitionOverlay.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import { useScreenConfiguration } from "../../River/useScreenConfiguration";
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export const TransitionOverlay = () => {
+  const screen = useCurrentScreenData();
+
+  const { backgroundColor: screenBackgroundColor } = useScreenConfiguration(
+    screen?.id
+  );
+
+  const theme = useTheme();
+
+  const themeBackgroundColor = React.useMemo(
+    () => theme.app_background_color,
+    [theme.app_background_color]
+  );
+
+  const backgroundColor = ifEmptyUseFallback(
+    screenBackgroundColor,
+    themeBackgroundColor
+  );
+
+  const {
+    appState: { isTransitioning },
+  } = usePickFromState(["appState"]);
+
+  if (!isWeb() || !isTransitioning) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor,
+        },
+      ]}
+    >
+      <Spinner size={"large"} />
+    </View>
+  );
+};

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

@@ -2,18 +2,58 @@
 
 exports[`Layout TV renders 1`] = `
 <View
-  excludeFromFocusSearching={true}
-  id="/river/A1234"
-  preferredFocus={true}
+  style={
+    Object {
+      "flex": 1,
+      "height": 1080,
+      "width": 1920,
+    }
+  }
+  testID="layout-container"
 >
   <View
-    Components={
-      Object {
-        "Background": [Function],
-        "NavBar": [Function],
+    backgroundImageUrl="http://applicaster.com"
+    testID="background-component"
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "position": "absolute",
+            "top": 0,
+            "width": 1920,
+            "zIndex": 10,
+          },
+          Object {
+            "maxHeight": 10,
+          },
+        ]
       }
-    }
-    route="/river/A1234"
-  />
+      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>
 </View>
 `;

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

@@ -1,48 +1,79 @@
 import * as React from "react";
-import { omit } from "ramda";
+import * as R 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";
 
-const withoutChildren = omit(["children"]);
+import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
 
-jest.mock("../../../Screen/TV/index.web", () => ({
-  Screen: View,
+jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
+  useRiverInitialState: () => ({}),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen");
+
 const Layout = require("..").default;
 
-const mockStore = configureStore()({
+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(() => ({
   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",
-    mainStack: [
-      {
-        route: "/river/A1234",
-        state: "state",
-      },
-    ],
+    screenData: {
+      navigations: [{ category: "menu", navigation_type: "menu" }],
+    },
+    isNavBarVisible: isNavBarVisible,
   };
 
   const wrapper = ({ children }) => (
-    <Provider store={mockStore}>
+    <Provider store={store}>
       <NavigationContext.Provider value={navigator}>
-        {children}
+        <ThemeContext.Provider value={{ themes, selectedThemeId }}>
+          {children}
+        </ThemeContext.Provider>
       </NavigationContext.Provider>
     </Provider>
   );
 
+  const Screen = (props) => (
+    <View testID="screen-component" {...R.omit(["children"])(props)} />
+  );
+
   const NavBar = (props) => (
-    <View testID="nav-bar-component" {...withoutChildren(props)} />
+    <View testID="nav-bar-component" {...R.omit(["children"])(props)} />
   );
 
   const Background = (props: Record<any, any>) => (
-    <View testID="background-component" {...withoutChildren(props)}>
+    <View testID="background-component" {...R.omit(["children"])(props)}>
       {props.children}
     </View>
   );
@@ -53,8 +84,33 @@ describe("Layout TV", () => {
   };
 
   it("renders", () => {
-    const { toJSON } = render(<Layout Components={Components} />, { wrapper });
+    const { toJSON } = render(
+      <Layout Components={Components}>
+        <Screen />
+      </Layout>,
+      { 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,32 +1,131 @@
 import * as React from "react";
-import { pathOr } from "ramda";
-
+import * as R 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 { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
-import { StackNavigator } from "../../Navigator";
+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";
 
 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 }: Props) => {
-  const { appState } = usePickFromState(["appState"]);
-  const appReady = pathOr(false, ["appReady"], appState);
+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 isTVOS = isApplePlatform();
 
   if (!appReady) {
     return null;
   }
 
   return (
-    <ScreenLayoutContextProvider>
-      <StackNavigator Components={Components} />
-    </ScreenLayoutContextProvider>
+    <LayoutContainer>
+      <ScreenLayoutContextProvider>
+        <Components.Background
+          backgroundColor={backgroundColor}
+          backgroundImageUrl={backgroundImageUrl}
+          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
+        >
+          <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}
+            </PathnameContext.Provider>
+          </ScreenDataContext.Provider>
+          <TransitionOverlay />
+        </Components.Background>
+      </ScreenLayoutContextProvider>
+    </LayoutContainer>
   );
 };
 

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

@@ -7,50 +7,24 @@ type BorderPosition = "inside" | "outside" | "center";
 interface Props {
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
+  borderPaddingTop: number;
+  borderPaddingRight: number;
+  borderPaddingBottom: number;
+  borderPaddingLeft: number;
   children: React.ReactNode;
 }
 
-const MARGINS = [
-  "marginTop",
-  "marginBottom",
-  "marginLeft",
-  "marginRight",
-] as const;
+const COLOR_TRANSPARENT = "transparent";
 
-const PADDINGS = [
-  "paddingTop",
-  "paddingBottom",
-  "paddingLeft",
-  "paddingRight",
-] as const;
+const styles = StyleSheet.create({
+  container: {
+    overflow: "visible",
+    borderWidth: 0,
+    borderColor: COLOR_TRANSPARENT,
+  },
+});
 
-const isPercentageValue = (value: number | string) => {
-  if (typeof value === "string" && value.endsWith("%")) {
-    return true;
-  }
-
-  return false;
-};
-
-const calculateContainerSpacing = ({
-  spacingKey,
-  style,
-  additionalSpacing,
-}: {
-  spacingKey: typeof MARGINS[number] | typeof PADDINGS[number];
-  style: ImageStyle | ViewStyle;
-  additionalSpacing: number;
-}) => {
-  return {
-    [spacingKey]:
-      toNumberWithDefaultZero(style[spacingKey]) + additionalSpacing,
-  };
-};
-
-const getContainerBorderWidth = (
-  borderPosition: BorderPosition,
-  borderWidth
-) => {
+const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
   switch (borderPosition) {
     case "inside":
       return 0;
@@ -63,104 +37,101 @@ const getContainerBorderWidth = (
   }
 };
 
-const getContainerPadding = (borderPosition: BorderPosition, borderWidth) => {
-  switch (borderPosition) {
-    case "inside":
-      return borderWidth;
-    case "center":
-      return borderWidth / 2;
-    case "outside":
-      return 0;
-    default:
-      return 0;
-  }
-};
-
-const InsideBorder = ({
+const Border = ({
   style,
+  padding,
   borderPosition,
 }: {
   style: ViewStyle;
+  padding: ViewStyle;
   borderPosition: BorderPosition;
 }) => {
-  if (borderPosition === "outside") {
+  if (!borderPosition) {
     return null;
   }
 
-  const insideBorderWidth =
-    borderPosition === "center" ? style.borderWidth / 2 : style.borderWidth;
+  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
+  const containerPadding = getBorderPadding(borderPosition, borderWidth);
+
+  const initialBorderRadius = toNumberWithDefaultZero(style.borderRadius);
+  const paddingTop = toNumberWithDefaultZero(padding.paddingTop);
+  const paddingRight = toNumberWithDefaultZero(padding.paddingRight);
+  const paddingBottom = toNumberWithDefaultZero(padding.paddingBottom);
+  const paddingLeft = toNumberWithDefaultZero(padding.paddingLeft);
+
+  const borderRadiusStyle = initialBorderRadius
+    ? {
+        borderTopLeftRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingTop, paddingLeft),
+        borderTopRightRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingTop, paddingRight),
+        borderBottomLeftRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingBottom, paddingLeft),
+        borderBottomRightRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingBottom, paddingRight),
+      }
+    : {
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+      };
 
   return (
     <View
       style={{
         ...StyleSheet.absoluteFillObject,
-        borderWidth: insideBorderWidth,
+        right: -containerPadding - paddingRight,
+        bottom: -containerPadding - paddingBottom,
+        left: -containerPadding - paddingLeft,
+        top: -containerPadding - paddingTop,
+        borderWidth,
         borderColor: style.borderColor,
-        borderRadius: style.borderRadius,
+        ...borderRadiusStyle,
       }}
     />
   );
 };
 
 export const BorderContainerView = (props: Props) => {
-  const { style, children } = props;
-  // Return border position prop after re-implementing
-  const borderPosition = "outside";
-
-  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
-  const spacing = getContainerPadding(borderPosition, borderWidth);
+  const {
+    borderPosition,
+    borderPaddingTop,
+    borderPaddingRight,
+    borderPaddingBottom,
+    borderPaddingLeft,
+    style,
+    children,
+  } = props;
 
   const borderStyleForMissingBorder =
     style?.borderWidth === 0 || !style?.borderColor ? { borderRadius: 0 } : {};
 
-  const updatedMargins = MARGINS.reduce((acc, margin) => {
-    const marginValue = calculateContainerSpacing({
-      spacingKey: margin,
-      style,
-      additionalSpacing: spacing,
-    });
-
-    return { ...acc, ...marginValue };
-  }, {});
-
-  const updatedPaddings = PADDINGS.reduce((acc, padding) => {
-    const paddingValue = calculateContainerSpacing({
-      spacingKey: padding,
-      style,
-      additionalSpacing: spacing,
-    });
-
-    return { ...acc, ...paddingValue };
-  }, {});
-
-  const updatedWidth = style.width
-    ? isPercentageValue(style.width)
-      ? style.width
-      : toNumberWithDefaultZero(style.width) - spacing * 2
-    : undefined;
-
-  const updatedHeight = style.height
-    ? isPercentageValue(style.height)
-      ? style.height
-      : toNumberWithDefaultZero(style.height) - spacing * 2
-    : undefined;
-
-  const containerStyle = {
-    borderWidth: getContainerBorderWidth(borderPosition, borderWidth),
-    padding: spacing,
-    ...updatedMargins,
-    ...updatedPaddings,
-    width: updatedWidth,
-    height: updatedHeight,
-  };
+  const padding =
+    borderPosition === "outside"
+      ? {
+          paddingTop: borderPaddingTop,
+          paddingRight: borderPaddingRight,
+          paddingBottom: borderPaddingBottom,
+          paddingLeft: borderPaddingLeft,
+        }
+      : {};
 
   return (
-    <View {...props} style={[style, containerStyle]}>
+    <View
+      {...props}
+      style={[style, styles.container, borderStyleForMissingBorder]}
+    >
       {children}
-      <InsideBorder
-        style={{ ...style, ...borderStyleForMissingBorder }}
-        borderPosition={borderPosition}
-      />
+      <Border style={style} padding={padding} borderPosition={borderPosition} />
     </View>
   );
 };

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

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

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

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

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -68,7 +68,6 @@ type Props = {
   mode?: VideoModalMode;
   loadPipesData: (url: string, options: {}) => void;
   disableCastAction?: boolean;
-  groupId?: string;
 };
 
 type ScreenStyles = ZappRiver["styles"] & {
@@ -201,7 +200,6 @@ const PlayerContainerComponent = (props: Props) => {
     style: videoStyle,
     mode = VideoModalMode.MAXIMIZED,
     disableCastAction = false,
-    groupId,
   } = props;
 
   // Hooks
@@ -251,6 +249,7 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
+    navigator.goBack();
     showNavBar(true);
   }, [isModal, navigator.goBack, showNavBar]);
 
@@ -630,7 +629,6 @@ const PlayerContainerComponent = (props: Props) => {
                 style={styles.focusableGroup}
                 preferredFocus
                 shouldUsePreferredFocus
-                groupId={groupId}
               >
                 {/* Video player and components */}
                 <View

package/Components/River/TV/River.tsx

@@ -7,10 +7,14 @@ import * as R from "ramda";
 import {
   useFeedLoader,
   useLayoutVersion,
+  useNavigationPluginData,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {
   useNavbarState,
   useSetNavbarState,
@@ -47,6 +51,8 @@ export const River = (props: Props) => {
   const { setTitle: setScreenTitle, setSummary: setScreenSummary } =
     useSetNavbarState();
 
+  const navigationPluginData = useNavigationPluginData();
+
   const rivers = useRivers();
   const isV2 = useLayoutVersion({ isV2: true });
 
@@ -93,6 +99,23 @@ export const River = (props: Props) => {
     }
   }, [feedData, screenData, screenTitle, screenSummary]);
 
+  React.useEffect(() => {
+    if (
+      isWeb() &&
+      toBooleanWithDefaultFalse(
+        navigationPluginData?.rules?.focus_on_content
+      ) &&
+      river &&
+      river.type !== "general_content"
+    ) {
+      const groupId = R.pathOr("river", ["groupId"], componentsMapExtraProps);
+
+      focusManager.setupInitialFocus(groupId, true);
+      focusManager.setInitialFocus();
+      focusManager.enableAutomaticFocus();
+    }
+  }, [river, componentsMapExtraProps]);
+
   if (!river) {
     utilsLogger.error({
       message: `River ${screenData.id} not found!`,

package/Components/ScreenResolver/index.tsx

@@ -32,13 +32,12 @@ type Props = {
     nextFocusLeft?: React.Ref<any>;
     nextFocusUp?: React.Ref<any>;
   };
-  groupId?: string;
 };
 
 export function ScreenResolverComponent(props: Props) {
   useScreenAnalytics(props);
 
-  const { screenType, screenId, screenData, groupId } = props;
+  const { screenType, screenId, screenData } = props;
 
   const { hookPlugin } = screenData || {};
 
@@ -82,7 +81,6 @@ export function ScreenResolverComponent(props: Props) {
         item={screenData}
         mode={mode === "PIP" ? "PIP" : "FULLSCREEN"}
         isModal={false}
-        groupId={groupId}
       />
     );
   }

package/Components/VideoLive/LiveImageManager.ts

@@ -10,11 +10,7 @@ import { Component } from "react";
 
 const { log_debug, log_info, log_error } = loggerLiveImageManager;
 
-export type LiveImageManagerEvent =
-  | "onEnd"
-  | "onStart"
-  | "onError"
-  | "onDestroy";
+export type LiveImageManagerEvent = "onEnd" | "onStart" | "onError";
 
 export type LiveImageManagerListenerData = {
   id: string;
@@ -106,16 +102,6 @@ export class LiveImageManager implements PlayerLifecycleListener {
     }
 
     this.items = this.items.filter((i) => i !== item);
-
-    this.invokeListenersUpdate({
-      callbackName: "onDestroy",
-      event: {
-        item,
-        playerId: this.currentlyPlaying?.playerId,
-        primaryPlayerId: this.primaryPlayer?.playerId,
-        entry: item.getPlayer().getEntry(),
-      },
-    });
   };
 
   public onViewportEnter = (item: LiveImage) => {

package/Components/VideoModal/PlayerDetails.tsx

@@ -42,12 +42,12 @@ export const PlayerDetails = ({
     : {};
 
   // Animation setup
-  const translateY = useRef(new Animated.Value(100)).current;
+  const translateY = useRef(new Animated.Value(50)).current;
   const opacity = useRef(new Animated.Value(0)).current;
 
   const runAnimation = () => {
     Animated.timing(translateY, {
-      toValue: 0,
+      toValue: -30,
       duration: 500,
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: true,
@@ -63,7 +63,7 @@ export const PlayerDetails = ({
 
   useEffect(() => {
     if (isAudioPlayer) {
-      setTimeout(() => runAnimation(), 1000);
+      setTimeout(() => runAnimation(), 1500);
     }
   }, [isAudioPlayer]);
 

package/Contexts/ZappPipesContext/ZappPipesEntryContext.ts

@@ -63,7 +63,7 @@ function prepareContext(
   const parent = findParent(currentContext, route, getChildren);
 
   const newEntry = {
-    route,
+    route: route,
     id: uuid(),
     data: newContext,
   } as SingleEntry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.4201443043",
+  "version": "12.0.0-alpha.4324313105",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.4201443043",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4201443043",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4201443043",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4201443043",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4324313105",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4324313105",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4324313105",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4324313105",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Components/Navigator/StackNavigator.tsx

@@ -1,48 +0,0 @@
-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";
-
-type Components = {
-  NavBar: React.ComponentType<any>;
-  Background: React.ComponentType<any>;
-};
-
-type Props = {
-  Components: Components;
-};
-
-export const StackNavigator = ({ Components }: Props) => {
-  const { mainStack, currentRoute } = useNavigation();
-
-  const renderScreen = ({ route, state }) => {
-    const pathAttributes = getPathAttributes({ pathname: route });
-
-    if (isEmpty(pathAttributes)) {
-      return null;
-    }
-
-    return (
-      <FocusableGroup
-        id={route}
-        preferredFocus={route === currentRoute}
-        excludeFromFocusSearching
-        key={route}
-      >
-        <ScreenDataContext.Provider value={state}>
-          <PathnameContext.Provider value={route}>
-            <Screen route={route} Components={Components} />
-          </PathnameContext.Provider>
-        </ScreenDataContext.Provider>
-      </FocusableGroup>
-    );
-  };
-
-  return <>{mainStack.map(renderScreen)}</>;
-};

package/Components/Navigator/index.ts

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

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

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

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

@@ -1,70 +0,0 @@
-import * as React from "react";
-import {
-  useNavigationPluginData,
-  useIsNavBarVisible,
-  useRoute,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import {
-  setFocusOnContent,
-  setFocusOnMenu,
-} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux";
-
-type Return =
-  | {
-      onContent: true;
-      onMenu: false;
-    }
-  | {
-      onContent: false;
-      onMenu: true;
-    };
-
-const getInitialFocus = (focusOnContent, isNavBarVisible): Return => {
-  if (focusOnContent) {
-    return {
-      onContent: true,
-      onMenu: false,
-    };
-  }
-
-  if (!focusOnContent && isNavBarVisible) {
-    // put focus on navbar
-    return {
-      onContent: false,
-      onMenu: true,
-    };
-  }
-
-  // we don't have navbar, put focus on content anyway
-  return {
-    onContent: true,
-    onMenu: false,
-  };
-};
-
-export const useInitialFocus = (): void => {
-  const navigationPluginData = useNavigationPluginData();
-
-  const focusOnContent = toBooleanWithDefaultFalse(
-    navigationPluginData?.rules?.focus_on_content
-  );
-
-  const isNavBarVisible = useIsNavBarVisible();
-
-  const { pathname: currentRoute } = useRoute();
-
-  React.useEffect(() => {
-    const initialFocus = getInitialFocus(focusOnContent, isNavBarVisible);
-
-    if (initialFocus.onContent) {
-      setFocusOnContent(currentRoute);
-
-      return;
-    }
-
-    if (initialFocus.onMenu) {
-      setFocusOnMenu(currentRoute);
-    }
-  }, []);
-};

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

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { isNil } from "ramda";
-import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-
-export const useRestoreFocus = (): void => {
-  const isScreenActive = useIsScreenActive();
-  const previousIsScreenActive = usePrevious(isScreenActive);
-
-  React.useEffect(() => {
-    if (isNil(previousIsScreenActive)) {
-      // it's initial mounting of the screen, do nothing here
-      return;
-    }
-
-    if (!previousIsScreenActive && isScreenActive) {
-      // restore focus when we go back from next screen
-      focusManager.setInitialFocus();
-    }
-  }, [previousIsScreenActive, isScreenActive]);
-};

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

@@ -1,179 +0,0 @@
-import * as React from "react";
-import { last, pathOr } from "ramda";
-import { View, StyleSheet } from "react-native";
-import {
-  getNavigationProps,
-  getPathAttributes,
-  resolveNavigationPlugin,
-} from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { 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 { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-
-import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
-import { ScreenResolver } from "../../ScreenResolver";
-import { useInitialFocus, useRestoreFocus } from "./hooks";
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-});
-
-type Components = {
-  NavBar: React.ComponentType<any>;
-  Background: React.ComponentType<any>;
-};
-
-type Props = {
-  route: string;
-  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,
-  routeState,
-  rivers,
-  fallbackActiveRiver,
-}) => {
-  if (rivers[screenId]) {
-    if (screenType === "hooks") {
-      const navigations = routeState?.state?.entry?.payload?.navigations;
-
-      if (navigations) {
-        return routeState.state.entry.payload;
-      }
-    }
-
-    return routeState?.state?.screen;
-  }
-
-  // screenId is not presented into rivers, use fallback instead
-  return fallbackActiveRiver;
-};
-
-const getNavigations = ({
-  screenId,
-  screenType,
-  routeState,
-  rivers,
-  fallbackNavigations,
-}) => {
-  if (rivers[screenId]) {
-    // river presents
-    if (screenType === "hooks") {
-      const navigations = routeState?.state?.entry?.payload?.navigations;
-
-      if (navigations) {
-        return navigations;
-      }
-    }
-
-    return routeState?.state?.screen?.navigations;
-  }
-
-  // screenId is not presented into rivers, use fallback instead
-  return fallbackNavigations;
-};
-
-export const Screen = ({ route, Components }: Props) => {
-  if (isNilOrEmpty(route)) {
-    throw Error("Required props: route is missing");
-  }
-
-  const navigator = useNavigation();
-  const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
-
-  const pathAttributes = getPathAttributes({ pathname: route });
-  const routeState = navigator.getStackForPathname(route);
-
-  const { screenType, screenId } = last(pathAttributes);
-
-  const backgroundColor = useScreenBackgroundColor(screenId);
-
-  useInitialFocus();
-  useRestoreFocus();
-
-  const activeRiver = getActiveRiver({
-    screenId,
-    screenType,
-    routeState,
-    rivers,
-    fallbackActiveRiver: navigator.activeRiver,
-  });
-
-  const navigationProps = getNavigationProps({
-    navigator: {
-      // @ts-ignore
-      activeRiver,
-      // @ts-ignore
-      screenTitle: routeState.state.entry?.title || routeState.screen?.name,
-    },
-    category: "menu",
-  });
-
-  const navigations = getNavigations({
-    screenId,
-    screenType,
-    routeState,
-    rivers,
-    fallbackNavigations: navigator.activeRiver.navigations,
-  });
-
-  const menuPlugin = resolveNavigationPlugin({
-    category: "menu",
-    navigations,
-    plugins,
-  }) as QuickBrickPlugin;
-
-  const NavBar = (Components.NavBar ||
-    menuPlugin.module) as React.ComponentType<any>;
-
-  const isPlayer = isPlayerPlugin(routeState);
-  const isLogin = isLoginPlugin(routeState);
-
-  const isNavBarVisible = !isPlayer && !isLogin;
-
-  const screenData =
-    screenType === "hooks" || isPlayer
-      ? routeState?.state?.entry
-      : routeState?.state?.screen;
-
-  return (
-    <View style={[styles.container, { backgroundColor }]}>
-      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
-        <NavBar
-          groupId={route}
-          isVisible={isNavBarVisible}
-          menuPlugin={menuPlugin}
-          navigationProps={navigationProps}
-        />
-      </NavBarContainer>
-      <ScreenResolver
-        screenType={screenType}
-        screenId={screenId}
-        screenData={screenData}
-        groupId={route}
-      />
-    </View>
-  );
-};