@applicaster/zapp-react-native-utils 13.0.0-alpha.2833001702 → 13.0.0-alpha.2886020207

package/appUtils/keyCodes/index.ts

@@ -1,5 +1,3 @@
-import * as R from "ramda";
-
 // more keys can be added here. Simply make sure
 // the key matches the code value
 
@@ -34,12 +32,18 @@ export function keyCode(key) {
   keyCode(keyEvent).matchesAny("Enter", "Backspace", KEYS.ArrowLeft, ...)
   */
 
-  const matches = R.compose(
-    R.either(R.eqProps("code", key), R.eqProps("keyCode", key)),
-    R.when(R.is(String), R.prop(R.__, KEYS))
-  );
+  const matches = (compareKey) => {
+    // If compareKey is a string, look it up in KEYS object
+    const keyToCompare =
+      typeof compareKey === "string" ? KEYS[compareKey] : compareKey;
+
+    // Compare either code or keyCode properties
+    return (
+      keyToCompare?.code === key.code || keyToCompare?.keyCode === key.keyCode
+    );
+  };
 
-  const matchesAny = (...args) => R.any(matches, args);
+  const matchesAny = (...args) => args.some(matches);
 
   const direction = () =>
     matchesAny(...ARROW_KEYS) ? directionHelper(key) : null;

package/appUtils/localizationsHelper.ts

@@ -65,6 +65,37 @@ export function getUILanguage() {
   return getLanguageCode();
 }
 
+/**
+ * fallback to en for missing dayjslocalization
+ * converts the locale code to a dayjs compatible locale code
+ * lowercase input code is expected, e.g. "en-GB" => "en-gb"
+ * @param {string} code - locale code, e.g. "en", "fr", "es-LA"
+ * */
+export const toDayJSLocaleMap = (code) => {
+  const map = {
+    hy: "hy-am",
+    fj: null,
+    la: null,
+    no: null,
+    pa: "pa-in",
+    qu: null,
+    sm: null,
+    to: null,
+    xh: null,
+    tt: null,
+    "es-LA": "es",
+    "en-UK": "en-gb",
+  };
+
+  if (map[code] === null) {
+    return "en";
+  } else if (map[code]) {
+    return map[code];
+  } else {
+    return code.toLowerCase();
+  }
+};
+
 /**
  * returns the localization for the app based on the locale. If the locale is null
  * or undefined, or if the given locale doesn't exist in the localizations,

package/appUtils/orientationHelper.ts

@@ -1,8 +1,8 @@
-/// <reference types="@types/react-native" />
 import * as ReactNative from "react-native";
-import { isTV, platformSelect } from "../reactUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+
+import { isTV, platformSelect } from "../reactUtils";
+import { useIsTablet } from "../reactHooks";
 
 import {
   QUICK_BRICK_EVENTS,
@@ -121,8 +121,15 @@ export const removeOrientationChangeListener = (listener: any): void => {
  */
 export const isOrientationCompatible = ({
   orientation,
-  layoutData: { width, height },
+  layoutData: { width, height, isTablet, isTabletPortrait },
 }) => {
+  // We count portrait as compatible, because if default in zapp for mobile layout
+  // We count landscape as compatible, because if isTabletPortrait is false,
+  // it defaults for device
+  if (isTablet && !isTabletPortrait) {
+    return true;
+  }
+
   const isLandscape = width > height;
 
   if (
@@ -146,15 +153,6 @@ export const isOrientationCompatible = ({
   return true;
 };
 
-export const useIsOrientationCompatible = (orientation) => {
-  const { height, width } = ReactNative.useWindowDimensions();
-
-  return isOrientationCompatible({
-    orientation,
-    layoutData: { width, height },
-  });
-};
-
 /**
  * Determine final screen orientation based on device type,
  * settings and orientation value provided by screen data settings

package/appUtils/playerManager/index.ts

@@ -452,7 +452,7 @@ export class PlayerManager {
     if (this.castingReceiver) {
       this.castingReceiver.closeNativePlayer();
     } else {
-      this.getActivePlayer().closeNativePlayer();
+      this.getActivePlayer()?.closeNativePlayer();
       this.invokeHandler("close");
     }
   }

package/appUtils/playerManager/player.ts

@@ -97,7 +97,7 @@ export class Player {
     this.onVideoLoad = this.onVideoLoad.bind(this);
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
     this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
-
+    this.onAdBreakEnd = this.onAdBreakEnd.bind(this);
     this.entryObservable = null;
   }
 
@@ -201,17 +201,25 @@ export class Player {
         adPosition: currentTime,
       };
     } else {
-      if (!isEmptyOrNil(seekableDuration) && seekableDuration >= 0) {
-        this.playerState.seekableDuration = seekableDuration;
-      }
+      this.updateContentDuration({ seekableDuration, duration, currentTime });
+    }
+  };
 
-      if (!isEmptyOrNil(duration) && duration >= 0) {
-        this.playerState.contentDuration = duration;
-      }
+  protected updateContentDuration = ({
+    seekableDuration = null,
+    duration = null,
+    currentTime = null,
+  }) => {
+    if (!isEmptyOrNil(seekableDuration) && seekableDuration >= 0) {
+      this.playerState.seekableDuration = seekableDuration;
+    }
 
-      if (!isEmptyOrNil(currentTime) && currentTime >= 0) {
-        this.playerState.contentPosition = currentTime;
-      }
+    if (!isEmptyOrNil(duration) && duration >= 0) {
+      this.playerState.contentDuration = duration;
+    }
+
+    if (!isEmptyOrNil(currentTime) && currentTime >= 0) {
+      this.playerState.contentPosition = currentTime;
     }
   };
 
@@ -559,7 +567,7 @@ export class Player {
     });
   };
 
-  onAdBreakEnd = (event) => {
+  onAdBreakEnd(event) {
     this.playerState.adState = null;
     this.playerState.isInAdBreak = false;
 
@@ -567,7 +575,7 @@ export class Player {
       callbackName: SharedPlayerCallBacksKeys.OnAdBreakEnd,
       event,
     });
-  };
+  }
 
   onAdEnd = (event) => {
     this.playerState.adState = null;
@@ -736,6 +744,10 @@ export class Player {
     return null;
   };
 
+  public hasResumePosition() {
+    return false;
+  }
+
   public getConfig = () => this.config;
 
   // TODO: replace with enum of supported orientations

package/appUtils/playerManager/playerHooks/usePlayerCurrentTime.tsx

@@ -12,7 +12,7 @@ import { useThrottle } from "../../../functionUtils";
 export const usePlayerCurrentTime = (
   listenerId: string,
   playerId?: string
-): number | null => {
+): { currentTime: number | null; cancel: () => void } => {
   const [currentTime, setCurrentTime] = useState<number | null>(null);
   const player: Player = usePlayer(playerId);
 
@@ -20,15 +20,17 @@ export const usePlayerCurrentTime = (
     if (player) {
       const newCurrentTime = player.getContentPosition();
 
-      setCurrentTime((prevTime) =>
-        prevTime !== newCurrentTime ? newCurrentTime : prevTime
-      );
+      setCurrentTime(newCurrentTime);
     }
   }, [player]);
 
+  // We update the current time every ~250ms since player can have rate set to 2x.
+  // We update more often than 2x a second to avoid noticiable 'pulsation' in update,
+  //  since native level also updates the current time every ~250ms,
+  //  and combined with assorted delays it creates interference pattern.
   const { throttledFunction: throttledUpdate, cancel } = useThrottle(
     updateCurrentTime,
-    1000
+    1000 / 4
   );
 
   useEffect(() => {
@@ -36,7 +38,9 @@ export const usePlayerCurrentTime = (
       throttledUpdate();
 
       const listeners = {
-        onVideoProgress: throttledUpdate,
+        onVideoProgress: () => {
+          setCurrentTime(player.getContentPosition());
+        },
       };
 
       const id = `${listenerId}_player_current_time`;
@@ -53,5 +57,5 @@ export const usePlayerCurrentTime = (
     }
   }, [player, listenerId, throttledUpdate, cancel]);
 
-  return currentTime;
+  return { currentTime, cancel };
 };

package/appUtils/playerManager/playerNative.ts

@@ -54,6 +54,10 @@ export class PlayerNative extends Player {
     });
   }
 
+  public hasResumePosition() {
+    return true;
+  }
+
   getContentPosition = () => {
     return this.playerState.contentPosition;
   };
@@ -221,11 +225,13 @@ export class PlayerNative extends Player {
   };
 
   onVideoLoad = (event) => {
-    if (this.startPosition) {
-      this.seekTo(this.startPosition);
-      this.startPosition = null;
+    this.updateContentDuration(event);
 
+    if (this.startPosition && !this.playerState.isInAdBreak) {
       super.onVideoLoad({ ...event, ignoreContinueWatching: true });
+
+      this.seekTo(this.startPosition);
+      this.startPosition = null;
     } else {
       super.onVideoLoad(event);
     }
@@ -249,6 +255,15 @@ export class PlayerNative extends Player {
     }
   };
 
+  onAdBreakEnd = (event) => {
+    super.onAdBreakEnd(event);
+
+    if (this.startPosition) {
+      this.seekTo(this.startPosition);
+      this.startPosition = null;
+    }
+  };
+
   // This function is called when native player used directly without wrapped component,
   // Since event from native comes with wrapped in NativeEvent property
   getNativeViewListener = (): QuickBrickPlayer.SharedPlayerCallBacks => {

package/appUtils/playerManager/usePlayerTitleSummaryOverlay.tsx

@@ -3,12 +3,18 @@ import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
 import { useFeedLoader } from "../../reactHooks";
 import { usePlayer } from "./usePlayer";
 
+const getLiveUrl = (url: string) => {
+  // Use the replace method with a regular expression to replace all instances of subClass with livePage
+  return url.replace(new RegExp("subClass", "g"), "livePage");
+};
+
 export const useTitleSummaryOverlay = (
-  feedUrl,
   entry,
   isLive = false,
   interval: number
 ) => {
+  // TODO: Have generic place for live url from configuration. Currently its hardcoded for client.
+  const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
   const player = usePlayer();
   const [title, setTitle] = useState<string | number>(entry?.title || "");
   const [summary, setSummary] = useState<string | number>(entry?.summary || "");

package/cellUtils/index.ts

@@ -2,12 +2,16 @@ import * as R from "ramda";
 import dayjs from "dayjs";
 import validateColor from "validate-color";
 
+import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
+import {
+  capitalize,
+  isString,
+} from "@applicaster/zapp-react-native-utils/stringUtils";
+import { cellUtilsLogger } from "@applicaster/zapp-react-native-utils/cellUtils/logger";
+import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
-import { transformColorCode as fixColorHexCode } from "../transform";
-import { capitalize, isString } from "../stringUtils";
-import { cellUtilsLogger } from "./logger";
-import { isWeb } from "../reactUtils";
-import { isNotNil } from "../reactUtils/helpers";
 
 const CUSTOM_KEY = "other";
 

package/componentsUtils/__tests__/isFirstComponentGallery.test.ts

@@ -0,0 +1,33 @@
+import { isFirstComponentGallery } from "../index";
+
+describe("isFirstComponentGallery", () => {
+  it("should return true if the first component is a gallery", () => {
+    const components = [
+      { component_type: "gallery-qb" },
+      { component_type: "other-component" },
+    ];
+
+    expect(isFirstComponentGallery(components)).toBe(true);
+  });
+
+  it("should return false if the first component is not a gallery", () => {
+    const components = [
+      { component_type: "other-component" },
+      { component_type: "gallery-qb" },
+    ];
+
+    expect(isFirstComponentGallery(components)).toBe(false);
+  });
+
+  it("should return false if the components array is empty", () => {
+    const components = [];
+
+    expect(isFirstComponentGallery(components)).toBe(false);
+  });
+
+  it("should return false if the components array is undefined", () => {
+    const components = undefined;
+
+    expect(isFirstComponentGallery(components)).toBe(false);
+  });
+});

package/componentsUtils/__tests__/isFirstComponentScreenPicker.test.ts

@@ -0,0 +1,33 @@
+import { isFirstComponentScreenPicker } from "..";
+
+describe("isFirstComponentScreenPicker", () => {
+  it("should return true if the first component screen-picker", () => {
+    const items = [{ component_type: "screen-picker-qb-tv" }];
+    expect(isFirstComponentScreenPicker(items)).toBe(true);
+  });
+
+  it("should return false if the first component type is not screen-picker", () => {
+    const items = [{ component_type: "other-component" }];
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const items = [{ component_type: undefined }];
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const items = null;
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const items = undefined;
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const items = {};
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+});

package/componentsUtils/__tests__/isGallery.test.ts

@@ -0,0 +1,33 @@
+import { isGallery } from "..";
+
+describe("isGallery", () => {
+  it("should return true if the component type is 'gallery-qb'", () => {
+    const item = { component_type: "gallery-qb" };
+    expect(isGallery(item)).toBe(true);
+  });
+
+  it("should return false if the component type is not 'gallery-qb'", () => {
+    const item = { component_type: "other-component" };
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const item = { component_type: undefined };
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const item = null;
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const item = undefined;
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const item = {};
+    expect(isGallery(item)).toBe(false);
+  });
+});

package/componentsUtils/__tests__/isScreenPicker.test.ts

@@ -0,0 +1,33 @@
+import { isScreenPicker } from "..";
+
+describe("isScreenPicker", () => {
+  it("should return true if the component type is 'screen-picker-qb-tv'", () => {
+    const item = { component_type: "screen-picker-qb-tv" };
+    expect(isScreenPicker(item)).toBe(true);
+  });
+
+  it("should return false if the component type is not 'screen-picker-qb-tv'", () => {
+    const item = { component_type: "other-component" };
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const item = { component_type: undefined };
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const item = null;
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const item = undefined;
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const item = {};
+    expect(isScreenPicker(item)).toBe(false);
+  });
+});

package/componentsUtils/index.ts

@@ -0,0 +1,39 @@
+const GROUP = "group-qb";
+const GROUP_INFO = "group-info-qb";
+const GROUP_INFO_OLD = "group-info";
+const EMPTY_GROUP_COMPONENT = "empty_group_component";
+
+const GALLERY = "gallery-qb";
+
+const SCREEN_PICKER = "screen-picker-qb-tv";
+
+const HORIZONTAL_LIST = "horizontal_list_qb";
+
+export const isGallery = (item): boolean => item?.component_type === GALLERY;
+
+export const isHorizontalList = (item): boolean =>
+  item?.component_type === HORIZONTAL_LIST;
+
+export const isScreenPicker = (item): boolean =>
+  item?.component_type === SCREEN_PICKER;
+
+export const isFirstComponentScreenPicker = (
+  components: ZappUIComponent[]
+): boolean => {
+  return isScreenPicker(components?.[0]);
+};
+
+export const isFirstComponentGallery = (
+  components: ZappUIComponent[]
+): boolean => {
+  return isGallery(components?.[0]);
+};
+
+export const isGroup = (item): boolean => item?.component_type === GROUP;
+
+export const isEmptyGroup = (item): boolean =>
+  item?.component_type === EMPTY_GROUP_COMPONENT;
+
+export const isGroupInfo = (item): boolean =>
+  item?.component_type === GROUP_INFO ||
+  item?.component_type === GROUP_INFO_OLD;

package/dateUtils/index.ts

@@ -2,10 +2,29 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import isoWeek from "dayjs/plugin/isoWeek";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
 
 // Extend dayjs with plugins
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);
+dayjs.extend(duration);
+
+dayjs.extend(relativeTime, {
+  thresholds: [
+    { l: "s", r: 1 },
+    { l: "m", r: 1 },
+    { l: "mm", r: 59, d: "minute" },
+    { l: "h", r: 1 },
+    { l: "hh", r: 23, d: "hour" },
+    { l: "d", r: 1 },
+    { l: "dd", r: 29, d: "day" },
+    { l: "M", r: 1 },
+    { l: "MM", r: 11, d: "month" },
+    { l: "y", r: 1 },
+    { l: "yy", d: "year" },
+  ],
+});
 
 export { dayjs };

package/focusManager/FocusManager.ts

@@ -227,7 +227,9 @@ class FocusManager {
 
       const nextNextFocus = FocusManager.getNextFocusable(direction, nextFocus);
 
-      FocusManager.instance.setFocus(nextNextFocus, options);
+      if (nextNextFocus) {
+        FocusManager.instance.setFocus(nextNextFocus, options);
+      }
     } else {
       FocusManager.instance.setFocusLocal(nextFocus);
 

package/focusManager/index.ts

@@ -8,8 +8,6 @@ import { isNilOrEmpty } from "../reactUtils/helpers";
 import { isAndroidTVPlatform } from "../reactUtils";
 import { noop } from "../functionUtils";
 
-const EMPTY_GROUP_COMPONENT = "empty_group_component";
-
 export function useFocusManager() {
   return focusManager;
 }
@@ -76,14 +74,6 @@ export function useFocusEffect(onFocus, focusWatcher) {
   }, focusWatcher);
 }
 
-export function shouldShowEmptyGroup(component) {
-  return (
-    component?.ui_components?.filter(
-      ({ component_type }) => component_type === EMPTY_GROUP_COMPONENT
-    )?.length > 0
-  );
-}
-
 export const isFocusable = (component: ZappEntry | ZappUIComponent | any) =>
   R.tryCatch(
     R.compose(
@@ -101,6 +91,7 @@ type Props = {
 
 export const useIsFocusable = (props: Props): void => {
   const { component, zappPipesData } = props;
+
   const { setIsFocusable } = useFocusable();
 
   const componentCellsFocusable = toBooleanWithDefaultTrue(
@@ -119,12 +110,7 @@ export const useIsFocusable = (props: Props): void => {
 
   const hasDataError = !!zappPipesData?.error;
 
-  const hasEmptyGroup = shouldShowEmptyGroup(component);
-
-  const isGallery = component?.component_type === "gallery-qb";
-
-  const isHiddenDueToEmptyData =
-    !isLoadingData && hasNoData && hideIfDataEmpty && !hasEmptyGroup;
+  const isHiddenDueToEmptyData = !isLoadingData && hasNoData && hideIfDataEmpty;
 
   const defaultFocusableLogic =
     componentCellsFocusable && (!hasNoData || !hideIfDataEmpty);
@@ -133,9 +119,7 @@ export const useIsFocusable = (props: Props): void => {
     if (isAndroidTVPlatform()) {
       let isFocusableNew = false;
 
-      if (isGallery) {
-        isFocusableNew = true;
-      } else if (isFocusable(component)) {
+      if (isFocusable(component)) {
         isFocusableNew = defaultFocusableLogic;
       }
 
@@ -144,9 +128,7 @@ export const useIsFocusable = (props: Props): void => {
   }, [
     defaultFocusableLogic,
     isHiddenDueToEmptyData,
-    isGallery,
     setIsFocusable,
     hasDataError,
-    hasEmptyGroup,
   ]);
 };