@applicaster/zapp-react-native-ui-components 14.0.0-alpha.3552323332 → 14.0.0-alpha.4009339136

package/Components/VideoModal/VideoModal.tsx

@@ -17,7 +17,11 @@ import {
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 
 import { withModalNavigationContextProvider } from "../../Contexts/ModalNavigationContext";
-import { useModalSize, useInitialPlayerState } from "./hooks";
+import {
+  useModalSize,
+  useBackgroundColor,
+  useInitialPlayerState,
+} from "./hooks";
 
 import { APP_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/events";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
@@ -29,6 +33,8 @@ 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({
@@ -59,6 +65,7 @@ const VideoModalComponent = () => {
 
   const modalSize = useModalSize();
   const isFirstRender = useIsInitialRender();
+  const backgroundColor = useBackgroundColor();
 
   const {
     closeVideoModal,
@@ -138,13 +145,20 @@ const VideoModalComponent = () => {
           {mode === "FULLSCREEN" && <OpaqueLayer />}
 
           {itemIdHooksFinished === item?.id ? (
-            <View pointerEvents="box-none" style={styles.container}>
+            <AnimatedPlayerModalWrapper
+              style={[
+                styles.container,
+                {
+                  backgroundColor,
+                },
+              ]}
+            >
               <HandlePlayable
                 item={item}
                 isModal={mode !== "PIP"}
                 mode={mode}
               />
-            </View>
+            </AnimatedPlayerModalWrapper>
           ) : (
             <View style={styles.loaderContainer}>
               <Spinner />

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

@@ -13,7 +13,6 @@ const props = {
     tablet_landscape_sidebar_width: "35%",
     tablet_landscape_player_container_background_color: "red",
   },
-  playerContent: jest.fn(() => <></>),
 };
 
 const mockUseIsDeviceTablet = jest.fn();
@@ -123,6 +122,13 @@ describe("PlayerWrapper", () => {
       </PlayerWrapper>
     );
 
+    const expectDimensions = {
+      ...dimensions,
+      width: undefined,
+      aspectRatio: 16 / 9,
+    };
+
     expect(element).toMatchSnapshot();
+    expect(children).toHaveBeenCalledWith(expectDimensions);
   });
 });

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

@@ -21,27 +21,87 @@ exports[`PlayerWrapper renders inline 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "height": 800,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
-          {},
           {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": "100%",
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      />
+      <View
+        animationType="componentFade"
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          configuration={
+            {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            {
+              "id": "test",
+            }
+          }
+          isTablet={false}
+          isTabletLandscape={false}
+          style={
+            {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -67,27 +127,57 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "height": undefined,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
-          {},
           {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": undefined,
+              "height": undefined,
+              "width": "100%",
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -113,27 +203,103 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "red",
+        },
+        {
+          "height": 800,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "row",
           },
-          {},
           {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": 195,
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": 195,
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      >
+        <View
+          additionalData={
+            {
+              "disableAnimatedComponent": false,
+              "resetAnimationValue": undefined,
+              "useLayoutMeasure": true,
+            }
+          }
+          animationType="moveUpComponent"
+          style={
+            {
+              "flex": 1,
+            }
+          }
+        />
+      </View>
+      <View
+        animationType="componentFade"
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          configuration={
+            {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            {
+              "id": "test",
+            }
+          }
+          isTablet={true}
+          isTabletLandscape={true}
+          style={
+            {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -159,27 +325,57 @@ exports[`PlayerWrapper renders properly 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "height": 800,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
-          {},
           {
-            "aspectRatio": 1.7786666666666666,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": 1.7786666666666666,
+              "height": undefined,
+              "width": "100%",
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;

package/Components/VideoModal/hooks/index.ts

@@ -1,3 +1,5 @@
+export { useBackgroundColor } from "./useBackgroundColor";
+
 export { useDelayedPlayerDetails } from "./useDelayedPlayerDetails";
 
 export { useInitialPlayerState } from "./useInitialPlayerState";

package/Components/VideoModal/hooks/useBackgroundColor.ts

@@ -0,0 +1,10 @@
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useConfiguration } from "../utils";
+
+export const useBackgroundColor = (): string => {
+  const { modal_background_color: modalBackgroundColor } = useConfiguration();
+
+  const theme = useTheme<BaseThemePropertiesMobile>();
+
+  return modalBackgroundColor || theme?.status_background_color;
+};

package/Components/VideoModal/utils.ts

@@ -34,9 +34,6 @@ export const useConfiguration = () => {
     minimised_height = 0,
     minimised_height_tablet = 0,
     modal_background_color,
-    tablet_landscape_player_container_background_color,
-    screen_background_color,
-    audio_player_background_color,
   } = config;
 
   const minimisedHeight = useIsTablet()
@@ -46,9 +43,6 @@ export const useConfiguration = () => {
   return {
     minimised_height: Number(minimisedHeight),
     modal_background_color,
-    tablet_landscape_player_container_background_color,
-    audio_player_background_color,
-    screen_background_color,
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.3552323332",
+  "version": "14.0.0-alpha.4009339136",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.3552323332",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.3552323332",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.3552323332",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.3552323332",
+    "@applicaster/applicaster-types": "14.0.0-alpha.4009339136",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.4009339136",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.4009339136",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.4009339136",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -1,202 +0,0 @@
-import React, { useRef } from "react";
-import { View, ImageBackground, Animated } from "react-native";
-
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-import { Artwork } from "./Artwork";
-import { directionStyles } from "./helpers";
-
-type Props = {
-  artwork?: string;
-  config: {
-    titleColor: string;
-    summaryColor: string;
-    backgroundColor: string;
-    backgroundImage: string;
-    isRTL: boolean;
-    artworkBorderRadius: Option<number>;
-  };
-  children: React.ReactNode;
-};
-
-export function AudioPlayerLayout({ artwork, config, children }: Props) {
-  const fadeAnimation = useRef(new Animated.Value(0)).current;
-
-  const fadeAudioPlayerIn = () => {
-    Animated.timing(fadeAnimation, {
-      toValue: 1,
-      duration: 3000,
-      useNativeDriver: true,
-    }).start();
-  };
-
-  const { isRTL, backgroundColor, backgroundImage } = config;
-
-  const backgroundImageSource = { uri: backgroundImage || artwork };
-
-  const backgroundColorStyle = backgroundImageSource.uri
-    ? "transparent"
-    : backgroundColor;
-
-  const mainContainerStyles = platformSelect({
-    tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    web: {
-      width: 1920,
-      height: 1080,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    native: {
-      backgroundColor: backgroundColorStyle,
-      overflow: "hidden",
-      width: "100%",
-      height: "100%",
-    },
-    samsung_tv: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100vw",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    lg_tv: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100vw",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-  });
-
-  const backgroundImgStyles = platformSelect({
-    tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    web: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100%",
-      height: "100%",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    native: {
-      flex: 1,
-    },
-  });
-
-  const textContainerStyles = platformSelect({
-    tvos: {
-      width: 600,
-      height: 362,
-      marginHorizontal: 24,
-      alignItems: directionStyles(isRTL).justifyContent,
-    },
-    android_tv: {
-      width: 600,
-      height: 362,
-      marginHorizontal: 24,
-      alignItems: directionStyles(isRTL).justifyContent,
-    },
-    web: {
-      margin: 10,
-      height: "100vh",
-      alignItems: directionStyles(isRTL).justifyContent,
-      justifyContent: "center",
-    },
-  });
-
-  const audioPlayerLayoutTV = backgroundImageSource?.uri ? (
-    <ImageBackground
-      source={backgroundImageSource}
-      style={backgroundImgStyles}
-      resizeMode="cover"
-    >
-      <View style={mainContainerStyles}>
-        {!!artwork && <Artwork srcImage={artwork} config={config} />}
-        <View style={textContainerStyles}>{children}</View>
-      </View>
-    </ImageBackground>
-  ) : (
-    <View style={mainContainerStyles}>
-      {!!artwork && <Artwork srcImage={artwork} config={config} />}
-      <View style={textContainerStyles}>{children}</View>
-    </View>
-  );
-
-  const audioPlayerLayoutMobile = () => {
-    fadeAudioPlayerIn();
-
-    return (
-      <View style={mainContainerStyles} pointerEvents="none">
-        <Animated.View
-          style={[
-            mainContainerStyles,
-            {
-              opacity: fadeAnimation,
-            },
-          ]}
-        >
-          <ImageBackground
-            source={backgroundImageSource}
-            style={backgroundImgStyles}
-            resizeMode="cover"
-          >
-            <View style={mainContainerStyles} />
-          </ImageBackground>
-        </Animated.View>
-      </View>
-    );
-  };
-
-  const audioPlayerLayout = platformSelect({
-    tvos: audioPlayerLayoutTV,
-    android_tv: audioPlayerLayoutTV,
-    web: audioPlayerLayoutTV,
-    samsung_tv: audioPlayerLayoutTV,
-    lg_tv: audioPlayerLayoutTV,
-    ios: audioPlayerLayoutMobile(),
-    android: audioPlayerLayoutMobile(),
-  });
-
-  return audioPlayerLayout;
-}