@applicaster/zapp-react-native-ui-components 14.0.0-alpha.7900711229 → 14.0.0-alpha.8419134002

package/Components/AudioPlayer/tv/Artwork.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Image, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 const styles = StyleSheet.create({
@@ -29,7 +30,7 @@ export function Artwork({ srcImage, config }: Props) {
 
   return (
     <View style={styles.container}>
-      <Image
+      <QBImage
         fadeDuration={0}
         source={{ uri: srcImage }}
         style={[styles.image, { borderRadius }]}

package/Components/AudioPlayer/tv/Channel.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Image } from "react-native";
+import { Image } from "react-native";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   srcImage: string;
@@ -15,17 +16,16 @@ type Props = {
 const imageStyles = {
   width: 128,
   height: 72,
-};
 
-const containerStyles = {
-  ...imageStyles,
   marginBottom: 30,
 };
 
 export function Channel({ srcImage }: Props) {
+  if (isNilOrEmpty(srcImage)) {
+    return null;
+  }
+
   return (
-    <View style={containerStyles}>
-      <Image fadeDuration={0} source={{ uri: srcImage }} style={imageStyles} />
-    </View>
+    <Image fadeDuration={0} source={{ uri: srcImage }} style={imageStyles} />
   );
 }

package/Components/AudioPlayer/tv/Layout.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, ImageBackground, ViewStyle } from "react-native";
+import { ImageBackground, View, ViewStyle } from "react-native";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -11,6 +11,7 @@ type Props = {
   config: {
     titleColor: string;
     summaryColor: string;
+    backgroundImageOverlay?: string;
     backgroundColor: string;
     backgroundImage: Option<string>;
     isRTL: boolean;
@@ -20,13 +21,40 @@ type Props = {
   style: ViewStyle;
 };
 
+const backgroundImgStyles = platformSelect({
+  tvos: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  android_tv: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  web: {
+    position: "absolute",
+    margin: "auto",
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%",
+    height: "100%",
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
 export function AudioPlayerTVLayout({
   artwork,
   config,
   children,
   style,
 }: Props) {
-  const { isRTL, backgroundColor, backgroundImage } = config;
+  const { backgroundColor, backgroundImage, backgroundImageOverlay, isRTL } =
+    config;
 
   const backgroundImageSource = { uri: backgroundImage };
 
@@ -34,108 +62,87 @@ export function AudioPlayerTVLayout({
     ? "transparent"
     : backgroundColor;
 
-  const mainContainerStyles = platformSelect({
+  const textContainerStyles = platformSelect({
     tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
       justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
+      alignItems: directionStyles(isRTL).justifyContent,
     },
     android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
       justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
+      alignItems: directionStyles(isRTL).justifyContent,
     },
     web: {
-      width: 1920,
-      height: 1080,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    native: {
-      backgroundColor: backgroundColorStyle,
-      overflow: "hidden",
-      ...style,
-    },
-    samsung_tv: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100vw",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    lg_tv: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100vw",
-      flex: 1,
-      alignItems: "center",
       justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
+      alignItems: directionStyles(isRTL).justifyContent,
     },
   });
 
-  const backgroundImgStyles = platformSelect({
-    tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    web: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100%",
-      height: "100%",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-  });
+  const mainContainerStyles = React.useMemo(
+    () =>
+      platformSelect({
+        tvos: {
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        android_tv: {
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        web: {
+          width: 1920,
+          height: 1080,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        native: {
+          backgroundColor: backgroundColorStyle,
+          overflow: "hidden",
+          ...style,
+        },
+        samsung_tv: {
+          position: "absolute",
+          margin: "auto",
+          display: "flex",
+          flexWrap: "wrap",
+          height: "100vh",
+          width: "100vw",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        lg_tv: {
+          position: "absolute",
+          margin: "auto",
+          display: "flex",
+          flexWrap: "wrap",
+          height: "100vh",
+          width: "100vw",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+      }),
+    [backgroundColorStyle, isRTL, style]
+  );
 
-  const textContainerStyles = platformSelect({
-    tvos: {
-      width: 600,
-      height: 362,
-      marginHorizontal: 24,
-      alignItems: directionStyles(isRTL).justifyContent,
-    },
-    android_tv: {
-      width: 600,
-      height: 362,
-      marginHorizontal: 24,
-      alignItems: directionStyles(isRTL).justifyContent,
-    },
-    web: {
-      margin: 10,
-      height: "100vh",
-      alignItems: directionStyles(isRTL).justifyContent,
-      justifyContent: "center",
-    },
-  });
+  const backgroundOverlayStyles = React.useMemo(
+    () => ({
+      backgroundColor: backgroundImageOverlay,
+    }),
+    [backgroundImageOverlay]
+  );
 
   if (backgroundImage) {
     return (
@@ -144,7 +151,7 @@ export function AudioPlayerTVLayout({
         style={backgroundImgStyles}
         resizeMode="cover"
       >
-        <View style={mainContainerStyles}>
+        <View style={[mainContainerStyles, backgroundOverlayStyles]}>
           <Artwork srcImage={artwork} config={config} />
           <View style={textContainerStyles}>{children}</View>
         </View>

package/Components/AudioPlayer/tv/Runtime.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { View, Text, ViewStyle, TextStyle } from "react-native";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { directionStyles } from "./helpers";
 
 type Props = {
@@ -19,7 +21,6 @@ type Props = {
 
 const containerStyles = ({ isRTL }) => ({
   width: 600,
-  height: 40,
   justifyContent: directionStyles(isRTL)
     .justifyContent as ViewStyle["justifyContent"],
 });
@@ -38,11 +39,16 @@ const textStyles = ({
 });
 
 export function Runtime({ start_time, end_time, config }: Props) {
+  if (isNilOrEmpty(start_time) && isNilOrEmpty(end_time)) {
+    return null;
+  }
+
   return (
     <View style={containerStyles({ isRTL: config.isRTL })}>
       {!!start_time && !!end_time && (
         <Text
           style={textStyles(config) as TextStyle}
+          numberOfLines={1}
         >{`${start_time} - ${end_time}`}</Text>
       )}
     </View>

package/Components/AudioPlayer/tv/Summary.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text, TextStyle, StyleSheet } from "react-native";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   config: {
@@ -18,7 +19,6 @@ type Props = {
 const styles = StyleSheet.create({
   container: {
     width: 600,
-    height: 80,
     marginBottom: 30,
   },
 });
@@ -38,9 +38,13 @@ const textStyles = ({
 });
 
 export function Summary({ summary, config }: Props) {
+  if (isNilOrEmpty(summary)) {
+    return null;
+  }
+
   return (
     <View style={styles.container}>
-      <Text style={textStyles(config)} numberOfLines={2}>
+      <Text style={textStyles(config)} numberOfLines={3}>
         {summary}
       </Text>
     </View>

package/Components/AudioPlayer/tv/Title.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text, TextStyle, StyleSheet } from "react-native";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   config: {
@@ -18,7 +19,6 @@ type Props = {
 const styles = StyleSheet.create({
   container: {
     width: 600,
-    height: 100,
     marginBottom: 12,
   },
 });
@@ -32,9 +32,13 @@ const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
 });
 
 export function Title({ title, config }: Props) {
+  if (isNilOrEmpty(title)) {
+    return null;
+  }
+
   return (
     <View style={styles.container}>
-      <Text style={textStyles(config)} numberOfLines={2}>
+      <Text style={textStyles(config)} numberOfLines={3}>
         {title}
       </Text>
     </View>

package/Components/AudioPlayer/tv/__tests__/__snapshots__/Runtime.test.js.snap

@@ -4,13 +4,13 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
 <View
   style={
     {
-      "height": 40,
       "justifyContent": "flex-start",
       "width": 600,
     }
   }
 >
   <Text
+    numberOfLines={1}
     style={
       {
         "alignItems": "flex-end",
@@ -33,13 +33,13 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
 <View
   style={
     {
-      "height": 40,
       "justifyContent": "flex-end",
       "width": 600,
     }
   }
 >
   <Text
+    numberOfLines={1}
     style={
       {
         "alignItems": "flex-start",

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

@@ -30,10 +30,15 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
   />
   <View
     style={
-      {
-        "backgroundColor": "transparent",
-        "overflow": "hidden",
-      }
+      [
+        {
+          "backgroundColor": "transparent",
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+        },
+      ]
     }
   >
     <View
@@ -65,7 +70,13 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
       />
     </View>
     <View>
-      <View
+      <Image
+        fadeDuration={0}
+        source={
+          {
+            "uri": "https://example.com",
+          }
+        }
         style={
           {
             "height": 72,
@@ -73,33 +84,17 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
             "width": 128,
           }
         }
-      >
-        <Image
-          fadeDuration={0}
-          source={
-            {
-              "uri": "https://example.com",
-            }
-          }
-          style={
-            {
-              "height": 72,
-              "width": 128,
-            }
-          }
-        />
-      </View>
+      />
       <View
         style={
           {
-            "height": 100,
             "marginBottom": 12,
             "width": 600,
           }
         }
       >
         <Text
-          numberOfLines={2}
+          numberOfLines={3}
           style={
             {
               "color": "white",
@@ -116,14 +111,13 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
       <View
         style={
           {
-            "height": 80,
             "marginBottom": 30,
             "width": 600,
           }
         }
       >
         <Text
-          numberOfLines={2}
+          numberOfLines={3}
           style={
             {
               "color": "white",
@@ -141,13 +135,13 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
       <View
         style={
           {
-            "height": 40,
             "justifyContent": "flex-end",
             "width": 600,
           }
         }
       >
         <Text
+          numberOfLines={1}
           style={
             {
               "alignItems": "flex-start",

package/Components/AudioPlayer/tv/__tests__/__snapshots__/channel.test.js.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Channel /> renders correctly 1`] = `
-<View
+<Image
+  fadeDuration={0}
+  source={
+    {
+      "uri": "https://example.com",
+    }
+  }
   style={
     {
       "height": 72,
@@ -9,20 +15,5 @@ exports[`<Channel /> renders correctly 1`] = `
       "width": 128,
     }
   }
->
-  <Image
-    fadeDuration={0}
-    source={
-      {
-        "uri": "https://example.com",
-      }
-    }
-    style={
-      {
-        "height": 72,
-        "width": 128,
-      }
-    }
-  />
-</View>
+/>
 `;

package/Components/AudioPlayer/tv/__tests__/__snapshots__/summary.test.js.snap

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

package/Components/AudioPlayer/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/tv/index.tsx

@@ -35,6 +35,11 @@ export function AudioPlayerTV(props: Props) {
     const backgroundImage = getProp("audio_player_background_image");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
+
+    const backgroundImageOverlay = getProp(
+      "audio_player_background_image_overlay"
+    );
+
     const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
@@ -113,6 +118,7 @@ export function AudioPlayerTV(props: Props) {
       runTimeFontSize,
       channelIcon,
       artworkBorderRadius,
+      backgroundImageOverlay,
     };
   }, [getProp]);
 

package/Components/Cell/index.js

@@ -3,11 +3,15 @@ import * as R from "ramda";
 import { connectToStore } from "@applicaster/zapp-react-native-redux";
 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/MasterCell/index.tsx

@@ -86,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
+      [state, item, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -1,58 +1,28 @@
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/StorageSingleSelectProvider";
+import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageSingleSelectProvider";
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/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";
-import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
-
-const parseContextKey = (
-  key: string,
-  context: string = "ctx"
-): string | null => {
-  if (!key?.startsWith(`@{${context}/`)) return null;
-
-  return key.substring(`@{${context}/`.length, key.length - 1);
+
+const parseContextKey = (key: string): string | null => {
+  if (!key?.startsWith("@{ctx/")) return null;
+
+  return key.substring("@{ctx/".length, key.length - 1);
 };
 
 const getDataSourceProvider = (
-  behavior: Behavior,
-  screenRoute: string,
-  screenStateStore: ScreenStateStore
+  behavior: Behavior
 ): 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,
-        screenStateStore
-      ).getObservable();
-    }
-
-    if (behavior.select_mode === "single") {
-      return ScreenSingleValueProvider.getProvider(
-        screenKey,
-        screenRoute,
-        screenStateStore
-      ).getObservable();
-    }
-  }
-
   const contextKey = parseContextKey(selection);
 
   if (contextKey) {
-    // TODO: Add storage scope to behavior
     if (behavior.select_mode === "multi") {
       return StorageMultiSelectProvider.getProvider(contextKey).getObservable();
     }
@@ -71,8 +41,6 @@ const getDataSourceProvider = (
 
 export const useBehaviorUpdate = (behavior: Behavior) => {
   const [lastUpdate, setLastUpdate] = React.useState<number | null>(null);
-  const screenRoute = useRoute()?.pathname || "";
-  const screenStateStore = useScreenStateStore();
   const player = usePlayer();
 
   const triggerUpdate = () => setLastUpdate(Date.now());
@@ -80,11 +48,7 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
   useEffect(() => {
     if (!behavior) return;
 
-    const dataSource = getDataSourceProvider(
-      behavior,
-      screenRoute,
-      screenStateStore
-    );
+    const dataSource = getDataSourceProvider(behavior);
 
     if (dataSource) {
       const subscription = dataSource.subscribe(triggerUpdate);
@@ -108,17 +72,10 @@ 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,
-  screenRoute,
-  screenStateStore,
-  behavior,
-}: {
-  item: ZappEntry;
-  screenRoute: string;
-  screenStateStore: ScreenStateStore;
-  behavior?: Behavior;
-}): boolean => {
+export const isCellSelected = (
+  item: ZappEntry,
+  behavior?: Behavior
+): boolean => {
   if (!behavior) return false;
 
   const id = behavior.selector ? get(item, behavior.selector) : item.id;
@@ -142,32 +99,7 @@ export const isCellSelected = ({
   }
 
   const selection = String(behavior.current_selection);
-
-  const screenKey = parseContextKey(selection, "screen");
-
-  if (screenKey) {
-    if (behavior.select_mode === "single") {
-      const selectedItem = ScreenSingleValueProvider.getProvider(
-        screenKey,
-        screenRoute,
-        screenStateStore
-      ).getValue();
-
-      return selectedItem === String(id);
-    }
-
-    if (behavior.select_mode === "multi") {
-      const selectedItems = ScreenMultiSelectProvider.getProvider(
-        screenKey,
-        screenRoute,
-        screenStateStore
-      ).getSelectedItems();
-
-      return selectedItems?.includes(String(id));
-    }
-  }
-
-  const contextKey = parseContextKey(selection, "ctx");
+  const contextKey = parseContextKey(selection);
 
   if (contextKey) {
     if (behavior.select_mode === "single") {

package/Components/MasterCell/utils/index.ts

@@ -8,8 +8,6 @@ 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";
-import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -192,18 +190,8 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = ({
-  item,
-  screenRoute,
-  screenStateStore,
-  behavior,
-}: {
-  item: ZappEntry;
-  screenRoute: string;
-  screenStateStore: ScreenStateStore;
-  behavior?: Behavior;
-}) => {
-  return isCellSelected({ item, screenRoute, screenStateStore, behavior });
+export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
+  return isCellSelected(item, behavior);
 };
 
 export const useCellState = ({
@@ -216,17 +204,9 @@ export const useCellState = ({
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
-  const router = useRoute();
-  const screenStateStore = useScreenStateStore();
 
   const _isSelected = useMemo(
-    () =>
-      isSelected({
-        item,
-        screenRoute: router?.pathname,
-        screenStateStore,
-        behavior,
-      }),
+    () => isSelected(item, behavior),
     [behavior, item, lastUpdate]
   );
 

package/Components/Transitioner/Scene.tsx

@@ -36,7 +36,6 @@ export function CurrentScreenContextProvider({
   screenData: NavigationScreenData;
 }) {
   const { pathname, isActive = false, screenData } = props;
-  console.log("CurrentScreenContextProvider", { screenData });
 
   const [initialScreenData, setInitialScreenData] = React.useState(screenData);
 

package/Components/Viewport/VisibilitySensor/VisibilitySensor.tsx

@@ -4,8 +4,8 @@ which helps in detecting whether a given component is visible within the viewpor
 It is useful for implementing lazy loading or triggering specific actions when a component comes into view.
 */
 
-import React, { useEffect, useState, useRef, ReactNode, FC } from "react";
-import { View, Dimensions } from "react-native";
+import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
+import { Dimensions, View } from "react-native";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -78,7 +78,7 @@ const VisibilitySensorComponent: FC<Props> = ({
   };
 
   const stopWatching = () => {
-    interval = clearInterval(interval);
+    clearInterval(interval);
   };
 
   const isInViewPort = () => {

package/Components/default-cell-renderer/viewTrees/tv/DefaultCell/index.ts

@@ -1,10 +1,10 @@
 import {
-  getColor,
   ACTIVE_COLOR,
   BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
   FOCUSED_TEXT_COLOR,
-} from "../../../colors/index";
+  getColor,
+  MAIN_TEXT_COLOR,
+} from "../../../colors";
 
 const Image = "Image";
 const View = "View";

package/Contexts/ScreenDataContext/index.tsx

@@ -11,8 +11,6 @@ export const withScreenDataContextProvider = (Component: any) => {
     // use only initial activeRiver as this context should only be used for "Home", initial route
     const screenData = React.useMemo(() => ({ screen: activeRiver }), []);
 
-    console.log("withScreenDataContextProvider", { screenData, activeRiver });
-
     return (
       <ScreenDataContext.Provider value={screenData}>
         <Component {...props} />

package/Decorators/RiverFeedLoader/index.tsx

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

package/Decorators/RiverFeedLoader/utils/index.ts

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

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -19,11 +19,7 @@ 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,
-  subscribeForUrlScreenKeyChanges,
-} from "@applicaster/zapp-pipes-v2-client";
-import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
 
 type Props = {
   component: ZappUIComponent;
@@ -208,9 +204,7 @@ export function zappPipesDataConnector(
   Component: React.FC<any> | React.ComponentClass<any>
 ) {
   return function WrappedWithZappPipesData(props: Props) {
-    const { screenData, pathname } = useRoute();
-    const screenStateStore = useScreenStateStore();
-
+    const { screenData } = useRoute();
     const { plugins } = usePickFromState(["plugins"]);
 
     const screenContextData = useScreenContext();
@@ -292,18 +286,6 @@ export function zappPipesDataConnector(
       componentIndex
     );
 
-    useEffect(() => {
-      if (!(dataSourceUrl?.includes("pipesv2://") && reloadData)) {
-        return subscribeForUrlScreenKeyChanges(
-          dataSourceUrl,
-          pathname,
-          screenStateStore,
-          {},
-          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.7900711229",
+  "version": "14.0.0-alpha.8419134002",
   "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.7900711229",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.7900711229",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.7900711229",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.7900711229",
+    "@applicaster/applicaster-types": "14.0.0-alpha.8419134002",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.8419134002",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.8419134002",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.8419134002",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"