@applicaster/zapp-react-native-ui-components 16.0.0-alpha.2851031376 → 16.0.0-alpha.3029086545

package/Components/OfflineHandler/index.tsx

@@ -1,105 +1,83 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { View, StyleSheet } from "react-native";
-import { NotificationView as NotificationViewNative } from "./NotificationView/NotificationView";
-import { NotificationView as NotificationViewSamsung } from "./NotificationView/NotificationView.samsung";
-import { NotificationView as NotificationViewLG } from "./NotificationView/NotificationView.lg";
-
+import React, { useCallback, useEffect } from "react";
 import { useConnectionInfo } from "@applicaster/zapp-react-native-utils/reactHooks/connection";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 
+import { useOfflineHandlerProps } from "./hooks";
 import { componentsLogger } from "../../Helpers/logger";
 import { parseConnectionInfo } from "./utils";
 
 const logger = componentsLogger.addSubsystem("OfflineHandler");
 
+// mirrors NOTIFICATION_TOAST_EVENTS.SHOW_TOAST in
+// @applicaster/quick-brick-core/App/NotificationToastRenderer/NotificationToastManager
+// (kept as a literal here since this package must not depend on quick-brick-core)
+const SHOW_TOAST_EVENT = "showToast";
+const OFFLINE_STATUS_TOAST_ID = "offline-status";
+
 type Props = {
   children?: React.ReactElement<any>;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    position: "relative",
-  },
-});
-
 const timers = {
   goingOffline: 5000,
   goingOnline: 2000,
 };
 
-export const NotificationView = platformSelect({
-  samsung_tv: NotificationViewSamsung,
-  lg_tv: NotificationViewLG,
-  default: NotificationViewNative,
-});
-
 export const OfflineHandler = ({ children }: Props) => {
   const connectionInfo = useConnectionInfo(false);
-  const { online, deviceOnline } = parseConnectionInfo(connectionInfo);
+  const { online } = parseConnectionInfo(connectionInfo);
+  const prevOnline = usePrevious(online);
 
-  const [hidden, setHidden] = useState<boolean>(true);
-  const previousOnline: boolean = usePrevious(online);
-  const timer = useRef<NodeJS.Timeout | null>(null);
-  const initialRender = useRef(false);
+  const emitShowToast = useSubscriberFor(SHOW_TOAST_EVENT);
 
-  const dismiss = useCallback(() => {
-    setHidden(true);
+  const { message, extraMessage, style } = useOfflineHandlerProps(online);
 
-    if (timer.current) {
-      clearTimeout(timer.current);
-      timer.current = null;
-    }
-  }, []);
+  const showOnlineToast = useCallback(() => {
+    logger.log("Device is back online, emit toast");
 
-  const setTimer = useCallback((cb, duration) => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
+    emitShowToast({
+      id: OFFLINE_STATUS_TOAST_ID,
+      message,
+      extraMessage,
+      style,
+      timeout: timers.goingOnline,
+    });
+  }, [emitShowToast, message, extraMessage, style]);
+
+  const showOfflineToast = useCallback(() => {
+    logger.log("Device went offline, emit toast");
 
-    timer.current = setTimeout(cb, duration);
-  }, []);
+    emitShowToast({
+      id: OFFLINE_STATUS_TOAST_ID,
+      message,
+      extraMessage,
+      style,
+      timeout: timers.goingOffline,
+    });
+  }, [emitShowToast, message, extraMessage, style]);
 
   useEffect(() => {
-    if (initialRender.current) {
-      const wentOffline = previousOnline && online === false;
-      const wentOnline = !previousOnline && online;
-      const renderedOffline = !online && previousOnline === null;
-
-      if (!deviceOnline || wentOffline || renderedOffline) {
-        logger.log("Device went offline");
-        setTimer(() => setHidden(true), timers.goingOffline);
-        setHidden(false);
+    // On mount there is no previous state yet: only surface the offline toast
+    // for a device that starts offline. Don't announce "back online" for a
+    // device that was online to begin with.
+    if (prevOnline === undefined) {
+      if (!online) {
+        showOfflineToast();
       }
 
-      if (wentOnline) {
-        logger.log("Device is back online");
-        setHidden(false);
-        setTimer(() => setHidden(true), timers.goingOnline);
-      }
-    } else {
-      initialRender.current = true;
+      return;
     }
 
-    return () => {
-      if (timer.current) {
-        clearTimeout(timer.current);
-        timer.current = null;
+    // On subsequent renders, only emit a toast when the online/offline state changes.
+    if (prevOnline !== online) {
+      if (!online) {
+        showOfflineToast();
+      } else {
+        showOnlineToast();
       }
-    };
-  }, [connectionInfo]);
-
-  return (
-    <View style={styles.container}>
-      <NotificationView
-        hidden={hidden}
-        online={online}
-        previousOnline={previousOnline}
-        dismiss={dismiss}
-      >
-        {children}
-      </NotificationView>
-    </View>
-  );
+    }
+  }, [online, prevOnline, showOfflineToast, showOnlineToast]);
+
+  return children;
 };

package/Components/OfflineHandler/utils/index.ts

@@ -1,9 +1,8 @@
 import * as R from "ramda";
-
 import { NetInfoState } from "@react-native-community/netinfo";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { isOnline as isOnlineUtils } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+
 import { Platform } from "react-native";
 
 type ConnectionInfo = NetInfoState & { deviceStatus: NetStatus };
@@ -51,14 +50,3 @@ export const parseConnectionInfo: typeof parseConnectionInfoForDefault =
     samsung_tv: parseConnectionInfoForSamsung,
     default: parseConnectionInfoForDefault,
   });
-
-export const useNotificationHeight = () => {
-  const insets = useSafeAreaInsets();
-
-  const navBarHeight = platformSelect({ ios: 44, android: 56 });
-
-  const statusHeight = insets.top;
-  const notificationHeight = statusHeight + navBarHeight;
-
-  return { statusHeight, notificationHeight };
-};

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -344,11 +344,15 @@ const PlayerContainerComponent = (props: Props) => {
     setIsLoadingNextVideo(false);
 
     const resumeTime = Number(item?.extensions?.resumeTime);
+    const activePlayer = playerManager.getActivePlayer();
 
-    // Сhecking that the player itself knows where to start playing, and there is no need to call seekTo after returning from the Сhromecast
+    // Сhecking that the player itself knows where to start playing, and there is no need to call seekTo after returning from the Сhromecast.
+    // Live streams and a missing/zero resume position are skipped: seeking to 0 on
+    // a live stream pulls playback off the live edge into a buffer-starvation seek loop.
     if (
-      !playerManager.getActivePlayer()?.hasResumePosition() &&
-      !isNaN(resumeTime)
+      !activePlayer?.hasResumePosition() &&
+      resumeTime > 0 &&
+      !activePlayer?.isLive()
     ) {
       player?.seekTo(resumeTime);
     }

package/Components/PreloaderWrapper/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type PreloaderWrapperProps = {
   showPreloader?: boolean;
-  children?: React.ReactNode;
+  children: React.ReactElement | null;
 };
 
 export const PreloaderWrapper: React.FC<PreloaderWrapperProps> = ({

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -9,7 +9,7 @@ import { useScreenConfiguration } from "../useScreenConfiguration";
 import { RefreshControl } from "../RefreshControl";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 import {
-  usePipesCacheReset,
+  useMarkPipesDataStale,
   useProfilerLogging,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useLoadingState } from "./hooks/useLoadingState";
@@ -154,7 +154,7 @@ function ComponentsMapComponent(props: Props) {
     [flatListHeight]
   );
 
-  usePipesCacheReset(riverId, riverComponents);
+  useMarkPipesDataStale(riverId, riverComponents);
 
   const refreshControl = React.useMemo(
     () => (pullToRefreshEnabled ? <RefreshControl /> : null),

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

@@ -10,11 +10,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
 >
   <View
     onLayout={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
+    style={{}}
   >
     <RCTScrollView
       ListFooterComponent={
@@ -167,11 +163,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
+            style={{}}
           >
             <View />
           </View>
@@ -183,11 +175,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
+            style={{}}
           />
         </View>
         <View

package/Components/Screen/index.tsx

@@ -18,10 +18,13 @@ import {
   useScreenData,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
+import {
+  isValidColor,
+  isTransparentColor,
+} from "@applicaster/zapp-react-native-utils/colorUtils";
 
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
-import { isValidColor } from "./utils";
 import { useWaitForValidOrientation } from "./hooks";
 
 const screenStyles = {
@@ -82,9 +85,10 @@ export function Screen(_props: Props) {
   const style = React.useMemo(
     () => ({
       ...screenStyles,
-      backgroundColor: isValidColor(backgroundColor)
-        ? backgroundColor
-        : theme.app_background_color,
+      backgroundColor:
+        isValidColor(backgroundColor) && !isTransparentColor(backgroundColor)
+          ? backgroundColor
+          : theme.app_background_color,
     }),
     [theme.app_background_color, backgroundColor]
   );

package/Components/ScreenFeedLoader/ScreenFeedLoader.tsx

@@ -8,9 +8,11 @@ import { componentsLogger } from "../../Helpers/logger";
 const logger = componentsLogger.addSubsystem("ScreenFeedLoader");
 
 /** Loads and provides `feedData` and store to  */
-export const ScreenFeedLoader: React.FC<
-  React.PropsWithChildren<{ id: string; feedData: any }>
-> = ({ id, feedData, children }) => {
+export const ScreenFeedLoader: React.FC<{
+  id: string;
+  feedData: any;
+  children: React.ReactElement | null;
+}> = ({ id, feedData, children }) => {
   const { source: feedUrl, mapping } = feedData;
 
   const { data, loading, error } = useFeedLoader({

package/Components/ScreenResolverFeedProvider/ScreenResolverFeedProvider.tsx

@@ -8,7 +8,7 @@ export const ScreenResolverFeedProvider = ({
   useFeedData,
 }: {
   id: string;
-  children: React.ReactNode;
+  children: React.ReactElement | null;
   useFeedData: (id: string) => Option<ZappDataSource>;
 }) => {
   const feedData = useFeedData(id);

package/Components/TopCutoffOverlay/index.tsx

@@ -7,7 +7,7 @@ import { useMarginTop } from "./hooks";
 
 interface IProps {
   targetScreenId?: string;
-  children?: React.ReactNode;
+  children: React.ReactElement | null;
   applyTopCutoff?: boolean;
 }
 
@@ -21,7 +21,7 @@ export const TopCutoffOverlay: React.FC<IProps> = ({
   targetScreenId,
   children,
   applyTopCutoff = true,
-}: IProps) => {
+}) => {
   const cutoffHeight = useMarginTop(targetScreenId);
 
   const { backgroundColor: screenBackgroundColor } =

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { append, compose, identity, isNil, tail, take, update } from "ramda";
+import { append, compose, identity, tail, take, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -10,6 +10,7 @@ import {
   shouldSkipAnimationForPreviousWebViewScene,
 } from "./utils";
 import { v4 as uuid_v4 } from "uuid";
+import { isScreenActiveForRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
 
 export const NAV_ACTION_PUSH = "PUSH";
 
@@ -50,16 +51,16 @@ function scenesForBackTransition(props: SceneProps, { scenes }) {
     : [prepareScene(props.children), scenes[0]];
 }
 
-const isModalClosed = (navigator) => {
-  return !!isNil(navigator?.modalData);
-};
-
 type Props = {
   transitionConfig: any;
   children: React.ReactNode;
   navigator: {
     previousAction: string;
     currentRoute: string;
+    videoModalState?: {
+      visible?: boolean;
+      mode?: string;
+    };
     screenData: {
       [key: string]: any;
     };
@@ -283,8 +284,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // so only a single scene should be rendered,
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
-    const { contentStyle } = this.props;
-    const screenData = this.props.children.props.screenData;
+    const { contentStyle, navigator, children } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
+    const screenData = children.props.screenData;
     const pathname = scenes[to.index].key;
 
     return (
@@ -293,7 +296,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           <Scene
             {...{ style: to?.style || {} }}
             pathname={pathname}
-            isActive={pathname === this.props.navigator.currentRoute}
+            isActive={isScreenActiveForRoute(
+              pathname,
+              currentRoute,
+              videoModalState
+            )}
             contentStyle={contentStyle}
             key={scenes[to.index].key}
             screenUniqueId={scenes[to.index].screenUniqueId}
@@ -311,16 +318,19 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // Looks redundant, but when written like this
   // we do not need to pass or generate keys.
   renderScenes({ scenes, from, to }) {
-    const { contentStyle } = this.props;
+    const { contentStyle, navigator } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
 
     const fromScene = scenes[from.index] && (
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
-        isActive={
-          scenes[from.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[from.index].key,
+          currentRoute,
+          videoModalState
+        )}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
@@ -336,10 +346,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
-        isActive={
-          scenes[to.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[to.index].key,
+          currentRoute,
+          videoModalState
+        )}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
-
+import { StyleSheet, SafeAreaView as RNSafeAreaView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
 import BackButton from "./Buttons/BackButton";
 import BarTitle from "./BarTitle";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   screenStyles: {
@@ -23,6 +24,11 @@ const defaultState: NavBarState = {
   title: "",
 };
 
+const SafeAreaViewPlatform = platformSelect({
+  ios: RNSafeAreaView,
+  android: SafeAreaView,
+});
+
 const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   const isRTL = useIsRTL();
 
@@ -44,14 +50,15 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <View
+    <SafeAreaViewPlatform
+      edges={["top", "left", "right"]}
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-Container"
+      testID="BarView-safeAreaView"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </View>
+    </SafeAreaViewPlatform>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-Container").props.style).toContainEqual({
+    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/Contexts/CachedDimensionsContext/__tests__/index.test.ts

@@ -0,0 +1,154 @@
+import { renderHook, act } from "@testing-library/react-native";
+
+type DimensionsStore = {
+  setState: (
+    partial: { dimensions: Record<string, unknown>; ids: string[] },
+    replace?: boolean
+  ) => void;
+};
+
+const createdStores: DimensionsStore[] = [];
+
+jest.mock("zustand", () => {
+  const actual = jest.requireActual<typeof import("zustand")>("zustand");
+
+  return {
+    ...actual,
+    create: ((initializer: Parameters<typeof actual.create>[0]) => {
+      const store = actual.create(initializer);
+      createdStores.push(store);
+
+      return store;
+    }) as typeof actual.create,
+  };
+});
+
+import { useCachedDimensions } from "../index";
+
+const resetStore = () => {
+  const store = createdStores[createdStores.length - 1];
+
+  act(() => {
+    store?.setState({ dimensions: {}, ids: [] });
+  });
+};
+
+describe("useCachedDimensions", () => {
+  beforeEach(() => {
+    resetStore();
+  });
+
+  describe("getCachedDimensions", () => {
+    it("returns default dimensions when id has no cached value", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: undefined,
+        height: undefined,
+      });
+    });
+
+    it("returns cached dimensions after setCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+      const dimensions = { width: 100, height: 200 };
+
+      act(() => {
+        result.current.setCachedDimensions(dimensions);
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual(dimensions);
+    });
+  });
+
+  describe("setCachedDimensions", () => {
+    it("updates dimensions for the hook id", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 50, height: 75 });
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: 50,
+        height: 75,
+      });
+    });
+
+    it("shares cached dimensions between hook instances with the same id", () => {
+      const { result: first } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 10, height: 20 });
+      });
+
+      expect(second.current.getCachedDimensions()).toEqual({
+        width: 10,
+        height: 20,
+      });
+    });
+  });
+
+  describe("getLastCachedDimensions", () => {
+    it("returns undefined when no dimensions have been cached", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getLastCachedDimensions()).toBeUndefined();
+    });
+
+    it("returns the most recently cached dimensions across ids", () => {
+      const { result: first } = renderHook(() => useCachedDimensions("first"));
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("second")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        second.current.setCachedDimensions({ width: 200, height: 200 });
+      });
+
+      expect(first.current.getLastCachedDimensions()).toEqual({
+        width: 200,
+        height: 200,
+      });
+    });
+
+    it("returns the latest dimensions when the same id is updated multiple times", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 300, height: 400 });
+      });
+
+      expect(result.current.getLastCachedDimensions()).toEqual({
+        width: 300,
+        height: 400,
+      });
+    });
+  });
+
+  describe("return value", () => {
+    it("exposes getCachedDimensions, setCachedDimensions, and getLastCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current).toEqual({
+        getCachedDimensions: expect.any(Function),
+        setCachedDimensions: expect.any(Function),
+        getLastCachedDimensions: expect.any(Function),
+      });
+    });
+  });
+});