@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1593888345 → 16.0.0-alpha.1701179921

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

@@ -11,9 +11,14 @@ jest.mock(
   () => () => null
 );
 
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 50 }),
-}));
+jest.mock("react-native-safe-area-context", () => {
+  const { View } = jest.requireActual("react-native");
+
+  return {
+    SafeAreaView: View,
+    useSafeAreaInsets: () => ({ top: 50 }),
+  };
+});
 
 jest.mock("react-native", () => {
   const RN = jest.genMockFromModule("react-native");

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

@@ -141,6 +141,10 @@ const {
   useGetScreenOrientation,
 } = require("@applicaster/zapp-react-native-utils/appUtils/orientationHelper");
 
+const {
+  useIsScreenActive,
+} = require("@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive");
+
 const navigator = {};
 const navBarProps = { nav_items: [] };
 const screenData = {};
@@ -195,4 +199,24 @@ describe("<Screen Component />", () => {
       expect(toJSON()).toMatchSnapshot();
     });
   });
+
+  describe("when the screen is inactive", () => {
+    afterEach(() => {
+      useIsScreenActive.mockReturnValue(true);
+    });
+
+    it("hides the screen from VoiceOver (iOS) and TalkBack (Android)", () => {
+      useIsScreenActive.mockReturnValue(false);
+
+      const { UNSAFE_root } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
+      expect(UNSAFE_root.findByType(View).props).toMatchObject({
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+      });
+    });
+  });
 });

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

@@ -13,6 +13,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   }
 >
   <View
+    accessibilityElementsHidden={false}
     importantForAccessibility="yes"
     style={
       {
@@ -58,6 +59,7 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   }
 >
   <View
+    accessibilityElementsHidden={false}
     importantForAccessibility="yes"
     style={
       {

package/Components/Screen/index.tsx

@@ -121,6 +121,11 @@ export function Screen(_props: Props) {
       ref={ref}
       style={style}
       importantForAccessibility={!isActive ? "no-hide-descendants" : "yes"}
+      // `importantForAccessibility` only affects Android (see RN docs).
+      // Without the iOS counterpart below, VoiceOver keeps traversing and
+      // focusing elements on an inactive/underlying screen (e.g. Albums In
+      // Order) even after a new screen (e.g. an Album) is pushed on top.
+      accessibilityElementsHidden={!isActive}
     >
       {isReady ? (
         <>

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -85,7 +85,7 @@ export const withScreenRevealManager = (Component) => {
 
     if (isFirstComponentScreenPicker(componentsToRender)) {
       // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
-      return <Component {...props} />;
+      return <Component {...props} initialNumberToLoad={1} />;
     }
 
     return (

package/Components/Transitioner/Transitioner.tsx

@@ -129,8 +129,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
    * The last scene in the array is removed in the "backTransitionEnd" callback,
    * only after the animation is complete.
    */
-  backTransitionStart() {
-    const previousRoute = this.props.navigator?.currentRoute;
+  backTransitionStart(previousRoute: string) {
     const currentRoute = this.props.navigator?.currentRoute;
 
     const diffLengthRoutes =
@@ -242,7 +241,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           break;
 
         case NAV_ACTION_BACK: {
-          this.backTransitionStart();
+          this.backTransitionStart(previousRoute);
           break;
         }
 

package/Components/Transitioner/__tests__/transitioner.test.js

@@ -1,8 +1,13 @@
 import React from "react";
 import { Text, View } from "react-native";
 
-import { TransitionerComponent } from "../Transitioner";
-import { render } from "@testing-library/react-native";
+import { AnimationManager } from "../AnimationManager";
+import {
+  NAV_ACTION_BACK,
+  NAV_ACTION_PUSH,
+  TransitionerComponent,
+} from "../Transitioner";
+import { act, render } from "@testing-library/react-native";
 
 jest.mock("../Scene", () => {
   const View = jest.requireActual("react-native").View;
@@ -40,6 +45,27 @@ const transitionerComponentProps = {
 
 jest.mock("uuid");
 
+const sceneTransitionConfig = () => ({
+  push: {
+    duration: 0,
+    easing: jest.fn(),
+    from: { style: {} },
+    to: { style: {} },
+  },
+  back: {
+    duration: 0,
+    easing: jest.fn(),
+    from: { style: {} },
+    to: { style: {} },
+  },
+});
+
+const sceneFor = (route) => (
+  <View pathname={route}>
+    <Text>{route}</Text>
+  </View>
+);
+
 describe("<TransitionerComponent />", () => {
   it("renders correctly", () => {
     const wrapper = render(
@@ -50,4 +76,59 @@ describe("<TransitionerComponent />", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it("removes both intermediate scenes when backing out to the tab root", () => {
+    jest
+      .spyOn(AnimationManager.prototype, "animate")
+      .mockImplementation((_, done) => done());
+
+    const ref = React.createRef();
+    const root = "/river/root";
+    const child = `${root}/river/child`;
+    const grandchild = `${child}/river/grandchild`;
+
+    const propsFor = (route, previousAction) => ({
+      navigator: {
+        previousAction,
+        currentRoute: route,
+        screenData: {},
+      },
+      transitionConfig: sceneTransitionConfig,
+      layoutData: {
+        isTablet: false,
+        isTabletPortrait: false,
+      },
+      children: sceneFor(route),
+    });
+
+    const { rerender } = render(
+      <TransitionerComponent ref={ref} {...propsFor(root, "REPLACE")} />
+    );
+
+    act(() => {
+      rerender(
+        <TransitionerComponent
+          ref={ref}
+          {...propsFor(child, NAV_ACTION_PUSH)}
+        />
+      );
+    });
+
+    act(() => {
+      rerender(
+        <TransitionerComponent
+          ref={ref}
+          {...propsFor(grandchild, NAV_ACTION_PUSH)}
+        />
+      );
+    });
+
+    act(() => {
+      rerender(
+        <TransitionerComponent ref={ref} {...propsFor(root, NAV_ACTION_BACK)} />
+      );
+    });
+
+    expect(ref.current.state.scenes.map((scene) => scene.key)).toEqual([root]);
+  });
 });

package/Components/VideoLive/LiveImageManager.ts

@@ -213,10 +213,16 @@ export class LiveImageManager implements PlayerLifecycleListener {
       log_debug(
         `pauseItem: live-image not ready, ${item.playerId} - ${item.tag}`
       );
-    } else {
-      item.player.pause();
     }
 
+    // Pause even when the player is not ready yet: the underlying player may
+    // still be loading and would otherwise start playing on its own once it
+    // has buffered, leaving the live-image audible underneath the primary
+    // player. Note this is best effort - the web controller's pause() only
+    // logs while the player component is unmounted - so the player itself also
+    // refuses buffer-driven starts when it was never asked to play.
+    item.player.pause();
+
     // Fake close event, because we unmount native view
     item.player.onPlayerClose();
     item.setMode?.(LiveImageType.Image);

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

@@ -1,6 +1,8 @@
 const { LiveImageManager } = require("../LiveImageManager");
 
 describe("LiveImageManager", () => {
+  const flushPromises = () => new Promise(setImmediate);
+
   it("should subscribe to LiveImageManager events", () => {
     const sampleListener = {
       id: "1",
@@ -78,4 +80,61 @@ describe("LiveImageManager", () => {
     expect(mockOnEnd1).toHaveBeenCalledWith(eventBody);
     expect(mockOnEnd2).toHaveBeenCalledWith(eventBody);
   });
+
+  it("should start a prepared live image when the mounted player loads", async () => {
+    const manager = new LiveImageManager();
+
+    const item = {
+      playerId: "live-image",
+      tag: "Live image",
+      player: {
+        playerId: "live-image",
+        playerState: { isReadyToPlay: false },
+        getEntry: jest.fn(),
+        play: jest.fn(),
+      },
+      getPlayer: jest.fn(),
+      prepareForPlayback: jest.fn().mockResolvedValue(true),
+      setMode: jest.fn(),
+    };
+
+    manager.playLiveImage(item);
+    await flushPromises();
+
+    expect(item.setMode).toHaveBeenCalledWith("video");
+    expect(item.player.play).not.toHaveBeenCalled();
+
+    manager.onLiveImageVideoLoaded(item);
+
+    expect(item.player.play).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not start a live image that was paused before the player loaded", async () => {
+    const manager = new LiveImageManager();
+
+    const item = {
+      playerId: "live-image",
+      tag: "Live image",
+      player: {
+        playerId: "live-image",
+        playerState: { isReadyToPlay: false },
+        getEntry: jest.fn(),
+        play: jest.fn(),
+        pause: jest.fn(),
+        onPlayerClose: jest.fn(),
+      },
+      getPlayer: jest.fn(),
+      prepareForPlayback: jest.fn().mockResolvedValue(true),
+      setMode: jest.fn(),
+    };
+
+    manager.playLiveImage(item);
+    await flushPromises();
+    manager.pauseLiveImage(item);
+    manager.onLiveImageVideoLoaded(item);
+
+    expect(item.player.pause).toHaveBeenCalledTimes(1);
+    expect(item.player.play).not.toHaveBeenCalled();
+    expect(item.setMode).toHaveBeenLastCalledWith("image");
+  });
 });

package/Contexts/ModalNavigationContext/__tests__/index.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { withModalNavigationContextProvider } from "../";
+
+describe("withModalNavigationContextProvider", () => {
+  it("does not re-render the wrapped component when props are unchanged", () => {
+    const Component = jest.fn(() => null);
+    const WrappedComponent = withModalNavigationContextProvider(Component);
+    const { rerender } = render(<WrappedComponent title="Modal" />);
+
+    rerender(<WrappedComponent title="Modal" />);
+
+    expect(Component).toHaveBeenCalledTimes(1);
+  });
+});

package/Contexts/ModalNavigationContext/index.tsx

@@ -6,11 +6,11 @@ export function useModalNavigationContext() {
 }
 
 export function withModalNavigationContextProvider(Component) {
-  return function WrappedWithModalNavigationContextProvider(props) {
+  return React.memo(function WrappedWithModalNavigationContextProvider(props) {
     return (
       <ModalNavigationContext.Provider value={true}>
         <Component {...props} />
       </ModalNavigationContext.Provider>
     );
-  };
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-alpha.1593888345",
+  "version": "16.0.0-alpha.1701179921",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.1593888345",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.1593888345",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.1593888345",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1593888345",
+    "@applicaster/applicaster-types": "16.0.0-alpha.1701179921",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.1701179921",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.1701179921",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1701179921",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",

package/Components/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -1,314 +0,0 @@
-/**
- * Modal Building Block — Action
- *
- * Single-file Expo Snack demo for the Action list item building block spec.
- * Three forms (text only / leading icon + text / leading + text + trailing)
- * are driven by data — no separate variants.
- *
- * Green (configurable): background, title, trailingIcon.chevronAsset
- * White (hardcoded): container padding/gutter, icon size, leading icon assets,
- *   leading/trailing visibility logic from data
- */
-
-import React from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-});
-
-// ---------------------------------------------------------------------------
-// Configuration (green / editable fields from spec)
-// ---------------------------------------------------------------------------
-
-export type TextTransform =
-  | "default"
-  | "lowercase"
-  | "uppercase"
-  | "capitalize";
-
-export type BackgroundConfiguration = {
-  defaultColor: string;
-  focusedColor: string;
-  cornerRadius: number;
-};
-
-export type TitleConfiguration = {
-  fontColor: string;
-  focusedFontColor: string;
-  iosFontFamily: string;
-  androidFontFamily: string;
-  fontSize: number;
-  lineHeight: number;
-  iosLetterSpacing: number;
-  androidLetterSpacing: number;
-  textTransform: TextTransform;
-};
-
-export type TrailingIconConfiguration = {
-  chevronAsset?: string;
-};
-
-export type ActionConfiguration = {
-  background: BackgroundConfiguration;
-  title: TitleConfiguration;
-  trailingIcon: TrailingIconConfiguration;
-};
-
-export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
-  defaultColor: "transparent",
-  focusedColor: "rgba(62, 62, 62, 1)",
-  cornerRadius: 12,
-};
-
-export const DEFAULT_TITLE_CONFIGURATION: TitleConfiguration = {
-  fontColor: "#FFFFFF",
-  focusedFontColor: "#FFFFFF",
-  iosFontFamily: "SFProText-Semibold",
-  androidFontFamily: "Roboto-Medium",
-  fontSize: 15,
-  lineHeight: 24,
-  iosLetterSpacing: -0.2,
-  androidLetterSpacing: 0,
-  textTransform: "default",
-};
-
-export const DEFAULT_TRAILING_ICON_CONFIGURATION: TrailingIconConfiguration =
-  {};
-
-export const DEFAULT_ACTION_CONFIGURATION: ActionConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  trailingIcon: DEFAULT_TRAILING_ICON_CONFIGURATION,
-};
-
-// ---------------------------------------------------------------------------
-// Data (runtime — controls which elements are shown)
-// ---------------------------------------------------------------------------
-
-export type LeadingActionType =
-  | "addToQueue"
-  | "addToPlaylist"
-  | "favorite"
-  | "share"
-  | "sleepTimer"
-  | "playbackSpeed";
-
-export type ActionData = {
-  title: string;
-  /** When set, leading icon is shown (Enable: On). */
-  leadingActionType?: LeadingActionType;
-  /** When true, trailing chevron is shown (Enable: On). */
-  showTrailingChevron?: boolean;
-};
-
-export type AudioPlayerActionProps = {
-  configuration: ActionConfiguration;
-  data: ActionData;
-  focused?: boolean;
-  onPress?: () => void;
-};
-
-// ---------------------------------------------------------------------------
-// Hardcoded spec values (white fields)
-// ---------------------------------------------------------------------------
-
-const CONTAINER_SPEC = {
-  paddingTop: 13,
-  paddingRight: 10,
-  paddingBottom: 13,
-  paddingLeft: 10,
-  horizontalGutter: 12,
-};
-
-const ICON_SPEC = {
-  width: 24,
-  height: 24,
-};
-
-const DEFAULT_CHEVRON_ASSET =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAXUBlu2bPmPjIeWBeiGDy0Lhrbrh1/qGXqZaxSMglEw0gEA4c+IpUrpYX4AAAAASUVORK5CYII=";
-
-/** Hardcoded: action type → leading icon asset (base64 PNG). */
-const LEADING_ICON_ASSETS: Record<LeadingActionType, string> = {
-  addToQueue:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAUjE/xHAzS3gFgweC0Y+nEwGslkBRFFwTj8LBjNyaNgmAMAJTf+EEEZcS0AAAAASUVORK5CYII=",
-  addToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDBvxHA6MWjFpAvEGkglELKLdgNJmOWkA7C0YBzQAAivu+UKRR1ZIAAAAASUVORK5CYII=",
-  favorite:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKklEQVR42mNgGAWjYBTgBP+xAGLkRi0YQhbgM4wqBo9aMHgsGAWjgCAAALyAZqh4yyZZAAAAAElFTkSuQmCC",
-  share:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
-  sleepTimer:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAYUlEQVR42tWUSQ4AIAgD+f+n8eJRliIQ6MmEZTSxJZokvipdXgZpAbzOO17AglIXI7XULxmCoEMwRGuWam6AdRsN4IJYTRH4PIDkhxTA92zUPNBcFDDHaOVR0RJ2LXG9QgemFVK8tpo4PwAAAABJRU5ErkJggg==",
-  playbackSpeed:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
-};
-
-function getTextTransformStyle(
-  textTransform: TextTransform
-): "none" | "lowercase" | "uppercase" | "capitalize" {
-  return textTransform === "default" ? "none" : textTransform;
-}
-
-function shouldShowLeadingIcon(leadingActionType?: LeadingActionType) {
-  return !!leadingActionType;
-}
-
-function shouldShowTrailingIcon(showTrailingChevron?: boolean) {
-  return !!showTrailingChevron;
-}
-
-// ---------------------------------------------------------------------------
-// Inner components
-// ---------------------------------------------------------------------------
-
-type ActionContainerProps = {
-  configuration: BackgroundConfiguration;
-  focused: boolean;
-  children: React.ReactNode;
-  onPress?: () => void;
-};
-
-function ActionContainer({
-  configuration,
-  focused,
-  children,
-  onPress,
-}: ActionContainerProps) {
-  return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => ({
-        backgroundColor:
-          pressed || focused
-            ? configuration.focusedColor
-            : configuration.defaultColor,
-        borderRadius: configuration.cornerRadius,
-        paddingTop: CONTAINER_SPEC.paddingTop,
-        paddingRight: CONTAINER_SPEC.paddingRight,
-        paddingBottom: CONTAINER_SPEC.paddingBottom,
-        paddingLeft: CONTAINER_SPEC.paddingLeft,
-      })}
-    >
-      {children}
-    </Pressable>
-  );
-}
-
-type ActionTitleProps = {
-  title: string;
-  configuration: TitleConfiguration;
-  focused: boolean;
-};
-
-function ActionTitle({ title, configuration, focused }: ActionTitleProps) {
-  const letterSpacing =
-    Platform.OS === "ios"
-      ? configuration.iosLetterSpacing
-      : configuration.androidLetterSpacing;
-
-  return (
-    <Text
-      style={{
-        flex: 1,
-        color: focused
-          ? configuration.focusedFontColor
-          : configuration.fontColor,
-        fontSize: configuration.fontSize,
-        lineHeight: configuration.lineHeight,
-        letterSpacing,
-        fontFamily: Platform.select({
-          ios: configuration.iosFontFamily,
-          android: configuration.androidFontFamily,
-          default: configuration.androidFontFamily,
-        }),
-        textTransform: getTextTransformStyle(configuration.textTransform),
-      }}
-      numberOfLines={1}
-    >
-      {title}
-    </Text>
-  );
-}
-
-type ActionLeadingIconProps = {
-  actionType: LeadingActionType;
-};
-
-function ActionLeadingIcon({ actionType }: ActionLeadingIconProps) {
-  return (
-    <Image
-      source={{ uri: LEADING_ICON_ASSETS[actionType] }}
-      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
-      resizeMode="contain"
-    />
-  );
-}
-
-type ActionTrailingIconProps = {
-  configuration: TrailingIconConfiguration;
-};
-
-function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
-  const asset = configuration.chevronAsset ?? DEFAULT_CHEVRON_ASSET;
-
-  return (
-    <Image
-      source={{ uri: asset }}
-      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
-      resizeMode="contain"
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// AudioPlayerAction
-// ---------------------------------------------------------------------------
-
-export function AudioPlayerAction({
-  configuration,
-  data,
-  focused = false,
-  onPress,
-}: AudioPlayerActionProps) {
-  const { background, title, trailingIcon } = configuration;
-  const { title: label, leadingActionType, showTrailingChevron } = data;
-
-  const showLeading = shouldShowLeadingIcon(leadingActionType);
-  const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
-
-  return (
-    <ActionContainer
-      configuration={background}
-      focused={focused}
-      onPress={onPress}
-    >
-      <View style={styles.row}>
-        {showLeading ? (
-          <>
-            <ActionLeadingIcon actionType={leadingActionType} />
-            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
-          </>
-        ) : null}
-        <ActionTitle title={label} configuration={title} focused={focused} />
-        {showTrailing ? (
-          <>
-            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
-            <ActionTrailingIcon configuration={trailingIcon} />
-          </>
-        ) : null}
-      </View>
-    </ActionContainer>
-  );
-}