@applicaster/zapp-react-native-ui-components 12.0.0-rc.4 → 12.0.0-rc.41

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -1,7 +1,6 @@
 // /// <reference types="@applicaster/applicaster-types" />
 //
 import * as React from "react";
-import * as R from "ramda";
 
 import { AppState, AppStateStatus } from "react-native";
 import { TrackedView } from "../TrackedView";
@@ -9,14 +8,13 @@ import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/l
 
 import { playerFactory } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
 
-import { BufferAnimation } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/BufferAnimation";
 import {
   isApplePlatform,
   isTV,
 } 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";
@@ -25,12 +23,13 @@ import { loggerLiveImageComponent } from "./loggerHelper";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
 import { getAutoplaySettings } from "./utils";
+import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
+import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 
 const { log_error } = loggerLiveImageComponent;
 
-const isMeasurement = (item) => {
-  return item.id.startsWith("pre-measurement-");
-};
+const isMeasurement = (item: ZappEntry) =>
+  isString(item.id) && item.id.startsWith("pre-measurement-");
 
 type Props = {
   item: ZappEntry;
@@ -40,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);
@@ -55,20 +55,17 @@ const PlayerLiveImageComponent = (props: Props) => {
     isTV() ? false : getUserCellPlayerMutedPreference(props.audioMutedByDefault)
   );
 
-  const [PlayerViewComponent, setPlayerViewComponent] = React.useState(null);
-  const Player: any = PlayerViewComponent || BufferAnimation;
-
   const ref = React.useRef(null);
 
-  const liveImageItem: LiveImage = React.useMemo(() => {
-    /**
-     * Debounced setMode function.
-     *
-     * Sets to video with a 1sec delay. Set to image happens immediately and cancels the timeout.
-     *
-     * @param type video or image
-     */
-    const setModeDebounced = (type: LiveImageType) => {
+  /**
+   * Debounced setMode function.
+   *
+   * Sets to video with a 1sec delay. Set to image happens immediately and cancels the timeout.
+   *
+   * @param type video or image
+   */
+  const setModeDebounced = React.useCallback(
+    (type: LiveImageType) => {
       if (type === LiveImageType.Video) {
         if (type === mode) {
           return;
@@ -80,45 +77,45 @@ const PlayerLiveImageComponent = (props: Props) => {
       } else {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
         }
 
         setMode(type);
       }
-    };
+    },
+    [mode]
+  );
+
+  const { screenConfig, playerPluginId } = props;
 
+  const liveImageItem: LiveImage = React.useMemo(() => {
     const playerFactoryItem = playerFactory({
       player: ref,
-      listener: props as Record<string, any>,
       playerId,
       autoplay: false,
       entry: item,
-      muted,
-      playerPluginId: props?.playerPluginId,
-      screenConfig: props?.screenConfig,
+      muted, // Initial muted state, not needed in dependencies
+      playerPluginId: playerPluginId,
+      screenConfig: screenConfig,
       playerRole: PlayerRole.Cell,
     });
 
-    const Component = playerFactoryItem?.Component;
-
-    if (!R.isNil(Component) && Component !== PlayerViewComponent) {
-      setPlayerViewComponent(Component);
-    }
-
     if (playerFactoryItem) {
       return new LiveImage({
         playerId,
         player: playerFactoryItem.controller,
-        setMode: setModeDebounced,
+        component: playerFactoryItem?.Component,
       });
     } else {
       throw new Error("Player factory item is null");
     }
-  }, [playerId, item?.id]);
+  }, [playerId, item, playerPluginId, screenConfig]);
 
-  const { start, end } = React.useMemo(
-    () => getAutoplaySettings(item),
-    [item?.id]
-  );
+  React.useEffect(() => {
+    liveImageItem.setMode = setModeDebounced;
+  }, [setModeDebounced, liveImageItem]);
+
+  const { start, end } = React.useMemo(() => getAutoplaySettings(item), [item]);
 
   const controller = liveImageItem.getPlayer();
   const player = usePlayer(playerId);
@@ -127,6 +124,10 @@ const PlayerLiveImageComponent = (props: Props) => {
     ref.current = component;
   };
 
+  const onLiveImageCompleted = React.useCallback(() => {
+    LiveImageManager.instance.onLiveImageCompleted(liveImageItem);
+  }, [liveImageItem]);
+
   const onStop = React.useCallback(() => {
     LiveImageManager.instance.pauseLiveImage(liveImageItem);
   }, [liveImageItem]);
@@ -140,13 +141,14 @@ const PlayerLiveImageComponent = (props: Props) => {
     const unregister = LiveImageManager.instance.register(liveImageItem);
 
     return () => {
-      unregister();
-
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
+
+      unregister();
     };
-  }, [liveImageItem, item]);
+  }, [item, liveImageItem]);
 
   React.useEffect(() => {
     if (!player) {
@@ -178,11 +180,12 @@ const PlayerLiveImageComponent = (props: Props) => {
           setMuted(false);
         },
         onPlayerClose: () => {
+          onLiveImageCompleted();
           setIsReady(false);
         },
       },
     });
-  }, [player, onStop]);
+  }, [player, onStop, onLiveImageCompleted, start, end]);
 
   React.useEffect(() => {
     const subscription = AppState.addEventListener(
@@ -233,40 +236,48 @@ const PlayerLiveImageComponent = (props: Props) => {
         };
       }
     }
-  }, [liveImageItem]);
-
-  const onPositionUpdated = (data) => {
-    const normalizedRect = (rect) => {
-      if (!rect) {
-        return null;
-      }
+  }, [liveImageItem, playerId, controller]);
+
+  const onPositionUpdated = React.useCallback(
+    (data) => {
+      const normalizedRect = (rect: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+      }) => {
+        if (!rect) {
+          return null;
+        }
 
-      const { left, right, top, bottom } = rect;
+        const { left, right, top, bottom } = rect;
 
-      return {
-        left: left / dimensions.width,
-        right: right / dimensions.width,
-        top: top / dimensions.height,
-        bottom: bottom / dimensions.height,
-        centerX: (left + right) / 2 / dimensions.width,
-        centerY: (top + bottom) / 2 / dimensions.height,
+        return {
+          left: left / dimensions.width,
+          right: right / dimensions.width,
+          top: top / dimensions.height,
+          bottom: bottom / dimensions.height,
+          centerX: (left + right) / 2 / dimensions.width,
+          centerY: (top + bottom) / 2 / dimensions.height,
+        };
       };
-    };
 
-    liveImageItem.position = normalizedRect(data.rect);
+      liveImageItem.position = normalizedRect(data.rect);
 
-    const newIsFullyVisible = !!data.rect;
+      const newIsFullyVisible = !!data.rect;
 
-    if (liveImageItem.isFullyVisible !== newIsFullyVisible) {
-      liveImageItem.isFullyVisible = newIsFullyVisible;
+      if (liveImageItem.isFullyVisible !== newIsFullyVisible) {
+        liveImageItem.isFullyVisible = newIsFullyVisible;
 
-      liveImageItem.isFullyVisible
-        ? LiveImageManager.instance.onViewportEnter(liveImageItem)
-        : LiveImageManager.instance.onViewportLeave(liveImageItem);
-    } else {
-      LiveImageManager.instance.checkPlayerPosition(liveImageItem);
-    }
-  };
+        liveImageItem.isFullyVisible
+          ? LiveImageManager.instance.onViewportEnter(liveImageItem)
+          : LiveImageManager.instance.onViewportLeave(liveImageItem);
+      } else {
+        LiveImageManager.instance.checkPlayerPosition(liveImageItem);
+      }
+    },
+    [liveImageItem, dimensions]
+  );
 
   const platformSpecificProps = isApplePlatform()
     ? { hideNativeControls: true, controls: false }
@@ -276,7 +287,9 @@ const PlayerLiveImageComponent = (props: Props) => {
   const isVideoMode = mode === LiveImageType.Video;
   const isBackgroundImageVisible = isImageMode || !isReadyToPlay;
   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}`}
@@ -301,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,6 +3,9 @@ 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";
 
 const seekTo = jest.fn();
@@ -16,6 +19,16 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
+const Wrapper = ({ children }: { children: React.ReactChildren }) => (
+  <ThemeContext.Provider
+    value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
+  >
+    {children}
+  </ThemeContext.Provider>
+);
+
 describe("PlayerLiveImageComponent", () => {
   const defaultProps = {
     item: { id: "1", title: "Test", type: { value: "" } },
@@ -36,10 +49,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 +72,11 @@ describe("PlayerLiveImageComponent", () => {
       },
     };
 
-    render(<PlayerLiveImage {...props} />);
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...props} />
+      </Wrapper>
+    );
 
     // TODO: implement this test
   });
@@ -67,7 +90,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>
 `;

package/Components/VideoModal/PlayerDetails.tsx

@@ -23,6 +23,8 @@ const containerStyle = ({
   backgroundColor: modal_background_color,
 });
 
+// const audioMarginStyle = { marginTop: 0, marginBottom: 0 };
+
 export const PlayerDetails = ({
   entry,
   style,
@@ -75,6 +77,7 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
+        // isAudioPlayer && audioMarginStyle,
       ]}
     >
       {screenData && (

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,18 +1,24 @@
 import * as React from "react";
-import { Platform, StyleSheet, View, ViewStyle } from "react-native";
+import {
+  Dimensions,
+  Platform,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
-type Dimensions = {
-  width: number;
-  height: number;
+type DimensionsT = {
+  width: number | string;
+  height: number | string;
+  aspectRatio?: number;
 };
 
 type Configuration = {
@@ -23,14 +29,15 @@ type Configuration = {
 
 type Props = {
   entry: ZappEntry;
-  style: ViewStyle & Dimensions;
+  style: ViewStyle & DimensionsT;
   containerStyle?: ViewStyle;
   inline?: boolean;
   docked?: boolean;
+  pip?: boolean;
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
-  children: (playerDimensions: Dimensions) => React.ReactNode;
+  children: (playerDimensions: DimensionsT) => React.ReactNode;
   configuration: Configuration;
 };
 
@@ -52,6 +59,15 @@ const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
   return orientationStyles.portrait;
 };
 
+const getScreenAspectRatio = () => {
+  const { width, height } = Dimensions.get("screen");
+
+  const longEdge = Math.max(width, height);
+  const shortEdge = Math.min(width, height);
+
+  return longEdge / shortEdge;
+};
+
 const safeAreaStyles = (
   configuration: Configuration,
   isTablet: boolean
@@ -66,34 +82,6 @@ const safeAreaStyles = (
   };
 };
 
-const getTabletWidth = (
-  configuration: Configuration,
-  dimensions: Dimensions
-) => {
-  const tablet_landscape_sidebar_width =
-    configuration?.tablet_landscape_sidebar_width;
-
-  const { width } = dimensions;
-
-  const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
-
-  if (tablet_landscape_sidebar_width?.includes("%")) {
-    return width * (1 - sidebarWidth / 100);
-  }
-
-  if (Number.isNaN(sidebarWidth)) {
-    return width * 0.65;
-  }
-
-  return width - sidebarWidth;
-};
-
-export const defaultAspectRatioHeight = (width: number): number =>
-  (width / 16) * 9;
-
-export const defaultAspectRatioWidth = (height: number): number =>
-  (height / 9) * 16;
-
 const getEdges = (
   isTablet: boolean,
   docked: boolean,
@@ -115,6 +103,28 @@ const getEdges = (
   return ["top"];
 };
 
+const getTabletWidth = (
+  configuration: Configuration,
+  dimensions: DimensionsT
+) => {
+  const tablet_landscape_sidebar_width =
+    configuration?.tablet_landscape_sidebar_width;
+
+  const { width } = dimensions;
+
+  const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
+
+  if (tablet_landscape_sidebar_width?.includes("%")) {
+    return Number(width) * (1 - sidebarWidth / 100);
+  }
+
+  if (Number.isNaN(sidebarWidth)) {
+    return Number(width) * 0.65;
+  }
+
+  return Number(width) - sidebarWidth;
+};
+
 export const PlayerWrapper = (props: Props) => {
   const {
     entry,
@@ -126,6 +136,7 @@ export const PlayerWrapper = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    pip,
   } = props;
 
   const isTablet = useIsTablet();
@@ -136,40 +147,38 @@ export const PlayerWrapper = (props: Props) => {
 
   const tabletWidth = getTabletWidth(configuration, style);
 
-  const { width: screenWidth } = useDimensions("screen");
-
-  const containerDimensions: Dimensions = React.useMemo(
+  const baseDimensions: DimensionsT = React.useMemo(
     () => ({
       width:
-        isInlineModal && !docked && isTabletLandscape
-          ? tabletWidth
-          : style.width,
-      height:
-        isInlineModal && !docked
-          ? defaultAspectRatioHeight(
-              isTabletLandscape ? tabletWidth : screenWidth
-            )
-          : style.height,
+        isInlineModal && !docked && isTabletLandscape ? tabletWidth : "100%",
+      height: isInlineModal && docked ? style.height : undefined,
     }),
-    [isInlineModal, docked, isTabletLandscape, tabletWidth, style, screenWidth]
+    [isInlineModal, tabletWidth, style.height, docked]
   );
 
-  const playerDimensions: Dimensions = React.useMemo(
+  const playerDimensions: DimensionsT = React.useMemo(
     () => ({
-      width:
-        isInlineModal && docked
-          ? defaultAspectRatioWidth(containerDimensions.height)
-          : containerDimensions.width,
-      height: containerDimensions.height,
+      ...baseDimensions,
+      width: isInlineModal && docked ? undefined : baseDimensions.width,
+      aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
+    }),
+    [baseDimensions, isInlineModal, pip]
+  );
+
+  const containerDimensions: DimensionsT = React.useMemo(
+    () => ({
+      ...baseDimensions,
+      aspectRatio:
+        isInlineModal && docked ? undefined : playerDimensions.aspectRatio,
     }),
-    [isInlineModal, docked, containerDimensions]
+    [baseDimensions, isInlineModal, docked, playerDimensions.aspectRatio]
   );
 
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
 
   const childrenStyles = React.useMemo(
     () => ({ ...playerDimensions, ...playerDimesionsHack }),
-    [playerDimensions, playerDimesionsHack]
+    [containerDimensions, playerDimesionsHack]
   );
 
   return (
@@ -190,12 +199,6 @@ export const PlayerWrapper = (props: Props) => {
               defaultStyles.playerContainer,
               containerDimensions,
               containerStyle,
-              {
-                height:
-                  isInlineModal && !docked
-                    ? containerDimensions.height + 10
-                    : containerDimensions.height,
-              },
               playerDimesionsHack,
             ]}
           >

package/Components/VideoModal/__tests__/PlayerDetails.test.tsx

@@ -8,8 +8,6 @@ const props = {
   configuration: { modal_background_color: "transparent" },
 };
 
-jest.mock("react-native");
-
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: jest.fn(() => ({
     top: 20,

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -19,8 +19,6 @@ const props = {
 
 const useIsTablet = jest.fn();
 
-jest.mock("react-native");
-
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
@@ -38,6 +36,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  isNavBarVisible: jest.fn(() => true),
   useRoute: jest.fn(() => ({
     pathname: "/river/testId",
   })),
@@ -50,7 +49,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
 
 jest.mock("../utils", () => ({ playerDimesionsHack: {} }));
 
-const { PlayerWrapper, defaultAspectRatioWidth } = require("../PlayerWrapper");
+const { PlayerWrapper } = require("../PlayerWrapper");
 
 jest.useFakeTimers();
 const children = jest.fn(() => {});
@@ -110,7 +109,8 @@ describe("PlayerWrapper", () => {
 
     const expectDimensions = {
       ...dimensions,
-      width: defaultAspectRatioWidth(dimensions.height),
+      width: undefined,
+      aspectRatio: 16 / 9,
     };
 
     expect(element).toMatchSnapshot();