@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5468407101 → 12.0.0-alpha.5471145113

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/RouteManager/index.tsx

@@ -14,7 +14,7 @@ type Props = { pathname: string; screenData: Record<string, any> };
  * @param {Props}: see props above
  */
 export function RouteManager(props: Props) {
-  const { pathname, screenData: _screenData } = useRoute();
+  const { pathname, screenData } = useRoute();
   const pathAttributes = getPathAttributes({ pathname });
 
   const { screenType, screenId } = R.last(pathAttributes);
@@ -25,7 +25,7 @@ export function RouteManager(props: Props) {
         screenType={screenType}
         screenId={screenId}
         {...props}
-        screenData={props.screenData}
+        screenData={screenData}
       />
     </TestId>
   );

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/Screen/__tests__/Screen.test.tsx

@@ -10,6 +10,8 @@ const mock_navBarVisibleFlag = true;
 
 const mockIsNavBarVisible = jest.fn(() => mock_navBarVisibleFlag);
 
+const mockIsOrientationCompatible = jest.fn(() => true);
+
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),
 }));
@@ -21,6 +23,7 @@ jest.mock("../../RouteManager", () => ({
 jest.mock(
   "@applicaster/zapp-react-native-utils/appUtils/orientationHelper",
   () => ({
+    isOrientationCompatible: mockIsOrientationCompatible,
     allowedOrientationsForScreen: jest.fn(),
     getOrientation: jest.fn(),
     getScreenOrientation: jest.fn(),

package/Components/Screen/index.tsx

@@ -3,6 +3,10 @@ import React from "react";
 import * as R from "ramda";
 import { View } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  isOrientationCompatible,
+  useGetScreenOrientation,
+} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
@@ -69,7 +73,11 @@ export function Screen(_props: Props) {
   const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
   const insets = useSafeAreaInsets();
 
-  const { width: screenWidth } = useDimensions("screen", {
+  const {
+    width: screenWidth,
+    height,
+    deviceInfo,
+  } = useDimensions("screen", {
     fullDimensions: true,
   });
 
@@ -81,6 +89,13 @@ export function Screen(_props: Props) {
 
   const { title } = useNavbarState();
 
+  const isTablet = deviceInfo?.isTablet;
+
+  const { appData } = usePickFromState(["appData"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
+
+  const layoutData = { isTablet, isTabletPortrait, width: screenWidth, height };
+
   const hasMenu =
     resolveNavigationPlugin({
       category: "menu",
@@ -143,6 +158,19 @@ export function Screen(_props: Props) {
 
   useScreenOrientationHandler({ screenData: targetScreenData });
 
+  const orientation = useGetScreenOrientation(targetScreenData);
+
+  // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
+  // This saves unnecessary re-renders and user will not see distorted aspect screen.
+  if (
+    !isOrientationCompatible({
+      orientation,
+      layoutData,
+    })
+  ) {
+    return null;
+  }
+
   return (
     <ScreenContextProvider pathname={pathname}>
       <View style={style}>

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/Transitioner/Scene.tsx

@@ -7,6 +7,7 @@ import {
 } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { PathnameContext } from "../../Contexts/PathnameContext";
+import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
 
 type Props = {
   children: any;
@@ -16,6 +17,8 @@ type Props = {
   animating: boolean;
   contentStyle: ViewStyle;
   pathname: string;
+  isActive: boolean;
+  screenData: NavigationScreenData;
 };
 
 /**
@@ -38,34 +41,36 @@ export function Scene({
   animating,
   contentStyle,
   pathname,
+  isActive = false,
+  screenData,
 }: Props) {
+  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
+
+  React.useLayoutEffect(() => {
+    if (isActive) {
+      setInitialScreenData(screenData);
+    }
+  }, [screenData, isActive]);
+
   const frame = useSafeAreaFrame();
   const { height, width } = useWindowDimensions();
 
-  if (overlayStyle && animating) {
-    // Safe frame takes too long to update,
-    // so we can not rely on it there, and use height and width instead.
-    return (
-      <Animated.View
-        pointerEvents={pointerEvents}
-        style={[style, contentStyle, { height, width }]}
-      >
-        <PathnameContext.Provider value={pathname}>
-          {children}
-        </PathnameContext.Provider>
-        <Animated.View style={overlayStyle} />
-      </Animated.View>
-    );
-  }
+  // Safe frame takes too long to update,
+  // so we can not rely on it there, and use height and width instead.
+  const isAnimating = animating && overlayStyle;
+  const dimensions = isAnimating ? { height, width } : frame;
 
   return (
     <Animated.View
       pointerEvents={pointerEvents}
-      style={[style, contentStyle, frame]}
+      style={[style, contentStyle, dimensions]}
     >
-      <PathnameContext.Provider value={pathname}>
-        {children}
-      </PathnameContext.Provider>
+      <ScreenDataContext.Provider value={initialScreenData}>
+        <PathnameContext.Provider value={pathname}>
+          {children}
+        </PathnameContext.Provider>
+      </ScreenDataContext.Provider>
+      {isAnimating && <Animated.View style={overlayStyle} />}
     </Animated.View>
   );
 }

package/Components/Transitioner/Transitioner.tsx

@@ -4,10 +4,7 @@ import * as R from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
-import {
-  getScreenOrientation,
-  isOrientationCompatible,
-} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+
 import {
   getSceneByRoute,
   shouldSkipAnimationForPreviousWebViewScene,
@@ -277,33 +274,25 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // so only a single scene should be rendered,
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
-    const { contentStyle, layoutData } = this.props;
-    const screenData = scenes[to.index]?.children?.props?.screenData;
-
-    const orientation = getScreenOrientation({
-      screenData,
-      layoutData,
-    });
+    const { contentStyle } = this.props;
+    const screenData = this.props.children.props.screenData;
+    const pathname = scenes[to.index].key;
 
-    // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
-    // This saves unnecessary re-renders and user will not see distorted aspect screen.
     return (
       <View style={styles.container}>
-        {scenes[to.index] &&
-          isOrientationCompatible({
-            orientation,
-            layoutData,
-          }) && (
-            <Scene
-              {...{ style: to.style }}
-              pathname={scenes[to.index].key}
-              contentStyle={contentStyle}
-              key={scenes[to.index].key}
-              screenUniqueId={scenes[to.index].screenUniqueId}
-            >
-              {scenes[to.index].children}
-            </Scene>
-          )}
+        {scenes[to.index] && (
+          <Scene
+            {...{ style: to.style }}
+            pathname={pathname}
+            isActive={pathname === this.props.navigator.currentRoute}
+            contentStyle={contentStyle}
+            key={scenes[to.index].key}
+            screenUniqueId={scenes[to.index].screenUniqueId}
+            screenData={screenData}
+          >
+            {scenes[to.index].children}
+          </Scene>
+        )}
       </View>
     );
   }
@@ -319,12 +308,14 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
+        isActive={scenes[from.index].key === this.props.navigator.currentRoute}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
         animating={this.state.animating}
         contentStyle={contentStyle}
         screenUniqueId={scenes[from.index].screenUniqueId}
+        screenData={scenes[from.index].children.props.screenData}
       >
         {scenes[from.index].children}
       </Scene>
@@ -333,12 +324,14 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
+        isActive={scenes[to.index].key === this.props.navigator.currentRoute}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}
         animating={this.state.animating}
         contentStyle={contentStyle}
         screenUniqueId={scenes[to.index].screenUniqueId}
+        screenData={this.props.children.props.screenData}
       >
         {scenes[to.index].children}
       </Scene>

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -21,7 +21,9 @@ exports[`<Scene /> renders correctly 1`] = `
     ]
   }
 >
-  <ContextProvider />
+  <ContextProvider>
+    <ContextProvider />
+  </ContextProvider>
 </ForwardRef(AnimatedComponentWrapper)>
 `;
 
@@ -43,7 +45,9 @@ exports[`<Scene /> renders the overlay while animating 1`] = `
     ]
   }
 >
-  <ContextProvider />
+  <ContextProvider>
+    <ContextProvider />
+  </ContextProvider>
   <ForwardRef(AnimatedComponentWrapper)
     style={
       Object {

package/Components/Transitioner/__tests__/__snapshots__/transitioner.test.js.snap

@@ -10,6 +10,7 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
   }
 >
   <Scene
+    isActive={true}
     screenUniqueId="mocked-uuid"
   >
     <View

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) => {
@@ -351,6 +365,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
         item,
         playerId: this.currentlyPlaying?.playerId,
         primaryPlayerId: this.primaryPlayer?.playerId,
+        entry: item.getPlayer().getEntry(),
       },
     });
   };
@@ -385,6 +400,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
           item,
           playerId: this.currentlyPlaying?.playerId,
           primaryPlayerId: this.primaryPlayer?.playerId,
+          entry: item.getPlayer().getEntry(),
         },
       });
   };
@@ -419,6 +435,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
         error,
         playerId: currentItem?.playerId,
         primaryPlayerId: currentItem?.playerId,
+        entry: item.getPlayer().getEntry(),
       },
     });
   };