@applicaster/zapp-react-native-utils 12.0.0-alpha.5895113034 → 12.0.0-alpha.5923342081

package/reactHooks/player/useAutoSeek.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import * as R from "ramda";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import {
@@ -14,24 +13,20 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
   const [isRunning, setIsRunning] = useState<boolean>(false);
   const [direction, setDirection] = useState<Nullable<SEEK_TYPE>>(null);
   const [multiplier, setMultiplier] = useState(1);
-
   const intervalTimer = React.useRef(null);
   const prevRunning = usePrevious(isRunning);
 
-  const setIntervalTimer = (cb) => {
-    if (intervalTimer.current) {
-      return;
-    }
-
-    intervalTimer.current = setInterval(() => {
+  const clearIntervalTimer = () => {
+    try {
+      clearInterval(intervalTimer.current);
+    } catch (err) {
       intervalTimer.current = null;
-      cb();
-    }, ON_HOLD_INTERVAL);
+    }
   };
 
-  const clearIntervalTimer = () => {
-    clearInterval(intervalTimer.current);
-    intervalTimer.current = null;
+  const setIntervalTimer = (cb) => {
+    clearIntervalTimer();
+    intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
   };
 
   const resetState = () => {
@@ -42,35 +37,22 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
   };
 
   useEffect(() => {
-    const player = playerManager.getInstanceController();
-    if (!player) return;
-
-    if (isRunning) {
-      player?.enterDelayedSeek();
-    } else if (!isRunning) {
-      player.exitDelayedSeek();
-    }
-  }, [isRunning]);
-
-  useEffect(() => {
-    if (!isRunning) {
-      return;
-    }
-
     const player = playerManager.getInstanceController();
 
     if (!player) return;
 
     if (direction) {
-      player[direction](R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
+      player[direction](Math.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
       resetHUDTimer();
     }
-  }, [multiplier, direction, isRunning]);
+  }, [multiplier, direction]);
 
   useEffect(() => {
     if (isRunning && isRunning !== prevRunning) {
       setIntervalTimer(() => {
-        setMultiplier(R.add(1));
+        setMultiplier((prev) => {
+          return prev + 1;
+        });
       });
     } else if (!isRunning && isRunning !== prevRunning) {
       resetState();
@@ -95,7 +77,7 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
       setDirection(eventType);
       setIsRunning(true);
     },
-    [isRunning, autoSeekStop]
+    [isRunning]
   );
 
   return React.useMemo(

package/reactHooks/player/useSeek.tsx

@@ -9,11 +9,11 @@ export const useSeek = (resetHUDTimer = noop) => {
   const { autoSeekStart, autoSeekStop } = useAutoSeek(resetHUDTimer);
 
   const onForwardPress = () => {
-    // handlePressEvent(SEEK_TYPE.FORWARD);
+    handlePressEvent(SEEK_TYPE.FORWARD);
   };
 
   const onRewindPress = () => {
-    // handlePressEvent(SEEK_TYPE.REWIND);
+    handlePressEvent(SEEK_TYPE.REWIND);
   };
 
   const onForwardPressIn = () => {
@@ -21,7 +21,6 @@ export const useSeek = (resetHUDTimer = noop) => {
   };
 
   const onForwardPressOut = () => {
-    handlePressEvent(SEEK_TYPE.FORWARD);
     autoSeekStop();
   };
 
@@ -38,7 +37,6 @@ export const useSeek = (resetHUDTimer = noop) => {
   };
 
   const onRewindPressOut = () => {
-    handlePressEvent(SEEK_TYPE.REWIND);
     autoSeekStop();
   };
 

package/reactHooks/player/useTapSeek.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef } from "react";
 import * as R from "ramda";
 import {
   MAX_SEEK_TIME,
@@ -10,11 +10,13 @@ import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
 type SeekType = SEEK_TYPE | null;
 
-const getSkipTime = (multiplier) =>
-  R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier);
+const getSkipTime = (multiplier) => {
+  const skipTime = R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier);
+
+  return skipTime;
+};
 
 export const useTapSeek = () => {
-  const [resumeTimer, setResumeTimer] = useState<NodeJS.Timeout>(null);
   const onPressMultiplier = useRef(1);
   const lastPressTime = useRef(0);
   const currentOnPressEventType = useRef<SeekType>(null);
@@ -44,41 +46,12 @@ export const useTapSeek = () => {
       }
 
       const seekTime = getSkipTime(onPressMultiplier.current);
-
       player[eventType](seekTime);
 
-      if (resumeTimer) {
-        clearTimeout(resumeTimer);
-
-        const timer = setTimeout(() => {
-          player.exitDelayedSeek();
-          setResumeTimer(null);
-        }, 2000);
-
-        setResumeTimer(timer);
-      }
-
-      const clicksBeforePause = 3;
-
-      // Only pause player if user starts to seek on large increments
-      if (onPressMultiplier.current > clicksBeforePause) {
-        if (!player.isPaused()) {
-          player.enterDelayedSeek();
-
-          const timer = setTimeout(() => {
-            player.exitDelayedSeek();
-            setResumeTimer(null);
-          }, 2000);
-
-          clearTimeout(resumeTimer);
-          setResumeTimer(timer);
-        }
-      }
-
       lastPressTime.current = now;
       currentOnPressEventType.current = eventType;
     },
-    [resetMultiplier, resumeTimer]
+    [resetMultiplier]
   );
 
   return handlePressEvent;

package/reactHooks/resolvers/useCellResolver.ts

@@ -48,7 +48,11 @@ export function useCellResolver({
   ...cellResolverOptions
 }: Props) {
   let _component = Object.assign({}, component);
-  const { width, height } = useDimensions("screen");
+
+  const { width, height } = useDimensions("screen", {
+    updateForInactiveScreens: false,
+  });
+
   const { plugins, cellStyles } = usePickFromState(["plugins", "cellStyles"]);
   const isRTL = useIsRTL();
 

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

@@ -3,23 +3,28 @@ import { Provider } from "react-redux";
 import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
-import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 
 const mockStore = configureStore([thunk]);
 
-import { useCurrentScreenData } from "../useCurrentScreenData";
-
-describe("useScreenData", function () {
-  const river_id_2: ZappRiver = {
-    name: "River 2",
-    id: "A1234",
-    home: false,
-    home_offline: false,
-    supports_offline: false,
-    navigations: [],
-    hooks: { preload_plugins: [] },
-  };
-
+const river_id_2: ZappRiver = {
+  name: "River 2",
+  id: "A1234",
+  home: false,
+  home_offline: false,
+  supports_offline: false,
+  navigations: [],
+  hooks: { preload_plugins: [] },
+};
+
+jest.mock("../useScreenContext", () => ({
+  useScreenContext: () => ({
+    screen: river_id_2,
+  }),
+}));
+
+const { useCurrentScreenData } = require("../useCurrentScreenData");
+
+describe("useScreenData", () => {
   const river_id_1 = { id: "B5678" };
 
   const store = mockStore({
@@ -27,17 +32,10 @@ describe("useScreenData", function () {
   });
 
   const wrapper: React.FC<any> = ({ children }) => (
-    <NavigationContext.Provider
-      value={{
-        currentRoute: "/river/river_id_1/river/river_id_2",
-        data: { screen: river_id_2 },
-      }}
-    >
-      <Provider store={store}>{children}</Provider>
-    </NavigationContext.Provider>
+    <Provider store={store}>{children}</Provider>
   );
 
-  it("should return river data for the current screen/route", function () {
+  it("should return river data for the current screen/route", () => {
     const { result } = renderHook(() => useCurrentScreenData(), { wrapper });
 
     expect(result.current).toBe(river_id_2);

package/reactHooks/screen/index.ts

@@ -10,3 +10,5 @@ export {
   useNavbarState,
   useSetNavbarState,
 } from "./useScreenContext";
+
+export { useScreenBackgroundColor } from "./useScreenBackgroundColor";

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -0,0 +1,23 @@
+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";
+
+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;
+};

package/reactHooks/screen/useScreenContext.ts

@@ -45,8 +45,7 @@ export function useSetNavbarState() {
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
-  // Cover cases where screenContext is used before navigation is initialized
-  const screenData = useContext(ScreenDataContext) || navigator.data;
+  const screenData = useContext(ScreenDataContext);
 
   const modalScreenData = navigator?.modalData;
 

package/reactUtils/index.ts

@@ -108,3 +108,107 @@ export const isAndroidPlatform = () => Platform.OS === "android";
 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
+ */
+export const PLATFORMS = {
+  webos: "Web0S",
+  tizen: "Tizen",
+  samsung: "SMART-TV",
+  mac: "Mac",
+  win: "Win",
+  linux: "Linux",
+  iphone: "iPhone",
+  android: "Android",
+  mobile: "Mobile",
+  vizio: "VIZIO",
+  smartcast: "SmartCast",
+  conjure: "Conjure",
+};
+
+/**
+ * Simple way of identifying if we have access to the tizen APIs
+ */
+export const hasTizen = typeof window?.tizen !== "undefined";
+
+/**
+ * Simple way of identifying if we have access to the webOS APIs
+ */
+export const hasWebOS = typeof window?.webOS !== "undefined";
+
+export const getUserAgent = () => window?.navigator?.userAgent;
+
+export const isLgPlatform = () => {
+  const userAgent = getUserAgent();
+
+  if (!userAgent) {
+    return false;
+  }
+
+  // Note: LG uses the number 0 in their userAgent, possibly because of Palm WebOS
+  return hasWebOS || userAgent.includes(PLATFORMS.webos);
+};
+
+export const isSamsungPlatform = () => {
+  const userAgent = getUserAgent();
+
+  if (!userAgent) {
+    return false;
+  }
+
+  return (
+    hasTizen ||
+    userAgent.includes(PLATFORMS.samsung) ||
+    userAgent.includes(PLATFORMS.tizen)
+  );
+};
+
+/**
+ * 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
+ */
+export const isVizioPlatform = () => {
+  const userAgent = getUserAgent();
+
+  if (!userAgent) {
+    return false;
+  }
+
+  const isVizioAgent =
+    userAgent.includes(PLATFORMS.vizio) ||
+    userAgent.includes(PLATFORMS.smartcast) ||
+    userAgent.includes(PLATFORMS.conjure);
+
+  return isVizioAgent;
+};
+
+/**
+ * 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
+ */
+export const hasVizioAPIs = () => {
+  const hasAPIs =
+    typeof window.VIZIO !== "undefined" &&
+    window?.applicaster?.vizioLibraryDidLoad;
+
+  return hasAPIs;
+};

package/appUtils/focusManager/FocusableEvents.ts

@@ -1,8 +0,0 @@
-export const FOCUSABLE_EVENTS = {
-  IS_REGISTERED: "isRegistered",
-  WILL_RECEIVE_FOCUS: "willReceiveFocus",
-  HAS_RECEIVED_FOCUS: "hasReceivedFocus",
-  WILL_LOSE_FOCUS: "willLoseFocus",
-  HAS_LOST_FOCUS: "hasLostFocus",
-  WILL_UNREGISTER: "willUnregister",
-};