@applicaster/zapp-react-native-ui-components 15.0.0-alpha.4069571733 → 15.0.0-alpha.4254682703

package/Components/Cell/TvOSCellComponent.tsx

@@ -17,6 +17,7 @@ import { CellWithFocusable } from "./CellWithFocusable";
 import { FocusableWrapper } from "./FocusableWrapper";
 
 import { focusableButtonsRegistration$ } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 type Props = {
   item: ZappEntry;
@@ -37,6 +38,9 @@ type Props = {
   component: {
     id: number | string;
     component_type: string;
+    styles?: {
+      component_margin_top?: number;
+    };
   };
   selected: boolean;
   CellRenderer: React.FunctionComponent<any> & {
@@ -204,11 +208,16 @@ class TvOSCell extends React.Component<Props, State> {
       const extraAnchorPointYOffset =
         screenLayout?.extraAnchorPointYOffset || 0;
 
+      const componentMarginTop = toNumberWithDefaultZero(
+        component?.styles?.component_margin_top
+      );
+
       const totalOffset =
         headerOffset +
-          (componentAnchorPointY || 0) +
-          extraAnchorPointYOffset -
-          componentsMapOffset || 0;
+        (componentAnchorPointY || 0) +
+        extraAnchorPointYOffset -
+        (componentsMapOffset || 0) +
+        componentMarginTop;
 
       mainOffsetUpdater?.(
         { tag: this.target },

package/Components/PlayerImageBackground/index.tsx

@@ -2,10 +2,6 @@ import React, { PropsWithChildren } from "react";
 import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
-import {
-  AnimationComponent,
-  ComponentAnimationType,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
@@ -23,7 +19,6 @@ const PlayerImageBackgroundComponent = ({
   style,
   imageStyle,
   imageKey,
-  defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
     () => ({ uri: imageSrcFromMediaItem(entry, [imageKey]) }),
@@ -34,11 +29,7 @@ const PlayerImageBackgroundComponent = ({
 
   return (
     <View style={style}>
-      <AnimationComponent
-        style={style}
-        animationType={ComponentAnimationType.player}
-        additionalData={defaultImageDimensions}
-      >
+      <View style={style}>
         <ImageBackground
           resizeMode="cover"
           style={imageSize}
@@ -47,7 +38,7 @@ const PlayerImageBackgroundComponent = ({
         >
           {children}
         </ImageBackground>
-      </AnimationComponent>
+      </View>
     </View>
   );
 };

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,62 +1,155 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { Animated, Dimensions } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 
 import { useConfiguration } from "../utils";
-import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { isMenuVisible } from "../../Screen/navigationHandler";
+
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
+import { PROGRESS_BAR_HEIGHT } from "./utils";
+import { useIsTablet as getIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux";
 
 export type ModalAnimationContextT = {
-  yTranslate: React.MutableRefObject<Animated.Value | null>;
+  yTranslate: React.MutableRefObject<Animated.AnimatedInterpolation<number>>;
+  offsetAnimatedValueRef: React.MutableRefObject<Animated.Value>;
+  offset: React.MutableRefObject<number>;
+  heightAboveMinimised: number;
+  gestureTranslationRef: React.MutableRefObject<Animated.Value>;
   minimisedHeight: number;
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
   yTranslate: React.createRef<Animated.Value | null>(),
+  offsetAnimatedValueRef: React.createRef<Animated.Value>(),
+  offset: React.createRef<number>(),
+  heightAboveMinimised: 0,
+  gestureTranslationRef: React.createRef<Animated.Value>(),
   minimisedHeight: 60,
 });
 
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
+export const isOldAndroidDevice =
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION);
+
+const bottomTabBarHeight = getTabBarHeight();
+
 const Provider = ({ children }: { children: React.ReactNode }) => {
+  const { height } = Dimensions.get("window");
+
   const yTranslate = React.useRef(
-    new Animated.Value(Dimensions.get("window").height)
+    new Animated.Value(height).interpolate<number>({
+      inputRange: [0, height],
+      outputRange: [0, height],
+    })
   );
 
+  const { minimised_height: minimisedHeight } = useConfiguration();
+
   const {
-    videoModalState: { visible },
+    videoModalState: { visible, mode },
+    currentRoute,
+    screenData,
   } = useNavigation();
 
-  const { minimised_height: minimisedHeight } = useConfiguration();
+  const isTabletPortrait = useAppSelector(
+    (state) => state.appData.isTabletPortrait
+  );
+
+  const plugins = usePlugins();
+
+  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+
+  const frame = useSafeAreaFrame();
+  const insets = useSafeAreaInsets();
+
+  const [heightAboveMinimised, setHeightAboveMinimised] = React.useState(0);
+
+  // memoizing heightAboveMinimised value
+  const offset = React.useRef(heightAboveMinimised);
+
+  // Used for memoizing modal y position after start/end of transition
+  const offsetAnimatedValueRef = React.useRef(
+    new Animated.Value(-offset.current)
+  );
+
+  // Used for gesture handling
+  const gestureTranslationRef = React.useRef(new Animated.Value(0));
+
+  const videoModalStateRef = React.useRef({ visible, mode });
+
+  React.useEffect(() => {
+    videoModalStateRef.current = { visible, mode };
+  }, [visible, mode]);
+
+  const translateY = useMemo(() => {
+    const maxRange = heightAboveMinimised;
+
+    const combined: Animated.AnimatedAddition<number> = Animated.add(
+      offsetAnimatedValueRef.current,
+      gestureTranslationRef.current
+    );
+
+    return combined.interpolate({
+      inputRange: [0, maxRange],
+      outputRange: [0, maxRange],
+      extrapolate: "clamp",
+    });
+  }, [visible, heightAboveMinimised]);
+
+  offset.current = heightAboveMinimised;
+  yTranslate.current = translateY;
+
+  React.useEffect(() => {
+    const collapsedHeight =
+      minimisedHeight +
+      (menuVisible ? bottomTabBarHeight : 0) +
+      (isOldAndroidDevice ? 0 : insets.bottom) + // insets.bottom is added to properly display docked modal
+      PROGRESS_BAR_HEIGHT;
+
+    const heightAboveMinimised = frame.height - collapsedHeight;
+
+    const isLandscape = frame.width > frame.height;
+
+    const isTablet = getIsTablet();
+
+    const shouldIgnoreLandscape = isTablet ? isTabletPortrait : true;
 
-  const isTabletLandscape = useIsTabletLandscape();
-  const windowDimensions = Dimensions.get("window");
-
-  useEffect(() => {
-    // Reset player animation state when video modal is closed
-    if (!visible) {
-      if (!isTabletLandscape) {
-        // restore to portrait ( in portrait mode height is bigger)
-        if (windowDimensions.height > windowDimensions.width) {
-          yTranslate.current?.setValue(windowDimensions.height);
-        }
-      } else {
-        yTranslate.current?.setValue(windowDimensions.height);
-      }
+    if (
+      heightAboveMinimised !== offset.current &&
+      videoModalStateRef.current.mode !== "PIP" &&
+      videoModalStateRef.current.mode !== "FULLSCREEN"
+    ) {
+      if (isLandscape && shouldIgnoreLandscape) return;
+      setHeightAboveMinimised(heightAboveMinimised);
+      offset.current = heightAboveMinimised;
     }
-  }, [
-    visible,
-    windowDimensions.height,
-    isTabletLandscape,
-    windowDimensions.width,
-  ]);
+  }, [frame.height, insets.bottom, menuVisible, minimisedHeight]);
 
   return (
     <ReactContext.Provider
       value={useMemo(
         () => ({
           yTranslate,
+          offsetAnimatedValueRef,
+          offset,
+          heightAboveMinimised,
           minimisedHeight,
+          gestureTranslationRef,
         }),
-        [minimisedHeight]
+        [minimisedHeight, heightAboveMinimised]
       )}
     >
       {children}

package/Components/VideoModal/ModalAnimation/index.ts

@@ -2,8 +2,6 @@ export { withModalAnimationProvider } from "./ModalAnimationContext";
 
 export { useModalAnimationContext } from "./useModalAnimationContext";
 
-export { AnimationComponent } from "./AnimationComponent";
-
-export { ComponentAnimationType, defaultAspectRatioWidth } from "./utils";
+export { defaultAspectRatioWidth } from "./utils";
 
 export { DURATION_TO_MINIMIZE, DURATION_TO_MAXIMIZE } from "./const";

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -1,16 +1,5 @@
-/* eslint-disable padding-line-between-statements */
-
-export enum ComponentAnimationType {
-  bottomBar = "bottomBar",
-  player = "player",
-  componentFade = "componentFade",
-  componentAppears = "componentAppears",
-  moveUpComponent = "moveUpComponent",
-  moveComponentHorizontal = "moveComponentHorizontal",
-  audioPlayerPaddingHorizontal = "audioPlayerPaddingHorizontal",
-}
-
 export const AUDIO_PLAYER_HORIZONTAL_PADDING = 15;
+
 export const PROGRESS_BAR_HEIGHT = 3;
 
 export const defaultAspectRatioWidth = (height: number): number =>

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,19 +1,11 @@
 import * as React from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
+import { 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 { playerDimensionsHack } from "./utils";
-import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
-import {
-  DimensionsT,
-  Configuration,
-  getEdges,
-  getBaseDimensions,
-  calculateAspectRatio,
-  getPlayerDimensions,
-  getContainerDimensions,
-} from "./playerWrapperUtils";
+import { DimensionsT, Configuration, getEdges } from "./playerWrapperUtils";
+import { defaultStyles, useStyle } from "./playerWrapperStyle";
 
 type Props = {
   entry: ZappEntry;
@@ -30,10 +22,6 @@ type Props = {
   playerContent: (styles: ViewStyle) => React.ReactNode;
 };
 
-const defaultStyles = StyleSheet.create({
-  playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
-});
-
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
@@ -47,47 +35,21 @@ const PlayerWrapperComponent = (props: Props) => {
     playerContent,
   } = props;
 
+  const styles = 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: DimensionsT = React.useMemo(
-    () => getBaseDimensions(isInlineModal, isTabletLandscape, tabletWidth),
-    [isInlineModal, isTabletLandscape, tabletWidth]
-  );
-
-  const aspectRatio = React.useMemo(
-    () => calculateAspectRatio(isInlineModal, pip),
-    [isInlineModal, pip]
-  );
-
-  const playerDimensions = React.useMemo(
-    () => getPlayerDimensions(baseDimensions, aspectRatio),
-    [baseDimensions, aspectRatio]
-  );
-
-  const containerDimensions: DimensionsT = React.useMemo(
-    () => getContainerDimensions(baseDimensions, playerDimensions.aspectRatio),
-    [baseDimensions, playerDimensions.aspectRatio]
-  );
-
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
 
-  const childrenStyles = React.useMemo(
-    () => ({
-      ...playerDimensions,
-      ...playerDimensionsHack,
-    }),
-    [playerDimensions]
-  );
-
   return (
     <WrapperView
       edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
@@ -98,11 +60,11 @@ const PlayerWrapperComponent = (props: Props) => {
         style={[
           defaultStyles.playerContainer,
           playerDimensionsHack,
-          containerDimensions,
+          styles.containerDimensions,
           containerStyle,
         ]}
       >
-        {playerContent(childrenStyles)}
+        {playerContent(styles.childrenStyles)}
       </View>
     </WrapperView>
   );

package/Components/VideoModal/VideoModal.tsx

@@ -139,11 +139,7 @@ const VideoModalComponent = () => {
 
           {itemIdHooksFinished === item?.id ? (
             <View pointerEvents="box-none" style={styles.container}>
-              <HandlePlayable
-                item={item}
-                isModal={mode !== "PIP"}
-                mode={mode}
-              />
+              <HandlePlayable item={item} isModal mode={mode} />
             </View>
           ) : (
             <View style={styles.loaderContainer}>

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();

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

@@ -1,4 +1,4 @@
-import { Dimensions, Platform } from "react-native";
+import { Dimensions, DimensionValue, Platform, ViewStyle } from "react-native";
 import { Edge } from "react-native-safe-area-context";
 
 export type DimensionsT = {
@@ -13,6 +13,10 @@ export type Configuration = {
   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");
 
@@ -32,8 +36,8 @@ export const getMinWindowDimension = () => {
 };
 
 export const getScreenAspectRatio = () => {
-  const longEdge = getMaxWindowDimension();
-  const shortEdge = getMinWindowDimension();
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
 
   return longEdge / shortEdge;
 };
@@ -56,8 +60,8 @@ export const getEdges = (
 export const getBaseDimensions = (
   isInlineModal: boolean,
   isTabletLandscape: boolean,
-  tabletWidth: number | string
-): DimensionsT => ({
+  tabletWidth: DimensionValue
+): ViewStyle => ({
   width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
   height: undefined,
 });
@@ -70,18 +74,18 @@ export const calculateAspectRatio = (
 };
 
 export const getPlayerDimensions = (
-  baseDimensions: DimensionsT,
+  baseDimensions: ViewStyle,
   aspectRatio: number
-): DimensionsT => ({
-  ...baseDimensions,
+): ViewStyle => ({
+  ...(baseDimensions as any),
   width: baseDimensions.width,
   aspectRatio,
 });
 
 export const getContainerDimensions = (
-  baseDimensions: DimensionsT,
-  playerAspectRatio?: number
-): DimensionsT => ({
+  baseDimensions: ViewStyle,
+  aspectRatio?: string | number
+): ViewStyle => ({
   ...baseDimensions,
-  aspectRatio: playerAspectRatio,
+  aspectRatio,
 });

package/Components/VideoModal/utils.ts

@@ -4,6 +4,7 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { create } from "zustand";
 
 export const useConfiguration = () => {
   const {
@@ -52,6 +53,12 @@ export const useConfiguration = () => {
   };
 };
 
+export const useAnimationStateStore = create<{
+  isAnimationInProgress: boolean;
+}>(() => ({
+  isAnimationInProgress: false,
+}));
+
 const fullSize = {
   width: "100%",
   height: "100%",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.4069571733",
+  "version": "15.0.0-alpha.4254682703",
   "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.4069571733",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.4069571733",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.4069571733",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4069571733",
+    "@applicaster/applicaster-types": "15.0.0-alpha.4254682703",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.4254682703",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.4254682703",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4254682703",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-
-type Props = {
-  animationType: string;
-  children: React.ReactNode;
-  style?: Record<string, any>;
-  additionalData?: { [key: string]: any };
-};
-
-export const AnimationComponent = (props: Props) => {
-  const { style } = props;
-
-  const Component = style ? View : React.Fragment;
-
-  return <Component {...props}>{props.children}</Component>;
-};