@applicaster/zapp-react-native-ui-components 12.0.0-alpha.3977160850 → 12.0.0-alpha.4374801485

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -54,6 +54,8 @@ import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
 type Props = {
   Player: React.ComponentType<any>;
   PlayerLoadingView?: React.ComponentType<any>; // 👀 we are not receiving this prop
@@ -145,34 +147,30 @@ const renderApplePlayer = ({
 }) => {
   const { title, summary } = item || {};
 
-  if (!isApplePlatform()) {
+  if (!isAppleTV() || !player) {
+    return null;
+  }
+
+  if (isAudioContent) {
+    return (
+      <AudioPlayer
+        audio_item={item}
+        plugin_configuration={pluginConfiguration}
+      />
+    );
+  }
+
+  if (!playNextData && player.isPaused() && player.isAd() === false) {
     return null;
   }
 
   return (
-    <>
-      {!playNextData && (
-        <>
-          {!isAudioContent &&
-            !!player?.isPaused() &&
-            !!player?.isAd() === false && (
-              <ProgramInfo
-                title={title}
-                subtitle={summary}
-                plugin_configuration={pluginConfiguration}
-                videoStyle={videoStyle}
-              />
-            )}
-        </>
-      )}
-
-      {isAudioContent && (
-        <AudioPlayer
-          audio_item={item}
-          plugin_configuration={pluginConfiguration}
-        />
-      )}
-    </>
+    <ProgramInfo
+      title={title}
+      subtitle={summary}
+      plugin_configuration={pluginConfiguration}
+      videoStyle={videoStyle}
+    />
   );
 };
 
@@ -339,6 +337,18 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, [item?.id, item?.extensions?.resumeTime, player]);
 
+  const onVideoFullscreenPlayerWillPresent = React.useCallback(() => {
+    playerManager.invokeHandler("toggleFullscreen", {
+      fullscreen: true,
+    });
+  }, []);
+
+  const onVideoFullscreenPlayerWillDismiss = React.useCallback(() => {
+    playerManager.invokeHandler("toggleFullscreen", {
+      fullscreen: false,
+    });
+  }, []);
+
   // Util methods
   const toggleFullscreen = (event) => {
     const { fullscreen = false } = event || {};
@@ -381,17 +391,27 @@ const PlayerContainerComponent = (props: Props) => {
       id: playerContainerId,
       listener: {
         onVideoEnd,
-        onError: onError,
-        onLoad: onLoad,
+        onError,
+        onLoad,
         onPlayerClose: close,
         onPlayerDetached: close,
+        onVideoFullscreenPlayerWillDismiss,
+        onVideoFullscreenPlayerWillPresent,
       },
     });
 
     return () => {
       player.removeListener(playerContainerId);
     };
-  }, [player, onVideoEnd]);
+  }, [
+    player,
+    onVideoEnd,
+    onError,
+    onLoad,
+    close,
+    onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerWillPresent,
+  ]);
 
   useEffect(() => {
     // TODO: We should not use playerManager here to connect buttons to player container
@@ -580,6 +600,9 @@ const PlayerContainerComponent = (props: Props) => {
     pluginConfiguration,
   };
 
+  const { isActiveGesture, startComponentsAnimation } =
+    useModalAnimationContext();
+
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -621,9 +644,13 @@ const PlayerContainerComponent = (props: Props) => {
                         }}
                         focused={isInlineTV ? true : undefined}
                         autoplay={true}
-                        controls={isAppleTV() && !isInlineTV}
+                        controls={false}
                         disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked()}
+                        docked={
+                          navigator.isVideoModalDocked() &&
+                          !startComponentsAnimation &&
+                          !isActiveGesture
+                        }
                         entry={item}
                         fullscreen={mode === VideoModalMode.FULLSCREEN}
                         inline={inline}

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -4,7 +4,9 @@ import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
 import * as R from "ramda";
 import * as React from "react";
-import { Image, Text, TextStyle, View, ViewStyle } from "react-native";
+import { Text, TextStyle, View, ViewStyle } from "react-native";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+
 import * as programStyles from "./styles";
 
 type Props = {

package/Components/PlayerImageBackground/index.tsx

@@ -1,38 +1,64 @@
 import React, { PropsWithChildren } from "react";
-import { ImageBackground } from "react-native";
+import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: { [K: string]: any };
   imageStyle?: { [K: string]: any };
   imageKey?: string;
+  defaultImageDimensions?: { [K: string]: any };
 }>;
 
+const imageSize = { width: "100%", height: "100%" };
+
 const PlayerImageBackgroundComponent = ({
   entry,
   children,
   style,
   imageStyle,
   imageKey,
+  defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
     () => ({ uri: imageSrcFromMediaItem(entry, imageKey) }),
     [imageKey, entry]
   );
 
+  const { playerAnimationState } = useModalAnimationContext();
+
   if (!source) return <>{children}</>;
 
   return (
-    <ImageBackground
-      resizeMode="cover"
-      style={style}
-      imageStyle={imageStyle}
-      source={source}
+    <View
+      style={
+        playerAnimationState === PlayerAnimationStateEnum.maximaze
+          ? defaultImageDimensions
+          : style
+      }
     >
-      {children}
-    </ImageBackground>
+      <AnimationComponent
+        style={style}
+        animationType={ComponentAnimationType.player}
+        additionalData={defaultImageDimensions}
+      >
+        <ImageBackground
+          resizeMode="cover"
+          style={imageSize}
+          imageStyle={imageStyle}
+          source={source}
+        >
+          {children}
+        </ImageBackground>
+      </AnimationComponent>
+    </View>
   );
 };
 

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

@@ -6,6 +6,12 @@ import configureStore from "redux-mock-store";
 
 import * as themeUtils from "@applicaster/zapp-react-native-utils/theme";
 
+// silences the errors related to React-native-gesture-handler in tests
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
+  () => () => null
+);
+
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 50 }),
 }));
@@ -83,6 +89,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   useNavigation: jest.fn(() => ({ currentRoute: "/river/A1234" })),
   useRoute: jest.fn(() => ({ pathname: "/river/A1234", screenData })),
   useProfilerLogging: jest.fn(),
+  useIsScreenActive: jest.fn().mockReturnValue(true),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({

package/Components/RouteManager/index.tsx

@@ -14,7 +14,7 @@ type Props = { pathname: string; screenData: Record<string, any> };
  * @param {Props}: see props above
  */
 export function RouteManager(props: Props) {
-  const { pathname, screenData } = useRoute();
+  const { pathname, screenData: _screenData } = useRoute();
   const pathAttributes = getPathAttributes({ pathname });
 
   const { screenType, screenId } = R.last(pathAttributes);
@@ -25,7 +25,7 @@ export function RouteManager(props: Props) {
         screenType={screenType}
         screenId={screenId}
         {...props}
-        screenData={screenData}
+        screenData={props.screenData}
       />
     </TestId>
   );

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { create, act } from "react-test-renderer";
+import { act, create } from "react-test-renderer";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
@@ -69,12 +69,16 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useRoute: jest.fn(() => ({
     pathname: "/river/testId",
+    screenData: { id: "testId" },
   })),
   useNavigation: jest.fn(() => ({
     canGoBack: () => false,
     currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
     data: { screen: { id: "testId" } },
   })),
+  useIsScreenActive: jest.fn().mockReturnValue(true),
 }));
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -19,6 +19,11 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   <View>
     <View
       pathname="/river/testId"
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>
@@ -44,6 +49,11 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   <View>
     <View
       pathname="/river/testId"
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>

package/Components/Screen/index.tsx

@@ -14,6 +14,7 @@ import {
   useCurrentScreenData,
   useNavbarState,
   useScreenData,
+  useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
 
@@ -22,6 +23,17 @@ import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { useScreenOrientationHandler } from "./orientationHandler";
 
+const getScreenId = (
+  screenData: LegacyNavigationScreenData,
+  fallbackRiver: ZappRiver
+) => {
+  return screenData?.targetScreen
+    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    : "screen_id" in screenData
+    ? screenData.screen_id
+    : fallbackRiver.id;
+};
+
 function colorIsNotTransparent(color) {
   const layers = R.compose(
     R.map(R.trim),
@@ -40,14 +52,13 @@ function isValidColor(string) {
 }
 
 type Props = {
-  pathname: string;
-  screenData: unknown;
   setToggleMenu: () => void;
   setCloseMenu: () => void;
 };
 
 export function Screen({ setToggleMenu, setCloseMenu }: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
+  const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
 
   // Gets the data for the current screen configuration
@@ -62,9 +73,7 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
   const routeData = useRoute();
 
   const currentRiver = useScreenData(
-    (routeData.screenData as ZappRiver)?.targetScreen
-      ? (routeData.screenData as ZappRiver)?.targetScreen.id
-      : (routeData.screenData as ZappRiver)?.screen_id
+    getScreenId(routeData.screenData, navigation.activeRiver)
   );
 
   const { title } = useNavbarState();
@@ -128,7 +137,7 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
           {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
         />
 
-        <OfflineFallbackScreen screenData={screenData}>
+        <OfflineFallbackScreen screenData={targetScreenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
           <RouteManager pathname={pathname} screenData={screenData} />
         </OfflineFallbackScreen>

package/Components/Tabs/TV/styles.ts

@@ -78,7 +78,7 @@ export const getStyles = (config): Partial<TVTabsStyles> => {
         },
         tvos: {
           marginTop: -1,
-        }
+        },
       }),
     },
     tabsBackground: {

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -14,7 +14,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import { getUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
-import { PlayerImageBackground } from "../PlayerImageBackground";
+import Image from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/Image";
 import { LiveImage, LiveImageManager, LiveImageType } from "./LiveImageManager";
 
 import { AnimatedInOut } from "@applicaster/zapp-react-native-ui-components/Components/AnimatedInOut";
@@ -39,12 +39,13 @@ type Props = {
   imageKey?: string;
   screenConfig: Record<string, any>;
   audioMutedByDefault?: boolean;
+  uri: string; // cover image url
 };
 
 const PlayerLiveImageComponent = (props: Props) => {
   const dimensions = useDimensions("screen", { fullDimensions: true });
 
-  const { item, style, playerId, imageKey } = props;
+  const { item, style, playerId } = props;
 
   const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
   const [mode, setMode] = React.useState(LiveImageType.Image);
@@ -63,24 +64,27 @@ const PlayerLiveImageComponent = (props: Props) => {
    *
    * @param type video or image
    */
-  const setModeDebounced = React.useCallback((type: LiveImageType) => {
-    if (type === LiveImageType.Video) {
-      if (type === mode) {
-        return;
-      }
+  const setModeDebounced = React.useCallback(
+    (type: LiveImageType) => {
+      if (type === LiveImageType.Video) {
+        if (type === mode) {
+          return;
+        }
+
+        timeoutRef.current = setTimeout(() => {
+          setMode(type);
+        }, 1000) as unknown as NodeJS.Timeout;
+      } else {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
 
-      timeoutRef.current = setTimeout(() => {
         setMode(type);
-      }, 1000) as unknown as NodeJS.Timeout;
-    } else {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
       }
-
-      setMode(type);
-    }
-  }, [mode]);
+    },
+    [mode]
+  );
 
   const { screenConfig, playerPluginId } = props;
 
@@ -100,7 +104,7 @@ const PlayerLiveImageComponent = (props: Props) => {
       return new LiveImage({
         playerId,
         player: playerFactoryItem.controller,
-        component: playerFactoryItem?.Component
+        component: playerFactoryItem?.Component,
       });
     } else {
       throw new Error("Player factory item is null");
@@ -111,10 +115,7 @@ const PlayerLiveImageComponent = (props: Props) => {
     liveImageItem.setMode = setModeDebounced;
   }, [setModeDebounced, liveImageItem]);
 
-  const { start, end } = React.useMemo(
-    () => getAutoplaySettings(item),
-    [item]
-  );
+  const { start, end } = React.useMemo(() => getAutoplaySettings(item), [item]);
 
   const controller = liveImageItem.getPlayer();
   const player = usePlayer(playerId);
@@ -239,7 +240,12 @@ const PlayerLiveImageComponent = (props: Props) => {
 
   const onPositionUpdated = React.useCallback(
     (data) => {
-      const normalizedRect = (rect: {left: number, right: number, top: number, bottom: number }) => {
+      const normalizedRect = (rect: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+      }) => {
         if (!rect) {
           return null;
         }
@@ -283,6 +289,7 @@ const PlayerLiveImageComponent = (props: Props) => {
   const videoStyles = { ...style, position: "absolute", zIndex: -100 };
   const Player: any = liveImageItem.component || BufferAnimation;
 
+  // TODO: nice to have - resolve imageKey when imageUrl is not provided
   return (
     <TrackedView
       testId={`tracked-view-${playerId}-${item.title}`}
@@ -307,11 +314,7 @@ const PlayerLiveImageComponent = (props: Props) => {
           animationConfig={overlayFadeIn}
           staticStyles={style}
         >
-          <PlayerImageBackground
-            entry={item}
-            style={style}
-            imageKey={imageKey}
-          />
+          <Image {...props} resizeMode="cover" style={style} applyMaxSize />
         </AnimatedInOut>
       }
     </TrackedView>

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

@@ -3,7 +3,14 @@ import * as React from "react";
 import { render } from "@testing-library/react-native";
 import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
 import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
+import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+
 import { PlayerLiveImage } from "../PlayerLiveImageComponent";
+import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 const seekTo = jest.fn();
 
@@ -16,6 +23,27 @@ jest.mock(
   })
 );
 
+jest
+  .spyOn(useNavigationHooks, "useNavigation")
+  .mockImplementation(() => ({ videoModalState: { visible: false } }));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
+const mockStore = configureStore();
+
+const store = mockStore({ appData: {} });
+
+const Wrapper = ({ children }: { children: React.ReactChildren }) => (
+  /* @ts-ignore */
+  <Provider store={store}>
+    <ThemeContext.Provider
+      value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  </Provider>
+);
+
 describe("PlayerLiveImageComponent", () => {
   const defaultProps = {
     item: { id: "1", title: "Test", type: { value: "" } },
@@ -36,10 +64,16 @@ describe("PlayerLiveImageComponent", () => {
       controller: new Player({}),
       Component: () => null,
     }));
+
+    jest.spyOn(navigationHooks, "useIsScreenActive").mockReturnValue(true);
   });
 
   it("should render correctly with default props", () => {
-    const component = render(<PlayerLiveImage {...defaultProps} />);
+    const component = render(
+      <Wrapper>
+        <PlayerLiveImage {...defaultProps} />
+      </Wrapper>
+    );
 
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -53,7 +87,11 @@ describe("PlayerLiveImageComponent", () => {
       },
     };
 
-    render(<PlayerLiveImage {...props} />);
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...props} />
+      </Wrapper>
+    );
 
     // TODO: implement this test
   });
@@ -67,7 +105,11 @@ describe("PlayerLiveImageComponent", () => {
       },
     };
 
-    render(<PlayerLiveImage {...props} />);
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...props} />
+      </Wrapper>
+    );
 
     // TODO: implement this test
   });

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

@@ -13,35 +13,30 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
       }
     }
   >
-    <View
-      accessibilityIgnoresInvertColors={true}
-      style={Object {}}
-    >
-      <Image
-        resizeMode="cover"
-        source={
-          Object {
-            "uri": undefined,
-          }
+    <Image
+      applyMaxSize={true}
+      audioMutedByDefault={false}
+      imageKey="image1"
+      item={
+        Object {
+          "id": "1",
+          "title": "Test",
+          "type": Object {
+            "value": "",
+          },
         }
-        style={
-          Array [
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            Object {
-              "height": undefined,
-              "width": undefined,
-            },
-            undefined,
-          ]
+      }
+      onError={[Function]}
+      playerId="player1"
+      resizeMode="cover"
+      screenConfig={Object {}}
+      source={
+        Object {
+          "uri": "",
         }
-      />
-    </View>
+      }
+      style={Object {}}
+    />
   </View>
 </TrackedView>
 `;