@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5350212300 → 12.0.0-alpha.5400461972

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:${groupId}___${id}` : id;
+    return groupId ? `${groupId}-${id}` : id;
   }
 
   getRect() {

package/Components/Cell/Cell.tsx

@@ -207,11 +207,7 @@ export class CellComponent extends React.Component<Props> {
 
     const { id } = item;
 
-    const focusableId = R.join("-", [
-      `componentId:${component?.id}`,
-      `id:${id}`,
-      `index:${index}`,
-    ]);
+    const focusableId = R.join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;

package/Components/Cell/CellWithFocusable.tsx

@@ -6,20 +6,12 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
 
-const useCellFocusedState = (
-  skipFocusManagerRegistration: boolean,
-  groupId: string,
-  id: string
-) => {
+const useCellFocusedState = (groupId: string, id: string) => {
   const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
 
   React.useEffect(() => {
-    const isGroupItemFocused = () => {
-      if (!skipFocusManagerRegistration) {
-        const isFocused = focusManager.isGroupItemFocused(groupId, id);
-        setCurrentCellFocused(isFocused);
-      }
-    };
+    const isGroupItemFocused = () =>
+      setCurrentCellFocused(focusManager.isGroupItemFocused(groupId, id));
 
     const handler = () => {
       // tvOS hack for properly checking focus
@@ -37,7 +29,7 @@ const useCellFocusedState = (
     return () => {
       focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
     };
-  }, [groupId, skipFocusManagerRegistration]);
+  }, [groupId]);
 
   return currentCellFocused;
 };
@@ -73,11 +65,7 @@ export function CellWithFocusable(props: Props) {
     selected,
   } = props;
 
-  const isFocused = useCellFocusedState(
-    skipFocusManagerRegistration,
-    groupId,
-    id
-  );
+  const isFocused = useCellFocusedState(groupId, id);
 
   const state = useCellState({
     id: item.id,

package/Components/FocusableGroup/index.tsx

@@ -26,7 +26,6 @@ type Props = {
   nextFocusLeft?: any;
   nextFocusRight?: any;
   onLayout?: any;
-  excludeFromFocusSearching?: boolean;
 };
 
 export class FocusableGroup extends BaseFocusable<Props> {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -19,7 +19,6 @@ type Props = {
   modalHeight?: number;
   modalWidth?: number;
   mode: VideoModalMode;
-  groupId?: string;
 };
 
 const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
@@ -94,7 +93,6 @@ export function HandlePlayable({
   modalHeight,
   modalWidth,
   mode,
-  groupId,
 }: Props): React.ReactElement | null {
   const state = usePickFromState();
 
@@ -169,7 +167,6 @@ 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 screenLayoutValue = React.useMemo(
+  const screeenLayoutValue = React.useMemo(
     () => ({
       ...screenLayout,
       setScreenLayout,
@@ -69,7 +69,7 @@ export function ScreenLayoutContextProvider(props: {
   );
 
   return (
-    <ScreenLayoutContext.Provider value={screenLayoutValue}>
+    <ScreenLayoutContext.Provider value={screeenLayoutValue}>
       {props.children}
     </ScreenLayoutContext.Provider>
   );

package/Components/Layout/TV/index.tsx

@@ -1,15 +1,11 @@
 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";
@@ -21,25 +17,10 @@ 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 { 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",
-  },
-});
+import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -47,73 +28,16 @@ type Components = {
 };
 
 type ComponentsExtraProps = {
-  NavBar?: Record<string, any>;
   Background?: Record<string, any>;
+  NavBar?: Record<string, any>;
 };
 
 type Props = {
   Components: Components;
-  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);
+  ComponentsExtraProps?: ComponentsExtraProps;
+  children: React.ReactNode;
 };
 
-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();
@@ -175,54 +99,34 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   }
 
   return (
-    // @ts-ignore
-    <TransitionerTV
-      componentsExtraProps={ComponentsExtraProps}
-      Components={Components}
-    >
-      <LayoutContainer>
-        <ScreenLayoutContextProvider>
-          <Components.Background
-            backgroundColor={backgroundColor}
-            backgroundImageUrl={backgroundImageUrl}
-            {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-          >
-            {!isTVOS ? navBarContainer : null}
-            {navBarReady ? (
-              /**
+    <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)
              **/
-              <PathnameContext.Provider value={navigator.currentRoute}>
                 <ScreenContainer>{children}</ScreenContainer>
-              </PathnameContext.Provider>
-            ) : null}
-            {/** Render NavBarContainer over ScreenContainer to let tvOS native
+              ) : 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>
-    </TransitionerTV>
+              {isTVOS ? navBarContainer : null}
+            </PathnameContext.Provider>
+          </ScreenDataContext.Provider>
+          <TransitionOverlay />
+        </Components.Background>
+      </ScreenLayoutContextProvider>
+    </LayoutContainer>
   );
 };
 
 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/ActionButton.tsx

@@ -25,6 +25,7 @@ type Props = {
   testID?: string;
   accessibilityLabel?: string;
   cellUUID?: string;
+  extraProps?: Record<string, any>;
 };
 
 function isStringAsset(asset) {
@@ -108,6 +109,7 @@ export function ActionButton(props: Props) {
           flavour={flavour}
           asset={getAssetValue(asset, flavour)}
           cellUUID={cellUUID}
+          {...(props?.extraProps ?? {})}
         />
       )}
     </TouchableOpacity>

package/Components/MasterCell/DefaultComponents/DynamicBadge.tsx

@@ -4,6 +4,7 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 
 type DynamicBadgeProps = {
   cellUUID?: string;
+  uri?: string;
 };
 
 const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
@@ -12,11 +13,12 @@ const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
   // TODO: Initial value should depends on player state (playing or not)
   const [showImage, setShowImage] = React.useState(true);
   const player = usePlayer(playerId);
+  const uri = props?.uri;
 
   React.useEffect(() => {
     if (playerId && player) {
       return player.addListener({
-        id: "dynamic-badges",
+        id: `dynamic-badges-${uri}`,
         listener: {
           onPlayerClose: () => {
             setShowImage(true);
@@ -35,7 +37,7 @@ const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
     } else {
       setShowImage(true);
     }
-  }, [player]);
+  }, [player, uri]);
 
   if (!showImage) {
     return null;

package/Components/MasterCell/DefaultComponents/ImageContainer/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { isVideoPreviewEnabled } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/utils";
 import { LiveImage } from "../LiveImage";
 import PureImage from "../Image";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = {
   enable_video_preview: boolean;
@@ -9,7 +10,10 @@ type Props = {
 };
 
 export const ImageContainer = (props: Props) => {
-  const Component = isVideoPreviewEnabled(props) ? LiveImage : PureImage;
+  const isActive = useIsScreenActive();
+
+  const Component =
+    isVideoPreviewEnabled(props) && isActive ? LiveImage : PureImage;
 
   return <Component {...props} />;
 };

package/Components/MasterCell/DefaultComponents/Text/index.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Text } from "react-native";
 import { omit } from "ramda";
-import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import {
   textTransform,
   dateFormat,
@@ -9,6 +8,9 @@ import {
 
 import { useTextLabel, withFocusedStyles } from "./hooks";
 import { withScaledLineHeight } from "./utils";
+import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   style: any;
@@ -32,14 +34,24 @@ const _Text = ({
   ...otherProps
 }: Props) => {
   const _label = useTextLabel({ label, entry });
+  const isMeasurement = React.useContext(MeasurementPortalContext);
 
   if (isNilOrEmpty(_label)) {
     return null;
   }
 
+  // set maximum possible height for the text in case of measurement
+  const height =
+    isMeasurement && otherProps.numberOfLines && style.lineHeight
+      ? toNumber(otherProps.numberOfLines) * toNumber(style.lineHeight)
+      : undefined;
+
   return (
     <Text
-      style={withScaledLineHeight(withFocusedStyles({ style, otherProps }))}
+      style={[
+        withScaledLineHeight(withFocusedStyles({ style, otherProps })),
+        { height },
+      ]}
       {...withoutLabel(otherProps)}
     >
       {dateTransformEnabled

package/Components/MasterCell/DefaultComponents/__tests__/text.test.tsx

@@ -1,11 +1,23 @@
 import React from "react";
-import { Text } from "react-native";
+import RN from "react-native";
 import { Provider } from "react-redux";
 import TestRenderer from "react-test-renderer";
-import configureStore from "redux-mock-store";
-import CustomText from "../Text";
+import configureStoreFn from "redux-mock-store";
 
-const mockStore = configureStore();
+const mockUseIsRTL = jest.fn(() => true);
+const mockGetIsRTL = jest.fn(() => true);
+const mockUseLocalizedStrings = jest.fn(() => ({}));
+const mockGetUILanguage = jest.fn(() => "he-HE");
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+  getIsRTL: mockGetIsRTL,
+  useLocalizedStrings: mockUseLocalizedStrings,
+  getUILanguage: mockGetUILanguage,
+}));
+
+const CustomText = require("../Text").default;
+const mockStore = configureStoreFn();
 
 const defaultProps = {
   entry: {},
@@ -22,7 +34,7 @@ const getRenderedText = (label: string, store: any) => {
     </Provider>
   );
 
-  return testRenderer.root.findByType(Text).props.children;
+  return testRenderer.root.findByType(RN.Text).props.children;
 };
 
 describe("RTL app: Hebrew text contains english word", () => {
@@ -34,7 +46,7 @@ describe("RTL app: Hebrew text contains english word", () => {
     remoteConfigurations: { localizations: { he: {} } },
     appData: {
       languageCode: "he",
-      countryCode: "HE",
+      countryCode: "IL",
     },
   });
 
@@ -47,18 +59,22 @@ describe("RTL app: Hebrew text contains english word", () => {
 
   it("Hebrew text contains not first english word", () => {
     const renderedText = getRenderedText(textWithNotFirstEnglishWord, store);
-
     expect(renderedText).toEqual(textWithNotFirstEnglishWord);
   });
 
   it("Hebrew text doesn't contain english word", () => {
     const renderedText = getRenderedText(textWithoutEnglishWord, store);
-
     expect(renderedText).toEqual(textWithoutEnglishWord);
   });
 });
 
 describe("LTR app: English text", () => {
+  beforeAll(() => {
+    mockUseIsRTL.mockReturnValue(false);
+    mockGetIsRTL.mockReturnValue(false);
+    mockGetUILanguage.mockReturnValue("en-US");
+  });
+
   const englishText = "Test sentence";
 
   const store = mockStore({
@@ -71,7 +87,6 @@ describe("LTR app: English text", () => {
 
   it("English text", () => {
     const renderedText = getRenderedText(englishText, store);
-
     expect(renderedText).toEqual(englishText);
   });
 });

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -51,9 +51,7 @@ export const CollapsibleTextContainer = ({
         func: (data) => {
           return getColorFromData({
             data,
-            getValue,
-            key: "background_color",
-            defaultColor: additionalStyles.backgroundColor,
+            valueFromLayout: additionalStyles.backgroundColor,
           });
         },
         propName: "backgroundColor",

package/Components/MasterCell/hooks/useAsyncRendering/index.ts

@@ -53,7 +53,7 @@ export const useAsyncRendering = (viewRef: React.RefObject<View>): Return => {
       measure(viewRef?.current, ({ width, height }) => {
         setDimensions({
           width,
-          height,
+          height: Math.ceil(height),
         });
       });
     })

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

@@ -68,7 +68,6 @@ type Props = {
   mode?: VideoModalMode;
   loadPipesData: (url: string, options: {}) => void;
   disableCastAction?: boolean;
-  groupId?: string;
 };
 
 type ScreenStyles = ZappRiver["styles"] & {
@@ -201,7 +200,6 @@ const PlayerContainerComponent = (props: Props) => {
     style: videoStyle,
     mode = VideoModalMode.MAXIMIZED,
     disableCastAction = false,
-    groupId,
   } = props;
 
   // Hooks
@@ -251,6 +249,7 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
+    navigator.goBack();
     showNavBar(true);
   }, [isModal, navigator.goBack, showNavBar]);
 
@@ -630,7 +629,6 @@ const PlayerContainerComponent = (props: Props) => {
                 style={styles.focusableGroup}
                 preferredFocus
                 shouldUsePreferredFocus
-                groupId={groupId}
               >
                 {/* Video player and components */}
                 <View
@@ -673,6 +671,7 @@ const PlayerContainerComponent = (props: Props) => {
                         setNextVideoPreloadThresholdPercentage={
                           setNextVideoPreloadThresholdPercentage
                         }
+                        startComponentsAnimation={startComponentsAnimation}
                       >
                         {renderApplePlayer(applePlayerProps)}
                       </Player>