@applicaster/zapp-react-native-ui-components 15.0.0-alpha.5104105031 → 15.0.0-alpha.5219062121

package/Components/HandlePlayable/utils.ts

@@ -5,6 +5,14 @@ import {
 
 import { CHROMECAST_PLUGIN_ID, YOUTUBE_PLUGIN_ID } from "./const";
 import { omit } from "@applicaster/zapp-react-native-utils/utils";
+import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+
+const { Logger } = getXray();
+
+const logger = new Logger(
+  "QuickBrick",
+  "packages/zapp-react-native-ui-components/Components/HandlePlayable"
+);
 
 const getPlayerModuleProperties = (PlayerModule: ZappPlugin) => {
   if (PlayerModule?.Component && typeof PlayerModule.Component === "object") {
@@ -52,10 +60,25 @@ export const getPlayer = (
     if (type) {
       PlayerModule = findPluginByIdentifier(type, plugins)?.module;
 
+      if (!PlayerModule) {
+        logger.error({
+          message:
+            "PlayerModule is undefined – type mapping may be wrong or type not set for player",
+          data: {
+            type,
+            screen_id,
+            item_type_value: item?.type?.value,
+          },
+        });
+
+        return [null, {}];
+      }
+
       return getPlayerWithModuleProperties(PlayerModule);
     }
   }
 
+  // TODO: Probably should be removed, Youtube plugin is deprecated
   if (item?.content?.type === "youtube-id") {
     PlayerModule = findYoutubePlugin(plugins)?.module;
 
@@ -70,5 +93,13 @@ export const getPlayer = (
     )
   );
 
+  if (!PlayerModule) {
+    logger.error({
+      message: "PlayerModule is undefined – playable plugin not found",
+    });
+
+    return [null, {}];
+  }
+
   return getPlayerWithModuleProperties(PlayerModule);
 };

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -277,7 +277,6 @@ const PlayerContainerComponent = (props: Props) => {
   const { isRestricted } = useRestrictMobilePlayback({
     player,
     entry: item,
-    pluginConfiguration,
     close,
   });
 
@@ -670,7 +669,7 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      {isRestricted ? null : (
+                      {!Player || isRestricted ? null : (
                         <Player
                           source={{
                             uri,

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -1,27 +1,50 @@
 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 { useCallback, 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 { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { log_info } from "./logger";
+import { isTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 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();
+  const plugins = usePlugins();
+
+  const restrictMobilePlugin = useMemo(
+    () =>
+      plugins.find((p) => p.identifier === "quick-brick-hook-restrict-mobile"),
+    [plugins]
+  );
+
+  const localizations = useMemo(
+    () => restrictMobilePlugin?.configuration?.localizations,
+    [restrictMobilePlugin]
+  );
+
+  const localize = useCallback(
+    (key: string) => {
+      const l = localizations && getLocalizations({ localizations });
+
+      return (l && l[key]) || "";
+    },
+    [localizations]
+  );
 
   useEffect(() => {
     return () => {
@@ -38,8 +61,13 @@ export const useRestrictMobilePlayback = ({
       return false;
     }
 
-    return player && entry?.extensions?.connection_restricted;
-  }, [player, entry]);
+    // Only restrict if the plugin exists
+    if (!restrictMobilePlugin) {
+      return false;
+    }
+
+    return player && isTrue(entry?.extensions?.connection_restricted);
+  }, [player, entry, restrictMobilePlugin]);
 
   const [isRestricted, setIsRestricted] = useState<boolean>(
     isConnectionRestricted
@@ -55,16 +83,17 @@ export const useRestrictMobilePlayback = ({
         "Stopping player due to mobile restriction, connection_restricted: true"
       );
 
-      player?.close();
+      player?.closeNativePlayer();
+      playerManager?.invokeHandler("close");
 
       dialogVisibleRef.current = true;
 
       showAlertDialog({
         title:
-          pluginConfiguration?.mobile_connection_restricted_alert_title ||
+          localize("restrict_mobile_playback_error_title") ||
           "Restricted Connection Type",
         message:
-          pluginConfiguration?.mobile_connection_restricted_alert_message ||
+          localize("restrict_mobile_playback_error_message") ||
           "This content can only be viewed over a Wi-Fi or LAN network.",
         okButtonText: theme.ok_button || "OK",
         completion: () => {
@@ -91,7 +120,8 @@ export const useRestrictMobilePlayback = ({
   }, [
     close,
     entry?.extensions?.connection_restricted,
-    pluginConfiguration,
+    localizations,
+    localize,
     player,
     theme.ok_button,
     isConnectionRestricted,

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -23,6 +23,7 @@ import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ComponentsMapWrapper";
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useShallow } from "zustand/react/shallow";
+import { emitScrollEndReached } from "@applicaster/zapp-react-native-ui-components/events";
 
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { ComponentsMapHeightContext } from "./ContextProviders/ComponentsMapHeightContext";
@@ -73,6 +74,7 @@ function ComponentsMapComponent(props: Props) {
 
   const flatListRef = React.useRef<FlatList | null>(null);
   const flatListWrapperRef = React.useRef<View | null>(null);
+  const hasUserScrolledRef = React.useRef(false);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -236,6 +238,8 @@ function ComponentsMapComponent(props: Props) {
   }, []);
 
   const onScroll = React.useCallback((event) => {
+    hasUserScrolledRef.current = true;
+
     const {
       nativeEvent: {
         contentOffset: { y },
@@ -277,6 +281,7 @@ function ComponentsMapComponent(props: Props) {
           >
             <ViewportTracker>
               <FlatList
+                testID="components-map-flat-list"
                 ref={(ref) => {
                   flatListRef.current = ref;
                 }}
@@ -308,6 +313,17 @@ function ComponentsMapComponent(props: Props) {
                 onScrollEndDrag={_onScrollEndDrag}
                 scrollEventThrottle={16}
                 {...scrollViewExtraProps}
+                onEndReached={
+                  /* When wrapped in a parent ScrollView (e.g. tabs),
+                  this FlatList doesn't scroll so onEndReached can fire repeatedly;
+                  skip it here and let the parent ScrollView emit scroll-end instead. */
+                  isScreenWrappedInContainer
+                    ? undefined
+                    : () => {
+                        if (!hasUserScrolledRef.current) return;
+                        emitScrollEndReached();
+                      }
+                }
               />
             </ViewportTracker>
           </ScreenLoadingMeasurements>

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

@@ -137,6 +137,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       keyExtractor={[Function]}
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
+      onEndReached={[Function]}
       onLayout={[Function]}
       onMomentumScrollBegin={[Function]}
       onMomentumScrollEnd={[Function]}
@@ -154,6 +155,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         }
       }
       stickyHeaderIndices={[]}
+      testID="components-map-flat-list"
       viewabilityConfigCallbackPairs={[]}
       windowSize={12}
     >

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

@@ -139,7 +139,13 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-ui-components/events", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-ui-components/events"),
+  emitScrollEndReached: jest.fn(),
+}));
+
 const { View } = require("react-native");
+const events = require("@applicaster/zapp-react-native-ui-components/events");
 const { ComponentsMap } = require("../ComponentsMap/ComponentsMap");
 const theme = require("./theme-mock.json");
 
@@ -190,4 +196,36 @@ describe("componentsMap", () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("calls emitScrollEndReached when onScroll was called and isScreenWrappedInContainer is false", () => {
+    themeSpy = jest
+      .spyOn(themeUtils, "useTheme")
+      .mockImplementation(() => () => theme);
+
+    events.emitScrollEndReached.mockClear();
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <ComponentsMap
+          {...props}
+          isScreenWrappedInContainer={false}
+          feed={{ entry: [] }}
+        />
+      </Provider>
+    );
+
+    const flatList = getByTestId("components-map-flat-list");
+
+    flatList.props.onScroll({
+      nativeEvent: {
+        contentOffset: { y: 0 },
+        layoutMeasurement: { height: 100 },
+        contentSize: { height: 200 },
+      },
+    });
+
+    flatList.props.onEndReached();
+
+    expect(events.emitScrollEndReached).toHaveBeenCalledTimes(1);
+  });
 });

package/Components/Viewport/ViewportAware/index.tsx

@@ -32,7 +32,7 @@ function getTestDimensions(testDimensions) {
   return (process.env.NODE_ENV === "test" && testDimensions) || null;
 }
 
-function ViewportAwareComponent(props: Props, ref) {
+function ViewportAwareComponent(props: Props, forwardedRef) {
   const viewportEvents = useViewportEventsContext();
 
   const {
@@ -47,13 +47,22 @@ function ViewportAwareComponent(props: Props, ref) {
     getTestDimensions(testDimensions) || initialDimensions
   );
 
+  const localRef = React.useRef(null);
+
   const [viewportChangeEvent, setViewportChangeEvent] = React.useState(null);
 
-  function assignRef(_ref) {
-    if (_ref && !ref) {
-      ref = _ref;
-    }
-  }
+  const assignRef = React.useCallback(
+    (_ref) => {
+      localRef.current = _ref;
+
+      if (typeof forwardedRef === "function") {
+        forwardedRef(_ref);
+      } else if (forwardedRef) {
+        forwardedRef.current = _ref;
+      }
+    },
+    [forwardedRef]
+  );
 
   const checkInViewport = (viewportChangeEvent, layoutEvent) => {
     const inVerticalViewport = Utils.isInViewport(
@@ -94,7 +103,7 @@ function ViewportAwareComponent(props: Props, ref) {
   const onViewportChange = (viewportChangeEvent) => {
     setViewportChangeEvent(viewportChangeEvent);
 
-    const nodeHandle = findNodeHandle(ref);
+    const nodeHandle = findNodeHandle(localRef.current);
 
     if (!nodeHandle) {
       return;

package/events/index.ts

@@ -7,3 +7,5 @@ export enum QBUIComponentEvents {
   focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
   scrollToTopForScreenWrappedInContainer = "scrollToTopForScreenWrappedInContainer",
 }
+
+export { scrollEndReached$, emitScrollEndReached } from "./scrollEndReached";

package/events/scrollEndReached.ts

@@ -0,0 +1,15 @@
+import { Subject } from "rxjs";
+import { throttleTime } from "rxjs/operators";
+
+const SCROLL_END_THROTTLE_MS = 1000;
+const scrollEndReachedSubject = new Subject<void>();
+
+/* Throttle so we only emit at most once per second; RN often fires onEndReached repeatedly (e.g. on Android) when near the bottom. */
+export const scrollEndReached$ = scrollEndReachedSubject.pipe(
+  throttleTime(SCROLL_END_THROTTLE_MS)
+);
+
+/* Call from scroll container (ComponentsMap or Tabs) when scroll reaches end. */
+export const emitScrollEndReached = (): void => {
+  scrollEndReachedSubject.next();
+};

package/package.json

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