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

package/Components/VideoModal/PlayerWrapper.tsx

@@ -14,12 +14,13 @@ import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 
 import {
-  AnimationComponent,
-  ComponentAnimationType,
   AnimatedScrollModal,
   AnimatedVideoPlayerComponent,
+  AnimationComponent,
+  ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type DimensionsT = {
@@ -96,7 +97,7 @@ const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   }
 
   if (!isInlineModal && Platform.OS === "android") {
-    return ["top", "left", "right", "bottom"];
+    return [];
   }
 
   return ["top"];
@@ -161,7 +162,7 @@ export const PlayerWrapper = (props: Props) => {
       width: isInlineModal && docked ? undefined : baseDimensions.width,
       aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
-    [baseDimensions, isInlineModal, pip, docked]
+    [baseDimensions, isInlineModal, pip]
   );
 
   const containerDimensions: DimensionsT = React.useMemo(
@@ -180,65 +181,71 @@ export const PlayerWrapper = (props: Props) => {
     [containerDimensions, playerDimesionsHack]
   );
 
+  const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
+
   return (
-    <WrapperView
-      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={[
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimesionsHack,
-      ]}
-    >
-      <AnimationComponent
-        animationType={ComponentAnimationType.moveUpComponent}
-        additionalData={{ saveArea: true }}
-        style={directionStyles(isTabletLandscape)}
-      >
-        <ScreenContextProvider pathname={"videoModal"}>
-          <PathnameContext.Provider value={"videoModal"}>
-            <View
-              testID={`${entry?.id}-player-container`}
-              style={[
-                defaultStyles.playerContainer,
-                containerDimensions,
-                containerStyle,
-                playerDimesionsHack,
-              ]}
-            >
-              <AnimationComponent
-                animationType={ComponentAnimationType.moveUpComponent}
-                style={isTabletLandscape ? defaultStyles.flex : undefined}
-                additionalData={{
-                  useLayoutMeasure: isTabletLandscape,
-                  disableAnimatedComponent: !isTabletLandscape,
-                  resetAnimationValue: isTabletLandscape && docked,
-                }}
-              >
-                <AnimatedVideoPlayerComponent>
-                  {children(childrenStyles)}
-                </AnimatedVideoPlayerComponent>
-              </AnimationComponent>
-            </View>
-            <AnimatedScrollModal>
-              {isInlineModal ? (
-                <AnimationComponent
-                  animationType={ComponentAnimationType.componentFade}
-                  style={defaultStyles.flex}
+    <ScreenContextProvider pathname={pathname}>
+      <PathnameContext.Provider value={pathname}>
+        <WrapperView
+          edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+          style={[
+            safeAreaStyles(configuration, isTablet),
+            style,
+            playerDimesionsHack,
+          ]}
+        >
+          <AnimationComponent
+            animationType={ComponentAnimationType.moveUpComponent}
+            additionalData={{ saveArea: true }}
+            style={directionStyles(isTabletLandscape)}
+          >
+            <ScreenContextProvider pathname={pathname}>
+              <PathnameContext.Provider value={pathname}>
+                <View
+                  testID={`${entry?.id}-player-container`}
+                  style={[
+                    defaultStyles.playerContainer,
+                    containerDimensions,
+                    containerStyle,
+                    playerDimesionsHack,
+                  ]}
                 >
-                  <PlayerDetails
-                    configuration={configuration}
-                    style={defaultStyles.playerDetails}
-                    entry={entry}
-                    isTabletLandscape={isTabletLandscape}
-                  />
-                </AnimationComponent>
-              ) : (
-                <View style={defaultStyles.playerDetails} />
-              )}
-            </AnimatedScrollModal>
-          </PathnameContext.Provider>
-        </ScreenContextProvider>
-      </AnimationComponent>
-    </WrapperView>
+                  <AnimationComponent
+                    animationType={ComponentAnimationType.moveUpComponent}
+                    style={isTabletLandscape ? defaultStyles.flex : undefined}
+                    additionalData={{
+                      useLayoutMeasure: isTabletLandscape,
+                      disableAnimatedComponent: !isTabletLandscape,
+                      resetAnimationValue: isTabletLandscape && docked,
+                    }}
+                  >
+                    <AnimatedVideoPlayerComponent>
+                      {children(childrenStyles)}
+                    </AnimatedVideoPlayerComponent>
+                  </AnimationComponent>
+                </View>
+                <AnimatedScrollModal>
+                  {isInlineModal ? (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.componentFade}
+                      style={defaultStyles.flex}
+                    >
+                      <PlayerDetails
+                        configuration={configuration}
+                        style={defaultStyles.playerDetails}
+                        entry={entry}
+                        isTabletLandscape={isTabletLandscape}
+                      />
+                    </AnimationComponent>
+                  ) : (
+                    <View style={defaultStyles.playerDetails} />
+                  )}
+                </AnimatedScrollModal>
+              </PathnameContext.Provider>
+            </ScreenContextProvider>
+          </AnimationComponent>
+        </WrapperView>
+      </PathnameContext.Provider>
+    </ScreenContextProvider>
   );
 };

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -25,6 +25,13 @@ jest.mock("react-native-gesture-handler");
 
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
   useIsTablet,
 }));

package/Components/Viewport/ViewportTracker/ViewportTracker.tsx

@@ -6,23 +6,23 @@ import { callOnChildren } from "../utils";
 
 export function ViewportTracker(props) {
   const viewportEvents = useViewportEventsContext();
-  const { children } = props;
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
-  const [offsetX, setOffsetX] = React.useState(0);
-  const [offsetY, setOffsetY] = React.useState(0);
   const [nodeHandle, setNodeHandle] = React.useState(null);
 
-  const assignRef = React.useCallback(
-    (ref) => {
-      children?.ref?.(ref);
-      setNodeHandle(findNodeHandle(ref));
-    },
-    [children]
-  );
+  const childrenRef = React.useRef(props.children);
+
+  const dimensionsRef = React.useRef({ width: 0, height: 0 });
+  const offsetRef = React.useRef({ offsetX: 0, offsetY: 0 });
+
+  const assignRef = React.useCallback((ref) => {
+    childrenRef.current?.ref?.(ref);
+    setNodeHandle(findNodeHandle(ref));
+  }, []);
 
   const onViewportChange = React.useCallback(
-    (event, shouldMeasureLayout = true) => {
+    ({
+      event = { ...dimensionsRef.current, ...offsetRef.current },
+      shouldMeasureLayout = true,
+    } = {}) => {
       if (nodeHandle && event?.width > 0 && event?.height > 0) {
         viewportEvents?.notify?.({
           parentHandle: nodeHandle,
@@ -36,54 +36,45 @@ export function ViewportTracker(props) {
 
   const onLayout = React.useCallback(
     (event) => {
-      callOnChildren(children, "onLayout", event);
-      setWidth(event?.nativeEvent?.layout?.width);
-      setHeight(event?.nativeEvent?.layout?.height);
+      callOnChildren(childrenRef.current, "onLayout", event);
+      dimensionsRef.current = event?.nativeEvent?.layout;
 
-      onViewportChange({
-        width: event?.nativeEvent?.layout?.width,
-        height: event?.nativeEvent?.layout?.height,
-        offsetX,
-        offsetY,
-      });
+      onViewportChange();
     },
-    [offsetX, offsetY, children, onViewportChange]
+    [onViewportChange]
   );
 
   const onContentSizeChange = React.useCallback(
     (contentWidth, contentHeight) => {
       callOnChildren(
-        children,
+        childrenRef.current,
         "onContentSizeChange",
         contentWidth,
         contentHeight
       );
 
-      onViewportChange({ width, height, offsetX, offsetY });
+      onViewportChange();
     },
-    [onViewportChange, children, width, height, offsetX, offsetY]
+    [onViewportChange]
   );
 
   const onScroll = React.useCallback(
     (event) => {
-      callOnChildren(children, "onScroll", event);
-      setOffsetX(event?.nativeEvent?.contentOffset?.x);
-      setOffsetY(event?.nativeEvent?.contentOffset?.y);
+      callOnChildren(childrenRef.current, "onScroll", event);
+      offsetRef.current = event?.nativeEvent?.contentOffset;
 
-      onViewportChange(
-        {
-          width,
-          height,
-          offsetX: event?.nativeEvent?.contentOffset?.x,
-          offsetY: event?.nativeEvent?.contentOffset?.y,
-        },
-        false
-      );
+      onViewportChange({
+        shouldMeasureLayout: false,
+      });
     },
-    [onViewportChange, width, height, children]
+    [onViewportChange]
   );
 
-  return React.cloneElement(React.Children.only(children), {
+  React.useEffect(() => {
+    childrenRef.current = props.children;
+  }, [props.children]);
+
+  return React.cloneElement(React.Children.only(props.children), {
     ref: assignRef,
     onLayout,
     onContentSizeChange,

package/Contexts/ScreenDataContext/index.ts

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ScreenDataContext = React.createContext<any>(null);

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

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,67 +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 { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-
-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) {
-      focusManager.setFocusOnContent(currentRoute);
-
-      return;
-    }
-
-    if (initialFocus.onMenu) {
-      focusManager.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,174 +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 isPlayer = (routeState): boolean => {
-  const pluginType = pathOr(
-    "unknown_plugin_type",
-    ["state", "screen", "plugin_type"],
-    routeState
-  );
-
-  return pluginType === "player";
-};
-
-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 isNavBarVisible = !isPlayer(routeState);
-
-  const screenData =
-    screenType === "hooks"
-      ? 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>
-  );
-};