@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 15.0.0-rc.1

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
@@ -88,7 +92,7 @@ export const VideoModalMode = {
   MAXIMIZED: "MAXIMIZED",
   MINIMIZED: "MINIMIZED",
   FULLSCREEN: "FULLSCREEN",
-};
+} as const;
 
 export type PlayNextData = {
   state: PlayNextState;
@@ -127,7 +131,7 @@ const webStyles = {
   playerScreen: {
     flex: 1,
     height: "100vh",
-    background: "black",
+    backgroundColor: "black",
   },
   playerWrapper: {
     height: "100%",
@@ -135,9 +139,6 @@ const webStyles = {
   },
   inlineRiver: {
     height: INLINE_CONTAINER_CONTENT_HEIGHT,
-
-    borderWidth: 4,
-    borderColor: "yellow",
   },
 };
 
@@ -148,7 +149,6 @@ const nativeStyles = {
   },
   playerScreen: {
     flex: 1,
-    backgroundColor: "black",
     overflow: "hidden",
   },
   playerWrapper: {
@@ -263,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 });
 
@@ -393,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(() => {
@@ -413,7 +423,10 @@ const PlayerContainerComponent = (props: Props) => {
       id: playerContainerId,
       listener: {
         onVideoEnd,
-        onError,
+        onError: (err: Error) => {
+          // Adapt Error to the expected shape for onError
+          onError({ error: err });
+        },
         onLoad,
         onPlayerClose: close,
         onPlayerDetached: close,
@@ -512,16 +525,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 });
 
@@ -568,8 +571,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 }),
@@ -590,7 +594,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;
     }
 
@@ -620,6 +628,8 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
+  const pointerEventsProp = mode === "MINIMIZED" ? "box-none" : "auto";
+
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -630,9 +640,9 @@ const PlayerContainerComponent = (props: Props) => {
         <PlayerContainerContext.Consumer>
           {(context) => (
             <TVEventHandlerComponent
-              tvEventHandler={(_component, event) =>
-                playerRemoteHandler(event, context.isLanguageOverlayVisible)
-              }
+              tvEventHandler={playerRemoteHandler(
+                context.isLanguageOverlayVisible
+              )}
             >
               <FocusableGroup
                 id={FocusableGroupMainContainerId}
@@ -640,14 +650,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
@@ -719,7 +732,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/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/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/ComponentsMap/hooks/__tests__/useLoadingState.test.ts

@@ -0,0 +1,378 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { BehaviorSubject } from "rxjs";
+import { useLoadingState } from "../useLoadingState";
+
+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,10 @@ 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 { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
@@ -61,38 +60,33 @@ export const usePullToRefresh = (
 ) => {
   const isPipesV1 = !!pullToRefreshPipesV1RefreshingStateUpdater;
 
-  const dispatch = useDispatch();
-
   const [refreshing, setRefreshing] = React.useState(false);
 
   const feeds: string[] =
     riverComponents?.map(R.path(["data", "source"])).filter((feed) => !!feed) ??
     [];
 
-  const screenData = useCurrentScreenData();
-
   const feedsLength = feeds.length;
 
   const [requestsCompletedCounter, setRequestsCompletedCounter] =
     React.useState(0);
 
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
   React.useEffect(() => {
     // will not work for pipes v1 on 1st level screens
     if (refreshing && !isPipesV1) {
       feeds.forEach((feed) => {
-        dispatch(
-          loadPipesData(feed, {
-            silentRefresh: true,
-            clearCache: true,
-            callback: () => {
-              setRequestsCompletedCounter(R.inc);
-            },
-            riverId: screenData.id,
-          })
-        );
+        loadPipesDataDispatcher(feed, {
+          silentRefresh: true,
+          clearCache: true,
+          callback: () => {
+            setRequestsCompletedCounter(R.inc);
+          },
+        });
       });
     }
-  }, [refreshing, isPipesV1]);
+  }, [refreshing, isPipesV1, feeds, loadPipesDataDispatcher]);
 
   React.useEffect(() => {
     if (requestsCompletedCounter === feedsLength) {