@applicaster/zapp-react-native-utils 12.0.0-rc.34 → 12.0.0-rc.36

package/appUtils/HooksManager/index.js

@@ -270,7 +270,9 @@ export function HooksManager({
         });
 
         const isHookInHomescreen = payload?.home;
-        const isHookFlowBlocker = hookPlugin?.module?.isFlowBlocker();
+
+        const isHookFlowBlocker =
+          hookPlugin?.module?.isFlowBlocker?.() ?? false;
 
         // TODO: We technically need to also support the case where there is more than one hook in the stack,
         // if needed we could add differentiation explicit user cancellation (when we should go to background) and other types of cancellation

package/appUtils/playerManager/conts.ts

@@ -20,6 +20,11 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerMute = "onPlayerMute",
   OnPlayerUnmute = "onPlayerUnmute",
 
+  onVideoFullscreenPlayerDidDismiss = "onVideoFullscreenPlayerDidDismiss",
+  onVideoFullscreenPlayerDidPresent = "onVideoFullscreenPlayerDidPresent",
+  onVideoFullscreenPlayerWillDismiss = "onVideoFullscreenPlayerWillDismiss",
+  onVideoFullscreenPlayerWillPresent = "onVideoFullscreenPlayerWillPresent",
+
   OnAdBegin = "onAdBegin",
   OnAdBreakBegin = "onAdBreakBegin",
   OnAdBreakEnd = "onAdBreakEnd",

package/appUtils/playerManager/player.ts

@@ -414,6 +414,32 @@ export class Player {
     });
   };
 
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillPresent,
+    });
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidPresent,
+    });
+  };
+
   public invokeListenersUpdate = ({
     callbackName,
     event = {},
@@ -634,6 +660,12 @@ export class Player {
     onBufferStart: this.onBufferStart,
     onBufferComplete: this.onBufferComplete,
 
+    onPlayerClose: this.onPlayerClose,
+    onVideoFullscreenPlayerWillPresent: this.onVideoFullscreenPlayerWillPresent,
+    onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+    onVideoFullscreenPlayerWillDismiss: this.onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+
     // Ads Callbacks:
     onAdBegin: this.onAdBegin,
     onAdBreakBegin: this.onAdBreakBegin,
@@ -693,4 +725,6 @@ export class Player {
   isFullScreenSupported(): boolean {
     return true;
   }
+
+  public supportsNativeControls = (): boolean => false;
 }

package/appUtils/playerManager/playerNative.ts

@@ -5,6 +5,7 @@ import { Player } from "./player";
 import { findNodeHandle, NativeModules } from "react-native";
 import { isApplePlatform } from "../../reactUtils";
 import { PlayerRole } from "./conts";
+import { toBooleanWithDefaultFalse } from "../../booleanUtils";
 
 const RNPlayerManager = {
   QuickBrickPlayerPlugin: isApplePlatform()
@@ -291,4 +292,7 @@ export class PlayerNative extends Player {
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
+
+  supportsNativeControls = (): boolean =>
+    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
 }

package/cellUtils/index.ts

@@ -182,8 +182,8 @@ export const getHeight = (width, aspectRatio) => {
  * @returns {string} duration
  */
 
-export const getDurationInMinutes = (seconds: number): string => {
-  if (seconds === (null || undefined)) return "00:00";
+export const getDurationInMinutes = (seconds?: number): string => {
+  if (!seconds) return "00:00";
   const minutes = Math.floor(Number(seconds) / 60);
   const secondsReminder = Math.floor(Number(seconds)) % 60;
   const pad = (num: number): string => `${num < 10 ? "0" : ""}${num}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-rc.34",
+  "version": "12.0.0-rc.36",
   "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.0-rc.34",
+    "@applicaster/applicaster-types": "12.0.0-rc.36",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts

@@ -12,6 +12,8 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 jest.useFakeTimers();
 
 const {

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.ts

@@ -17,6 +17,8 @@ jest.mock(
 
 jest.useFakeTimers();
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {

package/reactHooks/layout/__tests__/index.test.js

@@ -44,6 +44,7 @@ jest.mock("../../../reactUtils", () => ({
 
 jest.mock("../../navigation", () => ({
   useNavigation: () => null,
+  useIsScreenActive: () => true,
 }));
 
 const { Dimensions } = require("react-native");

package/reactHooks/layout/types/index.ts

@@ -20,6 +20,7 @@ export type Options = {
   excludeStatusBar?: boolean;
   rounded?: boolean;
   deviceInfo?: boolean;
+  updateForInactiveScreens?: boolean;
 };
 
 export type Context = "window" | "screen";

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -1,4 +1,4 @@
-import { useState, useLayoutEffect, useRef, useMemo } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import * as R from "ramda";
 
@@ -8,6 +8,7 @@ import { isTV } from "../../../reactUtils";
 import { Options, UseDimensions } from "../types";
 import { getDeviceInfo } from "../getDeviceInfo";
 import { getInitialDimensions } from "./helpers";
+import { useIsScreenActive } from "../../navigation";
 
 function compensateForScaleIfNeeded(context) {
   return function () {
@@ -32,8 +33,10 @@ const statusBarHeight = StatusBar?.currentHeight;
  */
 export const useDimensions: UseDimensions = (
   context = "window",
-  fullDimensions = { fullDimensions: false }
+  fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
+  const isActive = useIsScreenActive();
+
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
     console.warn(
@@ -73,7 +76,7 @@ export const useDimensions: UseDimensions = (
 
       if (newDimensions.width === newDimensions.height) {
         /**
-         * Ignoring case occured on iOS when Dimensions.get sometimes returning
+         * Ignoring case occurred on iOS when Dimensions.get sometimes returning
          * wrong `window` sizes
          * when switch background -> foreground state.
          * ( TODO fix when 1:1 aspect ratio will be used )
@@ -81,7 +84,7 @@ export const useDimensions: UseDimensions = (
 
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
-      } else {
+      } else if (isActive || options.updateForInactiveScreens) {
         deviceInfo.current = getDeviceInfo(newDimensions);
         setDimensions(newDimensions);
       }
@@ -92,7 +95,7 @@ export const useDimensions: UseDimensions = (
     return () => {
       activeSubscription.remove();
     };
-  }, []);
+  }, [isActive]);
 
   const memoizedDimensions = useMemo(() => {
     return { ...applyOptions(dimensions), statusBarHeight };

package/reactHooks/navigation/__mocks__/index.ts

@@ -23,3 +23,5 @@ export const useNavigation = jest.fn(() => ({
 export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
 
 export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
+
+export const useIsScreenActive = jest.fn().mockReturnValue(true);

package/reactHooks/navigation/index.ts

@@ -19,9 +19,9 @@ import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Co
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import {
+  getNavigationProps,
   getRiverFromRoute,
   getTargetRoute,
-  getNavigationProps,
 } from "../../navigationUtils";
 import { platformSelect } from "../../reactUtils";
 import { useConnectionInfo } from "../connection";
@@ -212,7 +212,8 @@ export const useRoute = (): {
 
   if (isHookPathname(pathname)) {
     const screenData =
-      "hookPlugin" in currentRouteScreenData
+      "hookPlugin" in currentRouteScreenData &&
+      currentRouteScreenData.hookPlugin.screen_id
         ? currentRouteScreenData
         : navigator.screenData;
 
@@ -446,3 +447,18 @@ export const useGetBottomTabBarHeight = (): number => {
 
   return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
 };
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  if (
+    videoModalState.visible &&
+    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
+  ) {
+    return false;
+  }
+
+  return pathname === currentRoute;
+};

package/reactHooks/resolvers/__tests__/useCellResolver.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 
@@ -12,6 +12,8 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
   useIsRTL: jest.fn(() => mock_rtl_flag),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 const { useCellResolver } = require("../useCellResolver");
 
 describe("cellResolver", () => {

package/reactHooks/screen/useTargetScreenData.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 export function getTargetScreenData(
   entry: ZappEntry,
@@ -35,6 +36,12 @@ export function getTargetScreenData(
   return rivers?.[screenId];
 }
 
+export function getTargetScreenDataFromEntry(entry: ZappEntry): ZappRiver {
+  const { rivers, contentTypes } = appStore.get(["rivers", "contentTypes"]);
+
+  return getTargetScreenData(entry, rivers, contentTypes);
+}
+
 export const useTargetScreenData = (entry: ZappEntry) => {
   const { rivers, contentTypes } = usePickFromState(["rivers", "contentTypes"]);