@applicaster/zapp-react-native-ui-components 13.0.0-alpha.7330390362 → 13.0.0-alpha.7620873141

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -4,28 +4,31 @@ import { Animated, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 import {
+  useDimensions,
   useGetBottomTabBarHeight,
   useNavigation,
-  useDimensions,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
 
 import {
-  gestureListenerHelper,
-  getAnimationStyle,
+  AUDIO_PLAYER_HORIZONTAL_PADDING,
+  ComponentAnimationType,
   defaultAspectRatioWidth,
+  gestureListenerHelper,
   getAnimationDefaultValue,
-  ComponentAnimationType,
-  AUDIO_PLAYER_HORIZONTAL_PADDING,
+  getAnimationStyle,
+  getMoveUpValue,
 } from "./utils";
 
+import { DURATION_TO_MINIMIZE, DEFAULT_DURATION_FOR_ANIMATION } from "./const";
+
 type Props = {
   animationType: string;
   children: React.ReactNode;
@@ -97,14 +100,16 @@ export const AnimationView = ({
 
   const inlineAudioPlayer = additionalData.inlineAudioPlayer;
 
-  const moveUpValue = additionalData.saveArea
-    ? -insets.top + (isAudioItem ? 0 : progressBarHeight)
-    : isTablet
-      ? isTabletLandscape &&
-        (!isAudioItem || (isAudioItem && inlineAudioPlayer))
-        ? -tabletLandscapePlayerTopPosition + progressBarHeight
-        : -130
-      : -50 + progressBarHeight;
+  const moveUpValue = getMoveUpValue({
+    additionalData,
+    insets,
+    isAudioItem,
+    progressBarHeight,
+    isTablet,
+    isTabletLandscape,
+    inlineAudioPlayer,
+    tabletLandscapePlayerTopPosition,
+  });
 
   const moveComponentHorizontalValue = additionalData.moveValue
     ? isRTL
@@ -119,7 +124,10 @@ export const AnimationView = ({
     (animationType, state) => {
       const defaultConfig = {
         toValue: 0,
-        duration: state === PlayerAnimationStateEnum.minimize ? 150 : 100,
+        duration:
+          state === PlayerAnimationStateEnum.minimize
+            ? DURATION_TO_MINIMIZE
+            : DEFAULT_DURATION_FOR_ANIMATION,
         useNativeDriver: true,
       };
 
@@ -228,6 +236,8 @@ export const AnimationView = ({
       isAudioItem,
       moveUpValue,
       moveComponentHorizontalValue,
+      isRTL,
+      inlineAudioPlayer,
     ]
   );
 
@@ -246,7 +256,7 @@ export const AnimationView = ({
       default:
         return getAnimationValue(
           animationType,
-          PlayerAnimationStateEnum.maximaze
+          PlayerAnimationStateEnum.maximize
         ).toValue;
     }
   }, [defaultValue, videoModalState]);
@@ -278,6 +288,11 @@ export const AnimationView = ({
       moveUpValue,
       moveComponentHorizontalValue,
       videoModalMode,
+      isAudioItem,
+      isTablet,
+      isTabletLandscape,
+      isRTL,
+      inlineAudioPlayer,
     ]
   );
 
@@ -306,7 +321,7 @@ export const AnimationView = ({
       }
 
       if (
-        videoModalMode === "MAXIMIZED" &&
+        (videoModalMode === "MAXIMIZED" || videoModalMode === "MINIMIZED") &&
         defaultValue.x !== screenWidth &&
         width &&
         height
@@ -332,7 +347,13 @@ export const AnimationView = ({
         animatedValue.setValue(value);
       }
     }
-  }, [videoModalState]);
+  }, [
+    animatedValue,
+    animationType,
+    getAnimationValue,
+    playerAnimationState,
+    videoModalState,
+  ]);
 
   React.useEffect(() => {
     if (
@@ -344,7 +365,7 @@ export const AnimationView = ({
         animatedValue,
         getAnimationValue(animationType, playerAnimationState)
       ).start();
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
+    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
       animatedValue.setValue(defaultValue);
     }
   }, [playerAnimationState, startComponentsAnimation, defaultValue]);
@@ -405,7 +426,7 @@ export const AnimationView = ({
 
   return (
     <Animated.View
-      onLayout={additionalData.useLayoutMeasure && measureView}
+      onLayout={additionalData.useLayoutMeasure ? measureView : undefined}
       ref={animationComponentRef}
       style={[
         ...preparedStyles,
@@ -427,6 +448,10 @@ export const AnimationComponent = (props: Props) => {
     videoModalState: { visible },
   } = useNavigation();
 
+  if (additionalData?.disableAnimatedComponent) {
+    return <>{props.children}</>;
+  }
+
   const useAnimation =
     visible && !additionalData.disableAnimatedComponent && !isTV();
 

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Animated } from "react-native";
 
 import {
@@ -14,12 +14,12 @@ import { useConfiguration } from "../utils";
 
 export enum PlayerAnimationStateEnum {
   minimize = "minimize",
-  maximaze = "maximaze",
+  maximize = "maximize",
   drag_player = "drag_player",
   drag_scroll = "drag_scroll",
 }
 
-type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
+export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
 
 export type ModalAnimationContextT = {
   isActiveGesture: boolean;
@@ -95,6 +95,13 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     setStartComponentsAnimation(false);
   }, []);
 
+  useEffect(() => {
+    // Reset player animation state when video modal is closed
+    if (!visible) {
+      resetPlayerAnimationState();
+    }
+  }, [visible, resetPlayerAnimationState]);
+
   // Animated values
   const lastScrollY = React.useRef(new Animated.Value(0)).current;
   const dragScrollY = React.useRef(new Animated.Value(0)).current;

package/Components/VideoModal/ModalAnimation/__tests__/getMoveUpValue.test.ts

@@ -0,0 +1,108 @@
+import { getMoveUpValue } from "../utils";
+
+describe("getMoveUpValue", () => {
+  it("returns correct value when additionalData.saveArea is true and isAudioItem is false", () => {
+    const result = getMoveUpValue({
+      additionalData: { saveArea: true },
+      insets: { top: 20 },
+      isAudioItem: false,
+      progressBarHeight: 10,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 100,
+    });
+
+    expect(result).toBe(-20 + 10);
+  });
+
+  it("returns correct value when additionalData.saveArea is true and isAudioItem is true", () => {
+    const result = getMoveUpValue({
+      additionalData: { saveArea: true },
+      insets: { top: 15 },
+      isAudioItem: true,
+      progressBarHeight: 5,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 100,
+    });
+
+    expect(result).toBe(-15 + 0);
+  });
+
+  it("returns correct value for audio item (tablet or not)", () => {
+    const result = getMoveUpValue({
+      additionalData: { marginTop: 30 },
+      insets: { top: 0 },
+      isAudioItem: true,
+      progressBarHeight: 0,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 0,
+    });
+
+    expect(result).toBe(-30);
+  });
+
+  it("returns correct value for tablet landscape with inline audio player", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: true,
+      progressBarHeight: 8,
+      isTablet: true,
+      isTabletLandscape: true,
+      inlineAudioPlayer: true,
+      tabletLandscapePlayerTopPosition: 50,
+    });
+
+    expect(result).toBe(-0);
+  });
+
+  it("returns correct value for tablet landscape without audio item", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: false,
+      progressBarHeight: 12,
+      isTablet: true,
+      isTabletLandscape: true,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 60,
+    });
+
+    expect(result).toBe(-60 + 12);
+  });
+
+  it("returns -130 for tablet portrait (not landscape)", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: false,
+      progressBarHeight: 0,
+      isTablet: true,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 0,
+    });
+
+    expect(result).toBe(-130);
+  });
+
+  it("returns -50 + progressBarHeight for mobile audio player in docked mode", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: false,
+      progressBarHeight: 7,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 0,
+    });
+
+    expect(result).toBe(-50 + 7);
+  });
+});

package/Components/VideoModal/ModalAnimation/const.ts

@@ -0,0 +1,5 @@
+export const DURATION_TO_MINIMIZE = 200; // old value 200
+
+export const DURATION_TO_MAXIMIZE = 0;
+
+export const DEFAULT_DURATION_FOR_ANIMATION = 200; // old value 100

package/Components/VideoModal/ModalAnimation/index.ts

@@ -14,3 +14,5 @@ export { useModalAnimationContext } from "./useModalAnimationContext";
 export { AnimationComponent } from "./AnimationComponent";
 
 export { ComponentAnimationType, defaultAspectRatioWidth } from "./utils";
+
+export { DURATION_TO_MINIMIZE, DURATION_TO_MAXIMIZE } from "./const";

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -1,6 +1,7 @@
 /* eslint-disable padding-line-between-statements */
 
 import { PlayerAnimationStateEnum } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 export enum ComponentAnimationType {
   bottomBar = "bottomBar",
@@ -300,3 +301,38 @@ export const resetScrollAnimatedValues = (
   dragScrollY.setValue(0);
   dragVideoPlayerY.setValue(0);
 };
+
+export const getMoveUpValue = ({
+  additionalData,
+  insets,
+  isAudioItem,
+  progressBarHeight,
+  isTablet,
+  isTabletLandscape,
+  inlineAudioPlayer,
+  tabletLandscapePlayerTopPosition,
+}) => {
+  if (additionalData.saveArea) {
+    return -insets.top + (isAudioItem ? 0 : progressBarHeight);
+  }
+
+  if (isAudioItem) {
+    // for any layouts in audioPlayer
+    return -1 * toNumberWithDefaultZero(additionalData?.marginTop);
+  }
+
+  if (isTablet) {
+    if (
+      isTabletLandscape &&
+      (!isAudioItem || (isAudioItem && inlineAudioPlayer))
+    ) {
+      return -tabletLandscapePlayerTopPosition + progressBarHeight;
+    }
+
+    // for audioPlayer(tablet/isTabletPortrait) in docked mode
+    return -130;
+  }
+
+  // for audioPlayer(mobile) in docked mode
+  return -50 + progressBarHeight;
+};

package/Components/VideoModal/PlayerDetails.tsx

@@ -1,14 +1,16 @@
 import React, { useEffect, useRef } from "react";
 import {
-  StyleProp,
-  ViewStyle,
   Animated,
-  Easing,
   Dimensions,
+  Easing,
+  StyleProp,
+  ViewStyle,
+  StyleSheet,
 } from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
 
@@ -21,9 +23,9 @@ type Props = {
   entry: ZappEntry;
   style: StyleProp<ViewStyle>;
   configuration: Configuration;
-  isTabletLandscape: boolean;
+  isTabletLandscape?: boolean;
   isAudioPlayer?: boolean;
-  isTablet: boolean;
+  isTablet?: boolean;
 };
 
 const containerStyle = ({
@@ -38,9 +40,9 @@ export const PlayerDetails = ({
   entry,
   style,
   configuration,
-  isTabletLandscape,
+  isTabletLandscape = false,
   isAudioPlayer,
-  isTablet,
+  isTablet = false,
 }: Props) => {
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
@@ -77,6 +79,10 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
+  if (isNilOrEmpty(screenData?.ui_components)) {
+    return null;
+  }
+
   return (
     <Animated.View
       style={[
@@ -90,17 +96,19 @@ export const PlayerDetails = ({
         {
           // workaround for avoid wrong text-height after going back to portrait rotation
           // we don't see this view in landscape mode, so we are able to use fixed width from portrait mode
-          width: isTablet ? undefined : SCREEN_WIDTH,
+          width: isTablet
+            ? undefined
+            : (StyleSheet.flatten(style)?.width ?? SCREEN_WIDTH),
         },
       ]}
     >
-      {screenData && (
+      {screenData ? (
         <ComponentsMap
           riverId={screenData.id}
           feed={screenData?.data?.source}
           riverComponents={screenData.ui_components}
         />
-      )}
+      ) : null}
     </Animated.View>
   );
 };

package/Components/VideoModal/PlayerWrapper.tsx

@@ -100,6 +100,24 @@ const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   return ["top"];
 };
 
+const isPercentage = (value: string | number): boolean => {
+  if (typeof value === "string") {
+    return value.includes("%");
+  }
+
+  return false;
+};
+
+const getPercentageOf = (percent: string, value: number) => {
+  const percentageValue = parseFloat(percent.replace("%", ""));
+
+  if (isNaN(percentageValue)) {
+    return value;
+  }
+
+  return (value * percentageValue) / 100;
+};
+
 const getTabletWidth = (
   configuration: Configuration,
   dimensions: DimensionsT
@@ -108,18 +126,23 @@ const getTabletWidth = (
     configuration?.tablet_landscape_sidebar_width;
 
   const { width } = dimensions;
+  let widthValue = Number(width);
+
+  if (isPercentage(width)) {
+    widthValue = getPercentageOf(width.toString(), SCREEN_WIDTH);
+  }
 
   const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
 
   if (tablet_landscape_sidebar_width?.includes("%")) {
-    return Number(width) * (1 - sidebarWidth / 100);
+    return widthValue * (1 - sidebarWidth / 100);
   }
 
   if (Number.isNaN(sidebarWidth)) {
-    return Number(width) * 0.65;
+    return widthValue * 0.65;
   }
 
-  return Number(width) - sidebarWidth;
+  return widthValue - sidebarWidth;
 };
 
 const PlayerWrapperComponent = (props: Props) => {
@@ -227,7 +250,7 @@ const PlayerWrapperComponent = (props: Props) => {
         </View>
 
         <AnimatedScrollModal>
-          {isShowPlayerDetails && (
+          {isShowPlayerDetails ? (
             <AnimationComponent
               animationType={ComponentAnimationType.componentFade}
               style={defaultStyles.flex}
@@ -240,7 +263,7 @@ const PlayerWrapperComponent = (props: Props) => {
                 isTablet={isTablet}
               />
             </AnimationComponent>
-          )}
+          ) : null}
         </AnimatedScrollModal>
       </AnimationComponent>
     </WrapperView>

package/Components/VideoModal/VideoModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { equals } from "ramda";
-import { StyleSheet, StatusBar } from "react-native";
+import { StyleSheet, StatusBar, View } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
@@ -30,10 +30,13 @@ import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHook
 import { requiresAuthentication } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { Spinner } from "../Spinner";
 import { OpaqueLayer } from "./OpaqueLayer";
 
 import { AnimatedPlayerModalWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
+const LOADER_BACKGROUND_COLOR = "rgba(64,64,64,0.5)";
+
 const styles = StyleSheet.create({
   container: {
     top: 0,
@@ -42,6 +45,16 @@ const styles = StyleSheet.create({
     bottom: 0,
     position: "absolute",
   },
+  loaderContainer: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: LOADER_BACKGROUND_COLOR,
+  },
 });
 
 const VideoModalComponent = () => {
@@ -131,7 +144,7 @@ const VideoModalComponent = () => {
           {/* Hide content underneath when we switch to next video in fullscreen mode */}
           {mode === "FULLSCREEN" && <OpaqueLayer />}
 
-          {itemIdHooksFinished === item?.id && (
+          {itemIdHooksFinished === item?.id ? (
             <AnimatedPlayerModalWrapper
               style={[
                 styles.container,
@@ -143,11 +156,13 @@ const VideoModalComponent = () => {
               <HandlePlayable
                 item={item}
                 isModal={mode !== "PIP"}
-                modalHeight={modalSize.height}
-                modalWidth={modalSize.width}
                 mode={mode}
               />
             </AnimatedPlayerModalWrapper>
+          ) : (
+            <View style={styles.loaderContainer}>
+              <Spinner />
+            </View>
           )}
         </ScreenContextProvider>
       </PathnameContext.Provider>

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

@@ -1,43 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PlayerDetails renders properly 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "flex": 1,
-      "marginTop": -8,
-      "paddingTop": -8,
-      "width": 750,
-    }
-  }
->
-  <View
-    feed="test-source"
-    riverComponents={[]}
-    riverId="test-id"
-  />
-</View>
-`;
+exports[`PlayerDetails renders properly 1`] = `null`;
 
-exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "flex": 1,
-      "marginTop": -20,
-      "paddingTop": 40,
-      "width": 750,
-    }
-  }
->
-  <View
-    feed="test-source"
-    riverComponents={[]}
-    riverId="test-id"
-  />
-</View>
-`;
+exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] = `null`;

package/Components/VideoModal/utils.ts

@@ -1,5 +1,4 @@
-import * as R from "ramda";
-
+import { mergeRight } from "ramda";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
@@ -25,10 +24,10 @@ export const useConfiguration = () => {
 
   const playerPluginConfig = playerManager.getPluginConfiguration();
 
-  const config = R.mergeRight(playerPluginConfig, {
+  const config = mergeRight(playerPluginConfig, {
+    ...pluginConfiguration,
     ...targetScreenConfiguration?.general,
     ...targetScreenConfiguration?.styles,
-    ...pluginConfiguration,
   });
 
   const {