@applicaster/zapp-react-native-ui-components 12.0.0-alpha.9739074790 → 12.0.0-alpha.9903765553

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/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,131 +1,32 @@
 import * as React from "react";
-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 { pathOr } from "ramda";
 
-import { getBackgroundImageUrl } from "../utils";
-import { LayoutContainer } from "./LayoutContainer";
-import { NavBarContainer } from "./NavBarContainer";
-import { ScreenContainer } from "./ScreenContainer";
-import { TransitionOverlay } from "./TransitionOverlay";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 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 { StackNavigator } from "../../Navigator";
 
 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 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)}
-        >
-          <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>
+    <ScreenLayoutContextProvider>
+      <StackNavigator Components={Components} />
+    </ScreenLayoutContextProvider>
   );
 };
 

package/Components/Layout/index.tsx

@@ -1,20 +1,12 @@
 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 Mobile from "./Mobile";
 import TV from "./TV";
 
 export default function Layout(props) {
-  const { currentRoute: pathname } = useNavigation();
-
   if (isTV()) {
-    return (
-      <ScreenContextProvider pathname={pathname}>
-        <TV {...props} />
-      </ScreenContextProvider>
-    );
+    return <TV {...props} />;
   } else {
     return <Mobile {...props} />;
   }

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

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

package/Components/Navigator/StackNavigator.tsx

@@ -0,0 +1,48 @@
+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

@@ -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"] & {
@@ -200,6 +201,7 @@ const PlayerContainerComponent = (props: Props) => {
     style: videoStyle,
     mode = VideoModalMode.MAXIMIZED,
     disableCastAction = false,
+    groupId,
   } = props;
 
   // Hooks
@@ -249,7 +251,6 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
-    navigator.goBack();
     showNavBar(true);
   }, [isModal, navigator.goBack, showNavBar]);
 
@@ -629,6 +630,7 @@ const PlayerContainerComponent = (props: Props) => {
                 style={styles.focusableGroup}
                 preferredFocus
                 shouldUsePreferredFocus
+                groupId={groupId}
               >
                 {/* Video player and components */}
                 <View

package/Components/River/TV/River.tsx

@@ -7,14 +7,10 @@ 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,
@@ -51,8 +47,6 @@ export const River = (props: Props) => {
   const { setTitle: setScreenTitle, setSummary: setScreenSummary } =
     useSetNavbarState();
 
-  const navigationPluginData = useNavigationPluginData();
-
   const rivers = useRivers();
   const isV2 = useLayoutVersion({ isV2: true });
 
@@ -99,23 +93,6 @@ 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/Screen/TV/hooks/index.ts

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

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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,179 @@
+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>
+  );
+};

package/Components/ScreenResolver/index.tsx

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

package/Components/VideoLive/LiveImageManager.ts

@@ -10,7 +10,11 @@ import { Component } from "react";
 
 const { log_debug, log_info, log_error } = loggerLiveImageManager;
 
-export type LiveImageManagerEvent = "onEnd" | "onStart" | "onError";
+export type LiveImageManagerEvent =
+  | "onEnd"
+  | "onStart"
+  | "onError"
+  | "onDestroy";
 
 export type LiveImageManagerListenerData = {
   id: string;
@@ -102,6 +106,16 @@ 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/PlayerWrapper.tsx

@@ -184,8 +184,8 @@ export const PlayerWrapper = (props: Props) => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
 
   return (
-    <ScreenContextProvider pathname={pathname}>
-      <PathnameContext.Provider value={pathname}>
+    <PathnameContext.Provider value={pathname}>
+      <ScreenContextProvider pathname={pathname}>
         <WrapperView
           edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
           style={[
@@ -199,8 +199,8 @@ export const PlayerWrapper = (props: Props) => {
             additionalData={{ saveArea: true }}
             style={directionStyles(isTabletLandscape)}
           >
-            <ScreenContextProvider pathname={pathname}>
-              <PathnameContext.Provider value={pathname}>
+            <PathnameContext.Provider value={pathname}>
+              <ScreenContextProvider pathname={pathname}>
                 <View
                   testID={`${entry?.id}-player-container`}
                   style={[
@@ -241,11 +241,11 @@ export const PlayerWrapper = (props: Props) => {
                     <View style={defaultStyles.playerDetails} />
                   )}
                 </AnimatedScrollModal>
-              </PathnameContext.Provider>
-            </ScreenContextProvider>
+              </ScreenContextProvider>
+            </PathnameContext.Provider>
           </AnimationComponent>
         </WrapperView>
-      </PathnameContext.Provider>
-    </ScreenContextProvider>
+      </ScreenContextProvider>
+    </PathnameContext.Provider>
   );
 };

package/Components/VideoModal/VideoModal.tsx

@@ -129,8 +129,8 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <ScreenContextProvider pathname={pathname}>
-      <PathnameContext.Provider value={pathname}>
+    <PathnameContext.Provider value={pathname}>
+      <ScreenContextProvider pathname={pathname}>
         {itemIdHooksFinished === item?.id ? (
           <AnimatedPlayerModalWrapper
             style={[
@@ -153,8 +153,8 @@ const VideoModalComponent = () => {
             <Spinner />
           </View>
         )}
-      </PathnameContext.Provider>
-    </ScreenContextProvider>
+      </ScreenContextProvider>
+    </PathnameContext.Provider>
   );
 };
 

package/Contexts/ScreenContext/index.tsx

@@ -2,6 +2,7 @@ import React, {
   createContext,
   ReactNode,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
 } from "react";
@@ -113,6 +114,11 @@ export function ScreenContextProvider({
     return navBarState;
   }, []);
 
+  useEffect(() => {
+    // purge the getScreenNavBarState store when the pathname changes
+    screenNavBarStateRef.current = null;
+  }, [pathname]);
+
   const screenNavBarState = getScreenNavBarState()(
     useShallow((state) => ({
       visible: state.visible,

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.9739074790",
+  "version": "12.0.0-alpha.9903765553",
   "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.9739074790",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.9739074790",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.9739074790",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.9739074790",
+    "@applicaster/applicaster-types": "12.0.0-alpha.9903765553",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.9903765553",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.9903765553",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.9903765553",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Components/Layout/TV/TransitionOverlay.tsx

@@ -1,64 +0,0 @@
-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>
-  );
-};