@applicaster/zapp-react-native-ui-components 15.0.0-rc.4 → 15.0.0-rc.41

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -1,21 +1,23 @@
 import * as React from "react";
-import { Animated } from "react-native";
+import { Animated, StyleSheet } from "react-native";
 import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 import { ScreenRevealManager } from "./ScreenRevealManager";
+import {
+  emitScreenRevealManagerIsReadyToShow,
+  emitScreenRevealManagerIsNotReadyToShow,
+} from "./utils";
 
-const flex = platformSelect({
-  tvos: 1,
-  android_tv: 1,
-  web: undefined,
-  samsung_tv: undefined,
-  lg_tv: undefined,
-  default: undefined,
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    position: "absolute",
+  },
 });
 
-export const TIMEOUT = 500; // 500 ms
+export const TIMEOUT = 300; // 300 ms
 
 const HIDDEN = 0; // opacity = 0
 
@@ -29,29 +31,48 @@ export const withScreenRevealManager = (Component) => {
   return function WithScreenRevealManager(props: Props) {
     const { componentsToRender } = props;
 
-    const [isReadyToShow, setIsReadyToShow] = React.useState(false);
+    const [isContentReadyToBeShown, setIsContentReadyToBeShown] =
+      React.useState(false);
 
-    const handleSetIsReadyToShow = React.useCallback(() => {
-      setIsReadyToShow(true);
+    const [isShowOverlay, setIsShowOverlay] = React.useState(true);
+
+    const theme = useTheme<BaseThemePropertiesTV>();
+
+    const handleSetIsContentReadyToBeShown = React.useCallback(() => {
+      setIsContentReadyToBeShown(true);
     }, []);
 
     const managerRef = useRefWithInitialValue<ScreenRevealManager>(
-      () => new ScreenRevealManager(componentsToRender, handleSetIsReadyToShow)
+      () =>
+        new ScreenRevealManager(
+          componentsToRender,
+          handleSetIsContentReadyToBeShown
+        )
     );
 
     const opacityRef = useRefWithInitialValue<Animated.Value>(
-      () => new Animated.Value(HIDDEN)
+      () => new Animated.Value(SHOWN)
     );
 
     React.useEffect(() => {
-      if (isReadyToShow) {
+      if (!isContentReadyToBeShown) {
+        emitScreenRevealManagerIsNotReadyToShow();
+      } else {
+        emitScreenRevealManagerIsReadyToShow();
+      }
+    }, [isContentReadyToBeShown]);
+
+    React.useEffect(() => {
+      if (isContentReadyToBeShown) {
         Animated.timing(opacityRef.current, {
-          toValue: SHOWN,
+          toValue: HIDDEN,
           duration: TIMEOUT,
           useNativeDriver: true,
-        }).start();
+        }).start(() => {
+          setIsShowOverlay(false);
+        });
       }
-    }, [isReadyToShow]);
+    }, [isContentReadyToBeShown]);
 
     if (isFirstComponentScreenPicker(componentsToRender)) {
       // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
@@ -59,10 +80,7 @@ export const withScreenRevealManager = (Component) => {
     }
 
     return (
-      <Animated.View
-        style={{ opacity: opacityRef.current, flex }}
-        testID="animated-component"
-      >
+      <>
         <Component
           {...props}
           initialNumberToLoad={
@@ -73,7 +91,19 @@ export const withScreenRevealManager = (Component) => {
           }
           onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
         />
-      </Animated.View>
+        {isShowOverlay ? (
+          <Animated.View
+            style={[
+              styles.container,
+              {
+                opacity: opacityRef.current,
+                backgroundColor: theme.app_background_color,
+              },
+            ]}
+            testID="animated-component"
+          />
+        ) : null}
+      </>
     );
   };
 };

package/Components/Tabs/TV/Tabs.tsx

@@ -8,6 +8,7 @@ import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 import { Gutter } from "../Gutter";
 import Tab from "./Tab";
 import { getStyles } from "./styles";
@@ -28,11 +29,14 @@ const TabsComponent = ({
   style,
   selectedEntryIndex,
   setSelectedEntry,
+  accessibility,
 }: TabsProps & Partial<TabsSelectionContextType>) => {
   const configuration = useConfiguration();
   const config = applyFontConfig(configuration);
   const styles = useMemo(() => getStyles(config), [config]);
 
+  const accessibilityManager = useAccessibilityManager({});
+
   const {
     tab_bar_gutter: horizontalGutter,
     tab_bar_background_image: bgImage,
@@ -60,10 +64,20 @@ const TabsComponent = ({
   );
 
   const onListElementFocus = useCallback(
-    (index) => {
+    (index, isSelected: boolean, item: ZappEntry) => {
+      if (isSelected) {
+        accessibilityManager.readText({
+          text: `${accessibility?.selectedHint} ${item.title}`,
+        });
+      } else {
+        accessibilityManager.readText({
+          text: `${accessibility?.hint} ${item.title}`,
+        });
+      }
+
       scrollToSelectedIndex(index, VIEW_POSITION);
     },
-    [scrollToSelectedIndex]
+    [scrollToSelectedIndex, accessibility]
   );
 
   const renderItem = useCallback(
@@ -94,7 +108,7 @@ const TabsComponent = ({
           id={itemId}
           testID={itemId}
           preferredFocus={isSelected}
-          onFocus={() => onListElementFocus(index)}
+          onFocus={() => onListElementFocus(index, isSelected, item)}
           onPress={() => setSelectedEntry && setSelectedEntry(item)}
           style={style}
         >
@@ -149,6 +163,9 @@ const TabsComponent = ({
         shouldUsePreferredFocus
         isWithMemory={false}
         nextFocusDown={parentFocus?.nextFocusDown}
+        onFocus={() => {
+          accessibilityManager.addHeading(accessibility?.announcement);
+        }}
       >
         <View style={tabs}>
           <ImageBackground

package/Components/Transitioner/Scene.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { equals } from "ramda";
 import { Animated, ViewProps, ViewStyle } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
@@ -95,9 +95,22 @@ function SceneComponent({
   });
 
   const frame = useSafeAreaFrame();
+
+  const [memoFrame, setMemoFrame] = React.useState(frame);
+
+  useEffect(() => {
+    if (isActive) {
+      setMemoFrame((oldFrame) =>
+        oldFrame.width === frame.width && oldFrame.height === frame.height
+          ? oldFrame
+          : frame
+      );
+    }
+  }, [isActive, frame.width, frame.height]);
+
   const isAnimating = animating && overlayStyle;
 
-  const dimensions = isAnimating ? fullWidthDimensions : frame;
+  const dimensions = isAnimating ? fullWidthDimensions : memoFrame;
 
   return (
     <Animated.View

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
   <View>
     <View
       collapsable={false}
+      renderToHardwareTextureAndroid={false}
       style={
         {
           "opacity": 1,

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,212 +1,155 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { Animated, Dimensions } from "react-native";
 
-import {
-  useSafeAreaInsets,
-  useSafeAreaFrame,
-} from "react-native-safe-area-context";
-import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useGetBottomTabBarHeight";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
-import { isLive } from "@applicaster/zapp-react-native-utils/playerUtils";
 
-import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useConfiguration } from "../utils";
-import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
-
-export enum PlayerAnimationStateEnum {
-  minimize = "minimize",
-  maximize = "maximize",
-  drag_player = "drag_player",
-  drag_scroll = "drag_scroll",
-  appear_as_docked = "appear_as_docked",
-}
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { isMenuVisible } from "../../Screen/navigationHandler";
 
-export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
+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>;
-  isActiveGesture: boolean;
-  playerAnimationState: PlayerAnimationStateT;
-  setPlayerAnimationState: (value: PlayerAnimationStateT) => void;
-  startComponentsAnimation: boolean;
-  setStartComponentsAnimation: (value: boolean) => void;
-  resetPlayerAnimationState: () => void;
+  yTranslate: React.MutableRefObject<Animated.AnimatedInterpolation<number>>;
+  offsetAnimatedValueRef: React.MutableRefObject<Animated.Value>;
+  offset: React.MutableRefObject<number>;
+  heightAboveMinimised: number;
+  gestureTranslationRef: React.MutableRefObject<Animated.Value>;
   minimisedHeight: number;
-  animatedValues: {
-    lastScrollY: Animated.Value;
-    dragScrollY: Animated.Value;
-    dragVideoPlayerY: Animated.Value;
-    translateYOffset: Animated.Value;
-  };
-  lastScrollYValue: React.MutableRefObject<number>;
-  scrollPosition: React.MutableRefObject<number>;
-  modalSnapPoints: number[];
-  lastSnap: number;
-  setLastSnap: (value: number) => void;
-  tabletLandscapePlayerTopPosition: number;
-  setTabletLandscapePlayerTopPosition: (value: number) => void;
-  startComponentsAnimationDistance: number;
-  progressBarHeight: number;
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
   yTranslate: React.createRef<Animated.Value | null>(),
-  isActiveGesture: false,
-  playerAnimationState: null,
-  setPlayerAnimationState: () => null,
-  startComponentsAnimation: false,
-  setStartComponentsAnimation: () => null,
-  resetPlayerAnimationState: () => null,
+  offsetAnimatedValueRef: React.createRef<Animated.Value>(),
+  offset: React.createRef<number>(),
+  heightAboveMinimised: 0,
+  gestureTranslationRef: React.createRef<Animated.Value>(),
   minimisedHeight: 60,
-  animatedValues: {
-    lastScrollY: new Animated.Value(0),
-    dragScrollY: new Animated.Value(0),
-    dragVideoPlayerY: new Animated.Value(0),
-    translateYOffset: new Animated.Value(0),
-  },
-  lastScrollYValue: null,
-  scrollPosition: null,
-  modalSnapPoints: [0, 0],
-  lastSnap: 0,
-  setLastSnap: () => null,
-  tabletLandscapePlayerTopPosition: 0,
-  setTabletLandscapePlayerTopPosition: () => null,
-  startComponentsAnimationDistance: 0,
-  progressBarHeight: 0,
 });
 
+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 [playerAnimationState, setPlayerAnimationState] =
-    React.useState<PlayerAnimationStateT>(null);
-
-  const [
-    tabletLandscapePlayerTopPosition,
-    setTabletLandscapePlayerTopPosition,
-  ] = React.useState<number>(0);
-
-  const [startComponentsAnimation, setStartComponentsAnimation] =
-    React.useState<boolean>(false);
+  const { minimised_height: minimisedHeight } = useConfiguration();
 
   const {
-    videoModalState: { mode, visible, item },
+    videoModalState: { visible, mode },
+    currentRoute,
+    screenData,
   } = useNavigation();
 
-  const isLiveItem = isLive(item);
-  const { minimised_height: minimisedHeight } = useConfiguration();
+  const isTabletPortrait = useAppSelector(
+    (state) => state.appData.isTabletPortrait
+  );
 
-  const resetPlayerAnimationState = React.useCallback(() => {
-    setPlayerAnimationState(null);
-    setStartComponentsAnimation(false);
-  }, []);
-
-  // Animated values
-  const lastScrollY = React.useRef(new Animated.Value(0)).current;
-  const dragScrollY = React.useRef(new Animated.Value(0)).current;
-  const translateYOffset = React.useRef(new Animated.Value(0)).current;
-  const dragVideoPlayerY = React.useRef(new Animated.Value(0)).current;
-
-  const { height: safeAreaFrameHeight } = useSafeAreaFrame();
-  const [height, setHeight] = React.useState<number>(safeAreaFrameHeight);
-  const progressBarHeight = isLiveItem ? 0 : PROGRESS_BAR_HEIGHT;
-  const { bottom: bottomSafeArea } = useSafeAreaInsets();
-  const bottomTabBarHeight = useGetBottomTabBarHeight();
-  const startComponentsAnimationDistance = Math.round((height * 60) / 100);
-  const isTabletLandscape = useIsTabletLandscape();
-  const windowDimensions = Dimensions.get("window");
-
-  useEffect(() => {
-    // Reset player animation state when video modal is closed
-    if (!visible) {
-      resetPlayerAnimationState();
-
-      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);
-      }
-    }
-  }, [
-    visible,
-    resetPlayerAnimationState,
-    windowDimensions.height,
-    isTabletLandscape,
-  ]);
+  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(() => {
-    if (visible && mode === "MAXIMIZED" && height !== safeAreaFrameHeight) {
-      setHeight(safeAreaFrameHeight);
-    }
-  }, [height, safeAreaFrameHeight, mode, visible]);
+    videoModalStateRef.current = { visible, mode };
+  }, [visible, mode]);
 
-  /*
-    If bottomTabBarHeight is equal 0 it means an app does not use bottomTabBar.
-    Because of this we need to minus bottom SafeArea offset.
-  */
+  const translateY = useMemo(() => {
+    const maxRange = heightAboveMinimised;
 
-  const minValue =
-    height -
-    (minimisedHeight + bottomTabBarHeight + progressBarHeight + bottomSafeArea);
+    const combined: Animated.AnimatedAddition<number> = Animated.add(
+      offsetAnimatedValueRef.current,
+      gestureTranslationRef.current
+    );
 
-  const modalSnapPoints = React.useMemo(() => [0, minValue], [minValue]);
-  // Last snap state which will helps us to make smooth responder to scrollview animation
-  const [lastSnap, setLastSnap] = React.useState<number>(modalSnapPoints[0]);
-  // Extracted animated values which we will use for calculations
-  const lastScrollYValue = React.useRef<number>(0);
-  const scrollPosition = React.useRef<number>(0);
+    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;
+
+    if (
+      heightAboveMinimised !== offset.current &&
+      videoModalStateRef.current.mode !== "PIP" &&
+      videoModalStateRef.current.mode !== "FULLSCREEN"
+    ) {
+      if (isLandscape && shouldIgnoreLandscape) return;
+      setHeightAboveMinimised(heightAboveMinimised);
+      offset.current = heightAboveMinimised;
+    }
+  }, [frame.height, insets.bottom, menuVisible, minimisedHeight]);
 
   return (
     <ReactContext.Provider
       value={useMemo(
         () => ({
           yTranslate,
-          startComponentsAnimation,
-          setStartComponentsAnimation,
-          isActiveGesture: playerAnimationState !== null,
-          playerAnimationState,
-          setPlayerAnimationState,
-          resetPlayerAnimationState,
+          offsetAnimatedValueRef,
+          offset,
+          heightAboveMinimised,
           minimisedHeight,
-          animatedValues: {
-            lastScrollY,
-            dragScrollY,
-            dragVideoPlayerY,
-            translateYOffset,
-          },
-          lastScrollYValue,
-          scrollPosition,
-          modalSnapPoints,
-          lastSnap,
-          setLastSnap,
-          tabletLandscapePlayerTopPosition,
-          setTabletLandscapePlayerTopPosition,
-          startComponentsAnimationDistance,
-          progressBarHeight,
+          gestureTranslationRef,
         }),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [
-          startComponentsAnimation,
-          playerAnimationState,
-          minimisedHeight,
-          lastScrollY,
-          dragScrollY,
-          dragVideoPlayerY,
-          translateYOffset,
-          lastSnap,
-          modalSnapPoints,
-          lastScrollYValue,
-          scrollPosition,
-          tabletLandscapePlayerTopPosition,
-          startComponentsAnimationDistance,
-          progressBarHeight,
-          isLiveItem,
-        ]
+        [minimisedHeight, heightAboveMinimised]
       )}
     >
       {children}

package/Components/VideoModal/ModalAnimation/index.ts

@@ -1,18 +1,7 @@
-export { AnimatedPlayerModalWrapper } from "./AnimatedPlayerModalWrapper";
-
-export { AnimatedScrollModal } from "./AnimatedScrollModal";
-
-export { AnimatedVideoPlayerComponent } from "./AnimatedVideoPlayerComponent";
-
-export {
-  withModalAnimationProvider,
-  PlayerAnimationStateEnum,
-} from "./ModalAnimationContext";
+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";