@applicaster/zapp-react-native-ui-components 14.0.0-alpha.3126393935 → 14.0.0-alpha.3140225604

package/Components/Cell/Cell.tsx

@@ -70,6 +70,8 @@ type State = {
 };
 
 export class CellComponent extends React.Component<Props, State> {
+  accessibilityManager: AccessibilityManager;
+
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -83,6 +85,8 @@ export class CellComponent extends React.Component<Props, State> {
     this.state = {
       hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
     };
+
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -257,20 +261,21 @@ export class CellComponent extends React.Component<Props, State> {
           style={styles.baseCell}
           isFocusable={isFocusable}
           skipFocusManagerRegistration={skipFocusManagerRegistration}
+          {...this.accessibilityManager.getButtonAccessibilityProps(
+            item?.extensions?.accessibility?.label || item?.title
+          )}
         >
           {(focused, event) => {
             const isFocused = this.isCellFocused(focused);
 
             if (isFocused) {
-              const accessibilityManager = AccessibilityManager.getInstance();
-
               const accessibilityTitle =
                 item?.extensions?.accessibility?.label || item?.title || "";
 
               const accessibilityHint =
                 item?.extensions?.accessibility?.hint || "";
 
-              accessibilityManager.readText({
+              this.accessibilityManager.readText({
                 text: `${accessibilityTitle} ${accessibilityHint}`,
               });
             }

package/Components/Focusable/Focusable.tsx

@@ -5,6 +5,7 @@ import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
+import { StyleSheet, ViewStyle } from "react-native";
 
 type Props = {
   initialFocus?: boolean;
@@ -21,7 +22,7 @@ type Props = {
   handleFocus?: ({ mouse }: { mouse: boolean }) => void;
   children: (boolean, string) => React.ComponentType<any>;
   selected?: boolean;
-  style?: React.CSSProperties;
+  style?: ViewStyle[] | ViewStyle;
 };
 
 class Focusable extends BaseFocusable<Props> {
@@ -122,7 +123,7 @@ class Focusable extends BaseFocusable<Props> {
   }
 
   render() {
-    const { children, style } = this.props;
+    const { children, style, ...otherProps } = this.props;
     const { focused } = this.state;
 
     const id = this.getId();
@@ -139,7 +140,8 @@ class Focusable extends BaseFocusable<Props> {
         onMouseUp={this.pressOut}
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
-        style={style}
+        style={StyleSheet.flatten(style) as any as React.CSSProperties}
+        {...otherProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -7,12 +7,14 @@ import {
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useDimensions,
+  useIsTablet as isTablet,
   useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   item: ZappEntry;
@@ -83,6 +85,13 @@ type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
 
+const dimensionsContext: "window" | "screen" = platformSelect({
+  android_tv: "window",
+  amazon: "window",
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  default: isTablet() ? "window" : "screen", // on tablet, window represents correct values, on phone it's not as the screen could be rotated
+});
+
 export function HandlePlayable({
   item,
   isModal,
@@ -135,7 +144,8 @@ export function HandlePlayable({
     });
   }, [casting]);
 
-  const { width: screenWidth, height: screenHeight } = useDimensions("window");
+  const { width: screenWidth, height: screenHeight } =
+    useDimensions(dimensionsContext);
 
   const modalSize = useModalSize();
 

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

@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import { ImageStyle } from "react-native";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
@@ -67,32 +66,10 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
   const handleFocus = (focusable) => {
     const focusedButtonId = getFocusedButtonId(focusable);
 
-    wrapperRef?.current?.measure((x, y, width, height, pageX, pageY) => {
-      const top = pageY;
-      const bottom = top + height;
-      const left = pageX;
-      const right = left + width;
-
-      const boundingRect = {
-        x,
-        y,
-        pageX,
-        pageY,
-        width,
-        height,
-        top,
-        bottom,
-        left,
-        right,
-      };
-
-      otherProps?.onToggleFocus?.({
-        focusable: {
-          getRect: R.always(boundingRect),
-        },
-        focusedButtonId,
-        mouse: focusable.mouse,
-      });
+    otherProps?.onToggleFocus?.({
+      focusable: wrapperRef.current,
+      focusedButtonId,
+      mouse: focusable.mouse,
     });
 
     if (ttsLabel) {

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -1,58 +1,28 @@
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/StorageSingleSelectProvider";
+import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageSingleSelectProvider";
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import React, { useEffect } from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { BehaviorSubject } from "rxjs";
 import { masterCellLogger } from "../logger";
 import get from "lodash/get";
-import { ScreenMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenStateMultiSelectProvider";
-import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
-
-const parseContextKey = (
-  key: string,
-  context: string = "ctx"
-): string | null => {
-  if (!key?.startsWith(`@{${context}/`)) return null;
-
-  return key.substring(`@{${context}/`.length, key.length - 1);
+
+const parseContextKey = (key: string): string | null => {
+  if (!key?.startsWith("@{ctx/")) return null;
+
+  return key.substring("@{ctx/".length, key.length - 1);
 };
 
 const getDataSourceProvider = (
-  behavior: Behavior,
-  screenRoute: string,
-  screenStateStore: ScreenStateStore
+  behavior: Behavior
 ): BehaviorSubject<string[] | string> | null => {
   if (!behavior) return null;
 
   const selection = String(behavior.current_selection);
-  const screenKey = parseContextKey(selection, "screen");
-
-  if (screenKey) {
-    if (behavior.select_mode === "multi") {
-      return ScreenMultiSelectProvider.getProvider(
-        screenKey,
-        screenRoute,
-        screenStateStore
-      ).getObservable();
-    }
-
-    if (behavior.select_mode === "single") {
-      return ScreenSingleValueProvider.getProvider(
-        screenKey,
-        screenRoute,
-        screenStateStore
-      ).getObservable();
-    }
-  }
-
   const contextKey = parseContextKey(selection);
 
   if (contextKey) {
-    // TODO: Add storage scope to behavior
     if (behavior.select_mode === "multi") {
       return StorageMultiSelectProvider.getProvider(contextKey).getObservable();
     }
@@ -71,8 +41,6 @@ const getDataSourceProvider = (
 
 export const useBehaviorUpdate = (behavior: Behavior) => {
   const [lastUpdate, setLastUpdate] = React.useState<number | null>(null);
-  const screenRoute = useRoute()?.pathname || "";
-  const screenStateStore = useScreenStateStore();
   const player = usePlayer();
 
   const triggerUpdate = () => setLastUpdate(Date.now());
@@ -80,11 +48,7 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
   useEffect(() => {
     if (!behavior) return;
 
-    const dataSource = getDataSourceProvider(
-      behavior,
-      screenRoute,
-      screenStateStore
-    );
+    const dataSource = getDataSourceProvider(behavior);
 
     if (dataSource) {
       const subscription = dataSource.subscribe(triggerUpdate);
@@ -108,17 +72,10 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
 
 // We cant use async in this function (its inside render),
 // so we rely on useBehaviorUpdate to update current value and trigger re-render
-export const isCellSelected = ({
-  item,
-  screenRoute,
-  screenStateStore,
-  behavior,
-}: {
-  item: ZappEntry;
-  screenRoute: string;
-  screenStateStore: ScreenStateStore;
-  behavior?: Behavior;
-}): boolean => {
+export const isCellSelected = (
+  item: ZappEntry,
+  behavior?: Behavior
+): boolean => {
   if (!behavior) return false;
 
   const id = behavior.selector ? get(item, behavior.selector) : item.id;
@@ -142,32 +99,7 @@ export const isCellSelected = ({
   }
 
   const selection = String(behavior.current_selection);
-
-  const screenKey = parseContextKey(selection, "screen");
-
-  if (screenKey) {
-    if (behavior.select_mode === "single") {
-      const selectedItem = ScreenSingleValueProvider.getProvider(
-        screenKey,
-        screenRoute,
-        screenStateStore
-      ).getValue();
-
-      return selectedItem === String(id);
-    }
-
-    if (behavior.select_mode === "multi") {
-      const selectedItems = ScreenMultiSelectProvider.getProvider(
-        screenKey,
-        screenRoute,
-        screenStateStore
-      ).getSelectedItems();
-
-      return selectedItems?.includes(String(id));
-    }
-  }
-
-  const contextKey = parseContextKey(selection, "ctx");
+  const contextKey = parseContextKey(selection);
 
   if (contextKey) {
     if (behavior.select_mode === "single") {

package/Components/MasterCell/utils/index.ts

@@ -8,8 +8,6 @@ import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -192,18 +190,8 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = ({
-  item,
-  screenRoute,
-  screenStateStore,
-  behavior,
-}: {
-  item: ZappEntry;
-  screenRoute: string;
-  screenStateStore: ScreenStateStore;
-  behavior?: Behavior;
-}) => {
-  return isCellSelected({ item, screenRoute, screenStateStore, behavior });
+export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
+  return isCellSelected(item, behavior);
 };
 
 export const useCellState = ({
@@ -216,17 +204,9 @@ export const useCellState = ({
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
-  const router = useRoute();
-  const screenStateStore = useScreenStateStore();
 
   const _isSelected = useMemo(
-    () =>
-      isSelected({
-        item,
-        screenRoute: router?.pathname,
-        screenStateStore,
-        behavior,
-      }),
+    () => isSelected(item, behavior),
     [behavior, item, lastUpdate]
   );
 

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",
-    background: "black",
+    backgroundColor: "black",
   },
   playerWrapper: {
     height: "100%",
@@ -145,7 +145,6 @@ const nativeStyles = {
   },
   playerScreen: {
     flex: 1,
-    backgroundColor: "black",
     overflow: "hidden",
   },
   playerWrapper: {
@@ -565,8 +564,9 @@ const PlayerContainerComponent = (props: Props) => {
   const isInlineTV = isInlineTVUtil(screenData);
 
   const inline =
-    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(mode) ||
-    isInlineTV;
+    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(
+      mode as any
+    ) || isInlineTV;
 
   const value = React.useMemo(
     () => ({ playerId: state.playerId }),
@@ -587,7 +587,11 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
+    if (
+      screen_background_color &&
+      mode !== VideoModalMode.FULLSCREEN &&
+      isTV()
+    ) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -617,6 +621,8 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
+  const pointerEventsProp = mode === "MINIMIZED" ? "box-none" : "auto";
+
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -637,14 +643,17 @@ const PlayerContainerComponent = (props: Props) => {
                 preferredFocus
                 shouldUsePreferredFocus
                 groupId={groupId}
+                pointerEvents={pointerEventsProp}
               >
                 {/* Video player and components */}
                 <View
                   style={styles.playerScreen}
                   testID={"player-screen-container"}
+                  pointerEvents={pointerEventsProp}
                 >
                   {/* Player container */}
                   <View
+                    pointerEvents={pointerEventsProp}
                     style={[
                       styles.playerWrapper,
                       // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals

package/Components/TextInputTv/__tests__/__snapshots__/TextInputTv.test.js.snap

@@ -2,6 +2,19 @@
 
 exports[`<TextInputTv /> renders 1`] = `
 <input
+  accessibilityProps={
+    {
+      "accessibilityHint": "Enter text into Search",
+      "accessibilityLabel": "Search",
+      "accessibilityRole": "textbox",
+      "accessible": true,
+      "aria-description": "Enter text into Search",
+      "aria-label": "Search",
+      "aria-role": "textbox",
+      "role": "textbox",
+      "tabindex": 0,
+    }
+  }
   testID="TextInput-tv"
 />
 `;

package/Components/TextInputTv/index.tsx

@@ -4,6 +4,7 @@ import { Appearance, Platform, StyleSheet, TextInput } from "react-native";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = Partial<{
   style: any;
@@ -42,6 +43,8 @@ function TextInputTV(props: Props, ref) {
   const [colorScheme, setColorScheme] = useState(getInitialColorScheme());
   const isRTL = useIsRTL();
 
+  const accessibilityManager = useAccessibilityManager({});
+
   const onColorChange = useCallback(
     ({ colorScheme: color }) => {
       if (color !== colorScheme) {
@@ -153,6 +156,13 @@ function TextInputTV(props: Props, ref) {
       ])
     )(props);
 
+  const getAccessibilityProps = () => {
+    return {
+      accessibilityProps:
+        accessibilityManager.getInputAccessibilityProps("Search"),
+    };
+  };
+
   const inputProps = {
     ...getProps(),
     ...getStyle(),
@@ -161,6 +171,7 @@ function TextInputTV(props: Props, ref) {
     ...getSecureTextEntry(),
     ...getOnEndEditing(),
     ...getOnPress(),
+    ...getAccessibilityProps(),
   };
 
   if (

package/Components/Transitioner/Scene.tsx

@@ -36,7 +36,6 @@ export function CurrentScreenContextProvider({
   screenData: NavigationScreenData;
 }) {
   const { pathname, isActive = false, screenData } = props;
-  console.log("CurrentScreenContextProvider", { screenData });
 
   const [initialScreenData, setInitialScreenData] = React.useState(screenData);
 

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Animated } from "react-native";
+import { Animated, Dimensions } from "react-native";
 
 import {
   useSafeAreaInsets,
@@ -23,6 +23,7 @@ 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;
@@ -48,6 +49,7 @@ export type ModalAnimationContextT = {
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
+  yTranslate: React.createRef<Animated.Value | null>(),
   isActiveGesture: false,
   playerAnimationState: null,
   setPlayerAnimationState: () => null,
@@ -73,6 +75,10 @@ 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);
 
@@ -100,6 +106,7 @@ 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]);
 
@@ -141,6 +148,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ReactContext.Provider
       value={{
+        yTranslate,
         startComponentsAnimation,
         setStartComponentsAnimation,
         isActiveGesture: playerAnimationState !== null,

package/Components/VideoModal/PlayerDetails.tsx

@@ -11,6 +11,8 @@ 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");
 
@@ -26,6 +28,10 @@ type Props = {
   isTabletLandscape?: boolean;
   isAudioPlayer?: boolean;
   isTablet?: boolean;
+  inline?: any;
+  docked?: boolean;
+  isModal?: boolean;
+  pip?: boolean;
 };
 
 const containerStyle = ({
@@ -42,8 +48,24 @@ export const PlayerDetails = ({
   configuration,
   isTabletLandscape = false,
   isAudioPlayer,
-  isTablet = false,
+  inline,
+  docked,
+  isModal,
+  pip,
 }: 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();
 
@@ -79,7 +101,7 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
-  if (isNilOrEmpty(screenData?.ui_components)) {
+  if (isNilOrEmpty(screenData?.ui_components) || !isShowPlayerDetails) {
     return null;
   }