@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5114122134 → 12.0.0-alpha.5208030571

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -19,6 +19,7 @@ type Props = {
   modalHeight?: number;
   modalWidth?: number;
   mode: VideoModalMode;
+  groupId?: string;
 };
 
 const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
@@ -93,6 +94,7 @@ export function HandlePlayable({
   modalHeight,
   modalWidth,
   mode,
+  groupId,
 }: Props): React.ReactElement | null {
   const state = usePickFromState();
 
@@ -104,7 +106,7 @@ export function HandlePlayable({
   const [Player, playerModuleProperties] = getPlayer(item, state);
 
   const { module: CastPlugin } =
-    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins) || {};
+    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins, true) || {};
 
   const [playable, setPlayable] =
     React.useState<Nullable<PlayableComponent>>(null);
@@ -167,6 +169,7 @@ export function HandlePlayable({
         isModal={isModal}
         mode={mode}
         disableCastAction={playerModuleProperties?.disableCastAction}
+        groupId={groupId}
       />
     );
   }

package/Components/HookRenderer/index.tsx

@@ -1,6 +1 @@
-import * as R from "ramda";
-
-import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator/";
-import { HookRenderer as HookRendererComponent } from "./HookRenderer";
-
-export const HookRenderer = R.compose(withNavigator)(HookRendererComponent);
+export { HookRenderer } from "./HookRenderer";

package/Components/Image/Image.android.tsx

@@ -3,32 +3,10 @@ import FastImage, {
   FastImageProps,
 } from "@applicaster/react-native-fast-image";
 
-export const QBImage = (props: FastImageProps) => {
-  const source = React.useMemo(() => {
-    if (typeof props.source === "number") {
-      return props.source;
-    }
+import { useImageSource } from "./utils";
 
-    return {
-      uri: props.source.uri,
-      headers: props.source.headers,
-      priority: props.source.priority,
-      cache: props.source.cache,
-      maxWidth: props.source.maxWidth,
-      maxHeight: props.source.maxHeight,
-    };
-  }, [
-    ...(typeof props.source === "object"
-      ? [
-          props.source?.uri,
-          props.source?.priority,
-          props.source?.cache,
-          props.source?.headers,
-          props.source?.maxWidth,
-          props.source?.maxHeight,
-        ]
-      : []),
-  ]);
+export const QBImage = (props: FastImageProps) => {
+  const source = useImageSource(props.source);
 
   return <FastImage {...props} source={source} />;
 };

package/Components/Image/Image.tsx

@@ -1,8 +1,24 @@
-import { Image, ImageProps, ImageStyle, StyleProp } from "react-native";
+import React from "react";
+import {
+  Image,
+  ImageBackground,
+  ImageProps,
+  ImageStyle,
+  StyleProp,
+} from "react-native";
 
 export interface Props extends ImageProps {
   style?: StyleProp<ImageStyle> | undefined;
 }
 
 // TODO - React.FC<Props> QBImage should process incoming url and apply any transformations if needed
-export const QBImage = Image;
+export const QBImage = ({
+  children,
+  ...props
+}: Props & { children?: React.ReactNode }) => {
+  if (children) {
+    return <ImageBackground {...props}>{children}</ImageBackground>;
+  }
+
+  return <Image {...props} />;
+};

package/Components/Image/utils/index.ts

@@ -0,0 +1,39 @@
+import FastImage, { Source } from "@applicaster/react-native-fast-image";
+import { useMemo } from "react";
+import { ImageRequireSource } from "react-native";
+
+function getSourceCache(cache: Source["cache"]) {
+  return cache || FastImage.cacheControl.web;
+}
+
+export const useImageSource = (source?: Source | ImageRequireSource) => {
+  return useMemo(() => {
+    if (source) {
+      if (typeof source === "number") {
+        return source;
+      }
+
+      return {
+        uri: source.uri,
+        headers: source.headers,
+        priority: source.priority,
+        cache: getSourceCache(source?.cache),
+        maxWidth: source.maxWidth,
+        maxHeight: source.maxHeight,
+      };
+    }
+
+    return undefined;
+  }, [
+    ...(typeof source === "object"
+      ? [
+          source?.uri,
+          source?.priority,
+          source?.cache,
+          source?.headers,
+          source?.maxWidth,
+          source?.maxHeight,
+        ]
+      : []),
+  ]);
+};

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/__tests__/index.test.tsx

@@ -12,19 +12,7 @@ jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
   useRiverInitialState: () => ({}),
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useCurrentScreenData: jest.fn(() => ({
-    navigations: [
-      {
-        category: "menu",
-        navigation_type: "menu",
-        styles: {
-          hide_secondary_level_menu: false,
-        },
-      },
-    ],
-  })),
-}));
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen");
 
 const Layout = require("..").default;
 
@@ -125,25 +113,4 @@ describe("Layout TV", () => {
       expect(bgComponent.props.testProp).toBe(true);
     });
   });
-
-  describe("props passed to navbar component", () => {
-    it("passes correct props", () => {
-      const { getByTestId } = render(
-        <Layout
-          Components={Components}
-          ComponentsExtraProps={{
-            NavBar: { testProp: true },
-          }}
-        >
-          <Screen />
-        </Layout>,
-        { wrapper }
-      );
-
-      const navbarComponent = getByTestId("nav-bar-component");
-      expect(navbarComponent.props.isVisible).toBe(isNavBarVisible);
-      expect(navbarComponent.props.menuPlugin).toBe(plugins[0]);
-      expect(navbarComponent.props.testProp).toBe(true);
-    });
-  });
 });

package/Components/Layout/TV/index.tsx

@@ -1,14 +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 {
-  useIsNavBarVisible,
-  useNavigation,
-} from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+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";
@@ -20,9 +21,25 @@ 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";
+
+export const ScreenDataContext = React.createContext(null);
+
+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>;
@@ -30,20 +47,77 @@ 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_2", "DEBUG", { mainStack });
+
+  const renderScreen = ({ route, action, key, state }, index) => {
+    const pathAttributes = getPathAttributes({ pathname: route });
+
+    if (R.isEmpty(pathAttributes)) {
+      return null;
+    }
+
+    // console.log("debug_2", "StackNavigator - renderScreen", {
+    //   index,
+    //   route,
+    //   state,
+    //   key,
+    //   action,
+    // });
+
+    const id = `${route}`;
+
+    return (
+      <FocusableGroup
+        id={id}
+        preferredFocus={route === currentRoute}
+        excludeFromFocusSearching
+        key={id}
+      >
+        <View style={styles.container}>
+          <ScreenDataContext.Provider value={state}>
+            <PathnameContext.Provider value={route}>
+              <Screen route={route} Components={Components} />
+            </PathnameContext.Provider>
+          </ScreenDataContext.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();
-  const { title } = useNavbarState();
+  const { title, visible } = useNavbarState();
   const { activeRiver, currentRoute } = navigator;
 
   const {
@@ -80,66 +154,75 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
     []
   );
 
-  const navBarVisible = useIsNavBarVisible();
-
   const [navBarReady, setNavBarReady] = React.useState(false);
 
+  const navBarContainer = (
+    <NavBarContainer isVisible={visible} onReady={setNavBarReady}>
+      <NavBar
+        ref={ComponentsExtraProps?.NavBar?.ref}
+        isVisible={visible && !routeIsPlayerScreen(currentRoute)}
+        menuPlugin={menuPlugin}
+        navigationProps={navigationProps}
+        {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
+      />
+    </NavBarContainer>
+  );
+
+  const isTVOS = isApplePlatform();
+
   if (!appReady) {
     return null;
   }
 
   return (
-    <LayoutContainer>
-      <ScreenLayoutContextProvider>
-        <Components.Background
-          backgroundColor={backgroundColor}
-          backgroundImageUrl={backgroundImageUrl}
-          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-        >
-          {!isApplePlatform() ? (
-            <NavBarContainer isVisible={navBarVisible} onReady={setNavBarReady}>
-              <NavBar
-                ref={ComponentsExtraProps?.NavBar?.ref}
-                isVisible={navBarVisible && !routeIsPlayerScreen(currentRoute)}
-                menuPlugin={menuPlugin}
-                navigationProps={navigationProps}
-                {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
-              />
-            </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}
-
-          {isApplePlatform() ? (
-            /**
-             Render NavBarContainer over ScreenContainer to let tvOS native
-             focus manager works correctly to focus nav bar items first
-            **/
-            <NavBarContainer isVisible={navBarVisible} onReady={setNavBarReady}>
-              <NavBar
-                ref={ComponentsExtraProps?.NavBar?.ref}
-                isVisible={navBarVisible && !routeIsPlayerScreen(currentRoute)}
-                menuPlugin={menuPlugin}
-                navigationProps={navigationProps}
-                {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
-              />
-            </NavBarContainer>
-          ) : null}
-
-          <TransitionOverlay />
-        </Components.Background>
-      </ScreenLayoutContextProvider>
-    </LayoutContainer>
+              <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>
+    </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/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -152,7 +152,6 @@ export const BorderContainerView = (props: Props) => {
     ...updatedPaddings,
     width: updatedWidth,
     height: updatedHeight,
-    ...borderStyleForMissingBorder,
   };
 
   return (

package/Components/MasterCell/DefaultComponents/CellBadge/index.tsx

@@ -1,6 +1,7 @@
 import {
   compact,
   ifElseFocusedSelected,
+  ifElseSelected,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { getPositionStyles } from "./utils";
@@ -12,9 +13,15 @@ type Props = {
   value: Function;
   state: string;
   visible?: Boolean;
+  isMobile?: Boolean;
 };
 
-export const CellBadge = ({ value, state, visible = true }: Props) => {
+export const CellBadge = ({
+  value,
+  state,
+  visible = true,
+  isMobile = false,
+}: Props) => {
   if (!value("cell_badge_switch") || !visible) {
     return null;
   }
@@ -45,13 +52,19 @@ export const CellBadge = ({ value, state, visible = true }: Props) => {
         data: [
           {
             func: () => {
-              return ifElseFocusedSelected(
-                state,
-                value("cell_badge_focused"),
-                value("cell_badge_selected"),
-                value("cell_badge_focused_selected"),
-                value("cell_badge_default")
-              );
+              return isMobile
+                ? ifElseSelected(
+                    state,
+                    value("cell_badge_selected"),
+                    value("cell_badge_default")
+                  )
+                : ifElseFocusedSelected(
+                    state,
+                    value("cell_badge_focused"),
+                    value("cell_badge_selected"),
+                    value("cell_badge_focused_selected"),
+                    value("cell_badge_default")
+                  );
             },
             args: [],
             propName: "uri",

package/Components/MasterCell/DefaultComponents/Image/Image.android.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { ImageStyle, View } from "react-native";
 import * as R from "ramda";
-import ImageComponent from "@applicaster/zapp-react-native-ui-components/Components/FastImage";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 import { useImageSourceWithDefault, useCheckFailedUri } from "./hooks";
+import useImageSize from "./hooks/useImageSize";
 
 type Source = {
   uri: string;
@@ -19,32 +19,13 @@ type Props = Record<string, any> & {
   withDimensions: (source: Source) => Source;
 };
 
-const MemoizedImage = React.memo(ImageComponent, R.equals);
-
-const normalize = Math.ceil;
+const MemoizedImage = React.memo(QBImage, R.equals);
 
 const isValidExternalSource = (source): boolean =>
   source?.uri?.startsWith("http") ||
   source?.uri?.startsWith("data:image") ||
   source?.uri?.startsWith("file://");
 
-const isValidSize = (size: unknown): boolean =>
-  toFiniteNumberWithDefault(0, size) > 0;
-
-const getSourceWithMaxSizes = (applyMaxSize, style, source) => {
-  const { width, height } = style;
-
-  if (!applyMaxSize || !isValidSize(width) || !isValidSize(height)) {
-    return source;
-  }
-
-  return {
-    ...source,
-    maxWidth: normalize(width),
-    maxHeight: normalize(height),
-  };
-};
-
 export default function Image({
   style,
   uri,
@@ -82,10 +63,12 @@ export default function Image({
 
   const applyMaxSize = toBooleanWithDefaultFalse(otherProps?.applyMaxSize);
 
-  const sourceWithMaxSizes = React.useMemo(
-    () => withDimensions(getSourceWithMaxSizes(applyMaxSize, style, source)),
-    [applyMaxSize, style?.height, style?.width, source?.uri, withDimensions]
-  );
+  const sourceWithMaxSizes = useImageSize({
+    style,
+    applyMaxSize,
+    source,
+    withDimensions,
+  });
 
   if (isFailedToLoadUri(uri) || !isValidExternalSource(source)) {
     return <View style={style} />;

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -43,14 +43,16 @@ function Image({
     [source, error]
   );
 
+  const _source = shouldRenderImg
+    ? withDimensions(source)
+    : defaultPlaceHolderImage;
+
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={
-        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
-      }
+      source={_source?.uri ? _source : undefined}
       {...R.omit(["source"], otherProps)}
     />
   );

package/Components/MasterCell/DefaultComponents/Image/hooks/useImageSize.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { ImageStyle } from "react-native";
+import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Source = {
+  uri: string;
+};
+
+type Props = Record<string, any> & {
+  style: ImageStyle;
+  uri?: string;
+  placeholderImage?: string;
+  entry?: ZappEntry | ZappFeed;
+  withDimensions: (source: Source) => Source;
+};
+
+const normalize = Math.ceil;
+
+const isValidSize = (size: unknown): boolean =>
+  toFiniteNumberWithDefault(0, size) > 0;
+
+type WidthDimensions = { aspectRatio?: number; width: number; height?: number };
+type HeightDimensions = {
+  aspectRatio?: number;
+  width?: number;
+  height: number;
+};
+type FullDimensions = { aspectRatio?: number; width: number; height: number };
+type Dimensions = WidthDimensions | HeightDimensions | FullDimensions;
+
+const calculateDimensions = ({ aspectRatio, width, height }: Dimensions) => {
+  if (aspectRatio) {
+    return {
+      width: width || height * aspectRatio,
+      height: height || width / aspectRatio,
+    };
+  }
+
+  return { width, height };
+};
+
+const getSourceWithMaxSizes = (applyMaxSize, style, source) => {
+  const { width, height } = calculateDimensions(style);
+
+  if (!applyMaxSize || !isValidSize(width) || !isValidSize(height)) {
+    return source;
+  }
+
+  return {
+    ...source,
+    maxWidth: normalize(width),
+    maxHeight: normalize(height),
+  };
+};
+
+export default function useImageSize(props: Props) {
+  const { style, applyMaxSize, source, withDimensions } = props;
+
+  const sourceWithMaxSizes = React.useMemo(
+    () => withDimensions(getSourceWithMaxSizes(applyMaxSize, style, source)),
+    [applyMaxSize, style?.height, style?.width, source?.uri, withDimensions]
+  );
+
+  return sourceWithMaxSizes;
+}