@applicaster/zapp-react-native-utils 12.0.2-rc.0 → 13.0.0-alpha.1552112220

package/functionUtils/index.ts

@@ -111,12 +111,12 @@ type SubscriberFn<T> = (
 
 export type EventHandlerFn<T> = (event: string, ...args: unknown[]) => T;
 
-type SubscriberObj = Partial<{
-  on?: SubscriberFn<SubscriberObj>;
-  invokeHandler: EventHandlerFn<SubscriberObj>;
-  removeHandler: EventHandlerFn<SubscriberObj>;
-  handlers: Record<string, SubscriberFn<SubscriberObj>[] | []>;
-}>;
+export type SubscriberObj<T extends {} = {}> = {
+  on: SubscriberFn<SubscriberObj<T>>;
+  invokeHandler: EventHandlerFn<SubscriberObj<T>>;
+  removeHandler: EventHandlerFn<SubscriberObj<T>>;
+  handlers: Record<string, SubscriberFn<SubscriberObj<T>>[] | []>;
+} & T;
 
 export const clearObject = (object: { [key: string]: unknown }) =>
   Object.keys(object).forEach((key) => delete object[key]);
@@ -126,7 +126,11 @@ export const clearObject = (object: { [key: string]: unknown }) =>
  * @param {Object} obj to add the subscription feature on
  * @returns {Object} subscriber object
  */
-export function subscriber(obj: SubscriberObj = {}): SubscriberObj {
+export function subscriber<T extends Partial<SubscriberObj> = {}>(
+  _obj: T = {} as T
+): SubscriberObj {
+  const obj: T = _obj;
+
   if (!obj.handlers) {
     obj.handlers = {};
   }
@@ -172,7 +176,7 @@ export function subscriber(obj: SubscriberObj = {}): SubscriberObj {
       | SubscriberFn<SubscriberObj>[]
       | [];
 
-    return obj;
+    return obj as SubscriberObj;
   };
 
   /**
@@ -188,16 +192,16 @@ export function subscriber(obj: SubscriberObj = {}): SubscriberObj {
 
     R.compose(R.forEach(callHandlerWithDispose), R.propOr([], event))(handlers);
 
-    return obj;
+    return obj as SubscriberObj;
   };
 
   obj.removeHandler = function (event, handler) {
     handlers[event] = R.reject(R.equals(handler), handlers[event]);
 
-    return obj;
+    return obj as SubscriberObj;
   };
 
-  return obj;
+  return obj as SubscriberObj;
 }
 
 /**

package/modalState/index.ts

@@ -31,11 +31,7 @@ export const useModalStore = create<ModalStore>((set) => ({
     set((state) => ({
       modalState: { ...state.modalState, ...newState },
     })),
-  openModal: ({
-    item,
-    options = {},
-    props = { screenData: {} },
-  }: OpenModalArg) =>
+  openModal: ({ item, options = {}, props }: OpenModalArg) =>
     set({
       modalState: {
         visible: true,

package/navigationUtils/index.ts

@@ -324,7 +324,13 @@ export function getPathAttributes({
  * @param {object} rivers
  * @returns {object}
  */
-export function getRiverFromRoute({ route, rivers }) {
+export function getRiverFromRoute({
+  route,
+  rivers,
+}: {
+  route: string;
+  rivers: Record<string, ZappRiver>;
+}) {
   if (!route) {
     return null;
   }
@@ -437,7 +443,7 @@ export const runZappHooksForEntry = async (
 
   let success;
   let payload;
-  const rivers = appStore.get("rivers");
+  const rivers: Record<string, ZappRiver> = appStore.get("rivers");
   const plugins = appStore.get("plugins");
   const appData = appStore.get("appData");
 
@@ -492,13 +498,16 @@ export const runZappHooksForEntry = async (
       payload = _payload;
     };
 
-  HooksManager(hooksOptions)
+  const hooksManager = HooksManager(hooksOptions);
+
+  hooksManager.subscriber
     .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
     .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
     .on(HOOKS_EVENTS.ERROR, onFinished(false))
     .on(HOOKS_EVENTS.CANCEL, onFinished(false))
-    .on(HOOKS_EVENTS.COMPLETE, onFinished(true))
-    .handleHooks(entry);
+    .on(HOOKS_EVENTS.COMPLETE, onFinished(true));
+
+  hooksManager.handleHooks(entry);
 
   // eslint-disable-next-line no-unmodified-loop-condition
   while (success === undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.2-rc.0",
+  "version": "13.0.0-alpha.1552112220",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.2-rc.0",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1552112220",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/navigation/index.ts

@@ -320,16 +320,19 @@ export const useZappHooksForEntry = (
         callbacks?.handleHookComplete?.(props);
       };
 
-      const hookManager = HooksManager(hooksOptions)
+      const hookManager = HooksManager(hooksOptions);
+
+      hookManager.subscriber
         .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
         .on(HOOKS_EVENTS.ERROR, handleHookError)
         .on(HOOKS_EVENTS.CANCEL, handleHookCancel)
         .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
-        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete)
-        .handleHooks(entry);
+        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete);
+
+      hookManager.handleHooks(entry);
 
       return () => {
-        hookManager
+        hookManager.subscriber
           .removeHandler(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
           .removeHandler(HOOKS_EVENTS.ERROR, handleHookError)
           .removeHandler(HOOKS_EVENTS.CANCEL, handleHookCancel)

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;
+
+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.currentSeekController.onSeekEnd();
+    this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
+  };
+
+  onRewindPressOut = () => {
+    this.onSeekEnd();
+  };
+
+  onForwardPressOut = () => {
+    this.onSeekEnd();
+  };
+
+  public 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/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/reactUtils/index.ts

@@ -109,20 +109,6 @@ export const isTvOSPlatform = () => getPlatform() === "tvos";
 
 export const isAndroidTVPlatform = () => getPlatform() === "android_tv";
 
-declare global {
-  interface Window {
-    VIZIO?: {
-      Chromevox: {
-        play: (text: string) => void;
-      };
-      exitApplication: () => void;
-      setClosedCaptionHandler: (
-        callback: (isCCEnabled: boolean) => void
-      ) => void;
-    };
-  }
-}
-
 /**
  * Platforms found in userAgent string, please note that simulators
  * might not have the same agents that the devices have

package/appUtils/keyCodes/keys.ios.js

@@ -1,46 +0,0 @@
-/* global tizen */
-const isTizen = typeof tizen !== "undefined";
-
-export const KEYS = {
-  Enter: { code: "Enter", keyCode: 13 },
-  Space: { code: "Space", keyCode: 32 },
-  m: { code: "m", keyCode: 77 },
-  ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
-  ArrowUp: { code: "ArrowUp", keyCode: 38 },
-  ArrowRight: { code: "ArrowRight", keyCode: 39 },
-  ArrowDown: { code: "ArrowDown", keyCode: 40 },
-  Back: isTizen
-    ? { code: "Back", keyCode: 10009 }
-    : { code: "Backspace", keyCode: 8 },
-  Play: isTizen
-    ? { code: "MediaPlay", keyCode: 10252 }
-    : { code: "PlayPause", keyCode: 179 },
-  Pause: isTizen
-    ? { code: "MediaPause", keyCode: 19 }
-    : { code: "Pause", keyCode: 179 },
-  Forward: isTizen
-    ? { code: "MediaFastForward", keyCode: 417 }
-    : { code: "Forward", keyCode: 176 },
-  Rewind: isTizen
-    ? { code: "MediaRewind", keyCode: 412 }
-    : { code: "Rewind", keyCode: 177 },
-  VolumeUp: isTizen
-    ? { code: "VolumeUp", keyCode: 447 }
-    : { code: "VolumeUp", keyCode: 175 },
-  VolumeDown: isTizen
-    ? { code: "VolumeDown", keyCode: 448 }
-    : { code: "VolumeDown", keyCode: 174 },
-  ToggleMute: isTizen
-    ? { code: "VolumeMute", keyCode: 449 }
-    : { code: "VolumeMute", keyCode: 173 },
-  Stop: isTizen
-    ? { code: "MediaStop", keyCode: 413 }
-    : { code: "Q", keyCode: 81 },
-};
-
-export const ARROW_KEYS = [
-  KEYS.ArrowUp,
-  KEYS.ArrowLeft,
-  KEYS.ArrowDown,
-  KEYS.ArrowRight,
-];