@applicaster/zapp-react-native-utils 13.0.0-rc.14 → 13.0.0-rc.141

package/reactHooks/player/TVSeekControlller/ISeekController.ts

@@ -0,0 +1,32 @@
+import { MAX_SEEK_TIME, SEEK_TYPE, SKIP_TIME_BASE } from "../const";
+
+export interface ISeekControllerDelegate {
+  handleDelayedSeek(offset: number): void;
+  handleSeek(offset: number): void;
+  handleSeekComplete(): void;
+  handlePlayerPause(): void;
+}
+
+export interface ISeekController {
+  title: string;
+  onStartSeek(seekType: SEEK_TYPE): void;
+  onSeekEnd(): void;
+  reset(): void;
+}
+
+export class SeekIncrementalBaseStrategy {
+  private skipMultiplier = 1;
+
+  getSkipTime = () =>
+    Math.min(MAX_SEEK_TIME, SKIP_TIME_BASE * this.skipMultiplier);
+
+  increment = () => {
+    this.skipMultiplier++;
+  };
+
+  getSkipMultiplier = () => this.skipMultiplier;
+
+  reset = () => {
+    this.skipMultiplier = 1;
+  };
+}

package/reactHooks/player/TVSeekControlller/LongPressSeekController.ts

@@ -0,0 +1,71 @@
+import {
+  ISeekController,
+  ISeekControllerDelegate,
+  SeekIncrementalBaseStrategy,
+} from "./ISeekController";
+import { SEEK_TYPE } from "../const";
+import { log_debug, log_error, log_verbose } from "./TVSeekController";
+import { interval, Subscription } from "rxjs";
+import { tap } from "rxjs/operators";
+
+interface LongPressConfig {
+  TIMER_INTERVAL_MS: number;
+}
+
+export class LongPressSeekController implements ISeekController {
+  private subscription: Subscription | null = null;
+  readonly title = "LongPressSeek";
+  constructor(
+    private seekControllerDelegate: ISeekControllerDelegate,
+    private seekIncrementalStrategy: SeekIncrementalBaseStrategy,
+    private config: LongPressConfig
+  ) {}
+
+  onStartSeek(seekType: SEEK_TYPE) {
+    this.cleanUpSubscription();
+
+    log_debug(`${this.title}: start long press seek type: ${seekType}.`);
+
+    this.seekControllerDelegate.handlePlayerPause();
+
+    this.subscription = interval(this.config.TIMER_INTERVAL_MS)
+      .pipe(
+        tap(() => {
+          this.seekControllerDelegate.handleDelayedSeek(
+            this.seekIncrementalStrategy.getSkipTime()
+          );
+
+          log_debug(
+            `${
+              this.title
+            }: handle delayed seek type: ${seekType} - multiplier: ${this.seekIncrementalStrategy.getSkipMultiplier()}, currentSkipAmount: ${this.seekIncrementalStrategy.getSkipTime()}.`
+          );
+
+          this.seekIncrementalStrategy.increment();
+        })
+      )
+      .subscribe({
+        complete: () =>
+          log_verbose(`${this.title}: Long press subscription complete`),
+        error: (err) =>
+          log_error(`${this.title}: Long press subscription error`, err),
+      });
+  }
+
+  onSeekEnd() {
+    this.cleanUpSubscription();
+    this.seekControllerDelegate.handleSeekComplete();
+  }
+
+  reset() {
+    this.seekIncrementalStrategy.reset();
+    this.cleanUpSubscription();
+  }
+
+  private cleanUpSubscription() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = null;
+    }
+  }
+}

package/reactHooks/player/TVSeekControlller/TVSeekController.ts

@@ -0,0 +1,258 @@
+import { BehaviorSubject } from "rxjs";
+import { TapSeekController } from "./TapSeekController";
+import { LongPressSeekController } from "./LongPressSeekController";
+import { SEEK_TYPE } from "../const";
+import { createLogger } from "../../../logger";
+import { Player } from "../../../appUtils/playerManager/player";
+import { SeekKeyHandlerListener } from "../../../appUtils/keyInputHandler/KeyInputHandler";
+import {
+  ISeekController,
+  ISeekControllerDelegate,
+  SeekIncrementalBaseStrategy,
+} from "./ISeekController";
+
+export const { log_warning, log_debug, log_info, log_error, log_verbose } =
+  createLogger({
+    category: "General",
+    subsystem: "TVSeekController",
+  });
+
+export enum SEEK_STRATEGY {
+  TAP_SEEK = "TAP_SEEK",
+  AUTO_SEEK = "AUTO_SEEK",
+}
+
+const CONFIG_TAP_SEEK = {
+  CLICKS_BEFORE_PAUSE: 0,
+};
+
+const CONFIG_LONG_PRESS = {
+  TIMER_INTERVAL_MS: 200,
+};
+
+const LONG_PRESS_THRESHOLD = 500;
+const SEEK_END_TIMEOUT_DURATION = 700;
+// prettier-ignore
+
+export class TVSeekController
+  implements SeekKeyHandlerListener, ISeekControllerDelegate {
+  public delayedSeekPosition: number | null = null;
+  private readonly playerController: Player;
+  private delayedSeekProgressSubject = new BehaviorSubject<number | null>(null);
+  isPlayerInitiallyPaused: null | boolean = null;
+  currentSeekType: SEEK_TYPE | null = null;
+
+  private currentSeekController: ISeekController;
+  private readonly tapSeekController: TapSeekController;
+  private readonly longPressSeekController: LongPressSeekController;
+  private longPressThresholdTimeout: any | null = null;
+  private seekEndTimeout: any | null = null;
+
+  constructor(playerController: Player) {
+    this.playerController = playerController;
+
+    this.tapSeekController = new TapSeekController(
+      this,
+      new SeekIncrementalBaseStrategy(),
+      CONFIG_TAP_SEEK
+    );
+
+    this.longPressSeekController = new LongPressSeekController(
+      this,
+      new SeekIncrementalBaseStrategy(),
+      CONFIG_LONG_PRESS
+    );
+
+    this.currentSeekController = this.tapSeekController;
+  }
+
+  getDelayedSeekProgressObservable = () => {
+    return this.delayedSeekProgressSubject;
+  };
+
+  setStrategy = (seekStrategy: SEEK_STRATEGY) => {
+    switch (seekStrategy) {
+      case SEEK_STRATEGY.TAP_SEEK:
+        this.currentSeekController = this.tapSeekController;
+        log_debug("TVSeekController: setStrategy - TAP_SEEK");
+
+        break;
+      case SEEK_STRATEGY.AUTO_SEEK:
+        this.currentSeekController = this.longPressSeekController;
+        log_debug("TVSeekController: setStrategy - AUTO_SEEK");
+
+        break;
+      default:
+    }
+  };
+
+  handleStartSeek = (seekType: SEEK_TYPE) => {
+    this.currentSeekType = seekType;
+
+    if (this.isPlayerInitiallyPaused === null) {
+      this.isPlayerInitiallyPaused = this.playerController.isPaused();
+    }
+
+    this.clearLongPressThresholdTimeout();
+    this.clearSeekCompleteTimeout();
+    this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
+    this.currentSeekController.onStartSeek(seekType);
+
+    this.longPressThresholdTimeout = setTimeout(() => {
+      this.setStrategy(SEEK_STRATEGY.AUTO_SEEK);
+      this.currentSeekController.onStartSeek(seekType);
+    }, LONG_PRESS_THRESHOLD);
+  };
+
+  onForwardPress = (): boolean => {
+    this.handleStartSeek(SEEK_TYPE.FORWARD);
+
+    return true;
+  };
+
+  onRewindPress = (): boolean => {
+    this.handleStartSeek(SEEK_TYPE.REWIND);
+
+    return true;
+  };
+
+  onSeekEnd = () => {
+    this.clearLongPressThresholdTimeout();
+    this.currentSeekController.onSeekEnd();
+  };
+
+  onRewindPressOut = () => {
+    this.onSeekEnd();
+  };
+
+  onForwardPressOut = () => {
+    this.onSeekEnd();
+  };
+
+  onVideoProgress = (position: number) => {
+    if (this.delayedSeekPosition !== null) {
+      return;
+    }
+
+    this.delayedSeekProgressSubject.next(position);
+  };
+
+  handleDelayedSeek = (offset: number = 0) => {
+    this.handlePlayerPause();
+
+    const currentPos =
+      this.delayedSeekPosition === null
+        ? this.playerController.getPosition()
+        : this.delayedSeekPosition;
+
+    let targetPos = currentPos;
+
+    if (this.currentSeekType === SEEK_TYPE.FORWARD) {
+      targetPos = Math.min(
+        currentPos + offset,
+        this.playerController.getSeekableDuration()
+      );
+    } else if (this.currentSeekType === SEEK_TYPE.REWIND) {
+      targetPos = Math.max(0, currentPos - offset);
+    } else {
+      log_warning(
+        `TVSeekController: handleDelayedSeek - invalid seek type: ${this.currentSeekType}`
+      );
+    }
+
+    log_debug(
+      `TVSeekController: handleDelayedSeek - targetPos: ${targetPos}, skipTime: ${offset}`
+    );
+
+    const prevValue = this.delayedSeekProgressSubject.getValue();
+
+    if (prevValue !== null) {
+      const delta = Math.abs(prevValue - targetPos);
+
+      if (delta < 1) {
+        return;
+      }
+    }
+
+    this.delayedSeekPosition = targetPos;
+    this.delayedSeekProgressSubject.next(targetPos);
+  };
+
+  handleSeekTo = (newPosition: number) => {
+    this.playerController.seekTo(newPosition);
+
+    if (!this.isPlayerInitiallyPaused) {
+      this.playerController.play();
+    }
+  };
+
+  handleSeek = (offset: number) => {
+    this.playerController[this.currentSeekType](offset);
+
+    if (!this.isPlayerInitiallyPaused) {
+      this.playerController.play();
+    }
+  };
+
+  handleSeekComplete = () => {
+    this.clearSeekCompleteTimeout();
+
+    this.seekEndTimeout = setTimeout(() => {
+      if (this.delayedSeekPosition !== null) {
+        this.handleSeekTo(this.delayedSeekPosition);
+      }
+
+      log_debug(
+        `handleSeekComplete: Seek finished, type: ${this.currentSeekController.title}, seekPosition: ${this.delayedSeekPosition}. Reset all states and seek position.`
+      );
+
+      this.resetAll();
+    }, SEEK_END_TIMEOUT_DURATION);
+  };
+
+  isSeeking = (): boolean => {
+    return this.delayedSeekPosition !== null;
+  };
+
+  handlePlayerPause = () => {
+    if (this.playerController.isPaused()) {
+      return;
+    }
+
+    this.playerController.pause();
+  };
+
+  clearSeekCompleteTimeout = () => {
+    if (this.seekEndTimeout === null) {
+      return;
+    }
+
+    clearTimeout(this.seekEndTimeout);
+    this.seekEndTimeout = null;
+  };
+
+  clearLongPressThresholdTimeout = () => {
+    if (this.longPressThresholdTimeout === null) {
+      return;
+    }
+
+    clearTimeout(this.longPressThresholdTimeout);
+    this.longPressThresholdTimeout = null;
+  };
+
+  resetAll() {
+    log_debug("TVSeekController: Reset all states");
+    this.currentSeekType = null;
+
+    this.delayedSeekPosition = null;
+    this.isPlayerInitiallyPaused = null;
+
+    this.clearSeekCompleteTimeout();
+    this.clearLongPressThresholdTimeout();
+
+    this.tapSeekController.reset();
+    this.longPressSeekController.reset();
+
+    this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
+  }
+}

package/reactHooks/player/TVSeekControlller/TapSeekController.ts

@@ -0,0 +1,53 @@
+import {
+  ISeekController,
+  ISeekControllerDelegate,
+  SeekIncrementalBaseStrategy,
+} from "./ISeekController";
+import { SEEK_TYPE } from "../const";
+import { log_debug } from "./TVSeekController";
+
+interface TapPressConfig {
+  CLICKS_BEFORE_PAUSE: number;
+}
+
+export class TapSeekController implements ISeekController {
+  readonly title = "TapSeek";
+  constructor(
+    private seekControllerDelegate: ISeekControllerDelegate,
+    private seekIncrementalStrategy: SeekIncrementalBaseStrategy,
+    private config: TapPressConfig
+  ) {}
+
+  onStartSeek = (seekType: SEEK_TYPE) => {
+    log_debug(`${this.title}: start tap seek type: ${seekType}.`);
+
+    const skipTime = this.seekIncrementalStrategy.getSkipTime();
+    const seekMultiplier = this.seekIncrementalStrategy.getSkipMultiplier();
+
+    if (seekMultiplier > this.config.CLICKS_BEFORE_PAUSE) {
+      log_debug(
+        `${this.title}: handle delayed seek type:${seekType} - skipTime: ${skipTime}, seekMultiplier: ${seekMultiplier}.`
+      );
+
+      this.seekControllerDelegate.handleDelayedSeek(skipTime);
+    } else {
+      log_debug(
+        `${this.title}: handle seek type:${seekType} - skipTime: ${skipTime}.`
+      );
+
+      this.seekControllerDelegate.handleSeek(skipTime);
+    }
+
+    this.seekIncrementalStrategy.increment();
+  };
+
+  onSeekEnd = () => {
+    this.seekControllerDelegate.handleSeekComplete();
+  };
+
+  reset = () => {
+    log_debug("{this.title}: Reset states");
+
+    this.seekIncrementalStrategy.reset();
+  };
+}

package/reactHooks/player/__tests__/{useAutoSeek.test.tsx → useAutoSeek._test.tsx}

@@ -5,15 +5,14 @@ import { ON_HOLD_INTERVAL, SEEK_TYPE, SKIP_TIME_BASE } from "../const";
 
 import { useAutoSeek } from "../useAutoSeek";
 
-jest.useFakeTimers();
+jest.useFakeTimers({ legacyFakeTimers: true });
 
 const rewind = jest.fn();
 const forward = jest.fn();
 
 jest
   .spyOn(playerManager, "getInstanceController")
-  // @ts-ignore
-  .mockImplementation(() => ({ rewind, forward }));
+  .mockReturnValue({ rewind, forward });
 
 describe("useAutoSeek", () => {
   beforeEach(() => {

package/reactHooks/player/const.ts

@@ -1,9 +1,5 @@
 export const SKIP_TIME_BASE = 10;
 
-export const ON_PRESS_RESET_DURATION = 2000;
-
-export const ON_HOLD_INTERVAL = 500;
-
 export const MAX_SEEK_TIME = 600;
 
 export enum SEEK_TYPE {

package/reactHooks/player/index.ts

@@ -1,7 +1 @@
 export { useLanguageData } from "./useLanguageData";
-
-export { useAutoSeek } from "./useAutoSeek";
-
-export { useTapSeek } from "./useTapSeek";
-
-export { useSeek, withUseSeek } from "./useSeek";

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

@@ -0,0 +1,69 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",
+  () => ({
+    useScreenConfiguration: jest.fn(),
+  })
+);
+
+const {
+  useScreenConfiguration,
+} = require("@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration");
+
+const { useScreenBackgroundColor } = require("../useScreenBackgroundColor");
+
+describe("useScreenBackgroundColor", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return the background color from screen configuration", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: "#FF0000",
+    });
+
+    // Render the hook with a screen ID
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("#FF0000");
+
+    expect(useScreenConfiguration).toHaveBeenCalledWith("test-screen-id");
+  });
+
+  it("should return 'transparent' when background color is empty", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: "",
+    });
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+
+  it("should return 'transparent' when background color is null", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: null,
+    });
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+
+  it("should return 'transparent' when background color is undefined", () => {
+    useScreenConfiguration.mockReturnValue({});
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+});

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -1,23 +1,11 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 
+const DEFAULT_BACKGROUND_FALLBACK = "transparent";
+
 export const useScreenBackgroundColor = (screenId: string): string => {
   const { backgroundColor: screenBackgroundColor } =
     useScreenConfiguration(screenId);
 
-  const theme = useTheme();
-
-  const themeBackgroundColor = React.useMemo(
-    () => theme.app_background_color,
-    [theme.app_background_color]
-  );
-
-  const backgroundColor = ifEmptyUseFallback(
-    screenBackgroundColor,
-    themeBackgroundColor
-  );
-
-  return backgroundColor;
+  return ifEmptyUseFallback(screenBackgroundColor, DEFAULT_BACKGROUND_FALLBACK);
 };

package/reactHooks/state/README.md

@@ -0,0 +1,79 @@
+# ZStoreProvider and useZStore
+
+This module provides a React context-based solution for managing Zustand stores with named access.
+
+## Usage
+
+### ZStoreProvider
+
+The `ZStoreProvider` component creates a Zustand store from the provided value and makes it available to child components.
+
+```tsx
+import { ZStoreProvider } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+
+// In your component
+<ZStoreProvider name="playerConfiguration" value={controller?.config}>
+  <YourComponent />
+</ZStoreProvider>
+```
+
+### useZStore
+
+The `useZStore` hook allows you to access a Zustand store by name from within a `ZStoreProvider`.
+
+```tsx
+import { useZStore } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { useStore } from "zustand";
+
+// In your component
+const MyComponent = () => {
+  const store = useZStore("playerConfiguration");
+  const config = useStore(store, (state) => state.someProperty);
+  
+  return <Text>{config}</Text>;
+};
+```
+
+## Example
+
+```tsx
+import React from "react";
+import { ZStoreProvider, useZStore } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { useStore } from "zustand";
+
+// Component that uses the store
+const PlayerConfigDisplay = () => {
+  const store = useZStore("playerConfiguration");
+  const config = useStore(store, (state) => state);
+  
+  return (
+    <View>
+      <Text>Player Config: {JSON.stringify(config)}</Text>
+    </View>
+  );
+};
+
+// Main component that provides the store
+const PlayerComponent = ({ controller }) => {
+  return (
+    <ZStoreProvider name="playerConfiguration" value={controller?.config}>
+      <PlayerConfigDisplay />
+    </ZStoreProvider>
+  );
+};
+```
+
+## Features
+
+- **Named Stores**: Access stores by name instead of importing them directly
+- **Context-based**: Uses React Context for store management
+- **Zustand Integration**: Seamlessly works with existing Zustand stores
+- **Type Safety**: Full TypeScript support
+- **Error Handling**: Clear error messages when stores are not found or used outside providers
+
+## Error Handling
+
+The `useZStore` hook will throw errors in the following cases:
+
+1. **Used outside provider**: "useZStore must be used within a ZStoreProvider"
+2. **Store not found**: "Store with name 'storeName' not found. Make sure it's provided by a ZStoreProvider" 

package/reactHooks/state/ZStoreProvider.tsx

@@ -0,0 +1,71 @@
+import React, { createContext, useContext, ReactNode, useMemo } from "react";
+import { create, UseBoundStore } from "zustand";
+
+interface ZStoreContextType {
+  stores: Map<string, UseBoundStore<any>>;
+  registerStore: (name: string, store: UseBoundStore<any>) => void;
+  getStore: (name: string) => UseBoundStore<any> | undefined;
+}
+
+const ZStoreContext = createContext<ZStoreContextType | null>(null);
+
+interface ZStoreProviderProps {
+  children: ReactNode;
+  name: string;
+  value: any;
+}
+
+export const ZStoreProvider: React.FC<ZStoreProviderProps> = ({
+  children,
+  name,
+  value,
+}) => {
+  const parentContext = useContext(ZStoreContext);
+
+  const context = useMemo(() => {
+    if (parentContext) {
+      // If parent context exists, create a new store and register it
+      const store = create(() => value);
+      parentContext.registerStore(name, store);
+
+      return parentContext;
+    }
+
+    // Create a new context if none exists
+    const stores = new Map<string, UseBoundStore<any>>();
+
+    // Create a store from the provided value
+    const store = create(() => value);
+    stores.set(name, store);
+
+    return {
+      stores,
+      registerStore: (storeName: string, storeInstance: UseBoundStore<any>) => {
+        stores.set(storeName, storeInstance);
+      },
+      getStore: (storeName: string) => stores.get(storeName),
+    };
+  }, [parentContext, name, value]);
+
+  return (
+    <ZStoreContext.Provider value={context}>{children}</ZStoreContext.Provider>
+  );
+};
+
+export const useZStore = (name: string): UseBoundStore<any> => {
+  const context = useContext(ZStoreContext);
+
+  if (!context) {
+    throw new Error("useZStore must be used within a ZStoreProvider");
+  }
+
+  const store = context.getStore(name);
+
+  if (!store) {
+    throw new Error(
+      `Store with name "${name}" not found. Make sure it's provided by a ZStoreProvider.`
+    );
+  }
+
+  return store;
+};