@applicaster/zapp-react-native-ui-components 12.0.0-rc.25 → 12.0.0-rc.28

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/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

@@ -125,25 +125,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/SharedUI/CollapsibleTextContainer/index.ts

@@ -1,6 +1,7 @@
-import { path, pathOr } from "ramda";
+import { path } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import {
+  getColorFromData,
   getKeyForLabel,
   mapSelfAlignment,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
@@ -48,19 +49,12 @@ export const CollapsibleTextContainer = ({
       ]),
       {
         func: (data) => {
-          const value = getValue("background_color");
-
-          const valueFromData = pathOr(value, value.split("."), data);
-
-          if (
-            valueFromData &&
-            (valueFromData.startsWith("#") || valueFromData.startsWith("rgba("))
-          ) {
-            return valueFromData;
-          }
-
-          // return default value
-          return additionalStyles.backgroundColor;
+          return getColorFromData({
+            data,
+            getValue,
+            key: "background_color",
+            defaultColor: additionalStyles.backgroundColor,
+          });
         },
         propName: "backgroundColor",
       },

package/Components/MasterCell/utils/index.ts

@@ -285,8 +285,8 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
       }
     }
   }, [behavior]);
-
-  useEffect(() => {
+  
+   useEffect(() => {
     if (!behavior) {
       return;
     }

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -0,0 +1,121 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { View, LayoutChangeEvent, ScrollView } from "react-native";
+import { Button } from "./Button";
+import { ItemIconProps } from "./Button/ItemIcon";
+import { ItemProps } from "./Button/Item";
+import { ItemLabelProps } from "./Button/ItemLabel";
+import {
+  defaultItemIconProps,
+  defaultItemLabelProps,
+  defaultItemProps,
+} from "./utils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import { ModalHeader } from "./Header";
+
+type ModalComponentProps = {
+  items: any[];
+  current_selection?: any;
+  onPress: (item: any) => void;
+  width: number;
+  currentRoute: boolean;
+  summary?: string;
+  title?: string;
+  maxHeight?: number;
+  dismiss: () => void;
+  buttonComponent?: React.ComponentType;
+};
+
+export function BottomSheetModalContent(props: ModalComponentProps) {
+  const {
+    items,
+    currentRoute,
+    maxHeight,
+    current_selection = null,
+    onPress,
+    dismiss,
+    summary,
+    title,
+    buttonComponent: ButtonComponent = Button,
+  } = props;
+
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const route = useRef(currentRoute);
+  const theme = useTheme<BaseThemePropertiesMobile>();
+
+  const maxContentHeight = maxHeight
+    ? maxHeight - headerHeight - Number(theme.modal_bottom_sheet_padding_top)
+    : undefined;
+
+  const onHeaderLayout = useCallback((event: LayoutChangeEvent) => {
+    setHeaderHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  useEffect(() => {
+    if (currentRoute !== route.current) {
+      props.dismiss();
+    }
+  }, [currentRoute]);
+
+  const iconBaseProps = useMemo<ItemIconProps>(() => {
+    return defaultItemIconProps(theme);
+  }, [theme]);
+
+  const itemBaseProps = useMemo<ItemProps>(() => {
+    return defaultItemProps(theme, props.width);
+  }, [theme, props.width]);
+
+  const labelBaseProps = useMemo<ItemLabelProps>(() => {
+    return defaultItemLabelProps(theme, props.width);
+  }, [theme, props.width]);
+
+  const handlePress = (item: any) => {
+    onPress(item);
+    dismiss();
+  };
+
+  return (
+    <View
+      style={{
+        paddingTop: Number(theme.modal_bottom_sheet_padding_top),
+      }}
+    >
+      <ModalHeader
+        width={props.width}
+        dismiss={dismiss}
+        configuration={theme}
+        onLayout={onHeaderLayout}
+        summary={summary}
+        title={title}
+      />
+      <ScrollView
+        bounces={false}
+        style={{ maxHeight: maxContentHeight }}
+        contentContainerStyle={{
+          paddingBottom: Number(theme.modal_bottom_sheet_padding_bottom),
+          paddingTop: Number(theme.modal_bottom_sheet_padding_top),
+        }}
+      >
+        {items.map((item, index) => (
+          <ButtonComponent
+            key={index}
+            width={props.width}
+            configuration={theme}
+            selectedItem={current_selection}
+            item={item}
+            onPress={handlePress}
+            iconBaseProps={iconBaseProps}
+            itemBaseProps={itemBaseProps}
+            labelBaseProps={labelBaseProps}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
+}

package/Components/ModalComponent/Button/Item.tsx

@@ -0,0 +1,82 @@
+import React, { ReactChild } from "react";
+import { View, StyleSheet } from "react-native";
+
+export type ItemProps = {
+  backgroundColor: string;
+  focusedBackgroundColor: string;
+  selectedBackgroundColor?: string;
+  focusectedBackgroundColor?: string;
+  borderRadius: number;
+  marginBottom: number;
+  marginLeft: number;
+  marginRight: number;
+  marginTop: number;
+  paddingTop: number;
+  paddingBottom: number;
+  paddingRight: number;
+  paddingLeft: number;
+  focused?: boolean;
+  selected?: boolean;
+  children?: ReactChild[];
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+});
+
+function getBackgroundColor({
+  selected,
+  focused,
+  backgroundColor,
+  focusedBackgroundColor,
+  selectedBackgroundColor,
+  focusectedBackgroundColor,
+}) {
+  switch (true) {
+    case selected && focused:
+      return focusectedBackgroundColor;
+    case selected && !focused:
+      return selectedBackgroundColor;
+    case !selected && focused:
+      return focusedBackgroundColor;
+    default:
+      return backgroundColor;
+  }
+}
+
+export function Item(props: ItemProps) {
+  const {
+    backgroundColor,
+    focusedBackgroundColor,
+    focusectedBackgroundColor,
+    selectedBackgroundColor,
+    children,
+    focused,
+    selected,
+    ...itemStyles
+  } = props;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        itemStyles,
+        {
+          backgroundColor: getBackgroundColor({
+            selected,
+            focused,
+            focusectedBackgroundColor,
+            focusedBackgroundColor,
+            selectedBackgroundColor,
+            backgroundColor,
+          }),
+        },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}

package/Components/ModalComponent/Button/ItemIcon.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { View } from "react-native";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components";
+
+export type ItemIconProps = {
+  width: number;
+  height: number;
+  asset?: string | string[] | CellActionAssetComponent;
+  flavour?: "flavour_1" | "flavour_2";
+  marginTop: number;
+  marginBottom: number;
+  marginLeft: number;
+  marginRight: number;
+};
+
+function isImageAsset(asset) {
+  return typeof asset === "string" || Array.isArray(asset);
+}
+
+function getImageAsset(asset, flavour) {
+  if (typeof asset === "string") return asset;
+
+  if (flavour) {
+    const flavourIndex = Number(flavour.replace("flavour_", ""));
+    if (flavourIndex > -1) return asset?.[flavourIndex - 1];
+  }
+
+  return asset?.[0];
+}
+
+export function ItemIcon(props: ItemIconProps) {
+  const { width, height, asset, flavour, ...styles } = props;
+
+  if (isImageAsset(asset)) {
+    const imageAsset = getImageAsset(asset, flavour);
+
+    return (
+      <View style={styles}>
+        <QBImage
+          fadeDuration={0}
+          source={{ uri: imageAsset }}
+          style={{ width, height }}
+        />
+      </View>
+    );
+  }
+
+  const AssetComponent = asset as CellActionAssetComponent;
+
+  return (
+    <View style={styles}>
+      <AssetComponent
+        width={width}
+        height={height}
+        style={styles}
+        flavour={flavour}
+      />
+    </View>
+  );
+}

package/Components/ModalComponent/Button/ItemLabel.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+export type ItemLabelProps = {
+  label?: string | Record<string, string>;
+  fontFamily: string;
+  letterSpacing: number;
+  fontSize: number;
+  color: string;
+  focusColor: string;
+  selectedColor?: string;
+  hoverSelectedColor?: string;
+  lineHeight: number;
+  marginBottom: number;
+  marginTop: number;
+  marginLeft: number;
+  marginRight: number;
+  transform: string;
+  maxWidth: number;
+  focused?: boolean;
+  selected?: boolean;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+  },
+});
+
+function getColor({
+  selected,
+  focused,
+  color,
+  selectedColor,
+  focusColor,
+  hoverSelectedColor,
+}) {
+  switch (true) {
+    case selected && focused:
+      return hoverSelectedColor;
+    case selected && !focused:
+      return selectedColor;
+    case !selected && focused:
+      return focusColor;
+    default:
+      return color;
+  }
+}
+
+export function ItemLabel(props: ItemLabelProps) {
+  const {
+    label,
+    fontFamily,
+    letterSpacing,
+    fontSize,
+    color,
+    selectedColor,
+    focusColor,
+    hoverSelectedColor,
+    lineHeight,
+    marginBottom,
+    marginTop,
+    marginLeft,
+    marginRight,
+    transform,
+    maxWidth,
+    focused,
+    selected,
+  } = props;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { marginBottom, marginLeft, marginRight, marginTop, maxWidth },
+      ]}
+    >
+      <Text
+        style={{
+          fontFamily,
+          fontSize,
+          letterSpacing,
+          color: getColor({
+            selected,
+            focused,
+            color,
+            selectedColor,
+            hoverSelectedColor,
+            focusColor,
+          }),
+          lineHeight,
+        }}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+      >
+        {textTransform(transform, label)}
+      </Text>
+    </View>
+  );
+}

package/Components/ModalComponent/Button/assets.ts

@@ -0,0 +1,4 @@
+/* eslint-disable max-len */
+
+export const defaultSelectedAsset: string =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGsSURBVHgB7drdaYRAFIbhk2yuBTuwlXSQDrKdrOnErSSlpATBe0nOBxEMEXV+nDnjfg8MwiK4vKjMDIoQERERERERERHRY+j7vtHxJvTfb5wvHd/DMLyLpyc5IcTRw6eOZvrtcrlcq6q6i6PTBVqKM/GJdKpAa3EmrpGe5ST2xIFxHF/FwSnuoL1x1L2u66s4KD7QkXGg6EBHx4FiA6WIA0UGShUHiguUMg4UFSh1HCgmUI44UESgXHEgaCatf/wWslLeeY1GMsWBF/GEOHpodeouGkl8Vso7rtFIxjjg9YhNcea/+W4nrFyjkcxxwDnQUpxJrEhW4oBToLU4k9BIluKA60t6M6i+kzrfF7e1OODziLV6uG2d53onWYwDvi/pViJGshoHvCeKsSJZjgNBM+nQSNbjQPBSwzdSCXEgylrMNVIpcSDaYnVvJPWhA9OAZuO87HEg6mreIdIWE3Eg+nZHhEhm4sAh+0EBkUzFgcM2zDwimYsDh+4oOkQyGQcO33LdEclsHEiyJ70SyXScpBAJX3vNRif01yxSJ7SMH1USEREREREREREV7Ad//SBSU+GIIAAAAABJRU5ErkJggg==";