@applicaster/zapp-react-native-ui-components 15.0.0-alpha.2882475305 → 15.0.0-alpha.3248453012

package/Components/AnimatedInOut/index.tsx

@@ -6,10 +6,6 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type AnimatedInterpolatedStyle = any;
 
-// type AnimatedInterpolatedStyle =
-//   | Animated.AnimatedInterpolation
-//   | [{ [Key: string]: Animated.AnimatedInterpolation }];
-
 type AnimationConfig = {
   duration: number;
   easing: EasingFunction;
@@ -45,32 +41,57 @@ export function AnimatedInOut({
   children,
 }: Props) {
   const [animatedValue] = React.useState(new Animated.Value(visible ? 1 : 0));
-  const [animating, setAnimating] = React.useState(undefined);
+  const animationRef = React.useRef<Animated.CompositeAnimation | null>(null);
+  const delayTimerRef = React.useRef<NodeJS.Timeout | null>(null);
 
   const previousVisible = usePrevious(toBooleanWithDefaultFalse(visible));
 
-  function startAnimation(toValue, config) {
-    if (animating) {
-      animating.reset();
-    }
-
-    const { duration, easing, delay = 0, onAnimationEnd = noop } = config;
+  const startAnimation = React.useCallback(
+    (toValue: number, config: AnimationConfig) => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+
+      const { duration, easing, delay = 0, onAnimationEnd = noop } = config;
+
+      const runAnimation = () => {
+        animationRef.current = Animated.timing(animatedValue, {
+          duration,
+          toValue,
+          easing,
+          useNativeDriver: true,
+        });
+
+        animationRef.current.start(({ finished }) => {
+          if (finished) {
+            animationRef.current = null;
+            onAnimationEnd();
+          }
+        });
+      };
+
+      if (delay > 0) {
+        delayTimerRef.current = setTimeout(runAnimation, delay);
+      } else {
+        runAnimation();
+      }
+    },
+    [animatedValue]
+  );
 
-    const compositeAnimation = Animated.timing(animatedValue, {
-      duration,
-      toValue,
-      easing,
-      delay,
-      useNativeDriver: true,
-    }).start(() => {
-      setAnimating(undefined);
-      onAnimationEnd();
-    });
+  React.useEffect(() => {
+    if (previousVisible === undefined) {
+      animatedValue.setValue(visible ? 1 : 0);
 
-    setAnimating(compositeAnimation);
-  }
+      return;
+    }
 
-  React.useEffect(() => {
     if (!previousVisible && visible) {
       startAnimation(1.0, getAnimation(animationConfig, "in"));
     }
@@ -78,7 +99,29 @@ export function AnimatedInOut({
     if (previousVisible && !visible) {
       startAnimation(0.0, getAnimation(animationConfig, "out"));
     }
-  }, [visible, previousVisible]);
+  }, [
+    visible,
+    previousVisible,
+    animatedValue,
+    startAnimation,
+    animationConfig,
+  ]);
+
+  React.useEffect(() => {
+    return () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+
+      animatedValue.stopAnimation();
+    };
+  }, [animatedValue]);
 
   const styles = visible
     ? getAnimation(animationConfig, "in").styles
@@ -86,7 +129,7 @@ export function AnimatedInOut({
 
   return (
     <Animated.View
-      renderToHardwareTextureAndroid={animating}
+      renderToHardwareTextureAndroid={!!animationRef.current}
       style={[styles(animatedValue), staticStyles]}
     >
       {children}

package/Components/Cell/Cell.tsx

@@ -208,14 +208,14 @@ export class CellComponent extends React.Component<Props, State> {
       this.accessibilityManager.readText({
         text: " ",
       });
-    } else {
+    } else if (this.state.cellFocused) {
       this.accessibilityManager.readText({
         text: `${positionLabel}`,
       });
     }
   }
 
-  componentDidUpdate(prevProps: Readonly<Props>) {
+  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
         hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
@@ -224,7 +224,12 @@ export class CellComponent extends React.Component<Props, State> {
       });
     }
 
-    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
+    if (
+      prevState.cellFocused !== this.state.cellFocused ||
+      this.state.hasFocusableInside
+    ) {
+      this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
+    }
   }
 
   render() {

package/Components/Cell/TvOSCellComponent.tsx

@@ -17,6 +17,7 @@ import { CellWithFocusable } from "./CellWithFocusable";
 import { FocusableWrapper } from "./FocusableWrapper";
 
 import { focusableButtonsRegistration$ } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 type Props = {
   item: ZappEntry;
@@ -37,6 +38,9 @@ type Props = {
   component: {
     id: number | string;
     component_type: string;
+    styles?: {
+      component_margin_top?: number;
+    };
   };
   selected: boolean;
   CellRenderer: React.FunctionComponent<any> & {
@@ -204,11 +208,16 @@ class TvOSCell extends React.Component<Props, State> {
       const extraAnchorPointYOffset =
         screenLayout?.extraAnchorPointYOffset || 0;
 
+      const componentMarginTop = toNumberWithDefaultZero(
+        component?.styles?.component_margin_top
+      );
+
       const totalOffset =
         headerOffset +
-          (componentAnchorPointY || 0) +
-          extraAnchorPointYOffset -
-          componentsMapOffset || 0;
+        (componentAnchorPointY || 0) +
+        extraAnchorPointYOffset -
+        (componentsMapOffset || 0) +
+        componentMarginTop;
 
       mainOffsetUpdater?.(
         { tag: this.target },

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -1,9 +1,4 @@
 import * as React from "react";
-import * as R from "ramda";
-import {
-  findPluginByType,
-  findPluginByIdentifier,
-} from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useDimensions,
@@ -16,6 +11,7 @@ import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
 import { ViewStyle } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { findCastPlugin, getPlayer } from "./utils";
 
 type Props = {
   item: ZappEntry;
@@ -26,62 +22,6 @@ type Props = {
   groupId?: string;
 };
 
-const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
-const CHROMECAST_PLUGIN_ID = "chromecast_qb";
-
-const getPlayerWithModuleProperties = (
-  PlayerModule: ZappPlugin
-): [ZappPlugin, PlayerModuleProperties] => {
-  const getPlayerModuleProperties = R.ifElse(
-    R.is(Object) && R.has("Component"),
-    R.omit(["Component"]),
-    () => ({})
-  );
-
-  return [
-    PlayerModule?.Component || PlayerModule,
-    getPlayerModuleProperties(PlayerModule),
-  ];
-};
-
-const getPlayer = (
-  item: ZappEntry,
-  state
-): [ZappPlugin, PlayerModuleProperties] => {
-  const {
-    plugins,
-    contentTypes,
-    rivers,
-    appData: { layoutVersion },
-  } = state;
-
-  let PlayerModule;
-
-  if (layoutVersion === "v2") {
-    const { screen_id } = contentTypes?.[item?.type?.value] || {};
-    const { type } = rivers?.[screen_id] || {};
-
-    if (type) {
-      PlayerModule = findPluginByIdentifier(type, plugins)?.module;
-
-      return getPlayerWithModuleProperties(PlayerModule);
-    }
-  }
-
-  if (item?.content?.type === "youtube-id") {
-    PlayerModule = findPluginByIdentifier(YOUTUBE_PLUGIN_ID, plugins)?.module;
-
-    return getPlayerWithModuleProperties(PlayerModule);
-  }
-
-  PlayerModule = findPluginByType(
-    "playable",
-    plugins.filter(({ identifier }) => identifier !== YOUTUBE_PLUGIN_ID)
-  );
-
-  return getPlayerWithModuleProperties(PlayerModule);
-};
-
 type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
@@ -99,14 +39,23 @@ export function HandlePlayable({
   mode,
   groupId,
 }: Props): React.ReactElement | null {
-  const state = usePickFromState();
+  const { plugins, contentTypes, rivers, appData } = usePickFromState([
+    "plugins",
+    "contentTypes",
+    "rivers",
+    "appData",
+  ]);
 
   const { closeVideoModal } = useNavigation();
 
-  const [Player, playerModuleProperties] = getPlayer(item, state);
+  const [Player, playerModuleProperties] = getPlayer(item, {
+    plugins,
+    contentTypes,
+    rivers,
+    appData,
+  });
 
-  const { module: CastPlugin } =
-    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins, true) || {};
+  const { module: CastPlugin } = findCastPlugin(plugins);
 
   const [playable, setPlayable] =
     React.useState<Nullable<PlayableComponent>>(null);

package/Components/HandlePlayable/const.ts

@@ -0,0 +1,3 @@
+export const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
+
+export const CHROMECAST_PLUGIN_ID = "chromecast_qb";

package/Components/HandlePlayable/utils.ts

@@ -0,0 +1,74 @@
+import {
+  findPluginByIdentifier,
+  findPluginByType,
+} from "@applicaster/zapp-react-native-utils/pluginUtils";
+
+import { CHROMECAST_PLUGIN_ID, YOUTUBE_PLUGIN_ID } from "./const";
+import { omit } from "@applicaster/zapp-react-native-utils/utils";
+
+const getPlayerModuleProperties = (PlayerModule: ZappPlugin) => {
+  if (PlayerModule?.Component && typeof PlayerModule.Component === "object") {
+    return omit(["Component"], PlayerModule);
+  }
+
+  return {};
+};
+
+export const getPlayerWithModuleProperties = (
+  PlayerModule: ZappPlugin
+): [ZappPlugin, PlayerModuleProperties] => {
+  return [
+    PlayerModule?.Component || PlayerModule,
+    getPlayerModuleProperties(PlayerModule),
+  ];
+};
+
+export const findCastPlugin = (plugins: ZappPlugin[]) =>
+  findPluginByIdentifier(CHROMECAST_PLUGIN_ID, plugins, true) || {};
+
+export const findYoutubePlugin = (plugins: ZappPlugin[]) =>
+  findPluginByIdentifier(YOUTUBE_PLUGIN_ID, plugins, true) || {};
+
+export const getPlayer = (
+  item: ZappEntry,
+  {
+    plugins,
+    contentTypes,
+    rivers,
+    appData: { layoutVersion },
+  }: {
+    plugins: ZappPlugin[];
+    contentTypes: Record<string, any>;
+    rivers: Record<string, any>;
+    appData: { layoutVersion: string };
+  }
+): [ZappPlugin, PlayerModuleProperties] => {
+  let PlayerModule;
+
+  if (layoutVersion === "v2") {
+    const screen_id = contentTypes?.[item?.type?.value]?.screen_id;
+    const type = rivers?.[screen_id]?.type;
+
+    if (type) {
+      PlayerModule = findPluginByIdentifier(type, plugins)?.module;
+
+      return getPlayerWithModuleProperties(PlayerModule);
+    }
+  }
+
+  if (item?.content?.type === "youtube-id") {
+    PlayerModule = findYoutubePlugin(plugins)?.module;
+
+    return getPlayerWithModuleProperties(PlayerModule);
+  }
+
+  PlayerModule = findPluginByType(
+    "playable",
+    (plugins as any[]).filter(
+      ({ identifier }: { identifier: string }) =>
+        identifier !== YOUTUBE_PLUGIN_ID
+    )
+  );
+
+  return getPlayerWithModuleProperties(PlayerModule);
+};

package/Components/MasterCell/DefaultComponents/BorderContainerView/__tests__/index.test.tsx

@@ -1,8 +1,8 @@
+import * as React from "react";
 import {
   BorderContainerView,
   getBorderPadding, // Export for testing (using a double underscore prefix is a common convention)
 } from "../index";
-import * as React from "react";
 import { render } from "@testing-library/react-native";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { View } from "react-native";
@@ -11,6 +11,15 @@ jest.mock("@applicaster/zapp-react-native-utils/numberUtils", () => ({
   toNumberWithDefaultZero: jest.fn((value) => Number(value) || 0),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
+  () => ({
+    useAccessibilityManager: jest.fn(() => ({
+      addHeading: jest.fn(),
+    })),
+  })
+);
+
 describe("BorderContainerView", () => {
   describe("getBorderPadding", () => {
     it("returns 0 for inside", () => {
@@ -42,6 +51,8 @@ describe("BorderContainerView", () => {
     };
 
     const borderPosition = null;
+    const mockEntry = { id: "test-entry" } as ZappEntry;
+    const mockHasFocusableInside = jest.fn(() => false);
 
     const { queryByTestId } = render(
       <BorderContainerView
@@ -52,6 +63,10 @@ describe("BorderContainerView", () => {
         borderPaddingRight={toNumberWithDefaultZero(padding.paddingRight)}
         borderPaddingBottom={toNumberWithDefaultZero(padding.paddingBottom)}
         borderPaddingLeft={toNumberWithDefaultZero(padding.paddingLeft)}
+        hasFocusableInside={mockHasFocusableInside}
+        entry={mockEntry}
+        state="focused"
+        hasTextLabels={false}
       >
         <View testID="child" />
       </BorderContainerView>

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

@@ -1,10 +1,16 @@
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-import * as React from "react";
+import React, { useMemo, useContext, useEffect } from "react";
 import { ImageStyle, StyleSheet, View, ViewStyle } from "react-native";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { MeasurementPortalContext } from "../../../MeasurmentsPortal/MeasurementsPortal";
 
 type BorderPosition = "inside" | "outside" | "center";
 
 interface Props {
+  hasFocusableInside: (entry: ZappEntry) => boolean;
+  entry: ZappEntry;
+  state: CellState;
+  hasTextLabels: boolean;
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
   borderPaddingTop: number;
@@ -118,8 +124,36 @@ export const BorderContainerView = (props: Props) => {
     borderPaddingLeft,
     style,
     children,
+    hasFocusableInside,
+    entry,
+    state,
+    hasTextLabels,
   } = props;
 
+  const accessibilityManager = useAccessibilityManager();
+  const isMeasurement = useContext(MeasurementPortalContext);
+
+  const isImageOnlyCell = useMemo(
+    () =>
+      !hasFocusableInside(entry) &&
+      !hasTextLabels &&
+      state === "focused" &&
+      !isMeasurement?.measuringInProgress,
+    [
+      hasFocusableInside,
+      entry,
+      hasTextLabels,
+      state,
+      isMeasurement?.measuringInProgress,
+    ]
+  );
+
+  useEffect(() => {
+    if (isImageOnlyCell && entry?.title) {
+      accessibilityManager.addHeading(String(entry.title));
+    }
+  }, [isImageOnlyCell, entry?.title]);
+
   const padding =
     borderPosition === "outside"
       ? {

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

@@ -9,6 +9,7 @@ import { useTrackCurrentAutoScrollingElement } from "@applicaster/zapp-react-nat
 import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { getPropComponentType } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type LiveImageProps = {
   item: ZappEntry;
@@ -108,8 +109,7 @@ const prepareEntry = (entry) => {
     };
   }
 
-  const previewPlayback =
-    entry.extensions?.["brightcove"]?.["preview_playback"];
+  const previewPlayback = entry.extensions?.brightcove?.preview_playback;
 
   if (previewPlayback) {
     return {
@@ -117,14 +117,14 @@ const prepareEntry = (entry) => {
       extensions: {
         ...entry.extensions,
         brightcove: {
-          ...entry?.extensions?.["brightcove"],
+          ...entry?.extensions?.brightcove,
           video_id: previewPlayback,
         },
       },
     };
   }
 
-  if (entry.extensions?.["brightcove"]?.["video_id"]) {
+  if (entry.extensions?.brightcove?.video_id) {
     return entry;
   }
 
@@ -174,7 +174,7 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
     // TODO: Add more dict if needed from the screen component, styles, data etc
     return {
       playerPluginId: playerScreen?.type ?? DEFAULT_PLAYER_IDENTIFIER,
-      screenConfig: playerScreen?.["general"],
+      screenConfig: playerScreen?.general,
     };
   }
 
@@ -206,6 +206,11 @@ const LiveImageComponent = (props: LiveImageProps) => {
     state,
   } = props;
 
+  const accessibilityManager = useAccessibilityManager();
+
+  const isScreenReaderEnabled =
+    accessibilityManager.accessibilityManagerState.screenReaderEnabled;
+
   const component = useUIComponentContext();
 
   // Fix for blinking on state change
@@ -239,7 +244,8 @@ const LiveImageComponent = (props: LiveImageProps) => {
     getFocusedState(state, componentType, isCurrentlyFocused) &&
     playableEntry &&
     cellUUID &&
-    isSupportedTVForLiveImage();
+    isSupportedTVForLiveImage() &&
+    !isScreenReaderEnabled;
 
   return (
     <>

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

@@ -52,14 +52,14 @@ const _Text = ({
     : textTransform(transformText, _label);
 
   React.useLayoutEffect(() => {
-    // For FocusableCells with action buttons
-    if (otherProps.state) {
-      if (otherProps.state === "focused" && cellFocused === true) {
-        accessibilityManager.addHeading(textLabel);
-      }
-    } else {
-      if (cellFocused === true) {
-        accessibilityManager.addHeading(textLabel);
+    if (cellFocused) {
+      switch (otherProps.state) {
+        case "focused":
+          accessibilityManager.addHeading(textLabel);
+          break;
+        case "focused_selected":
+          accessibilityManager.addHeading(`${textLabel}, Selected`);
+          break;
       }
     }
   }, [cellFocused, otherProps.state, textLabel]);

package/Components/MasterCell/index.tsx

@@ -103,6 +103,8 @@ export function masterCellBuilder({
         wrapperRef,
         cellUUID,
         skipButtons,
+        hasFocusableInside,
+        entry: item,
       })
     );
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -56,11 +56,6 @@ 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 {
-  PlayerAnimationStateEnum,
-  useModalAnimationContext,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
 import {
   PlayerNativeCommandTypes,
   PlayerNativeSendCommand,
@@ -248,9 +243,6 @@ 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);
   };
@@ -482,8 +474,6 @@ const PlayerContainerComponent = (props: Props) => {
     if (isModal && mode === VideoModalMode.MAXIMIZED) {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
-      } else {
-        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
@@ -680,11 +670,7 @@ const PlayerContainerComponent = (props: Props) => {
                         autoplay={true}
                         controls={false}
                         disableCastAction={disableCastAction}
-                        docked={
-                          navigator.isVideoModalDocked() &&
-                          !startComponentsAnimation &&
-                          !isActiveGesture
-                        }
+                        docked={navigator.isVideoModalDocked()}
                         entry={item}
                         fullscreen={mode === VideoModalMode.FULLSCREEN}
                         inline={inline}
@@ -702,7 +688,6 @@ const PlayerContainerComponent = (props: Props) => {
                         setNextVideoPreloadThresholdPercentage={
                           setNextVideoPreloadThresholdPercentage
                         }
-                        startComponentsAnimation={startComponentsAnimation}
                       >
                         {renderApplePlayer(applePlayerProps)}
                       </Player>

package/Components/PlayerImageBackground/index.tsx

@@ -2,12 +2,6 @@ import React, { PropsWithChildren } from "react";
 import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
-import {
-  AnimationComponent,
-  ComponentAnimationType,
-  useModalAnimationContext,
-  PlayerAnimationStateEnum,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
@@ -25,30 +19,17 @@ const PlayerImageBackgroundComponent = ({
   style,
   imageStyle,
   imageKey,
-  defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
     () => ({ uri: imageSrcFromMediaItem(entry, [imageKey]) }),
     [imageKey, entry]
   );
 
-  const { playerAnimationState } = useModalAnimationContext();
-
   if (!source) return <>{children}</>;
 
   return (
-    <View
-      style={
-        playerAnimationState === PlayerAnimationStateEnum.maximize
-          ? defaultImageDimensions
-          : style
-      }
-    >
-      <AnimationComponent
-        style={style}
-        animationType={ComponentAnimationType.player}
-        additionalData={defaultImageDimensions}
-      >
+    <View style={style}>
+      <View style={style}>
         <ImageBackground
           resizeMode="cover"
           style={imageSize}
@@ -57,7 +38,7 @@ const PlayerImageBackgroundComponent = ({
         >
           {children}
         </ImageBackground>
-      </AnimationComponent>
+      </View>
     </View>
   );
 };