@applicaster/zapp-react-native-ui-components 12.0.22-alpha.1628418248 → 12.0.22-alpha.1975406433

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,17 +1,16 @@
 import * as React from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
+import {
+  Dimensions,
+  Platform,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PlayerDetails } from "./PlayerDetails";
-import {
-  directionStyles,
-  getEdges,
-  getScreenAspectRatio,
-  getTabletSidebarWidth,
-  getTabletWidth,
-  playerDimensionsHack,
-} from "./utils";
+import { playerDimensionsHack } from "./utils";
 import { useDelayedPlayerDetails } from "./hooks";
 
 import {
@@ -20,7 +19,20 @@ import {
   AnimationComponent,
   ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import type { DimensionsT, Configuration } from "./types";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
+
+type DimensionsT = {
+  width: number | string;
+  height: number | string | undefined;
+  aspectRatio?: number;
+};
+
+type Configuration = {
+  [key: string]: any;
+  tablet_landscape_sidebar_width?: string;
+  tablet_landscape_player_container_background_color?: string;
+};
 
 type Props = {
   entry: ZappEntry;
@@ -42,6 +54,74 @@ const defaultStyles = StyleSheet.create({
   flex: { flex: 1 },
 });
 
+const orientationStyles = StyleSheet.create({
+  landscape: { flexDirection: "row" },
+  portrait: { flexDirection: "column" },
+});
+
+const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
+  if (isTabletLandscape) {
+    return orientationStyles.landscape;
+  }
+
+  return orientationStyles.portrait;
+};
+
+const getScreenAspectRatio = () => {
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
+
+  return longEdge / shortEdge;
+};
+
+const safeAreaStyles = (
+  configuration: Configuration,
+  isTablet: boolean
+): ViewStyle => {
+  const tablet_landscape_player_container_background_color =
+    configuration?.tablet_landscape_player_container_background_color;
+
+  return {
+    backgroundColor: isTablet
+      ? tablet_landscape_player_container_background_color
+      : "transparent",
+  };
+};
+
+const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
+  if (isTablet) {
+    return ["top"];
+  }
+
+  if (!isInlineModal && Platform.OS === "android") {
+    return [];
+  }
+
+  return ["top"];
+};
+
+const getTabletWidth = (
+  configuration: Configuration,
+  dimensions: DimensionsT
+) => {
+  const tablet_landscape_sidebar_width =
+    configuration?.tablet_landscape_sidebar_width;
+
+  const { width } = dimensions;
+
+  const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
+
+  if (tablet_landscape_sidebar_width?.includes("%")) {
+    return Number(width) * (1 - sidebarWidth / 100);
+  }
+
+  if (Number.isNaN(sidebarWidth)) {
+    return Number(width) * 0.65;
+  }
+
+  return Number(width) - sidebarWidth;
+};
+
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
@@ -53,7 +133,6 @@ const PlayerWrapperComponent = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
-    fullscreen,
     pip,
   } = props;
 
@@ -71,16 +150,9 @@ const PlayerWrapperComponent = (props: Props) => {
     isPip: pip,
   });
 
-  const isTabletLandscape = isTablet && !isTabletPortrait;
-
-  const tabletSidebarWidthValue = configuration?.tablet_landscape_sidebar_width;
+  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
-  const tabletWidth = getTabletWidth(tabletSidebarWidthValue, style);
-
-  const tabletSidebarWidth = getTabletSidebarWidth(
-    tabletSidebarWidthValue,
-    style
-  );
+  const tabletWidth = getTabletWidth(configuration, style);
 
   const baseDimensions: DimensionsT = React.useMemo(
     () => ({
@@ -116,17 +188,14 @@ const PlayerWrapperComponent = (props: Props) => {
     [containerDimensions, playerDimensionsHack]
   );
 
-  const wrapperViewStyle: ViewStyle = {
-    backgroundColor:
-      isTablet && !fullscreen
-        ? configuration?.tablet_landscape_player_container_background_color
-        : "transparent",
-  };
-
   return (
     <WrapperView
       edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={[wrapperViewStyle, style, playerDimensionsHack]}
+      style={[
+        safeAreaStyles(configuration, isTablet),
+        style,
+        playerDimensionsHack,
+      ]}
     >
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}
@@ -161,13 +230,7 @@ const PlayerWrapperComponent = (props: Props) => {
           {isShowPlayerDetails && (
             <AnimationComponent
               animationType={ComponentAnimationType.componentFade}
-              style={
-                isTabletLandscape
-                  ? {
-                      width: tabletSidebarWidth,
-                    }
-                  : defaultStyles.flex
-              }
+              style={defaultStyles.flex}
             >
               <PlayerDetails
                 configuration={configuration}

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

@@ -1,6 +1,7 @@
 import React from "react";
 
-import { Platform } from "react-native";
+import { View } from "react-native";
+
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const props = {
@@ -16,20 +17,13 @@ const props = {
   },
 };
 
-Platform.OS = "android";
-
-jest.mock("react-native/Libraries/Utilities/Platform", () => ({
-  OS: "android",
-  select: () => null,
-}));
-
 const useIsTablet = jest.fn();
 
+jest.mock("react-native");
+
 jest.mock("react-native-gesture-handler");
 
-jest.mock("../PlayerDetails", () => ({
-  PlayerDetails: jest.requireActual("react-native").View,
-}));
+jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
@@ -42,11 +36,14 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
   useIsTablet,
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(() => ({})),
+}));
+
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
-  ...jest.requireActual<any>("@applicaster/zapp-react-native-utils/reactUtils"),
   isTV: jest.fn(() => false),
   isApplePlatform: jest.fn(() => true),
-  platformSelect: jest.fn((props) => props.android || props.default),
+  platformSelect: jest.fn((props) => props.android),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
@@ -62,16 +59,14 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   })),
 }));
 
+jest.mock("../utils", () => ({ playerDimensionsHack: {} }));
+
+const { PlayerWrapper } = require("../PlayerWrapper");
+
 jest.useFakeTimers();
 const children = jest.fn(() => {});
 
 describe("PlayerWrapper", () => {
-  let PlayerWrapper;
-
-  beforeAll(() => {
-    PlayerWrapper = require("../PlayerWrapper").PlayerWrapper;
-  });
-
   it("renders properly", () => {
     useIsTablet.mockReturnValue(false);
 

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

@@ -262,7 +262,7 @@ exports[`PlayerWrapper renders properly 1`] = `
         "bottom": "off",
         "left": "off",
         "right": "off",
-        "top": "off",
+        "top": "additive",
       }
     }
     style={

package/Components/VideoModal/utils.ts

@@ -1,15 +1,12 @@
 import * as R from "ramda";
 
-import {
-  isAndroidPlatform,
-  platformSelect,
-} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+import {
+  useNavigation,
+  useIsTablet,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { StyleSheet, Dimensions, ViewStyle } from "react-native";
-import { DimensionsT } from "./types";
 
 export const useConfiguration = () => {
   const {
@@ -55,85 +52,12 @@ export const useConfiguration = () => {
 const fullSize = {
   width: "100%",
   height: "100%",
-} as const;
+};
 
-export const playerDimensionsHack: ViewStyle = platformSelect({
+export const playerDimensionsHack = platformSelect({
   android_tv: fullSize,
   amazon: fullSize,
   lg_tv: fullSize,
   samsung_tv: fullSize,
   default: {},
 });
-
-const orientationStyles = StyleSheet.create({
-  landscape: { flexDirection: "row" },
-  portrait: { flexDirection: "column" },
-});
-
-export const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
-  if (isTabletLandscape) {
-    return orientationStyles.landscape;
-  }
-
-  return orientationStyles.portrait;
-};
-
-export const getScreenAspectRatio = () => {
-  const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
-    Dimensions.get("screen");
-
-  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
-  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
-
-  return longEdge / shortEdge;
-};
-
-export const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
-  if (isTablet) {
-    return ["top"];
-  }
-
-  if (!isInlineModal && isAndroidPlatform()) {
-    return [];
-  }
-
-  return ["top"];
-};
-
-export const getTabletWidth = (
-  tabletSidebarWidth: string | undefined,
-  dimensions: DimensionsT
-) => {
-  const { width } = dimensions;
-
-  const sidebarWidthPercentage = Number(tabletSidebarWidth?.replace("%", ""));
-
-  if (tabletSidebarWidth?.includes("%")) {
-    return Number(width) * (1 - sidebarWidthPercentage / 100);
-  }
-
-  if (Number.isNaN(sidebarWidthPercentage)) {
-    return Number(width) * 0.65;
-  }
-
-  return Number(width) - sidebarWidthPercentage;
-};
-
-export const getTabletSidebarWidth = (
-  tabletSidebarWidth: string | undefined,
-  dimensions: DimensionsT
-) => {
-  const { width } = dimensions;
-
-  const sidebarWidthPercentage = Number(tabletSidebarWidth?.replace("%", ""));
-
-  if (tabletSidebarWidth?.includes("%")) {
-    return Number(width) * (sidebarWidthPercentage / 100);
-  }
-
-  if (Number.isNaN(sidebarWidthPercentage)) {
-    return Number(width) * 0.35;
-  }
-
-  return sidebarWidthPercentage;
-};

package/package.json

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

package/Components/VideoModal/types.ts

@@ -1,11 +0,0 @@
-export type DimensionsT = {
-  width: number | string;
-  height: number | string | undefined;
-  aspectRatio?: number;
-};
-
-export type Configuration = {
-  [key: string]: any;
-  tablet_landscape_sidebar_width?: string;
-  tablet_landscape_player_container_background_color?: string;
-};