@applicaster/zapp-react-native-ui-components 12.0.0-rc.11 → 12.0.0-rc.111

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

@@ -21,8 +21,17 @@ const useIsTablet = jest.fn();
 
 jest.mock("react-native");
 
+jest.mock("react-native-gesture-handler");
+
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
   useIsTablet,
 }));
@@ -38,6 +47,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",
   })),
@@ -45,6 +55,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
     canGoBack: () => false,
     currentRoute: "/river/testId",
     data: { screen: { id: "testId" } },
+    videoModalState: { visible: false },
   })),
 }));
 
@@ -94,7 +105,7 @@ describe("PlayerWrapper", () => {
     useIsTablet.mockReturnValue(false);
 
     const children = jest.fn(() => {});
-    const dimensions = { height: 50, width: props.style.width };
+    const dimensions = { height: undefined, width: props.style.width };
 
     const element = renderWithProviders(
       <PlayerWrapper

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

@@ -1,249 +1,395 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PlayerWrapper renders inline 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "backgroundColor": "transparent",
         },
         Object {
-          "aspectRatio": 1.7777777777777777,
-          "height": undefined,
-          "width": "100%",
+          "height": 800,
+          "width": 300,
         },
         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
+      additionalData={
+        Object {
+          "saveArea": true,
+        }
       }
-    }
-    isTabletLandscape={false}
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+      animationType="moveUpComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
-    }
-  />
-</RNCSafeAreaView>
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            Object {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": "100%",
+            },
+            Object {},
+            Object {},
+          ]
+        }
+        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>
 `;
 
 exports[`PlayerWrapper renders inline and docked 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "additive",
-      "left": "off",
-      "right": "off",
-      "top": "off",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 50,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "backgroundColor": "transparent",
         },
         Object {
-          "aspectRatio": undefined,
-          "height": 50,
-          "width": "100%",
+          "height": undefined,
+          "width": 300,
         },
         Object {},
-        Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+  >
+    <View
+      additionalData={
+        Object {
+          "saveArea": true,
+        }
       }
-    }
-  />
-</RNCSafeAreaView>
+      animationType="moveUpComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
+      }
+    >
+      <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>
 `;
 
 exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "row",
-      },
-      Object {
-        "backgroundColor": "red",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "backgroundColor": "red",
         },
         Object {
-          "aspectRatio": 1.7777777777777777,
-          "height": undefined,
-          "width": 195,
+          "height": 800,
+          "width": 300,
         },
         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
+      additionalData={
+        Object {
+          "saveArea": true,
+        }
       }
-    }
-    isTabletLandscape={true}
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+      animationType="moveUpComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
-    }
-  />
-</RNCSafeAreaView>
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            Object {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": 195,
+            },
+            Object {},
+            Object {},
+          ]
+        }
+        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>
 `;
 
 exports[`PlayerWrapper renders properly 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "backgroundColor": "transparent",
         },
         Object {
-          "aspectRatio": 1.7786666666666666,
-          "height": undefined,
-          "width": "100%",
+          "height": 800,
+          "width": 300,
         },
         Object {},
-        Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+  >
+    <View
+      additionalData={
+        Object {
+          "saveArea": true,
+        }
       }
-    }
-  />
-</RNCSafeAreaView>
+      animationType="moveUpComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
+      }
+    >
+      <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