@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5040434238 → 12.0.0-alpha.5061452310

package/Components/Image/utils/index.ts

@@ -1,19 +1,29 @@
+import FastImage, { Source } from "@applicaster/react-native-fast-image";
 import { useMemo } from "react";
+import { ImageRequireSource } from "react-native";
 
-export const useImageSource = (source) => {
+function getSourceCache(cache: Source["cache"]) {
+  return cache || FastImage.cacheControl.web;
+}
+
+export const useImageSource = (source?: Source | ImageRequireSource) => {
   return useMemo(() => {
-    if (typeof source === "number") {
-      return source;
+    if (source) {
+      if (typeof source === "number") {
+        return source;
+      }
+
+      return {
+        uri: source.uri,
+        headers: source.headers,
+        priority: source.priority,
+        cache: getSourceCache(source?.cache),
+        maxWidth: source.maxWidth,
+        maxHeight: source.maxHeight,
+      };
     }
 
-    return {
-      uri: source.uri,
-      headers: source.headers,
-      priority: source.priority,
-      cache: source.cache,
-      maxWidth: source.maxWidth,
-      maxHeight: source.maxHeight,
-    };
+    return undefined;
   }, [
     ...(typeof source === "object"
       ? [

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -177,10 +177,23 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
 const positionAbsolute: ViewStyle = { position: "absolute" };
 
 const LiveImageComponent = (props: LiveImageProps) => {
-  const { item, style, cellUUID, imageKey, actionIdentifier, state } = props;
+  const {
+    item,
+    style: componentStyle,
+    cellUUID,
+    imageKey,
+    actionIdentifier,
+    state,
+  } = props;
 
   const component = useUIComponentContext();
 
+  // Fix for blinking on state change
+  const style = React.useMemo(
+    () => ({ ...componentStyle, backgroundColor: "transparent" }),
+    [componentStyle]
+  );
+
   const componentType = React.useMemo(
     () => getPropComponentType(component),
     [component?.id]

package/Components/MasterCell/utils/index.ts

@@ -125,13 +125,24 @@ export const useFilterChildren = <
 
   const filteredChildren = children.filter((child) => {
     const item = child.props.item;
-    const action = actions.actions[child.props.pluginIdentifier];
+    const actionIdentifier = child.props.pluginIdentifier;
+    const action = actions.actions[actionIdentifier];
+
     // context value of specific plugin
-    const currentValue = action.module.context._currentValue;
+    if (action?.module && action.module.context) {
+      const currentValue = action.module.context._currentValue;
+
+      return currentValue?.isActionAvailable
+        ? currentValue.isActionAvailable(item)
+        : true;
+    }
 
-    return currentValue?.isActionAvailable
-      ? currentValue.isActionAvailable(item)
-      : true;
+    masterCellLogger.error({
+      message: `Action plugin for ${actionIdentifier} could not be found, check the configuration of your action button`,
+      data: { item, action: child.props.pluginIdentifier },
+    });
+
+    return false;
   });
 
   return filteredChildren;

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -147,13 +147,7 @@ const renderApplePlayer = ({
 }) => {
   const { title, summary } = item || {};
 
-  if (!isApplePlatform() || !player) {
-    return null;
-  }
-
-  // TODO: Check if it is not breaking default player logic on tvos
-  // Also if needs to add on tvos brightcove player for QB player
-  if (player.supportsNativeControls()) {
+  if (!isAppleTV() || !player) {
     return null;
   }
 
@@ -606,7 +600,8 @@ const PlayerContainerComponent = (props: Props) => {
     pluginConfiguration,
   };
 
-  const { isActiveGesture, startComponentsAnimation } = useModalAnimationContext();
+  const { isActiveGesture, startComponentsAnimation } =
+    useModalAnimationContext();
 
   return (
     <PlayerStateContext.Provider value={value}>
@@ -651,7 +646,11 @@ const PlayerContainerComponent = (props: Props) => {
                         autoplay={true}
                         controls={false}
                         disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked() && !startComponentsAnimation && !isActiveGesture}
+                        docked={
+                          navigator.isVideoModalDocked() &&
+                          !startComponentsAnimation &&
+                          !isActiveGesture
+                        }
                         entry={item}
                         fullscreen={mode === VideoModalMode.FULLSCREEN}
                         inline={inline}

package/Components/PlayerImageBackground/index.tsx

@@ -33,12 +33,22 @@ const PlayerImageBackgroundComponent = ({
   );
 
   const { playerAnimationState } = useModalAnimationContext();
-  
+
   if (!source) return <>{children}</>;
 
   return (
-    <View style={playerAnimationState === PlayerAnimationStateEnum.maximaze ? defaultImageDimensions : style}>
-      <AnimationComponent style={style} animationType={ComponentAnimationType.player} additionalData={defaultImageDimensions}>
+    <View
+      style={
+        playerAnimationState === PlayerAnimationStateEnum.maximaze
+          ? defaultImageDimensions
+          : style
+      }
+    >
+      <AnimationComponent
+        style={style}
+        animationType={ComponentAnimationType.player}
+        additionalData={defaultImageDimensions}
+      >
         <ImageBackground
           resizeMode="cover"
           style={imageSize}

package/Components/Screen/index.tsx

@@ -137,7 +137,7 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
           {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
         />
 
-        <OfflineFallbackScreen screenData={screenData}>
+        <OfflineFallbackScreen screenData={targetScreenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
           <RouteManager pathname={pathname} screenData={screenData} />
         </OfflineFallbackScreen>

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

@@ -9,6 +9,9 @@ import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHook
 import { PlayerLiveImage } from "../PlayerLiveImageComponent";
 import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+
 const seekTo = jest.fn();
 
 jest.mock(
@@ -22,16 +25,23 @@ jest.mock(
 
 jest
   .spyOn(useNavigationHooks, "useNavigation")
-  .mockImplementation(() => ({videoModalState: { visible: false }}));
+  .mockImplementation(() => ({ videoModalState: { visible: false } }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
+const mockStore = configureStore();
+
+const store = mockStore({ appData: {} });
+
 const Wrapper = ({ children }: { children: React.ReactChildren }) => (
-  <ThemeContext.Provider
-    value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
-  >
-    {children}
-  </ThemeContext.Provider>
+  /* @ts-ignore */
+  <Provider store={store}>
+    <ThemeContext.Provider
+      value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  </Provider>
 );
 
 describe("PlayerLiveImageComponent", () => {

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { Animated, ViewStyle } from "react-native";
 
-import { useModalAnimationContext, PlayerAnimationStateEnum } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = {
@@ -12,17 +15,15 @@ type Props = {
 export const AnimatedPlayerModalWrapper = (props: Props) => {
   const {
     playerAnimationState,
-    animatedValues: {
-      lastScrollY,
-      dragScrollY,
-      translateYOffset,
-    },
+    animatedValues: { lastScrollY, dragScrollY, translateYOffset },
     modalSnapPoints,
     setStartComponentsAnimation,
     lastScrollYValue,
   } = useModalAnimationContext();
 
-  const { height: screenHeight } = useDimensions("screen", { deviceInfo: true });
+  const { height: screenHeight } = useDimensions("screen", {
+    deviceInfo: true,
+  });
 
   const interpolateConfig: Animated.InterpolationConfigType = React.useMemo(
     () => ({
@@ -51,13 +52,17 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
 
   React.useEffect(() => {
     const translateYListener = translateY.addListener(({ value }) => {
-      const preparedValue = Math.round(Math.abs(value) - lastScrollYValue.current);
+      const preparedValue = Math.round(
+        Math.abs(value) - lastScrollYValue.current
+      );
 
       (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-      playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
-        setStartComponentsAnimation(preparedValue >= Math.round(screenHeight * 30 / 100));
+        playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
+        setStartComponentsAnimation(
+          preparedValue >= Math.round((screenHeight * 10) / 100)
+        );
     });
-    
+
     return () => {
       translateYListener && translateY.removeListener(translateYListener);
     };
@@ -65,10 +70,7 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
 
   return (
     <Animated.View
-      style={[
-        props.style,
-        { transform: [{ translateY: translateY }] },
-      ]}
+      style={[props.style, { transform: [{ translateY: translateY }] }]}
     >
       {props.children}
     </Animated.View>

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -7,6 +7,7 @@ import {
   PanGestureHandler,
   State,
   TapGestureHandler,
+  GestureHandlerRootView,
 } from "react-native-gesture-handler";
 import {
   useModalAnimationContext,
@@ -15,7 +16,10 @@ import {
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 
-import { setScrollModalAnimatedValue, resetScrollAnimatedValues } from "./utils";
+import {
+  setScrollModalAnimatedValue,
+  resetScrollAnimatedValues,
+} from "./utils";
 
 const getAnimatedConfig = (toValue) => {
   return {
@@ -54,11 +58,17 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     setLastSnap,
   } = useModalAnimationContext();
 
-  const { maximiseVideoModal, minimiseVideoModal, videoModalState } = useNavigation();
+  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
+    useNavigation();
+
   const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
   const isMinimizedModal = videoModalState.mode === "MINIMIZED";
   const previousItemId = usePrevious(videoModalState.item?.id);
 
+  const isNotMinimizeMaximazeAnimation =
+    playerAnimationState !== PlayerAnimationStateEnum.minimize &&
+    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+
   const isAudioItem = React.useMemo(
     () =>
       videoModalState.item?.content?.type?.includes?.("audio") ||
@@ -85,30 +95,33 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     if (nativeEvent.oldState === State.ACTIVE && scrollPosition.current === 0) {
       // eslint-disable-next-line prefer-const
       const { velocityY, translationY } = nativeEvent;
-      const preparedTranslationY = Math.abs(translationY) - lastScrollYValue.current;
       const dragToss = 0.05;
 
+      const preparedTranslationY =
+        Math.abs(translationY) - lastScrollYValue.current;
+
       if (videoModalState.mode === "MAXIMIZED") {
-        const endOffsetY = lastSnap + preparedTranslationY + dragToss * velocityY + 150;
-  
+        const endOffsetY =
+          lastSnap + preparedTranslationY + dragToss * velocityY + 150;
+
         let destSnapPoint = modalSnapPoints[0];
-  
+
         for (const snapPoint of modalSnapPoints) {
           const distFromSnap = Math.abs(snapPoint - endOffsetY);
-  
+
           if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
             destSnapPoint = snapPoint;
           }
         }
-  
+
         setLastSnap(destSnapPoint);
-  
+
         if (destSnapPoint === modalSnapPoints[0]) {
           translateYOffset.extractOffset();
           translateYOffset.setValue(preparedTranslationY);
           translateYOffset.flattenOffset();
           dragScrollY.setValue(0);
-  
+
           setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
         } else {
           setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
@@ -125,6 +138,9 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           resetPlayerAnimationState();
         }
       }
+    } else {
+      playerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
+        resetPlayerAnimationState();
     }
   };
 
@@ -132,50 +148,46 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     scrollPosition.current = nativeEvent.contentOffset.y;
   }, []);
 
-  const canMomentum = React.useRef(false);
-  const momentumScrollEnd = React.useRef(0);
-
-  const onMomentumScrollBegin = React.useCallback(() => {
-    canMomentum.current = true;
-  }, []);
-
-  const onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
-    if (Platform.OS === "android") {
-      // onMomentumScrollEnd doesn't work correct on android(https://github.com/facebook/react-native/issues/32696)
-      if (canMomentum.current) {
-        if (nativeEvent.contentOffset.y === 0 && momentumScrollEnd.current !== 0 && !isActiveGesture) {
-          resetScrollAnimatedValues(lastScrollY, lastScrollYValue, dragScrollY, dragVideoPlayerY);
-        }
-        
-        momentumScrollEnd.current = nativeEvent.contentOffset.y;
-      }
-  
-      canMomentum.current = false;
-    } else {
+  const onMomentumScrollEnd = React.useCallback(
+    ({ nativeEvent }) => {
       if (nativeEvent.contentOffset.y === 0 && !isActiveGesture) {
-        resetScrollAnimatedValues(lastScrollY, lastScrollYValue, dragScrollY, dragVideoPlayerY);
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
       }
-    }
-  }, [isActiveGesture]);
+    },
+    [isActiveGesture]
+  );
 
   React.useEffect(() => {
     return () => {
       scrollPosition.current = 0;
-      resetScrollAnimatedValues(lastScrollY, lastScrollYValue, dragScrollY, dragVideoPlayerY);
+
+      resetScrollAnimatedValues(
+        lastScrollY,
+        lastScrollYValue,
+        dragScrollY,
+        dragVideoPlayerY
+      );
     };
   }, []);
 
   React.useEffect(() => {
     if (
-      (videoModalState.mode === "MINIMIZED") ||
-      (videoModalState.mode === "MAXIMIZED" &&
-        videoModalState.previousMode === "MINIMIZED")
+      videoModalState.mode === "MINIMIZED" &&
+      videoModalState.previousMode === "MAXIMIZED"
     ) {
       resetPlayerAnimationState();
     }
 
-    if ((videoModalState.mode === "MAXIMIZED" && videoModalState.previousMode === "MAXIMIZED") ||
-      (previousItemId !== videoModalState.item?.id)) {
+    if (
+      (videoModalState.mode === "MAXIMIZED" &&
+        videoModalState.previousMode === "MAXIMIZED") ||
+      previousItemId !== videoModalState.item?.id
+    ) {
       setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
       setTimeout(() => resetPlayerAnimationState());
     }
@@ -192,7 +204,12 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           ((dragScrollY as any)._value !== 0 ||
             (dragVideoPlayerY as any)._value !== 0))
       ) {
-        resetScrollAnimatedValues(lastScrollY, lastScrollYValue, dragScrollY, dragVideoPlayerY);
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
       }
 
       Animated.timing(
@@ -200,16 +217,35 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         getAnimatedConfig(modalSnapPoints[1])
       ).start(() => {
         setTimeout(() => {
-          setScrollModalAnimatedValue(translateYOffset, modalSnapPoints[1], setLastSnap);
-          resetScrollAnimatedValues(lastScrollY, lastScrollYValue, dragScrollY, dragVideoPlayerY);
           minimiseVideoModal();
+
+          setScrollModalAnimatedValue(
+            translateYOffset,
+            modalSnapPoints[1],
+            setLastSnap
+          );
+
+          resetScrollAnimatedValues(
+            lastScrollY,
+            lastScrollYValue,
+            dragScrollY,
+            dragVideoPlayerY
+          );
         }, 150);
       });
     } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
       Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
-        setScrollModalAnimatedValue(translateYOffset, 0, setLastSnap);
-        resetScrollAnimatedValues(lastScrollY, lastScrollYValue, dragScrollY, dragVideoPlayerY);
         maximiseVideoModal();
+        setScrollModalAnimatedValue(translateYOffset, 0, setLastSnap);
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+
+        resetPlayerAnimationState();
       });
     }
 
@@ -218,9 +254,16 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     });
 
     const dragListenerId = dragScrollY.addListener(({ value }) => {
-      const preparedValue = Math.round(isAudioItem ? Math.abs(value) : value);
+      const preparedValue =
+        isMinimizedModal && value >= 0
+          ? 0
+          : Math.round(isAudioItem ? Math.abs(value) : value);
 
-      if (preparedValue > 0 && scrollPosition.current === 0 && playerAnimationState !== PlayerAnimationStateEnum.drag_player) {
+      if (
+        preparedValue > 0 &&
+        scrollPosition.current === 0 &&
+        playerAnimationState !== PlayerAnimationStateEnum.drag_player
+      ) {
         playerAnimationState !== PlayerAnimationStateEnum.drag_scroll &&
           setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
       }
@@ -232,51 +275,61 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     };
   }, [playerAnimationState, isAudioItem, modalSnapPoints]);
 
+  const Wrapper = React.useMemo(
+    () => (Platform.OS === "android" ? GestureHandlerRootView : View),
+    []
+  );
+
   return (
-    <TapGestureHandler
-      maxDurationMs={100000}
-      ref={tapHandlerRef}
-      maxDeltaY={lastSnap - modalSnapPoints[0]}
-    >
-      <View style={generalStyles.container} pointerEvents="box-none">
-        <PanGestureHandler
-          enabled={isMaximazedModal || isMinimizedModal}
-          ref={panHandlerRef}
-          simultaneousHandlers={[scrollRef, tapHandlerRef]}
-          shouldCancelWhenOutside={false}
-          onGestureEvent={onGestureEvent}
-          onHandlerStateChange={onHandlerStateChange}
-        >
-          <Animated.View>
-            <NativeViewGestureHandler
-              ref={scrollRef}
-              waitFor={tapHandlerRef}
-              simultaneousHandlers={panHandlerRef}
-            >
-              <Animated.ScrollView
-                scrollEnabled={isMaximazedModal}
-                bounces={false}
-                onScrollBeginDrag={onRegisterLastScroll}
-                onScroll={onScroll}
-                onMomentumScrollBegin={onMomentumScrollBegin}
-                onMomentumScrollEnd={onMomentumScrollEnd}
-                scrollEventThrottle={1}
-                showsVerticalScrollIndicator={false}
+    <Wrapper style={generalStyles.container}>
+      <TapGestureHandler
+        maxDurationMs={100000}
+        ref={tapHandlerRef}
+        maxDeltaY={lastSnap - modalSnapPoints[0]}
+        numberOfTaps={1}
+      >
+        <View pointerEvents="box-none">
+          <PanGestureHandler
+            enabled={
+              (isMaximazedModal || isMinimizedModal) &&
+              isNotMinimizeMaximazeAnimation
+            }
+            ref={panHandlerRef}
+            simultaneousHandlers={[scrollRef, tapHandlerRef]}
+            shouldCancelWhenOutside={isMaximazedModal}
+            onGestureEvent={onGestureEvent}
+            onHandlerStateChange={onHandlerStateChange}
+          >
+            <Animated.View>
+              <NativeViewGestureHandler
+                ref={scrollRef}
+                waitFor={tapHandlerRef}
+                simultaneousHandlers={panHandlerRef}
               >
-                {children}
-              </Animated.ScrollView>
-            </NativeViewGestureHandler>
-          </Animated.View>
-        </PanGestureHandler>
-      </View>
-    </TapGestureHandler>
+                <Animated.ScrollView
+                  scrollEnabled={
+                    isMaximazedModal && isNotMinimizeMaximazeAnimation
+                  }
+                  bounces={false}
+                  onScrollBeginDrag={onRegisterLastScroll}
+                  onScroll={onScroll}
+                  onMomentumScrollEnd={onMomentumScrollEnd}
+                  scrollEventThrottle={1}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {children}
+                </Animated.ScrollView>
+              </NativeViewGestureHandler>
+            </Animated.View>
+          </PanGestureHandler>
+        </View>
+      </TapGestureHandler>
+    </Wrapper>
   );
 };
 
 export const AnimatedScrollModal = ({ children }: Props) => {
-  const Component = !isTV()
-    ? AnimatedScrollModalComponent
-    : React.Fragment;
+  const Component = !isTV() ? AnimatedScrollModalComponent : React.Fragment;
 
   return <Component>{children}</Component>;
 };