@applicaster/zapp-react-native-ui-components 14.0.0-alpha.3552323332 → 14.0.0-alpha.3881160800

package/Components/AudioPlayer/types.ts

@@ -0,0 +1,40 @@
+import { ViewStyle } from "react-native";
+
+export type Props = {
+  audio_item: ZappEntry & {
+    extensions?: {
+      audio_player_artwork_aspect_ratio?: string;
+      audio_player_background_image?: string;
+      audio_player_background_color?: string;
+      audio_player_channel_icon?: string;
+      audio_player_title_color?: string;
+      audio_player_summary_color?: string;
+      audio_player_rtl?: boolean;
+      audio_player_background_image_default_color?: string;
+      start_time?: string;
+      end_time?: string;
+    };
+  };
+  plugin_configuration: {
+    audio_player_background_color?: string;
+    audio_player_title_color?: string;
+    audio_player_summary_color?: string;
+    audio_player_rtl?: string;
+    audio_player_background_image_default_color?: string;
+    audio_player_background_image?: string;
+    audio_player_artwork_aspect_ratio?: string;
+    lg_tv_audio_player_title_font_family?: string;
+    lg_tv_audio_player_title_font_size?: number;
+    lg_tv_audio_player_summary_font_family?: string;
+    lg_tv_audio_player_summary_font_size?: number;
+    samsung_tv_audio_player_title_font_family?: string;
+    samsung_tv_audio_player_title_font_size?: number;
+    samsung_tv_audio_player_summary_font_family?: string;
+    samsung_tv_audio_player_summary_font_size?: number;
+    tv_os_audio_player_title_font_family?: string;
+    tv_os_audio_player_title_font_size?: number;
+    tv_os_audio_player_summary_font_family?: string;
+    tv_os_audio_player_summary_font_size?: number;
+  };
+  style?: ViewStyle;
+};

package/Components/Focusable/FocusableTvOS.tsx

@@ -16,9 +16,9 @@ function noop() {}
 type Props = {
   id: string;
   groupId: string;
-  onPress?: (nativeEvent: React.SyntheticEvent) => void;
-  onFocus?: (nativeEvent: React.SyntheticEvent) => void;
-  onBlur?: (nativeEvent: React.SyntheticEvent) => void;
+  onPress?: (nativeEvent: any) => void;
+  onFocus?: (nativeEvent: any) => void;
+  onBlur?: (nativeEvent: any) => void;
   children: (focused?: boolean) => React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -13,6 +13,7 @@ import {
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
+import { ViewStyle } from "react-native";
 
 type Props = {
   item: ZappEntry;
@@ -140,14 +141,19 @@ export function HandlePlayable({
   const modalSize = useModalSize();
 
   const style = React.useMemo(
-    () => ({
-      width: isModal ? modalSize.width : mode === "PIP" ? "100%" : screenWidth,
-      height: isModal
-        ? modalSize.height
-        : mode === "PIP"
-          ? "100%"
-          : screenHeight,
-    }),
+    () =>
+      ({
+        width: isModal
+          ? modalSize.width
+          : mode === "PIP"
+            ? "100%"
+            : screenWidth,
+        height: isModal
+          ? modalSize.height
+          : mode === "PIP"
+            ? "100%"
+            : screenHeight,
+      }) as ViewStyle,
     [screenWidth, screenHeight, modalSize, isModal, mode]
   );
 

package/Components/MasterCell/elementMapper.tsx

@@ -73,7 +73,6 @@ export function elementMapper(
       : {};
 
     const componentProps = {
-      key,
       style,
       skipButtons: otherProps?.skipButtons,
       emitAsyncElementRegistrate: otherProps?.emitAsyncElementRegistrate,
@@ -91,7 +90,7 @@ export function elementMapper(
     const fn = mapElementWithKey(elementMapper(components, otherProps));
 
     return (
-      <Component {...componentProps}>
+      <Component key={key} {...componentProps}>
         {focusableTypes.has(type) && elements.length > 0
           ? elements.map(fn)
           : null}

package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 import { Text, Animated } from "react-native";
+import { render } from "@testing-library/react-native";
 
-import renderer from "react-test-renderer";
-
-jest.useFakeTimers();
+import {
+  NotificationView,
+  onlinePhrase,
+  offlinePhrase,
+} from "../NotificationView";
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
   usePickFromState: () => ({
@@ -32,39 +35,31 @@ jest.mock("react-native-safe-area-context", () => ({
 
 const dismiss = jest.fn();
 
-const {
-  NotificationView,
-  onlinePhrase,
-  offlinePhrase,
-} = require("../NotificationView");
-
 describe("NotificationView", () => {
   it("Show online message when Online", () => {
-    const component = renderer.create(
-      <NotificationView online dismiss={dismiss} />
-    );
+    const component = render(<NotificationView online dismiss={dismiss} />);
 
-    expect(component.root.findByType(Text).props.children).toBe(onlinePhrase);
+    expect(component.UNSAFE_getByType(Text).props.children).toBe(onlinePhrase);
   });
 
   it("Show offline message when Online", () => {
-    const component = renderer.create(
+    const component = render(
       <NotificationView online={false} dismiss={dismiss} />
     );
 
-    expect(component.root.findByType(Text).props.children).toBe(offlinePhrase);
+    expect(component.UNSAFE_getByType(Text).props.children).toBe(offlinePhrase);
   });
 
   it("When hidden is false to true notification is visible", () => {
-    const component = renderer.create(
+    const component = render(
       <NotificationView online={false} hidden={false} dismiss={dismiss} />
     );
 
-    component.update(
+    component.rerender(
       <NotificationView online={false} hidden={true} dismiss={dismiss} />
     );
 
-    const animatedView = component.root.findByType(Animated.View);
+    const animatedView = component.UNSAFE_getByType(Animated.View);
     const animatedViewStyles = animatedView.props.style;
 
     expect(animatedViewStyles.opacity).toBe(1);

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -21,6 +21,15 @@ exports[`OfflineHandler renders 1`] = `
     }
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
       accessible={true}
       collapsable={false}
       focusable={true}

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -88,7 +88,7 @@ export const VideoModalMode = {
   MAXIMIZED: "MAXIMIZED",
   MINIMIZED: "MINIMIZED",
   FULLSCREEN: "FULLSCREEN",
-} as const;
+};
 
 export type PlayNextData = {
   state: PlayNextState;
@@ -127,7 +127,7 @@ const webStyles = {
   playerScreen: {
     flex: 1,
     height: "100vh",
-    backgroundColor: "black",
+    background: "black",
   },
   playerWrapper: {
     height: "100%",
@@ -135,9 +135,6 @@ const webStyles = {
   },
   inlineRiver: {
     height: INLINE_CONTAINER_CONTENT_HEIGHT,
-
-    borderWidth: 4,
-    borderColor: "yellow",
   },
 };
 
@@ -148,6 +145,7 @@ const nativeStyles = {
   },
   playerScreen: {
     flex: 1,
+    backgroundColor: "black",
     overflow: "hidden",
   },
   playerWrapper: {
@@ -567,9 +565,8 @@ const PlayerContainerComponent = (props: Props) => {
   const isInlineTV = isInlineTVUtil(screenData);
 
   const inline =
-    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(
-      mode as any
-    ) || isInlineTV;
+    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(mode) ||
+    isInlineTV;
 
   const value = React.useMemo(
     () => ({ playerId: state.playerId }),
@@ -590,11 +587,7 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (
-      screen_background_color &&
-      mode !== VideoModalMode.FULLSCREEN &&
-      isTV()
-    ) {
+    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -634,7 +627,7 @@ const PlayerContainerComponent = (props: Props) => {
         <PlayerContainerContext.Consumer>
           {(context) => (
             <TVEventHandlerComponent
-              tvEventHandler={(_component, event) =>
+              tvEventHandler={(event) =>
                 playerRemoteHandler(event, context.isLanguageOverlayVisible)
               }
             >
@@ -644,17 +637,14 @@ const PlayerContainerComponent = (props: Props) => {
                 preferredFocus
                 shouldUsePreferredFocus
                 groupId={groupId}
-                pointerEvents={mode === "MINIMIZED" ? "box-none" : "auto"}
               >
                 {/* Video player and components */}
                 <View
                   style={styles.playerScreen}
                   testID={"player-screen-container"}
-                  pointerEvents={mode === "MINIMIZED" ? "box-none" : "auto"}
                 >
                   {/* Player container */}
                   <View
-                    pointerEvents={mode === "MINIMIZED" ? "box-none" : "auto"}
                     style={[
                       styles.playerWrapper,
                       // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals
@@ -726,7 +716,7 @@ const PlayerContainerComponent = (props: Props) => {
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
                             cellTapAction={onCellTap}
-                            extraAnchorPointYOffset={-600}
+                            extraAnchorPointYOffset={0}
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}
                             componentsMapExtraProps={{

package/Components/PlayerImageBackground/index.tsx

@@ -28,7 +28,7 @@ const PlayerImageBackgroundComponent = ({
   defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, imageKey) }),
+    () => ({ uri: imageSrcFromMediaItem(entry, [imageKey]) }),
     [imageKey, entry]
   );
 

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -286,7 +286,6 @@ function ComponentsMapComponent(props: Props) {
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
-            listKey={riverId}
             keyExtractor={keyExtractor}
             renderItem={renderRiverItem}
             data={riverComponents}

package/Components/River/TV/withTVEventHandler.tsx

@@ -8,7 +8,7 @@ export const withTvEventHandler = (Component) => {
   return function WithTVEventHandler(props) {
     const navigator = useNavigation();
 
-    const remoteHandler = (_, event) => {
+    const remoteHandler = (event) => {
       const { eventType } = event;
 
       const canGoBack = navigator.canGoBack();

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -159,6 +159,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     >
       <View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >
@@ -174,6 +175,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >

package/Components/Touchable/__tests__/__snapshots__/touchable.test.tsx.snap

@@ -3,6 +3,23 @@
 exports[`<Touchable /> when not running in automated tests environment renders correctly 1`] = `
 <View
   accessibilityLabel="some-test-id"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -29,6 +46,23 @@ exports[`<Touchable /> when not running in automated tests environment renders c
 exports[`<Touchable /> when running in automated tests environment has accessible flag set to false 1`] = `
 <View
   accessibilityLabel="some-test-id"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={false}
   collapsable={false}
   focusable={true}

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -6,15 +6,21 @@ exports[`<Scene /> renders correctly 1`] = `
     collapsable={false}
     pointerEvents="auto"
     style={
-      {
-        "flex": 1,
-        "fontScale": 2,
-        "height": 1334,
-        "paddingBottom": 49,
-        "scale": 2,
-        "statusBarHeight": null,
-        "width": 750,
-      }
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "paddingBottom": 49,
+        },
+        {
+          "fontScale": 2,
+          "height": 1334,
+          "scale": 2,
+          "statusBarHeight": null,
+          "width": 750,
+        },
+      ]
     }
   />
 </View>

package/Components/VideoLive/animationUtils.ts

@@ -1,8 +1,8 @@
 import { Animated, Easing, EasingFunction, StyleProp } from "react-native";
 
 type AnimatedInterpolatedStyle =
-  | Animated.AnimatedInterpolation
-  | [{ [Key: string]: Animated.AnimatedInterpolation }];
+  | Animated.AnimatedInterpolation<number>
+  | [{ [Key: string]: Animated.AnimatedInterpolation<number> }];
 
 type AnimationConfig = {
   duration: number;
@@ -31,7 +31,7 @@ const interpolate = (
   animatedValue: Animated.Value,
   from: number = 0,
   to: number = 1
-): Animated.AnimatedInterpolation =>
+): Animated.AnimatedInterpolation<number> =>
   animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [from, to],

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Animated, Dimensions } from "react-native";
+import { Animated } from "react-native";
 
 import {
   useSafeAreaInsets,
@@ -23,7 +23,6 @@ export enum PlayerAnimationStateEnum {
 export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
 
 export type ModalAnimationContextT = {
-  yTranslate: React.MutableRefObject<Animated.Value | null>;
   isActiveGesture: boolean;
   playerAnimationState: PlayerAnimationStateT;
   setPlayerAnimationState: (value: PlayerAnimationStateT) => void;
@@ -49,7 +48,6 @@ export type ModalAnimationContextT = {
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
-  yTranslate: React.createRef<Animated.Value | null>(),
   isActiveGesture: false,
   playerAnimationState: null,
   setPlayerAnimationState: () => null,
@@ -75,10 +73,6 @@ export const ReactContext = React.createContext<ModalAnimationContextT>({
 });
 
 const Provider = ({ children }: { children: React.ReactNode }) => {
-  const yTranslate = React.useRef(
-    new Animated.Value(Dimensions.get("window").height)
-  );
-
   const [playerAnimationState, setPlayerAnimationState] =
     React.useState<PlayerAnimationStateT>(null);
 
@@ -106,7 +100,6 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     // Reset player animation state when video modal is closed
     if (!visible) {
       resetPlayerAnimationState();
-      yTranslate.current?.setValue(Dimensions.get("window").height);
     }
   }, [visible, resetPlayerAnimationState]);
 
@@ -148,7 +141,6 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ReactContext.Provider
       value={{
-        yTranslate,
         startComponentsAnimation,
         setStartComponentsAnimation,
         isActiveGesture: playerAnimationState !== null,

package/Components/VideoModal/PlayerDetails.tsx

@@ -11,8 +11,6 @@ import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactH
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useDelayedPlayerDetails } from "./hooks";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
 
@@ -28,10 +26,6 @@ type Props = {
   isTabletLandscape?: boolean;
   isAudioPlayer?: boolean;
   isTablet?: boolean;
-  inline?: any;
-  docked?: boolean;
-  isModal?: boolean;
-  pip?: boolean;
 };
 
 const containerStyle = ({
@@ -48,24 +42,8 @@ export const PlayerDetails = ({
   configuration,
   isTabletLandscape = false,
   isAudioPlayer,
-  inline,
-  docked,
-  isModal,
-  pip,
+  isTablet = false,
 }: Props) => {
-  const isInlineModal = inline && isModal;
-
-  // Mounting the PlayerDetails component is a resource-intensive process.
-  // Therefore, for performance reasons, we mount it with a delay to make the rotation process as smooth as possible.
-  // The flow is as follows: the rotation occurs first, and then, after a short delay, we mount the PlayerDetails component.
-  // This helps to avoid blocking the rotation and any animations related to the rotation.
-  const isShowPlayerDetails = useDelayedPlayerDetails({
-    isInline: isInlineModal,
-    isDocked: docked,
-    isPip: pip,
-  });
-
-  const isTablet = useIsTablet();
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
 
@@ -101,7 +79,7 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
-  if (isNilOrEmpty(screenData?.ui_components) || !isShowPlayerDetails) {
+  if (isNilOrEmpty(screenData?.ui_components)) {
     return null;
   }