@applicaster/zapp-react-native-ui-components 14.0.0-rc.8 → 15.0.0-rc.1

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/__snapshots__/title.test.js.snap

@@ -4,14 +4,13 @@ exports[`<Title /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 100,
       "marginBottom": 12,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/audioPlayer.test.js

@@ -1,7 +1,11 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 
-import { AudioPlayer } from "../AudioPlayer";
+import { AudioPlayerTV } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
+  useArtworkImage: jest.fn(() => "artwork_url"),
+}));
 
 const audioPlayerProps = {
   audio_item: {
@@ -45,9 +49,9 @@ const audioPlayerProps = {
   styles: {},
 };
 
-describe("<AudioPlayer />", () => {
+describe("<AudioPlayerTV />", () => {
   it("renders correctly", () => {
-    const { toJSON } = render(<AudioPlayer {...audioPlayerProps} />);
+    const { toJSON } = render(<AudioPlayerTV {...audioPlayerProps} />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/AudioPlayer/{helpers.tsx → tv/helpers.tsx}

@@ -2,9 +2,8 @@ const defaults = {
   audio_player_title_color: "white",
   audio_player_summary_color: "white",
   audio_player_background_color: "black",
-  audio_player_artwork_aspect_ratio: "1:1",
+  audio_player_background_image: undefined,
   audio_player_rtl: false,
-  audio_player_background_image_default_color: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
@@ -28,13 +27,20 @@ const LTR = {
   justifyContent: "flex-start",
   textAlign: "left",
   alignItems: "flex-end",
-};
+} as const;
 
 const RTL = {
   flexDirection: "row-reverse",
   justifyContent: "flex-end",
   textAlign: "right",
   alignItems: "flex-start",
-};
+} as const;
 
-export const directionStyles = (isRTL) => (isRTL ? RTL : LTR);
+export const directionStyles = (
+  isRTL: boolean
+): {
+  flexDirection: "row" | "row-reverse";
+  justifyContent: "flex-start" | "flex-end";
+  textAlign: "left" | "right";
+  alignItems: "flex-end" | "flex-start";
+} => (isRTL ? RTL : LTR);

package/Components/AudioPlayer/{AudioPlayer.tsx → tv/index.tsx}

@@ -1,60 +1,24 @@
 import React, { useCallback, useMemo } from "react";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { AudioPlayerTVLayout } from "./Layout";
 
-import { AudioPlayerLayout } from "./AudioPlayerLayout";
 import { Channel } from "./Channel";
 import { Title } from "./Title";
 import { Summary } from "./Summary";
 import { Runtime } from "./Runtime";
 import { getPropertyFromEntryOrConfig } from "./helpers";
-import { ViewStyle } from "react-native";
-
-type Props = {
-  audio_item: ZappEntry & {
-    extensions?: {
-      audio_player_artwork_aspect_ratio?: string;
-      audio_player_background_image?: string;
-      audio_player_background_color?: string;
-      audio_player_channel_icon?: string;
-      audio_player_title_color?: string;
-      audio_player_summary_color?: string;
-      audio_player_rtl?: boolean;
-      audio_player_background_image_default_color?: string;
-      start_time?: string;
-      end_time?: string;
-    };
-  };
-  plugin_configuration: {
-    audio_player_background_color?: string;
-    audio_player_title_color?: string;
-    audio_player_summary_color?: string;
-    audio_player_rtl?: string;
-    audio_player_background_image_default_color?: string;
-    audio_player_background_image?: string;
-    audio_player_artwork_aspect_ratio?: string;
-    lg_tv_audio_player_title_font_family?: string;
-    lg_tv_audio_player_title_font_size?: number;
-    lg_tv_audio_player_summary_font_family?: string;
-    lg_tv_audio_player_summary_font_size?: number;
-    samsung_tv_audio_player_title_font_family?: string;
-    samsung_tv_audio_player_title_font_size?: number;
-    samsung_tv_audio_player_summary_font_family?: string;
-    samsung_tv_audio_player_summary_font_size?: number;
-    tv_os_audio_player_title_font_family?: string;
-    tv_os_audio_player_title_font_size?: number;
-    tv_os_audio_player_summary_font_family?: string;
-    tv_os_audio_player_summary_font_size?: number;
-  };
-  style?: ViewStyle;
-};
-
-export function AudioPlayer(props: Props) {
-  const { audio_item, plugin_configuration, style } = props;
+
+import { Props } from "../types";
+
+export function AudioPlayerTV(props: Props) {
+  const { audio_item, plugin_configuration, style = {} } = props;
   const { extensions, title, summary } = audio_item;
 
+  const artwork = useArtworkImage(audio_item);
+
   const getProp = useCallback(
     getPropertyFromEntryOrConfig({
       entry: audio_item,
@@ -64,20 +28,20 @@ export function AudioPlayer(props: Props) {
   );
 
   const config = useMemo(() => {
-    // Checking if we are recieving items from the DSP
+    // Checking if we are receiving items from the DSP
     const titleColor = getProp("audio_player_title_color");
     const summaryColor = getProp("audio_player_summary_color");
     const backgroundColor = getProp("audio_player_background_color");
     const backgroundImage = getProp("audio_player_background_image");
-    const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
-    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
-    const audioPlayerBackgroundImageDefaultColor = getProp(
-      "audio_player_background_image_default_color"
+    const backgroundImageOverlay = getProp(
+      "audio_player_background_image_overlay"
     );
 
+    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
+
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
     const titleFontFamily = getProp(
@@ -152,23 +116,18 @@ export function AudioPlayer(props: Props) {
       summaryFontSize,
       runTimeFontFamily,
       runTimeFontSize,
-      artworkAspectRatio,
       channelIcon,
-      audioPlayerBackgroundImageDefaultColor,
       artworkBorderRadius,
+      backgroundImageOverlay,
     };
   }, [getProp]);
 
-  const artwork = imageSrcFromMediaItem(audio_item, [
-    config?.artworkAspectRatio,
-  ]);
-
   return (
-    <AudioPlayerLayout artwork={artwork} config={config} style={style || {}}>
+    <AudioPlayerTVLayout artwork={artwork} config={config} style={style}>
       <Channel srcImage={config?.channelIcon} config={config} />
       <Title title={title} config={config} />
       <Summary summary={summary} config={config} />
       <Runtime {...extensions} config={config} />
-    </AudioPlayerLayout>
+    </AudioPlayerTVLayout>
   );
 }

package/Components/AudioPlayer/types.ts

@@ -0,0 +1,40 @@
+import { ViewStyle } from "react-native";
+
+export type Props = {
+  audio_item: ZappEntry & {
+    extensions?: {
+      audio_player_artwork_aspect_ratio?: string;
+      audio_player_background_image?: string;
+      audio_player_background_color?: string;
+      audio_player_channel_icon?: string;
+      audio_player_title_color?: string;
+      audio_player_summary_color?: string;
+      audio_player_rtl?: boolean;
+      audio_player_background_image_default_color?: string;
+      start_time?: string;
+      end_time?: string;
+    };
+  };
+  plugin_configuration: {
+    audio_player_background_color?: string;
+    audio_player_title_color?: string;
+    audio_player_summary_color?: string;
+    audio_player_rtl?: string;
+    audio_player_background_image_default_color?: string;
+    audio_player_background_image?: string;
+    audio_player_artwork_aspect_ratio?: string;
+    lg_tv_audio_player_title_font_family?: string;
+    lg_tv_audio_player_title_font_size?: number;
+    lg_tv_audio_player_summary_font_family?: string;
+    lg_tv_audio_player_summary_font_size?: number;
+    samsung_tv_audio_player_title_font_family?: string;
+    samsung_tv_audio_player_title_font_size?: number;
+    samsung_tv_audio_player_summary_font_family?: string;
+    samsung_tv_audio_player_summary_font_size?: number;
+    tv_os_audio_player_title_font_family?: string;
+    tv_os_audio_player_title_font_size?: number;
+    tv_os_audio_player_summary_font_family?: string;
+    tv_os_audio_player_summary_font_size?: number;
+  };
+  style?: ViewStyle;
+};

package/Components/BaseFocusable/index.tsx

@@ -146,10 +146,14 @@ export class BaseFocusable<
    * @param {Object} scrollDirection
    * @returns {Promise}
    */
-  onFocus: FocusManager.FocusEventCB = (focusable, scrollDirection) => {
+  onFocus: FocusManager.FocusEventCB = (
+    focusable,
+    scrollDirection,
+    context
+  ) => {
     const { onFocus = noop } = this.props;
     this.setFocusedState(true);
-    onFocus(focusable, scrollDirection);
+    onFocus(focusable, scrollDirection, context);
   };
 
   /**
@@ -247,8 +251,8 @@ export class BaseFocusable<
    * @param {Object} scrollDirection
    * @returns {Promise}
    */
-  focus(_, scrollDirection) {
-    return this.onFocus(this, scrollDirection); // invokeComponentMethod(this, "onFocus", scrollDirection);
+  focus(_, scrollDirection, context?: FocusManager.FocusContext) {
+    return this.onFocus(this, scrollDirection, context); // invokeComponentMethod(this, "onFocus", scrollDirection, context);
   }
 
   /**
@@ -258,9 +262,10 @@ export class BaseFocusable<
    */
   blur(
     _,
-    scrollDirection?: FocusManager.Web.Direction | FocusManager.IOS.Direction
+    scrollDirection?: FocusManager.Web.Direction | FocusManager.IOS.Direction,
+    context?: FocusManager.FocusContext
   ) {
-    return this.onBlur(this, scrollDirection);
+    return this.onBlur(this, scrollDirection, context);
   }
 
   /**
@@ -272,7 +277,7 @@ export class BaseFocusable<
    * @param {string} scrollDirection string representation of the direction of the navigation which landed
    * to this item being focused
    */
-  _executeFocusSequence(methodNames, scrollDirection) {
+  _executeFocusSequence(methodNames, scrollDirection, context) {
     return R.reduce(
       (sequence, methodName) => {
         const method = this[methodName]; // Access the method by name
@@ -284,7 +289,7 @@ export class BaseFocusable<
         }
 
         return sequence
-          .then(() => method.call(this, scrollDirection))
+          .then(() => method.call(this, this, scrollDirection, context))
           .catch((e) => {
             throw e; // Re-throw for consistent error handling
           });
@@ -294,15 +299,21 @@ export class BaseFocusable<
     );
   }
 
-  setFocus(scrollDirection) {
+  setFocus(
+    scrollDirection?: ScrollDirection,
+    context?: FocusManager.FocusContext
+  ) {
     const focusMethods = ["willReceiveFocus", "focus", "hasReceivedFocus"];
 
-    return this._executeFocusSequence(focusMethods, scrollDirection);
+    return this._executeFocusSequence(focusMethods, scrollDirection, context);
   }
 
-  setBlur(scrollDirection) {
+  setBlur(
+    scrollDirection?: ScrollDirection,
+    context?: FocusManager.FocusContext
+  ) {
     const blurMethods = ["willLoseFocus", "blur", "hasLostFocus"];
 
-    return this._executeFocusSequence(blurMethods, scrollDirection);
+    return this._executeFocusSequence(blurMethods, scrollDirection, context);
   }
 }

package/Components/Cell/Cell.tsx

@@ -8,6 +8,7 @@ import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { CellFocusedStateContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/CellFocusedStateContext";
 
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
@@ -15,6 +16,7 @@ import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUt
 import { styles } from "./styles";
 
 type Props = {
+  dataLength: number;
   item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
@@ -67,9 +69,12 @@ type Props = {
 
 type State = {
   hasFocusableInside: boolean;
+  cellFocused: boolean;
 };
 
 export class CellComponent extends React.Component<Props, State> {
+  accessibilityManager: AccessibilityManager;
+
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -79,10 +84,14 @@ export class CellComponent extends React.Component<Props, State> {
     this.hasReceivedFocus = this.hasReceivedFocus.bind(this);
     this.scrollVertically = this.scrollVertically.bind(this);
     this.scrollToIndex = this.scrollToIndex.bind(this);
+    this.handleAccessibilityFocus = this.handleAccessibilityFocus.bind(this);
 
     this.state = {
       hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
+      cellFocused: false,
     };
+
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -130,6 +139,8 @@ export class CellComponent extends React.Component<Props, State> {
     } = this.props;
 
     if (isFocusable) {
+      this.setState({ cellFocused: true });
+
       if (
         shouldUpdate &&
         shouldScrollVertically?.(mouse, focusable, id, title)
@@ -139,7 +150,9 @@ export class CellComponent extends React.Component<Props, State> {
     }
   }
 
-  onBlur() {}
+  onBlur() {
+    this.setState({ cellFocused: false });
+  }
 
   willReceiveFocus() {}
 
@@ -183,6 +196,25 @@ export class CellComponent extends React.Component<Props, State> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
+  handleAccessibilityFocus(index, dataLength) {
+    // For loop scrolling, calculate the correct logical index
+    const logicalIndex = dataLength ? index % dataLength : index;
+
+    const positionLabel = dataLength
+      ? `item ${logicalIndex + 1} of ${dataLength}`
+      : "";
+
+    if (this.state.hasFocusableInside) {
+      this.accessibilityManager.readText({
+        text: " ",
+      });
+    } else {
+      this.accessibilityManager.readText({
+        text: `${positionLabel}`,
+      });
+    }
+  }
+
   componentDidUpdate(prevProps: Readonly<Props>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
@@ -191,6 +223,8 @@ export class CellComponent extends React.Component<Props, State> {
         ),
       });
     }
+
+    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
   }
 
   render() {
@@ -212,7 +246,6 @@ export class CellComponent extends React.Component<Props, State> {
     } = this.props;
 
     const { id } = item;
-
     const focusableId = join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
@@ -223,73 +256,67 @@ export class CellComponent extends React.Component<Props, State> {
 
     if (this.state.hasFocusableInside) {
       return (
-        <CellWithFocusable
-          CellRenderer={CellRenderer}
-          item={item}
-          id={focusableId}
-          groupId={groupId || component?.id}
-          onFocus={handleFocus}
-          index={index}
-          scrollTo={this.scrollToIndex()}
-          isFocusable={isFocusable}
-          skipFocusManagerRegistration={skipFocusManagerRegistration}
-          behavior={behavior}
-        />
+        <CellFocusedStateContextProvider cellFocused={this.state.cellFocused}>
+          <CellWithFocusable
+            CellRenderer={CellRenderer}
+            item={item}
+            id={focusableId}
+            groupId={groupId || component?.id}
+            onFocus={handleFocus}
+            onBlur={onBlur || this.onBlur}
+            index={index}
+            scrollTo={this.scrollToIndex()}
+            isFocusable={isFocusable}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
+            behavior={behavior}
+          />
+        </CellFocusedStateContextProvider>
       );
     }
 
     return (
-      <View
-        testID={`${component?.id}-${id}`}
-        accessible={false}
-        style={styles.touchableCell}
-      >
-        <Focusable
-          id={focusableId}
-          groupId={groupId || component?.id}
-          onFocus={handleFocus}
-          onBlur={onBlur || this.onBlur}
-          onPress={this.onPress}
-          willReceiveFocus={willReceiveFocus || this.willReceiveFocus}
-          hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
-          preferredFocus={preferredFocus}
-          offsetUpdater={offsetUpdater}
-          style={styles.baseCell}
-          isFocusable={isFocusable}
-          skipFocusManagerRegistration={skipFocusManagerRegistration}
+      <CellFocusedStateContextProvider cellFocused={this.state.cellFocused}>
+        <View
+          testID={`${component?.id}-${id}`}
+          accessible={false}
+          style={styles.touchableCell}
         >
-          {(focused, event) => {
-            const isFocused = this.isCellFocused(focused);
-
-            if (isFocused) {
-              const accessibilityManager = AccessibilityManager.getInstance();
-
-              const accessibilityTitle =
-                item?.extensions?.accessibility?.label || item?.title || "";
-
-              const accessibilityHint =
-                item?.extensions?.accessibility?.hint || "";
-
-              accessibilityManager.readText({
-                text: `${accessibilityTitle} ${accessibilityHint}`,
-              });
-            }
-
-            return (
-              <FocusableCell
-                {...{
-                  index,
-                  CellRenderer,
-                  item,
-                  focused: isFocused,
-                  scrollTo: this.scrollToIndex(event),
-                  behavior,
-                }}
-              />
-            );
-          }}
-        </Focusable>
-      </View>
+          <Focusable
+            id={focusableId}
+            groupId={groupId || component?.id}
+            onFocus={handleFocus}
+            onBlur={onBlur || this.onBlur}
+            onPress={this.onPress}
+            willReceiveFocus={willReceiveFocus || this.willReceiveFocus}
+            hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
+            preferredFocus={preferredFocus}
+            offsetUpdater={offsetUpdater}
+            style={styles.baseCell}
+            isFocusable={isFocusable}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
+            {...this.accessibilityManager.getButtonAccessibilityProps(
+              item?.extensions?.accessibility?.label || item?.title
+            )}
+          >
+            {(focused, event) => {
+              const isFocused = this.isCellFocused(focused);
+
+              return (
+                <FocusableCell
+                  {...{
+                    index,
+                    CellRenderer,
+                    item,
+                    focused: isFocused,
+                    scrollTo: this.scrollToIndex(event),
+                    behavior,
+                  }}
+                />
+              );
+            }}
+          </Focusable>
+        </View>
+      </CellFocusedStateContextProvider>
     );
   }
 }

package/Components/Cell/CellWithFocusable.tsx

@@ -14,6 +14,7 @@ type Props = {
   id: string;
   groupId: string;
   onFocus: Function;
+  onBlur?: Function;
   index: number;
   scrollTo: Function;
   preferredFocus?: boolean;
@@ -33,6 +34,7 @@ export function CellWithFocusable(props: Props) {
     id,
     groupId,
     onFocus,
+    onBlur = noop,
     scrollTo = noop,
     preferredFocus,
     skipFocusManagerRegistration,
@@ -78,6 +80,7 @@ export function CellWithFocusable(props: Props) {
   const onGroupBlur = React.useCallback(() => {
     if (!skipFocusManagerRegistration) {
       setIsFocused(false);
+      onBlur?.();
     }
   }, [skipFocusManagerRegistration]);
 

package/Components/Cell/__tests__/CellWIthFocusable.test.js

@@ -1,12 +1,13 @@
 import { View } from "react-native";
 import React from "react";
-import { act, render } from "@testing-library/react-native";
+import { act } from "@testing-library/react-native";
 import { CellWithFocusable } from "../CellWithFocusable.tsx";
 
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils/index.tsx";
 
 const renderWith = (props) => {
-  return render(<CellWithFocusable {...props} />);
+  return renderWithProviders(<CellWithFocusable {...props} />);
 };
 
 describe("CellWithFocusable", () => {

package/Components/Cell/index.js

@@ -1,13 +1,17 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-import { HorizontalScrollContext, RiverOffsetContext } from "../../Contexts";
+import {
+  HorizontalScrollContext,
+  RiverOffsetContext,
+  ScreenScrollingContext,
+} from "../../Contexts";
+
 import { CellComponent } from "./Cell";
 import { TvOSCellComponent } from "./TvOSCellComponent";
 import { withConsumer } from "../../Contexts/HeaderOffsetContext";
-import { ScreenScrollingContext } from "../../Contexts/ScreenScrollingContext";
 
 import { ScreenLayoutContextConsumer } from "../../Contexts/ScreenLayoutContext";
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";

package/Components/ComponentResolver/index.ts

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { ComponentResolverComponent } from "./ComponentResolver";
 

package/Components/FeedLoader/FeedLoader.tsx

@@ -1,25 +1,16 @@
 import React from "react";
 import * as R from "ramda";
+import { selectZappPipes } from "@applicaster/zapp-react-native-redux";
 
 type Props = {
-  zappPipes: ZappPipesData;
-  loadPipesData: (
-    feed: string,
-    options?: Partial<{
-      clearCache: boolean;
-      meta: any;
-      loadLocalFavorites: boolean;
-      silentRefresh: boolean;
-      parentFeed: ZappFeed;
-      callback: () => void;
-      bodyParams: any;
-      riverId: string;
-    }>
-  ) => void;
+  zappPipes: ReturnType<typeof selectZappPipes>;
+  loadPipesData: ReturnType<
+    typeof import("@applicaster/zapp-react-native-utils/reactHooks/feed").useLoadPipesDataDispatch
+  >;
   feedUrl: string;
-  children: (feed: ZappFeed) => React.ComponentType<any>;
+  children: (feed: ZappFeed) => React.ReactNode;
   onFeedLoaded: (feed: ZappFeed) => {};
-  onError: (feed: ZappFeed) => {};
+  onError: (error: ZappPipesData["error"]) => {};
   refreshing: boolean;
   refreshCallback: () => void;
 };