@applicaster/zapp-react-native-ui-components 13.0.0-alpha.5033140607 → 13.0.0-alpha.5049772260

package/Components/VideoModal/VideoModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import * as R from "ramda";
-import { StyleSheet, View, StatusBar } from "react-native";
+import { equals } from "ramda";
+import { StyleSheet, StatusBar, View } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
@@ -17,20 +17,26 @@ import {
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 
 import { withModalNavigationContextProvider } from "../../Contexts/ModalNavigationContext";
-import { useModalSize } from "./hooks/useModalSize";
-import { useBackgroundColor } from "./hooks/useBackgroundColor";
-import { useInitialPlayerState } from "./hooks/useInitialPlayerState";
+import {
+  useModalSize,
+  useBackgroundColor,
+  useInitialPlayerState,
+} from "./hooks";
+
 import { APP_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/events";
-import { Spinner } from "../Spinner";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 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,
@@ -39,7 +45,6 @@ const styles = StyleSheet.create({
     bottom: 0,
     position: "absolute",
   },
-  // eslint-disable-next-line react-native/no-color-literals
   loaderContainer: {
     top: 0,
     left: 0,
@@ -48,7 +53,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "rgba(64,64,64,.5)",
+    backgroundColor: LOADER_BACKGROUND_COLOR,
   },
 });
 
@@ -100,7 +105,7 @@ const VideoModalComponent = () => {
 
   const onHooksSuccess = ({ payload }) => {
     // set new modified entry
-    if (!R.equals(payload, item)) {
+    if (!equals(payload, item)) {
       onVideoModalHookSuccessAnalyticsEvent();
       setVideoModalItem(payload);
     }
@@ -136,6 +141,9 @@ const VideoModalComponent = () => {
 
       <PathnameContext.Provider value={pathname}>
         <ScreenContextProvider pathname={pathname}>
+          {/* Hide content underneath when we switch to next video in fullscreen mode */}
+          {mode === "FULLSCREEN" && <OpaqueLayer />}
+
           {itemIdHooksFinished === item?.id ? (
             <AnimatedPlayerModalWrapper
               style={[
@@ -148,8 +156,6 @@ const VideoModalComponent = () => {
               <HandlePlayable
                 item={item}
                 isModal={mode !== "PIP"}
-                modalHeight={modalSize.height}
-                modalWidth={modalSize.width}
                 mode={mode}
               />
             </AnimatedPlayerModalWrapper>

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

@@ -1,6 +1,5 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import { View } from "react-native";
 
 const props = {
   entry: {},
@@ -24,7 +23,11 @@ jest.mock("react-native-safe-area-context", () => ({
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap",
-  () => ({ ComponentsMap: View })
+  () => {
+    const View = jest.requireActual("react-native").View;
+
+    return { ComponentsMap: View };
+  }
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({

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

@@ -1,7 +1,5 @@
 import React from "react";
 
-import { View } from "react-native";
-
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const props = {
@@ -17,13 +15,17 @@ const props = {
   },
 };
 
-const useIsTablet = jest.fn();
+const mockUseIsDeviceTablet = jest.fn();
 
 jest.mock("react-native");
 
 jest.mock("react-native-gesture-handler");
 
-jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
+jest.mock("../PlayerDetails", () => {
+  const View = jest.requireActual("react-native").View;
+
+  return { PlayerDetails: View };
+});
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
@@ -33,10 +35,11 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
-  useIsTablet,
+  useIsTablet: mockUseIsDeviceTablet,
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/theme"),
   useTheme: jest.fn(() => ({})),
 }));
 
@@ -59,7 +62,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   })),
 }));
 
-jest.mock("../utils", () => ({ playerDimesionsHack: {} }));
+jest.mock("../utils", () => ({ playerDimensionsHack: {} }));
 
 const { PlayerWrapper } = require("../PlayerWrapper");
 
@@ -68,7 +71,7 @@ const children = jest.fn(() => {});
 
 describe("PlayerWrapper", () => {
   it("renders properly", () => {
-    useIsTablet.mockReturnValue(false);
+    mockUseIsDeviceTablet.mockReturnValue(false);
 
     const element = renderWithProviders(
       <PlayerWrapper {...props}>{children}</PlayerWrapper>
@@ -78,7 +81,7 @@ describe("PlayerWrapper", () => {
   });
 
   it("renders inline", () => {
-    useIsTablet.mockReturnValue(false);
+    mockUseIsDeviceTablet.mockReturnValue(false);
 
     const element = renderWithProviders(
       <PlayerWrapper {...props} inline={true} isModal={true}>
@@ -90,7 +93,7 @@ describe("PlayerWrapper", () => {
   });
 
   it("renders inline on tablet in landscape orientation", () => {
-    useIsTablet.mockReturnValue(true);
+    mockUseIsDeviceTablet.mockReturnValue(true);
 
     const element = renderWithProviders(
       <PlayerWrapper {...props} inline={true} isModal={true}>
@@ -102,7 +105,7 @@ describe("PlayerWrapper", () => {
   });
 
   it("renders inline and docked", () => {
-    useIsTablet.mockReturnValue(false);
+    mockUseIsDeviceTablet.mockReturnValue(false);
 
     const children = jest.fn(() => {});
     const dimensions = { height: undefined, width: props.style.width };

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

@@ -4,7 +4,7 @@ exports[`PlayerDetails renders properly 1`] = `
 <View
   collapsable={false}
   style={
-    Object {
+    {
       "backgroundColor": "transparent",
       "flex": 1,
       "marginTop": -8,
@@ -15,7 +15,7 @@ exports[`PlayerDetails renders properly 1`] = `
 >
   <View
     feed="test-source"
-    riverComponents={Array []}
+    riverComponents={[]}
     riverId="test-id"
   />
 </View>
@@ -25,7 +25,7 @@ exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] =
 <View
   collapsable={false}
   style={
-    Object {
+    {
       "backgroundColor": "transparent",
       "flex": 1,
       "marginTop": -20,
@@ -36,7 +36,7 @@ exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] =
 >
   <View
     feed="test-source"
-    riverComponents={Array []}
+    riverComponents={[]}
     riverId="test-id"
   />
 </View>

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

@@ -4,8 +4,8 @@ exports[`PlayerWrapper renders inline 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
       undefined,
@@ -14,7 +14,7 @@ exports[`PlayerWrapper renders inline 1`] = `
 >
   <RNCSafeAreaView
     edges={
-      Object {
+      {
         "bottom": "off",
         "left": "off",
         "right": "off",
@@ -22,31 +22,31 @@ exports[`PlayerWrapper renders inline 1`] = `
       }
     }
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
         },
-        Object {
+        {
           "height": 800,
           "width": 300,
         },
-        Object {},
+        {},
       ]
     }
   >
     <View
       additionalData={
-        Object {
+        {
           "saveArea": true,
         }
       }
       animationType="moveUpComponent"
       style={
-        Array [
-          Object {
+        [
+          {
             "flexDirection": "column",
           },
-          Object {
+          {
             "flex": 1,
           },
         ]
@@ -54,53 +54,23 @@ exports[`PlayerWrapper renders inline 1`] = `
     >
       <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",
-            }
-          }
-          isTablet={false}
-          isTabletLandscape={false}
-          style={
-            Object {
-              "flex": 1,
-              "paddingTop": 20,
-            }
-          }
-        />
-      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -110,8 +80,8 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
       undefined,
@@ -120,7 +90,7 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
 >
   <RNCSafeAreaView
     edges={
-      Object {
+      {
         "bottom": "off",
         "left": "off",
         "right": "off",
@@ -128,31 +98,31 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
       }
     }
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
         },
-        Object {
+        {
           "height": undefined,
           "width": 300,
         },
-        Object {},
+        {},
       ]
     }
   >
     <View
       additionalData={
-        Object {
+        {
           "saveArea": true,
         }
       }
       animationType="moveUpComponent"
       style={
-        Array [
-          Object {
+        [
+          {
             "flexDirection": "column",
           },
-          Object {
+          {
             "flex": 1,
           },
         ]
@@ -160,53 +130,23 @@ exports[`PlayerWrapper renders inline and docked 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
-        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",
-            }
-          }
-          isTablet={false}
-          isTabletLandscape={false}
-          style={
-            Object {
-              "flex": 1,
-              "paddingTop": 20,
-            }
-          }
-        />
-      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -216,8 +156,8 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
       undefined,
@@ -226,7 +166,7 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
 >
   <RNCSafeAreaView
     edges={
-      Object {
+      {
         "bottom": "off",
         "left": "off",
         "right": "off",
@@ -234,31 +174,31 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
       }
     }
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "red",
         },
-        Object {
+        {
           "height": 800,
           "width": 300,
         },
-        Object {},
+        {},
       ]
     }
   >
     <View
       additionalData={
-        Object {
+        {
           "saveArea": true,
         }
       }
       animationType="moveUpComponent"
       style={
-        Array [
-          Object {
+        [
+          {
             "flexDirection": "row",
           },
-          Object {
+          {
             "flex": 1,
           },
         ]
@@ -266,26 +206,26 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
     >
       <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,
@@ -293,38 +233,8 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
           }
           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",
-            }
-          }
-          isTablet={true}
-          isTabletLandscape={true}
-          style={
-            Object {
+            {
               "flex": 1,
-              "paddingTop": 20,
             }
           }
         />
@@ -338,8 +248,8 @@ exports[`PlayerWrapper renders properly 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    Array [
-      Object {
+    [
+      {
         "flex": 1,
       },
       undefined,
@@ -348,7 +258,7 @@ exports[`PlayerWrapper renders properly 1`] = `
 >
   <RNCSafeAreaView
     edges={
-      Object {
+      {
         "bottom": "off",
         "left": "off",
         "right": "off",
@@ -356,31 +266,31 @@ exports[`PlayerWrapper renders properly 1`] = `
       }
     }
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
         },
-        Object {
+        {
           "height": 800,
           "width": 300,
         },
-        Object {},
+        {},
       ]
     }
   >
     <View
       additionalData={
-        Object {
+        {
           "saveArea": true,
         }
       }
       animationType="moveUpComponent"
       style={
-        Array [
-          Object {
+        [
+          {
             "flexDirection": "column",
           },
-          Object {
+          {
             "flex": 1,
           },
         ]
@@ -388,19 +298,19 @@ exports[`PlayerWrapper renders properly 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"