@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 16.0.0-rc.1

package/Decorators/ZappPipesDataConnector/__tests__/UrlFeedResolver.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import * as useFeedLoaderModule from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
-import * as useFeedRefreshModule from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedRefresh";
 import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
 import { UrlFeedResolver } from "../resolvers/UrlFeedResolver";
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
@@ -14,10 +13,6 @@ jest
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader");
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedRefresh"
-);
-
 jest.mock("@applicaster/zapp-pipes-v2-client");
 
 jest.mock("@applicaster/zapp-react-native-bridge/Favorites", () => ({
@@ -62,6 +57,9 @@ describe("UrlFeedResolver", () => {
       component: { ...componentRequiredKeys } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -82,6 +80,9 @@ describe("UrlFeedResolver", () => {
       } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -103,6 +104,9 @@ describe("UrlFeedResolver", () => {
       } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -132,6 +136,9 @@ describe("UrlFeedResolver", () => {
       } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -155,6 +162,9 @@ describe("UrlFeedResolver", () => {
       children: mockChildren,
       riverId: "test-river",
       plugins: [],
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -173,6 +183,9 @@ describe("UrlFeedResolver", () => {
       component: { ...componentRequiredKeys } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -197,6 +210,9 @@ describe("UrlFeedResolver", () => {
           },
         },
       ] as any,
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -215,6 +231,9 @@ describe("UrlFeedResolver", () => {
       } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     (useFeedLoaderModule.useFeedLoader as jest.Mock).mockReturnValue({
@@ -250,6 +269,9 @@ describe("UrlFeedResolver", () => {
       children: mockChildren,
       riverId: "test-river",
       isLast: true,
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props1} />);
@@ -272,6 +294,9 @@ describe("UrlFeedResolver", () => {
       children: mockChildren,
       riverId: "test-river",
       isLast: false,
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props2} />);
@@ -294,6 +319,9 @@ describe("UrlFeedResolver", () => {
       children: mockChildren,
       riverId: "test-river",
       isLast: false,
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props3} />);
@@ -311,6 +339,9 @@ describe("UrlFeedResolver", () => {
       component: { ...componentRequiredKeys } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     renderWithProviders(<UrlFeedResolver {...props} />);
@@ -327,22 +358,6 @@ describe("UrlFeedResolver", () => {
     });
   });
 
-  it("should apply feed refresh hook", () => {
-    const props = {
-      feedUrl: "https://example.com/feed",
-      component: { ...componentRequiredKeys } as any,
-      children: mockChildren,
-      riverId: "test-river",
-    };
-
-    renderWithProviders(<UrlFeedResolver {...props} />);
-
-    expect(useFeedRefreshModule.useFeedRefresh).toHaveBeenCalledWith({
-      reloadData: mockReloadData,
-      component: props.component,
-    });
-  });
-
   it("should clean up listeners on unmount", () => {
     const props = {
       component: {
@@ -354,6 +369,9 @@ describe("UrlFeedResolver", () => {
       } as any,
       children: mockChildren,
       riverId: "test-river",
+      screenContext: {
+        id: "screenId",
+      },
     };
 
     const { unmount } = renderWithProviders(<UrlFeedResolver {...props} />);

package/Decorators/ZappPipesDataConnector/resolvers/UrlFeedResolver.tsx

@@ -9,9 +9,9 @@ import {
   getInflatedDataSourceUrl,
   getSearchContext,
   useFeedLoader,
-  useFeedRefresh,
   useRoute,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { refreshCoordinator } from "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator";
 
 import { ComponentDataSourceContext, ZappPipesDataProps } from "../types";
 import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
@@ -199,6 +199,8 @@ export function UrlFeedResolver({
   const { pathname } = useRoute();
   const screenStateStore = useScreenStateStore();
 
+  const screenId = (screenContext?.id || "unknown_screen_id") as string;
+
   // Setup listeners for data source URL
   useEffect(() => {
     if (!reloadData) {
@@ -214,10 +216,19 @@ export function UrlFeedResolver({
         url: dataSourceUrl,
         pathname,
         screenStateStore,
+        component,
+        screenId,
         callback: reloadData,
       });
     }
-  }, [dataSourceUrl, reloadData, pathname, screenStateStore]);
+  }, [
+    dataSourceUrl,
+    reloadData,
+    pathname,
+    screenStateStore,
+    component,
+    screenId,
+  ]);
 
   // Setup favorites listener
   useEffect(() => {
@@ -230,11 +241,11 @@ export function UrlFeedResolver({
     }
   }, [type, reloadData]);
 
-  // Apply feed refresh hook
-  useFeedRefresh({
-    reloadData,
-    component,
-  });
+  useEffect(() => {
+    const unregister = refreshCoordinator.register(component, screenId);
+
+    return () => unregister();
+  }, [component, screenId]);
 
   const loadNextData = useMemo(
     () => (!isLast && isVerticalListOrGrid(component) ? undefined : loadNext),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.99",
+  "version": "16.0.0-rc.1",
   "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": "15.0.0-rc.99",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.99",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.99",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.99",
+    "@applicaster/applicaster-types": "16.0.0-rc.1",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.1",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.1",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.1",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/MasterCell/DefaultComponents/Text/utils/__tests__/withAdjustedLineHeight.test.ts

@@ -1,46 +0,0 @@
-import { PixelRatio } from "react-native";
-import { withAdjustedLineHeight } from "..";
-
-const FONT_SCALE = 1.118;
-jest.spyOn(PixelRatio, "getFontScale").mockReturnValue(FONT_SCALE);
-
-describe("withAdjustedLineHeight", () => {
-  it("with provided fontScale and styles", () => {
-    // setup
-    const styles = {
-      lineHeight: 10,
-    };
-
-    // run
-    const result = withAdjustedLineHeight(styles);
-
-    // verify
-    expect(result).toEqual({
-      lineHeight: styles.lineHeight * FONT_SCALE,
-    });
-  });
-
-  it("with provided fontScale and empty styles", () => {
-    // setup
-    const styles = {};
-
-    // run
-    const result = withAdjustedLineHeight(styles);
-
-    // verify
-    expect(result).toEqual(styles);
-  });
-
-  it("with non-number lineHeight", () => {
-    // setup
-    const styles = {
-      lineHeight: NaN,
-    };
-
-    // run
-    const result = withAdjustedLineHeight(styles);
-
-    // verify
-    expect(result).toEqual(styles);
-  });
-});

package/Components/MasterCell/DefaultComponents/Text/utils/index.ts

@@ -1,21 +0,0 @@
-import { PixelRatio } from "react-native";
-import { isNil, identity } from "ramda";
-import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-// HACK - to prevent text flickering
-export const withAdjustedLineHeight = (styles) => {
-  const fontScale = PixelRatio.getFontScale();
-  const lineHeight = toNumber(styles.lineHeight);
-
-  if (isNil(lineHeight)) {
-    return styles;
-  }
-
-  return { ...styles, lineHeight: lineHeight * fontScale };
-};
-
-export const withScaledLineHeight = platformSelect({
-  ios: withAdjustedLineHeight,
-  default: identity,
-});

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.android.tsx

@@ -1,135 +0,0 @@
-import React from "react";
-import { View, ButtonProps } from "react-native";
-import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
-import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import * as R from "ramda";
-import { useInitialFocus } from "@applicaster/zapp-react-native-utils/focusManager";
-import { getXray } from "@applicaster/zapp-react-native-utils/logger";
-import { useFocusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/index.android";
-import {
-  useIsRTL,
-  applyRTLStylesIfNeeded,
-} from "@applicaster/zapp-react-native-utils/localizationUtils";
-
-const { Logger } = getXray();
-
-import {
-  cloneElementsWithIds,
-  insertBetween,
-  recursiveCloneElementsWithState,
-  useFilterChildren,
-} from "../../../utils";
-
-import type {
-  HorizontalSeparatorProps,
-  ContainerProps,
-  ContainerChildren,
-} from "./types";
-
-const logger = new Logger("plugin", "plugins/navigation-action");
-
-const generateId = (cellUUID, suffixId) => `${cellUUID}--${suffixId}`;
-
-const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
-  <View style={{ width }} />
-);
-
-export function ButtonContainerView({
-  style,
-  children,
-  ...otherProps
-}: ContainerProps) {
-  const isRTL = useIsRTL();
-
-  const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
-
-  const filteredChildren = useFilterChildren<ContainerChildren>(children);
-
-  const buttonIds = filteredChildren.map((child) => {
-    const { cellUUID, suffixId } = child.props;
-
-    return generateId(cellUUID, suffixId);
-  });
-
-  useInitialFocus(otherProps.state === "focused", R.head(buttonIds));
-
-  if (R.isEmpty(filteredChildren)) {
-    return null;
-  }
-
-  return (
-    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
-      {insertBetween(
-        (index) => (
-          <HorizontalSeparator
-            key={`separator_${index}`}
-            width={horizontalGutter}
-          />
-        ),
-        cloneElementsWithIds(buttonIds, filteredChildren)
-      )}
-    </View>
-  );
-}
-
-export function FocusableViewComponent(
-  { style, children, item, ...otherProps }: ButtonProps,
-  ref
-) {
-  const {
-    cellUUID,
-    groupId,
-    suffixId,
-    normalStyles,
-    focusedStyles,
-    nextFocusLeft,
-    nextFocusRight,
-    pluginIdentifier,
-    disableFocus,
-  } = otherProps;
-
-  const parentFocus = useFocusable();
-
-  const actionContext = useActions(pluginIdentifier);
-
-  const onPress = () => {
-    if (!actionContext) {
-      logger.warning(
-        `Cannot resolve action context for ${pluginIdentifier} - please make sure the plugin is installed and up to date`
-      );
-
-      return;
-    }
-
-    actionContext?.invokeAction?.(item);
-  };
-
-  return (
-    <Focusable
-      id={generateId(cellUUID, suffixId)}
-      disableFocus={disableFocus}
-      groupId={groupId}
-      onPress={onPress}
-      nextFocusUp={parentFocus?.nextFocusUp}
-      nextFocusDown={parentFocus?.nextFocusDown}
-      nextFocusLeft={nextFocusLeft || parentFocus?.nextFocusLeft}
-      nextFocusRight={nextFocusRight || parentFocus?.nextFocusRight}
-      ref={ref}
-    >
-      {(isFocused) => {
-        const additionalStyles = isFocused ? focusedStyles : normalStyles;
-
-        return (
-          <View
-            style={{
-              ...style,
-              ...additionalStyles,
-            }}
-          >
-            {recursiveCloneElementsWithState(isFocused, children)}
-          </View>
-        );
-      }}
-    </Focusable>
-  );
-}

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/types.ts

@@ -1,25 +0,0 @@
-import { ImageStyle } from "react-native";
-
-export type ContainerProps = Record<string, any> & {
-  buttonsToggleEnabled: boolean;
-  skipButtons: boolean;
-  style: ImageStyle;
-  children: ContainerChildren[];
-};
-
-export type ButtonProps = Record<string, any> & {
-  style: ImageStyle;
-};
-
-export type HorizontalSeparatorProps = {
-  width: number;
-};
-
-export type ContainerChildren = {
-  props: {
-    item: any;
-    pluginIdentifier: string;
-    cellUUID: string;
-    suffixId: string;
-  };
-};

package/Components/PlayerContainer/ErrorDisplay/ErrorDisplay.tsx

@@ -1,57 +0,0 @@
-import * as React from "react";
-import * as R from "ramda";
-import { Text, TextStyle, View, ViewStyle } from "react-native";
-
-import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
-import { getAppStylesColor } from "@applicaster/zapp-react-native-utils/stylesUtils";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
-
-type Props = {
-  styles: {};
-  error: {};
-  remoteConfigurations: { localizations: {} };
-};
-
-const defaultAppStyles = {
-  loading_error_label: {
-    color: "#aaa",
-  },
-};
-
-const textStyles = (appStyles = defaultAppStyles): TextStyle => ({
-  color: getAppStylesColor("loading_error_label", appStyles),
-  fontSize: 36,
-  textAlign: "center",
-});
-
-const errorStyles = ({ backgroundColor }): ViewStyle => ({
-  flex: 1,
-  width: "100%",
-  height: "100%",
-  justifyContent: "center",
-  alignItems: "center",
-  position: "absolute",
-  zIndex: 100,
-  backgroundColor,
-});
-
-export function ErrorDisplayComponent({
-  styles,
-  remoteConfigurations: { localizations },
-}: Props) {
-  const theme = useTheme();
-  const backgroundColor = theme?.app_background_color;
-
-  const { stream_error_message = "Cannot play stream" } = getLocalizations({
-    localizations,
-  });
-
-  const appStyles = R.prop(styleKeys.style_namespace, styles);
-
-  return (
-    <View style={errorStyles({ backgroundColor })}>
-      <Text style={textStyles(appStyles)}>{stream_error_message}</Text>
-    </View>
-  );
-}

package/Components/PlayerContainer/ErrorDisplay/index.ts

@@ -1,9 +0,0 @@
-import * as R from "ramda";
-
-import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
-
-import { ErrorDisplayComponent } from "./ErrorDisplay";
-
-export const ErrorDisplay = R.compose(
-  connectToStore(R.pick(["remoteConfigurations"]))
-)(ErrorDisplayComponent);

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -1,101 +0,0 @@
-import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
-import NetInfo from "@react-native-community/netinfo";
-
-import { useEffect, useMemo, useRef, useState } from "react";
-import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { log_info } from "./logger";
-
-type RestrictMobilePlaybackProps = {
-  player?: Player;
-  entry?: ZappEntry;
-  pluginConfiguration?: Record<string, string>;
-  close: () => void;
-};
-
-export const useRestrictMobilePlayback = ({
-  player,
-  entry,
-  pluginConfiguration,
-  close,
-}: RestrictMobilePlaybackProps): { isRestricted: boolean } => {
-  const dialogVisibleRef = useRef<boolean>(false);
-  const theme = useTheme();
-
-  useEffect(() => {
-    return () => {
-      if (isTV()) {
-        return;
-      }
-
-      dialogVisibleRef.current = false;
-    };
-  }, []);
-
-  const isConnectionRestricted = useMemo(() => {
-    if (isTV()) {
-      return false;
-    }
-
-    return player && entry?.extensions?.connection_restricted;
-  }, [player, entry]);
-
-  const [isRestricted, setIsRestricted] = useState<boolean>(
-    isConnectionRestricted
-  );
-
-  useEffect(() => {
-    if (!isConnectionRestricted) {
-      return;
-    }
-
-    const stopPlayer = () => {
-      log_info(
-        "Stopping player due to mobile restriction, connection_restricted: true"
-      );
-
-      player?.close();
-
-      dialogVisibleRef.current = true;
-
-      showAlertDialog({
-        title:
-          pluginConfiguration?.mobile_connection_restricted_alert_title ||
-          "Restricted Connection Type",
-        message:
-          pluginConfiguration?.mobile_connection_restricted_alert_message ||
-          "This content can only be viewed over a Wi-Fi or LAN network.",
-        okButtonText: theme.ok_button || "OK",
-        completion: () => {
-          dialogVisibleRef.current = false;
-
-          close();
-        },
-      });
-    };
-
-    return NetInfo.addEventListener((state) => {
-      if (state.type === "cellular") {
-        setIsRestricted(true);
-
-        if (dialogVisibleRef.current) {
-          return;
-        }
-
-        stopPlayer();
-      } else {
-        setIsRestricted(false);
-      }
-    });
-  }, [
-    close,
-    entry?.extensions?.connection_restricted,
-    pluginConfiguration,
-    player,
-    theme.ok_button,
-    isConnectionRestricted,
-  ]);
-
-  return { isRestricted };
-};