@applicaster/zapp-react-native-ui-components 15.0.0-alpha.3514407021 → 15.0.0-alpha.3564377339

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -1,6 +1,11 @@
 import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { once } from "ramda";
+import { race, Subject, Subscription } from "rxjs";
+import { first } from "rxjs/operators";
+
+import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const MAX_TIMEOUT_TO_WAIT_COMPONENTS_TO_LOAD = 2000; // 2 seconds
 
 const INITIAL_NUMBER_TO_LOAD = 3;
 
@@ -34,7 +39,8 @@ const getNumberOfComponentsWaitToLoadBeforePresent = (
 export class ScreenRevealManager {
   public numberOfComponentsWaitToLoadBeforePresent: number;
   private renderingState: Array<ComponentLoadingState>;
-  private callback: Callback;
+  private subject$ = new Subject<void>();
+  private subscription: Subscription;
 
   constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
     this.numberOfComponentsWaitToLoadBeforePresent =
@@ -45,32 +51,58 @@ export class ScreenRevealManager {
       this.numberOfComponentsWaitToLoadBeforePresent
     );
 
-    this.callback = once(callback);
+    this.subscription = race(
+      withTimeout$(MAX_TIMEOUT_TO_WAIT_COMPONENTS_TO_LOAD),
+      this.subject$
+    )
+      .pipe(first())
+      .subscribe(callback);
   }
 
   onLoadFinished = (index: number): void => {
+    const currentState = this.renderingState[index];
+
+    if (
+      COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS === currentState ||
+      COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE === currentState
+    ) {
+      return;
+    }
+
     this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS;
 
     if (
       getNumberOfLoaded(this.renderingState) >=
       this.numberOfComponentsWaitToLoadBeforePresent
     ) {
-      this.setIsReadyToShow();
+      this.subject$.next();
+      this.subject$.complete();
     }
   };
 
   onLoadFailed = (index: number): void => {
+    const currentState = this.renderingState[index];
+
+    if (
+      COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS === currentState ||
+      COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE === currentState
+    ) {
+      return;
+    }
+
     this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE;
 
     if (
       getNumberOfLoaded(this.renderingState) >=
       this.numberOfComponentsWaitToLoadBeforePresent
     ) {
-      this.setIsReadyToShow();
+      this.subject$.next();
+      this.subject$.complete();
     }
   };
 
-  setIsReadyToShow = (): void => {
-    this.callback();
-  };
+  dispose(): void {
+    this.subscription?.unsubscribe();
+    this.subject$.complete();
+  }
 }

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -2,106 +2,123 @@ import {
   ScreenRevealManager,
   COMPONENT_LOADING_STATE,
 } from "../ScreenRevealManager";
+import { Subject } from "rxjs";
+
+jest.mock("@applicaster/zapp-react-native-utils/arrayUtils", () => ({
+  makeListOf: jest.fn((value: any, length: number) =>
+    Array(length).fill(value)
+  ),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/componentsUtils", () => ({
+  isFirstComponentGallery: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/idleUtils", () => ({
+  withTimeout$: jest.fn(),
+}));
+
+import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
 describe("ScreenRevealManager", () => {
-  const mockCallback = jest.fn();
+  let mockCallback: jest.Mock;
+  let timeout$: Subject<void>;
 
   beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should initialize with the correct number of components to wait for", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+    jest.useFakeTimers();
+    mockCallback = jest.fn();
+    timeout$ = new Subject();
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    (withTimeout$ as jest.Mock).mockReturnValue(timeout$);
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
 
-    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+    (makeListOf as jest.Mock).mockImplementation((value, length) =>
+      Array(length).fill(value)
+    );
+  });
 
-    expect(manager.renderingState).toEqual([
-      COMPONENT_LOADING_STATE.UNKNOWN,
-      COMPONENT_LOADING_STATE.UNKNOWN,
-      COMPONENT_LOADING_STATE.UNKNOWN,
-    ]);
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+    jest.resetAllMocks();
   });
 
-  it("should call the callback when the required number of components are loaded successfully", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should initialize with correct number of components and UNKNOWN state", () => {
+    const components = new Array(5).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+    expect(makeListOf).toHaveBeenCalledWith(COMPONENT_LOADING_STATE.UNKNOWN, 3);
+  });
 
-    manager.onLoadFinished(0);
-    manager.onLoadFinished(1);
-    manager.onLoadFinished(2);
+  // ────────────────────────────────────────────────
+  it("should set numberOfComponentsWaitToLoadBeforePresent to 1 if first component is gallery", () => {
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(true);
 
-    expect(mockCallback).toHaveBeenCalledTimes(1);
+    const components = new Array(5).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
+
+    expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(1);
   });
 
-  it("should call the callback when the required number of components fail to load", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should trigger callback after all components load successfully", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    mgr.onLoadFinished(0);
+    expect(mockCallback).not.toHaveBeenCalled();
 
-    manager.onLoadFailed(0);
-    manager.onLoadFailed(1);
-    manager.onLoadFailed(2);
+    mgr.onLoadFinished(1);
+    expect(mockCallback).not.toHaveBeenCalled();
 
+    mgr.onLoadFinished(2);
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("should call the callback when a mix of successful and failed loads meet the required number", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
-
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+  // ────────────────────────────────────────────────
+  it("should trigger callback after some components fail to load but all finished", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    manager.onLoadFinished(0);
-    manager.onLoadFailed(1);
-    manager.onLoadFinished(2);
+    mgr.onLoadFinished(0);
+    mgr.onLoadFailed(1);
+    mgr.onLoadFailed(2);
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("should not call the callback if the required number of components are not loaded", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
-
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+  // ────────────────────────────────────────────────
+  it("should not trigger callback twice when same component finishes twice", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    manager.onLoadFinished(0);
-    manager.onLoadFailed(1);
+    mgr.onLoadFinished(0);
+    mgr.onLoadFinished(0); // duplicate
+    mgr.onLoadFinished(1);
+    mgr.onLoadFinished(2);
 
-    expect(mockCallback).not.toHaveBeenCalled();
+    expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("should call the callback when the when first component is gallery and it was loaded successfully", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "gallery-qb" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should trigger callback when timeout$ emits before all loaded", () => {
+    const components = new Array(3).fill({});
+    new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
-
-    manager.onLoadFinished(0);
+    timeout$.next(); // simulate timeout event from withTimeout$
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
+
+  // ────────────────────────────────────────────────
+  it("should not call callback if nothing loads and no timeout emitted", () => {
+    const components = new Array(3).fill({});
+    new ScreenRevealManager(components, mockCallback);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
 });

package/Components/Tabs/TV/Tabs.tsx

@@ -8,6 +8,7 @@ import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 import { Gutter } from "../Gutter";
 import Tab from "./Tab";
 import { getStyles } from "./styles";
@@ -28,11 +29,14 @@ const TabsComponent = ({
   style,
   selectedEntryIndex,
   setSelectedEntry,
+  accessibility,
 }: TabsProps & Partial<TabsSelectionContextType>) => {
   const configuration = useConfiguration();
   const config = applyFontConfig(configuration);
   const styles = useMemo(() => getStyles(config), [config]);
 
+  const accessibilityManager = useAccessibilityManager({});
+
   const {
     tab_bar_gutter: horizontalGutter,
     tab_bar_background_image: bgImage,
@@ -60,10 +64,20 @@ const TabsComponent = ({
   );
 
   const onListElementFocus = useCallback(
-    (index) => {
+    (index, isSelected: boolean, item: ZappEntry) => {
+      if (isSelected) {
+        accessibilityManager.readText({
+          text: `${accessibility?.selectedHint} ${item.title}`,
+        });
+      } else {
+        accessibilityManager.readText({
+          text: `${accessibility?.hint} ${item.title}`,
+        });
+      }
+
       scrollToSelectedIndex(index, VIEW_POSITION);
     },
-    [scrollToSelectedIndex]
+    [scrollToSelectedIndex, accessibility]
   );
 
   const renderItem = useCallback(
@@ -94,7 +108,7 @@ const TabsComponent = ({
           id={itemId}
           testID={itemId}
           preferredFocus={isSelected}
-          onFocus={() => onListElementFocus(index)}
+          onFocus={() => onListElementFocus(index, isSelected, item)}
           onPress={() => setSelectedEntry && setSelectedEntry(item)}
           style={style}
         >
@@ -149,6 +163,9 @@ const TabsComponent = ({
         shouldUsePreferredFocus
         isWithMemory={false}
         nextFocusDown={parentFocus?.nextFocusDown}
+        onFocus={() => {
+          accessibilityManager.addHeading(accessibility?.announcement);
+        }}
       >
         <View style={tabs}>
           <ImageBackground

package/Components/Transitioner/Scene.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { equals } from "ramda";
 import { Animated, ViewProps, ViewStyle } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
@@ -95,9 +95,22 @@ function SceneComponent({
   });
 
   const frame = useSafeAreaFrame();
+
+  const [memoFrame, setMemoFrame] = React.useState(frame);
+
+  useEffect(() => {
+    if (isActive) {
+      setMemoFrame((oldFrame) =>
+        oldFrame.width === frame.width && oldFrame.height === frame.height
+          ? oldFrame
+          : frame
+      );
+    }
+  }, [isActive, frame.width, frame.height]);
+
   const isAnimating = animating && overlayStyle;
 
-  const dimensions = isAnimating ? fullWidthDimensions : frame;
+  const dimensions = isAnimating ? fullWidthDimensions : memoFrame;
 
   return (
     <Animated.View

package/Components/Transitioner/index.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppData } from "@applicaster/zapp-react-native-redux";
+
 import { TransitionerComponent } from "./Transitioner";
 
 export const Transitioner = (props) => {
@@ -16,8 +17,7 @@ export const Transitioner = (props) => {
     deviceInfo: true,
   });
 
-  const { appData } = usePickFromState(["appData"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const { isTabletPortrait } = useAppData();
 
   return (
     <TransitionerComponent

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
   <View>
     <View
       collapsable={false}
+      renderToHardwareTextureAndroid={false}
       style={
         {
           "opacity": 1,