@applicaster/zapp-react-native-ui-components 11.0.0-rc.99 → 12.0.0-alpha.5035843303

package/Components/BaseFocusable/index.ios.ts

@@ -9,7 +9,7 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 type Props = {
   initialFocus?: boolean;
   id: string;
-  groupId?: string;
+  groupId: string;
   preferredFocus?: boolean;
   onRegister?: (focusable: FocusManager.TouchableRef) => void;
   onUnregister?: (focusable: FocusManager.TouchableRef) => void;

package/Components/Cell/Cell.tsx

@@ -11,7 +11,6 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
-import { getCellState } from "./utils";
 
 type Props = {
   item: {
@@ -32,7 +31,7 @@ type Props = {
   component: {
     id: string;
   };
-  selected: boolean;
+  selected?: boolean;
   CellRenderer: React.ComponentType<{
     item: any;
     state: string;
@@ -64,6 +63,7 @@ type Props = {
   isFocusable: boolean;
   skipFocusManagerRegistration?: boolean;
   shouldUpdate: boolean;
+  behavior: Behavior;
 };
 
 const baseCellStyles = {
@@ -80,7 +80,6 @@ const touchableStyles = {
 export class CellComponent extends React.Component<Props> {
   constructor(props) {
     super(props);
-
     this.onPress = this.onPress.bind(this);
     this.onFocus = this.onFocus.bind(this);
     this.onBlur = this.onBlur.bind(this);
@@ -182,14 +181,6 @@ export class CellComponent extends React.Component<Props> {
     };
   }
 
-  getCellState(_focused) {
-    const { selected } = this.props;
-
-    const focused = this.props.focused || _focused;
-
-    return getCellState({ focused, selected });
-  }
-
   isCellFocused(focusableFocused) {
     const { focused, isFocusable = true } = this.props;
 
@@ -211,6 +202,7 @@ export class CellComponent extends React.Component<Props> {
       groupId,
       isFocusable = true,
       skipFocusManagerRegistration,
+      behavior
     } = this.props;
 
     const { id } = item;
@@ -220,7 +212,6 @@ export class CellComponent extends React.Component<Props> {
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;
       focusFn(focusable, mouse);
-
       this.onFocus(focusable, mouse);
     };
 
@@ -238,6 +229,7 @@ export class CellComponent extends React.Component<Props> {
           scrollTo={this.scrollToIndex()}
           isFocusable={isFocusable}
           skipFocusManagerRegistration={skipFocusManagerRegistration}
+          behavior={behavior}
         />
       );
     }
@@ -271,7 +263,7 @@ export class CellComponent extends React.Component<Props> {
                   item,
                   focused: this.isCellFocused(focused),
                   scrollTo: this.scrollToIndex(event),
-                  cellState: this.getCellState(focused),
+                  behavior
                 }}
               />
             );

package/Components/Cell/{CellWithFocusable.js → CellWithFocusable.tsx}

@@ -3,10 +3,12 @@ import * as React from "react";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { getCellState } from "./utils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
 import { isAppleTV } from "../../Helpers/Platform";
+import { useCellState } from "../MasterCell/utils";
 
-const useCellState = (groupId: string, id: string) => {
+const useCellFocusedState = (groupId: string, id: string) => {
   const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
 
   React.useEffect(() => {
@@ -26,24 +28,28 @@ const useCellState = (groupId: string, id: string) => {
 
     focusManager.on(FOCUS_EVENTS.FOCUS, handler);
 
-    return () => focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+    return () => {
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+    };
   }, [groupId]);
 
   return currentCellFocused;
 };
 
 type Props = {
-  item: {},
-  CellRenderer: React.componentType<{ item: Object, state: string }>,
-  id: string,
-  groupId: string,
-  onFocus: Function,
-  index: number,
-  scrollTo: Function,
-  preferredFocus?: boolean,
-  skipFocusManagerRegistration?: boolean,
-  isFocusable?: boolean,
-  selected: boolean,
+  item: ZappEntry;
+  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
+  id: string;
+  groupId: string;
+  onFocus: Function;
+  index: number;
+  scrollTo: Function;
+  preferredFocus?: boolean;
+  skipFocusManagerRegistration?: boolean;
+  isFocusable?: boolean;
+  behavior: Behavior;
+  selected?: boolean;
+  focused?: boolean;
 };
 
 export function CellWithFocusable(props: Props) {
@@ -58,9 +64,20 @@ export function CellWithFocusable(props: Props) {
     preferredFocus,
     skipFocusManagerRegistration,
     isFocusable,
+    behavior,
     selected,
+    focused,
   } = props;
 
+  const isFocused = useCellFocusedState(groupId, id);
+
+  const state = useCellState({
+    id: item.id,
+    behavior,
+    focused: isFocused || toBooleanWithDefaultFalse(focused),
+    selected,
+  });
+
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
 
   // for horizontal scrolling
@@ -78,10 +95,6 @@ export function CellWithFocusable(props: Props) {
     }
   };
 
-  const isFocused = useCellState(groupId, id);
-
-  const state = getCellState({ focused: isFocused, selected });
-
   return (
     <CellRenderer
       item={item}
@@ -93,6 +106,7 @@ export function CellWithFocusable(props: Props) {
       preferredFocus={preferredFocus}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
       isFocusable={isFocusable}
+      focused={focused}
     />
   );
 }

package/Components/Cell/TvOSCellComponent.tsx

@@ -16,10 +16,7 @@ const _getCellState = (focused, selected) =>
   getCellState({ focused, selected });
 
 type Props = {
-  item: {
-    id: string;
-    title: string;
-  };
+  item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (
     focusable: any,
@@ -36,6 +33,7 @@ type Props = {
   componentId: string;
   component: {
     id: number | string;
+    component_type: string;
   };
   selected: boolean;
   CellRenderer: React.ComponentType<{
@@ -71,6 +69,7 @@ type Props = {
   mainOffsetUpdater: (...args: any[]) => void | null | undefined;
   isFocusable: boolean;
   shouldUpdate: boolean;
+  behavior: Behavior;
 };
 
 type State = {
@@ -192,7 +191,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
     if (
       this.props.shouldUpdate &&
-      shouldScrollVertically?.(focusable, id, title)
+      shouldScrollVertically?.(focusable, String(id), String(title))
     ) {
       const { headerOffset } = getHeaderOffset();
 
@@ -227,9 +226,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
   hasReceivedFocus() {}
 
-  scrollTo(index) {
-    this.props?.scrollToIndex?.(index);
-  }
+  scrollTo(index) {}
 
   render() {
     const {
@@ -246,6 +243,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       hasReceivedFocus,
       groupId,
       isFocusable,
+      behavior,
     } = this.props;
 
     const { id } = item;
@@ -275,6 +273,8 @@ export class TvOSCellComponent extends React.Component<Props, State> {
             index={index}
             scrollTo={this.scrollTo}
             preferredFocus={preferredFocus}
+            focused={this.props.focused}
+            behavior={behavior}
           />
         </View>
       );
@@ -305,10 +305,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
                   item,
                   focused: this.props.focused || selectedCell || focused,
                   scrollTo: this.scrollTo,
-                  cellState: getCellState({
-                    focused: this.props.focused || focused,
-                    selected,
-                  }),
+                  behavior,
                 }}
               />
             );

package/Components/FastImage/index.ios.js

@@ -0,0 +1,3 @@
+import { Image } from "react-native";
+
+export default Image;

package/Components/Focusable/FocusableTvOS.tsx

@@ -19,7 +19,7 @@ type Props = {
   onPress?: (nativeEvent: React.SyntheticEvent) => void;
   onFocus?: (nativeEvent: React.SyntheticEvent) => void;
   onBlur?: (nativeEvent: React.SyntheticEvent) => void;
-  children: (focused: boolean) => React.ReactNode;
+  children: (focused?: boolean) => React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;
   selected?: boolean;
@@ -32,6 +32,9 @@ type Props = {
   nextTvosFocusRight?: import("react").RefObject<any>;
   nextTvosFocusUp?: import("react").RefObject<any>;
   nextTvosFocusDown?: import("react").RefObject<any>;
+  forceFocus?: boolean;
+  initialFocus?: boolean;
+  onLayout?: (e: any) => void;
 };
 
 export class Focusable extends BaseFocusable<Props> {

package/Components/FocusableCell/{index.js → index.tsx}

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { Platform } from "react-native";
+import { useCellState } from "../MasterCell/utils";
 
 type Props = {
   index: number,
-  item: {},
+  item: ZappEntry,
   focused: boolean,
   scrollTo?: (index: number) => void,
-  cellState: string,
-  CellRenderer: React.componentType<{ item: Object, state: string }>,
+  CellRenderer: React.ComponentType<{ item: Object, state: string }>,
+  behavior: Behavior
 };
 
 const isAndroid = Platform.OS === "android";
@@ -19,14 +20,16 @@ export function FocusableCell(props: Props) {
     CellRenderer,
     focused,
     scrollTo = null,
-    cellState,
+    behavior
   } = props;
 
+  const state = useCellState({ id: item.id, behavior, focused });
+
   React.useEffect(() => {
     if (focused && scrollTo && !isAndroid) {
       scrollTo(index);
     }
   }, [focused]);
 
-  return <CellRenderer item={item} state={cellState} />;
+  return <CellRenderer item={item} state={state} />;
 }

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -76,8 +76,8 @@ export class FocusableGroup extends BaseFocusable<Props> {
   }
 
   onDidUpdateFocus({ nativeEvent }) {
-    const { onWillUpdateFocus = noop } = this.props;
-    onWillUpdateFocus(nativeEvent);
+    const { onDidUpdateFocus = noop } = this.props;
+    onDidUpdateFocus(nativeEvent);
   }
 
   setFocusDisabled(isFocusDisabled) {

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -9,6 +9,7 @@ import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { produce } from "immer";
 // types reference
 
 declare type CurationEntry = { preset_name: string; feed_url: string };
@@ -39,14 +40,18 @@ export const getTransformedPreset = (
     return;
   }
 
-  return {
-    ...presetComponent,
-    id: `${componentId}${index}`,
-    data: {
-      ...presetComponent.data,
-      source: preset?.feed_url,
-    },
-  };
+  const updatedPresetComponent = produce(presetComponent, (draft) => {
+    draft.id = `${componentId}${index}`;
+    draft.data.source = preset?.feed_url;
+
+    if (draft.ui_components) {
+      draft.ui_components.forEach((comp, uiIndex) => {
+        comp.id = `${draft.id}-${uiIndex}`;
+      });
+    }
+  });
+
+  return updatedPresetComponent;
 };
 
 export const enrichComponent = (

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -93,7 +93,7 @@ export function HandlePlayable({
   modalHeight,
   modalWidth,
   mode,
-}: Props) {
+}: Props): React.ReactElement | null {
   const state = usePickFromState();
 
   const { width: screenWidth, height: screenHeight } =
@@ -171,5 +171,5 @@ export function HandlePlayable({
     );
   }
 
-  return !isModal && <BufferAnimation videoStyle={style as ViewStyle} />;
+  return !isModal ? <BufferAnimation videoStyle={style as ViewStyle} /> : null;
 }

package/Components/HookRenderer/HookRenderer.tsx

@@ -2,9 +2,10 @@ import * as React from "react";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {
   useBackHandler,
-  useNavigation,
+  useIsNavBarVisible,
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useHookAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
+import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = {
   focused?: boolean;
@@ -18,6 +19,8 @@ export const HookRenderer = (props: Props) => {
     screenData: { callback, payload, hookPlugin },
   } = props;
 
+  const { setVisible: showNavBar } = useSetNavbarState();
+
   const {
     module: { Component: HookComponent, presentFullScreen },
     configuration,
@@ -25,7 +28,7 @@ export const HookRenderer = (props: Props) => {
 
   useHookAnalytics(props);
 
-  const navigator = useNavigation();
+  const isNavBarVisible = useIsNavBarVisible();
 
   useBackHandler(() => {
     callback({ success: false, payload, cancelled: true });
@@ -35,18 +38,18 @@ export const HookRenderer = (props: Props) => {
 
   React.useEffect(() => {
     if (presentFullScreen && isTV()) {
-      navigator.hideNavBar();
+      showNavBar(false);
     }
 
     return () => {
       if (isTV()) {
-        navigator.showNavBar();
+        showNavBar(true);
       }
     };
-  }, []);
+  }, [showNavBar]);
 
   // Passing empty parentFocus if navbar is not visible (fullScreen hook)
-  const parentFocus = navigator.isNavBarVisible ? props.parentFocus : {};
+  const parentFocus = isNavBarVisible ? props.parentFocus : {};
 
   return (
     <HookComponent

package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap

@@ -48,7 +48,7 @@ exports[`Layout TV renders 1`] = `
             "rules": undefined,
             "selected": undefined,
             "styles": undefined,
-            "title": undefined,
+            "title": "",
           }
         }
         testID="nav-bar-component"

package/Components/Layout/TV/index.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 import * as R from "ramda";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import {
+  useIsNavBarVisible,
+  useNavigation,
+} from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 
 import {
   getNavigationProps,
@@ -18,9 +20,9 @@ import { ScreenContainer } from "./ScreenContainer";
 import { TransitionOverlay } from "./TransitionOverlay";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
-import { isNavBarVisible as shouldShowNavBar } from "../../Screen/navigationHandler";
 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";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -41,8 +43,8 @@ type Props = {
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
   const theme = useTheme();
-  const { isNavBarVisible, activeRiver, currentRoute } = navigator;
-  const screenData = useCurrentScreenData();
+  const { title } = useNavbarState();
+  const { activeRiver, currentRoute } = navigator;
 
   const {
     appState: { appReady = false } = {},
@@ -52,6 +54,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
 
   const navigationProps = getNavigationProps({
     navigator,
+    title,
     category: "menu",
   });
 
@@ -77,14 +80,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
     []
   );
 
-  const navBarVisible = React.useMemo(() => {
-    return shouldShowNavBar(
-      currentRoute,
-      screenData,
-      isNavBarVisible && !routeIsPlayerScreen(currentRoute),
-      navigator.canGoBack()
-    );
-  }, [isNavBarVisible, currentRoute, screenData?.id, navigator.key]);
+  const navBarVisible = useIsNavBarVisible();
 
   const [navBarReady, setNavBarReady] = React.useState(false);
 

package/Components/Layout/index.tsx

@@ -1,12 +1,20 @@
 import * as React from "react";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
 import Mobile from "./Mobile";
 import TV from "./TV";
 
 export default function Layout(props) {
+  const { currentRoute: pathname } = useNavigation();
+
   if (isTV()) {
-    return <TV {...props} />;
+    return (
+      <ScreenContextProvider pathname={pathname}>
+        <TV {...props} />
+      </ScreenContextProvider>
+    );
   } else {
     return <Mobile {...props} />;
   }

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

@@ -103,7 +103,9 @@ const InsideBorder = ({
 };
 
 export const BorderContainerView = (props: Props) => {
-  const { borderPosition = "outside", style, children } = props;
+  const { style, children } = props;
+  // Return border position prop after re-implementing
+  const borderPosition = "outside";
 
   const borderWidth = toNumberWithDefaultZero(style.borderWidth);
   const spacing = getContainerPadding(borderPosition, borderWidth);

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

@@ -4,6 +4,7 @@ import { Focusable } from "@applicaster/zapp-react-native-ui-components/Componen
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 const { Logger } = getXray();
 
@@ -35,7 +36,9 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const focusableId = getFocusableId(prefixId, suffixId);
 
-  const focused = focusableId === focusedButtonId;
+  const focused =
+    focusableId === focusedButtonId ||
+    toBooleanWithDefaultFalse(otherProps.focused);
 
   const additionalStyles = focused ? focusedStyles : normalStyles;
 

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

@@ -31,6 +31,10 @@ function Image({
 
   const source = useImageSource({ uri, entry, otherProps });
 
+  // const source = {
+  //   uri: `https://placehold.co/392x221/blue/FFFFFF.png?text=${otherProps?.item?.index}`,
+  // };
+
   React.useEffect(() => {
     // reset error state on URI change as the error is referencing previous uri
     setErrorState(null);

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { Platform, View } from "react-native";
+import { Platform, View, ViewStyle } from "react-native";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { PlayerLiveImage } from "../../../VideoLive/PlayerLiveImageComponent";
@@ -173,6 +173,8 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
   return { playerPluginId: actionIdentifier };
 };
 
+const positionAbsolute: ViewStyle = { position: "absolute" };
+
 const LiveImageComponent = (props: LiveImageProps) => {
   const { item, style, cellUUID, imageKey, actionIdentifier, state } = props;
 
@@ -185,7 +187,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
 
   const {
     id: componentId,
-    rules: { player_screen_id, audio_muted_by_default },
+    rules: { player_screen_id, audio_muted_by_default = false },
   } = component;
 
   const isCurrentlyFocused = useTrackCurrentAutoScrollingElement(componentId);
@@ -205,23 +207,24 @@ const LiveImageComponent = (props: LiveImageProps) => {
     cellUUID &&
     isSupportedTVForLiveImage();
 
-  if (isShouldRender) {
-    return (
-      <View style={style}>
-        <PlayerLiveImage
-          playerId={cellUUID}
-          playerPluginId={playerPluginId}
-          screenConfig={screenConfig}
-          style={style}
-          imageKey={imageKey}
-          item={playableEntry}
-          audioMutedByDefault={audio_muted_by_default}
-        />
-      </View>
-    );
-  }
-
-  return <Image {...props} />;
+  return (
+    <>
+      <Image {...props} />
+      {isShouldRender && (
+        <View style={[style, positionAbsolute]}>
+          <PlayerLiveImage
+            playerId={cellUUID}
+            playerPluginId={playerPluginId}
+            screenConfig={screenConfig}
+            style={style}
+            imageKey={imageKey}
+            item={playableEntry}
+            audioMutedByDefault={audio_muted_by_default}
+          />
+        </View>
+      )}
+    </>
+  );
 };
 
 export const LiveImage = React.memo<LiveImageProps>(LiveImageComponent);

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

@@ -71,6 +71,7 @@ const SecondaryImageComponent = (props: Props) => {
             containerHeight,
             containerWidth,
           }),
+          borderRadius: style.borderRadius,
           aspectRatio: imageDimension.aspectRatio,
         }}
       />

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/Image.test.tsx

@@ -15,7 +15,10 @@ describe("SecondaryImage - Image", () => {
 
   it("SecondaryImage should render if known dimensions", async () => {
     const wrapper = await render(
-      <SecondaryImage uri="" style={{ width: 100, height: 100 }} />
+      <SecondaryImage
+        uri=""
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+      />
     );
 
     expect(wrapper.toJSON()).not.toEqual(null);