@applicaster/zapp-react-native-ui-components 12.0.0-rc.130 → 12.0.0-rc.132

package/Components/Cell/Cell.tsx

@@ -276,13 +276,20 @@ export class CellComponent extends React.Component<Props, State> {
           skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
           {(focused, event) => {
+            const isFocused = this.isCellFocused(focused);
+
+            if (isFocused) {
+              const accessibilityManager = AccessibilityManager.getInstance();
+              accessibilityManager.readText({ text: item.title });
+            }
+
             return (
               <FocusableCell
                 {...{
                   index,
                   CellRenderer,
                   item,
-                  focused: this.isCellFocused(focused),
+                  focused: isFocused,
                   scrollTo: this.scrollToIndex(event),
                   behavior,
                 }}

package/Components/FocusableList/FocusableChild.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { isEqual } from "@applicaster/zapp-react-native-utils/equalUtils";
 import { useFocusable } from "../Focusable/index.android";
+import { useCellState } from "./hooks/useCellState.android";
 
 /**
  * returns parent focus from prop or from context
@@ -29,7 +30,8 @@ const useParentFocus = (
   );
 
 function FocusableChildComponent(props) {
-  const { setIsFocusable, focused, ...focusableContext } = useFocusable();
+  const { setIsFocusable, ...focusableContext } = useFocusable();
+  const focused = useCellState(props.id);
 
   const parentFocus = useParentFocus(props, focusableContext);
 

package/Components/MasterCell/utils/index.ts

@@ -53,10 +53,9 @@ function resolveColorForProp(entry, style, colorProp) {
   const colorFromProp = style[colorProp];
   const nestedEntryValue = R.path(colorFromProp.split("."), entry);
 
-  if (
-    nestedEntryValue === undefined &&
-    !validateColor(colorFromProp.replace(".00", "")) // https://github.com/dreamyguy/validate-color/issues/44
-  ) {
+  const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
+
+  if (nestedEntryValue === undefined && !validateColor(color)) {
     logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -362,13 +362,15 @@ const PlayerContainerComponent = (props: Props) => {
   const toggleFullscreen = (event) => {
     const { fullscreen = false } = event || {};
 
-    if (fullscreen) {
-      navigator.fullscreenVideoModal();
-      playerEvent("onFullscreenPlayerWillPresent");
-    } else {
-      navigator.maximiseVideoModal();
-      playerEvent("onFullscreenPlayerWillDismiss");
-    }
+    setTimeout(() => {
+      if (fullscreen) {
+        navigator.fullscreenVideoModal();
+        playerEvent("onFullscreenPlayerWillPresent");
+      } else {
+        navigator.maximiseVideoModal();
+        playerEvent("onFullscreenPlayerWillDismiss");
+      }
+    });
   };
 
   const onCellTap = (entry) => {

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -45,15 +45,9 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
   }
 
   React.useEffect(() => {
-    const translateYListener = translateY.addListener(() => {
-      (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-        playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
-        setStartComponentsAnimation(true);
-    });
-
-    return () => {
-      translateYListener && translateY.removeListener(translateYListener);
-    };
+    (playerAnimationState === PlayerAnimationStateEnum.minimize ||
+      playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
+      setStartComponentsAnimation(true);
   }, [playerAnimationState]);
 
   return (

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -66,9 +66,10 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
-  const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
-  const isMinimizedModal = videoModalState.mode === "MINIMIZED";
-  const previousItemId = usePrevious(videoModalState.item?.id);
+  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
+  const isMaximazedModal = videoModalMode === "MAXIMIZED";
+  const isMinimizedModal = videoModalMode === "MINIMIZED";
+  const previousItemId = usePrevious(videoModalItem?.id);
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
@@ -81,9 +82,9 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
   const isAudioItem = React.useMemo(
     () =>
-      videoModalState.item?.content?.type?.includes?.("audio") ||
-      videoModalState.item?.type?.value === "audio",
-    [videoModalState.item]
+      videoModalItem?.content?.type?.includes?.("audio") ||
+      videoModalItem?.type?.value === "audio",
+    [videoModalItem]
   );
 
   // Refs for components
@@ -114,7 +115,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         const preparedTranslationY =
           Math.abs(translationY) - lastScrollYValue.current;
 
-        if (videoModalState.mode === "MAXIMIZED") {
+        if (videoModalMode === "MAXIMIZED") {
           const endOffsetY =
             lastSnap + preparedTranslationY + dragToss * velocityY + 150;
 
@@ -161,7 +162,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           resetPlayerAnimationState();
       }
     },
-    [lastSnap, modalSnapPoints, playerAnimationState, videoModalState.mode]
+    [lastSnap, modalSnapPoints, playerAnimationState, videoModalMode]
   );
 
   const onScroll = React.useCallback(({ nativeEvent }) => {
@@ -196,10 +197,9 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   }, []);
 
   React.useEffect(() => {
-    if (
-      videoModalState.mode === "MINIMIZED" &&
-      videoModalState.previousMode === "MAXIMIZED"
-    ) {
+    const { mode, previousMode, item } = videoModalState;
+
+    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
       // set animation to the minimize values if moving from the player to another screen
       if (playerAnimationState === null) {
         setScrollModalAnimatedValue(
@@ -214,22 +214,17 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           dragScrollY,
           dragVideoPlayerY
         );
-      } else {
-        resetPlayerAnimationState();
       }
-    }
-
-    if (
-      (videoModalState.mode === "MAXIMIZED" &&
-        videoModalState.previousMode === "MINIMIZED" &&
-        previousItemId === videoModalState.item?.id) ||
-      (previousItemId !== videoModalState.item?.id &&
-        videoModalState.mode !== "FULLSCREEN")
+    } else if (
+      playerAnimationState === null &&
+      ((previousItemId === item?.id &&
+        mode === "MAXIMIZED" &&
+        (previousMode === "MINIMIZED" || previousMode === "MAXIMIZED")) ||
+        (previousItemId !== item?.id && mode !== "FULLSCREEN"))
     ) {
       setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
-      setTimeout(() => resetPlayerAnimationState());
     }
-  }, [videoModalState, previousItemId]);
+  }, [videoModalState]);
 
   React.useEffect(() => {
     if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
@@ -254,22 +249,22 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         translateYOffset,
         getAnimatedConfig(modalSnapPoints[1])
       ).start(() => {
-        setTimeout(() => {
-          minimiseVideoModal();
-
-          setScrollModalAnimatedValue(
-            translateYOffset,
-            modalSnapPoints[1],
-            setLastSnap
-          );
-
-          resetScrollAnimatedValues(
-            lastScrollY,
-            lastScrollYValue,
-            dragScrollY,
-            dragVideoPlayerY
-          );
-        }, 150);
+        minimiseVideoModal();
+
+        setScrollModalAnimatedValue(
+          translateYOffset,
+          modalSnapPoints[1],
+          setLastSnap
+        );
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+
+        resetPlayerAnimationState();
       });
     } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
       Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
@@ -286,7 +281,9 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         resetPlayerAnimationState();
       });
     }
+  }, [playerAnimationState]);
 
+  React.useEffect(() => {
     const lastScrollYListenerId = lastScrollY.addListener(({ value }) => {
       lastScrollYValue.current = value;
     });
@@ -312,7 +309,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       lastScrollY.removeListener(lastScrollYListenerId);
       dragScrollY.removeListener(dragListenerId);
     };
-  }, [playerAnimationState, isAudioItem, modalSnapPoints, isMinimizedModal]);
+  }, [playerAnimationState, isAudioItem, isMinimizedModal]);
 
   const Wrapper = React.useMemo(
     () => (Platform.OS === "android" ? GestureHandlerRootView : View),

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -37,11 +37,14 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
     setStartComponentsAnimation,
   } = useModalAnimationContext();
 
-  const { videoModalState } = useNavigation();
+  const {
+    videoModalState: { mode: videoModalMode },
+  } = useNavigation();
+
   const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
 
-  const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
-  const isMinimizedModal = videoModalState.mode === "MINIMIZED";
+  const isMaximazedModal = videoModalMode === "MAXIMIZED";
+  const isMinimizedModal = videoModalMode === "MINIMIZED";
 
   const isEnablePanGesture =
     !isLanguageOverlayVisible && (isMaximazedModal || isMinimizedModal);
@@ -59,7 +62,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
         const preparedTranslationY = Math.abs(translationY);
         const dragToss = 0.05;
 
-        if (videoModalState.mode === "MAXIMIZED") {
+        if (videoModalMode === "MAXIMIZED") {
           if (translationY > 0) {
             const endOffsetY =
               lastSnap + preparedTranslationY + dragToss * velocityY + 200;
@@ -84,7 +87,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
               setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
             }
           }
-        } else if (videoModalState.mode === "MINIMIZED") {
+        } else if (videoModalMode === "MINIMIZED") {
           if (translationY < 0) {
             // from mini to full
             setLastSnap(modalSnapPoints[0]);
@@ -100,7 +103,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
         }
       }
     },
-    [lastSnap, modalSnapPoints, videoModalState.mode]
+    [lastSnap, modalSnapPoints, videoModalMode]
   );
 
   React.useEffect(() => {

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -66,6 +66,8 @@ export const AnimationView = ({
   });
 
   const { videoModalState } = useNavigation();
+  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
+
   const insets = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight() + (insets.bottom || 0);
   const minimisedWidth = defaultAspectRatioWidth(minimisedHeight);
@@ -88,9 +90,9 @@ export const AnimationView = ({
 
   const isAudioItem = React.useMemo(
     () =>
-      videoModalState.item?.content?.type?.includes?.("audio") ||
-      videoModalState.item?.type?.value === "audio",
-    [videoModalState.item]
+      videoModalItem?.content?.type?.includes?.("audio") ||
+      videoModalItem?.type?.value === "audio",
+    [videoModalItem]
   );
 
   const inlineAudioPlayer = additionalData.inlineAudioPlayer;
@@ -229,10 +231,8 @@ export const AnimationView = ({
   );
 
   const getInitialValue = React.useCallback(() => {
-    const mode =
-      videoModalState.mode === "PIP"
-        ? videoModalState.previousMode
-        : videoModalState.mode;
+    const { mode: videoModalMode, previousMode } = videoModalState;
+    const mode = videoModalMode === "PIP" ? previousMode : videoModalMode;
 
     switch (mode) {
       case "MINIMIZED":
@@ -266,7 +266,7 @@ export const AnimationView = ({
       isTablet,
       isTabletLandscape,
       isRTL,
-      fromMiniPlayer: videoModalState.mode === "MINIMIZED",
+      fromMiniPlayer: videoModalMode === "MINIMIZED",
       inlineAudioPlayer,
     }),
     [
@@ -276,7 +276,7 @@ export const AnimationView = ({
       defaultValue,
       moveUpValue,
       moveComponentHorizontalValue,
-      videoModalState.mode,
+      videoModalMode,
     ]
   );
 
@@ -305,7 +305,7 @@ export const AnimationView = ({
       }
 
       if (
-        videoModalState.mode === "MAXIMIZED" &&
+        videoModalMode === "MAXIMIZED" &&
         defaultValue.x !== screenWidth &&
         width &&
         height
@@ -318,10 +318,9 @@ export const AnimationView = ({
   }, [screenWidth]);
 
   React.useEffect(() => {
-    if (
-      videoModalState.mode === "MINIMIZED" &&
-      videoModalState.previousMode === "MAXIMIZED"
-    ) {
+    const { mode, previousMode } = videoModalState;
+
+    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
       // set animation to the minimize values if moving from the player to another screen
       if (playerAnimationState === null) {
         const value = getAnimationValue(
@@ -338,7 +337,7 @@ export const AnimationView = ({
     if (
       playerAnimationState === PlayerAnimationStateEnum.minimize &&
       startComponentsAnimation &&
-      videoModalState.mode === "MAXIMIZED"
+      videoModalMode === "MAXIMIZED"
     ) {
       Animated.timing(
         animatedValue,
@@ -347,12 +346,7 @@ export const AnimationView = ({
     } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
       animatedValue.setValue(defaultValue);
     }
-  }, [
-    playerAnimationState,
-    startComponentsAnimation,
-    videoModalState.mode,
-    defaultValue,
-  ]);
+  }, [playerAnimationState, startComponentsAnimation, defaultValue]);
 
   React.useEffect(() => {
     const dragVideoPlayerYListenerId = dragVideoPlayerY.addListener(
@@ -414,9 +408,9 @@ export const AnimationView = ({
       ref={animationComponentRef}
       style={[
         ...preparedStyles,
-        (videoModalState.mode === "MAXIMIZED" ||
-          videoModalState.mode === "MINIMIZED" ||
-          (videoModalState.mode === "PIP" && isAppActive)) &&
+        (videoModalMode === "MAXIMIZED" ||
+          videoModalMode === "MINIMIZED" ||
+          (videoModalMode === "PIP" && isAppActive)) &&
           getAnimationStyle(animationType, animatedValue),
       ]}
     >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.130",
+  "version": "12.0.0-rc.132",
   "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.0-rc.130",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.130",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.130",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.130",
+    "@applicaster/applicaster-types": "12.0.0-rc.132",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.132",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.132",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.132",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",