@applicaster/zapp-react-native-ui-components 14.0.0-alpha.9256258513 → 14.0.0-alpha.9551591420

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { useEffect, useReducer } from "react";
-// @ts-ignore
-import { TVMenuControl, View, ViewStyle } from "react-native";
+import { View, ViewStyle } from "react-native";
 import * as R from "ramda";
 import uuid from "uuid/v4";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
@@ -62,6 +61,11 @@ import {
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
+import {
+  PlayerNativeCommandTypes,
+  PlayerNativeSendCommand,
+} from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
+
 type Props = {
   Player: React.ComponentType<any>;
   PlayerLoadingView?: React.ComponentType<any>; // 👀 we are not receiving this prop
@@ -259,9 +263,15 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
+    // send command to clear and stop player
+    PlayerNativeSendCommand(
+      PlayerNativeCommandTypes.clearPlayerData,
+      state.playerId
+    );
+
     showNavBar(true);
     navigator.goBack();
-  }, [isModal, navigator.goBack, showNavBar]);
+  }, [isModal, navigator.goBack, state.playerId, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
@@ -389,13 +399,17 @@ const PlayerContainerComponent = (props: Props) => {
     }
   };
 
-  const playerRemoteHandler = (event, isLanguageOverlayVisible) => {
-    const { eventType } = event;
+  const playerRemoteHandler = React.useCallback(
+    (isLanguageOverlayVisible = false) =>
+      (event) => {
+        const { eventType } = event;
 
-    if (!isLanguageOverlayVisible && eventType === "menu") {
-      close();
-    }
-  };
+        if (!isLanguageOverlayVisible && eventType === "menu") {
+          close();
+        }
+      },
+    [close]
+  );
 
   // Effects
   useEffect(() => {
@@ -508,16 +522,6 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, [isAudioContent]);
 
-  // Needs to handle back button on Apple TV
-  // https://github.com/facebook/react-native/issues/18930
-  useEffect(() => {
-    TVMenuControl?.enableTVMenuKey();
-
-    return () => {
-      TVMenuControl?.disableTVMenuKey();
-    };
-  }, []);
-
   useEffect(() => {
     playerEvent("source_changed", { item });
 
@@ -633,9 +637,9 @@ const PlayerContainerComponent = (props: Props) => {
         <PlayerContainerContext.Consumer>
           {(context) => (
             <TVEventHandlerComponent
-              tvEventHandler={(_component, event) =>
-                playerRemoteHandler(event, context.isLanguageOverlayVisible)
-              }
+              tvEventHandler={playerRemoteHandler(
+                context.isLanguageOverlayVisible
+              )}
             >
               <FocusableGroup
                 id={FocusableGroupMainContainerId}

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -1,4 +1,4 @@
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";

package/Components/PlayerContainer/index.ts

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 import { PlayerContainer as PlayerContainerComponent } from "./PlayerContainer";

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/ComponentsMap/hooks/__tests__/useLoadingState.test.ts

@@ -0,0 +1,379 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { BehaviorSubject } from "rxjs";
+import { useLoadingState } from "../useLoadingState";
+
+// Mock the useRefWithInitialValue hook
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue",
+  () => ({
+    useRefWithInitialValue: jest.fn((initializer) => ({
+      current: initializer(),
+    })),
+  })
+);
+
+describe("useLoadingState", () => {
+  let onLoadDone: jest.Mock;
+
+  beforeEach(() => {
+    onLoadDone = jest.fn();
+    jest.clearAllMocks();
+  });
+
+  describe("initialization", () => {
+    it("should initialize with correct default state for zero components", () => {
+      const { result } = renderHook(() => useLoadingState(0, onLoadDone));
+
+      const initialState = result.current.loadingState.getValue();
+
+      expect(initialState).toEqual({
+        index: -1,
+        done: true,
+        waitForAllComponents: false,
+      });
+
+      expect(result.current.shouldShowLoadingError).toBe(false);
+    });
+
+    it("should initialize with correct default state for multiple components", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      const initialState = result.current.loadingState.getValue();
+
+      expect(initialState).toEqual({
+        index: -1,
+        done: false,
+        waitForAllComponents: false,
+      });
+
+      expect(result.current.shouldShowLoadingError).toBe(false);
+    });
+
+    it("should return a BehaviorSubject for loadingState", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      expect(result.current.loadingState).toBeInstanceOf(BehaviorSubject);
+    });
+  });
+
+  describe("arePreviousComponentsLoaded", () => {
+    it("should return true for index 0 (first component)", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      expect(result.current.arePreviousComponentsLoaded(0)).toBe(true);
+    });
+
+    it("should return false when previous components are not loaded", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      expect(result.current.arePreviousComponentsLoaded(1)).toBe(false);
+      expect(result.current.arePreviousComponentsLoaded(2)).toBe(false);
+    });
+
+    it("should return true when all previous components are loaded", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      expect(result.current.arePreviousComponentsLoaded(1)).toBe(true);
+      expect(result.current.arePreviousComponentsLoaded(2)).toBe(false);
+
+      act(() => {
+        result.current.onLoadFinished(1);
+      });
+
+      expect(result.current.arePreviousComponentsLoaded(2)).toBe(true);
+    });
+  });
+
+  describe("onLoadFinished", () => {
+    it("should update component state and loading state when component finishes loading", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.index).toBe(0);
+      expect(state.done).toBe(false);
+    });
+
+    it("should update index to highest loaded component", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(2);
+      });
+
+      let state = result.current.loadingState.getValue();
+      expect(state.index).toBe(2);
+
+      act(() => {
+        result.current.onLoadFinished(1);
+      });
+
+      state = result.current.loadingState.getValue();
+      expect(state.index).toBe(2); // Should remain 2, not decrease to 1
+    });
+
+    it("should mark as done when all components are loaded", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      let state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true); // True because arePreviousComponentsLoaded(1) returns true when component 0 is loaded
+      expect(onLoadDone).toHaveBeenCalledTimes(1);
+
+      act(() => {
+        result.current.onLoadFinished(1);
+      });
+
+      state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+      expect(onLoadDone).toHaveBeenCalledTimes(2); // Called again
+    });
+
+    it("should call onLoadDone when count is 0", () => {
+      const { result } = renderHook(() => useLoadingState(0, onLoadDone));
+
+      const state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+      // onLoadDone is not called on initialization for count 0, only when all components are loaded via dispatch
+    });
+
+    it("should handle loading components out of order", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      // Load component 2 first
+      act(() => {
+        result.current.onLoadFinished(2);
+      });
+
+      let state = result.current.loadingState.getValue();
+      expect(state.done).toBe(false);
+
+      // Load component 0
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      state = result.current.loadingState.getValue();
+      expect(state.done).toBe(false);
+
+      // Load component 1 - should complete loading
+      act(() => {
+        result.current.onLoadFinished(1);
+      });
+
+      state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+      expect(onLoadDone).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call onLoadDone again on subsequent dispatches", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+        result.current.onLoadFinished(1);
+      });
+
+      expect(onLoadDone).toHaveBeenCalledTimes(2); // Called for each dispatch when done is true
+
+      // Try loading again - onLoadDone will be called again because dispatch runs again
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      expect(onLoadDone).toHaveBeenCalledTimes(3); // Will be called again
+    });
+  });
+
+  describe("onLoadFailed", () => {
+    it("should treat failed components as loaded when SHOULD_FAIL_ON_COMPONENT_LOADING is false", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      const error = new Error("Load failed");
+
+      act(() => {
+        result.current.onLoadFailed({ error, index: 0 });
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.index).toBe(0);
+      expect(result.current.shouldShowLoadingError).toBe(false);
+    });
+
+    it("should complete loading when all components fail", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      const error = new Error("Load failed");
+
+      act(() => {
+        result.current.onLoadFailed({ error, index: 0 });
+        result.current.onLoadFailed({ error, index: 1 });
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+      expect(onLoadDone).toHaveBeenCalledTimes(2); // Called for each failed component
+    });
+
+    it("should handle mixed success and failure", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      const error = new Error("Load failed");
+
+      act(() => {
+        result.current.onLoadFinished(0);
+        result.current.onLoadFailed({ error, index: 1 });
+        result.current.onLoadFinished(2);
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+      expect(onLoadDone).toHaveBeenCalledTimes(2); // Called when all components 0,1,2 are handled
+    });
+  });
+
+  describe("loading state observable", () => {
+    it("should emit state changes through BehaviorSubject", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone)); // Use 3 components so loading component 0 doesn't complete everything
+      const mockSubscriber = jest.fn();
+
+      result.current.loadingState.subscribe(mockSubscriber);
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      // Should have been called twice: initial state + update
+      expect(mockSubscriber).toHaveBeenCalledTimes(2);
+
+      expect(mockSubscriber).toHaveBeenLastCalledWith({
+        index: 0,
+        done: false, // Will be false because we need components 1 and 2 as well
+        waitForAllComponents: false,
+      });
+    });
+
+    it("should preserve waitForAllComponents flag in state updates", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.waitForAllComponents).toBe(false);
+    });
+  });
+
+  describe("memoization", () => {
+    it("should return stable references for functions", () => {
+      const { result, rerender } = renderHook(() =>
+        useLoadingState(2, onLoadDone)
+      );
+
+      const firstRender = {
+        onLoadFinished: result.current.onLoadFinished,
+        onLoadFailed: result.current.onLoadFailed,
+        arePreviousComponentsLoaded: result.current.arePreviousComponentsLoaded,
+      };
+
+      rerender();
+
+      expect(result.current.onLoadFinished).toBe(firstRender.onLoadFinished);
+      expect(result.current.onLoadFailed).toBe(firstRender.onLoadFailed);
+
+      expect(result.current.arePreviousComponentsLoaded).toBe(
+        firstRender.arePreviousComponentsLoaded
+      );
+    });
+
+    it("should return stable function references (current behavior)", () => {
+      const { result, rerender } = renderHook(
+        ({ onLoadDone }) => useLoadingState(2, onLoadDone),
+        { initialProps: { onLoadDone } }
+      );
+
+      const firstResult = result.current;
+
+      const newOnLoadDone = jest.fn();
+      rerender({ onLoadDone: newOnLoadDone });
+
+      // Functions should remain the same due to empty dependency arrays (this is the current behavior)
+      expect(result.current.onLoadFinished).toBe(firstResult.onLoadFinished);
+      expect(result.current.onLoadFailed).toBe(firstResult.onLoadFailed);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle duplicate load finished calls gracefully", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+        result.current.onLoadFinished(0); // Duplicate call
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.index).toBe(0);
+      expect(state.done).toBe(true); // True because loading component 0 makes it done in a 2-component setup
+    });
+
+    it("should handle loading index greater than component count", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(5); // Index out of bounds
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.index).toBe(5);
+      expect(state.done).toBe(false); // Should not be done as not all components loaded
+    });
+
+    it("should handle negative indices", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(-1);
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.index).toBe(-1); // Should remain -1
+    });
+  });
+
+  describe("component count changes", () => {
+    it("should handle changing component count", () => {
+      const { result, rerender } = renderHook(
+        ({ count }) => useLoadingState(count, onLoadDone),
+        { initialProps: { count: 2 } }
+      );
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      // Change count
+      rerender({ count: 3 });
+
+      // The hook should work with the new count
+      act(() => {
+        result.current.onLoadFinished(1);
+        result.current.onLoadFinished(2);
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+    });
+  });
+});

package/Components/River/ComponentsMap/hooks/useLoadingState.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { isNil, set, lensIndex, T, slice } from "ramda";
+import { isNil, set, lensIndex, slice } from "ramda";
 import { BehaviorSubject } from "rxjs";
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
 
@@ -53,7 +53,7 @@ export const useLoadingState = (
 
     const componentsBefore = slice(0, index, componentStateRef.current);
 
-    return componentsBefore.every(T);
+    return componentsBefore.every(Boolean);
   }, []);
 
   const dispatch = React.useCallback(({ payload }) => {

package/Components/River/RefreshControl.tsx

@@ -10,11 +10,13 @@ import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/locali
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useCurrentScreenData";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-import { useDispatch } from "react-redux";
 import { useShallow } from "zustand/react/shallow";
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  ZappPipes,
+  useAppDispatch,
+} from "@applicaster/zapp-react-native-redux";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
@@ -61,7 +63,7 @@ export const usePullToRefresh = (
 ) => {
   const isPipesV1 = !!pullToRefreshPipesV1RefreshingStateUpdater;
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const [refreshing, setRefreshing] = React.useState(false);
 
@@ -81,7 +83,7 @@ export const usePullToRefresh = (
     if (refreshing && !isPipesV1) {
       feeds.forEach((feed) => {
         dispatch(
-          loadPipesData(feed, {
+          ZappPipes.loadPipesData(feed, {
             silentRefresh: true,
             clearCache: true,
             callback: () => {

package/Components/River/TV/River.tsx

@@ -4,10 +4,6 @@ import * as React from "react";
 import { Text } from "react-native";
 import * as R from "ramda";
 
-import {
-  useFeedLoader,
-  useLayoutVersion,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
@@ -21,6 +17,7 @@ type Props = {
   screenId: string;
   screenData: ZappRiver | ZappEntry;
   feedUrl?: string;
+  feedData?: PipesDataObject["data"];
   extraProps?: any;
   screenResolverExtraProps?: any;
   componentsMapExtraProps?: any;
@@ -32,7 +29,7 @@ type Props = {
 export const River = (props: Props) => {
   const {
     screenId,
-    feedUrl,
+    feedData,
     extraProps,
     screenResolverExtraProps,
     componentsMapExtraProps,
@@ -46,7 +43,6 @@ export const River = (props: Props) => {
     useSetNavbarState();
 
   const rivers = useRivers();
-  const isV2 = useLayoutVersion({ isV2: true });
 
   const river = React.useMemo(() => rivers?.[screenId], [screenId]);
 
@@ -55,17 +51,6 @@ export const River = (props: Props) => {
     [screenId]
   );
 
-  const connectedScreenUrl = React.useMemo(() => {
-    // Avoid using feedUrl or content.src on layouts v2
-    if (isV2) return null;
-
-    return feedUrl || R.path(["content", "src"], screenData);
-  }, [feedUrl, screenData]);
-
-  const { data: feedData } = useFeedLoader({
-    feedUrl: connectedScreenUrl,
-  });
-
   const stringOrEmpty = (value: string | number | undefined): string =>
     R.isNil(value) ? "" : String(value);
 

package/Components/River/TV/index.tsx

@@ -2,8 +2,10 @@ import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
 import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
+import { withRiverDataLoader } from "./withRiverDataLoader";
 
 export const River = compose(
   withTvEventHandler,
-  withComponentsMapOffsetContext
+  withComponentsMapOffsetContext,
+  withRiverDataLoader
 )(RiverComponent);

package/Components/River/TV/withPipesV1DataLoader.tsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { path } from "ramda";
+
+import {
+  useFeedLoader,
+  useRivers,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+
+type Props = {
+  screenId: string;
+  screenData: ZappRiver | ZappEntry;
+  feedUrl?: string;
+  river?: ZappRiver | ZappEntry;
+};
+
+export const withPipesV1DataLoader = (
+  WrappedComponent: React.ComponentType<any>
+) => {
+  return function WithPipesV1DataLoaderComponent(props: Props) {
+    const { screenId, feedUrl } = props;
+
+    const rivers = useRivers();
+
+    const river = React.useMemo(() => rivers?.[screenId], [screenId]);
+
+    const screenData = React.useMemo(
+      () => props.screenData || props.river || river,
+      [screenId]
+    );
+
+    const connectedScreenUrl = useMemo(() => {
+      // Avoid using feedUrl or content.src on layouts v2
+
+      return feedUrl || path(["content", "src"], screenData);
+    }, [feedUrl, screenData]);
+
+    const { data: feedData } = useFeedLoader({
+      feedUrl: connectedScreenUrl,
+    });
+
+    return <WrappedComponent {...props} feedData={feedData} />;
+  };
+};

package/Components/River/TV/withRiverDataLoader.tsx

@@ -0,0 +1,17 @@
+import { useLayoutVersion } from "@applicaster/zapp-react-native-utils/reactHooks";
+import React from "react";
+import { withPipesV1DataLoader } from "./withPipesV1DataLoader";
+
+export const withRiverDataLoader = (
+  WrappedComponent: React.ComponentType<any>
+) => {
+  return function WithRiverDataLoaderComponent(props) {
+    const isV2 = useLayoutVersion({ isV2: true });
+
+    if (isV2) {
+      return <WrappedComponent {...props} />;
+    }
+
+    return withPipesV1DataLoader(WrappedComponent)(props);
+  };
+};

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();