@applicaster/zapp-react-native-ui-components 12.0.0-alpha.3631152042 → 12.0.0-alpha.4433422595

package/Components/BaseFocusable/index.tsx

@@ -73,7 +73,7 @@ export class BaseFocusable<
   getId(props?: { id: string; groupId: string }) {
     const { id, groupId = null } = props || this.props;
 
-    return groupId ? `${groupId}-${id}` : id;
+    return groupId ? `groupId:${groupId}___${id}` : id;
   }
 
   getRect() {

package/Components/Cell/Cell.tsx

@@ -207,7 +207,11 @@ export class CellComponent extends React.Component<Props> {
 
     const { id } = item;
 
-    const focusableId = R.join("-", [component?.id, id, index]);
+    const focusableId = R.join("-", [
+      `componentId:${component?.id}`,
+      `id:${id}`,
+      `index:${index}`,
+    ]);
 
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;

package/Components/FocusableGroup/index.tsx

@@ -26,6 +26,7 @@ type Props = {
   nextFocusLeft?: any;
   nextFocusRight?: any;
   onLayout?: any;
+  excludeFromFocusSearching?: boolean;
 };
 
 export class FocusableGroup extends BaseFocusable<Props> {

package/Components/Layout/TV/ScreenLayoutContextProvider.tsx

@@ -60,7 +60,7 @@ export function ScreenLayoutContextProvider(props: {
     initialState
   );
 
-  const screeenLayoutValue = React.useMemo(
+  const screenLayoutValue = React.useMemo(
     () => ({
       ...screenLayout,
       setScreenLayout,
@@ -69,7 +69,7 @@ export function ScreenLayoutContextProvider(props: {
   );
 
   return (
-    <ScreenLayoutContext.Provider value={screeenLayoutValue}>
+    <ScreenLayoutContext.Provider value={screenLayoutValue}>
       {props.children}
     </ScreenLayoutContext.Provider>
   );

package/Components/Layout/TV/index.tsx

@@ -1,11 +1,15 @@
 import * as React from "react";
 import * as R from "ramda";
+import { View, StyleSheet } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import {
   getNavigationProps,
+  getPathAttributes,
   resolveNavigationPlugin,
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
@@ -17,9 +21,23 @@ import { ScreenContainer } from "./ScreenContainer";
 import { TransitionOverlay } from "./TransitionOverlay";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
-import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
-import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+
+import { FocusableGroup } from "../../FocusableGroup";
+import { Screen } from "../../Screen/TV/index.web";
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    width: 1920,
+    height: 1080,
+    backgroundColor: "black",
+    // opacity: 0.5,
+
+    borderWidth: 4,
+    borderColor: "magenta",
+  },
+});
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -27,16 +45,65 @@ type Components = {
 };
 
 type ComponentsExtraProps = {
-  Background?: Record<string, any>;
   NavBar?: Record<string, any>;
+  Background?: Record<string, any>;
 };
 
 type Props = {
   Components: Components;
-  ComponentsExtraProps?: ComponentsExtraProps;
-  children: React.ReactNode;
+  componentsExtraProps?: ComponentsExtraProps;
+};
+
+const StackNavigator = ({ Components }: Props) => {
+  // @ts-ignore
+  const { mainStack, currentRoute } = useNavigation();
+
+  console.log("DEBUG", { mainStack });
+
+  const renderScreen = ({ route, action, key, state }) => {
+    const pathAttributes = getPathAttributes({ pathname: route });
+
+    if (R.isEmpty(pathAttributes)) {
+      return null;
+    }
+
+    console.log("SCENE:", { route, state, key, action });
+
+    const id = `${route}`;
+
+    return (
+      <FocusableGroup
+        id={id}
+        preferredFocus={route === currentRoute}
+        excludeFromFocusSearching
+        key={id}
+      >
+        <View style={styles.container}>
+          <PathnameContext.Provider value={route}>
+            <Screen route={route} Components={Components} />
+          </PathnameContext.Provider>
+        </View>
+      </FocusableGroup>
+    );
+  };
+
+  return mainStack.map(renderScreen);
+};
+
+const TransitionerTV = ({ componentsExtraProps, Components }: Props) => {
+  return (
+    <>
+      <ScreenLayoutContextProvider>
+        <StackNavigator
+          componentsExtraProps={componentsExtraProps}
+          Components={Components}
+        />
+      </ScreenLayoutContextProvider>
+    </>
+  );
 };
 
+// @ts-ignore
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
   const theme = useTheme();
@@ -97,33 +164,57 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
     return null;
   }
 
+  console.log("DEBUG", "TV Layout");
+
   return (
-    <LayoutContainer>
-      <ScreenLayoutContextProvider>
-        <Components.Background
-          backgroundColor={backgroundColor}
-          backgroundImageUrl={backgroundImageUrl}
-          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-        >
-          {!isTVOS ? navBarContainer : null}
-          {navBarReady ? (
-            /**
+    // @ts-ignore
+    <TransitionerTV
+      componentsExtraProps={ComponentsExtraProps}
+      Components={Components}
+    >
+      <LayoutContainer>
+        <ScreenLayoutContextProvider>
+          <Components.Background
+            backgroundColor={backgroundColor}
+            backgroundImageUrl={backgroundImageUrl}
+            {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
+          >
+            {!isTVOS ? navBarContainer : null}
+            {navBarReady ? (
+              /**
              Need to re-mount this component on each navigation event
              It's a hack to work around the fact that we don't support
              correct screen rendering in our navigator (shared currentRoute state)
              **/
-            <PathnameContext.Provider value={navigator.currentRoute}>
-              <ScreenContainer>{children}</ScreenContainer>
-            </PathnameContext.Provider>
-          ) : null}
-          {/** Render NavBarContainer over ScreenContainer to let tvOS native
+              <PathnameContext.Provider value={navigator.currentRoute}>
+                <ScreenContainer>{children}</ScreenContainer>
+              </PathnameContext.Provider>
+            ) : null}
+            {/** Render NavBarContainer over ScreenContainer to let tvOS native
           focus manager works correctly to focus nav bar items first **/}
-          {isTVOS ? navBarContainer : null}
-          <TransitionOverlay />
-        </Components.Background>
-      </ScreenLayoutContextProvider>
-    </LayoutContainer>
+            {isTVOS ? navBarContainer : null}
+            <TransitionOverlay />
+          </Components.Background>
+        </ScreenLayoutContextProvider>
+      </LayoutContainer>
+    </TransitionerTV>
   );
 };
 
 export default Layout;
+
+/// Transitioner:
+/*
+Component: Transitioner
+Responsibilities:
+- Transitione between screens.
+Tehere is no transition on Tv so no need for transitioner.
+
+Component: StackNavigator
+Responsibilities:
+- Render the screens in the stack.
+- Render the NavBar? I guess navbar should be part of the screen
+- Render the screen.
+
+Q
+ */

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -145,13 +145,7 @@ const renderApplePlayer = ({
 }) => {
   const { title, summary } = item || {};
 
-  if (!isApplePlatform() || !player) {
-    return null;
-  }
-
-  // TODO: Check if it is not breaking default player logic on tvos
-  // Also if needs to add on tvos brightcove player for QB player
-  if (player.supportsNativeControls()) {
+  if (!isAppleTV() || !player) {
     return null;
   }
 

package/Components/Screen/TV/index.web.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { last, pathOr } from "ramda";
+import { ScreenResolver } from "../../ScreenResolver";
+import {
+  getNavigationProps,
+  getPathAttributes,
+  resolveNavigationPlugin,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  route: string;
+  Components: Components;
+};
+
+const isPlayer = (routeState): boolean => {
+  const pluginType = pathOr(
+    "unknown_plugin_type",
+    ["state", "screen", "plugin_type"],
+    routeState
+  );
+
+  return pluginType === "player";
+};
+
+export const Screen = (props: Props) => {
+  if (!props.route) {
+    throw new Error("Required props route is missing");
+  }
+
+  const { getStackForPathname } = useNavigation();
+  const { plugins = [] } = usePickFromState(["plugins"]);
+
+  const pathAttributes = getPathAttributes({ pathname: props.route });
+  const routeState = getStackForPathname(props.route);
+
+  console.log("debug_2", "Screen", { routeState, route: props.route });
+
+  const { screenType, screenId } = last(pathAttributes);
+
+  const navigationProps = getNavigationProps({
+    navigator: {
+      activeRiver: routeState.state.screen,
+      // @ts-ignore
+      screenTitle: routeState.state.entry?.title || routeState.screen?.name,
+    },
+    category: "menu",
+  });
+
+  const menuPlugin = resolveNavigationPlugin({
+    category: "menu",
+    navigations: routeState.state.screen?.navigations,
+    plugins,
+  }) as QuickBrickPlugin;
+
+  const NavBar = (props.Components.NavBar ||
+    menuPlugin.module) as React.ComponentType<any>;
+
+  const isNavBarVisible = !isPlayer(routeState);
+
+  return (
+    <>
+      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
+        <NavBar
+          groupId={props.route}
+          isVisible={isNavBarVisible}
+          menuPlugin={menuPlugin}
+          navigationProps={navigationProps}
+          // Maybe activeRiver?
+        />
+      </NavBarContainer>
+      <ScreenResolver
+        screenType={screenType}
+        screenId={screenId}
+        screenData={routeState?.state?.screen}
+        groupId={props.route}
+      />
+    </>
+  );
+};

package/Components/Screen/index.tsx

@@ -137,7 +137,7 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
           {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
         />
 
-        <OfflineFallbackScreen screenData={screenData}>
+        <OfflineFallbackScreen screenData={targetScreenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
           <RouteManager pathname={pathname} screenData={screenData} />
         </OfflineFallbackScreen>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.3631152042",
+  "version": "12.0.0-alpha.4433422595",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.3631152042",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.3631152042",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.3631152042",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3631152042",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4433422595",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4433422595",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4433422595",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4433422595",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",