@applicaster/zapp-react-native-ui-components 13.0.0-alpha.5131435627 → 13.0.0-alpha.5145183145

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -22,8 +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;
       end_time?: string;
@@ -34,8 +32,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;
     audio_player_artwork_aspect_ratio?: string;
@@ -76,11 +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 magicBackground = getProp("magic_background");
-
-    const audioPlayerBackgroundImageQuery = getProp(
-      "audio_player_background_image_query"
-    );
 
     const audioPlayerBackgroundImageDefaultColor = getProp(
       "audio_player_background_image_default_color"
@@ -162,8 +153,6 @@ export function AudioPlayer(props: Props) {
       runTimeFontSize,
       artworkAspectRatio,
       channelIcon,
-      magicBackground,
-      audioPlayerBackgroundImageQuery,
       audioPlayerBackgroundImageDefaultColor,
     };
   }, [getProp]);

package/Components/AudioPlayer/helpers.tsx

@@ -4,8 +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/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/ModalComponent/BottomSheetModalContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { View, ScrollView, StyleSheet, Platform } from "react-native";
+import { View, ScrollView, Platform } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
@@ -39,12 +39,6 @@ type ModalComponentProps = {
   iconPlacement?: "left" | "right";
 };
 
-const styles = StyleSheet.create({
-  container: {
-    maxHeight: "100%",
-  },
-});
-
 export function BottomSheetModalContent(props: ModalComponentProps) {
   const {
     items,
@@ -96,12 +90,10 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
 
   return (
     <View
-      style={[
-        styles.container,
-        {
-          paddingTop: paddingTop,
-        },
-      ]}
+      style={{
+        maxHeight: props.maxHeight,
+        paddingTop: paddingTop,
+      }}
     >
       <ModalHeader
         dismiss={dismiss}
@@ -112,7 +104,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
       <ScrollView
         contentContainerStyle={{
           paddingBottom:
-            Platform.OS === "ios" ? paddingBottom + bottomInset : paddingBottom,
+            paddingBottom + (Platform.OS === "ios" ? bottomInset : 0),
         }}
       >
         {items.map((item, index) => (

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/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/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/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/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/package.json

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