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

package/Components/Cell/CellWithFocusable.tsx

@@ -86,6 +86,7 @@ export function CellWithFocusable(props: Props) {
       shouldUsePreferredFocus
       onFocus={onGroupFocus}
       onBlur={onGroupBlur}
+      skipFocusManagerRegistration={skipFocusManagerRegistration}
     >
       <CellRenderer
         testID={"cell-with-focusable-cell-renderer"}

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -584,7 +584,7 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (screen_background_color) {
+    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -602,6 +602,7 @@ const PlayerContainerComponent = (props: Props) => {
     tv_component_container_height,
     screen_background_color,
     isInlineTV,
+    mode,
   ]);
 
   const applePlayerProps = {

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,16 +1,17 @@
 import * as React from "react";
-import {
-  Dimensions,
-  Platform,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from "react-native";
+import { 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 { playerDimensionsHack } from "./utils";
+import {
+  directionStyles,
+  getEdges,
+  getScreenAspectRatio,
+  getTabletSidebarWidth,
+  getTabletWidth,
+  playerDimensionsHack,
+} from "./utils";
 import { useDelayedPlayerDetails } from "./hooks";
 
 import {
@@ -19,20 +20,7 @@ import {
   AnimationComponent,
   ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
-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;
-};
+import type { DimensionsT, Configuration } from "./types";
 
 type Props = {
   entry: ZappEntry;
@@ -54,74 +42,6 @@ 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,
@@ -133,6 +53,7 @@ const PlayerWrapperComponent = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    fullscreen,
     pip,
   } = props;
 
@@ -150,9 +71,16 @@ const PlayerWrapperComponent = (props: Props) => {
     isPip: pip,
   });
 
-  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+  const isTabletLandscape = isTablet && !isTabletPortrait;
+
+  const tabletSidebarWidthValue = configuration?.tablet_landscape_sidebar_width;
 
-  const tabletWidth = getTabletWidth(configuration, style);
+  const tabletWidth = getTabletWidth(tabletSidebarWidthValue, style);
+
+  const tabletSidebarWidth = getTabletSidebarWidth(
+    tabletSidebarWidthValue,
+    style
+  );
 
   const baseDimensions: DimensionsT = React.useMemo(
     () => ({
@@ -188,14 +116,17 @@ 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={[
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimensionsHack,
-      ]}
+      style={[wrapperViewStyle, style, playerDimensionsHack]}
     >
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}
@@ -230,7 +161,13 @@ const PlayerWrapperComponent = (props: Props) => {
           {isShowPlayerDetails && (
             <AnimationComponent
               animationType={ComponentAnimationType.componentFade}
-              style={defaultStyles.flex}
+              style={
+                isTabletLandscape
+                  ? {
+                      width: tabletSidebarWidth,
+                    }
+                  : defaultStyles.flex
+              }
             >
               <PlayerDetails
                 configuration={configuration}

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

@@ -1,7 +1,6 @@
 import React from "react";
 
-import { View } from "react-native";
-
+import { Platform } from "react-native";
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const props = {
@@ -17,13 +16,20 @@ const props = {
   },
 };
 
-const useIsTablet = jest.fn();
+Platform.OS = "android";
 
-jest.mock("react-native");
+jest.mock("react-native/Libraries/Utilities/Platform", () => ({
+  OS: "android",
+  select: () => null,
+}));
+
+const useIsTablet = jest.fn();
 
 jest.mock("react-native-gesture-handler");
 
-jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
+jest.mock("../PlayerDetails", () => ({
+  PlayerDetails: jest.requireActual("react-native").View,
+}));
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
@@ -36,14 +42,11 @@ 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),
+  platformSelect: jest.fn((props) => props.android || props.default),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
@@ -59,14 +62,16 @@ 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": "additive",
+        "top": "off",
       }
     }
     style={

package/Components/VideoModal/types.ts

@@ -0,0 +1,11 @@
+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;
+};

package/Components/VideoModal/utils.ts

@@ -1,12 +1,15 @@
 import * as R from "ramda";
 
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
-  useNavigation,
-  useIsTablet,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+  isAndroidPlatform,
+  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 { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { StyleSheet, Dimensions, ViewStyle } from "react-native";
+import { DimensionsT } from "./types";
 
 export const useConfiguration = () => {
   const {
@@ -52,12 +55,85 @@ export const useConfiguration = () => {
 const fullSize = {
   width: "100%",
   height: "100%",
-};
+} as const;
 
-export const playerDimensionsHack = platformSelect({
+export const playerDimensionsHack: ViewStyle = 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.21",
+  "version": "12.0.22-alpha.1628418248",
   "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.21",
-    "@applicaster/zapp-react-native-bridge": "12.0.21",
-    "@applicaster/zapp-react-native-redux": "12.0.21",
-    "@applicaster/zapp-react-native-utils": "12.0.21",
+    "@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",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",