@applicaster/zapp-react-native-ui-components 13.0.10 → 13.0.11-alpha.1221577073

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

@@ -28,17 +28,10 @@ interface Props {
   onAsyncRender: () => void;
 }
 
-const SecondaryImageComponent = (props: Props) => {
-  const {
-    uri,
-    style,
-    displayMode,
-    imageSizing,
-    fitPosition,
-    fixedHeight,
-    fixedWidth,
-    onAsyncRender,
-  } = props;
+/** Secondary Image Dynamic does not render until the image is loaded */
+const SecondaryImageDynamic = (props: Props) => {
+  const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
+    props;
 
   const imageDimension = useGetImageDimensions(
     uri,
@@ -46,13 +39,9 @@ const SecondaryImageComponent = (props: Props) => {
     isImageSizingFit(imageSizing) ? undefined : (style.height as number)
   );
 
-  const containerHeight = isDisplayModeFixed(displayMode)
-    ? fixedHeight
-    : imageDimension?.height;
+  const containerHeight = imageDimension?.height;
 
-  const containerWidth = isDisplayModeFixed(displayMode)
-    ? fixedWidth
-    : style?.width;
+  const containerWidth = style?.width;
 
   if (isNil(imageDimension?.aspectRatio)) {
     return null;
@@ -80,4 +69,63 @@ const SecondaryImageComponent = (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,9 +4,26 @@ import { render } from "@testing-library/react-native";
 import { SecondaryImage } from "../Image";
 
 describe("SecondaryImage - Image", () => {
-  it("SecondaryImage should not render if no aspect ratio", async () => {
+  it("SecondaryImage should not render if no uri", async () => {
     const wrapper = await render(
-      <SecondaryImage uri="" style={{ width: 100 }} />
+      <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 }}
+      />
     );
 
     expect(wrapper.toJSON()).toEqual(null);
@@ -16,7 +33,8 @@ describe("SecondaryImage - Image", () => {
   it("SecondaryImage should render if known dimensions", async () => {
     const wrapper = await render(
       <SecondaryImage
-        uri=""
+        uri="someUrl"
+        displayMode="dynamic"
         style={{ width: 100, height: 100, borderRadius: 10 }}
       />
     );

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

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

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet, FlatList } from "react-native";
+import { FlatList, StyleSheet, View } 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 {
-  useProfilerLogging,
   usePipesCacheReset,
+  useProfilerLogging,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useLoadingState } from "./hooks/useLoadingState";
 import { ViewportTracker } from "../../Viewport";
@@ -25,6 +25,8 @@ 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();
 
@@ -70,6 +72,7 @@ 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;
@@ -265,48 +268,52 @@ 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}>
-      <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}
+    <View style={styles.container} ref={flatListWrapperRef}>
+      <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}
               />
-            }
-            refreshControl={refreshControl}
-            onScrollBeginDrag={onScrollBeginDrag}
-            onScroll={onScroll}
-            onMomentumScrollEnd={_onMomentumScrollEnd}
-            onScrollEndDrag={_onScrollEndDrag}
-            scrollEventThrottle={16}
-            {...scrollViewExtraProps}
-          />
-        </ViewportTracker>
-      </ScreenLoadingMeasurements>
+            </ViewportTracker>
+          </ScreenLoadingMeasurements>
+        </ComponentsMapRefContext.Provider>
+      </ComponentsMapHeightContext.Provider>
     </View>
   );
 }

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,8 @@
+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);

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -43,6 +43,8 @@ type Props = {
   children: React.ReactNode;
 };
 
+const activeOffsetY = [-5, 5];
+
 export const AnimatedScrollModalComponent = ({ children }: Props) => {
   const {
     isActiveGesture,
@@ -378,9 +380,9 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
             shouldCancelWhenOutside={isMaximizedModal}
+            activeOffsetY={activeOffsetY}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
-            activeOffsetY={[-5, 5]}
           >
             <Animated.View>
               <NativeViewGestureHandler

package/Components/VideoModal/PlayerDetails.tsx

@@ -4,8 +4,8 @@ import {
   Dimensions,
   Easing,
   StyleProp,
-  ViewStyle,
   StyleSheet,
+  ViewStyle,
 } 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";
@@ -47,11 +47,10 @@ 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 }
-      : { marginTop: -8, paddingTop: -8 }
-    : {};
+      : null;
 
   // Animation setup
   const translateY = useRef(new Animated.Value(50)).current;
@@ -107,6 +106,7 @@ export const PlayerDetails = ({
           riverId={screenData.id}
           feed={screenData?.data?.source}
           riverComponents={screenData.ui_components}
+          isScreenWrappedInContainer
         />
       ) : null}
     </Animated.View>

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useContext } from "react";
 import {
   Dimensions,
   Platform,
@@ -131,6 +132,11 @@ const getTabletWidth = (
   return widthValue - sidebarWidth;
 };
 
+const PlayerDetailsWrapperHeightContext = React.createContext(null);
+
+export const usePlayerDetailsWrapperHeight = () =>
+  useContext(PlayerDetailsWrapperHeightContext);
+
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
@@ -146,6 +152,20 @@ const PlayerWrapperComponent = (props: Props) => {
     pip,
   } = props;
 
+  const [playerDetailsWrapperHeight, setPlayerDetailsWrapperHeight] =
+    React.useState(0);
+
+  const onLayout = React.useCallback(
+    ({
+      nativeEvent: {
+        layout: { height },
+      },
+    }) => {
+      setPlayerDetailsWrapperHeight(height);
+    },
+    []
+  );
+
   const isTablet = useIsTablet();
 
   const isInlineModal = inline && isModal;
@@ -238,23 +258,28 @@ const PlayerWrapperComponent = (props: Props) => {
             </AnimatedVideoPlayerComponent>
           </AnimationComponent>
         </View>
-
-        <AnimatedScrollModal>
-          {isShowPlayerDetails ? (
-            <AnimationComponent
-              animationType={ComponentAnimationType.componentFade}
-              style={defaultStyles.flex}
-            >
-              <PlayerDetails
-                configuration={configuration}
-                style={defaultStyles.playerDetails}
-                entry={entry}
-                isTabletLandscape={isTabletLandscape}
-                isTablet={isTablet}
-              />
-            </AnimationComponent>
-          ) : null}
-        </AnimatedScrollModal>
+        <View style={defaultStyles.flex} onLayout={onLayout}>
+          <PlayerDetailsWrapperHeightContext.Provider
+            value={playerDetailsWrapperHeight}
+          >
+            <AnimatedScrollModal>
+              {isShowPlayerDetails ? (
+                <AnimationComponent
+                  animationType={ComponentAnimationType.componentFade}
+                  style={defaultStyles.flex}
+                >
+                  <PlayerDetails
+                    configuration={configuration}
+                    style={defaultStyles.playerDetails}
+                    entry={entry}
+                    isTabletLandscape={isTabletLandscape}
+                    isTablet={isTablet}
+                  />
+                </AnimationComponent>
+              ) : null}
+            </AnimatedScrollModal>
+          </PlayerDetailsWrapperHeightContext.Provider>
+        </View>
       </AnimationComponent>
     </WrapperView>
   );

package/package.json

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