@applicaster/zapp-react-native-ui-components 15.0.0-alpha.2239032089 → 15.0.0-alpha.2349550201

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

@@ -46,6 +46,7 @@ jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
 
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   isTV: jest.fn(() => false),
+  isAndroidPlatform: jest.fn(() => false),
   isApplePlatform: jest.fn(() => true),
   platformSelect: jest.fn((props) => props.android),
 }));

package/Components/VideoModal/hooks/useModalSize.ts

@@ -33,8 +33,12 @@ const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   height: "100%",
 };
 
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
 const isOldAndroidDevice =
-  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION) &&
+  !isAndroidTablet();
 
 export const useModalSize = (): Size => {
   const frame = useSafeAreaFrame();
@@ -42,7 +46,7 @@ export const useModalSize = (): Size => {
   const [modalSize, setModalSize] = React.useState<Size>({
     width: frame.width,
     height: isOldAndroidDevice
-      ? frame.height + StatusBar.currentHeight
+      ? frame.height + (StatusBar.currentHeight ?? 0)
       : frame.height,
   });
 
@@ -57,9 +61,10 @@ export const useModalSize = (): Size => {
 
       return {
         width: newSize.width,
-        height: isOldAndroidDevice
-          ? newSize.height + StatusBar.currentHeight
-          : newSize.height,
+        height:
+          isOldAndroidDevice && newSize.height !== "100%"
+            ? newSize.height + (StatusBar.currentHeight ?? 0)
+            : newSize.height,
       };
     });
 

package/Components/VideoModal/playerWrapperStyle.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { StyleSheet, ViewStyle } from "react-native";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { playerDimensionsHack } from "./utils";
+import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
+import {
+  getBaseDimensions,
+  calculateAspectRatio,
+  getPlayerDimensions,
+  getContainerDimensions,
+} from "./playerWrapperUtils";
+
+export const defaultStyles = StyleSheet.create({
+  playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
+});
+
+export const useStyle = ({
+  style,
+  inline,
+  isModal,
+  isTabletPortrait,
+  configuration,
+  pip,
+}) => {
+  const isTablet = useIsTablet();
+
+  const isInlineModal = inline && isModal;
+
+  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+
+  const tabletWidth = getTabletWidth(
+    configuration.tablet_landscape_sidebar_width,
+    style
+  );
+
+  const baseDimensions: ViewStyle = React.useMemo(
+    () => getBaseDimensions(isInlineModal, isTabletLandscape, tabletWidth),
+    [isInlineModal, isTabletLandscape, tabletWidth]
+  );
+
+  const aspectRatio = React.useMemo(
+    () => calculateAspectRatio(isInlineModal, pip),
+    // ignoring insets - only initial needed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isInlineModal, pip]
+  );
+
+  return React.useMemo(() => {
+    const playerDimensions: ViewStyle = getPlayerDimensions(
+      baseDimensions,
+      aspectRatio
+    );
+
+    const containerDimensions: ViewStyle = getContainerDimensions(
+      baseDimensions,
+      aspectRatio
+    );
+
+    const childrenStyles = {
+      ...playerDimensions,
+      ...playerDimensionsHack,
+    };
+
+    return StyleSheet.create({
+      containerDimensions,
+      childrenStyles,
+    });
+  }, [baseDimensions, aspectRatio]);
+};

package/Components/VideoModal/playerWrapperUtils.ts

@@ -0,0 +1,91 @@
+import { Dimensions, DimensionValue, Platform, ViewStyle } from "react-native";
+import { Edge } from "react-native-safe-area-context";
+
+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;
+};
+
+// This is safe, remembering screen dimensions once as they do not change during runtime
+// TODO: consider sharing screen orientation as a shared function for the app
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
+
+export const getWindowDimensions = () => {
+  const { width, height } = Dimensions.get("window");
+
+  return { width, height };
+};
+
+export const getMaxWindowDimension = () => {
+  const { width, height } = getWindowDimensions();
+
+  return Math.max(width, height);
+};
+
+export const getMinWindowDimension = () => {
+  const { width, height } = getWindowDimensions();
+
+  return Math.min(width, height);
+};
+
+export const getScreenAspectRatio = () => {
+  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
+): readonly Edge[] => {
+  if (isTablet) {
+    return ["top"];
+  }
+
+  if (!isInlineModal && Platform.OS === "android") {
+    return [];
+  }
+
+  return ["top"];
+};
+
+export const getBaseDimensions = (
+  isInlineModal: boolean,
+  isTabletLandscape: boolean,
+  tabletWidth: DimensionValue
+): ViewStyle => ({
+  width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
+  height: undefined,
+});
+
+export const calculateAspectRatio = (
+  isInlineModal: boolean,
+  pip?: boolean
+): number => {
+  return !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9;
+};
+
+export const getPlayerDimensions = (
+  baseDimensions: ViewStyle,
+  aspectRatio: number
+): ViewStyle => ({
+  ...(baseDimensions as any),
+  width: baseDimensions.width,
+  aspectRatio,
+});
+
+export const getContainerDimensions = (
+  baseDimensions: ViewStyle,
+  aspectRatio?: string | number
+): ViewStyle => ({
+  ...baseDimensions,
+  aspectRatio,
+});

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

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

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/Decorators/RiverFeedLoader/utils/getDatasourceUrl.ts

@@ -24,16 +24,12 @@ export const getDatasourceUrl: (
   ) => {
     const { source, mapping } = R.propOr({}, ["data"], component);
 
-    if (mapping) {
-      const contexts = {
-        entry: entryContext,
-        screen: screenContext || screenData,
-        search: getSearchContext(searchContext, mapping),
-      };
+    const contexts = {
+      entry: entryContext,
+      screen: screenContext || screenData,
+      search: getSearchContext(searchContext, mapping),
+    };
 
-      return getInflatedDataSourceUrl({ source, mapping, contexts });
-    }
-
-    return source;
+    return getInflatedDataSourceUrl({ source, mapping, contexts });
   }
 );

package/events/index.ts

@@ -5,6 +5,4 @@ export enum QBUIComponentEvents {
   scrollVerticallyToInitialOffset = "scrollVerticallyToInitialOffset",
   focusOnSelectedTab = "focusOnSelectedTab",
   focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
-  focusOnHomeTopMenuItem = "focusOnHomeTopMenuItem",
-  topMenuBarTV_onLayout = "topMenuBarTV_onLayout",
 }

package/index.d.ts

@@ -228,6 +228,12 @@ declare type TabsSelectionContextType = {
   selectedEntryIndex: number;
 };
 
+declare type TabsAccessibility = {
+  announcement?: string;
+  selectedHint?: string;
+  hint?: string;
+};
+
 declare type TabsProps = {
   entry: ZappEntry[];
   groupId: string;
@@ -235,6 +241,7 @@ declare type TabsProps = {
   focused?: boolean;
   parentFocus?: ParentFocus;
   style?: ReactViewStyle;
+  accessibility?: TabsAccessibility;
 };
 
 declare type TabContentProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.2239032089",
+  "version": "15.0.0-alpha.2349550201",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.2239032089",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.2239032089",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.2239032089",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.2239032089",
+    "@applicaster/applicaster-types": "15.0.0-alpha.2349550201",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.2349550201",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.2349550201",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.2349550201",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/River/TV/withFocusableGroupForContent.tsx

@@ -1,60 +0,0 @@
-import * as React from "react";
-import { View } from "react-native";
-
-import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
-import { riverFocusManager } from "@applicaster/zapp-react-native-utils/appUtils/RiverFocusManager";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-
-import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
-import { QBUIComponentEvents } from "@applicaster/zapp-react-native-ui-components/events";
-
-import { QUICK_BRICK_TOP_CONTAINER } from "@applicaster/quick-brick-core/const";
-
-const useTopMenuLayout = () => {
-  const [layout, setLayout] = React.useState(undefined);
-
-  const handleLayout = React.useCallback((layout) => {
-    setLayout(layout);
-  }, []);
-
-  useSubscriberFor(QBUIComponentEvents.topMenuBarTV_onLayout, handleLayout);
-
-  return layout;
-};
-
-export const withFocusableGroupForContent = (Component) => {
-  return function (props) {
-    const { screenId, isInsideContainer } = props;
-
-    const topMenuLayout = useTopMenuLayout();
-
-    const focusableId = React.useMemo(
-      () =>
-        riverFocusManager.screenFocusableGroupId({
-          screenId,
-          isInsideContainer,
-        }),
-      [screenId, isInsideContainer]
-    );
-
-    if (isInsideContainer) {
-      return <Component {...props} />;
-    }
-
-    const topMenuHeight = toNumberWithDefaultZero(topMenuLayout?.height);
-
-    return (
-      <FocusableGroup
-        key={focusableId}
-        id={focusableId}
-        // workaround to avoid intersection between FocusableGroup for content and FocusableGroup for top-menu
-        style={{ flex: 1, marginTop: topMenuHeight }}
-        groupId={QUICK_BRICK_TOP_CONTAINER}
-      >
-        <View style={{ flex: 1, marginTop: -1 * topMenuHeight }}>
-          <Component {...props} groupId={focusableId} />
-        </View>
-      </FocusableGroup>
-    );
-  };
-};

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-import { Animated, ViewStyle } from "react-native";
-
-import {
-  useModalAnimationContext,
-  PlayerAnimationStateEnum,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
-type Props = {
-  style: ViewStyle[];
-  children: React.ReactNode;
-};
-
-export const AnimatedPlayerModalWrapper = (props: Props) => {
-  const {
-    playerAnimationState,
-    animatedValues: { lastScrollY, dragScrollY, translateYOffset },
-    modalSnapPoints,
-    setStartComponentsAnimation,
-  } = useModalAnimationContext();
-
-  const interpolateConfig: Animated.InterpolationConfigType = React.useMemo(
-    () => ({
-      inputRange: modalSnapPoints,
-      outputRange: modalSnapPoints,
-      extrapolate: "clamp",
-    }),
-    [modalSnapPoints]
-  );
-
-  let translateY;
-
-  if (playerAnimationState === PlayerAnimationStateEnum.drag_player) {
-    translateY = translateYOffset.interpolate(interpolateConfig);
-  } else {
-    const reverseLastScrollY = Animated.multiply(
-      new Animated.Value(-1),
-      lastScrollY
-    );
-
-    translateY = Animated.add(
-      translateYOffset,
-      Animated.add(dragScrollY, reverseLastScrollY)
-    ).interpolate(interpolateConfig);
-  }
-
-  React.useEffect(() => {
-    (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-      playerAnimationState === PlayerAnimationStateEnum.maximize) &&
-      setStartComponentsAnimation(true);
-  }, [playerAnimationState]);
-
-  return (
-    <Animated.View
-      style={[props.style, { transform: [{ translateY: translateY }] }]}
-    >
-      {props.children}
-    </Animated.View>
-  );
-};