@applicaster/zapp-react-native-ui-components 12.0.0-rc.30 → 12.0.0-rc.31

package/Components/ErrorScreen/index.tsx

@@ -3,7 +3,6 @@ import * as R from "ramda";
 import {
   View,
   StyleSheet,
-  Image,
   Text,
   ViewStyle,
   TextStyle,
@@ -13,6 +12,7 @@ import {
 import { defaultAsset } from "./defaultAsset";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 import { Button } from "./Button";
 
 type ButtonProp = {

package/Components/Image/Image.android.tsx

@@ -3,32 +3,10 @@ import FastImage, {
   FastImageProps,
 } from "@applicaster/react-native-fast-image";
 
-export const QBImage = (props: FastImageProps) => {
-  const source = React.useMemo(() => {
-    if (typeof props.source === "number") {
-      return props.source;
-    }
+import { useImageSource } from "./utils";
 
-    return {
-      uri: props.source.uri,
-      headers: props.source.headers,
-      priority: props.source.priority,
-      cache: props.source.cache,
-      maxWidth: props.source.maxWidth,
-      maxHeight: props.source.maxHeight,
-    };
-  }, [
-    ...(typeof props.source === "object"
-      ? [
-          props.source?.uri,
-          props.source?.priority,
-          props.source?.cache,
-          props.source?.headers,
-          props.source?.maxWidth,
-          props.source?.maxHeight,
-        ]
-      : []),
-  ]);
+export const QBImage = (props: FastImageProps) => {
+  const source = useImageSource(props.source);
 
   return <FastImage {...props} source={source} />;
 };

package/Components/Image/Image.tsx

@@ -1,8 +1,24 @@
-import { Image, ImageProps, ImageStyle, StyleProp } from "react-native";
+import React from "react";
+import {
+  Image,
+  ImageBackground,
+  ImageProps,
+  ImageStyle,
+  StyleProp,
+} from "react-native";
 
 export interface Props extends ImageProps {
   style?: StyleProp<ImageStyle> | undefined;
 }
 
 // TODO - React.FC<Props> QBImage should process incoming url and apply any transformations if needed
-export const QBImage = Image;
+export const QBImage = ({
+  children,
+  ...props
+}: Props & { children?: React.ReactNode }) => {
+  if (children) {
+    return <ImageBackground {...props}>{children}</ImageBackground>;
+  }
+
+  return <Image {...props} />;
+};

package/Components/Image/utils/index.ts

@@ -0,0 +1,29 @@
+import { useMemo } from "react";
+
+export const useImageSource = (source) => {
+  return useMemo(() => {
+    if (typeof source === "number") {
+      return source;
+    }
+
+    return {
+      uri: source.uri,
+      headers: source.headers,
+      priority: source.priority,
+      cache: source.cache,
+      maxWidth: source.maxWidth,
+      maxHeight: source.maxHeight,
+    };
+  }, [
+    ...(typeof source === "object"
+      ? [
+          source?.uri,
+          source?.priority,
+          source?.cache,
+          source?.headers,
+          source?.maxWidth,
+          source?.maxHeight,
+        ]
+      : []),
+  ]);
+};

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

@@ -14,6 +14,46 @@ exports[`Layout TV renders 1`] = `
   <View
     backgroundImageUrl="http://applicaster.com"
     testID="background-component"
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "position": "absolute",
+            "top": 0,
+            "width": 1920,
+            "zIndex": 10,
+          },
+          Object {
+            "maxHeight": 10,
+          },
+        ]
+      }
+      testID="nav-bar-container"
+    >
+      <View
+        isVisible={true}
+        menuPlugin={
+          Object {
+            "module": [Function],
+            "name": "resolved-menu-plug",
+            "type": "menu",
+          }
+        }
+        navigationProps={
+          Object {
+            "assets": undefined,
+            "home": undefined,
+            "nav_items": undefined,
+            "rules": undefined,
+            "selected": undefined,
+            "styles": undefined,
+            "title": "",
+          }
+        }
+        testID="nav-bar-component"
+      />
+    </View>
+  </View>
 </View>
 `;

package/Components/Layout/TV/index.tsx

@@ -118,7 +118,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
           ) : null}
           {/** Render NavBarContainer over ScreenContainer to let tvOS native
           focus manager works correctly to focus nav bar items first **/}
-          {!isTVOS ? navBarContainer : null}
+          {isTVOS ? navBarContainer : null}
           <TransitionOverlay />
         </Components.Background>
       </ScreenLayoutContextProvider>

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { ImageStyle, View } from "react-native";
 import * as R from "ramda";
-import ImageComponent from "@applicaster/zapp-react-native-ui-components/Components/FastImage";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 import { useImageSourceWithDefault, useCheckFailedUri } from "./hooks";
+import useImageSize from "./hooks/useImageSize";
 
 type Source = {
   uri: string;
@@ -19,32 +19,13 @@ type Props = Record<string, any> & {
   withDimensions: (source: Source) => Source;
 };
 
-const MemoizedImage = React.memo(ImageComponent, R.equals);
-
-const normalize = Math.ceil;
+const MemoizedImage = React.memo(QBImage, R.equals);
 
 const isValidExternalSource = (source): boolean =>
   source?.uri?.startsWith("http") ||
   source?.uri?.startsWith("data:image") ||
   source?.uri?.startsWith("file://");
 
-const isValidSize = (size: unknown): boolean =>
-  toFiniteNumberWithDefault(0, size) > 0;
-
-const getSourceWithMaxSizes = (applyMaxSize, style, source) => {
-  const { width, height } = style;
-
-  if (!applyMaxSize || !isValidSize(width) || !isValidSize(height)) {
-    return source;
-  }
-
-  return {
-    ...source,
-    maxWidth: normalize(width),
-    maxHeight: normalize(height),
-  };
-};
-
 export default function Image({
   style,
   uri,
@@ -82,10 +63,12 @@ export default function Image({
 
   const applyMaxSize = toBooleanWithDefaultFalse(otherProps?.applyMaxSize);
 
-  const sourceWithMaxSizes = React.useMemo(
-    () => withDimensions(getSourceWithMaxSizes(applyMaxSize, style, source)),
-    [applyMaxSize, style?.height, style?.width, source?.uri, withDimensions]
-  );
+  const sourceWithMaxSizes = useImageSize({
+    style,
+    applyMaxSize,
+    source,
+    withDimensions,
+  });
 
   if (isFailedToLoadUri(uri) || !isValidExternalSource(source)) {
     return <View style={style} />;

package/Components/MasterCell/DefaultComponents/Image/hooks/useImageSize.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { ImageStyle } from "react-native";
+import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Source = {
+  uri: string;
+};
+
+type Props = Record<string, any> & {
+  style: ImageStyle;
+  uri?: string;
+  placeholderImage?: string;
+  entry?: ZappEntry | ZappFeed;
+  withDimensions: (source: Source) => Source;
+};
+
+const normalize = Math.ceil;
+
+const isValidSize = (size: unknown): boolean =>
+  toFiniteNumberWithDefault(0, size) > 0;
+
+type WidthDimensions = { aspectRatio?: number; width: number; height?: number };
+type HeightDimensions = {
+  aspectRatio?: number;
+  width?: number;
+  height: number;
+};
+type FullDimensions = { aspectRatio?: number; width: number; height: number };
+type Dimensions = WidthDimensions | HeightDimensions | FullDimensions;
+
+const calculateDimensions = ({ aspectRatio, width, height }: Dimensions) => {
+  if (aspectRatio) {
+    return {
+      width: width || height * aspectRatio,
+      height: height || width / aspectRatio,
+    };
+  }
+
+  return { width, height };
+};
+
+const getSourceWithMaxSizes = (applyMaxSize, style, source) => {
+  const { width, height } = calculateDimensions(style);
+
+  if (!applyMaxSize || !isValidSize(width) || !isValidSize(height)) {
+    return source;
+  }
+
+  return {
+    ...source,
+    maxWidth: normalize(width),
+    maxHeight: normalize(height),
+  };
+};
+
+export default function useImageSize(props: Props) {
+  const { style, applyMaxSize, source, withDimensions } = props;
+
+  const sourceWithMaxSizes = React.useMemo(
+    () => withDimensions(getSourceWithMaxSizes(applyMaxSize, style, source)),
+    [applyMaxSize, style?.height, style?.width, source?.uri, withDimensions]
+  );
+
+  return sourceWithMaxSizes;
+}

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -18,6 +18,7 @@ type LiveImageProps = {
   imageKey?: string;
   state: "focused" | "unfocused" | "selected";
   audio_muted_by_default?: boolean;
+  uri: string; // cover image url
 };
 
 const DEFAULT_PLAYER_IDENTIFIER = "QuickBrickPlayerPlugin";
@@ -209,10 +210,11 @@ const LiveImageComponent = (props: LiveImageProps) => {
 
   return (
     <>
-      <Image {...props} />
+      <Image {...props} applyMaxSize />
       {isShouldRender && (
         <View style={[style, positionAbsolute]}>
           <PlayerLiveImage
+            uri={props.uri}
             playerId={cellUUID}
             playerPluginId={playerPluginId}
             screenConfig={screenConfig}

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

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { isNil } from "ramda";
-import { Image as RNImage, ImageStyle, View } from "react-native";
+import { ImageStyle, View } from "react-native";
 import {
   FIT_POSITION,
   IMAGE_SIZING_FIT,
   IMAGE_SIZING_FILL,
 } from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
 import { useGetImageDimensions } from "./hooks";
 import {
@@ -59,7 +60,7 @@ const SecondaryImageComponent = (props: Props) => {
 
   return (
     <View style={style} onLayout={onAsyncRender}>
-      <RNImage
+      <Image
         {...props}
         source={{ uri }}
         style={{

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -4,7 +4,9 @@ import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
 import * as R from "ramda";
 import * as React from "react";
-import { Image, Text, TextStyle, View, ViewStyle } from "react-native";
+import { Text, TextStyle, View, ViewStyle } from "react-native";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+
 import * as programStyles from "./styles";
 
 type Props = {

package/Components/RouteManager/index.tsx

@@ -14,7 +14,7 @@ type Props = { pathname: string; screenData: Record<string, any> };
  * @param {Props}: see props above
  */
 export function RouteManager(props: Props) {
-  const { pathname, screenData } = useRoute();
+  const { pathname, screenData: _screenData } = useRoute();
   const pathAttributes = getPathAttributes({ pathname });
 
   const { screenType, screenId } = R.last(pathAttributes);
@@ -25,7 +25,7 @@ export function RouteManager(props: Props) {
         screenType={screenType}
         screenId={screenId}
         {...props}
-        screenData={screenData}
+        screenData={props.screenData}
       />
     </TestId>
   );

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

@@ -19,6 +19,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   <View>
     <View
       pathname="/river/testId"
+      screenData={Object {}}
       testID="routeManager"
     />
   </View>
@@ -44,6 +45,7 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   <View>
     <View
       pathname="/river/testId"
+      screenData={Object {}}
       testID="routeManager"
     />
   </View>

package/Components/Screen/index.tsx

@@ -14,6 +14,7 @@ import {
   useCurrentScreenData,
   useNavbarState,
   useScreenData,
+  useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
 
@@ -41,13 +42,18 @@ function isValidColor(string) {
 
 type Props = {
   pathname: string;
-  screenData: unknown;
+  screenData: Record<string, any>;
   setToggleMenu: () => void;
   setCloseMenu: () => void;
 };
 
-export function Screen({ setToggleMenu, setCloseMenu }: Props) {
+export function Screen({
+  setToggleMenu,
+  setCloseMenu,
+  screenData: _screenData,
+}: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
+  const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
 
   // Gets the data for the current screen configuration
@@ -63,7 +69,8 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
 
   const currentRiver = useScreenData(
     (routeData.screenData as ZappRiver)?.targetScreen
-      ? (routeData.screenData as ZappRiver)?.targetScreen.id
+      ? (routeData.screenData as ZappRiver)?.targetScreen?.id ??
+          navigation.activeRiver.id
       : (routeData.screenData as ZappRiver)?.screen_id
   );
 
@@ -130,7 +137,7 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
 
         <OfflineFallbackScreen screenData={screenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
-          <RouteManager pathname={pathname} screenData={screenData} />
+          <RouteManager pathname={pathname} screenData={_screenData} />
         </OfflineFallbackScreen>
       </View>
     </ScreenContextProvider>

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -14,7 +14,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import { getUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
-import { PlayerImageBackground } from "../PlayerImageBackground";
+import Image from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/Image";
 import { LiveImage, LiveImageManager, LiveImageType } from "./LiveImageManager";
 
 import { AnimatedInOut } from "@applicaster/zapp-react-native-ui-components/Components/AnimatedInOut";
@@ -39,12 +39,13 @@ type Props = {
   imageKey?: string;
   screenConfig: Record<string, any>;
   audioMutedByDefault?: boolean;
+  uri: string; // cover image url
 };
 
 const PlayerLiveImageComponent = (props: Props) => {
   const dimensions = useDimensions("screen", { fullDimensions: true });
 
-  const { item, style, playerId, imageKey } = props;
+  const { item, style, playerId } = props;
 
   const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
   const [mode, setMode] = React.useState(LiveImageType.Image);
@@ -63,24 +64,27 @@ const PlayerLiveImageComponent = (props: Props) => {
    *
    * @param type video or image
    */
-  const setModeDebounced = React.useCallback((type: LiveImageType) => {
-    if (type === LiveImageType.Video) {
-      if (type === mode) {
-        return;
-      }
+  const setModeDebounced = React.useCallback(
+    (type: LiveImageType) => {
+      if (type === LiveImageType.Video) {
+        if (type === mode) {
+          return;
+        }
+
+        timeoutRef.current = setTimeout(() => {
+          setMode(type);
+        }, 1000) as unknown as NodeJS.Timeout;
+      } else {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
 
-      timeoutRef.current = setTimeout(() => {
         setMode(type);
-      }, 1000) as unknown as NodeJS.Timeout;
-    } else {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
       }
-
-      setMode(type);
-    }
-  }, [mode]);
+    },
+    [mode]
+  );
 
   const { screenConfig, playerPluginId } = props;
 
@@ -100,7 +104,7 @@ const PlayerLiveImageComponent = (props: Props) => {
       return new LiveImage({
         playerId,
         player: playerFactoryItem.controller,
-        component: playerFactoryItem?.Component
+        component: playerFactoryItem?.Component,
       });
     } else {
       throw new Error("Player factory item is null");
@@ -111,10 +115,7 @@ const PlayerLiveImageComponent = (props: Props) => {
     liveImageItem.setMode = setModeDebounced;
   }, [setModeDebounced, liveImageItem]);
 
-  const { start, end } = React.useMemo(
-    () => getAutoplaySettings(item),
-    [item]
-  );
+  const { start, end } = React.useMemo(() => getAutoplaySettings(item), [item]);
 
   const controller = liveImageItem.getPlayer();
   const player = usePlayer(playerId);
@@ -239,7 +240,12 @@ const PlayerLiveImageComponent = (props: Props) => {
 
   const onPositionUpdated = React.useCallback(
     (data) => {
-      const normalizedRect = (rect: {left: number, right: number, top: number, bottom: number }) => {
+      const normalizedRect = (rect: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+      }) => {
         if (!rect) {
           return null;
         }
@@ -283,6 +289,7 @@ const PlayerLiveImageComponent = (props: Props) => {
   const videoStyles = { ...style, position: "absolute", zIndex: -100 };
   const Player: any = liveImageItem.component || BufferAnimation;
 
+  // TODO: nice to have - resolve imageKey when imageUrl is not provided
   return (
     <TrackedView
       testId={`tracked-view-${playerId}-${item.title}`}
@@ -307,11 +314,7 @@ const PlayerLiveImageComponent = (props: Props) => {
           animationConfig={overlayFadeIn}
           staticStyles={style}
         >
-          <PlayerImageBackground
-            entry={item}
-            style={style}
-            imageKey={imageKey}
-          />
+          <Image {...props} resizeMode="cover" style={style} applyMaxSize />
         </AnimatedInOut>
       }
     </TrackedView>

package/Components/VideoLive/__tests__/PlayerLiveImageComponent.test.tsx

@@ -3,6 +3,8 @@ import * as React from "react";
 import { render } from "@testing-library/react-native";
 import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
 import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
+
 import { PlayerLiveImage } from "../PlayerLiveImageComponent";
 
 const seekTo = jest.fn();
@@ -16,6 +18,14 @@ jest.mock(
   })
 );
 
+const Wrapper = ({ children }: { children: React.ReactChildren }) => (
+  <ThemeContext.Provider
+    value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
+  >
+    {children}
+  </ThemeContext.Provider>
+);
+
 describe("PlayerLiveImageComponent", () => {
   const defaultProps = {
     item: { id: "1", title: "Test", type: { value: "" } },
@@ -39,7 +49,11 @@ describe("PlayerLiveImageComponent", () => {
   });
 
   it("should render correctly with default props", () => {
-    const component = render(<PlayerLiveImage {...defaultProps} />);
+    const component = render(
+      <Wrapper>
+        <PlayerLiveImage {...defaultProps} />
+      </Wrapper>
+    );
 
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -53,7 +67,11 @@ describe("PlayerLiveImageComponent", () => {
       },
     };
 
-    render(<PlayerLiveImage {...props} />);
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...props} />
+      </Wrapper>
+    );
 
     // TODO: implement this test
   });
@@ -67,7 +85,11 @@ describe("PlayerLiveImageComponent", () => {
       },
     };
 
-    render(<PlayerLiveImage {...props} />);
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...props} />
+      </Wrapper>
+    );
 
     // TODO: implement this test
   });

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -13,35 +13,30 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
       }
     }
   >
-    <View
-      accessibilityIgnoresInvertColors={true}
-      style={Object {}}
-    >
-      <Image
-        resizeMode="cover"
-        source={
-          Object {
-            "uri": undefined,
-          }
+    <Image
+      applyMaxSize={true}
+      audioMutedByDefault={false}
+      imageKey="image1"
+      item={
+        Object {
+          "id": "1",
+          "title": "Test",
+          "type": Object {
+            "value": "",
+          },
         }
-        style={
-          Array [
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            Object {
-              "height": undefined,
-              "width": undefined,
-            },
-            undefined,
-          ]
+      }
+      onError={[Function]}
+      playerId="player1"
+      resizeMode="cover"
+      screenConfig={Object {}}
+      source={
+        Object {
+          "uri": "",
         }
-      />
-    </View>
+      }
+      style={Object {}}
+    />
   </View>
 </TrackedView>
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.30",
+  "version": "12.0.0-rc.31",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.30",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.30",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.30",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.30",
+    "@applicaster/applicaster-types": "12.0.0-rc.31",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.31",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.31",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.31",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",