@applicaster/zapp-react-native-utils 13.0.0-rc.99 → 14.0.0-alpha.1235043154

package/actionsExecutor/ActionExecutorContext.tsx

@@ -5,9 +5,14 @@ import {
   actionExecutor as _actionExecutor,
   ActionResult,
 } from "./ActionExecutor";
-import { batchSaveToLocalStorage } from "../zappFrameworkUtils/localStorageHelper";
-import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import {
+  batchRemoveAllFromNamespaceForStorage,
+  batchSave,
+} from "../zappFrameworkUtils/localStorageHelper";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { showConfirmationDialog } from "../alertUtils";
 import { createCloudEvent, sendCloudEvent } from "../cloudEventsUtils";
 import { createLogger } from "../logger";
@@ -26,6 +31,9 @@ import {
   useContentTypes,
   usePickFromState,
 } from "@applicaster/zapp-react-native-redux/hooks";
+import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "./consts";
+import { postEvent, useSubscriberFor } from "../reactHooks/useSubscriberFor";
+import { APP_EVENTS } from "../appUtils/events";
 
 export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
@@ -74,10 +82,31 @@ function findParentComponent(
   return null;
 }
 
+// send all data just in case (like for message string formatting)
+// Type is not exported for now
+type MaxTagsReachedEvent = {
+  selectedItems: string[];
+  maxItems: number;
+  tag: string;
+  keyNamespace: string;
+};
+
+async function onMaxTagsReached(data: MaxTagsReachedEvent) {
+  postEvent(TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT, [data]);
+}
+
 const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("localStorageSet", async (action) => {
     const namespaces = action.options.content;
-    await batchSaveToLocalStorage(namespaces);
+    await batchSave(namespaces, localStorage);
+    // TODO: Add support for ownershipKey and ownershipNamespace
+
+    return ActionResult.Success;
+  });
+
+  actionExecutor.registerAction("sessionStorageSet", async (action) => {
+    const namespaces = action.options.content;
+    await batchSave(namespaces, sessionStorage);
     // TODO: Add support for ownershipKey and ownershipNamespace
 
     return ActionResult.Success;
@@ -134,15 +163,13 @@ const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("confirmDialog", async (action) => {
     log_info("handleAction: confirmDialog event");
 
-    const confirmationPromise = new Promise<ActionResult>((resolve) => {
+    return new Promise<ActionResult>((resolve) => {
       showConfirmationDialog({
         ...action.options,
         confirmCompletion: () => resolve(ActionResult.Success),
         cancelCompletion: () => resolve(ActionResult.Cancel),
       });
     });
-
-    return confirmationPromise;
   });
 
   actionExecutor.registerAction("sendCloudEvent", async (action, context) => {
@@ -241,6 +268,13 @@ const prepareDefaultActions = (actionExecutor) => {
               `handleAction: localStorageToggleFlag event reached max items limit: ${maxItems}, cannot add tag: ${tag}`
             );
 
+            await onMaxTagsReached({
+              selectedItems,
+              maxItems,
+              tag,
+              keyNamespace,
+            });
+
             return ActionResult.Cancel;
           }
 
@@ -281,9 +315,24 @@ export function withActionExecutor(Component) {
       };
     }, []);
 
+    useSubscriberFor(APP_EVENTS.onLogout, () => {
+      log_debug(
+        "User profile: onLogout event received, clearing user profile data"
+      );
+
+      const userAccountKey = "user_account";
+      void batchRemoveAllFromNamespaceForStorage(userAccountKey, localStorage);
+
+      void batchRemoveAllFromNamespaceForStorage(
+        userAccountKey,
+        sessionStorage
+      );
+    });
+
     useEffect(() => {
       return _actionExecutor.registerAction(
         "navigateToScreen",
+
         async (action: ActionType, context?: Record<string, any>) => {
           const screenType = action.options?.typeMapping;
 

package/actionsExecutor/consts.ts

@@ -0,0 +1,4 @@
+export const TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT =
+  "action.localStorageToggleFlag.maxItemsReached";
+
+export const ACTION_EXECUTOR_EVENT_SOURCE = "ActionExecutor";

package/analyticsUtils/AnalyticsEvents/sendHeaderClickEvent.ts

@@ -4,7 +4,7 @@ import { postAnalyticEvent } from "../manager";
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
 type SendHeaderClickEventProps = {
-  extraProps: ExtraProps;
+  extraProps: Record<string, any>;
   component?: ZappUIComponent;
   zappPipesData?: ZappPipesData;
   item?: ZappEntry;

package/analyticsUtils/AnalyticsEvents/sendMenuClickEvent.ts

@@ -1,10 +1,11 @@
+/// <reference types="../../" />
 import { log_error, log_debug } from "../logger";
 import { replaceAnalyticsPropsNils } from "./helper";
 import { postAnalyticEvent } from "../manager";
 
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
-declare type AnalyticsDefaultHelperProperties = {
+type AnalyticsDefaultHelperProperties = {
   analyticsScreenData: AnalyticsScreenProperties;
   extraProps: any;
   props;

package/analyticsUtils/index.tsx

@@ -1,4 +1,3 @@
-/// <reference types="@applicaster/zapp-react-native-utils" />
 import * as R from "ramda";
 import * as React from "react";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -31,7 +30,7 @@ import { ANALYTICS_CORE_EVENTS } from "./events";
 import { noop } from "../functionUtils";
 
 type ComponentWithChildrenProps = {
-  children: React.ReactChildren;
+  children: React.ReactElement;
 };
 
 export function sendSelectCellEvent(item, component, headerTitle, itemIndex) {
@@ -120,11 +119,11 @@ export function getAnalyticsFunctions({
 export const AnalyticsContext =
   React.createContext<GetAnalyticsFunctions>(noop);
 
-export function AnalyticsProvider(props: ComponentWithChildrenProps) {
+export function AnalyticsProvider({ children }: ComponentWithChildrenProps) {
   return (
     // @ts-ignore - this is a valid context provider
     <AnalyticsContext.Provider value={getAnalyticsFunctions}>
-      {props?.children}
+      {children}
     </AnalyticsContext.Provider>
   );
 }

package/analyticsUtils/manager.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as R from "ramda";
 import { NativeModules } from "react-native";
-import { ANALYTICS_CORE_EVENTS } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
+import { ANALYTICS_CORE_EVENTS } from "./events";
 
 import { analyticsUtilsLogger } from "./logger";
 

package/appUtils/__tests__/__snapshots__/localizationsHelper.test.ts.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`toDayJSLocaleMap [af] returns a valid dayjs locale 1`] = `"af"`;
+
+exports[`toDayJSLocaleMap [ar] returns a valid dayjs locale 1`] = `"ar"`;
+
+exports[`toDayJSLocaleMap [bg] returns a valid dayjs locale 1`] = `"bg"`;
+
+exports[`toDayJSLocaleMap [bn] returns a valid dayjs locale 1`] = `"bn"`;
+
+exports[`toDayJSLocaleMap [bo] returns a valid dayjs locale 1`] = `"bo"`;
+
+exports[`toDayJSLocaleMap [ca] returns a valid dayjs locale 1`] = `"ca"`;
+
+exports[`toDayJSLocaleMap [cs] returns a valid dayjs locale 1`] = `"cs"`;
+
+exports[`toDayJSLocaleMap [da] returns a valid dayjs locale 1`] = `"da"`;
+
+exports[`toDayJSLocaleMap [de] returns a valid dayjs locale 1`] = `"de"`;
+
+exports[`toDayJSLocaleMap [el] returns a valid dayjs locale 1`] = `"el"`;
+
+exports[`toDayJSLocaleMap [en] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [en-GB] returns a valid dayjs locale 1`] = `"en-gb"`;
+
+exports[`toDayJSLocaleMap [en-UK] returns a valid dayjs locale 1`] = `"en-gb"`;
+
+exports[`toDayJSLocaleMap [es] returns a valid dayjs locale 1`] = `"es"`;
+
+exports[`toDayJSLocaleMap [es-LA] returns a valid dayjs locale 1`] = `"es"`;
+
+exports[`toDayJSLocaleMap [es-MX] returns a valid dayjs locale 1`] = `"es-mx"`;
+
+exports[`toDayJSLocaleMap [es-US] returns a valid dayjs locale 1`] = `"es-us"`;
+
+exports[`toDayJSLocaleMap [et] returns a valid dayjs locale 1`] = `"et"`;
+
+exports[`toDayJSLocaleMap [eu] returns a valid dayjs locale 1`] = `"eu"`;
+
+exports[`toDayJSLocaleMap [fa] returns a valid dayjs locale 1`] = `"fa"`;
+
+exports[`toDayJSLocaleMap [fi] returns a valid dayjs locale 1`] = `"fi"`;
+
+exports[`toDayJSLocaleMap [fj] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [fr] returns a valid dayjs locale 1`] = `"fr"`;
+
+exports[`toDayJSLocaleMap [ga] returns a valid dayjs locale 1`] = `"ga"`;
+
+exports[`toDayJSLocaleMap [gu] returns a valid dayjs locale 1`] = `"gu"`;
+
+exports[`toDayJSLocaleMap [he] returns a valid dayjs locale 1`] = `"he"`;
+
+exports[`toDayJSLocaleMap [hi] returns a valid dayjs locale 1`] = `"hi"`;
+
+exports[`toDayJSLocaleMap [hr] returns a valid dayjs locale 1`] = `"hr"`;
+
+exports[`toDayJSLocaleMap [hu] returns a valid dayjs locale 1`] = `"hu"`;
+
+exports[`toDayJSLocaleMap [hy] returns a valid dayjs locale 1`] = `"hy-am"`;
+
+exports[`toDayJSLocaleMap [id] returns a valid dayjs locale 1`] = `"id"`;
+
+exports[`toDayJSLocaleMap [is] returns a valid dayjs locale 1`] = `"is"`;
+
+exports[`toDayJSLocaleMap [it] returns a valid dayjs locale 1`] = `"it"`;
+
+exports[`toDayJSLocaleMap [ja] returns a valid dayjs locale 1`] = `"ja"`;
+
+exports[`toDayJSLocaleMap [ka] returns a valid dayjs locale 1`] = `"ka"`;
+
+exports[`toDayJSLocaleMap [km] returns a valid dayjs locale 1`] = `"km"`;
+
+exports[`toDayJSLocaleMap [ko] returns a valid dayjs locale 1`] = `"ko"`;
+
+exports[`toDayJSLocaleMap [la] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [lt] returns a valid dayjs locale 1`] = `"lt"`;
+
+exports[`toDayJSLocaleMap [lv] returns a valid dayjs locale 1`] = `"lv"`;
+
+exports[`toDayJSLocaleMap [mi] returns a valid dayjs locale 1`] = `"mi"`;
+
+exports[`toDayJSLocaleMap [mk] returns a valid dayjs locale 1`] = `"mk"`;
+
+exports[`toDayJSLocaleMap [ml] returns a valid dayjs locale 1`] = `"ml"`;
+
+exports[`toDayJSLocaleMap [mn] returns a valid dayjs locale 1`] = `"mn"`;
+
+exports[`toDayJSLocaleMap [mr] returns a valid dayjs locale 1`] = `"mr"`;
+
+exports[`toDayJSLocaleMap [ms] returns a valid dayjs locale 1`] = `"ms"`;
+
+exports[`toDayJSLocaleMap [mt] returns a valid dayjs locale 1`] = `"mt"`;
+
+exports[`toDayJSLocaleMap [ne] returns a valid dayjs locale 1`] = `"ne"`;
+
+exports[`toDayJSLocaleMap [nl] returns a valid dayjs locale 1`] = `"nl"`;
+
+exports[`toDayJSLocaleMap [no] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [pa] returns a valid dayjs locale 1`] = `"pa-in"`;
+
+exports[`toDayJSLocaleMap [pl] returns a valid dayjs locale 1`] = `"pl"`;
+
+exports[`toDayJSLocaleMap [pt] returns a valid dayjs locale 1`] = `"pt"`;
+
+exports[`toDayJSLocaleMap [pt-BR] returns a valid dayjs locale 1`] = `"pt-br"`;
+
+exports[`toDayJSLocaleMap [qu] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [ro] returns a valid dayjs locale 1`] = `"ro"`;
+
+exports[`toDayJSLocaleMap [ru] returns a valid dayjs locale 1`] = `"ru"`;
+
+exports[`toDayJSLocaleMap [sk] returns a valid dayjs locale 1`] = `"sk"`;
+
+exports[`toDayJSLocaleMap [sl] returns a valid dayjs locale 1`] = `"sl"`;
+
+exports[`toDayJSLocaleMap [sm] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [sq] returns a valid dayjs locale 1`] = `"sq"`;
+
+exports[`toDayJSLocaleMap [sr] returns a valid dayjs locale 1`] = `"sr"`;
+
+exports[`toDayJSLocaleMap [sv] returns a valid dayjs locale 1`] = `"sv"`;
+
+exports[`toDayJSLocaleMap [sw] returns a valid dayjs locale 1`] = `"sw"`;
+
+exports[`toDayJSLocaleMap [ta] returns a valid dayjs locale 1`] = `"ta"`;
+
+exports[`toDayJSLocaleMap [te] returns a valid dayjs locale 1`] = `"te"`;
+
+exports[`toDayJSLocaleMap [th] returns a valid dayjs locale 1`] = `"th"`;
+
+exports[`toDayJSLocaleMap [to] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [tr] returns a valid dayjs locale 1`] = `"tr"`;
+
+exports[`toDayJSLocaleMap [tt] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [uk] returns a valid dayjs locale 1`] = `"uk"`;
+
+exports[`toDayJSLocaleMap [ur] returns a valid dayjs locale 1`] = `"ur"`;
+
+exports[`toDayJSLocaleMap [uz] returns a valid dayjs locale 1`] = `"uz"`;
+
+exports[`toDayJSLocaleMap [vi] returns a valid dayjs locale 1`] = `"vi"`;
+
+exports[`toDayJSLocaleMap [zh] returns a valid dayjs locale 1`] = `"zh"`;

package/appUtils/__tests__/allZappLocales.ts

@@ -0,0 +1,79 @@
+export default [
+  // common locales from https://rubygems.org/gems/language_list
+  "en",
+  "fr",
+  "de",
+  "nl",
+  "ru",
+  "es",
+  "he",
+  "hy",
+  "sq",
+  "af",
+  "ar",
+  "eu",
+  "bn",
+  "bg",
+  "zh",
+  "cs",
+  "km",
+  "ca",
+  "hr",
+  "da",
+  "et",
+  "fj",
+  "fi",
+  "gu",
+  "ka",
+  "hu",
+  "hi",
+  "it",
+  "is",
+  "id",
+  "ga",
+  "ja",
+  "ko",
+  "la",
+  "lv",
+  "lt",
+  "ms",
+  "mi",
+  "mn",
+  "mt",
+  "mk",
+  "el",
+  "mr",
+  "ml",
+  "ne",
+  "no",
+  "pa",
+  "pl",
+  "pt",
+  "fa",
+  "qu",
+  "ro",
+  "sk",
+  "sm",
+  "sr",
+  "sw",
+  "sv",
+  "sl",
+  "to",
+  "tr",
+  "th",
+  "te",
+  "bo",
+  "tt",
+  "ta",
+  "uk",
+  "ur",
+  "uz",
+  "vi",
+  // Extra locales https://github.com/applicaster/zapp/blob/5604794f15cfd270ae494b0db85e542de4cebfaa/config/additional_languages.yml
+  "en-UK",
+  "en-GB",
+  "es-LA",
+  "pt-BR",
+  "es-MX",
+  "es-US",
+];

package/appUtils/__tests__/{localizationsHelper.test.js → localizationsHelper.test.ts}

@@ -8,6 +8,7 @@ const {
   getLocale,
   getLanguageCode,
   getCountryCode,
+  toDayJSLocaleMap,
 } = require("../localizationsHelper");
 
 describe("getLocale", () => {
@@ -69,3 +70,13 @@ describe("getCountryCode", () => {
     expect(currentValue).toEqual(expectedValue);
   });
 });
+
+describe("toDayJSLocaleMap", () => {
+  const allZappLocales: string[] = require("./allZappLocales").default;
+
+  it.each(allZappLocales)("[%s] returns a valid dayjs locale", (locale) => {
+    const dayJSLocale = toDayJSLocaleMap(locale);
+    expect(dayJSLocale).toBeDefined();
+    expect(dayJSLocale).toMatchSnapshot();
+  });
+});

package/appUtils/accessibilityManager/const.ts

@@ -47,4 +47,22 @@ export const BUTTON_ACCESSIBILITY_KEYS = {
     label: "accessibility_fullscreen_label",
     hint: "accessibility_fullscreen_hint",
   },
+  // EPG-specific buttons
+  now: {
+    label: "accessibility_now_label",
+    hint: "accessibility_now_hint",
+  },
+  day: {
+    label: "accessibility_day_label",
+    hint: "accessibility_day_hint",
+  },
+  program: {
+    label: "accessibility_program_label",
+    hint: "accessibility_program_hint",
+  },
+  // Menu-specific buttons
+  menu_item: {
+    label: "accessibility_menu_item_label",
+    hint: "accessibility_menu_item_hint",
+  },
 } as const;

package/appUtils/accessibilityManager/index.ts

@@ -3,6 +3,7 @@ import { accessibilityManagerLogger as logger } from "./logger";
 import { TTSManager } from "../platform/platformUtils";
 import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
 import { AccessibilityRole } from "react-native";
+import _ from "lodash";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
@@ -135,7 +136,9 @@ export class AccessibilityManager {
     });
   }
 
-  public getButtonAccessibilityProps(buttonName: string): AccessibilityProps {
+  public getButtonAccessibilityProps(name: string): AccessibilityProps {
+    const buttonName = _.toString(name);
+
     const buttonConfig = BUTTON_ACCESSIBILITY_KEYS[buttonName];
 
     if (!buttonConfig) {

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -61,6 +61,7 @@ exports[`focusManagerIOS should be defined 1`] = `
   "getCurrentGroup": [Function],
   "getGroupById": [Function],
   "getGroupRootById": [Function],
+  "getPreferredFocusChild": [Function],
   "invokeHandler": [Function],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],

package/appUtils/focusManager/index.ios.ts

@@ -1,8 +1,10 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
+
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
+import { findChild } from "./utils";
 
 const { FocusableManagerModule } = NativeModules;
 
@@ -52,10 +54,7 @@ export const focusManager = (function () {
     const node = focusableTree.findInTree(groupId);
 
     if (node?.children?.length > 0) {
-      const preferredFocus = R.compose(
-        R.find(R.pathEq(["component", "props", "preferredFocus"], true)),
-        R.prop("children")
-      )(node);
+      const preferredFocus = findChild(true, node);
 
       if (preferredFocus?.component?.isGroup) {
         return getPreferredFocusInGroup({ groupId: preferredFocus?.id });
@@ -382,6 +381,16 @@ export const focusManager = (function () {
     forceFocusOnItem({ focusableItem, callback });
   }
 
+  function getPreferredFocusChild(id) {
+    const node = focusableTree.findInTree(id);
+
+    if (node?.children?.length > 0) {
+      return findChild(true, node) || findChild(false, node);
+    }
+
+    return node;
+  }
+
   return {
     on,
     invokeHandler,
@@ -402,5 +411,6 @@ export const focusManager = (function () {
     getCurrentGroup,
     getGroupRootById,
     isGroupItemFocused,
+    getPreferredFocusChild,
   };
 })();

package/appUtils/focusManager/utils/__tests__/findChild.test.ts

@@ -0,0 +1,35 @@
+import { findChild } from "../index";
+
+describe("findChild", () => {
+  const makeNode = (children = []) => ({ children });
+
+  const child = (preferredFocus: boolean) => ({
+    component: { props: { preferredFocus } },
+  });
+
+  it("returns the child with preferredFocus=true", () => {
+    const node = makeNode([child(false), child(true), child(false)]);
+    expect(findChild(true, node)).toBe(node.children[1]);
+  });
+
+  it("returns the child with preferredFocus=false", () => {
+    const node = makeNode([child(false), child(true), child(false)]);
+    expect(findChild(false, node)).toBe(node.children[0]);
+  });
+
+  it("returns undefined if no child matches preferredFocus", () => {
+    const node = makeNode([child(false), child(false)]);
+    expect(findChild(true, node)).toBeUndefined();
+  });
+
+  it("returns undefined if node has no children", () => {
+    const node = makeNode();
+    expect(findChild(true, node)).toBeUndefined();
+    expect(findChild(false, node)).toBeUndefined();
+  });
+
+  it("returns undefined if children is not an array", () => {
+    const node = { children: null };
+    expect(findChild(true, node)).toBeUndefined();
+  });
+});

package/appUtils/focusManager/utils/index.ts

@@ -98,3 +98,8 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export const findChild = (preferredFocus: boolean, node) =>
+  (node?.children || []).find(
+    (child) => child?.component?.props?.preferredFocus === preferredFocus
+  );

package/appUtils/localizationsHelper.ts

@@ -65,6 +65,12 @@ 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",
@@ -73,10 +79,12 @@ export const toDayJSLocaleMap = (code) => {
     no: null,
     pa: "pa-in",
     qu: null,
-    "es-LA": "es",
     sm: null,
     to: null,
     xh: null,
+    tt: null,
+    "es-LA": "es",
+    "en-UK": "en-gb",
   };
 
   if (map[code] === null) {
@@ -84,7 +92,7 @@ export const toDayJSLocaleMap = (code) => {
   } else if (map[code]) {
     return map[code];
   } else {
-    return code;
+    return code.toLowerCase();
   }
 };
 

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 };
 };