@applicaster/zapp-react-native-utils 15.0.0-rc.5 → 15.0.0-rc.50

package/arrayUtils/__tests__/anyThruthy.test.ts

@@ -0,0 +1,24 @@
+import { anyTruthy } from "..";
+
+describe("anyTruthy", () => {
+  it("should return true when at least one value is true", () => {
+    expect(anyTruthy([false, true, false])).toBe(true);
+  });
+
+  it("should return false when all values are false", () => {
+    expect(anyTruthy([false, false, false])).toBe(false);
+  });
+
+  it("should return true when all values are true", () => {
+    expect(anyTruthy([true, true, true])).toBe(true);
+  });
+
+  it("should return false for an empty array", () => {
+    expect(anyTruthy([])).toBe(false);
+  });
+
+  it("should handle single-element arrays correctly", () => {
+    expect(anyTruthy([true])).toBe(true);
+    expect(anyTruthy([false])).toBe(false);
+  });
+});

package/arrayUtils/index.ts

@@ -116,3 +116,8 @@ export const sample = (xs: unknown[]): unknown => {
 
   return xs[index];
 };
+
+export const allTruthy = (xs: boolean[]) =>
+  isFilledArray(xs) && xs.every(Boolean);
+
+export const anyTruthy = (xs: boolean[]) => xs.some(Boolean);

package/cellUtils/index.ts

@@ -505,3 +505,35 @@ export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
     marginRight: value("image_margin_right"),
   };
 };
+
+export const isTextLabel = (key: string): boolean =>
+  key.includes("text_label_") && key.endsWith("_switch");
+
+export const hasTextLabelsEnabled = (
+  configuration: Record<string, any>
+): boolean => {
+  const textLabelsKeys = Object.keys(configuration).filter(isTextLabel);
+
+  const picked = textLabelsKeys.reduce(
+    (acc, key) => {
+      acc[key] = configuration[key];
+
+      return acc;
+    },
+    {} as Record<string, any>
+  );
+
+  const pickedValues = Object.values(picked);
+
+  return pickedValues.some((value) => {
+    if (typeof value === "boolean") {
+      return value === true;
+    }
+
+    if (typeof value === "string") {
+      return value !== "" && value.toLowerCase() !== "false";
+    }
+
+    return Boolean(value);
+  });
+};

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -50,7 +50,7 @@ describe("getAllSpecificStyles", () => {
       });
 
       expect(outStyles).toHaveProperty("default");
-      expect(outStyles["default"]).toEqual({});
+      expect(outStyles.default).toEqual({});
     });
 
     it("should handle empty configuration", () => {
@@ -83,7 +83,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000",
         borderWidth: 2,
       });
@@ -104,7 +104,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000",
         textSize: 16,
       });
@@ -126,7 +126,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000",
       });
     });
@@ -148,11 +148,11 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000",
       });
 
-      expect(outStyles["pressed"]).toEqual({
+      expect(outStyles.pressed).toEqual({
         backgroundColor: "#00FF00",
       });
     });
@@ -171,7 +171,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["focused"]).toEqual({
+      expect(outStyles.focused).toEqual({
         borderWidth: 3,
       });
     });
@@ -190,7 +190,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["selected"]).toEqual({
+      expect(outStyles.selected).toEqual({
         opacity: 0.5,
       });
     });
@@ -209,7 +209,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["focused_selected"]).toEqual({
+      expect(outStyles.focused_selected).toEqual({
         scale: 1.2,
       });
     });
@@ -232,21 +232,21 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000",
         borderWidth: 1,
         opacity: 1,
       });
 
       // Pressed should have default styles merged with its specific override
-      expect(outStyles["pressed"]).toEqual({
+      expect(outStyles.pressed).toEqual({
         backgroundColor: "#00FF00", // Override
         borderWidth: 1, // From default
         opacity: 1, // From default
       });
 
       // Focused should have default styles merged with its specific override
-      expect(outStyles["focused"]).toEqual({
+      expect(outStyles.focused).toEqual({
         backgroundColor: "#FF0000", // From default
         borderWidth: 1, // From default
         opacity: 0.8, // Override
@@ -270,7 +270,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["pressed"]).toEqual({
+      expect(outStyles.pressed).toEqual({
         existingKey: "existingValue", // Should be preserved
         backgroundColor: "#FF0000", // From default
         textColor: "#FFFFFF", // New pressed style
@@ -294,7 +294,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000", // Samsung-specific should be included
       });
     });
@@ -317,7 +317,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FFFFFF", // Only non-platform specific
       });
     });
@@ -336,7 +336,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         color: "#FF0000",
       });
     });
@@ -356,7 +356,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["pressed"]).toEqual({
+      expect(outStyles.pressed).toEqual({
         backgroundColor: "#FF0000", // Only samsung style
       });
     });
@@ -377,7 +377,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#00FF00", // Samsung-specific should win
       });
     });
@@ -412,14 +412,14 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FFFFFF",
         textColor: "#000000",
         borderWidth: 1,
         padding: 10,
       });
 
-      expect(outStyles["pressed"]).toEqual({
+      expect(outStyles.pressed).toEqual({
         backgroundColor: "#EEEEEE",
         textColor: "#000000",
         borderWidth: 1,
@@ -427,7 +427,7 @@ describe("getAllSpecificStyles", () => {
         opacity: 0.8,
       });
 
-      expect(outStyles["focused"]).toEqual({
+      expect(outStyles.focused).toEqual({
         backgroundColor: "#FFFFFF",
         textColor: "#000000",
         borderWidth: 1,
@@ -453,7 +453,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         validKey: "included",
       });
     });
@@ -474,11 +474,11 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["focused_selected"]).toEqual({
+      expect(outStyles.focused_selected).toEqual({
         test: "focused_selected_value",
       });
 
-      expect(outStyles["focused"]).toEqual({
+      expect(outStyles.focused).toEqual({
         another: "focused_value",
       });
     });
@@ -517,7 +517,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["pressed"]["backgroundColor"]).toBe("#222222");
+      expect(outStyles.pressed.backgroundColor).toBe("#222222");
     });
 
     it("should handle frozen outStyles properties", () => {
@@ -537,7 +537,7 @@ describe("getAllSpecificStyles", () => {
       });
 
       // Should create new object instead of mutating frozen one
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         existingProp: "value",
         backgroundColor: "#FF0000",
       });

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -335,6 +335,20 @@ function getPlayerConfiguration({ platform, version }) {
   };
 
   if (isTV(platform)) {
+    localizations.fields.push({
+      key: "back_to_live_label",
+      label: "Back to live label",
+      initial_value: "Back To Live",
+      type: "text_input",
+    });
+
+    localizations.fields.push({
+      key: "start_over_label",
+      label: "Start over label",
+      initial_value: "Start Over",
+      type: "text_input",
+    });
+
     styles.fields.push(
       fieldsGroup("Always Show Scrub Bar & Timestamp", "", [
         {
@@ -447,7 +461,7 @@ function getPlayerConfiguration({ platform, version }) {
       ),
       fieldsGroup(
         "Skip Button",
-        "This section allows you to configure the skip button styles for tv",
+        "This section allows you to configure the skip button behaviour",
         [
           {
             type: "switch",
@@ -464,6 +478,12 @@ function getPlayerConfiguration({ platform, version }) {
             label: "Persistent Button Toggle",
             initial_value: true,
           },
+        ]
+      ),
+      fieldsGroup(
+        "Labeled Button Style",
+        "This section allows you to configure the labeled button styles",
+        [
           {
             type: "color_picker_rgba",
             label_tooltip: "",
@@ -619,6 +639,44 @@ function getPlayerConfiguration({ platform, version }) {
     );
   }
 
+  if (isTV(platform)) {
+    general.fields.push(
+      {
+        key: "liveSeekingEnabled",
+        label: "Live Seeking Enabled",
+        initial_value: false,
+        type: "switch",
+        label_tooltip: "Enable Live Seek",
+      },
+      {
+        key: "minimumAllowedSeekableDurationInSeconds",
+        label: "Minimum allowed seekable duration in seconds",
+        initial_value: 300,
+        type: "number_input",
+        label_tooltip:
+          "If duration less than this value, player will disable 'liveSeekingEnabled' value",
+      },
+      {
+        key: "live_image",
+        label: "Live badge",
+        type: "uploader",
+        label_tooltip: "Override default live badge / icon",
+      },
+      {
+        key: "live_width",
+        label: "Live badge width",
+        type: "number_input",
+        initial_value: 85,
+      },
+      {
+        key: "live_height",
+        label: "Live badge height",
+        type: "number_input",
+        initial_value: 50,
+      }
+    );
+  }
+
   if (isMobile(platform)) {
     general.fields.push(
       {
@@ -3429,6 +3487,22 @@ function getPlayerConfiguration({ platform, version }) {
             label_tooltip:
               "This field allows you to override the player configuration / initialization options. i.e. html5: { vhs: { limitRenditionByPlayerDimensions: false } } Please ensure your configuration matches the player you are targeting, and that it is a valid json. See config options here: https://videojs.com/guides/options/",
           },
+          {
+            key: "advanced_player_styles",
+            label: "Advanced Player Styles",
+            type: "text_input",
+            multiline: true,
+            initial_value: `.vjs-text-track-cue { 
+            inset: unset !important;
+            top: 94% !important;
+            bottom: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            width: 100% !important;
+          }`,
+            label_tooltip:
+              "This field allows you to inject custom CSS styles to override default player styles. The styles will be injected into the document head and can be used to customize the appearance of the player. Leave empty to use only default styles.",
+          },
           {
             key: "use_dashjs_player",
             label: "Use Enhanced Player for DASH streams",

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/navigationUtils/index.ts

@@ -575,24 +575,27 @@ export function routeIsPlayerScreen(currentRoute) {
   return currentRoute?.includes("/playable");
 }
 
-export const getNavBarProps =
-  (currentRiver: ZappRiver, pathname: string, title: string) => () => {
-    const props = getNavigationPropsV2({
-      currentRiver,
-      title,
-      category: "nav_bar",
-    });
+export const getNavBarProps = (
+  currentRiver: ZappRiver,
+  pathname: string,
+  title: string
+) => {
+  const props = getNavigationPropsV2({
+    currentRiver,
+    title,
+    category: "nav_bar",
+  });
 
-    if (props) {
-      return {
-        ...props,
-        id: pathname,
-        pathname: pathname,
-      };
-    }
+  if (props) {
+    return {
+      ...props,
+      id: pathname,
+      pathname: pathname,
+    };
+  }
 
-    return null;
-  };
+  return null;
+};
 
 export const findMenuPlugin = (
   navigations: ZappNavigation[],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.0.0-rc.5",
+  "version": "15.0.0-rc.50",
   "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-rc.5",
+    "@applicaster/applicaster-types": "15.0.0-rc.50",
     "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/useBatchLoading.ts

@@ -151,7 +151,13 @@ export const useBatchLoading = (
         }
       }
     });
-  }, [feedUrls, feeds, loadPipesDataDispatcher]);
+  }, [
+    batchComponents,
+    feeds,
+    getUrl,
+    loadPipesDataDispatcher,
+    options.riverId,
+  ]);
 
   React.useEffect(() => {
     runBatchLoading();

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/feed/usePipesCacheReset.ts

@@ -34,7 +34,9 @@ export const usePipesCacheReset = (riverId, riverComponents) => {
             component
           );
 
-          dispatch(clearPipesData(url, { riverId }));
+          if (url) {
+            dispatch(clearPipesData(url, { riverId }));
+          }
         }
       });
     };