@applicaster/zapp-react-native-ui-components 14.0.0-alpha.1430213104 → 14.0.0-alpha.1661204539

package/Components/AudioPlayer/Artwork.tsx

@@ -1,16 +1,5 @@
 import React from "react";
-import { View, Image, StyleSheet } from "react-native";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-
-const styles = StyleSheet.create({
-  container: {
-    marginHorizontal: 24,
-  },
-  image: {
-    width: 400,
-    height: 400,
-  },
-});
+import { View, Image } from "react-native";
 
 type Props = {
   srcImage: string;
@@ -20,19 +9,25 @@ type Props = {
     backgroundColor: string;
     backgroundImage: string;
     isRTL: boolean;
-    artworkBorderRadius: Option<number>;
   };
 };
 
-export function Artwork({ srcImage, config }: Props) {
-  const borderRadius = toNumberWithDefaultZero(config.artworkBorderRadius);
+const containerStyles = {
+  marginHorizontal: 24,
+};
+
+const imageStyles = {
+  width: 400,
+  height: 400,
+};
 
+export function Artwork({ srcImage }: Props) {
   return (
-    <View style={styles.container}>
+    <View style={containerStyles}>
       <Image
         fadeDuration={0}
         source={{ uri: srcImage }}
-        style={[styles.image, { borderRadius }]}
+        style={imageStyles}
         resizeMode="cover"
       />
     </View>

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -72,7 +72,6 @@ export function AudioPlayer(props: Props) {
     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"
@@ -155,7 +154,6 @@ export function AudioPlayer(props: Props) {
       artworkAspectRatio,
       channelIcon,
       audioPlayerBackgroundImageDefaultColor,
-      artworkBorderRadius,
     };
   }, [getProp]);
 

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -14,7 +14,6 @@ type Props = {
     backgroundColor: string;
     backgroundImage: string;
     isRTL: boolean;
-    artworkBorderRadius: Option<number>;
   };
   children: React.ReactNode;
   style: ViewStyle;
@@ -98,8 +97,8 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
 
   const backgroundImgStyles = platformSelect({
     tvos: {
-      width: "100%",
-      height: "100%",
+      width: 1920,
+      height: 1080,
       alignItems: "center",
       justifyContent: "center",
     },

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

@@ -17,15 +17,10 @@ exports[`<Artwork /> renders correctly 1`] = `
       }
     }
     style={
-      [
-        {
-          "height": 400,
-          "width": 400,
-        },
-        {
-          "borderRadius": 0,
-        },
-      ]
+      {
+        "height": 400,
+        "width": 400,
+      }
     }
   />
 </View>

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -1,28 +1,54 @@
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageSingleSelectProvider";
+import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/StorageSingleSelectProvider";
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
 import React, { useEffect } from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { BehaviorSubject } from "rxjs";
 import { masterCellLogger } from "../logger";
 import get from "lodash/get";
+import { ScreenMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenStateMultiSelectProvider";
+import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
 
-const parseContextKey = (key: string): string | null => {
-  if (!key?.startsWith("@{ctx/")) return null;
+const parseContextKey = (
+  key: string,
+  context: string = "ctx"
+): string | null => {
+  if (!key?.startsWith(`@{${context}/`)) return null;
 
-  return key.substring("@{ctx/".length, key.length - 1);
+  return key.substring(`@{${context}/`.length, key.length - 1);
 };
 
 const getDataSourceProvider = (
-  behavior: Behavior
+  behavior: Behavior,
+  screenRoute: string
 ): BehaviorSubject<string[] | string> | null => {
   if (!behavior) return null;
 
   const selection = String(behavior.current_selection);
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "multi") {
+      return ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute
+      ).getObservable();
+    }
+
+    if (behavior.select_mode === "single") {
+      return ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute
+      ).getObservable();
+    }
+  }
+
   const contextKey = parseContextKey(selection);
 
   if (contextKey) {
+    // TODO: Add storage scope to behavior
     if (behavior.select_mode === "multi") {
       return StorageMultiSelectProvider.getProvider(contextKey).getObservable();
     }
@@ -41,6 +67,7 @@ const getDataSourceProvider = (
 
 export const useBehaviorUpdate = (behavior: Behavior) => {
   const [lastUpdate, setLastUpdate] = React.useState<number | null>(null);
+  const screenRoute = useRoute()?.pathname || "";
   const player = usePlayer();
 
   const triggerUpdate = () => setLastUpdate(Date.now());
@@ -48,7 +75,7 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
   useEffect(() => {
     if (!behavior) return;
 
-    const dataSource = getDataSourceProvider(behavior);
+    const dataSource = getDataSourceProvider(behavior, screenRoute);
 
     if (dataSource) {
       const subscription = dataSource.subscribe(triggerUpdate);
@@ -72,10 +99,15 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
 
 // We cant use async in this function (its inside render),
 // so we rely on useBehaviorUpdate to update current value and trigger re-render
-export const isCellSelected = (
-  item: ZappEntry,
-  behavior?: Behavior
-): boolean => {
+export const isCellSelected = ({
+  item,
+  screenRoute,
+  behavior,
+}: {
+  item: ZappEntry;
+  screenRoute: string;
+  behavior?: Behavior;
+}): boolean => {
   if (!behavior) return false;
 
   const id = behavior.selector ? get(item, behavior.selector) : item.id;
@@ -99,7 +131,30 @@ export const isCellSelected = (
   }
 
   const selection = String(behavior.current_selection);
-  const contextKey = parseContextKey(selection);
+
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "single") {
+      const selectedItem = ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute
+      ).getValue();
+
+      return selectedItem === String(id);
+    }
+
+    if (behavior.select_mode === "multi") {
+      const selectedItems = ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute
+      ).getSelectedItems();
+
+      return selectedItems?.includes(String(id));
+    }
+  }
+
+  const contextKey = parseContextKey(selection, "ctx");
 
   if (contextKey) {
     if (behavior.select_mode === "single") {

package/Components/MasterCell/utils/index.ts

@@ -8,6 +8,7 @@ import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -190,8 +191,16 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
-  return isCellSelected(item, behavior);
+export const isSelected = ({
+  item,
+  screenRoute,
+  behavior,
+}: {
+  item: ZappEntry;
+  screenRoute: string;
+  behavior?: Behavior;
+}) => {
+  return isCellSelected({ item, screenRoute, behavior });
 };
 
 export const useCellState = ({
@@ -204,9 +213,10 @@ export const useCellState = ({
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
+  const router = useRoute();
 
   const _isSelected = useMemo(
-    () => isSelected(item, behavior),
+    () => isSelected({ item, screenRoute: router?.pathname, behavior }),
     [behavior, item, lastUpdate]
   );
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -6,15 +6,12 @@ import * as R from "ramda";
 import uuid from "uuid/v4";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import {
+  isApplePlatform,
   isTV,
   platformSelect,
   isAndroidTVPlatform,
-  isTvOSPlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
-import {
-  isAudioItem,
-  isInlineTV as isInlineTVUtil,
-} from "@applicaster/zapp-react-native-utils/playerUtils";
+import { isAudioItem } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
@@ -25,7 +22,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { PlayerStateContext } from "../../Contexts/PlayerStateContext";
-
+import { isAppleTV } from "../../Helpers/Platform";
 import {
   QUICK_BRICK_EVENTS,
   QuickBrickEvent,
@@ -100,11 +97,6 @@ const focusableBottomContainerId = "player-container-bottom";
 
 const isAndroidTV = isAndroidTVPlatform();
 
-const isTvOS = isTvOSPlatform();
-
-// height for container with additional content below player
-const INLINE_CONTAINER_CONTENT_HEIGHT = 400;
-
 const withBorderHack = () => {
   if (isAndroidTV) {
     /* @HACK: see GH#7269 */
@@ -134,7 +126,7 @@ const webStyles = {
     flex: "initial",
   },
   inlineRiver: {
-    height: INLINE_CONTAINER_CONTENT_HEIGHT,
+    height: 400,
   },
 };
 
@@ -152,7 +144,7 @@ const nativeStyles = {
     flex: 1,
   },
   inlineRiver: {
-    height: INLINE_CONTAINER_CONTENT_HEIGHT,
+    height: 400,
   },
 };
 
@@ -172,11 +164,12 @@ const renderApplePlayer = ({
   videoStyle,
   playNextData,
 }) => {
-  if (!isTvOS || !player) {
+  const { title, summary } = item || {};
+
+  if (!isAppleTV() || !player) {
     return null;
   }
 
-  // render audio_player for tvos
   if (isAudioContent) {
     return (
       <AudioPlayer
@@ -190,8 +183,6 @@ const renderApplePlayer = ({
     return null;
   }
 
-  const { title, summary } = item || {};
-
   return (
     <ProgramInfo
       title={title}
@@ -202,6 +193,21 @@ const renderApplePlayer = ({
   );
 };
 
+const renderRestPlayers = ({ item, showAudioPlayer, pluginConfiguration }) => {
+  if (isApplePlatform()) {
+    return null;
+  }
+
+  return (
+    showAudioPlayer && (
+      <AudioPlayer
+        audio_item={item}
+        plugin_configuration={pluginConfiguration}
+      />
+    )
+  );
+};
+
 const PlayerContainerComponent = (props: Props) => {
   const {
     Player,
@@ -331,7 +337,7 @@ const PlayerContainerComponent = (props: Props) => {
 
       setState({ error: errorObj });
 
-      if (!isTvOS) {
+      if (!isAppleTV()) {
         setTimeout(() => {
           close();
         }, 800);
@@ -562,7 +568,10 @@ const PlayerContainerComponent = (props: Props) => {
 
   const uri = item?.content ? item.content?.src : null;
 
-  const isInlineTV = isInlineTVUtil(screenData);
+  const isInlineTV =
+    screenData?.ui_components &&
+    screenData?.ui_components?.length > 0 &&
+    isTV();
 
   const inline =
     [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(mode) ||
@@ -617,6 +626,12 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
+  const restPlayerProps = {
+    item,
+    showAudioPlayer: isAudioContent,
+    pluginConfiguration,
+  };
+
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -692,6 +707,8 @@ const PlayerContainerComponent = (props: Props) => {
                       </Player>
                     </PlayerFocusableWrapperView>
 
+                    {renderRestPlayers(restPlayerProps)}
+
                     {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
@@ -715,7 +732,7 @@ const PlayerContainerComponent = (props: Props) => {
                             screenId={screenData.id}
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
-                            cellTapAction={onCellTap}
+                            cellTapAction={(event) => onCellTap(event)}
                             extraAnchorPointYOffset={-600}
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}

package/Decorators/RiverFeedLoader/index.tsx

@@ -13,6 +13,7 @@ import {
   loadDatasources,
   usePipesContexts,
 } from "./utils";
+import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
 type RiverProps = {
   dispatch: DispatchProp;
@@ -25,7 +26,7 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
   return function WrappedWithRiverFeedLoader(props: RiverProps) {
     const { river } = props;
     const { screenData, pathname } = useRoute();
-
+    const resolvers = useScreenResolvers(pathname);
     const pipesContexts = usePipesContexts(river.id, pathname);
 
     const componentsToLoad = ignoreComponentsWithClearCacheFlag(
@@ -49,7 +50,12 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
         item?.filter((item2) => item2 !== undefined)
       );
 
-      loadDatasources(nonEmptyDataSources, river?.id, props.dispatch);
+      loadDatasources(
+        nonEmptyDataSources,
+        river?.id,
+        props.dispatch,
+        resolvers
+      );
     }, []);
 
     return <Component {...props} />;

package/Decorators/RiverFeedLoader/utils/index.ts

@@ -12,11 +12,16 @@ export { getDatasourceUrl } from "./getDatasourceUrl";
 
 export const DATASOURCE_CHUNKS = 10;
 
-export async function loadDatasources(urls: string[][], riverId, dispatch) {
+export async function loadDatasources(
+  urls: string[][],
+  riverId,
+  dispatch,
+  resolvers
+) {
   return reducePromises<string, void>(
     mapPromises<string, void>((url) => {
       if (url) {
-        return dispatch(loadPipesData(url, { riverId }));
+        return dispatch(loadPipesData(url, { riverId, resolvers }));
       }
     }),
     undefined,

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -19,7 +19,10 @@ import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-compon
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import { isVerticalListOrGrid } from "./utils";
-import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
+import {
+  subscribeForUrlContextKeyChanges,
+  subscribeForUrlScreenKeyChanges,
+} from "@applicaster/zapp-pipes-v2-client";
 
 type Props = {
   component: ZappUIComponent;
@@ -204,7 +207,7 @@ export function zappPipesDataConnector(
   Component: React.FC<any> | React.ComponentClass<any>
 ) {
   return function WrappedWithZappPipesData(props: Props) {
-    const { screenData } = useRoute();
+    const { screenData, pathname } = useRoute();
     const { plugins } = usePickFromState(["plugins"]);
 
     const screenContextData = useScreenContext();
@@ -286,6 +289,17 @@ export function zappPipesDataConnector(
       componentIndex
     );
 
+    useEffect(() => {
+      if (!(dataSourceUrl?.includes("pipesv2://") && reloadData)) {
+        return subscribeForUrlScreenKeyChanges(
+          dataSourceUrl,
+          pathname,
+          {},
+          reloadData
+        );
+      }
+    }, [dataSourceUrl, reloadData]);
+
     useEffect(() => {
       if (dataSourceUrl?.includes("pipesv2://") && reloadData) {
         const addListener = getListenerFromPlugin(dataSourceUrl, plugins);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.1430213104",
+  "version": "14.0.0-alpha.1661204539",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.1430213104",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.1430213104",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.1430213104",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1430213104",
+    "@applicaster/applicaster-types": "14.0.0-alpha.1661204539",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.1661204539",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.1661204539",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1661204539",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"