@applicaster/zapp-react-dom-app 15.0.0-rc.98 → 15.1.0-alpha.1852552014

package/App/InteractionManager/hoc/__tests__/withBacktoTopActionHOC.test.tsx

@@ -1,8 +1,21 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
+
 import { withBackToTopActionHOC } from "../withBackToTopAction";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+import {
+  useCurrentScreenIsHome,
+  useCurrentScreenIsRoot,
+  useCurrentScreenIsTabs,
+} from "../hooks";
+
+import {
+  useCurrentScreenIsHook,
+  useCurrentScreenIsStartupHook,
+  useIsStandaloneFullscreen,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 
-// Mock focusManager and hook
 jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
   focusManager: {
     isFocusOnMenu: jest.fn(),
@@ -11,26 +24,17 @@ jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
   },
 }));
 
-jest.mock("../hooks", () => ({
-  useCurrentScreenIsHome: jest.fn(),
-  useCurrentScreenIsRoot: jest.fn(),
-  useCurrentScreenIsTabs: jest.fn(),
-}));
-
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import {
-  useCurrentScreenIsHome,
-  useCurrentScreenIsRoot,
-  useCurrentScreenIsTabs,
-} from "../hooks";
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor");
+jest.mock("../hooks");
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen");
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useNavigation: jest.fn(),
-}));
+const mockUseSubscriberFor = useSubscriberFor as jest.Mock;
 
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+const setupFocusManager = (overrides: Partial<typeof focusManager>) => {
+  Object.assign(focusManager, overrides);
+};
 
-describe("withBackToTopActionHOC", () => {
+describe("withBackToTopActionHOC - backToTopAction", () => {
   let receivedProps: any;
 
   const BaseComponent = (props) => {
@@ -43,141 +47,119 @@ describe("withBackToTopActionHOC", () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+
+    mockUseSubscriberFor.mockImplementation(() => jest.fn());
+
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+    (useIsStandaloneFullscreen as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsHook as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsStartupHook as jest.Mock).mockReturnValue(false);
+
+    setupFocusManager({
+      isFocusOnMenu: () => false,
+      isFocusOnContent: () => false,
+      isTabsScreenContentFocused: () => false,
+    });
   });
 
-  it("returns PLATFORM_BACK when on root screen, and startup hooks", () => {
+  it("returns PLATFORM_BACK for startup hook", () => {
     expect.assertions(1);
 
-    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
-
-    (useNavigation as jest.Mock).mockReturnValue({
-      startUpHooks: ["some_startup_hook"],
-    });
+    (useCurrentScreenIsStartupHook as jest.Mock).mockReturnValue(true);
 
     render(<Wrapped />);
 
     expect(receivedProps.backToTopAction()).toBe("PLATFORM_BACK");
   });
 
-  it("returns PLATFORM_BACK when on root screen, focus on menu, and is home", () => {
+  it("returns GO_BACK_FROM_HOOK when isHook", () => {
     expect.assertions(1);
 
-    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
-    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(true);
-    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsHook as jest.Mock).mockReturnValue(true);
 
-    (useNavigation as jest.Mock).mockReturnValue({
-      startUpHooks: [],
-    });
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toBe("GO_BACK_FROM_HOOK");
+  });
+
+  it("returns GO_HOME for standalone full screen", () => {
+    expect.assertions(1);
 
-    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
-    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+    (useIsStandaloneFullscreen as jest.Mock).mockReturnValue(true);
 
     render(<Wrapped />);
 
-    expect(receivedProps.backToTopAction()).toBe("PLATFORM_BACK");
+    expect(receivedProps.backToTopAction()).toBe("GO_HOME");
   });
 
-  it("returns GO_HOME when on root screen, focus on menu, and not home", () => {
+  it("returns PLATFORM_BACK when root + menu focus + home", () => {
     expect.assertions(1);
 
     (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
-    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
-    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(true);
 
-    (useNavigation as jest.Mock).mockReturnValue({
-      startUpHooks: [],
+    setupFocusManager({
+      isFocusOnMenu: () => true,
     });
 
-    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
-    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
-
     render(<Wrapped />);
-    expect(receivedProps.backToTopAction()).toBe("GO_HOME");
+
+    expect(receivedProps.backToTopAction()).toBe("PLATFORM_BACK");
   });
 
-  it("returns FOCUS_ON_SELECTED_TOP_MENU_ITEM when on root screen and focus on content without tabs_screen", () => {
+  it("returns GO_HOME when root + menu focus + NOT home", () => {
+    expect.assertions(1);
+
     (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
     (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
-    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
 
-    (useNavigation as jest.Mock).mockReturnValue({
-      startUpHooks: [],
+    setupFocusManager({
+      isFocusOnMenu: () => true,
     });
 
-    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
-    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(true);
-
     render(<Wrapped />);
 
-    expect(receivedProps.backToTopAction()).toBe(
-      "FOCUS_ON_SELECTED_TOP_MENU_ITEM"
-    );
+    expect(receivedProps.backToTopAction()).toBe("GO_HOME");
   });
 
-  it("returns FOCUS_ON_SELECTED_TAB_ITEM when on root screen and focus on content with tabs_screen", () => {
+  it("returns FOCUS_ON_SELECTED_TAB_ITEM when tabs content focused", () => {
+    expect.assertions(1);
+
     (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
-    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
     (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(true);
 
-    (useNavigation as jest.Mock).mockReturnValue({
-      startUpHooks: [],
+    setupFocusManager({
+      isTabsScreenContentFocused: () => true,
     });
 
-    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
-    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(true);
-
-    (focusManager.isTabsScreenContentFocused as jest.Mock).mockReturnValue(
-      true
-    );
-
     render(<Wrapped />);
 
     expect(receivedProps.backToTopAction()).toBe("FOCUS_ON_SELECTED_TAB_ITEM");
   });
 
-  it("returns GO_BACK in default case", () => {
+  it("returns FOCUS_ON_SELECTED_TOP_MENU_ITEM when content focused", () => {
     expect.assertions(1);
 
-    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(false);
-    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
-    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
 
-    (useNavigation as jest.Mock).mockReturnValue({
-      startUpHooks: [],
+    setupFocusManager({
+      isFocusOnContent: () => true,
     });
 
-    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
-    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+    render(<Wrapped />);
 
-    (focusManager.isTabsScreenContentFocused as jest.Mock).mockReturnValue(
-      false
+    expect(receivedProps.backToTopAction()).toBe(
+      "FOCUS_ON_SELECTED_TOP_MENU_ITEM"
     );
-
-    render(<Wrapped />);
-    expect(receivedProps.backToTopAction()).toBe("GO_BACK");
   });
 
-  it("returns FORCE_GO_BACK in hook case", () => {
+  it("returns default GO_BACK", () => {
     expect.assertions(1);
 
-    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(false);
-    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
-    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
-
-    (useNavigation as jest.Mock).mockReturnValue({
-      startUpHooks: [],
-      currentRoute: "/hooks/some_route",
-    });
-
-    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
-    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
-
-    (focusManager.isTabsScreenContentFocused as jest.Mock).mockReturnValue(
-      false
-    );
-
     render(<Wrapped />);
-    expect(receivedProps.backToTopAction()).toBe("FORCE_GO_BACK");
+
+    expect(receivedProps.backToTopAction()).toBe("GO_BACK");
   });
 });

package/App/InteractionManager/hoc/index.ts

@@ -1,4 +1 @@
-export {
-  withBackToTopActionHOC,
-  type BackToTopAction,
-} from "./withBackToTopAction";
+export { withBackToTopActionHOC } from "./withBackToTopAction";

package/App/InteractionManager/hoc/withBackToTopAction.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
 import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
@@ -10,17 +9,12 @@ import {
   useCurrentScreenIsRoot,
   useCurrentScreenIsTabs,
 } from "./hooks";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 
-export type BACK_TO_TOP_ACTION =
-  | "PLATFORM_BACK"
-  | "GO_HOME"
-  | "GO_BACK"
-  | "FOCUS_ON_SELECTED_TOP_MENU_ITEM"
-  | "FORCE_GO_BACK"
-  | "FOCUS_ON_SELECTED_TAB_ITEM";
-
-export type BackToTopAction = () => BACK_TO_TOP_ACTION;
+import {
+  useCurrentScreenIsHook,
+  useCurrentScreenIsStartupHook,
+  useIsStandaloneFullscreen,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 
 export function withBackToTopActionHOC(Component) {
   return function WrappedComponent(props) {
@@ -28,11 +22,11 @@ export function withBackToTopActionHOC(Component) {
     const isRoot = useCurrentScreenIsRoot();
     const isTabsScreen = useCurrentScreenIsTabs();
 
-    const navigator = useNavigation();
+    const isStartUpHook = useCurrentScreenIsStartupHook();
 
-    const isStartUpHook = isFilledArray(navigator.startUpHooks);
+    const isHook = useCurrentScreenIsHook();
 
-    const isHook = navigator.currentRoute?.includes("hook");
+    const isStandaloneFullscreen = useIsStandaloneFullscreen();
 
     const emitFocusOnSelectedTab = useSubscriberFor(
       QBUIComponentEvents.focusOnSelectedTab
@@ -42,11 +36,20 @@ export function withBackToTopActionHOC(Component) {
       QBUIComponentEvents.focusOnSelectedTopMenuItem
     );
 
-    const backToTopAction = React.useCallback((): BACK_TO_TOP_ACTION => {
-      if (isRoot && isStartUpHook) {
+    const backToTopAction = React.useCallback((): BackToTopAction => {
+      if (isStartUpHook) {
         return "PLATFORM_BACK";
       }
 
+      if (isHook) {
+        return "GO_BACK_FROM_HOOK";
+      }
+
+      // Handling case where is not top menu visible
+      if (isStandaloneFullscreen) {
+        return "GO_HOME";
+      }
+
       if (isRoot && focusManager.isFocusOnMenu() && isHome) {
         return "PLATFORM_BACK";
       }
@@ -63,13 +66,16 @@ export function withBackToTopActionHOC(Component) {
         return "FOCUS_ON_SELECTED_TOP_MENU_ITEM";
       }
 
-      if (isHook) {
-        return "FORCE_GO_BACK";
-      }
-
       // default
       return "GO_BACK";
-    }, [isHome, isRoot, isTabsScreen, isStartUpHook, isHook]);
+    }, [
+      isHome,
+      isRoot,
+      isTabsScreen,
+      isStartUpHook,
+      isHook,
+      isStandaloneFullscreen,
+    ]);
 
     return (
       <Component

package/App/InteractionManager/index.tsx

@@ -54,7 +54,7 @@ import { OnScreenKeyboard } from "@applicaster/zapp-react-dom-ui-components/Comp
 import { KeyboardLongPressManager } from "@applicaster/zapp-react-dom-ui-components/Utils/KeyboardLongPressManager";
 import { KeyInputHandler } from "@applicaster/zapp-react-native-utils/appUtils/keyInputHandler/KeyInputHandler";
 import { getHomeRiver } from "@applicaster/zapp-react-native-utils/reactHooks/state";
-import { withBackToTopActionHOC, BackToTopAction } from "./hoc";
+import { withBackToTopActionHOC } from "./hoc";
 
 const { withXray } = getXray();
 const globalAny: any = global;
@@ -76,7 +76,7 @@ type Props = {
   rivers: {};
   xray: XRayContext;
   confirmDialog: typeof confirmationDialogStore;
-  backToTopAction: BackToTopAction;
+  backToTopAction: () => BackToTopAction;
   emitFocusOnSelectedTopMenuItem: Callback;
   emitFocusOnSelectedTab: Callback;
 };
@@ -461,7 +461,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
           }
         }
 
-        if (action === "FORCE_GO_BACK") {
+        if (action === "GO_BACK_FROM_HOOK") {
           log_info(action);
 
           const fallbackToHome = false;
@@ -570,7 +570,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
         const { playing } = playerManager.getState() || {};
 
         if (!playing) {
-          return playerManager.togglePlayPause();
+          return playerManager.getInstanceController()?.togglePlayPause();
         }
       }
 

package/App/Layout/index.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 
-import { Background } from "@applicaster/zapp-react-dom-ui-components/Components/Background";
+import { BackgroundImage } from "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage";
+
 import { ConfirmDialog } from "@applicaster/zapp-react-dom-ui-components/Components/ConfirmDialog";
 import { NavWrapper } from "@applicaster/zapp-react-dom-ui-components/Components/NavWrapper";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
@@ -25,7 +26,7 @@ export function Layout({ children }: Props) {
   return (
     <>
       <LayoutComponent
-        Components={{ Background, NavBar: NavWrapper }}
+        Components={{ Background: BackgroundImage, NavBar: NavWrapper }}
         ComponentsExtraProps={ComponentsExtraProps}
       >
         {children}

package/App/Loader/utils/const.js

@@ -64,6 +64,7 @@ export const PLATFORMS = {
   android: "Android",
   mobile: "Mobile",
   vizio: "VIZIO",
+  vidaa: "VIDAA",
   smartcast: "SmartCast",
   conjure: "Conjure",
 };

package/App/Loader/utils/platform.js

@@ -13,7 +13,7 @@ import {
 
 /**
  * @typedef {"tv" | "web" | "other"} DeviceType
- * @typedef {"samsung_tv" | "lg_tv" | unknown} CustomPlatformTypes
+ * @typedef {"samsung_tv" | "lg_tv" | "vidaa" | unknown} CustomPlatformTypes
  */
 
 /**
@@ -75,6 +75,16 @@ export const isVizioPlatform = () => {
   );
 };
 
+/**
+ * Checks if the platform is Vida.
+ * @returns {boolean} True if the platform is Vida, false otherwise.
+ */
+export const isVidaaPlatform = () => {
+  const userAgent = getUserAgent();
+
+  return userAgent.includes(PLATFORMS.vidaa);
+};
+
 /**
  * Checks if the Vizio APIs are available.
  * @returns {boolean} True if the Vizio APIs are available, false otherwise.
@@ -99,6 +109,10 @@ export const getDeviceType = () => {
       return isSamsungPlatform() ? "tv" : "web";
     case "lg_tv":
       return isLgPlatform() ? "tv" : "web";
+    case "vizio":
+      return isVizioPlatform() ? "tv" : "web";
+    case "vidaa":
+      return isVidaaPlatform() ? "tv" : "web";
     default:
       return "other";
   }
@@ -271,10 +285,11 @@ export const getDeviceData = async () => {
       ]);
 
       deviceData = {
-        platform: "lg_tv",
         ...webOSInfo,
         ...webOSConnectionInfo,
-        device_type: getDeviceType(),
+        platform: "lg_tv",
+        deviceMake: "LG",
+        deviceType: getDeviceType(),
         ...deviceDimensions,
       };
     } else if (isSamsungPlatform()) {
@@ -284,10 +299,11 @@ export const getDeviceData = async () => {
       ]);
 
       deviceData = {
-        platform: "samsung_tv",
         ...tizenInfo,
         ...tizenConnectionInfo,
-        device_type: getDeviceType(),
+        platform: "samsung_tv",
+        deviceMake: "Samsung",
+        deviceType: getDeviceType(),
         ...deviceDimensions,
       };
     } else if (isVizioPlatform()) {

package/Polyfills/AppLoaderBridge/utils/enums.ts

@@ -9,4 +9,5 @@ export enum STORE_PLATFORM {
   lg = "lg_content_store",
   samsung = "samsung_app_store",
   vizio = "vizio_app_store",
+  vidaa = "vidaa_app_store",
 }

package/Polyfills/index.js

@@ -15,6 +15,7 @@ import "@webcomponents/webcomponentsjs";
 const PLATFORM_KEYS = {
   samsung: "samsung_tv",
   lg: "lg_tv",
+  vidaa: "vidaa",
   web: "web",
 };
 

package/main.css

@@ -1,7 +1,7 @@
 html,
 body {
   width: 100vw;
-  height: 100vw;
+  height: 100vh;
   max-width: 1920px;
   max-height: 1080px;
   overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "15.0.0-rc.98",
+  "version": "15.1.0-alpha.1852552014",
   "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": "15.0.0-rc.98",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.98",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.98",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.98",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.98",
+    "@applicaster/zapp-react-dom-ui-components": "15.1.0-alpha.1852552014",
+    "@applicaster/zapp-react-native-bridge": "15.1.0-alpha.1852552014",
+    "@applicaster/zapp-react-native-redux": "15.1.0-alpha.1852552014",
+    "@applicaster/zapp-react-native-ui-components": "15.1.0-alpha.1852552014",
+    "@applicaster/zapp-react-native-utils": "15.1.0-alpha.1852552014",
     "abortcontroller-polyfill": "^1.7.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",