@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4837064762 → 12.0.0-alpha.4885205607

package/Components/MasterCell/utils/index.ts

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo } from "react";
 import * as R from "ramda";
+import validateColor from "validate-color";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -9,6 +10,13 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
 import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { getCellState } from "../../Cell/utils";
+import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+const log = createLogger({
+  category: "Debug",
+  subsystem: "MasterCellUtils",
+});
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -47,44 +55,37 @@ export const hasElementsSpecificViewType = (viewType) => (elements) => {
   return R.any(hasElementSpecificViewType(viewType))(elements);
 };
 
-const isColorOrEmpty = (value) =>
-  value === null ||
-  value === undefined ||
-  value === "" ||
-  value.startsWith("#") ||
-  value.startsWith("rgba") ||
-  value === "transparent";
-
 function resolveColorForProp(entry, style, colorProp) {
-  const colorValue = style[colorProp];
+  const colorFromProp = style[colorProp];
+  const nestedEntryValue = R.path(colorFromProp.split("."), entry);
+
+  log.log_error("resolvecolor resolveColorforProp", {
+    colorFromProp,
+    nestedEntryValue,
+    entry,
+    style,
+    colorProp,
+  });
 
-  if (isColorOrEmpty(colorValue)) {
-    return style;
+  if (
+    nestedEntryValue === undefined &&
+    !validateColor(colorFromProp.replace(".00", "")) // https://github.com/dreamyguy/validate-color/issues/44
+  ) {
+    logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 
-  const pathParts = colorValue.split(".");
-  let nestedEntryValue = entry;
-
-  for (const part of pathParts) {
-    if (nestedEntryValue === null || typeof nestedEntryValue !== "object") {
-      logWarning(colorValue, style, entry, nestedEntryValue);
-
-      return style;
-    }
-
-    nestedEntryValue = nestedEntryValue[part];
-  }
+  const colorValue = getColorFromData({
+    data: entry,
+    valueFromLayout: colorFromProp,
+  });
 
-  if (nestedEntryValue === undefined) {
-    logWarning(colorValue, style, entry, nestedEntryValue);
+  if (!colorValue) {
+    logWarning(colorProp, style, entry, colorValue);
 
     return style;
   }
 
-  // After successful traversal, set the value.
-  style[colorProp] = nestedEntryValue;
-
-  return style;
+  return { ...style, [colorProp]: colorValue };
 }
 
 export function resolveColor(entry, style) {
@@ -96,6 +97,8 @@ export function resolveColor(entry, style) {
   const styleKeys = Object.keys(style);
   const colorKeys = styleKeys.filter((key) => /color/i.test(key));
 
+  log.log_error("resolvecolor resolveColor", { colorKeys, entry, style });
+
   return colorKeys.reduce((acc, value) => {
     return { ...style, ...resolveColorForProp(entry, acc, value) };
   }, style);

package/Components/MeasurmentsPortal/BasicMeasurementsPortal.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
+import { MeasurementPortalContext } from "./MeasurementsPortal";
 
 type Props = {
   Component: React.ElementType;
@@ -19,13 +20,16 @@ const _MeasurementsPortal = (
   { Component, onLayout, componentProps, containerStyle }: Props,
   ref
 ) => (
-  <View
-    onLayout={onLayout}
-    style={[styles.container, containerStyle]}
-    ref={ref}
-  >
-    <Component {...componentProps} />
-  </View>
+  // hack for cell to determine if cell is in measurement mode
+  <MeasurementPortalContext.Provider value={{}}>
+    <View
+      onLayout={onLayout}
+      style={[styles.container, containerStyle]}
+      ref={ref}
+    >
+      <Component {...componentProps} />
+    </View>
+  </MeasurementPortalContext.Provider>
 );
 
 export const MeasurementsPortal = React.forwardRef(_MeasurementsPortal);

package/Components/MeasurmentsPortal/MeasurementsPortal.tsx

@@ -35,7 +35,16 @@ const MeasurementsPortal = ({ Component, onLayout, componentProps }: Props) => {
   );
 };
 
-const MeasurementPortalContext = React.createContext(null);
+type MeasurementPortalContextType = {
+  measureComponent?: (
+    comp: React.ElementType,
+    props: Record<any, any>
+  ) => Promise<any>;
+  measuringInProgress?: boolean;
+};
+
+const MeasurementPortalContext =
+  React.createContext<null | MeasurementPortalContextType>(null);
 
 const MeasurementsPortalContextProvider = ({ children }) => {
   const Component = React.useRef(View);

package/Components/Navigator/StackNavigator.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { isEmpty } from "ramda";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+
+import { Screen } from "../Screen/TV/index.web";
+import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  Components: Components;
+};
+
+export const StackNavigator = ({ Components }: Props) => {
+  const { mainStack } = useNavigation();
+
+  const renderScreen = ({ route, state }, index) => {
+    const pathAttributes = getPathAttributes({ pathname: route });
+
+    if (isEmpty(pathAttributes)) {
+      return null;
+    }
+
+    // HACK: Adding index to route to avoid conflicts in the navigator.
+    // Startup hooks are all using PUSH navigation action to navigate, but their routes are always like root routes.
+    // This means some hooks can have the same routes, e.g., ["hooks/context-setter", "/hooks/login-plug", "hooks/context-setter"].
+    const routeId = `${route}--${index}`;
+
+    return (
+      <FocusableGroup
+        id={route}
+        preferredFocus={isLast(index, mainStack.length)}
+        excludeFromFocusSearching
+        key={routeId}
+      >
+        <ScreenDataContext.Provider value={state}>
+          <PathnameContext.Provider value={route}>
+            <ScreenContextProvider pathname={route}>
+              <Screen route={route} Components={Components} />
+            </ScreenContextProvider>
+          </PathnameContext.Provider>
+        </ScreenDataContext.Provider>
+      </FocusableGroup>
+    );
+  };
+
+  return <>{mainStack.map(renderScreen)}</>;
+};

package/Components/Navigator/index.ts

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

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -124,6 +124,7 @@ const nativeStyles = {
   playerScreen: {
     flex: 1,
     backgroundColor: "black",
+    overflow: "hidden",
   },
   playerWrapper: {
     flex: 1,
@@ -252,6 +253,7 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     showNavBar(true);
+    navigator.goBack();
   }, [isModal, navigator.goBack, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
@@ -673,6 +675,7 @@ const PlayerContainerComponent = (props: Props) => {
                         setNextVideoPreloadThresholdPercentage={
                           setNextVideoPreloadThresholdPercentage
                         }
+                        startComponentsAnimation={startComponentsAnimation}
                       >
                         {renderApplePlayer(applePlayerProps)}
                       </Player>

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet, Platform, Animated, FlatList } from "react-native";
+import { View, StyleSheet, Platform, FlatList } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -217,7 +217,7 @@ function ComponentsMapComponent(props: Props) {
 
     const { height: headerHeight, scrollState } = navBarStore.getState();
 
-    const offsetY = nativeEvent.contentOffset.y;
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
 
     if (
       !(scrollState === 0 || scrollState === -headerHeight) &&
@@ -240,7 +240,7 @@ function ComponentsMapComponent(props: Props) {
   const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
     const { height: headerHeight, scrollState } = navBarStore.getState();
 
-    const offsetY = nativeEvent.contentOffset.y;
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
 
     if (
       !(scrollState === 0 || scrollState === -headerHeight) &&
@@ -260,6 +260,26 @@ function ComponentsMapComponent(props: Props) {
     }
   }, []);
 
+  const onScroll = React.useCallback((event) => {
+    const {
+      nativeEvent: {
+        contentOffset: { y },
+        layoutMeasurement: { height },
+        contentSize: { height: contentHeight },
+      },
+    } = event;
+
+    if (y >= 0 && y + height <= contentHeight) {
+      scrollY.setValue(y);
+    } else {
+      if (y <= 0) {
+        scrollY.setValue(0);
+      } else if (y + height > contentHeight) {
+        scrollY.setValue(contentHeight - height);
+      }
+    }
+  }, []);
+
   if (shouldShowLoadingError) {
     return <RiverError />;
   }
@@ -298,20 +318,7 @@ function ComponentsMapComponent(props: Props) {
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
             onScrollBeginDrag={onScrollBeginDrag}
-            onScroll={Animated.event(
-              [
-                {
-                  nativeEvent: {
-                    contentOffset: {
-                      y: scrollY,
-                    },
-                  },
-                },
-              ],
-              {
-                useNativeDriver: false,
-              }
-            )}
+            onScroll={onScroll}
             onMomentumScrollEnd={_onMomentumScrollEnd}
             onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}

package/Components/River/RefreshControl.tsx

@@ -1,5 +1,9 @@
 import * as React from "react";
-import { RefreshControl as RNRefreshControl } from "react-native";
+import {
+  Platform,
+  RefreshControl as RNRefreshControl,
+  StyleSheet,
+} from "react-native";
 import * as R from "ramda";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
@@ -8,10 +12,30 @@ import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-nativ
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useDispatch } from "react-redux";
+import { useShallow } from "zustand/react/shallow";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
 const BELOW_DEFAULT_COLOR = "white";
+const BASE_INDICATOR_HEIGHT = 40;
+const BASE_INDICATOR_OFFSET = 16;
+
+/** Return spacing required to position indicator below the navbar bottom line (Android only) */
+const getRefreshControlOffset = () => {
+  return Platform.OS === "ios"
+    ? 0
+    : BASE_INDICATOR_HEIGHT + BASE_INDICATOR_OFFSET;
+};
+
+const styles = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-color-literals
+  control: {
+    zIndex: 1,
+    backgroundColor: "transparent",
+  },
+});
 
 const getBrightness = (RGBcolor) => {
   const RGBvalues = RGBcolor.substring(
@@ -91,6 +115,34 @@ export const usePullToRefresh = (
   };
 };
 
+/** Returns the offset for the progress view of the RefreshControl component
+ *  based on navbar content position */
+export const useGetProgressViewOffset = () => {
+  const { _navBarStore } = useScreenContextV2();
+  const { top } = useSafeAreaInsets();
+
+  const offset = getRefreshControlOffset();
+
+  const { height, contentPosition } = _navBarStore(
+    useShallow(({ contentPosition, height }) => ({ contentPosition, height }))
+  );
+
+  if (height === 0) {
+    return offset;
+  }
+
+  switch (contentPosition) {
+    case "on_bottom_status_bar":
+      // navbar height
+      return offset + height;
+    case "on_top_screen":
+      // navbar height + status bar height
+      return offset + height + top;
+    default:
+      return offset;
+  }
+};
+
 export function RefreshControl(props: {
   pullToRefreshPipesV1RefreshingStateUpdater?: (refreshing: boolean) => void;
   refreshingPipesV1?: boolean;
@@ -211,6 +263,7 @@ export function RefreshControl(props: {
       refreshing={refreshing}
       onRefresh={onRefreshHandler}
       colors={[preparedIndicatorColor]}
+      progressViewOffset={useGetProgressViewOffset()}
       progressBackgroundColor={preparedIndicatorBackgroundColor}
       // @ts-ignore in RN68 this `size` became string
       size={indicatorSize}
@@ -222,6 +275,7 @@ export function RefreshControl(props: {
           : null
       }
       titleColor={preparedTitleUnderIndicatorColor}
+      style={styles.control}
     />
   );
 }

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]);
+};