@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4757075613 → 12.0.0-alpha.4796013211

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

@@ -23,9 +23,6 @@ exports[`PlayerWrapper renders inline 1`] = `
     }
     style={
       Array [
-        Object {
-          "flexDirection": "column",
-        },
         Object {
           "backgroundColor": "transparent",
         },
@@ -38,44 +35,72 @@ exports[`PlayerWrapper renders inline 1`] = `
     }
   >
     <View
+      additionalData={
+        Object {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         Array [
           Object {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
           Object {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          Object {},
-          Object {},
         ]
       }
-      testID="test-player-container"
-    />
-    <View
-      configuration={
-        Object {
-          "tablet_landscape_player_container_background_color": "red",
-          "tablet_landscape_sidebar_width": "35%",
-        }
-      }
-      entry={
-        Object {
-          "id": "test",
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            Object {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": "100%",
+            },
+            Object {},
+            Object {},
+          ]
         }
-      }
-      isTabletLandscape={false}
-      style={
-        Object {
-          "flex": 1,
-          "paddingTop": 20,
+        testID="test-player-container"
+      />
+      <View
+        animationType="componentFade"
+        style={
+          Object {
+            "flex": 1,
+          }
         }
-      }
-    />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -95,22 +120,19 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
   <RNCSafeAreaView
     edges={
       Object {
-        "bottom": "additive",
+        "bottom": "off",
         "left": "off",
         "right": "off",
-        "top": "off",
+        "top": "additive",
       }
     }
     style={
       Array [
-        Object {
-          "flexDirection": "column",
-        },
         Object {
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 50,
+          "height": undefined,
           "width": 300,
         },
         Object {},
@@ -118,32 +140,51 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
     }
   >
     <View
+      additionalData={
+        Object {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         Array [
           Object {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
           Object {
-            "aspectRatio": undefined,
-            "height": 50,
-            "width": "100%",
+            "flex": 1,
           },
-          Object {},
-          Object {},
         ]
       }
-      testID="test-player-container"
-    />
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "paddingTop": 20,
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            Object {
+              "aspectRatio": undefined,
+              "height": undefined,
+              "width": "100%",
+            },
+            Object {},
+            Object {},
+          ]
         }
-      }
-    />
+        testID="test-player-container"
+      />
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "paddingTop": 20,
+          }
+        }
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -171,9 +212,6 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
     }
     style={
       Array [
-        Object {
-          "flexDirection": "row",
-        },
         Object {
           "backgroundColor": "red",
         },
@@ -186,44 +224,88 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
     }
   >
     <View
+      additionalData={
+        Object {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         Array [
           Object {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "row",
           },
           Object {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": 195,
+            "flex": 1,
           },
-          Object {},
-          Object {},
         ]
       }
-      testID="test-player-container"
-    />
-    <View
-      configuration={
-        Object {
-          "tablet_landscape_player_container_background_color": "red",
-          "tablet_landscape_sidebar_width": "35%",
-        }
-      }
-      entry={
-        Object {
-          "id": "test",
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            Object {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": 195,
+            },
+            Object {},
+            Object {},
+          ]
         }
-      }
-      isTabletLandscape={true}
-      style={
-        Object {
-          "flex": 1,
-          "paddingTop": 20,
+        testID="test-player-container"
+      >
+        <View
+          additionalData={
+            Object {
+              "disableAnimatedComponent": false,
+              "resetAnimationValue": undefined,
+              "useLayoutMeasure": true,
+            }
+          }
+          animationType="moveUpComponent"
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        />
+      </View>
+      <View
+        animationType="componentFade"
+        style={
+          Object {
+            "flex": 1,
+          }
         }
-      }
-    />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTabletLandscape={true}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -251,9 +333,6 @@ exports[`PlayerWrapper renders properly 1`] = `
     }
     style={
       Array [
-        Object {
-          "flexDirection": "column",
-        },
         Object {
           "backgroundColor": "transparent",
         },
@@ -266,32 +345,51 @@ exports[`PlayerWrapper renders properly 1`] = `
     }
   >
     <View
+      additionalData={
+        Object {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         Array [
           Object {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
           Object {
-            "aspectRatio": 1.7786666666666666,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          Object {},
-          Object {},
         ]
       }
-      testID="test-player-container"
-    />
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "paddingTop": 20,
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            Object {
+              "aspectRatio": 1.7786666666666666,
+              "height": undefined,
+              "width": "100%",
+            },
+            Object {},
+            Object {},
+          ]
         }
-      }
-    />
+        testID="test-player-container"
+      />
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "paddingTop": 20,
+          }
+        }
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;

package/Components/VideoModal/hooks/useModalSize.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Dimensions } from "react-native";
 import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 import {
   addOrientationChangeListener,
@@ -9,11 +8,10 @@ import {
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 const { Logger } = getXray();
 
-const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");
-
 const logger = new Logger(
   "hooks",
   "zapp-react-native-ui-components/Components/VideoModal"
@@ -24,20 +22,18 @@ type Size = {
   height: number | string;
 };
 
-const MODAL_SIZE_FOR_PORTRAIT: Size = {
-  width: WIDTH,
-  height: HEIGHT,
-};
-
 const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   width: "100%",
   height: "100%",
 };
 
 export const useModalSize = (): Size => {
-  const [modalSize, setModalSize] = React.useState<Size>(
-    MODAL_SIZE_FOR_PORTRAIT
-  );
+  const frame = useSafeAreaFrame();
+
+  const [modalSize, setModalSize] = React.useState<Size>({
+    width: frame.width,
+    height: frame.height,
+  });
 
   const setNewModalSize = React.useCallback((newSize, log) => {
     setModalSize((oldSize) => {
@@ -90,7 +86,9 @@ export const useModalSize = (): Size => {
           toOrientation === ORIENTATIONS.landscapeSensor;
 
         setNewModalSize(
-          isLandscape ? MODAL_SIZE_FOR_LANDSCAPE : MODAL_SIZE_FOR_PORTRAIT,
+          isLandscape
+            ? MODAL_SIZE_FOR_LANDSCAPE
+            : { width: frame.width, height: frame.height },
           `useModalSize: set modal size ${
             isLandscape ? "landscape" : "portrait"
           } for orientation: ${to}`

package/Components/VideoModal/utils.ts

@@ -23,18 +23,21 @@ export const useConfiguration = () => {
   const targetScreenConfiguration = rivers?.[targetScreenId];
 
   const pluginConfiguration =
-    pluginConfigurations[targetScreenConfiguration.type].configuration_json;
+    pluginConfigurations[targetScreenConfiguration?.type]?.configuration_json;
 
   const playerPluginConfig = playerManager.getPluginConfiguration();
 
   const config = R.mergeRight(playerPluginConfig, {
-    ...targetScreenConfiguration.general,
-    ...targetScreenConfiguration.styles,
+    ...targetScreenConfiguration?.general,
+    ...targetScreenConfiguration?.styles,
     ...pluginConfiguration,
   });
 
-  const { minimised_height, minimised_height_tablet, modal_background_color } =
-    config;
+  const {
+    minimised_height = 0,
+    minimised_height_tablet = 0,
+    modal_background_color,
+  } = config;
 
   const minimisedHeight = useIsTablet()
     ? minimised_height_tablet

package/Components/Viewport/ViewportTracker/ViewportTracker.tsx

@@ -6,23 +6,23 @@ import { callOnChildren } from "../utils";
 
 export function ViewportTracker(props) {
   const viewportEvents = useViewportEventsContext();
-  const { children } = props;
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
-  const [offsetX, setOffsetX] = React.useState(0);
-  const [offsetY, setOffsetY] = React.useState(0);
   const [nodeHandle, setNodeHandle] = React.useState(null);
 
-  const assignRef = React.useCallback(
-    (ref) => {
-      callOnChildren(children, "ref", ref);
-      setNodeHandle(findNodeHandle(ref));
-    },
-    [children]
-  );
+  const childrenRef = React.useRef(props.children);
+
+  const dimensionsRef = React.useRef({ width: 0, height: 0 });
+  const offsetRef = React.useRef({ offsetX: 0, offsetY: 0 });
+
+  const assignRef = React.useCallback((ref) => {
+    childrenRef.current?.ref?.(ref);
+    setNodeHandle(findNodeHandle(ref));
+  }, []);
 
   const onViewportChange = React.useCallback(
-    (event, shouldMeasureLayout = true) => {
+    ({
+      event = { ...dimensionsRef.current, ...offsetRef.current },
+      shouldMeasureLayout = true,
+    } = {}) => {
       if (nodeHandle && event?.width > 0 && event?.height > 0) {
         viewportEvents?.notify?.({
           parentHandle: nodeHandle,
@@ -36,54 +36,45 @@ export function ViewportTracker(props) {
 
   const onLayout = React.useCallback(
     (event) => {
-      callOnChildren(children, "onLayout", event);
-      setWidth(event?.nativeEvent?.layout?.width);
-      setHeight(event?.nativeEvent?.layout?.height);
+      callOnChildren(childrenRef.current, "onLayout", event);
+      dimensionsRef.current = event?.nativeEvent?.layout;
 
-      onViewportChange({
-        width: event?.nativeEvent?.layout?.width,
-        height: event?.nativeEvent?.layout?.height,
-        offsetX,
-        offsetY,
-      });
+      onViewportChange();
     },
-    [offsetX, offsetY, children, onViewportChange]
+    [onViewportChange]
   );
 
   const onContentSizeChange = React.useCallback(
     (contentWidth, contentHeight) => {
       callOnChildren(
-        children,
+        childrenRef.current,
         "onContentSizeChange",
         contentWidth,
         contentHeight
       );
 
-      onViewportChange({ width, height, offsetX, offsetY });
+      onViewportChange();
     },
-    [onViewportChange, children, width, height, offsetX, offsetY]
+    [onViewportChange]
   );
 
   const onScroll = React.useCallback(
     (event) => {
-      callOnChildren(children, "onScroll", event);
-      setOffsetX(event?.nativeEvent?.contentOffset?.x);
-      setOffsetY(event?.nativeEvent?.contentOffset?.y);
+      callOnChildren(childrenRef.current, "onScroll", event);
+      offsetRef.current = event?.nativeEvent?.contentOffset;
 
-      onViewportChange(
-        {
-          width,
-          height,
-          offsetX: event?.nativeEvent?.contentOffset?.x,
-          offsetY: event?.nativeEvent?.contentOffset?.y,
-        },
-        false
-      );
+      onViewportChange({
+        shouldMeasureLayout: false,
+      });
     },
-    [onViewportChange, width, height, children]
+    [onViewportChange]
   );
 
-  return React.cloneElement(React.Children.only(children), {
+  React.useEffect(() => {
+    childrenRef.current = props.children;
+  }, [props.children]);
+
+  return React.cloneElement(React.Children.only(props.children), {
     ref: assignRef,
     onLayout,
     onContentSizeChange,

package/Components/Viewport/ViewportTracker/index.tsx

@@ -6,6 +6,7 @@ import { ViewportEventContext, ViewportEvents } from "../ViewportEvents";
 type Props = {
   viewportEventsManager?: any;
   children: React.ReactNode;
+  flatListRef?: any; // this ref is used to bind to children component
 };
 
 export function ViewportTracker(props: Props) {

package/Components/Viewport/utils.js

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export function callOnChildren(children, method, ...args) {
   const childMethod = React.Children.only(children).props[method];
-  childMethod && childMethod(...args);
+  typeof childMethod === "function" && childMethod?.(...args);
 }
 
 export function isInViewport(

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -44,11 +45,11 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <View style={[style.view, isRTL ? style.rtlStyle : {}]}>
+    <SafeAreaView style={[style.view, isRTL ? style.rtlStyle : {}]}>
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </View>
+    </SafeAreaView>
   );
 };
 

package/Components/default-cell-renderer/__tests__/__snapshots__/defaultCellRenderer.test.tsx.snap

@@ -16,9 +16,9 @@ exports[`DefaultCellRenderer returns a react component and it renders correctly
     store={null}
     style={
       Object {
-        "backgroundColor": "#CCC",
+        "backgroundColor": "transparent",
         "margin": 12,
-        "opacity": 0.6,
+        "opacity": 1,
         "width": 169,
       }
     }
@@ -105,7 +105,7 @@ exports[`DefaultCellRenderer returns a react component for LG TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",
@@ -238,7 +238,7 @@ exports[`DefaultCellRenderer returns a react component for Samsung TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",

package/Contexts/FocusableGroupContext/FocusableGroupContext.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+
+export const FocusableGroupContext = React.createContext<string | null>(null);