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

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,10 @@ 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 { 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,15 +26,17 @@ 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 }>,
+  item: ZappEntry,
+  CellRenderer: React.ComponentType<{ item: Object, state: string }>,
   id: string,
   groupId: string,
   onFocus: Function,
@@ -43,7 +45,8 @@ type Props = {
   preferredFocus?: boolean,
   skipFocusManagerRegistration?: boolean,
   isFocusable?: boolean,
-  selected: boolean,
+  behavior: Behavior,
+  selected?: boolean,
 };
 
 export function CellWithFocusable(props: Props) {
@@ -58,9 +61,12 @@ export function CellWithFocusable(props: Props) {
     preferredFocus,
     skipFocusManagerRegistration,
     isFocusable,
-    selected,
+    behavior,
+    selected
   } = props;
 
+  const isFocused = useCellFocusedState(groupId, id);
+  const state = useCellState({ id: item.id, behavior, focused: isFocused, selected });
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
 
   // for horizontal scrolling
@@ -78,10 +84,6 @@ export function CellWithFocusable(props: Props) {
     }
   };
 
-  const isFocused = useCellState(groupId, id);
-
-  const state = getCellState({ focused: isFocused, selected });
-
   return (
     <CellRenderer
       item={item}

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();
 
@@ -228,7 +227,11 @@ export class TvOSCellComponent extends React.Component<Props, State> {
   hasReceivedFocus() {}
 
   scrollTo(index) {
-    this.props?.scrollToIndex?.(index);
+    // Workaround for HL autoscroll/autoloop feature, we scroll manually on tvOS.
+    // Should be removed after refactoring autoscroll/autoloop feature
+    if (this.props.component?.component_type !== "horizontal_list_qb") {
+      this.props?.scrollToIndex?.(index);
+    }
   }
 
   render() {
@@ -246,6 +249,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       hasReceivedFocus,
       groupId,
       isFocusable,
+      behavior
     } = this.props;
 
     const { id } = item;
@@ -275,6 +279,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
             index={index}
             scrollTo={this.scrollTo}
             preferredFocus={preferredFocus}
+            behavior={behavior}
           />
         </View>
       );
@@ -305,10 +310,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/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);

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

@@ -7,6 +7,7 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
   onLayout={[Function]}
   style={
     Object {
+      "borderRadius": 10,
       "height": 100,
       "width": 100,
     }
@@ -22,6 +23,7 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
     style={
       Object {
         "aspectRatio": 1,
+        "borderRadius": 10,
         "height": 100,
         "width": 100,
       }

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -9,10 +9,11 @@ type Props = {
     type?: string;
   };
   style: Styles;
+  cellState: CellState;
 };
 
 export const Toggle = (props: Props) => {
-  const { style, item, action } = props;
+  const { style, item, action, cellState } = props;
 
   const {
     trackColor,
@@ -22,6 +23,7 @@ export const Toggle = (props: Props) => {
     iosBackgroundColor,
   } = style;
 
+  const isSelected = React.useMemo(() => (cellState === "selected"), [item?.id, cellState]);
   const actionContext = useActions(action?.identifier);
 
   const [actionState, setActionState] = useState(
@@ -37,10 +39,10 @@ export const Toggle = (props: Props) => {
   return (
     <Switch
       trackColor={{ false: trackColor, true: trackColorActive }}
-      thumbColor={actionState?.state ? thumbColorActive : thumbColor}
+      thumbColor={isSelected ? thumbColorActive : thumbColor}
       ios_backgroundColor={iosBackgroundColor}
       onValueChange={onPress}
-      value={!!actionState?.state}
+      value={isSelected}
     />
   );
 };