@applicaster/zapp-react-native-ui-components 13.0.0-alpha.3013095924 → 13.0.0-alpha.3044917147

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -32,7 +32,7 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
 
   const { isRTL, backgroundColor, backgroundImage } = config;
 
-  const backgroundImg = { uri: backgroundImage };
+  const backgroundImageSource = { uri: backgroundImage };
 
   const backgroundColorStyle = backgroundImage
     ? "transparent"
@@ -97,15 +97,14 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
 
   const backgroundImgStyles = platformSelect({
     tvos: {
-      width: 1920,
-      height: 1080,
+      width: "100%",
+      height: "100%",
       alignItems: "center",
       justifyContent: "center",
     },
     android_tv: {
-      position: "absolute",
-      width: 1920,
-      height: 1080,
+      width: "100%",
+      height: "100%",
       alignItems: "center",
       justifyContent: "center",
     },
@@ -146,9 +145,9 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
     },
   });
 
-  const audioPlayerLayoutTV = backgroundImg?.uri ? (
+  const audioPlayerLayoutTV = backgroundImageSource?.uri ? (
     <ImageBackground
-      source={backgroundImg}
+      source={backgroundImageSource}
       style={backgroundImgStyles}
       resizeMode="cover"
     >
@@ -178,7 +177,7 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
           ]}
         >
           <ImageBackground
-            source={backgroundImg}
+            source={backgroundImageSource}
             style={backgroundImgStyles}
             resizeMode="cover"
           >

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { View, ScrollView, Platform } from "react-native";
+import { View, ScrollView } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
@@ -9,7 +9,7 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 import type { PluginConfiguration } from "./";
 
-import { ModalHeader } from "./Header";
+import { ModalHeader as DefaultModalHeader } from "./Header";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type ModalComponentProps = {
@@ -22,6 +22,7 @@ type ModalComponentProps = {
   title?: string;
   maxHeight?: number;
   dismiss: () => void;
+  headerComponent?: React.ComponentType;
   buttonComponent?: React.ComponentType;
   iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
   itemProps?:
@@ -48,9 +49,11 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
+    headerComponent: ModalHeader = DefaultModalHeader,
     buttonComponent: ButtonComponent = Button,
-    getSelectedItemIcon = (theme) =>
-      theme.modal_bottom_sheet_item_selected_icon,
+    getSelectedItemIcon = ({
+      modal_bottom_sheet_item_selected_icon,
+    }: BaseThemePropertiesMobile) => modal_bottom_sheet_item_selected_icon,
     getDefaultItemIcon = () => null,
     iconPlacement,
   } = props;
@@ -103,26 +106,27 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
       />
       <ScrollView
         contentContainerStyle={{
-          paddingBottom:
-            paddingBottom + (Platform.OS === "ios" ? bottomInset : 0),
+          paddingBottom: paddingBottom + bottomInset,
         }}
       >
-        {items.map((item, index) => (
-          <ButtonComponent
-            key={index}
-            configuration={theme}
-            selectedItem={current_selection}
-            item={item}
-            onPress={handlePress}
-            label={theme[item?.label] ?? item?.label}
-            iconBaseProps={iconBaseProps}
-            itemBaseProps={itemBaseProps}
-            labelBaseProps={labelBaseProps}
-            selectedItemIcon={getSelectedItemIcon(theme)}
-            defaultItemIcon={getDefaultItemIcon(theme)}
-            iconPlacement={iconPlacement}
-          />
-        ))}
+        {items.map((item, index) =>
+          item ? (
+            <ButtonComponent
+              key={index}
+              configuration={theme}
+              selectedItem={current_selection}
+              item={item}
+              onPress={handlePress}
+              label={theme[item?.label] ?? item?.label}
+              iconBaseProps={iconBaseProps}
+              itemBaseProps={itemBaseProps}
+              labelBaseProps={labelBaseProps}
+              selectedItemIcon={getSelectedItemIcon(theme)}
+              defaultItemIcon={getDefaultItemIcon(theme)}
+              iconPlacement={iconPlacement}
+            />
+          ) : null
+        )}
       </ScrollView>
     </View>
   );

package/Components/PlayerContainer/PlayerContainer.tsx

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

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet, Platform, FlatList } from "react-native";
+import { View, StyleSheet, FlatList } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -24,6 +24,10 @@ import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-com
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useShallow } from "zustand/react/shallow";
 
+import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const isAndroid = isAndroidPlatform();
+
 type Props = {
   feed: ZappFeed;
   groupId?: string;
@@ -273,12 +277,12 @@ function ComponentsMapComponent(props: Props) {
             }}
             // Fix for WebView rerender crashes on Android API 28+
             // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-            overScrollMode={Platform.OS === "android" ? "never" : "auto"}
+            overScrollMode={isAndroid ? "never" : "auto"}
             scrollIndicatorInsets={scrollIndicatorInsets}
             extraData={feed}
             stickyHeaderIndices={stickyHeaderIndices}
             onLayout={handleOnLayout}
-            removeClippedSubviews
+            removeClippedSubviews={isAndroid}
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
@@ -299,6 +303,10 @@ function ComponentsMapComponent(props: Props) {
             onMomentumScrollEnd={_onMomentumScrollEnd}
             onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}
+            maintainVisibleContentPosition={{
+              minIndexForVisible: 0,
+              autoscrollToTopThreshold: 10,
+            }}
             {...scrollViewExtraProps}
           />
         </ViewportTracker>

package/Components/River/RiverItem.tsx

@@ -48,16 +48,20 @@ const useLoadingState = (
   loadingState: RiverItemType["loadingState"]
 ) => {
   const [readyToBeDisplayed, setReadyToBeDisplayed] = React.useState(
-    loadingState.getValue().index + 1 === currentIndex
+    loadingState.getValue().index + 1 >= currentIndex
   );
 
   useEffect(() => {
     const subscription = loadingState.subscribe(({ index }) => {
-      if (index + 1 === currentIndex) {
+      if (index + 1 >= currentIndex) {
         setReadyToBeDisplayed(true);
       }
     });
 
+    if (loadingState.getValue().index + 1 >= currentIndex) {
+      setReadyToBeDisplayed(true);
+    }
+
     return () => {
       subscription.unsubscribe();
     };

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -135,6 +135,12 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       getItemCount={[Function]}
       initialNumToRender={3}
       keyExtractor={[Function]}
+      maintainVisibleContentPosition={
+        {
+          "autoscrollToTopThreshold": 10,
+          "minIndexForVisible": 0,
+        }
+      }
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
       onLayout={[Function]}
@@ -145,7 +151,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       onScrollEndDrag={[Function]}
       overScrollMode="auto"
       refreshControl={null}
-      removeClippedSubviews={true}
+      removeClippedSubviews={false}
       renderItem={[Function]}
       scrollEventThrottle={16}
       scrollIndicatorInsets={

package/Components/RouteManager/TestId.tsx

@@ -12,11 +12,7 @@ const styles = StyleSheet.create({
 
 export function TestId({ screenId, children }: Props) {
   return (
-    <View
-      testID={screenId}
-      accessibilityLabel={screenId}
-      style={styles.container}
-    >
+    <View testID={screenId} style={styles.container}>
       {children}
     </View>
   );

package/Components/RouteManager/__tests__/__snapshots__/routeManager.test.js.snap

@@ -2,7 +2,6 @@
 
 exports[`<RouteManager /> renders correctly 1`] = `
 <View
-  accessibilityLabel="A1234"
   style={
     {
       "flex": 1,

package/Components/RouteManager/__tests__/testId.test.js

@@ -24,9 +24,5 @@ describe("TestId", () => {
     );
 
     expect(wrapper.getByTestId(screenId)).toBeTruthy();
-
-    expect(wrapper.getByTestId(screenId).props.accessibilityLabel).toEqual(
-      screenId
-    );
   });
 });

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -17,6 +17,7 @@ export enum PlayerAnimationStateEnum {
   maximize = "maximize",
   drag_player = "drag_player",
   drag_scroll = "drag_scroll",
+  appear_as_docked = "appear_as_docked",
 }
 
 export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;

package/package.json

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