@applicaster/zapp-react-native-ui-components 13.0.0-alpha.5790181722 → 13.0.0-alpha.5814285061

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -22,7 +22,6 @@ type Props = {
       audio_player_title_color?: string;
       audio_player_summary_color?: string;
       audio_player_rtl?: boolean;
-      magic_background?: boolean;
       audio_player_background_image_query?: string;
       audio_player_background_image_default_color?: string;
       start_time?: string;
@@ -34,7 +33,6 @@ type Props = {
     audio_player_title_color?: string;
     audio_player_summary_color?: string;
     audio_player_rtl?: string;
-    magic_background?: string;
     audio_player_background_image_query?: string;
     audio_player_background_image_default_color?: string;
     audio_player_background_image?: string;
@@ -76,7 +74,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 magicBackground = getProp("magic_background");
 
     const audioPlayerBackgroundImageQuery = getProp(
       "audio_player_background_image_query"
@@ -162,7 +159,6 @@ export function AudioPlayer(props: Props) {
       runTimeFontSize,
       artworkAspectRatio,
       channelIcon,
-      magicBackground,
       audioPlayerBackgroundImageQuery,
       audioPlayerBackgroundImageDefaultColor,
     };

package/Components/AudioPlayer/helpers.tsx

@@ -4,7 +4,6 @@ const defaults = {
   audio_player_background_color: "black",
   audio_player_artwork_aspect_ratio: "1:1",
   audio_player_rtl: false,
-  magic_background: false,
   audio_player_background_image_query: "",
   audio_player_background_image_default_color: "",
 };

package/Components/CellRendererResolver/index.ts

@@ -1,4 +1,5 @@
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { isGroup } from "@applicaster/zapp-react-native-utils/componentsUtils";
 
 import { componentsLogger } from "../../Helpers/logger";
 import defaultCellRenderer from "../default-cell-renderer";
@@ -80,7 +81,7 @@ export function CellRendererResolver({
 }: Props) {
   const cellRendererPlugin = getRendererPlugin(component, plugins, cellStyles);
 
-  if (!cellRendererPlugin && component.component_type !== "group-qb") {
+  if (!cellRendererPlugin && !isGroup(component)) {
     logger.warning({
       message: "Could not resolve cell builder plugin",
       data: { component },

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -11,6 +11,7 @@ import { allSettled } from "promise";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { ScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
+import { useEventAlerts } from "./utils/useEventAlerts";
 
 const { log_info } = createLogger({
   category: "ScreenContainer",
@@ -103,6 +104,8 @@ export const GeneralContentScreen = ({
     [typeof cellTapAction === "function" ? cellTapAction : onCellTapAction]
   );
 
+  useEventAlerts(screenData);
+
   if (!isReady || isNilOrEmpty(components || uiComponents)) return null;
 
   return (

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -3,8 +3,10 @@ import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
 import { useEffect, useMemo } from "react";
 import { useDispatch } from "react-redux";
 
-import { useLayoutPresets } from "@applicaster/zapp-react-native-redux/hooks/useLayoutPresets";
-import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks/useZappPipesFeeds";
+import {
+  useLayoutPresets,
+  useZappPipesFeeds,
+} from "@applicaster/zapp-react-native-redux/hooks";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";

package/Components/GeneralContentScreen/utils/useEventAlerts.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
+import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "@applicaster/zapp-react-native-utils/actionsExecutor/consts";
+import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+
+export const useEventAlerts = (screenData: ZappRiver) => {
+  const localizations = useLocalizedStrings({
+    localizations: screenData?.localizations || {},
+  });
+
+  const isActive = useIsScreenActive();
+
+  const onMaxTagsReached = React.useCallback(() => {
+    // We can't skip subscribe hook call, so we have to check.
+    if (!isActive || !localizations?.msg_maximum_selection_reached_message) {
+      return;
+    }
+
+    showAlertDialog({
+      title: "",
+      message: localizations.msg_maximum_selection_reached_message,
+      okButtonText:
+        localizations.msg_maximum_selection_reached_message_ok_button || "OK",
+    });
+  }, [localizations, isActive]);
+
+  useSubscriberFor(TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT, onMaxTagsReached);
+};

package/Components/Layout/TV/LayoutBackground.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks/usePickFromState";
+import { getBackgroundImageUrl } from "../utils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+export const LayoutBackground = ({
+  Background,
+  children,
+}: {
+  Background: React.ComponentType<any>;
+  children: React.ReactNode;
+}) => {
+  const theme = useTheme();
+
+  const { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);
+
+  const backgroundColor = theme.app_background_color;
+  const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);
+
+  return (
+    <Background
+      backgroundColor={backgroundColor}
+      backgroundImageUrl={backgroundImageUrl}
+    >
+      {children}
+    </Background>
+  );
+};

package/Components/Layout/TV/ScreenContainer.tsx

@@ -22,7 +22,6 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { NavBarContainer } from "./NavBarContainer";
 
 type ComponentsExtraProps = {
-  Background?: Record<string, any>;
   NavBar?: Record<string, any>;
 };
 

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

@@ -2,18 +2,23 @@
 
 exports[`Layout TV renders 1`] = `
 <View
-  excludeFromFocusSearching={true}
-  id="/river/A1234"
-  preferredFocus={true}
+  backgroundColor="#000000"
+  testID="background-component"
 >
   <View
-    Components={
-      {
-        "Background": [Function],
-        "NavBar": [Function],
+    excludeFromFocusSearching={true}
+    id="/river/A1234"
+    preferredFocus={true}
+  >
+    <View
+      Components={
+        {
+          "Background": [Function],
+          "NavBar": [Function],
+        }
       }
-    }
-    route="/river/A1234"
-  />
+      route="/river/A1234"
+    />
+  </View>
 </View>
 `;

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

@@ -5,6 +5,14 @@ import { render } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import configureStore from "redux-mock-store";
+import Layout from "../index.web";
+
+// mock useTheme to provide app_background_color
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({
+    app_background_color: "#000000",
+  }),
+}));
 
 const withoutChildren = omit(["children"]);
 
@@ -16,8 +24,6 @@ jest.mock("../../../Screen/TV/index.web", () => {
   };
 });
 
-const Layout = require("../index.web").default;
-
 const mockStore = configureStore()({
   appState: { appReady: 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 { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
-import { getBackgroundImageUrl } from "../utils";
 import { LayoutContainer } from "./LayoutContainer";
 import { ScreenContainer } from "./ScreenContainer";
 
@@ -12,6 +9,7 @@ import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
+import { LayoutBackground } from "./LayoutBackground";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -19,7 +17,6 @@ type Components = {
 };
 
 type ComponentsExtraProps = {
-  Background?: Record<string, any>;
   NavBar?: Record<string, any>;
 };
 
@@ -31,17 +28,10 @@ type Props = {
 
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
-  const theme = useTheme();
 
-  const { appState: { appReady = false } = {}, remoteConfigurations } =
-    usePickFromState(["appState", "remoteConfigurations", "plugins"]);
-
-  const backgroundColor = React.useMemo(() => theme.app_background_color, []);
-
-  const backgroundImageUrl = React.useMemo(
-    () => getBackgroundImageUrl(remoteConfigurations),
-    [remoteConfigurations]
-  );
+  const { appState: { appReady = false } = {} } = usePickFromState([
+    "appState",
+  ]);
 
   if (!appReady) {
     return null;
@@ -50,11 +40,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   return (
     <LayoutContainer>
       <ScreenLayoutContextProvider>
-        <Components.Background
-          backgroundColor={backgroundColor}
-          backgroundImageUrl={backgroundImageUrl}
-          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-        >
+        <LayoutBackground Background={Components.Background}>
           <ScreenDataContext.Provider value={navigator.data}>
             <PathnameContext.Provider value={navigator.currentRoute}>
               <ScreenContextProvider pathname={navigator.currentRoute}>
@@ -67,7 +53,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
               </ScreenContextProvider>
             </PathnameContext.Provider>
           </ScreenDataContext.Provider>
-        </Components.Background>
+        </LayoutBackground>
       </ScreenLayoutContextProvider>
     </LayoutContainer>
   );

package/Components/Layout/TV/index.web.tsx

@@ -5,6 +5,7 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { StackNavigator } from "../../Navigator";
+import { LayoutBackground } from "./LayoutBackground";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -25,7 +26,9 @@ const Layout = ({ Components }: Props) => {
 
   return (
     <ScreenLayoutContextProvider>
-      <StackNavigator Components={Components} />
+      <LayoutBackground Background={Components.Background}>
+        <StackNavigator Components={Components} />
+      </LayoutBackground>
     </ScreenLayoutContextProvider>
   );
 };

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,11 +1,5 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { View, LayoutChangeEvent, ScrollView } from "react-native";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { View, ScrollView, StyleSheet, Platform } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
@@ -16,6 +10,7 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import type { PluginConfiguration } from "./";
 
 import { ModalHeader } from "./Header";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type ModalComponentProps = {
   items: any[];
@@ -44,11 +39,16 @@ type ModalComponentProps = {
   iconPlacement?: "left" | "right";
 };
 
+const styles = StyleSheet.create({
+  container: {
+    maxHeight: "100%",
+  },
+});
+
 export function BottomSheetModalContent(props: ModalComponentProps) {
   const {
     items,
     currentRoute,
-    maxHeight,
     current_selection = null,
     onPress,
     dismiss,
@@ -61,20 +61,11 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     iconPlacement,
   } = props;
 
-  const [headerHeight, setHeaderHeight] = useState(0);
   const route = useRef(currentRoute);
   const theme = useTheme<BaseThemePropertiesMobile>();
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
-  const maxContentHeight = maxHeight
-    ? maxHeight - headerHeight - paddingTop - paddingBottom
-    : undefined;
-
-  const onHeaderLayout = useCallback((event: LayoutChangeEvent) => {
-    setHeaderHeight(event.nativeEvent.layout.height);
-  }, []);
-
   useEffect(() => {
     if (currentRoute !== route.current) {
       props.dismiss();
@@ -101,33 +92,32 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     [onPress, dismiss]
   );
 
+  const bottomInset = useSafeAreaInsets().bottom;
+
   return (
     <View
-      style={{
-        maxWidth: props.width,
-        paddingTop,
-      }}
+      style={[
+        styles.container,
+        {
+          paddingTop: paddingTop,
+        },
+      ]}
     >
       <ModalHeader
-        width={props.width}
         dismiss={dismiss}
         configuration={theme}
-        onLayout={onHeaderLayout}
         summary={summary}
         title={title}
       />
       <ScrollView
-        bounces={false}
-        style={{ maxHeight: maxContentHeight }}
         contentContainerStyle={{
-          paddingBottom,
-          paddingTop,
+          paddingBottom:
+            Platform.OS === "ios" ? paddingBottom + bottomInset : paddingBottom,
         }}
       >
         {items.map((item, index) => (
           <ButtonComponent
             key={index}
-            width={props.width}
             configuration={theme}
             selectedItem={current_selection}
             item={item}

package/Components/ModalComponent/Button/index.tsx

@@ -7,7 +7,6 @@ import { defaultSelectedAsset } from "./assets";
 
 type ButtonProps = {
   configuration: any;
-  width: number;
   selectedItem?: any;
   item: any; // Adjust type as needed
   onPress: (item: any) => void; // Adjust type as needed
@@ -33,7 +32,6 @@ export function Button({
   item,
   onPress,
   configuration,
-  width,
   iconBaseProps,
   itemBaseProps: itemProps,
   labelBaseProps,
@@ -65,34 +63,32 @@ export function Button({
   if (disabled) return null;
 
   return (
-    <View style={{ maxWidth: width }}>
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={() => onPress(item)}
-        onPressIn={() => setFocused(true)}
-        onPressOut={() => setFocused(false)}
-      >
-        <Item {...itemProps} focused={focused} selected={selected}>
-          <View style={styles.label_icon_container}>
-            {iconPlacement === "left" && renderItemIcon}
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={() => onPress(item)}
+      onPressIn={() => setFocused(true)}
+      onPressOut={() => setFocused(false)}
+    >
+      <Item {...itemProps} focused={focused} selected={selected}>
+        <View style={styles.label_icon_container}>
+          {iconPlacement === "left" && renderItemIcon}
 
-            {label ? (
-              <ItemLabel
-                {...labelBaseProps}
-                label={label ?? null}
-                focused={focused}
-                selected={selected}
-              />
-            ) : null}
-          </View>
+          {label ? (
+            <ItemLabel
+              {...labelBaseProps}
+              label={label ?? null}
+              focused={focused}
+              selected={selected}
+            />
+          ) : null}
+        </View>
 
-          {selected ? (
-            <ItemIcon {...iconBaseProps} asset={selectedItemIconPropsAssets} />
-          ) : (
-            iconPlacement === "right" && renderItemIcon
-          )}
-        </Item>
-      </TouchableOpacity>
-    </View>
+        {selected ? (
+          <ItemIcon {...iconBaseProps} asset={selectedItemIconPropsAssets} />
+        ) : (
+          iconPlacement === "right" && renderItemIcon
+        )}
+      </Item>
+    </TouchableOpacity>
   );
 }

package/Components/ModalComponent/Header/index.tsx

@@ -8,13 +8,18 @@ import { PluginConfiguration } from "../index";
 type Props = {
   dismiss: () => void;
   configuration: PluginConfiguration;
-  width: number;
   onLayout?: (event: LayoutChangeEvent) => void;
   summary?: string;
   title?: string;
 };
 
 const styles = StyleSheet.create({
+  noFlex: {
+    flex: 0,
+  },
+  flex: {
+    flex: 1,
+  },
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -22,7 +27,7 @@ const styles = StyleSheet.create({
 });
 
 export function ModalHeader(props: Props) {
-  const { configuration, dismiss, width, onLayout, summary, title } = props;
+  const { configuration, dismiss, onLayout, summary, title } = props;
 
   const closeButtonProps = useMemo<CloseButtonProps>(
     () => ({
@@ -55,15 +60,11 @@ export function ModalHeader(props: Props) {
 
   return (
     <View onLayout={onLayout} style={styles.container}>
-      <View
-        style={{
-          width: width - buttonsContainerWidth,
-        }}
-      >
+      <View style={styles.flex}>
         {title ? <Title {...titleProps} /> : null}
         {summary ? <Title {...summaryProps} /> : null}
       </View>
-      <View style={{ width: buttonsContainerWidth }}>
+      <View style={[styles.noFlex, { width: buttonsContainerWidth }]}>
         <CloseButton {...closeButtonProps} />
       </View>
     </View>

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -597,7 +597,7 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (screen_background_color) {
+    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -615,6 +615,7 @@ const PlayerContainerComponent = (props: Props) => {
     tv_component_container_height,
     screen_background_color,
     isInlineTV,
+    mode,
   ]);
 
   const applePlayerProps = {

package/Components/River/RiverItem.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import * as R from "ramda";
+import { isGroup } from "@applicaster/zapp-react-native-utils/componentsUtils";
 
 import { applyDecorators } from "../../Decorators";
 
@@ -112,7 +113,7 @@ function RiverItemComponent(props: RiverItemType) {
       jsOnly: true,
     });
 
-    if (!CellRenderer && item.component_type !== "group-qb") {
+    if (!CellRenderer && !isGroup(item)) {
       riverLogger.warning({
         message: "Cell Renderer is null - will fallback to default cell",
         data: { item, CellRenderer },

package/Components/Screen/TV/__tests__/index.web.test.tsx

@@ -0,0 +1,26 @@
+const {
+  useScreenBackgroundColor,
+} = require("@applicaster/zapp-react-native-utils/reactHooks/screen");
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  useScreenBackgroundColor: jest.fn(),
+  useNavbarState: jest.fn().mockReturnValue({ visible: true }),
+}));
+
+describe("TV Screen Component", () => {
+  it("uses the useScreenBackgroundColor hook with the correct screen ID", () => {
+    useScreenBackgroundColor.mockReturnValue("#FF0000");
+
+    expect(useScreenBackgroundColor("test-screen-id")).toBe("#FF0000");
+
+    // Verify the hook was called with the correct screen ID
+    expect(useScreenBackgroundColor).toHaveBeenCalledWith("test-screen-id");
+  });
+
+  it("returns 'transparent' when the screen background color is not defined", () => {
+    useScreenBackgroundColor.mockReturnValue("transparent");
+
+    // Verify the hook returns 'transparent'
+    expect(useScreenBackgroundColor("test-screen-id")).toBe("transparent");
+  });
+});

package/Components/Screen/__tests__/Screen.test.tsx

@@ -68,21 +68,21 @@ jest.mock(
   })
 );
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData",
-  () => ({
-    useScreenData: jest.fn(() => ({
-      id: "testId",
-      navigations: [{ id: "testId", category: "nav_bar" }],
-    })),
-  })
-);
-
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
+  useIsScreenActive: jest.fn().mockReturnValue(true),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useCurrentScreenData: jest.fn(() => ({
+    id: "testId",
+  })),
+  useNavbarState: jest.fn(() => ({
+    title: "Test Title",
+  })),
+  useScreenData: jest.fn(() => ({
+    id: "testId",
+    navigations: [{ id: "testId", category: "nav_bar" }],
   })),
   useNavigation: jest.fn(() => ({
     canGoBack: () => false,
@@ -91,7 +91,15 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
     screenData: { id: "testId" },
     data: { screen: { id: "testId" } },
   })),
-  useIsScreenActive: jest.fn().mockReturnValue(true),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
+  useDimensions: jest.fn(() => ({
+    width: 1920,
+    height: 1080,
+  })),
+  useIsTablet: jest.fn(() => false),
 }));
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks/usePickFromState", () => {

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
     pathname="/river/testId"
     selected="testId"
     testID="navBar"
-    title=""
+    title="Test Title"
   />
   <View>
     <View
@@ -48,7 +48,7 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
     pathname="/river/testId"
     selected="testId"
     testID="navBar"
-    title=""
+    title="Test Title"
   />
   <View>
     <View

package/Components/TopMarginApplicator/TopMarginApplicator.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, ViewProps, ViewStyle } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
 
 interface IProps {
   targetScreenId?: string;
@@ -31,11 +32,9 @@ export const useMarginTop = (targetScreenId: string): number => {
    * ScreenPicker is a component but should really be a screen.
    * We need to skip margin top for it as it's already applied to the target screen
    **/
-  const isScreenPicker =
-    screenData?.ui_components?.[0]?.component_type === "screen-picker-qb-tv";
 
   // ignore margin on screenPicker
-  if (isScreenPicker) {
+  if (isFirstComponentScreenPicker(screenData?.ui_components)) {
     return 0;
   }
 

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -144,7 +144,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
           setLastSnap(destSnapPoint);
 
-          if (destSnapPoint === modalSnapPoints[0] && isMinimizedModal) {
+          if (destSnapPoint === modalSnapPoints[0]) {
             translateYOffset.extractOffset();
             translateYOffset.setValue(preparedTranslationY);
             translateYOffset.flattenOffset();

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -94,7 +94,7 @@ export const AnimationView = ({
   const isAudioItem = React.useMemo(
     () =>
       videoModalItem?.content?.type?.includes?.("audio") ||
-      videoModalItem?.type?.value === "audio",
+      videoModalItem?.type?.value?.includes?.("audio"),
     [videoModalItem]
   );
 
@@ -107,7 +107,6 @@ export const AnimationView = ({
     progressBarHeight,
     isTablet,
     isTabletLandscape,
-    inlineAudioPlayer,
     tabletLandscapePlayerTopPosition,
   });
 

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Animated } from "react-native";
 
 import {
@@ -95,6 +95,13 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     setStartComponentsAnimation(false);
   }, []);
 
+  useEffect(() => {
+    // Reset player animation state when video modal is closed
+    if (!visible) {
+      resetPlayerAnimationState();
+    }
+  }, [visible, resetPlayerAnimationState]);
+
   // Animated values
   const lastScrollY = React.useRef(new Animated.Value(0)).current;
   const dragScrollY = React.useRef(new Animated.Value(0)).current;

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -309,7 +309,6 @@ export const getMoveUpValue = ({
   progressBarHeight,
   isTablet,
   isTabletLandscape,
-  inlineAudioPlayer,
   tabletLandscapePlayerTopPosition,
 }) => {
   if (additionalData.saveArea) {
@@ -322,17 +321,12 @@ export const getMoveUpValue = ({
   }
 
   if (isTablet) {
-    if (
-      isTabletLandscape &&
-      (!isAudioItem || (isAudioItem && inlineAudioPlayer))
-    ) {
+    if (isTabletLandscape) {
       return -tabletLandscapePlayerTopPosition + progressBarHeight;
+    } else {
+      return -130;
     }
-
-    // for audioPlayer(tablet/isTabletPortrait) in docked mode
-    return -130;
   }
 
-  // for audioPlayer(mobile) in docked mode
   return -50 + progressBarHeight;
 };

package/Components/VideoModal/PlayerDetails.tsx

@@ -10,6 +10,7 @@ import {
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
 
@@ -78,6 +79,10 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
+  if (isNilOrEmpty(screenData?.ui_components)) {
+    return null;
+  }
+
   return (
     <Animated.View
       style={[

package/Components/VideoModal/PlayerWrapper.tsx

@@ -74,20 +74,6 @@ const getScreenAspectRatio = () => {
   return longEdge / shortEdge;
 };
 
-const safeAreaStyles = (
-  configuration: Configuration,
-  isTablet: boolean
-): ViewStyle => {
-  const tablet_landscape_player_container_background_color =
-    configuration?.tablet_landscape_player_container_background_color;
-
-  return {
-    backgroundColor: isTablet
-      ? tablet_landscape_player_container_background_color
-      : "transparent",
-  };
-};
-
 const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   if (isTablet) {
     return ["top"];
@@ -156,6 +142,7 @@ const PlayerWrapperComponent = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    fullscreen,
     pip,
   } = props;
 
@@ -211,14 +198,17 @@ const PlayerWrapperComponent = (props: Props) => {
     [containerDimensions, playerDimensionsHack]
   );
 
+  const wrapperViewStyle: ViewStyle = {
+    backgroundColor:
+      isTablet && !fullscreen
+        ? configuration?.tablet_landscape_player_container_background_color
+        : "transparent",
+  };
+
   return (
     <WrapperView
       edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={[
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimensionsHack,
-      ]}
+      style={[wrapperViewStyle, style, playerDimensionsHack]}
     >
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}

package/Components/VideoModal/__tests__/__snapshots__/PlayerDetails.test.tsx.snap

@@ -1,43 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PlayerDetails renders properly 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "flex": 1,
-      "marginTop": -8,
-      "paddingTop": -8,
-      "width": 750,
-    }
-  }
->
-  <View
-    feed="test-source"
-    riverComponents={[]}
-    riverId="test-id"
-  />
-</View>
-`;
+exports[`PlayerDetails renders properly 1`] = `null`;
 
-exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "flex": 1,
-      "marginTop": -20,
-      "paddingTop": 40,
-      "width": 750,
-    }
-  }
->
-  <View
-    feed="test-source"
-    riverComponents={[]}
-    riverId="test-id"
-  />
-</View>
-`;
+exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] = `null`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-alpha.5790181722",
+  "version": "13.0.0-alpha.5814285061",
   "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": "13.0.0-alpha.5790181722",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.5790181722",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.5790181722",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5790181722",
+    "@applicaster/applicaster-types": "13.0.0-alpha.5814285061",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.5814285061",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.5814285061",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5814285061",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",