@applicaster/zapp-react-native-utils 15.0.0-alpha.8526950782 → 15.0.0-alpha.8680244503

package/manifestUtils/keys.js

@@ -959,6 +959,27 @@ const TV_CELL_LABEL_FIELDS = [
     rules: "conditional",
     conditions: [{ key: "switch", section: "styles", value: true }],
   },
+  {
+    type: ZAPPIFEST_FIELDS.font_selector.roku,
+    suffix: "roku font family",
+    tooltip: "",
+    rules: "conditional",
+    conditions: [{ key: "switch", section: "styles", value: true }],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "roku font size",
+    tooltip: "",
+    rules: "conditional",
+    conditions: [{ key: "switch", section: "styles", value: true }],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "roku line height",
+    tooltip: "",
+    rules: "conditional",
+    conditions: [{ key: "switch", section: "styles", value: true }],
+  },
   {
     type: ZAPPIFEST_FIELDS.select,
     suffix: "text alignment",

package/manifestUtils/sharedConfiguration/screenPicker/utils.js

@@ -3,6 +3,7 @@ const defaultPlatforms = {
   android_tv: "Android TV",
   lg_tv: "LG TV",
   samsung_tv: "Samsung TV",
+  roku: "Roku TV",
 };
 
 const global_defaults = {

package/manifestUtils/tvAction/container/index.js

@@ -38,7 +38,7 @@ function tvActionButtonsContainer({ label, description, defaults }) {
     generateFieldsFromDefaultsWithoutPrefixedLabel(
       label,
       defaults,
-      tvActionButtonContainerFields(defaults["position"])
+      tvActionButtonContainerFields(defaults.position)
     )
   );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.0.0-alpha.8526950782",
+  "version": "15.0.0-alpha.8680244503",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.8526950782",
+    "@applicaster/applicaster-types": "15.0.0-alpha.8680244503",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/usePlayerTTS.ts

@@ -1,14 +1,19 @@
 import * as React from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
+import {
+  useAccessibilityManager,
+  useAccessibilityState,
+} from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 import { PlayerTTS } from "@applicaster/zapp-react-native-utils/playerUtils/PlayerTTS";
 
 export const usePlayerTTS = () => {
   const player = usePlayer();
   const accessibilityManager = useAccessibilityManager({});
+  const accessibilityState = useAccessibilityState();
+  const isScreenReaderEnabled = accessibilityState.screenReaderEnabled;
 
   React.useEffect(() => {
-    if (player && accessibilityManager) {
+    if (player && accessibilityManager && isScreenReaderEnabled) {
       const playerTTS = new PlayerTTS(player, accessibilityManager);
       const unsubscribe = playerTTS.init();
 
@@ -17,5 +22,5 @@ export const usePlayerTTS = () => {
         playerTTS.destroy();
       };
     }
-  }, [player, accessibilityManager]);
+  }, [player, accessibilityManager, isScreenReaderEnabled]);
 };

package/pluginUtils/index.ts

@@ -6,6 +6,7 @@ import { deprecationMessage } from "../appUtils";
 
 import { pluginUtilsLogger } from "./logger";
 import { platformSelect } from "../reactUtils";
+import { get } from "../utils";
 
 type PluginModule = any;
 type Plugin = {
@@ -254,3 +255,6 @@ const getPluginType = R.pathOr("unknown_plugin_type", [
 
 export const isPlayerPlugin = (routeState): boolean =>
   getPluginType(routeState) === "player";
+
+export const getPluginModuleUrlScheme = (plugin) =>
+  get(plugin, ["module", "urlScheme"]);

package/reactHooks/advertising/index.ts

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import * as R from "ramda";
 
 import { useNavigation } from "../navigation";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { dismissModal, openModal } from "../../modalState";
 
@@ -16,7 +16,7 @@ const ModalContainer = platformSelect({
 
 export function useAdvertisingInterstitial() {
   const { screenData, currentRoute } = useNavigation();
-  const { plugins } = usePickFromState();
+  const plugins = usePlugins();
 
   return useEffect(() => {
     // TODD: typing problem: fix any type

package/reactHooks/debugging/__tests__/index.test.js

@@ -27,20 +27,20 @@ describe("Debug utils", () => {
     it("should create new timer if timer with a label does not exist", () => {
       performanceNowMock.mockReturnValue(1000);
       time("timer1");
-      expect(timers["timer1"]).toBeDefined();
-      expect(timers["timer1"].startTime).toBe(1000);
+      expect(timers.timer1).toBeDefined();
+      expect(timers.timer1.startTime).toBe(1000);
     });
 
     it("should update start time of timer if timer with a label exists", () => {
       // First call to time()
       performanceNowMock.mockReturnValue(1000);
       time("timer1");
-      const previousStartTime = timers["timer1"].startTime;
+      const previousStartTime = timers.timer1.startTime;
 
       // Second call to time()
       performanceNowMock.mockReturnValue(2000);
       time("timer1");
-      const currentStartTime = timers["timer1"].startTime;
+      const currentStartTime = timers.timer1.startTime;
 
       expect(previousStartTime).toBe(1000);
       expect(currentStartTime).toBe(2000);

package/reactHooks/device/useMemoizedIsTablet.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useIsTablet } from "./useIsTablet";
+import { useAppData } from "@applicaster/zapp-react-native-redux";
 
 export const useMemoizedIsTablet = () => {
   const isTablet = useIsTablet();
@@ -14,9 +14,9 @@ export const useMemoizedIsTablet = () => {
 };
 
 export const useIsTabletLandscape = (): boolean => {
-  const { appData } = usePickFromState(["appData"]);
+  const { isTabletPortrait } = useAppData();
 
   const isTablet = useIsTablet();
 
-  return isTablet && !appData.isTabletPortrait;
+  return isTablet && !isTabletPortrait;
 };

package/reactHooks/feed/__tests__/useEntryScreenId.test.tsx

@@ -10,6 +10,9 @@ describe("useEntryScreenId", () => {
   const mappedScreenId = "mapped-id";
 
   const initialState = {
+    rivers: {
+      [mappedScreenId]: { id: mappedScreenId, type: "any" },
+    },
     contentTypes: { mappedEntry: { screen_id: mappedScreenId } },
   };
 

package/reactHooks/feed/useEntryScreenId.ts

@@ -1,7 +1,7 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useContentTypes } from "@applicaster/zapp-react-native-redux";
 
 export const useEntryScreenId = (entry?: ZappEntry): string | undefined => {
-  const { contentTypes } = usePickFromState("contentTypes");
+  const contentTypes = useContentTypes();
 
   if (!entry) {
     return;

package/reactHooks/flatList/useLoadNextPageIfNeeded.ts

@@ -1,10 +1,8 @@
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import React from "react";
 
-type Return = (index: number) => void;
-
 type Predicate = (
-  entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"],
+  entryLength: number,
   index: number,
   numberOfColumns: number
 ) => boolean;
@@ -12,19 +10,15 @@ type Predicate = (
 type Props = {
   ifNeeded: Predicate;
   loadNextData: () => void;
-  entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"];
+  entryLength: number;
   numberOfColumns?: number;
 };
 
 const handleLoadNextPage =
   (
-    ifNeeded: (
-      entry: ZappEntry[],
-      index: number,
-      numberOfColumns?: number
-    ) => boolean,
+    ifNeeded: Predicate,
     loadNextData: () => void,
-    entry: ZappEntry[],
+    entryLength: number,
     numberOfColumns
   ) =>
   (index: number) => {
@@ -32,7 +26,7 @@ const handleLoadNextPage =
      * Lazy-Loading, invoke nextLoadData if we reach the end of the List
      */
 
-    if (ifNeeded(entry, index, numberOfColumns)) {
+    if (ifNeeded(entryLength, index, numberOfColumns)) {
       loadNextData();
     }
   };
@@ -40,11 +34,14 @@ const handleLoadNextPage =
 export const useLoadNextPageIfNeeded = ({
   ifNeeded,
   loadNextData = noop,
-  entry,
+  entryLength,
   numberOfColumns = 0,
-}: Props): Return => {
-  return React.useCallback(
-    handleLoadNextPage(ifNeeded, loadNextData, entry, numberOfColumns),
-    [ifNeeded, loadNextData, entry, numberOfColumns]
+}: Props) => {
+  const memoFn = React.useMemo(
+    () =>
+      handleLoadNextPage(ifNeeded, loadNextData, entryLength, numberOfColumns),
+    [ifNeeded, loadNextData, entryLength, numberOfColumns]
   );
+
+  return memoFn;
 };

package/reactHooks/layout/useDimensions/__tests__/{useDimensions.test.ts → useDimensions.test.tsx}

@@ -1,16 +1,10 @@
-import { renderHook } from "@testing-library/react-hooks";
+import React from "react";
+import { renderHook } from "@testing-library/react-native";
 import { Dimensions, StatusBar } from "react-native";
 import { useDimensions } from "../useDimensions";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux";
 
 import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
-
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
-  return {
-    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
-    usePickFromState: jest.fn(),
-  };
-});
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
@@ -42,12 +36,22 @@ describe("useDimensions", () => {
 
   beforeEach(() => {
     StatusBar.currentHeight = 20;
-    (usePickFromState as jest.Mock).mockReturnValue({ appData: mockAppData });
   });
 
   it("returns correct initial dimensions", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { fullDimensions: false })
+    const { result } = renderHook(
+      () => useDimensions("window", { fullDimensions: false }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     expect(result.current).toMatchObject({
@@ -56,7 +60,17 @@ describe("useDimensions", () => {
   });
 
   it("calls handler on mount", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: false }));
+    renderHook(() => useDimensions("window", { fullDimensions: false }), {
+      wrapper: ({ children }) => (
+        <WrappedWithProviders
+          store={{
+            appData: mockAppData,
+          }}
+        >
+          {children}
+        </WrappedWithProviders>
+      ),
+    });
 
     expect(Dimensions.addEventListener).toHaveBeenCalledWith(
       "change",
@@ -65,12 +79,23 @@ describe("useDimensions", () => {
   });
 
   it("calls handler on isActive change", () => {
-    const { rerender } = renderHook(() =>
-      useDimensions("window", { fullDimensions: false })
+    const { rerender } = renderHook(
+      () => useDimensions("window", { fullDimensions: false }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     (useIsScreenActive as jest.Mock).mockReturnValue(false);
-    rerender();
+    rerender({});
 
     expect(Dimensions.addEventListener).toHaveBeenCalledWith(
       "change",
@@ -79,8 +104,19 @@ describe("useDimensions", () => {
   });
 
   it("handles fullDimensions option", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true })
+    const { result } = renderHook(
+      () => useDimensions("window", { fullDimensions: true }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     expect(result.current).toMatchObject({
@@ -91,8 +127,19 @@ describe("useDimensions", () => {
   });
 
   it("handles excludeStatusBar option", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { excludeStatusBar: true })
+    const { result } = renderHook(
+      () => useDimensions("window", { excludeStatusBar: true }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     expect(result.current.height).toBe(
@@ -101,8 +148,19 @@ describe("useDimensions", () => {
   });
 
   it("handles rounded option", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { rounded: true })
+    const { result } = renderHook(
+      () => useDimensions("window", { rounded: true }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     expect(result.current.width).toBe(Math.ceil(mockDimensions.width));
@@ -110,8 +168,19 @@ describe("useDimensions", () => {
   });
 
   it("handles deviceInfo option", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { deviceInfo: true })
+    const { result } = renderHook(
+      () => useDimensions("window", { deviceInfo: true }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     expect(result.current.deviceInfo).toMatchObject({
@@ -121,7 +190,18 @@ describe("useDimensions", () => {
 
   it("logs deprecation warning when fullDimensions is boolean", () => {
     const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation();
-    renderHook(() => useDimensions("window", true));
+
+    renderHook(() => useDimensions("window", true), {
+      wrapper: ({ children }) => (
+        <WrappedWithProviders
+          store={{
+            appData: mockAppData,
+          }}
+        >
+          {children}
+        </WrappedWithProviders>
+      ),
+    });
 
     expect(consoleWarnSpy).toHaveBeenCalledWith(
       "Deprecation Warning\nSecond argument is now the options object. {fullDimensions: boolean, ...}"

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -3,7 +3,7 @@ import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import * as R from "ramda";
 
 import { Dimensions, Platform, StatusBar } from "react-native";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { isTV } from "../../../reactUtils";
 
@@ -37,7 +37,7 @@ export const useDimensions: UseDimensions = (
 ) => {
   const statusBarHeight = StatusBar?.currentHeight;
   const isActive = useIsScreenActive();
-  const { appData } = usePickFromState(["appData"]);
+  const appData = useAppData();
 
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console

package/reactHooks/navigation/index.ts

@@ -3,7 +3,7 @@ import { BackHandler } from "react-native";
 
 import {
   useContentTypes,
-  usePickFromState,
+  usePlugins,
 } from "@applicaster/zapp-react-native-redux/hooks";
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
@@ -16,6 +16,8 @@ import { useConnectionInfo } from "../connection";
 
 import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavbarState } from "../screen";
+import { useRivers } from "../state";
+import { useLayoutVersion } from "../layout";
 
 export { useNavigation } from "./useNavigation";
 
@@ -164,11 +166,10 @@ export const useZappHooksForEntry = (
     setIsRunningInBackground,
   }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
 
-  const {
-    appData: { layoutVersion },
-    rivers,
-    plugins,
-  } = usePickFromState(["appData", "rivers", "plugins"]);
+  const plugins = usePlugins();
+  const rivers = useRivers();
+
+  const layoutVersion = useLayoutVersion();
 
   const contentTypes = useContentTypes();
 

package/reactHooks/navigation/useRoute.ts

@@ -3,7 +3,10 @@
 
 import { useContext } from "react";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useContentTypes,
+  usePlugins,
+} from "@applicaster/zapp-react-native-redux/hooks";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
 
@@ -14,6 +17,7 @@ import { useNavigation } from "./useNavigation";
 import { useModalStoreState } from "../../modalState";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { usePathname } from "./usePathname";
+import { useRivers } from "../state";
 
 // starts with modal/
 const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
@@ -42,11 +46,9 @@ export const useRoute = (
     ? legacyScreenData(screenContext)
     : screenContext;
 
-  const { plugins, contentTypes, rivers } = usePickFromState([
-    "plugins",
-    "rivers",
-    "contentTypes",
-  ]);
+  const plugins = usePlugins();
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
 
   const modalState = useModalStoreState();
 

package/reactHooks/resolvers/useCellResolver.ts

@@ -3,7 +3,10 @@ import memoizee from "memoizee";
 import * as R from "ramda";
 
 import { CellRendererResolver } from "@applicaster/zapp-react-native-ui-components/Components/CellRendererResolver";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  usePlugins,
+  useCellStyles,
+} from "@applicaster/zapp-react-native-redux";
 import { useDimensions } from "../layout";
 import { useIsRTL } from "../../localizationUtils";
 
@@ -53,7 +56,8 @@ export function useCellResolver({
     updateForInactiveScreens: false,
   });
 
-  const { plugins, cellStyles } = usePickFromState(["plugins", "cellStyles"]);
+  const plugins = usePlugins();
+  const cellStyles = useCellStyles();
   const isRTL = useIsRTL();
 
   const options = {

package/reactHooks/resolvers/useComponentResolver.ts

@@ -2,7 +2,11 @@
 import * as React from "react";
 
 import { findComponentByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  usePlugins,
+  useAppSelector,
+  selectComponents,
+} from "@applicaster/zapp-react-native-redux";
 
 type Decorator = (component: React.Component<any>) => React.Component<any>;
 type Watcher = Array<any>;
@@ -15,7 +19,9 @@ export function useComponentResolver(
   { componentType, decorators }: Props,
   watchers?: Watcher
 ): React.ComponentType<any> {
-  const { plugins, components } = usePickFromState(["plugins", "components"]);
+  const plugins = usePlugins();
+
+  const components = useAppSelector(selectComponents);
 
   return React.useMemo(
     () =>

package/reactHooks/screen/__tests__/useTargetScreenData.test.tsx

@@ -9,8 +9,16 @@ const mockStore = configureStore([thunk]);
 import { useTargetScreenData } from "../useTargetScreenData";
 
 describe("useTargetScreenData", function () {
-  const river_id_2 = {};
-  const river_id_1 = {};
+  const river_id_2 = {
+    id: "river_id_2",
+    type: "any",
+  };
+
+  const river_id_1 = {
+    id: "river_id_1",
+    type: "any",
+  };
+
   const screenId = "river_id_2";
   const entry = { id: "test", type: { value: "video" } };
 

package/reactHooks/screen/useTargetScreenData.ts

@@ -1,7 +1,8 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import * as R from "ramda";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { useRivers } from "../state";
 
 export function getTargetScreenData(
   entry: ZappEntry,
@@ -43,7 +44,8 @@ export function getTargetScreenDataFromEntry(entry: ZappEntry): ZappRiver {
 }
 
 export const useTargetScreenData = (entry: ZappEntry) => {
-  const { rivers, contentTypes } = usePickFromState(["rivers", "contentTypes"]);
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
 
   return React.useMemo(
     () => getTargetScreenData(entry, rivers, contentTypes),

package/reactHooks/state/useRivers.ts

@@ -3,6 +3,6 @@ import {
   selectRivers,
 } from "@applicaster/zapp-react-native-redux";
 
-export function useRivers(): Record<string, ZappRiver> {
+export function useRivers() {
   return useAppSelector(selectRivers);
 }

package/reactHooks/usePluginConfiguration.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
 import { useMemo } from "react";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 
 // importing this way prevents typescript packages importing from this
 // file to go crazy reporting errors on JS
@@ -25,7 +25,7 @@ export function parsePluginConfiguration(plugin, manifest) {
 }
 
 export function usePluginConfiguration<T, S>(identifier, manifest) {
-  const { plugins } = usePickFromState(["plugins"]);
+  const plugins = usePlugins();
 
   const plugin = useMemo(
     () => R.find(R.propEq("identifier", identifier), plugins),