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

package/Components/River/TV/River.tsx

@@ -5,7 +5,6 @@ import { Text } from "react-native";
 import * as R from "ramda";
 
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import {
   useFeedLoader,
   useLayoutVersion,
@@ -17,6 +16,10 @@ import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  useNavbarState,
+  useSetNavbarState,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 type Props = {
   screenId: string;
@@ -43,8 +46,10 @@ export const River = (props: Props) => {
     extraOffset,
   } = props;
 
-  const { setScreenTitle, setScreenSummary, screenTitle, screenSummary } =
-    useNavigation();
+  const { title: screenTitle, summary: screenSummary } = useNavbarState();
+
+  const { setTitle: setScreenTitle, setSummary: setScreenSummary } =
+    useSetNavbarState();
 
   const navigationPluginData = useNavigationPluginData();
 
@@ -92,7 +97,7 @@ export const River = (props: Props) => {
       setScreenTitle(stringOrEmpty(screenData?.title));
       setScreenSummary(stringOrEmpty(screenData?.summary));
     }
-  }, [feedData, screenData]);
+  }, [feedData, screenData, screenTitle, screenSummary]);
 
   React.useEffect(() => {
     if (

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -60,6 +60,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       onScroll={[Function]}
       onScrollBeginDrag={[Function]}
       onScrollEndDrag={[Function]}
+      overScrollMode="auto"
       refreshControl={null}
       removeClippedSubviews={true}
       renderItem={[Function]}

package/Components/River/index.tsx

@@ -7,6 +7,7 @@ import { ContainerContext } from "../../Contexts";
 import { RiverComponent } from "./River";
 import { withDimensionsProvider } from "@applicaster/zapp-react-native-utils/dimensionsProvider";
 import { WithRiverFeedLoader } from "../../Decorators/RiverFeedLoader";
+import { withScreenContext } from "../../Contexts/ScreenContext";
 
 const reduxConnector = connectToStore(R.pick(["rivers", "appData"]));
 
@@ -16,5 +17,6 @@ export const River = R.compose(
   WithRiverFeedLoader,
   withNavigator,
   withDimensionsProvider,
-  ContainerContext.withConsumer
+  ContainerContext.withConsumer,
+  withScreenContext
 )(RiverComponent);

package/Components/Screen/__tests__/Screen.test.tsx

@@ -53,6 +53,9 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
   useCurrentScreenData: jest.fn(() => ({
     id: "testId",
   })),
+  useNavbarState: jest.fn(() => ({
+    visible: jest.fn(() => mock_navBarVisibleFlag),
+  })),
 }));
 
 const {
@@ -67,11 +70,11 @@ const navBarProps = { nav_items: [] };
 const screenData = {};
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  useNavBarStateForScreen: jest.fn(() => ({
-    isNavBarVisible: jest.fn(() => mock_navBarVisibleFlag),
-    canGoBack: () => false,
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
   })),
   useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
     currentRoute: "/river/testId",
     data: { screen: { id: "testId" } },
   })),

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -9,6 +9,10 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
     }
   }
 >
+  <View
+    nav_items={Array []}
+    testID="navBar"
+  />
   <View>
     <View
       pathname="/foo/path"

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

@@ -9,7 +9,12 @@ import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 const { log_debug, log_info, log_error } = loggerLiveImageManager;
 
-export type LiveImageManagerEvent = "onEnd" | "onStart" | "onError";
+export type LiveImageManagerEvent =
+  | "onEnd"
+  | "onStart"
+  | "onError"
+  | "onDestroy"
+  | "onPlayerClose";
 
 export type LiveImageManagerListenerData = {
   id: string;
@@ -100,6 +105,15 @@ export class LiveImageManager implements PlayerLifecycleListener {
     }
 
     this.items = this.items.filter((i) => i !== item);
+
+    this.invokeListenersUpdate({
+      callbackName: "onDestroy",
+      event: {
+        item,
+        playerId: this.currentlyPlaying?.playerId,
+        primaryPlayerId: this.primaryPlayer?.playerId,
+      },
+    });
   };
 
   public onViewportEnter = (item: LiveImage) => {
@@ -351,9 +365,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,8 +378,29 @@ export class LiveImageManager implements PlayerLifecycleListener {
       item.setMode(LiveImageType.Image);
     }
 
+    // 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,
+        },
+      });
+  };
+
+  onLiveImagePlayerClose = (item: LiveImage) => {
+    log_debug(
+      `onLiveImagePlayerClose: live-image ${playerInfo(
+        item.player
+      )}, currentPlayingId: ${
+        this.currentlyPlaying?.playerId
+      }, primaryPlayerId: ${this.primaryPlayer?.playerId}`
+    );
+
     this.invokeListenersUpdate({
-      callbackName: "onEnd",
+      callbackName: "onPlayerClose",
       event: {
         item,
         playerId: this.currentlyPlaying?.playerId,
@@ -475,6 +512,16 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     LiveImageManager.instance.onLiveImageError(this, error);
   };
 
+  onVideoError = (error: Error) => {
+    log_error(
+      `onVideoError: live-image, fail to play, switching back to image. error: ${
+        error?.message
+      }, ${playerInfo(this.player)}`
+    );
+
+    LiveImageManager.instance.onLiveImageError(this, error);
+  };
+
   onVideoEnd = (_event) => {
     log_info(
       `onVideoEnd: live-image, video completed, switching back to image, ${playerInfo(
@@ -484,4 +531,16 @@ 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.onLiveImagePlayerClose(this);
+    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 };
+};