@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5035843303 → 12.0.0-alpha.5062263581

package/Components/AnimatedInOut/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Animated, EasingFunction, StyleProp, ViewStyle } from "react-native";
-
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type AnimatedInterpolatedStyle =
@@ -35,11 +36,16 @@ function getAnimation(config: AnimatedInConfig, phase: "in" | "out") {
   return config[phase] || config;
 }
 
-export function AnimatedInOut(props: Props) {
-  const { visible, animationConfig, children } = props;
-
+export function AnimatedInOut({
+  visible,
+  animationConfig,
+  staticStyles = {},
+  children,
+}: Props) {
   const [animatedValue] = React.useState(new Animated.Value(visible ? 1 : 0));
-  const [animating, setAnimating] = React.useState(null);
+  const [animating, setAnimating] = React.useState(undefined);
+
+  const previousVisible = usePrevious(toBooleanWithDefaultFalse(visible));
 
   function startAnimation(toValue, config) {
     if (animating) {
@@ -55,7 +61,7 @@ export function AnimatedInOut(props: Props) {
       delay,
       useNativeDriver: true,
     }).start(() => {
-      setAnimating(null);
+      setAnimating(undefined);
       onAnimationEnd();
     });
 
@@ -63,12 +69,14 @@ export function AnimatedInOut(props: Props) {
   }
 
   React.useEffect(() => {
-    if (visible) {
+    if (!previousVisible && visible) {
       startAnimation(1.0, getAnimation(animationConfig, "in"));
-    } else {
+    }
+
+    if (previousVisible && !visible) {
       startAnimation(0.0, getAnimation(animationConfig, "out"));
     }
-  }, [visible, animating]);
+  }, [visible, previousVisible]);
 
   const styles = visible
     ? getAnimation(animationConfig, "in").styles
@@ -77,7 +85,7 @@ export function AnimatedInOut(props: Props) {
   return (
     <Animated.View
       renderToHardwareTextureAndroid={animating}
-      style={[styles(animatedValue), props?.staticStyles || {}]}
+      style={[styles(animatedValue), staticStyles]}
     >
       {children}
     </Animated.View>

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -23,6 +23,7 @@ type Props = {
       audio_player_summary_color?: string;
       audio_player_rtl?: boolean;
       magic_background?: boolean;
+      audio_player_background_image_query?: string;
       start_time?: string;
       end_time?: string;
     };
@@ -33,6 +34,7 @@ type Props = {
     audio_player_summary_color?: string;
     audio_player_rtl?: string;
     magic_background?: string;
+    audio_player_background_image_query?: string;
     audio_player_background_image?: string;
     audio_player_artwork_aspect_ratio?: string;
     lg_tv_audio_player_title_font_family?: string;
@@ -73,6 +75,11 @@ export function AudioPlayer(props: Props) {
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
     const magicBackground = getProp("magic_background");
+
+    const audioPlayerBackgroundImageQuery = getProp(
+      "audio_player_background_image_query"
+    );
+
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
     const titleFontFamily = getProp(
@@ -149,7 +156,8 @@ export function AudioPlayer(props: Props) {
       runTimeFontSize,
       artworkAspectRatio,
       channelIcon,
-      magicBackground
+      magicBackground,
+      audioPlayerBackgroundImageQuery,
     };
   }, [getProp]);
 

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -5,6 +5,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
   config={
     Object {
       "artworkAspectRatio": "1:1",
+      "audioPlayerBackgroundImageQuery": "",
       "backgroundColor": "black",
       "backgroundImage": "https://example.com",
       "channelIcon": "https://example.com",
@@ -26,6 +27,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",
@@ -47,6 +49,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",
@@ -68,6 +71,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",
@@ -96,6 +100,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",

package/Components/AudioPlayer/helpers.tsx

@@ -5,6 +5,7 @@ const defaults = {
   audio_player_artwork_aspect_ratio: "1:1",
   audio_player_rtl: false,
   magic_background: false,
+  audio_player_background_image_query: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {

package/Components/Cell/CellWithFocusable.tsx

@@ -3,8 +3,6 @@ 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 { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-
 import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
 
@@ -37,19 +35,18 @@ const useCellFocusedState = (groupId: string, id: string) => {
 };
 
 type Props = {
-  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;
+  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,
 };
 
 export function CellWithFocusable(props: Props) {
@@ -65,19 +62,11 @@ export function CellWithFocusable(props: Props) {
     skipFocusManagerRegistration,
     isFocusable,
     behavior,
-    selected,
-    focused,
+    selected
   } = props;
 
   const isFocused = useCellFocusedState(groupId, id);
-
-  const state = useCellState({
-    id: item.id,
-    behavior,
-    focused: isFocused || toBooleanWithDefaultFalse(focused),
-    selected,
-  });
-
+  const state = useCellState({ id: item.id, behavior, focused: isFocused, selected });
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
 
   // for horizontal scrolling
@@ -106,7 +95,6 @@ export function CellWithFocusable(props: Props) {
       preferredFocus={preferredFocus}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
       isFocusable={isFocusable}
-      focused={focused}
     />
   );
 }

package/Components/Cell/TvOSCellComponent.tsx

@@ -226,7 +226,13 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
   hasReceivedFocus() {}
 
-  scrollTo(index) {}
+  scrollTo(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() {
     const {
@@ -243,7 +249,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       hasReceivedFocus,
       groupId,
       isFocusable,
-      behavior,
+      behavior
     } = this.props;
 
     const { id } = item;
@@ -273,7 +279,6 @@ export class TvOSCellComponent extends React.Component<Props, State> {
             index={index}
             scrollTo={this.scrollTo}
             preferredFocus={preferredFocus}
-            focused={this.props.focused}
             behavior={behavior}
           />
         </View>
@@ -305,7 +310,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
                   item,
                   focused: this.props.focused || selectedCell || focused,
                   scrollTo: this.scrollTo,
-                  behavior,
+                  behavior
                 }}
               />
             );

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -52,13 +52,13 @@ export const GeneralContentScreen = ({
       React.useState(actionsInitialStateSetters.length === 0);
 
     useEffect(() => {
-      log_info(
-        `ScreenContainer: starting to check river action provider ready, current status: ${riverActionProvidersReady}`,
-        { actionsInitialStateSetters }
-      );
-
       if (!riverActionProvidersReady) {
         if (actionsInitialStateSetters.length > 0) {
+          log_info(
+            "ScreenContainer: starting to check river action providers to initialize",
+            { actionsInitialStateSetters }
+          );
+
           allSettled(actionsInitialStateSetters).finally(() => {
             log_info(
               "ScreenContainer: action provider ready, completed. Starting to present screen"

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -104,7 +104,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);

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

@@ -1,3 +1,34 @@
-import FastImage from "@applicaster/react-native-fast-image";
+import React from "react";
+import FastImage, {
+  FastImageProps,
+} from "@applicaster/react-native-fast-image";
 
-export const QBImage = FastImage;
+export const QBImage = (props: FastImageProps) => {
+  const source = React.useMemo(() => {
+    if (typeof props.source === "number") {
+      return props.source;
+    }
+
+    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,
+        ]
+      : []),
+  ]);
+
+  return <FastImage {...props} source={source} />;
+};

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

@@ -14,46 +14,6 @@ exports[`Layout TV renders 1`] = `
   <View
     backgroundImageUrl="http://applicaster.com"
     testID="background-component"
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "position": "absolute",
-            "top": 0,
-            "width": 1920,
-            "zIndex": 10,
-          },
-          Object {
-            "maxHeight": 10,
-          },
-        ]
-      }
-      testID="nav-bar-container"
-    >
-      <View
-        isVisible={true}
-        menuPlugin={
-          Object {
-            "module": [Function],
-            "name": "resolved-menu-plug",
-            "type": "menu",
-          }
-        }
-        navigationProps={
-          Object {
-            "assets": undefined,
-            "home": undefined,
-            "nav_items": undefined,
-            "rules": undefined,
-            "selected": undefined,
-            "styles": undefined,
-            "title": "",
-          }
-        }
-        testID="nav-bar-component"
-      />
-    </View>
-  </View>
+  />
 </View>
 `;

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,10 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 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 {
@@ -43,7 +40,7 @@ type Props = {
 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,10 +77,22 @@ 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;
   }
@@ -96,18 +105,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
           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}
-
+          {!isTVOS ? navBarContainer : null}
           {navBarReady ? (
             /**
              Need to re-mount this component on each navigation event
@@ -118,23 +116,9 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
               <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}
-
+          {/** 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>

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

@@ -4,7 +4,6 @@ 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();
 
@@ -36,9 +35,7 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const focusableId = getFocusableId(prefixId, suffixId);
 
-  const focused =
-    focusableId === focusedButtonId ||
-    toBooleanWithDefaultFalse(otherProps.focused);
+  const focused = focusableId === focusedButtonId;
 
   const additionalStyles = focused ? focusedStyles : normalStyles;
 

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

@@ -31,10 +31,6 @@ 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/tv/ButtonContainerView/index.android.tsx

@@ -61,10 +61,7 @@ export function ButtonContainerView({
     <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator
-            key={`separator_${index}`}
-            width={horizontalGutter}
-          />
+          <HorizontalSeparator key={index} width={horizontalGutter} />
         ),
         cloneElementsWithIds(buttonIds, filteredChildren)
       )}

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.tsx

@@ -7,10 +7,6 @@ import type {
   ContainerProps,
   ContainerChildren,
 } from "./types";
-import {
-  useIsRTL,
-  applyRTLStylesIfNeeded,
-} from "@applicaster/zapp-react-native-utils/localizationUtils";
 
 const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
   <View style={{ width }} />
@@ -21,7 +17,6 @@ export function ButtonContainerView({
   children,
   ...otherProps
 }: ContainerProps) {
-  const isRTL = useIsRTL();
   const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
 
   const filteredChildren = useFilterChildren<ContainerChildren>(children);
@@ -31,13 +26,10 @@ export function ButtonContainerView({
   }
 
   return (
-    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
+    <View style={style}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator
-            key={`separator_${index}`}
-            width={horizontalGutter}
-          />
+          <HorizontalSeparator key={index} width={horizontalGutter} />
         ),
         filteredChildren
       )}