@applicaster/zapp-react-native-ui-components 13.0.11-alpha.5714428013 → 13.0.11-rc.0

package/Components/MasterCell/DefaultComponents/SecondaryImage/Image.tsx

@@ -28,10 +28,17 @@ interface Props {
   onAsyncRender: () => void;
 }
 
-/** Secondary Image Dynamic does not render until the image is loaded */
-const SecondaryImageDynamic = (props: Props) => {
-  const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
-    props;
+const SecondaryImageComponent = (props: Props) => {
+  const {
+    uri,
+    style,
+    displayMode,
+    imageSizing,
+    fitPosition,
+    fixedHeight,
+    fixedWidth,
+    onAsyncRender,
+  } = props;
 
   const imageDimension = useGetImageDimensions(
     uri,
@@ -39,9 +46,13 @@ const SecondaryImageDynamic = (props: Props) => {
     isImageSizingFit(imageSizing) ? undefined : (style.height as number)
   );
 
-  const containerHeight = imageDimension?.height;
+  const containerHeight = isDisplayModeFixed(displayMode)
+    ? fixedHeight
+    : imageDimension?.height;
 
-  const containerWidth = style?.width;
+  const containerWidth = isDisplayModeFixed(displayMode)
+    ? fixedWidth
+    : style?.width;
 
   if (isNil(imageDimension?.aspectRatio)) {
     return null;
@@ -69,63 +80,4 @@ const SecondaryImageDynamic = (props: Props) => {
   );
 };
 
-/** Secondary Image Fixed does not render  the image until the image is loaded, but keep container rendered */
-const SecondaryImageFixed = (props: Props) => {
-  const {
-    uri,
-    style,
-    displayMode,
-    imageSizing,
-    fitPosition,
-    fixedHeight,
-    fixedWidth,
-    onAsyncRender,
-  } = props;
-
-  const imageDimension = useGetImageDimensions(
-    uri,
-    style.width as number,
-    isImageSizingFit(imageSizing) ? undefined : (style.height as number)
-  );
-
-  return (
-    <View style={style} onLayout={onAsyncRender}>
-      {isNil(imageDimension?.aspectRatio) ? null : (
-        <Image
-          {...props}
-          source={{ uri }}
-          style={{
-            ...getStyle({
-              imageSizing,
-              fitPosition,
-              displayMode,
-              imageDimension,
-              containerHeight: fixedHeight,
-              containerWidth: fixedWidth,
-            }),
-            borderRadius: style.borderRadius,
-            aspectRatio: imageDimension.aspectRatio,
-          }}
-        />
-      )}
-    </View>
-  );
-};
-
-const SecondaryImageComponent = (props: Props) => {
-  const { uri, displayMode } = props;
-
-  if (!uri) {
-    return null;
-  }
-
-  const isFixed = isDisplayModeFixed(displayMode);
-
-  return isFixed ? (
-    <SecondaryImageFixed {...props} />
-  ) : (
-    <SecondaryImageDynamic {...props} />
-  );
-};
-
 export const SecondaryImage = withAsyncRenderHOC(SecondaryImageComponent);

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/Image.test.tsx

@@ -4,26 +4,9 @@ import { render } from "@testing-library/react-native";
 import { SecondaryImage } from "../Image";
 
 describe("SecondaryImage - Image", () => {
-  it("SecondaryImage should not render if no uri", async () => {
+  it("SecondaryImage should not render if no aspect ratio", async () => {
     const wrapper = await render(
-      <SecondaryImage
-        displayMode="dynamic"
-        uri={undefined}
-        style={{ width: 100 }}
-      />
-    );
-
-    expect(wrapper.toJSON()).toEqual(null);
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  it("SecondaryImage should not render if no aspect ratio (dynamic)", async () => {
-    const wrapper = await render(
-      <SecondaryImage
-        displayMode="dynamic"
-        uri="someurl"
-        style={{ width: 100 }}
-      />
+      <SecondaryImage uri="" style={{ width: 100 }} />
     );
 
     expect(wrapper.toJSON()).toEqual(null);
@@ -33,8 +16,7 @@ describe("SecondaryImage - Image", () => {
   it("SecondaryImage should render if known dimensions", async () => {
     const wrapper = await render(
       <SecondaryImage
-        uri="someUrl"
-        displayMode="dynamic"
+        uri=""
         style={{ width: 100, height: 100, borderRadius: 10 }}
       />
     );

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/__snapshots__/Image.test.tsx.snap

@@ -1,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio (dynamic) 1`] = `null`;
-
-exports[`SecondaryImage - Image SecondaryImage should not render if no uri 1`] = `null`;
+exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio 1`] = `null`;
 
 exports[`SecondaryImage - Image SecondaryImage should render if known dimensions 1`] = `
 <View
@@ -16,11 +14,10 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
   }
 >
   <Image
-    displayMode="dynamic"
     onAsyncRender={[Function]}
     source={
       {
-        "uri": "someUrl",
+        "uri": "",
       }
     }
     style={
@@ -31,7 +28,7 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
         "width": 100,
       }
     }
-    uri="someUrl"
+    uri=""
   />
 </View>
 `;

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { FlatList, StyleSheet, View } 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";
@@ -9,8 +9,8 @@ import { useScreenConfiguration } from "../useScreenConfiguration";
 import { RefreshControl } from "../RefreshControl";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 import {
-  usePipesCacheReset,
   useProfilerLogging,
+  usePipesCacheReset,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useLoadingState } from "./hooks/useLoadingState";
 import { ViewportTracker } from "../../Viewport";
@@ -25,8 +25,6 @@ import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHo
 import { useShallow } from "zustand/react/shallow";
 
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { ComponentsMapHeightContext } from "./ContextProviders/ComponentsMapHeightContext";
-import { ComponentsMapRefContext } from "./ContextProviders/ComponentsMapRefContext";
 
 const isAndroid = isAndroidPlatform();
 
@@ -72,7 +70,6 @@ function ComponentsMapComponent(props: Props) {
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
-  const flatListWrapperRef = React.useRef<View | null>(null);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -268,57 +265,48 @@ function ComponentsMapComponent(props: Props) {
   // The Screen Picker in Mobile is completly different than the TV
   // so the various offsets / margins in TV do not apply here.
   return (
-    <View
-      style={styles.container}
-      ref={(ref) => {
-        flatListWrapperRef.current = ref;
-      }}
-    >
-      <ComponentsMapHeightContext.Provider value={flatListHeight}>
-        <ComponentsMapRefContext.Provider value={flatListWrapperRef}>
-          <ScreenLoadingMeasurements
-            riverId={riverId}
-            numberOfComponents={riverComponents.length}
-          >
-            <ViewportTracker>
-              <FlatList
-                ref={(ref) => {
-                  flatListRef.current = ref;
-                }}
-                // Fix for WebView rerender crashes on Android API 28+
-                // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-                overScrollMode={isAndroid ? "never" : "auto"}
-                scrollIndicatorInsets={scrollIndicatorInsets}
-                extraData={feed}
-                stickyHeaderIndices={stickyHeaderIndices}
-                removeClippedSubviews={isAndroid}
-                onLayout={handleOnLayout}
-                initialNumToRender={3}
-                maxToRenderPerBatch={10}
-                windowSize={12}
-                listKey={riverId}
-                keyExtractor={keyExtractor}
-                renderItem={renderRiverItem}
-                data={riverComponents}
-                contentContainerStyle={contentContainerStyle}
-                ListFooterComponent={
-                  <RiverFooter
-                    flatListHeight={flatListHeight}
-                    loadingState={loadingState}
-                  />
-                }
-                refreshControl={refreshControl}
-                onScrollBeginDrag={onScrollBeginDrag}
-                onScroll={onScroll}
-                onMomentumScrollEnd={_onMomentumScrollEnd}
-                onScrollEndDrag={_onScrollEndDrag}
-                scrollEventThrottle={16}
-                {...scrollViewExtraProps}
+    <View style={styles.container}>
+      <ScreenLoadingMeasurements
+        riverId={riverId}
+        numberOfComponents={riverComponents.length}
+      >
+        <ViewportTracker>
+          <FlatList
+            ref={(ref) => {
+              flatListRef.current = ref;
+            }}
+            // Fix for WebView rerender crashes on Android API 28+
+            // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+            overScrollMode={isAndroid ? "never" : "auto"}
+            scrollIndicatorInsets={scrollIndicatorInsets}
+            extraData={feed}
+            stickyHeaderIndices={stickyHeaderIndices}
+            removeClippedSubviews={isAndroid}
+            onLayout={handleOnLayout}
+            initialNumToRender={3}
+            maxToRenderPerBatch={10}
+            windowSize={12}
+            listKey={riverId}
+            keyExtractor={keyExtractor}
+            renderItem={renderRiverItem}
+            data={riverComponents}
+            contentContainerStyle={contentContainerStyle}
+            ListFooterComponent={
+              <RiverFooter
+                flatListHeight={flatListHeight}
+                loadingState={loadingState}
               />
-            </ViewportTracker>
-          </ScreenLoadingMeasurements>
-        </ComponentsMapRefContext.Provider>
-      </ComponentsMapHeightContext.Provider>
+            }
+            refreshControl={refreshControl}
+            onScrollBeginDrag={onScrollBeginDrag}
+            onScroll={onScroll}
+            onMomentumScrollEnd={_onMomentumScrollEnd}
+            onScrollEndDrag={_onScrollEndDrag}
+            scrollEventThrottle={16}
+            {...scrollViewExtraProps}
+          />
+        </ViewportTracker>
+      </ScreenLoadingMeasurements>
     </View>
   );
 }

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -372,7 +372,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         maxDeltaY={lastSnap - modalSnapPoints[0]}
         numberOfTaps={1}
       >
-        <View pointerEvents="box-none" style={generalStyles.container}>
+        <View pointerEvents="box-none">
           <PanGestureHandler
             enabled={isEnablePanGesture}
             ref={panHandlerRef}
@@ -382,7 +382,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             onHandlerStateChange={onHandlerStateChange}
             activeOffsetY={[-5, 5]}
           >
-            <Animated.View style={generalStyles.container}>
+            <Animated.View>
               <NativeViewGestureHandler
                 ref={scrollRef}
                 waitFor={tapHandlerRef}
@@ -397,7 +397,6 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                   onMomentumScrollEnd={onMomentumScrollEnd}
                   scrollEventThrottle={1}
                   showsVerticalScrollIndicator={false}
-                  contentContainerStyle={generalStyles.container}
                 >
                   {children}
                 </Animated.ScrollView>

package/Components/VideoModal/PlayerDetails.tsx

@@ -4,8 +4,8 @@ import {
   Dimensions,
   Easing,
   StyleProp,
-  StyleSheet,
   ViewStyle,
+  StyleSheet,
 } from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
@@ -13,7 +13,6 @@ 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");
-const styles = StyleSheet.create({ flex1: { flex: 1 } });
 
 type Configuration = {
   [key: string]: any;
@@ -48,10 +47,11 @@ export const PlayerDetails = ({
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
 
-  const extraTabletStyles =
-    !isAudioPlayer && isTabletLandscape
+  const extraTabletStyles = !isAudioPlayer
+    ? isTabletLandscape
       ? { marginTop: -insets.top, paddingTop: insets.top + 20 }
-      : null;
+      : { marginTop: -8, paddingTop: -8 }
+    : {};
 
   // Animation setup
   const translateY = useRef(new Animated.Value(50)).current;
@@ -93,7 +93,6 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
-        styles.flex1,
         {
           // workaround for avoid wrong text-height after going back to portrait rotation
           // we don't see this view in landscape mode, so we are able to use fixed width from portrait mode
@@ -108,7 +107,6 @@ export const PlayerDetails = ({
           riverId={screenData.id}
           feed={screenData?.data?.source}
           riverComponents={screenData.ui_components}
-          isScreenWrappedInContainer
         />
       ) : null}
     </Animated.View>

package/Components/VideoModal/PlayerWrapper.tsx

@@ -238,6 +238,7 @@ const PlayerWrapperComponent = (props: Props) => {
             </AnimatedVideoPlayerComponent>
           </AnimationComponent>
         </View>
+
         <AnimatedScrollModal>
           {isShowPlayerDetails ? (
             <AnimationComponent

package/package.json

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

package/Components/River/ComponentsMap/ContextProviders/ComponentsMapHeightContext.ts

@@ -1,8 +0,0 @@
-import * as React from "react";
-
-export const ComponentsMapHeightContext = React.createContext<number | null>(
-  null
-);
-
-export const useComponentsMapHeight = () =>
-  React.useContext(ComponentsMapHeightContext);

package/Components/River/ComponentsMap/ContextProviders/ComponentsMapRefContext.ts

@@ -1,8 +0,0 @@
-import * as React from "react";
-import { View } from "react-native";
-
-export const ComponentsMapRefContext =
-  React.createContext<React.RefObject<View | null> | null>(null);
-
-export const useComponentsMapRef = () =>
-  React.useContext(ComponentsMapRefContext);