@applicaster/zapp-react-dom-app 13.0.0-alpha.4750811552 → 13.0.0-alpha.5281161050

package/App/InteractionManager/index.tsx

@@ -23,6 +23,8 @@ import {
 
 import { showConfirmationDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
 
+import { withUseSeek } from "@applicaster/zapp-react-native-utils/reactHooks/player";
+
 import {
   DISPLAY_STATES,
   DisplayStateContext,
@@ -46,7 +48,6 @@ import {
 
 import { OnScreenKeyboard } from "@applicaster/zapp-react-dom-ui-components/Components/OnScreenKeyboard";
 import { KeyboardLongPressManager } from "@applicaster/zapp-react-dom-ui-components/Utils/KeyboardLongPressManager";
-import { KeyInputHandler } from "@applicaster/zapp-react-native-utils/appUtils/keyInputHandler/KeyInputHandler";
 
 const { withXray } = getXray();
 const globalAny: any = global;
@@ -61,6 +62,14 @@ type Props = {
   navigator: QuickBrickAppNavigator;
   rivers: {};
   xray: XRayContext;
+  seekMethods: {
+    onRewindPress: () => void;
+    onRewindLongPress: () => void;
+    onForwardPress: () => void;
+    onForwardLongPress: () => void;
+    onRewindPressOut: () => void;
+    onForwardPressOut: () => void;
+  };
   confirmDialog: typeof confirmationDialogStore;
 };
 
@@ -172,11 +181,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
     window.addEventListener("onLongPress", this.handleLongPress.bind(this));
 
-    window.addEventListener(
-      "onPressRelease",
-      this.handleLongPressRelease.bind(this)
-    );
-
     window.addEventListener(
       "onLongPressRelease",
       this.handleLongPressRelease.bind(this)
@@ -335,34 +339,9 @@ class InteractionManagerClass extends React.Component<Props, State> {
   }
 
   onKeyUp(event: KeyboardEvent) {
-    const { setDisplayState } = this.props;
-
     if (this.keySupportsLongPress(event)) {
       this.longPressDetector.endKeyPressMonitoring(event.code);
     }
-
-    if (
-      keyCode(event).matches(KEYS.Enter) ||
-      (__DEV__ && keyCode(event).matches(KEYS.X))
-    ) {
-      focusManager.pressOut();
-    }
-
-    if (
-      keyCode(event).matches(KEYS.Forward) ||
-      (__DEV__ && keyCode(event).matches(KEYS.C))
-    ) {
-      setDisplayState(DISPLAY_STATES.HUD);
-      KeyInputHandler.getInstance().onForwardPressOut();
-    }
-
-    if (
-      keyCode(event).matches(KEYS.Rewind) ||
-      (__DEV__ && keyCode(event).matches(KEYS.Z))
-    ) {
-      setDisplayState(DISPLAY_STATES.HUD);
-      KeyInputHandler.getInstance().onRewindPressOut();
-    }
   }
 
   onKeyDown(event) {
@@ -393,7 +372,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
      When the player is displayed, we listen to Native Play / Pause / Stop
      buttons. Any other key press will display the transport controls
      */
-
     if (
       displayState === DISPLAY_STATES.PLAYER ||
       displayState === DISPLAY_STATES.HUD
@@ -426,22 +404,16 @@ class InteractionManagerClass extends React.Component<Props, State> {
         return;
       }
 
-      if (
-        keyCode(event).matches(KEYS.Forward) ||
-        (__DEV__ && keyCode(event).matches(KEYS.C))
-      ) {
+      if (keyCode(event).matches(KEYS.Forward)) {
         setDisplayState(DISPLAY_STATES.HUD);
-        KeyInputHandler.getInstance().onForwardPress();
+        this.props.seekMethods.onForwardPress();
 
         return;
       }
 
-      if (
-        keyCode(event).matches(KEYS.Rewind) ||
-        (__DEV__ && keyCode(event).matches(KEYS.Z))
-      ) {
+      if (keyCode(event).matches(KEYS.Rewind)) {
         setDisplayState(DISPLAY_STATES.HUD);
-        KeyInputHandler.getInstance().onRewindPress();
+        this.props.seekMethods.onRewindPress();
 
         return;
       }
@@ -479,7 +451,9 @@ class InteractionManagerClass extends React.Component<Props, State> {
             const isHookInHomescreen = entryData?.payload?.home;
 
             const isHookFlowBlocker =
-              entryData?.hookPlugin?.module?.isFlowBlocker();
+              typeof entryData?.hookPlugin?.module?.isFlowBlocker === "function"
+                ? entryData?.hookPlugin?.module?.isFlowBlocker()
+                : entryData?.hookPlugin?.module?.isFlowBlocker;
 
             if (isHookInHomescreen && isHookFlowBlocker) {
               this.platformBack();
@@ -501,10 +475,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
       }
     }
 
-    if (
-      keyCode(event).matches(KEYS.Enter) ||
-      (__DEV__ && keyCode(event).matches(KEYS.X))
-    ) {
+    if (keyCode(event).matches(KEYS.Enter)) {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
       } else {
@@ -719,43 +690,54 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }, SEQUENCE_ENTRY_TIME);
   }
 
-  // TODO: Delete it on next PR if not needed
   private handleLongPress = (event: CustomEvent) => {
     const { keyCode } = event.detail;
+    const { displayState } = this.props;
+    const playerState = displayState === DISPLAY_STATES.PLAYER;
+    const hudState = displayState === DISPLAY_STATES.HUD;
+    const playbackState = playerState || hudState;
     this.longPressActive = true;
     this.cancelHudTimeout();
 
     switch (keyCode) {
+      case KEYS.Forward.code:
+        playbackState && this.props.seekMethods.onForwardLongPress();
+        break;
+
+      case KEYS.Rewind.code:
+        playbackState && this.props.seekMethods.onRewindLongPress();
+        break;
+
       case KEYS.Enter.code:
-      case KEYS.X.code:
         focusManager.longPress();
         break;
     }
   };
 
-  // TODO: Delete it on next PR if not needed
   private handleLongPressRelease = (event: CustomEvent) => {
     const { keyCode } = event.detail;
     this.longPressActive = false;
     this.resetHudTimeout();
 
     switch (keyCode) {
+      case KEYS.Forward.code:
+        this.props.seekMethods.onForwardPressOut();
+        break;
+
+      case KEYS.Rewind.code:
+        this.props.seekMethods.onRewindPressOut();
+        break;
+
       case KEYS.Enter.code:
-      case KEYS.X.code:
-        // focusManager.pressOut();
+        focusManager.pressOut();
         break;
     }
   };
 
   private keySupportsLongPress(event: KeyboardEvent): boolean {
-    return [
-      KEYS.Forward.code,
-      KEYS.Rewind.code,
-      KEYS.Enter.code,
-      KEYS.Z.code,
-      KEYS.X.code,
-      KEYS.C.code,
-    ].includes(event.code);
+    return [KEYS.Forward.code, KEYS.Rewind.code, KEYS.Enter.code].includes(
+      event.code
+    );
   }
 
   render() {
@@ -774,6 +756,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
 export const InteractionManager = R.compose(
   withNavigator,
+  withUseSeek,
   withXray,
   connectToStore(R.pick(["rivers"])),
   PlayerContentContext.withConsumer,

package/App/Loader/utils/platform.js

@@ -11,11 +11,28 @@ import {
   PLATFORMS,
 } from "./const";
 
+/**
+ * @typedef {"tv" | "web" | "other"} DeviceType
+ * @typedef {"samsung_tv" | "lg_tv" | unknown} CustomPlatformTypes
+ */
+
+/**
+ * Retrieves the user agent string from the browser or global navigator.
+ * @returns {string} The user agent string.
+ */
 export const getUserAgent = () =>
   window?.navigator?.userAgent || global?.navigator?.userAgent;
 
+/**
+ * Checks if the device is HD (1280 width).
+ * @returns {boolean} True if the device is HD, false otherwise.
+ */
 export const isHD = () => window.innerWidth === 1280;
 
+/**
+ * Checks if the platform is LG.
+ * @returns {boolean} True if the platform is LG, false otherwise.
+ */
 export const isLgPlatform = () => {
   const userAgent = getUserAgent();
 
@@ -23,10 +40,13 @@ export const isLgPlatform = () => {
     return false;
   }
 
-  // Note: LG uses the number 0 in their userAgent, possibly because of Palm WebOS
   return hasWebOS || userAgent.includes(PLATFORMS.webos);
 };
 
+/**
+ * Checks if the platform is Samsung.
+ * @returns {boolean} True if the platform is Samsung, false otherwise.
+ */
 export const isSamsungPlatform = () => {
   const userAgent = getUserAgent();
 
@@ -42,42 +62,39 @@ export const isSamsungPlatform = () => {
 };
 
 /**
- * Checks if we are on the Vizio platform by using the userAgent string
- *
- * Use this method when you need to identify the platform on runtime
- * before the VIZIO Companion Library has loaded
+ * Checks if the platform is Vizio by using the user agent string.
+ * @returns {boolean} True if the platform is Vizio, false otherwise.
  */
 export const isVizioPlatform = () => {
   const userAgent = getUserAgent();
 
-  const isVizioAgent =
+  return (
     userAgent.includes(PLATFORMS.vizio) ||
     userAgent.includes(PLATFORMS.smartcast) ||
-    userAgent.includes(PLATFORMS.conjure);
-
-  return isVizioAgent;
+    userAgent.includes(PLATFORMS.conjure)
+  );
 };
 
 /**
- * Checks if we are on the Vizio platform by checking for the global VIZIO object
- * and the VIZIO Companion Library. This method does not use the userAgent string,
- * because it mainly checks whether we have access to apis, which may not be available yet
+ * Checks if the Vizio APIs are available.
+ * @returns {boolean} True if the Vizio APIs are available, false otherwise.
  */
 export const hasVizioAPIs = () => {
-  const hasAPIs =
+  return (
     typeof window.VIZIO !== "undefined" &&
-    window?.applicaster?.vizioLibraryDidLoad;
-
-  return hasAPIs;
+    window?.applicaster?.vizioLibraryDidLoad
+  );
 };
 
 /**
- * platformSelect can't be used, because Platform.OS is overriden
- * by overloadReactNativePlatform and don't support 'web' value
- * @returns {"tv" | "web" | "other"} value
+ * Determines the device type based on the platform.
+ * @returns {DeviceType} The device type ("tv", "web", or "other").
  */
 export const getDeviceType = () => {
-  switch (Platform.OS) {
+  /** @type {CustomPlatformTypes} */
+  const platformOS = Platform.OS;
+
+  switch (platformOS) {
     case "samsung_tv":
       return isSamsungPlatform() ? "tv" : "web";
     case "lg_tv":
@@ -88,14 +105,15 @@ export const getDeviceType = () => {
 };
 
 /**
- * This function is used to rename keys
- * @param {string} key - key you would like to rename
+ * Renames keys based on a predefined map.
+ * @param {string} key - The key to rename.
+ * @returns {string} The renamed key.
  */
 export const renameKeys = (key) => desiredKeysMap?.[key] || key;
 
 /**
- * This function is used to get the connection info from WebOS
- * TODO: move to connection hook
+ * Retrieves the connection info from WebOS.
+ * @returns {Promise<{networkType: string} | null>} A promise that resolves with the connection info or null.
  */
 export const getWebOSConnectionInfo = () => {
   return new Promise((resolve, reject) => {
@@ -108,7 +126,6 @@ export const getWebOSConnectionInfo = () => {
     webOS.service.request("luna://com.palm.connectionmanager", {
       method: "getStatus",
       parameters: { subscribe: false },
-
       onSuccess: (args) => {
         const types = Object.keys(args)
           .filter((key) => args[key].state === "connected")
@@ -116,7 +133,6 @@ export const getWebOSConnectionInfo = () => {
 
         resolve({ networkType: types });
       },
-
       onFailure: (error) => {
         console.error(
           "getWebOSConnectionInfo: There was an error getting connection info",
@@ -129,6 +145,10 @@ export const getWebOSConnectionInfo = () => {
   });
 };
 
+/**
+ * Retrieves the connection info from Tizen.
+ * @returns {Promise<{networkType: string} | null>} A promise that resolves with the connection info or null.
+ */
 export const getTizenConnectionInfo = () => {
   return new Promise((resolve, reject) => {
     if (!isSamsungPlatform) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "13.0.0-alpha.4750811552",
+  "version": "13.0.0-alpha.5281161050",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "13.0.0-alpha.4750811552",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.4750811552",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.4750811552",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.4750811552",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.4750811552",
+    "@applicaster/zapp-react-dom-ui-components": "13.0.0-alpha.5281161050",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.5281161050",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.5281161050",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.5281161050",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5281161050",
     "abortcontroller-polyfill": "^1.7.5",
     "history": "^4.7.2",
     "react-router-dom": "^5.1.2",