@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5135101838 → 12.0.0-alpha.5208030571

package/Components/BaseFocusable/index.tsx

@@ -73,7 +73,7 @@ export class BaseFocusable<
   getId(props?: { id: string; groupId: string }) {
     const { id, groupId = null } = props || this.props;
 
-    return groupId ? `${groupId}-${id}` : id;
+    return groupId ? `groupId:${groupId}___${id}` : id;
   }
 
   getRect() {

package/Components/Cell/Cell.tsx

@@ -207,7 +207,11 @@ export class CellComponent extends React.Component<Props> {
 
     const { id } = item;
 
-    const focusableId = R.join("-", [component?.id, id, index]);
+    const focusableId = R.join("-", [
+      `componentId:${component?.id}`,
+      `id:${id}`,
+      `index:${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/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -50,7 +50,11 @@ describe("getTransformedPreset should return the passed components if smartCompo
       );
 
       expect(transformed_preset).toBeDefined();
-      expect(transformed_preset.id).toEqual("comp10"); // id was transformed
+
+      expect(transformed_preset.id).toEqual(
+        `${mockComp.id}-${mockPreset.feed_url}-0`
+      ); // id was transformed
+
       expect(transformed_preset.data.source).toEqual(mockPreset.feed_url); // source was replaced with preset feed_url.
     });
   });
@@ -117,7 +121,10 @@ describe("getTransformedPreset should return the passed components if smartCompo
 
       expect(Array.isArray(result)).toBe(true);
       expect(result).toHaveLength(2);
-      expect(result[0].id).toEqual("smart10");
+
+      expect(result[0].id).toEqual(
+        `${mockSmartComp.id}-${mockFeeds.preset_source.data.entry[0].feed_url}-0`
+      );
 
       expect(result[0].data.source).toEqual(
         mockFeeds.preset_source.data.entry[0].feed_url
@@ -287,7 +294,7 @@ describe("getTransformedPreset should return the passed components if smartCompo
         mockComponents[0],
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[1].id + 1,
+          id: `${mockComponents[1].id}-${mockPresetEntry[0].feed_url}-1`,
           data: { source: mockPresetEntry[0].feed_url },
         },
       ];
@@ -344,12 +351,12 @@ describe("getTransformedPreset should return the passed components if smartCompo
       const mockTransformedComponents = [
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[0].id + 0,
+          id: `${mockComponents[0].id}-${mockPresetEntry1[0].feed_url}-0`,
           data: { source: mockPresetEntry1[0].feed_url },
         },
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[1].id + 1,
+          id: `${mockComponents[1].id}-${mockPresetEntry2[0].feed_url}-1`,
           data: { source: mockPresetEntry2[0].feed_url },
         },
       ];
@@ -412,7 +419,7 @@ describe("getTransformedPreset should return the passed components if smartCompo
     const mockTransformedComponents = mockPresetEntry.map((preset, i) => {
       return {
         ...mockLayoutPresets[preset.preset_name],
-        id: mockComponents[0].id + i,
+        id: `${mockComponents[0].id}-${preset.feed_url}-${i}`,
         data: { source: preset.feed_url },
       };
     });

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -41,7 +41,7 @@ export const getTransformedPreset = (
   }
 
   const updatedPresetComponent = produce(presetComponent, (draft) => {
-    draft.id = `${componentId}${index}`;
+    draft.id = `${componentId}-${preset?.feed_url}-${index}`;
     draft.data.source = preset?.feed_url;
 
     if (draft.ui_components) {

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

@@ -1,11 +1,15 @@
 import * as React from "react";
 import * as R from "ramda";
+import { View, StyleSheet } from "react-native";
 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 { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import {
   getNavigationProps,
+  getPathAttributes,
   resolveNavigationPlugin,
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
@@ -17,9 +21,25 @@ import { ScreenContainer } from "./ScreenContainer";
 import { TransitionOverlay } from "./TransitionOverlay";
 
 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 { FocusableGroup } from "../../FocusableGroup";
+import { Screen } from "../../Screen/TV/index.web";
+
+export const ScreenDataContext = React.createContext(null);
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    width: 1920,
+    height: 1080,
+    backgroundColor: "black",
+    // opacity: 0.5,
+
+    borderWidth: 4,
+    borderColor: "magenta",
+  },
+});
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -27,16 +47,73 @@ type Components = {
 };
 
 type ComponentsExtraProps = {
-  Background?: Record<string, any>;
   NavBar?: Record<string, any>;
+  Background?: Record<string, any>;
 };
 
 type Props = {
   Components: Components;
-  ComponentsExtraProps?: ComponentsExtraProps;
-  children: React.ReactNode;
+  componentsExtraProps?: ComponentsExtraProps;
+};
+
+const StackNavigator = ({ Components }: Props) => {
+  // @ts-ignore
+  const { mainStack, currentRoute } = useNavigation();
+
+  // console.log("debug_2", "DEBUG", { mainStack });
+
+  const renderScreen = ({ route, action, key, state }, index) => {
+    const pathAttributes = getPathAttributes({ pathname: route });
+
+    if (R.isEmpty(pathAttributes)) {
+      return null;
+    }
+
+    // console.log("debug_2", "StackNavigator - renderScreen", {
+    //   index,
+    //   route,
+    //   state,
+    //   key,
+    //   action,
+    // });
+
+    const id = `${route}`;
+
+    return (
+      <FocusableGroup
+        id={id}
+        preferredFocus={route === currentRoute}
+        excludeFromFocusSearching
+        key={id}
+      >
+        <View style={styles.container}>
+          <ScreenDataContext.Provider value={state}>
+            <PathnameContext.Provider value={route}>
+              <Screen route={route} Components={Components} />
+            </PathnameContext.Provider>
+          </ScreenDataContext.Provider>
+        </View>
+      </FocusableGroup>
+    );
+  };
+
+  return mainStack.map(renderScreen);
+};
+
+const TransitionerTV = ({ componentsExtraProps, Components }: Props) => {
+  return (
+    <>
+      <ScreenLayoutContextProvider>
+        <StackNavigator
+          componentsExtraProps={componentsExtraProps}
+          Components={Components}
+        />
+      </ScreenLayoutContextProvider>
+    </>
+  );
 };
 
+// @ts-ignore
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
   const theme = useTheme();
@@ -98,32 +175,54 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   }
 
   return (
-    <LayoutContainer>
-      <ScreenLayoutContextProvider>
-        <Components.Background
-          backgroundColor={backgroundColor}
-          backgroundImageUrl={backgroundImageUrl}
-          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-        >
-          {!isTVOS ? navBarContainer : null}
-          {navBarReady ? (
-            /**
+    // @ts-ignore
+    <TransitionerTV
+      componentsExtraProps={ComponentsExtraProps}
+      Components={Components}
+    >
+      <LayoutContainer>
+        <ScreenLayoutContextProvider>
+          <Components.Background
+            backgroundColor={backgroundColor}
+            backgroundImageUrl={backgroundImageUrl}
+            {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
+          >
+            {!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)
              **/
-            <PathnameContext.Provider value={navigator.currentRoute}>
-              <ScreenContainer>{children}</ScreenContainer>
-            </PathnameContext.Provider>
-          ) : null}
-          {/** Render NavBarContainer over ScreenContainer to let tvOS native
+              <PathnameContext.Provider value={navigator.currentRoute}>
+                <ScreenContainer>{children}</ScreenContainer>
+              </PathnameContext.Provider>
+            ) : null}
+            {/** Render NavBarContainer over ScreenContainer to let tvOS native
           focus manager works correctly to focus nav bar items first **/}
-          {isTVOS ? navBarContainer : null}
-          <TransitionOverlay />
-        </Components.Background>
-      </ScreenLayoutContextProvider>
-    </LayoutContainer>
+            {isTVOS ? navBarContainer : null}
+            <TransitionOverlay />
+          </Components.Background>
+        </ScreenLayoutContextProvider>
+      </LayoutContainer>
+    </TransitionerTV>
   );
 };
 
 export default Layout;
+
+/// Transitioner:
+/*
+Component: Transitioner
+Responsibilities:
+- Transitione between screens.
+Tehere is no transition on Tv so no need for transitioner.
+
+Component: StackNavigator
+Responsibilities:
+- Render the screens in the stack.
+- Render the NavBar? I guess navbar should be part of the screen
+- Render the screen.
+
+Q
+ */

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -43,14 +43,16 @@ function Image({
     [source, error]
   );
 
+  const _source = shouldRenderImg
+    ? withDimensions(source)
+    : defaultPlaceHolderImage;
+
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={
-        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
-      }
+      source={_source?.uri ? _source : undefined}
       {...R.omit(["source"], otherProps)}
     />
   );

package/Components/MasterCell/DefaultComponents/__tests__/image.test.js

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
+    expect(testInstance.findByType(Image).props.source).toBeUndefined();
   });
 });

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -54,7 +54,10 @@ import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -65,6 +68,7 @@ type Props = {
   mode?: VideoModalMode;
   loadPipesData: (url: string, options: {}) => void;
   disableCastAction?: boolean;
+  groupId?: string;
 };
 
 type ScreenStyles = ZappRiver["styles"] & {
@@ -197,6 +201,7 @@ const PlayerContainerComponent = (props: Props) => {
     style: videoStyle,
     mode = VideoModalMode.MAXIMIZED,
     disableCastAction = false,
+    groupId,
   } = props;
 
   // Hooks
@@ -231,6 +236,9 @@ const PlayerContainerComponent = (props: Props) => {
   const screenData = useTargetScreenData(item);
   const { setVisible: showNavBar } = useSetNavbarState();
 
+  const { isActiveGesture, startComponentsAnimation, setPlayerAnimationState } =
+    useModalAnimationContext();
+
   const playerEvent = (event, ...args) => {
     playerManager.invokeHandler(event, ...args);
   };
@@ -243,7 +251,6 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
-    navigator.goBack();
     showNavBar(true);
   }, [isModal, navigator.goBack, showNavBar]);
 
@@ -448,7 +455,7 @@ const PlayerContainerComponent = (props: Props) => {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
       } else {
-        navigator.minimiseVideoModal();
+        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
@@ -600,9 +607,6 @@ const PlayerContainerComponent = (props: Props) => {
     pluginConfiguration,
   };
 
-  const { isActiveGesture, startComponentsAnimation } =
-    useModalAnimationContext();
-
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -626,6 +630,7 @@ const PlayerContainerComponent = (props: Props) => {
                 style={styles.focusableGroup}
                 preferredFocus
                 shouldUsePreferredFocus
+                groupId={groupId}
               >
                 {/* Video player and components */}
                 <View

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, FlatList, StyleSheet, Platform } from "react-native";
+import { View, StyleSheet, Platform, Animated, FlatList } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -21,7 +21,8 @@ import {
 import { useScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData";
 import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ComponentsMapWrapper";
-import { useScreenScrollStore } from "@applicaster/zapp-react-native-utils/screenState";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useShallow } from "zustand/react/shallow";
 
 type Props = {
   feed: ZappFeed;
@@ -41,8 +42,10 @@ const styles = StyleSheet.create({
   },
 });
 
-const scrollIndicatorInsets = { right: 1 };
+const getNearestValue = (value, optionA, optionB) =>
+  Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
+const scrollIndicatorInsets = { right: 1 };
 const keyExtractor = R.compose(String, R.prop("id"));
 
 function ComponentsMapComponent(props: Props) {
@@ -60,6 +63,7 @@ function ComponentsMapComponent(props: Props) {
     refreshingPipesV1,
   } = props;
 
+  const flatListRef = React.useRef<FlatList | null>(null);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -194,26 +198,67 @@ function ComponentsMapComponent(props: Props) {
     []
   );
 
-  const onScrollFlatList = React.useCallback(
-    ({ nativeEvent }, isScrollingDone = false) => {
-      const {
-        contentOffset: { y },
-      } = nativeEvent;
+  const navBarStore = useScreenContextV2()._navBarStore;
 
-      useScreenScrollStore.setState({
-        scrollingVelocity: isScrollingDone ? 0 : 1,
-        scrollPosition: y,
-      });
-    },
-    []
+  const scrollY = navBarStore(
+    useShallow(({ scrollYAnimated }) => scrollYAnimated)
   );
 
-  const onMomentumScrollEnd = React.useCallback(
-    ({ nativeEvent }) => {
-      onScrollFlatList({ nativeEvent }, true);
-    },
-    [onScrollFlatList]
-  );
+  const canMomentum = React.useRef(false);
+
+  const onScrollBeginDrag = React.useCallback(() => {
+    canMomentum.current = true;
+  }, []);
+
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
+    if (!canMomentum.current) return;
+    canMomentum.current = false;
+
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = nativeEvent.contentOffset.y;
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
+  /* onScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = nativeEvent.contentOffset.y;
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current &&
+      nativeEvent.velocity.y === 0
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
 
   if (shouldShowLoadingError) {
     return <RiverError />;
@@ -230,6 +275,9 @@ function ComponentsMapComponent(props: Props) {
       >
         <ViewportTracker>
           <FlatList
+            ref={(ref) => {
+              flatListRef.current = ref;
+            }}
             // Fix for WebView rerender crashes on Android API 28+
             // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
             overScrollMode={Platform.OS === "android" ? "never" : "auto"}
@@ -249,8 +297,23 @@ function ComponentsMapComponent(props: Props) {
             }
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
-            onScroll={onScrollFlatList}
-            onMomentumScrollEnd={onMomentumScrollEnd}
+            onScrollBeginDrag={onScrollBeginDrag}
+            onScroll={Animated.event(
+              [
+                {
+                  nativeEvent: {
+                    contentOffset: {
+                      y: scrollY,
+                    },
+                  },
+                },
+              ],
+              {
+                useNativeDriver: false,
+              }
+            )}
+            onMomentumScrollEnd={_onMomentumScrollEnd}
+            onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}
             {...scrollViewExtraProps}
           />

package/Components/River/TV/River.tsx

@@ -112,7 +112,6 @@ export const River = (props: Props) => {
 
       focusManager.setupInitialFocus(groupId, true);
       focusManager.setInitialFocus();
-      focusManager.enableAutomaticFocus();
     }
   }, [river, componentsMapExtraProps]);