@applicaster/zapp-react-native-ui-components 11.0.0-rc.99 → 12.0.0-rc.1

package/Components/Screen/index.tsx

@@ -1,19 +1,15 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React, { useMemo } from "react";
 import * as R from "ramda";
-import { Platform, StatusBar, View } from "react-native";
+import { View } from "react-native";
 import { RouteManager } from "../RouteManager";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import {
-  useNavBarStateForScreen,
-  useNavigation,
-} from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useScreenOrientationHandler } from "./orientationHandler";
-import { isNavBarVisible } from "./navigationHandler";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import type { ZappNavigationProps } from "@applicaster/zapp-react-native-flow-types/index";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
 type Props = {
   pathname: string;
@@ -71,12 +67,8 @@ export function Screen(props: Props) {
 
   // Gets the data for the current screen configuration
   const currentScreenData = useCurrentScreenData();
-
   const theme = useTheme();
-
-  const navigator = useNavigation();
-  const screenConfig = useScreenConfiguration(currentScreenData.id);
-  const { backgroundColor } = useMemo(() => screenConfig, [pathname]);
+  const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
 
   const style = React.useMemo(
     () => ({
@@ -88,44 +80,20 @@ export function Screen(props: Props) {
     [theme.app_background_color, backgroundColor]
   );
 
-  const { isNavBarVisible: showNavBar, canGoBack } =
-    useNavBarStateForScreen(pathname);
-
-  const navBarVisible = useMemo(
-    () =>
-      isNavBarVisible(
-        pathname,
-        currentScreenData || screenData,
-        showNavBar,
-        canGoBack(),
-        navigator.videoModalState
-      ),
-    [pathname, showNavBar, navigator.videoModalState]
-  );
-
-  const navBarProps = useMemo(() => props.navBarProps, []);
-
   const targetScreenData =
     currentScreenData || screenData?.targetScreen || screenData;
 
   useScreenOrientationHandler({ screenData: targetScreenData });
 
-  const shouldHideStatusBar = useMemo(
-    () =>
-      !navBarVisible &&
-      navigator.videoModalState?.mode === "FULLSCREEN" &&
-      navigator.videoModalState?.visible === true,
-    [navBarVisible, navigator.videoModalState]
-  );
-
   return (
-    <View style={style}>
-      {navBarVisible && <NavBar key={pathname} {...navBarProps} />}
-      {shouldHideStatusBar && <StatusBar hidden={Platform.OS === "android"} />}
-
-      <OfflineFallbackScreen screenData={screenData}>
-        <RouteManager pathname={pathname} screenData={screenData} />
-      </OfflineFallbackScreen>
-    </View>
+    <ScreenContextProvider pathname={pathname}>
+      <View style={style}>
+        <NavBar key={pathname} {...props.navBarProps} />
+
+        <OfflineFallbackScreen screenData={screenData}>
+          <RouteManager pathname={pathname} screenData={screenData} />
+        </OfflineFallbackScreen>
+      </View>
+    </ScreenContextProvider>
   );
 }

package/Components/Screen/navigationHandler.ts

@@ -19,7 +19,7 @@ export function isNavBarVisible(
   screenData,
   showNavBar,
   canGoBack,
-  videoModalState = null
+  videoModalState: QuickBrickVideoModalState | null = null
 ) {
   /* screenData is not actual navigator.data
    * or navigator.screenData,

package/Components/Spinner/SpinnerComponent.tsx

@@ -8,11 +8,15 @@ type ActivityIndicatorThemeValues = {
   loading_spinner_color: ActivityIndicatorProps["color"];
 };
 
-export function SpinnerComponent(props: ActivityIndicatorProps) {
+type Props = ActivityIndicatorProps & { showAnyway?: boolean };
+
+export function SpinnerComponent(props: Props) {
   const { loading_spinner_size, loading_spinner_color } =
     useTheme() as ActivityIndicatorThemeValues;
 
-  if (isAndroidTVPlatform()) {
+  const { showAnyway = false } = props;
+
+  if (isAndroidTVPlatform() && !showAnyway) {
     return null;
   }
 

package/Components/VideoLive/LiveImageManager.ts

@@ -351,9 +351,11 @@ export class LiveImageManager implements PlayerLifecycleListener {
       }, primaryPlayerId: ${this.primaryPlayer?.playerId}`
     );
 
+    const isCurrentItemEnded = this.currentlyPlaying === item;
+
     // TODO: This branch was used when we had play button to toggle replay.
     //  Now we mute button instead but we keep it just in case.
-    if (IS_ALLOWED_REPLAY && !isTV() && this.currentlyPlaying === item) {
+    if (IS_ALLOWED_REPLAY && !isTV() && isCurrentItemEnded) {
       this.currentlyPlaying.player.seekTo(0);
       this.currentlyPlaying.player.pause();
 
@@ -362,14 +364,16 @@ export class LiveImageManager implements PlayerLifecycleListener {
       item.setMode(LiveImageType.Image);
     }
 
-    this.invokeListenersUpdate({
-      callbackName: "onEnd",
-      event: {
-        item,
-        playerId: this.currentlyPlaying?.playerId,
-        primaryPlayerId: this.primaryPlayer?.playerId,
-      },
-    });
+    // Prevent receiving onEnd event from both `close` and `end` player events
+    isCurrentItemEnded &&
+      this.invokeListenersUpdate({
+        callbackName: "onEnd",
+        event: {
+          item,
+          playerId: this.currentlyPlaying?.playerId,
+          primaryPlayerId: this.primaryPlayer?.playerId,
+        },
+      });
   };
 
   onLiveImageError = (item: LiveImage, error: Error) => {
@@ -484,4 +488,15 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
 
     LiveImageManager.instance.onLiveImageEnded(this);
   };
+
+  onPlayerClose = () => {
+    log_info(
+      `onPlayerClose: live-image, player closed, switching back to image, ${playerInfo(
+        this.player
+      )}`
+    );
+
+    // TODO: we maybe want to add onPlayerClose to separate completion behavior
+    LiveImageManager.instance.onLiveImageEnded(this);
+  };
 }

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -24,6 +24,7 @@ import { overlayFadeIn } from "./animationUtils";
 import { loggerLiveImageComponent } from "./loggerHelper";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
+import { getAutoplaySettings } from "./utils";
 
 const { log_error } = loggerLiveImageComponent;
 
@@ -114,6 +115,11 @@ const PlayerLiveImageComponent = (props: Props) => {
     }
   }, [playerId, item?.id]);
 
+  const { start, end } = React.useMemo(
+    () => getAutoplaySettings(item),
+    [item?.id]
+  );
+
   const controller = liveImageItem.getPlayer();
   const player = usePlayer(playerId);
 
@@ -121,6 +127,10 @@ const PlayerLiveImageComponent = (props: Props) => {
     ref.current = component;
   };
 
+  const onStop = React.useCallback(() => {
+    LiveImageManager.instance.pauseLiveImage(liveImageItem);
+  }, [liveImageItem]);
+
   React.useEffect(() => {
     // FIXME - find a more elegant way to disable live-image on cell for measurement
     if (isMeasurement(item)) {
@@ -147,8 +157,20 @@ const PlayerLiveImageComponent = (props: Props) => {
       id: "mute-action-button",
       listener: {
         onLoad: () => {
+          start && player.seekTo(start);
           setIsReady(true);
         },
+        onVideoProgress: ({ currentTime }) => {
+          if (start && currentTime < start) {
+            // fixes the case when the video is not seekable in onLoad callback
+            player.seekTo(start);
+          }
+
+          if (end && currentTime > end) {
+            onStop();
+            setIsReady(false);
+          }
+        },
         onPlayerMute: () => {
           setMuted(true);
         },
@@ -160,7 +182,7 @@ const PlayerLiveImageComponent = (props: Props) => {
         },
       },
     });
-  }, [player]);
+  }, [player, onStop]);
 
   React.useEffect(() => {
     const subscription = AppState.addEventListener(

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

@@ -0,0 +1,74 @@
+/* eslint-disable react/display-name */
+import * as React from "react";
+import { render } from "@testing-library/react-native";
+import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { PlayerLiveImage } from "../PlayerLiveImageComponent";
+
+const seekTo = jest.fn();
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/player",
+  () => ({
+    Player: {
+      seekTo,
+    },
+  })
+);
+
+describe("PlayerLiveImageComponent", () => {
+  const defaultProps = {
+    item: { id: "1", title: "Test", type: { value: "" } },
+    style: {},
+    playerId: "player1",
+    imageKey: "image1",
+    audioMutedByDefault: false,
+    screenConfig: {},
+  };
+
+  const autoplay_settings = {
+    start_time: "00:10",
+    end_time: "00:35",
+  };
+
+  beforeAll(() => {
+    jest.spyOn(PlayerFactory, "playerFactory").mockImplementation(() => ({
+      controller: new Player({}),
+      Component: () => null,
+    }));
+  });
+
+  it("should render correctly with default props", () => {
+    const component = render(<PlayerLiveImage {...defaultProps} />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it("should call seekTo() on video loaded with autoplay settings", () => {
+    const props = {
+      ...defaultProps,
+      item: {
+        ...defaultProps.item,
+        extensions: { autoplay_settings },
+      },
+    };
+
+    render(<PlayerLiveImage {...props} />);
+
+    // TODO: implement this test
+  });
+
+  it("should call pauseLiveImage() on video reached end timestamp", () => {
+    const props = {
+      ...defaultProps,
+      item: {
+        ...defaultProps.item,
+        extensions: { autoplay_settings },
+      },
+    };
+
+    render(<PlayerLiveImage {...props} />);
+
+    // TODO: implement this test
+  });
+});

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

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PlayerLiveImageComponent should render correctly with default props 1`] = `
+<TrackedView
+  onPositionUpdated={[Function]}
+  testId="tracked-view-player1-Test"
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+  >
+    <View
+      accessibilityIgnoresInvertColors={true}
+      style={Object {}}
+    >
+      <Image
+        resizeMode="cover"
+        source={
+          Object {
+            "uri": undefined,
+          }
+        }
+        style={
+          Array [
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            Object {
+              "height": undefined,
+              "width": undefined,
+            },
+            undefined,
+          ]
+        }
+      />
+    </View>
+  </View>
+</TrackedView>
+`;

package/Components/VideoLive/__tests__/utils.test.ts

@@ -0,0 +1,109 @@
+import { parseTime, getAutoplaySettings } from "../utils";
+
+describe("parseTime", () => {
+  it("should return the parsed time in seconds", () => {
+    expect(parseTime("01:30")).toBe(90);
+    expect(parseTime("00:45")).toBe(45);
+    expect(parseTime("10:00")).toBe(600);
+  });
+
+  it("should throw error for invalid time formats", () => {
+    const error = "Invalid time format";
+    expect(() => parseTime("")).toThrow(error);
+    expect(() => parseTime("abc")).toThrow(error);
+    expect(() => parseTime("12")).toThrow(error);
+    expect(() => parseTime(":12")).toThrow(error);
+    expect(() => parseTime("00:60")).toThrow(error);
+    expect(() => parseTime("-10:00")).toThrow(error);
+  });
+});
+
+describe("getAutoplaySettings", () => {
+  it("should return the autoplay settings with parsed start and end times", () => {
+    const item = {
+      extensions: {
+        autoplay_settings: {
+          start_time: "01:30",
+          end_time: "02:00",
+        },
+      },
+    };
+
+    const { start, end } = getAutoplaySettings(item);
+
+    expect(start).toBe(90);
+    expect(end).toBe(120);
+  });
+
+  it("should return null for missing start or end times", () => {
+    const item = {
+      extensions: {
+        autoplay_settings: {
+          start_time: "01:30",
+        },
+      },
+    };
+
+    const { start, end } = getAutoplaySettings(item);
+
+    expect(start).toBe(90);
+    expect(end).toBeNull();
+  });
+
+  it("should return null for invalid start or end times", () => {
+    const item = {
+      extensions: {
+        autoplay_settings: {
+          start_time: "abc",
+          end_time: "def",
+        },
+      },
+    };
+
+    const { start, end } = getAutoplaySettings(item);
+
+    expect(start).toBeNull();
+    expect(end).toBeNull();
+  });
+
+  it("should return null end time if start time greater than end time", () => {
+    const item = {
+      extensions: {
+        autoplay_settings: {
+          start_time: "02:00",
+          end_time: "01:30",
+        },
+      },
+    };
+
+    const { start, end } = getAutoplaySettings(item);
+
+    expect(start).toBe(120);
+    expect(end).toBeNull();
+  });
+
+  it("should return null end time if start time equal to end time", () => {
+    const item = {
+      extensions: {
+        autoplay_settings: {
+          start_time: "00:30",
+          end_time: "00:30",
+        },
+      },
+    };
+
+    const { start, end } = getAutoplaySettings(item);
+
+    expect(start).toBe(30);
+    expect(end).toBeNull();
+  });
+
+  it("should return null for missing autoplay settings", () => {
+    const item = {};
+
+    const result = getAutoplaySettings(item);
+
+    expect(result.start).toBeNull();
+    expect(result.end).toBeNull();
+  });
+});

package/Components/VideoLive/utils.ts

@@ -0,0 +1,40 @@
+import { parseTimeToSeconds } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/utils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { loggerLiveImageComponent } from "./loggerHelper";
+
+const { log_error } = loggerLiveImageComponent;
+
+type AutoplaySettings = {
+  start: number | null;
+  end: number | null;
+};
+
+export const parseTime = (time: string): number => {
+  const seconds = toNumberWithDefaultZero(parseTimeToSeconds(time));
+
+  return Math.max(seconds, 0);
+};
+
+export const getAutoplaySettings = (item: ZappEntry): AutoplaySettings => {
+  const autoplay_settings = item?.extensions?.autoplay_settings;
+
+  let start: number | null = null;
+  let end: number | null = null;
+
+  if (autoplay_settings) {
+    const { start_time, end_time } = autoplay_settings;
+
+    try {
+      start = start_time ? parseTime(start_time) : null;
+      end = end_time ? parseTime(end_time) : null;
+
+      if (start && end && start >= end) {
+        end = null;
+      }
+    } catch (error) {
+      log_error(`PlayerLiveImageComponent: ${error}`);
+    }
+  }
+
+  return { start, end };
+};

package/Components/VideoModal/PlayerDetails.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { StyleProp, View, ViewStyle } from "react-native";
+import React, { useEffect, useRef } from "react";
+import { StyleProp, ViewStyle, Animated, Easing } from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -28,7 +28,7 @@ export const PlayerDetails = ({
   style,
   configuration,
   isTabletLandscape,
-  isAudioPlayer
+  isAudioPlayer,
 }: Props) => {
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
@@ -36,11 +36,47 @@ export const PlayerDetails = ({
   const extraTabletStyles = !isAudioPlayer
     ? isTabletLandscape
       ? { marginTop: -insets.top, paddingTop: insets.top + 20 }
-      : { marginTop: -8, paddingTop: -8 } // makes sure the colored container is correct
+      : { marginTop: -8, paddingTop: -8 }
     : {};
 
+  // Animation setup
+  const translateY = useRef(new Animated.Value(100)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const runAnimation = () => {
+    Animated.timing(translateY, {
+      toValue: 0,
+      duration: 500,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 500,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+  };
+
+  useEffect(() => {
+    if (isAudioPlayer) {
+      setTimeout(() => runAnimation(), 1000);
+    }
+  }, [isAudioPlayer]);
+
   return (
-    <View style={[style, extraTabletStyles, containerStyle(configuration)]}>
+    <Animated.View
+      style={[
+        style,
+        extraTabletStyles,
+        containerStyle(configuration),
+        isAudioPlayer && {
+          transform: [{ translateY }],
+          opacity,
+        },
+      ]}
+    >
       {screenData && (
         <ComponentsMap
           riverId={screenData.id}
@@ -48,6 +84,6 @@ export const PlayerDetails = ({
           riverComponents={screenData.ui_components}
         />
       )}
-    </View>
+    </Animated.View>
   );
 };

package/Components/VideoModal/PlayerWrapper.tsx

@@ -8,6 +8,7 @@ import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
 type Dimensions = {
   width: number;
@@ -181,35 +182,37 @@ export const PlayerWrapper = (props: Props) => {
         playerDimesionsHack,
       ]}
     >
-      <PathnameContext.Provider value={"videoModal"}>
-        <View
-          testID={`${entry?.id}-player-container`}
-          style={[
-            defaultStyles.playerContainer,
-            containerDimensions,
-            containerStyle,
-            {
-              height:
-                isInlineModal && !docked
-                  ? containerDimensions.height + 10
-                  : containerDimensions.height,
-            },
-            playerDimesionsHack,
-          ]}
-        >
-          {children(childrenStyles)}
-        </View>
-        {isInlineModal && !docked ? (
-          <PlayerDetails
-            configuration={configuration}
-            style={defaultStyles.playerDetails}
-            entry={entry}
-            isTabletLandscape={isTabletLandscape}
-          />
-        ) : (
-          <View style={defaultStyles.playerDetails} />
-        )}
-      </PathnameContext.Provider>
+      <ScreenContextProvider pathname={"videoModal"}>
+        <PathnameContext.Provider value={"videoModal"}>
+          <View
+            testID={`${entry?.id}-player-container`}
+            style={[
+              defaultStyles.playerContainer,
+              containerDimensions,
+              containerStyle,
+              {
+                height:
+                  isInlineModal && !docked
+                    ? containerDimensions.height + 10
+                    : containerDimensions.height,
+              },
+              playerDimesionsHack,
+            ]}
+          >
+            {children(childrenStyles)}
+          </View>
+          {isInlineModal && !docked ? (
+            <PlayerDetails
+              configuration={configuration}
+              style={defaultStyles.playerDetails}
+              entry={entry}
+              isTabletLandscape={isTabletLandscape}
+            />
+          ) : (
+            <View style={defaultStyles.playerDetails} />
+          )}
+        </PathnameContext.Provider>
+      </ScreenContextProvider>
     </WrapperView>
   );
 };