@applicaster/zapp-react-dom-app 12.0.5 → 13.0.0-alpha.1035032144

package/App/InteractionManager/index.tsx

@@ -23,8 +23,6 @@ import {
 
 import { showConfirmationDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
 
-import { withUseSeek } from "@applicaster/zapp-react-native-utils/reactHooks/player";
-
 import {
   DISPLAY_STATES,
   DisplayStateContext,
@@ -48,6 +46,7 @@ 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;
@@ -62,14 +61,6 @@ type Props = {
   navigator: QuickBrickAppNavigator;
   rivers: {};
   xray: XRayContext;
-  seekMethods: {
-    onRewindPress: () => void;
-    onRewindLongPress: () => void;
-    onForwardPress: () => void;
-    onForwardLongPress: () => void;
-    onRewindPressOut: () => void;
-    onForwardPressOut: () => void;
-  };
   confirmDialog: typeof confirmationDialogStore;
 };
 
@@ -181,6 +172,11 @@ 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)
@@ -339,9 +335,34 @@ 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) {
@@ -365,13 +386,14 @@ class InteractionManagerClass extends React.Component<Props, State> {
       this.longPressDetector.monitorKeyPress(event.code, event);
     }
 
-    // None of the logic below should be executed for repeated keys
-    if (event.repeat) return;
+    // Only handle repeat events for arrow keys
+    if (event.repeat && !keyCode(event).matchesAny(...ARROW_KEYS)) return;
 
     /**
      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
@@ -404,16 +426,22 @@ class InteractionManagerClass extends React.Component<Props, State> {
         return;
       }
 
-      if (keyCode(event).matches(KEYS.Forward)) {
+      if (
+        keyCode(event).matches(KEYS.Forward) ||
+        (__DEV__ && keyCode(event).matches(KEYS.C))
+      ) {
         setDisplayState(DISPLAY_STATES.HUD);
-        this.props.seekMethods.onForwardPress();
+        KeyInputHandler.getInstance().onForwardPress();
 
         return;
       }
 
-      if (keyCode(event).matches(KEYS.Rewind)) {
+      if (
+        keyCode(event).matches(KEYS.Rewind) ||
+        (__DEV__ && keyCode(event).matches(KEYS.Z))
+      ) {
         setDisplayState(DISPLAY_STATES.HUD);
-        this.props.seekMethods.onRewindPress();
+        KeyInputHandler.getInstance().onRewindPress();
 
         return;
       }
@@ -451,7 +479,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();
@@ -473,7 +503,10 @@ class InteractionManagerClass extends React.Component<Props, State> {
       }
     }
 
-    if (keyCode(event).matches(KEYS.Enter)) {
+    if (
+      keyCode(event).matches(KEYS.Enter) ||
+      (__DEV__ && keyCode(event).matches(KEYS.X))
+    ) {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
       } else {
@@ -689,54 +722,43 @@ 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:
-        focusManager.pressOut();
+      case KEYS.X.code:
+        // focusManager.pressOut();
         break;
     }
   };
 
   private keySupportsLongPress(event: KeyboardEvent): boolean {
-    return [KEYS.Forward.code, KEYS.Rewind.code, KEYS.Enter.code].includes(
-      event.code
-    );
+    return [
+      KEYS.Forward.code,
+      KEYS.Rewind.code,
+      KEYS.Enter.code,
+      KEYS.Z.code,
+      KEYS.X.code,
+      KEYS.C.code,
+    ].includes(event.code);
   }
 
   render() {
@@ -755,7 +777,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
 export const InteractionManager = R.compose(
   withNavigator,
-  withUseSeek,
   withXray,
   connectToStore(R.pick(["rivers"])),
   PlayerContentContext.withConsumer,

package/App/Loader/SplashLoader.js

@@ -1,7 +1,7 @@
-// @flow
 /* global tizen */
 import * as React from "react";
 import * as R from "ramda";
+import PropTypes from "prop-types";
 
 import { connectToStore } from "@applicaster/zapp-react-native-redux";
 import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickBrick";
@@ -9,17 +9,12 @@ import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickB
 import { QuickBrickEvents } from "../../Polyfills/QuickBrickCommunicationModule";
 import { Splash } from "../Splash";
 
-type Props = {
-  appLaunched: boolean;
-  children: any;
-};
-
 const getAppLaunched = R.compose(
   R.assoc("appLaunched", R.__, {}),
   R.path(["appState", "appLaunched"])
 );
 
-class SplashHandler extends React.Component<Props> {
+class SplashHandler extends React.Component {
   constructor(props) {
     super(props);
 
@@ -76,6 +71,12 @@ class SplashHandler extends React.Component<Props> {
   }
 }
 
+SplashHandler.propTypes = {
+  appLaunched: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+SplashHandler.shouldShowSplash = true;
 SplashHandler.shouldShowSplash = true;
 
 export const SplashLoader = connectToStore(getAppLaunched)(SplashHandler);

package/App/Loader/__tests__/__snapshots__/loadDomPlugins.test.js.snap

@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loadDomPlugins when there are plugins requiring to write to the dom skips plugins without init method 1`] = `
-Array [
-  Array [
+[
+  [
     "could not initialize plugin Plugin with Dom node & no init method - it doesn't have an init method",
-    Object {
-      "plugin": Object {
-        "configuration": Object {
+    {
+      "plugin": {
+        "configuration": {
           "foo": "bar",
         },
-        "module": Object {
+        "module": {
           "requiresAppendingDomNode": true,
         },
         "name": "Plugin with Dom node & no init method",

package/App/Loader/loadSessionStorageData.js

@@ -1,4 +1,3 @@
-// @flow
 import * as R from "ramda";
 import { NativeModules } from "react-native";
 import uuidv4 from "uuid/v4";

package/App/Loader/utils/platform.js

@@ -1,4 +1,3 @@
-// @flow
 /* global webOS */
 /* global tizen */
 /* eslint-disable no-console */
@@ -12,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();
 
@@ -24,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();
 
@@ -43,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":
@@ -89,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) => {
@@ -109,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")
@@ -117,7 +133,6 @@ export const getWebOSConnectionInfo = () => {
 
         resolve({ networkType: types });
       },
-
       onFailure: (error) => {
         console.error(
           "getWebOSConnectionInfo: There was an error getting connection info",
@@ -130,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/App/Splash/Splash.js

@@ -1,13 +1,10 @@
-// @flow
 import React from "react";
 
-import { verifyAssets } from "@applicaster/zapp-react-dom-ui-components/Helpers/protectHelper";
+import PropTypes from "prop-types";
 
-type Props = {
-  remoteConfigurations: any;
-};
+import { verifyAssets } from "@applicaster/zapp-react-dom-ui-components/Helpers/protectHelper";
 
-export const SplashComponent = ({ remoteConfigurations }: Props) => {
+export const SplashComponent = ({ remoteConfigurations }) => {
   const image = verifyAssets(remoteConfigurations.assets, [
     "universal",
     "splash",
@@ -19,3 +16,9 @@ export const SplashComponent = ({ remoteConfigurations }: Props) => {
     </div>
   );
 };
+
+SplashComponent.propTypes = {
+  remoteConfigurations: PropTypes.shape({
+    assets: PropTypes.object.isRequired,
+  }).isRequired,
+};

package/Polyfills/Storage/__tests__/__snapshots__/storage.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`storageObject when the requested storage exists getAllItems returns all keys 1`] = `
-Object {
+{
   "baz_::_foo": "baz",
   "baz_::_otherKey": "otherValue",
   "foo": "bar",
@@ -10,7 +10,7 @@ Object {
 `;
 
 exports[`storageObject when the requested storage exists getAllItems returns all keys 2`] = `
-Object {
+{
   "baz_::_foo": "baz",
   "baz_::_otherKey": "otherValue",
   "foo": "bar",
@@ -19,14 +19,14 @@ Object {
 `;
 
 exports[`storageObject when the requested storage exists getAllItems returns all keys in the namespace if provided 1`] = `
-Object {
+{
   "foo": "baz",
   "otherKey": "otherValue",
 }
 `;
 
 exports[`storageObject when the requested storage exists getAllItems returns all keys in the namespace if provided 2`] = `
-Object {
+{
   "foo": "baz",
   "otherKey": "otherValue",
 }

package/Polyfills/Storage/index.js

@@ -1,6 +1,3 @@
-// @flow
-// @ts-nocheck
-// @ts-ignore
 import * as R from "ramda";
 
 import {
@@ -9,11 +6,11 @@ import {
 } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { mapKeys } from "@applicaster/zapp-react-native-utils/objectUtils";
 
-export type StorageI = {
-  setItem: (string, string, string) => Promise<any>;
-  getItem: (string, string) => Promise<any>;
-  getAllItems: () => Promise<any>;
-};
+// export type StorageI = {
+//   setItem: (string, string, ?string) => Promise<any>,
+//   getItem: (string, ?string) => Promise<any>,
+//   getAllItems: () => Promise<any>,
+// };
 
 export const STORAGE_TYPES = ["localStorage", "sessionStorage"];
 
@@ -27,10 +24,7 @@ const NAMESPACE_SEPARATOR = "_::_";
  * @param {?String} namespace
  * @returns {String}
  */
-export function applyNamespaceToKeyName(
-  key: string,
-  namespace: ?string
-): string {
+export function applyNamespaceToKeyName(key, namespace) {
   return namespace ? `${namespace}${NAMESPACE_SEPARATOR}${key}` : key;
 }
 
@@ -42,7 +36,7 @@ export function applyNamespaceToKeyName(
  * @param {Function} fn function to run
  * @returns {Promise}
  */
-function tryAndResolve(fn: (any) => any): Promise<any> {
+function tryAndResolve(fn) {
   try {
     return R.compose(
       (value) => Promise.resolve(value),
@@ -64,7 +58,7 @@ function tryAndResolve(fn: (any) => any): Promise<any> {
  * @returns {Function} storageObject.callMethod: invokes methods on the storage object
  * @returns {Function} storageObject.getKeys: returns all existing keys in the storage object
  */
-function getStorageObject(type: string): (any) => void | Promise<any> {
+function getStorageObject(type) {
   const storage = R.prop(type, window);
 
   if (!R.includes(type, STORAGE_TYPES) || !storage) {
@@ -82,7 +76,7 @@ function getStorageObject(type: string): (any) => void | Promise<any> {
    * @param {Array} args array of arguments to use when invoking the method
    * @returns response of the method call
    */
-  function callMethod(method: string, ...args: [any]): Promise<any> {
+  function callMethod(method, ...args) {
     return storage[method](...args);
   }
 
@@ -109,9 +103,9 @@ function getStorageObject(type: string): (any) => void | Promise<any> {
 /**
  * returns an object to interact with a storage module (localStorage or sessionStorage)
  * @param {String} type of storage
- * @returns {Object}
+ * @returns {StorageI}
  */
-export function getStorageModule(type: string): StorageI {
+export function getStorageModule(type) {
   const Storage = getStorageObject(type);
 
   /**
@@ -122,11 +116,7 @@ export function getStorageModule(type: string): StorageI {
    * @param {?String} namespace
    * @returns {Promise<Boolean|Error>}
    */
-  function setItem(
-    key: string,
-    value: string,
-    namespace: ?string = DEFAULT_NAMESPACE
-  ): Promise<boolean | Error> {
+  function setItem(key, value, namespace = DEFAULT_NAMESPACE) {
     const keyName = applyNamespaceToKeyName(
       key,
       namespace || DEFAULT_NAMESPACE
@@ -146,10 +136,7 @@ export function getStorageModule(type: string): StorageI {
    * @param {?String} namespace
    * @returns {Promise<Any|Error>}
    */
-  function getItem(
-    key: string,
-    namespace: ?string = DEFAULT_NAMESPACE
-  ): Promise<any> {
+  function getItem(key, namespace = DEFAULT_NAMESPACE) {
     const keyName = applyNamespaceToKeyName(
       key,
       namespace || DEFAULT_NAMESPACE
@@ -165,7 +152,7 @@ export function getStorageModule(type: string): StorageI {
    * @param {?String} namespace
    * @returns {Promise<Boolean|Error>}
    */
-  function removeItem(key: string, namespace = DEFAULT_NAMESPACE) {
+  function removeItem(key, namespace = DEFAULT_NAMESPACE) {
     const keyName = applyNamespaceToKeyName(key, namespace);
 
     return tryAndResolve(() => Storage.callMethod("removeItem", keyName));
@@ -176,7 +163,7 @@ export function getStorageModule(type: string): StorageI {
    * @param {?String} namespace
    * @returns {Promise<Object|Error>}
    */
-  function getAllItems(namespace: ?string = null): Promise<string> {
+  function getAllItems(namespace = null) {
     return tryAndResolve(() => {
       const keys = Storage.getKeys();
 

package/index.js

@@ -1,13 +1,11 @@
 /// <reference types="@applicaster/applicaster-types" />
 import * as R from "ramda";
-import { useHistory, useLocation } from "react-router-dom";
 
 import { createQuickBrickApp } from "@applicaster/quick-brick-core";
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import * as Contexts from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { OfflineHandler } from "@applicaster/zapp-react-native-ui-components/Components/OfflineHandler";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
-import { ZappDomRouter } from "./App/Router";
 import { Layout } from "./App/Layout";
 import { SplashLoader } from "./App/Loader/SplashLoader";
 import { appLoader } from "./App/Loader";
@@ -24,11 +22,6 @@ const contextProviders = R.map(R.prop("withProvider"), R.values(Contexts));
 if (withXray) contextProviders.push(withXray);
 
 export const ZappApp = createQuickBrickApp({
-  navigations: {
-    Router: ZappDomRouter,
-    useLocation,
-    useHistory,
-  },
   QuickBrickManager,
   Layout,
   OfflineHandler,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "12.0.5",
+  "version": "13.0.0-alpha.1035032144",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,13 +22,12 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "12.0.5",
-    "@applicaster/zapp-react-native-bridge": "12.0.5",
-    "@applicaster/zapp-react-native-redux": "12.0.5",
-    "@applicaster/zapp-react-native-ui-components": "12.0.5",
-    "@applicaster/zapp-react-native-utils": "12.0.5",
+    "@applicaster/zapp-react-dom-ui-components": "13.0.0-alpha.1035032144",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.1035032144",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.1035032144",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.1035032144",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.1035032144",
     "abortcontroller-polyfill": "^1.7.5",
-    "history": "^4.7.2",
     "react-router-dom": "^5.1.2",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",
@@ -36,9 +35,19 @@
     "videojs-contrib-quality-levels": "3.0.0"
   },
   "peerDependencies": {
+    "@applicaster/zapp-pipes-v2-client": "*",
+    "@react-native-community/netinfo": "*",
+    "@types/node": "*",
     "core-js": "3.29.1",
+    "immer": "*",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-native-web": "0.18.11"
+    "react-native": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-svg": "*",
+    "react-native-web": "0.18.11",
+    "uglify-js": "*",
+    "validate-color": "*",
+    "zustand": "*"
   }
 }

package/App/Router/index.js

@@ -1,18 +0,0 @@
-// @flow
-
-import React from "react";
-
-import { Router } from "react-router";
-import { createMemoryHistory } from "history";
-
-type Props = {
-  children: any;
-};
-
-const history = createMemoryHistory();
-
-export const ZappDomRouter = ({ children, ...otherProps }: Props) => (
-  <Router history={history} {...otherProps}>
-    {children}
-  </Router>
-);