@applicaster/zapp-react-native-ui-components 13.0.0-alpha.6179233127 → 13.0.0-alpha.6234681660

package/Components/Cell/Cell.tsx

@@ -12,6 +12,7 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
+import { styles } from "./styles";
 
 type Props = {
   item: ZappEntry;
@@ -68,17 +69,6 @@ type State = {
   hasFocusableInside: boolean;
 };
 
-const baseCellStyles = {
-  height: "100%",
-  display: "flex",
-  flex: 1,
-} as const;
-
-const touchableStyles = {
-  flex: 1,
-  height: "100%",
-} as const;
-
 export class CellComponent extends React.Component<Props, State> {
   constructor(props) {
     super(props);
@@ -252,7 +242,7 @@ export class CellComponent extends React.Component<Props, State> {
       <View
         testID={`${component?.id}-${id}`}
         accessible={false}
-        style={touchableStyles}
+        style={styles.touchableCell}
       >
         <Focusable
           id={focusableId}
@@ -264,7 +254,7 @@ export class CellComponent extends React.Component<Props, State> {
           hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
           preferredFocus={preferredFocus}
           offsetUpdater={offsetUpdater}
-          style={baseCellStyles}
+          style={styles.baseCell}
           isFocusable={isFocusable}
           skipFocusManagerRegistration={skipFocusManagerRegistration}
         >

package/Components/Cell/CellWithFocusable.tsx

@@ -5,6 +5,8 @@ import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/
 
 import { useCellState } from "../MasterCell/utils";
 import { FocusableGroup } from "../FocusableGroup";
+import { CellWrapper } from "./CellWrapper";
+import { styles } from "./styles";
 
 type Props = {
   item: ZappEntry;
@@ -40,7 +42,7 @@ export function CellWithFocusable(props: Props) {
   const [isFocused, setIsFocused] = React.useState(false);
 
   const state = useCellState({
-    id: item.id,
+    item,
     behavior,
     focused: isFocused || toBooleanWithDefaultFalse(focused),
   });
@@ -88,19 +90,21 @@ export function CellWithFocusable(props: Props) {
       onBlur={onGroupBlur}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
     >
-      <CellRenderer
-        testID={"cell-with-focusable-cell-renderer"}
-        item={item}
-        groupId={`focusable-cell-wrapper-${id}`}
-        onToggleFocus={handleToggleFocus}
-        state={state}
-        prefixId={id}
-        focusedButtonId={focusedButtonId}
-        preferredFocus={true}
-        skipFocusManagerRegistration={skipFocusManagerRegistration}
-        isFocusable={isFocusable}
-        focused={focused}
-      />
+      <CellWrapper style={styles.cellWrapper}>
+        <CellRenderer
+          testID={"cell-with-focusable-cell-renderer"}
+          item={item}
+          groupId={`focusable-cell-wrapper-${id}`}
+          onToggleFocus={handleToggleFocus}
+          state={state}
+          prefixId={id}
+          focusedButtonId={focusedButtonId}
+          preferredFocus={true}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
+          isFocusable={isFocusable}
+          focused={focused}
+        />
+      </CellWrapper>
     </FocusableGroup>
   );
 }

package/Components/Cell/CellWrapper.ts

@@ -0,0 +1,5 @@
+import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import React from "react";
+import { View } from "react-native";
+
+export const CellWrapper = isTvOSPlatform() ? View : React.Fragment;

package/Components/Cell/styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  cellWrapper: {
+    flex: 0,
+    height: "100%",
+  },
+  baseCell: {
+    height: "100%",
+    display: "flex",
+    flex: 1,
+  },
+  touchableCell: {
+    flex: 1,
+    height: "100%",
+  },
+});

package/Components/ErrorScreen/index.tsx

@@ -105,6 +105,11 @@ const defaultProps = {
       alignItems: "center",
       justifyContent: "center",
     },
+    focusedButton: {
+      backgroundColor: "#3a3a3a",
+      borderColor: "#ffffff",
+      borderWidth: 2,
+    },
     buttonText: {
       fontFamily: platformSelect({
         ios: "SFProText-Medium",
@@ -116,6 +121,9 @@ const defaultProps = {
       color: "rgba(255, 255, 255, 1)",
       textTransform: "uppercase",
     },
+    focusedText: {
+      color: "#ffffff",
+    },
   },
 };
 

package/Components/FocusableCell/index.tsx

@@ -23,7 +23,7 @@ export function FocusableCell(props: Props) {
     behavior,
   } = props;
 
-  const state = useCellState({ id: item.id, behavior, focused });
+  const state = useCellState({ item, behavior, focused });
 
   React.useEffect(() => {
     if (focused && scrollTo && !isAndroid) {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -1,14 +1,14 @@
 import * as React from "react";
 import * as R from "ramda";
-import { ViewStyle } from "react-native";
 import {
   findPluginByType,
   findPluginByIdentifier,
 } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  useDimensions,
+  useNavigation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
@@ -78,12 +78,6 @@ const getPlayer = (
   return getPlayerWithModuleProperties(PlayerModule);
 };
 
-const dimensionsContext: "window" | "screen" = platformSelect({
-  android_tv: "window",
-  amazon: "window",
-  default: "screen",
-});
-
 type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
@@ -91,16 +85,11 @@ type PlayableComponent = {
 export function HandlePlayable({
   item,
   isModal,
-  modalHeight,
-  modalWidth,
   mode,
   groupId,
 }: Props): React.ReactElement | null {
   const state = usePickFromState();
 
-  const { width: screenWidth, height: screenHeight } =
-    useDimensions(dimensionsContext);
-
   const { closeVideoModal } = useNavigation();
 
   const [Player, playerModuleProperties] = getPlayer(item, state);
@@ -118,9 +107,7 @@ export function HandlePlayable({
     if (!isModal) {
       closeVideoModal();
     }
-  }, []);
 
-  React.useEffect(() => {
     const castStateHandler = async () => {
       const castState = await CastPlugin?.getCastState();
       setCasting(castState === "Connected");
@@ -142,23 +129,23 @@ export function HandlePlayable({
   }, []);
 
   React.useEffect(() => {
-    if (casting) {
-      setPlayable({ Component: CastPlugin?.CastHandler });
-    } else {
-      setPlayable({ Component: PlayerContainer });
-    }
+    setPlayable({
+      Component: casting ? CastPlugin?.CastHandler : PlayerContainer,
+    });
   }, [casting]);
 
-  const Component = playable?.Component;
+  const { width: screenWidth, height: screenHeight } = useDimensions("window");
 
   const style = React.useMemo(
     () => ({
-      width: isModal ? modalWidth : mode === "PIP" ? "100%" : screenWidth,
-      height: isModal ? modalHeight : mode === "PIP" ? "100%" : screenHeight,
+      width: isModal ? "100%" : mode === "PIP" ? "100%" : screenWidth,
+      height: isModal ? "100%" : mode === "PIP" ? "100%" : screenHeight,
     }),
-    [screenWidth, screenHeight, modalHeight, modalWidth, isModal, mode]
+    [screenWidth, screenHeight, isModal, mode]
   );
 
+  const Component = playable?.Component;
+
   if (Component) {
     return (
       <Component
@@ -174,5 +161,5 @@ export function HandlePlayable({
     );
   }
 
-  return !isModal ? <BufferAnimation videoStyle={style as ViewStyle} /> : null;
+  return !isModal ? <BufferAnimation videoStyle={style} /> : null;
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
-import * as R from "ramda";
+import { equals, omit } from "ramda";
 
 import { useImageSource } from "./hooks";
 
@@ -17,7 +17,7 @@ type Props = Record<string, any> & {
   withDimensions: (source: Source) => Source;
 };
 
-const MemoizedImage = React.memo(RnImage, R.equals);
+const MemoizedImage = React.memo(RnImage, equals);
 
 function Image({
   style,
@@ -44,11 +44,12 @@ function Image({
 
   return (
     <MemoizedImage
+      key={_source?.uri || "no-image"}
       style={style as ImageStyle}
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...R.omit(["source"], otherProps)}
+      {...omit(["source"], otherProps)}
     />
   );
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
+import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
@@ -7,9 +7,13 @@ import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
 
+const getSourceContext = path(["source", "context"]);
+const getSourceUri = path(["source", "uri"]);
+const getState = path(["state"]);
+
 export const useImageSource = ({ uri, entry, otherProps }): Return => {
-  const uriContext = R.path(["source", "context"], otherProps);
-  const uriState = R.path(["state"], otherProps);
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 
@@ -34,7 +38,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
     return { uri };
   }
 
-  const uriFromSource = R.path(["source", "uri"], otherProps);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -56,7 +60,7 @@ const getSource = (uri, showDefault, placeholderImage, otherProps) => {
     return { uri };
   }
 
-  const uriFromSource = R.path(["source", "uri"], otherProps);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -72,8 +76,8 @@ export const useImageSourceWithDefault = ({
   placeholderImage,
   otherProps,
 }): Return => {
-  const uriContext = R.path(["source", "context"], otherProps);
-  const uriState = R.path(["state"], otherProps);
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -6,6 +6,7 @@ import React, { useEffect } from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { BehaviorSubject } from "rxjs";
 import { masterCellLogger } from "../logger";
+import get from "lodash/get";
 
 const parseContextKey = (key: string): string | null => {
   if (!key?.startsWith("@{ctx/")) return null;
@@ -72,11 +73,13 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
 // We cant use async in this function (its inside render),
 // so we rely on useBehaviorUpdate to update current value and trigger re-render
 export const isCellSelected = (
-  id: string | number,
+  item: ZappEntry,
   behavior?: Behavior
 ): boolean => {
   if (!behavior) return false;
 
+  const id = behavior.selector ? get(item, behavior.selector) : item.id;
+
   if (behavior.selection_source === "now_playing") {
     const player = playerManager.getActivePlayer();
 

package/Components/MasterCell/utils/index.ts

@@ -190,24 +190,24 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = (id: string | number, behavior?: Behavior) => {
-  return isCellSelected(id, behavior);
+export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
+  return isCellSelected(item, behavior);
 };
 
 export const useCellState = ({
-  id,
+  item,
   behavior,
   focused,
 }: {
-  id: string | number;
+  item: ZappEntry;
   behavior: Behavior;
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
 
   const _isSelected = useMemo(
-    () => isSelected(id, behavior),
-    [behavior, id, lastUpdate]
+    () => isSelected(item, behavior),
+    [behavior, item, lastUpdate]
   );
 
   return getCellState({ focused, selected: _isSelected });

package/Components/ModalComponent/Button/assets.ts

@@ -1,4 +1,4 @@
 /* eslint-disable max-len */
 
 export const defaultSelectedAsset: string =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGsSURBVHgB7drdaYRAFIbhk2yuBTuwlXSQDrKdrOnErSSlpATBe0nOBxEMEXV+nDnjfg8MwiK4vKjMDIoQERERERERERHRY+j7vtHxJvTfb5wvHd/DMLyLpyc5IcTRw6eOZvrtcrlcq6q6i6PTBVqKM/GJdKpAa3EmrpGe5ST2xIFxHF/FwSnuoL1x1L2u66s4KD7QkXGg6EBHx4FiA6WIA0UGShUHiguUMg4UFSh1HCgmUI44UESgXHEgaCatf/wWslLeeY1GMsWBF/GEOHpodeouGkl8Vso7rtFIxjjg9YhNcea/+W4nrFyjkcxxwDnQUpxJrEhW4oBToLU4k9BIluKA60t6M6i+kzrfF7e1OODziLV6uG2d53onWYwDvi/pViJGshoHvCeKsSJZjgNBM+nQSNbjQPBSwzdSCXEgylrMNVIpcSDaYnVvJPWhA9OAZuO87HEg6mreIdIWE3Eg+nZHhEhm4sAh+0EBkUzFgcM2zDwimYsDh+4oOkQyGQcO33LdEclsHEiyJ70SyXScpBAJX3vNRif01yxSJ7SMH1USEREREREREREV7Ad//SBSU+GIIAAAAABJRU5ErkJggg==";
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAA+0lEQVR4nO3a3QnCQBBF4ZRiSXZgKVqKnVnCQBpQwb0QJA752ZjszPlg3/JwOU8b2K4DAAAAAAAAkIOZnczsvPeOQypxHmb27Pv+sveeQxnG0SFSMRaHSIUXJ32kKXHKue+99e+I4yCOgzgO4jiI4yCOgzgO4jiajfMedd366t50nK3/b0LE2SpSqDi1I4WMUytSs3G6z/jbhOGLIzUdR7aKFCKO1I4UKo7UihQyjqyNFDqOLI2UIo7MjZQqjkyNVL7LFUdmRMoXRypEihtHVkSKH0cWRMoTR2ZEyhdHJkTKG0ecSMSRkUjE+TaIRJxfeFQJAAAAAAAANOwFT0Mt2UgcaMoAAAAASUVORK5CYII=";

package/Components/OfflineHandler/utils/index.ts

@@ -57,7 +57,7 @@ export const useNotificationHeight = () => {
 
   const navBarHeight = platformSelect({ ios: 44, android: 56 });
 
-  const statusHeight = Platform.OS === "android" ? 0 : insets.top;
+  const statusHeight = insets.top;
   const notificationHeight = statusHeight + navBarHeight;
 
   return { statusHeight, notificationHeight };

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -34,6 +34,7 @@ type Props = {
   getStaticComponentFeed: any;
   pullToRefreshPipesV1RefreshingStateUpdater: () => boolean;
   refreshingPipesV1?: boolean;
+  stickyHeaderIndices?: number[];
 };
 
 const styles = StyleSheet.create({
@@ -61,6 +62,7 @@ function ComponentsMapComponent(props: Props) {
     // TODO: Remove when pipes v1 is deprecated.
     pullToRefreshPipesV1RefreshingStateUpdater,
     refreshingPipesV1,
+    stickyHeaderIndices,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -274,6 +276,7 @@ function ComponentsMapComponent(props: Props) {
             overScrollMode={Platform.OS === "android" ? "never" : "auto"}
             scrollIndicatorInsets={scrollIndicatorInsets}
             extraData={feed}
+            stickyHeaderIndices={stickyHeaderIndices}
             onLayout={handleOnLayout}
             removeClippedSubviews
             initialNumToRender={3}

package/Components/Screen/TV/index.web.tsx

@@ -92,6 +92,10 @@ const getNavigations = ({
   return fallbackNavigations;
 };
 
+const onRelease = () => {
+  focusManager.setInitialFocus();
+};
+
 export const Screen = ({ route, Components }: Props) => {
   if (isNilOrEmpty(route)) {
     throw Error("Required props: route is missing");
@@ -152,12 +156,7 @@ export const Screen = ({ route, Components }: Props) => {
   const isScreenActive = useIsScreenActive();
 
   return (
-    <FreezeWithCallback
-      freeze={!isScreenActive}
-      onRelease={() => {
-        focusManager.setInitialFocus();
-      }}
-    >
+    <FreezeWithCallback freeze={!isScreenActive} onRelease={onRelease}>
       <View style={[styles.container, { backgroundColor }]}>
         <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
           <NavBar

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -23,10 +23,12 @@ import {
   setScrollModalAnimatedValue,
 } from "./utils";
 
+import { DURATION_TO_MINIMIZE } from "./const";
+
 const getAnimatedConfig = (toValue) => {
   return {
     toValue,
-    duration: 200,
+    duration: DURATION_TO_MINIMIZE,
     useNativeDriver: true,
   };
 };

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -24,8 +24,11 @@ import {
   gestureListenerHelper,
   getAnimationDefaultValue,
   getAnimationStyle,
+  getMoveUpValue,
 } from "./utils";
 
+import { DURATION_TO_MINIMIZE, DEFAULT_DURATION_FOR_ANIMATION } from "./const";
+
 type Props = {
   animationType: string;
   children: React.ReactNode;
@@ -97,14 +100,16 @@ export const AnimationView = ({
 
   const inlineAudioPlayer = additionalData.inlineAudioPlayer;
 
-  const moveUpValue = additionalData.saveArea
-    ? -insets.top + (isAudioItem ? 0 : progressBarHeight)
-    : isTablet
-      ? isTabletLandscape &&
-        (!isAudioItem || (isAudioItem && inlineAudioPlayer))
-        ? -tabletLandscapePlayerTopPosition + progressBarHeight
-        : -130
-      : -50 + progressBarHeight;
+  const moveUpValue = getMoveUpValue({
+    additionalData,
+    insets,
+    isAudioItem,
+    progressBarHeight,
+    isTablet,
+    isTabletLandscape,
+    inlineAudioPlayer,
+    tabletLandscapePlayerTopPosition,
+  });
 
   const moveComponentHorizontalValue = additionalData.moveValue
     ? isRTL
@@ -119,7 +124,10 @@ export const AnimationView = ({
     (animationType, state) => {
       const defaultConfig = {
         toValue: 0,
-        duration: state === PlayerAnimationStateEnum.minimize ? 150 : 100,
+        duration:
+          state === PlayerAnimationStateEnum.minimize
+            ? DURATION_TO_MINIMIZE
+            : DEFAULT_DURATION_FOR_ANIMATION,
         useNativeDriver: true,
       };
 

package/Components/VideoModal/ModalAnimation/__tests__/getMoveUpValue.test.ts

@@ -0,0 +1,108 @@
+import { getMoveUpValue } from "../utils";
+
+describe("getMoveUpValue", () => {
+  it("returns correct value when additionalData.saveArea is true and isAudioItem is false", () => {
+    const result = getMoveUpValue({
+      additionalData: { saveArea: true },
+      insets: { top: 20 },
+      isAudioItem: false,
+      progressBarHeight: 10,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 100,
+    });
+
+    expect(result).toBe(-20 + 10);
+  });
+
+  it("returns correct value when additionalData.saveArea is true and isAudioItem is true", () => {
+    const result = getMoveUpValue({
+      additionalData: { saveArea: true },
+      insets: { top: 15 },
+      isAudioItem: true,
+      progressBarHeight: 5,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 100,
+    });
+
+    expect(result).toBe(-15 + 0);
+  });
+
+  it("returns correct value for audio item (tablet or not)", () => {
+    const result = getMoveUpValue({
+      additionalData: { marginTop: 30 },
+      insets: { top: 0 },
+      isAudioItem: true,
+      progressBarHeight: 0,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 0,
+    });
+
+    expect(result).toBe(-30);
+  });
+
+  it("returns correct value for tablet landscape with inline audio player", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: true,
+      progressBarHeight: 8,
+      isTablet: true,
+      isTabletLandscape: true,
+      inlineAudioPlayer: true,
+      tabletLandscapePlayerTopPosition: 50,
+    });
+
+    expect(result).toBe(-0);
+  });
+
+  it("returns correct value for tablet landscape without audio item", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: false,
+      progressBarHeight: 12,
+      isTablet: true,
+      isTabletLandscape: true,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 60,
+    });
+
+    expect(result).toBe(-60 + 12);
+  });
+
+  it("returns -130 for tablet portrait (not landscape)", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: false,
+      progressBarHeight: 0,
+      isTablet: true,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 0,
+    });
+
+    expect(result).toBe(-130);
+  });
+
+  it("returns -50 + progressBarHeight for mobile audio player in docked mode", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: false,
+      progressBarHeight: 7,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 0,
+    });
+
+    expect(result).toBe(-50 + 7);
+  });
+});

package/Components/VideoModal/ModalAnimation/const.ts

@@ -0,0 +1,5 @@
+export const DURATION_TO_MINIMIZE = 200; // old value 200
+
+export const DURATION_TO_MAXIMIZE = 0;
+
+export const DEFAULT_DURATION_FOR_ANIMATION = 200; // old value 100

package/Components/VideoModal/ModalAnimation/index.ts

@@ -14,3 +14,5 @@ export { useModalAnimationContext } from "./useModalAnimationContext";
 export { AnimationComponent } from "./AnimationComponent";
 
 export { ComponentAnimationType, defaultAspectRatioWidth } from "./utils";
+
+export { DURATION_TO_MINIMIZE, DURATION_TO_MAXIMIZE } from "./const";

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -1,6 +1,7 @@
 /* eslint-disable padding-line-between-statements */
 
 import { PlayerAnimationStateEnum } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 export enum ComponentAnimationType {
   bottomBar = "bottomBar",
@@ -300,3 +301,38 @@ export const resetScrollAnimatedValues = (
   dragScrollY.setValue(0);
   dragVideoPlayerY.setValue(0);
 };
+
+export const getMoveUpValue = ({
+  additionalData,
+  insets,
+  isAudioItem,
+  progressBarHeight,
+  isTablet,
+  isTabletLandscape,
+  inlineAudioPlayer,
+  tabletLandscapePlayerTopPosition,
+}) => {
+  if (additionalData.saveArea) {
+    return -insets.top + (isAudioItem ? 0 : progressBarHeight);
+  }
+
+  if (isAudioItem) {
+    // for any layouts in audioPlayer
+    return -1 * toNumberWithDefaultZero(additionalData?.marginTop);
+  }
+
+  if (isTablet) {
+    if (
+      isTabletLandscape &&
+      (!isAudioItem || (isAudioItem && inlineAudioPlayer))
+    ) {
+      return -tabletLandscapePlayerTopPosition + progressBarHeight;
+    }
+
+    // for audioPlayer(tablet/isTabletPortrait) in docked mode
+    return -130;
+  }
+
+  // for audioPlayer(mobile) in docked mode
+  return -50 + progressBarHeight;
+};

package/Components/VideoModal/VideoModal.tsx

@@ -137,14 +137,14 @@ const VideoModalComponent = () => {
                 styles.container,
                 {
                   backgroundColor,
+                  width: modalSize.width,
+                  height: modalSize.height,
                 },
               ]}
             >
               <HandlePlayable
                 item={item}
                 isModal={mode !== "PIP"}
-                modalHeight={modalSize.height}
-                modalWidth={modalSize.width}
                 mode={mode}
               />
             </AnimatedPlayerModalWrapper>

package/Decorators/RiverResolver/index.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = ZappUIComponentProps & {
   rivers: ZappRivers;
@@ -12,27 +12,25 @@ type Props = ZappUIComponentProps & {
 
 export function withRiver(Component: ZappComponent): ZappComponent {
   const RiverWithData = ({ screenId, ...otherProps }: Props) => {
-    const { rivers } = usePickFromState(["rivers"]);
+    const river = useRivers()?.[screenId];
     const pathname = usePathname();
-    const river = rivers[screenId];
 
     if (!river) {
       return null;
     }
 
-    if (!otherProps.screenData) {
-      otherProps.screenData = river;
-    }
-
     return (
       <Component
         screenId={screenId}
         river={river}
         key={isTV() ? pathname : undefined}
         {...otherProps}
+        screenData={otherProps.screenData || river}
       />
     );
   };
 
+  RiverWithData.displayName = `RiverWithData(${Component.displayName || Component.name})`;
+
   return RiverWithData;
 }

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -230,7 +230,8 @@ export function zappPipesDataConnector(
     const entryContext =
       (shouldUseNestedContext && screenContextData?.nested?.entry
         ? screenContextData?.nested?.entry
-        : screenContextData?.entry) || {};
+        : (screenContextData?.entry?.payload ?? screenContextData?.entry)) ||
+      {};
 
     const screenContext =
       (shouldUseNestedContext && screenContextData?.nested?.screen

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-alpha.6179233127",
+  "version": "13.0.0-alpha.6234681660",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo skipping hybrid typescript build for now"
   },
   "publishConfig": {
@@ -32,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.6179233127",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.6179233127",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.6179233127",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.6179233127",
+    "@applicaster/applicaster-types": "13.0.0-alpha.6234681660",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.6234681660",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.6234681660",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.6234681660",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": ["react-native", "flow", "react-native-stage-0/decorator-support"],
-  "env": {
-    "test": {
-      "presets": [["env", { "modules": "commonjs" }], "react-native", "flow"]
-    }
-  }
-}

package/Components/Cell/CellStyles/FallbackCellStyle/index.js

@@ -1,157 +0,0 @@
-import {
-  getColor,
-  ACTIVE_COLOR,
-  BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
-  FOCUSED_TEXT_COLOR,
-} from "../colors";
-
-const Image = "Image";
-const View = "View";
-const Text = "Text";
-
-const containerStyles = (styles) => ({
-  flex: 1,
-  flexDirection: "column",
-  width: 384,
-  height: 436,
-  borderRadius: 4,
-  backgroundColor: getColor(BACKGROUND_COLOR, styles),
-  marginRight: 48,
-  marginBottom: 48,
-});
-
-const focusedContainerStyles = (styles) => ({
-  ...containerStyles(styles),
-  backgroundColor: getColor(ACTIVE_COLOR, styles),
-});
-
-const imageStyle = {
-  width: 384,
-  height: 216,
-  borderTopRightRadius: 4,
-  borderTopLeftRadius: 4,
-};
-
-const titleContainerStyles = {
-  width: 336,
-  height: 60,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const titleStyles = (styles) => ({
-  fontSize: 26,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontWeight: "bold",
-  fontStyle: "normal",
-});
-
-const focusedTitleStyles = (styles) => ({
-  ...titleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const subtitleContainerStyles = {
-  width: 336,
-  height: 88,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const subtitleStyles = (styles) => ({
-  fontSize: 24,
-  fontWeight: "normal",
-  opacity: 0.8,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontStyle: "normal",
-});
-
-const focusedSubtitleStyles = (styles) => ({
-  ...subtitleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const viewTree = (state, styles) => [
-  {
-    type: View,
-    style:
-      state === "focused"
-        ? focusedContainerStyles(styles)
-        : containerStyles(styles),
-    elements: [
-      {
-        type: Image,
-        style: imageStyle,
-        data: [
-          {
-            func: "image_src_from_media_item",
-            args: ["thumbnail-small"],
-            propName: "uri",
-          },
-        ],
-      },
-      {
-        type: View,
-        style: titleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedTitleStyles(styles)
-                : titleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["title"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 2,
-            },
-          },
-        ],
-      },
-      {
-        type: View,
-        style: subtitleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedSubtitleStyles(styles)
-                : subtitleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["summary"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 3,
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export const fallbackCellStyle = (styles) => ({
-  content_types: {
-    default: {
-      states: {
-        default: viewTree("default", styles),
-        focused: viewTree("focused", styles),
-        selected: viewTree("selected", styles),
-        focused_selected: viewTree("focused_selected", styles),
-      },
-    },
-  },
-});

package/Components/Cell/CellStyles/Hero/index.js

@@ -1,111 +0,0 @@
-import {
-  getColor,
-  ACTIVE_COLOR,
-  BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
-  FOCUSED_TEXT_COLOR,
-} from "../colors";
-
-const Image = "Image";
-const View = "View";
-const Text = "Text";
-
-const containerStyles = (styles) => ({
-  flex: 1,
-  flexDirection: "column",
-  width: 1280,
-  height: 436,
-  borderRadius: 4,
-  backgroundColor: getColor(BACKGROUND_COLOR, styles),
-  marginRight: 48,
-  marginBottom: 48,
-});
-
-const focusedContainerStyles = (styles) => ({
-  ...containerStyles(styles),
-  backgroundColor: getColor(ACTIVE_COLOR, styles),
-});
-
-const imageStyle = {
-  width: 1280,
-  height: 352,
-  borderTopRightRadius: 4,
-  borderTopLeftRadius: 4,
-};
-
-const titleContainerStyles = {
-  width: 1184,
-  height: 60,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const titleStyles = (styles) => ({
-  fontSize: 26,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontWeight: "bold",
-  fontStyle: "normal",
-});
-
-const focusedTitleStyles = (styles) => ({
-  ...titleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const viewTree = (state, styles) => [
-  {
-    type: View,
-    style:
-      state === "focused"
-        ? focusedContainerStyles(styles)
-        : containerStyles(styles),
-    elements: [
-      {
-        type: Image,
-        style: imageStyle,
-        data: [
-          {
-            func: "image_src_from_media_item",
-            args: ["thumbnail-small"],
-            propName: "uri",
-          },
-        ],
-      },
-      {
-        type: View,
-        style: titleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedTitleStyles(styles)
-                : titleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["title"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 2,
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export const hero = (styles) => ({
-  content_types: {
-    default: {
-      states: {
-        default: viewTree("default", styles),
-        focused: viewTree("focused", styles),
-      },
-    },
-  },
-});

package/Components/Cell/CellStyles/ScreenSelector/index.js

@@ -1,68 +0,0 @@
-const viewTree = (state) => [
-  {
-    type: "View",
-    style: {
-      flex: 1,
-      // aspectRatio: 1.0487804878,
-      paddingTop: 14,
-      paddingBottom: 14,
-      paddingRight: 30,
-    },
-    elements: [
-      {
-        type: "View",
-
-        elements: [
-          {
-            type: "Text",
-
-            style: {
-              // paddingHorizontal: "15%",
-              paddingTop: "2%",
-              paddingBottom: "2%",
-              fontSize: 26,
-              lineHeight: 32,
-              color:
-                state === "focused" || state === "selected"
-                  ? "rgba(239,239,239,1.0)"
-                  : "rgba(239,239,239,0.61)",
-              fontWeight: "700",
-            },
-            data: [
-              {
-                func: "path",
-                args: ["title"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 2,
-            },
-          },
-          {
-            type: "View",
-            style: {
-              height: 10,
-              alignItems: "center",
-              justifyContent: "center",
-              borderColor: state === "focused" ? "#FC461B" : "transparent",
-              borderBottomWidth: 6,
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export const screenSelector = {
-  content_types: {
-    default: {
-      states: {
-        default: viewTree("default"),
-        focused: viewTree("focused"),
-        selected: viewTree("selected"),
-      },
-    },
-  },
-};

package/Components/Cell/CellStyles/cellStylesResolver.ts

@@ -1,19 +0,0 @@
-import * as R from "ramda";
-
-import { cellStyles } from "./index";
-
-type Props = {
-  cellStyle: string | null | undefined;
-  componentType: string | null | undefined;
-};
-
-export function cellStylesResolver({ cellStyle, componentType }: Props) {
-  const componentCellStyles =
-    R.prop(componentType, cellStyles) || cellStyles.default;
-
-  const result =
-    R.prop(cellStyle || "fallbackCellStyle", componentCellStyles) ||
-    componentCellStyles.fallbackCellStyle;
-
-  return result;
-}

package/Components/Cell/CellStyles/colors.js

@@ -1,40 +0,0 @@
-import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
-import * as R from "ramda";
-
-export const ACTIVE_COLOR = "ACTIVE_COLOR";
-
-export const BACKGROUND_COLOR = "BACKGROUND_COLOR";
-
-export const MAIN_TEXT_COLOR = "MAIN_TEXT_COLOR";
-
-export const FOCUSED_TEXT_COLOR = "FOCUSED_TEXT_COLOR";
-
-const colorKeyPath = (keyName) => ["tv", keyName, "color"];
-
-const COLORS = {
-  [ACTIVE_COLOR]: {
-    path: colorKeyPath("active"),
-    default: "#FC461B",
-  },
-  [BACKGROUND_COLOR]: {
-    path: colorKeyPath("background"),
-    default: "#2F2F2F",
-  },
-  [MAIN_TEXT_COLOR]: {
-    path: colorKeyPath("main_text"),
-    default: "#EFEFEF",
-  },
-  [FOCUSED_TEXT_COLOR]: {
-    path: colorKeyPath("focused_text_color"),
-    default: "#FFFFFF",
-  },
-};
-
-export const getColor = (name, styles) => {
-  const colorKeyPath = R.path([name, "path"], COLORS);
-
-  return (
-    fixColorHexCode(R.path(colorKeyPath, styles)) ||
-    R.path([name, "default"], COLORS)
-  );
-};

package/Components/Cell/CellStyles/index.js

@@ -1,15 +0,0 @@
-import { fallbackCellStyle } from "./FallbackCellStyle";
-import { hero } from "./Hero";
-import { screenSelector } from "./ScreenSelector";
-
-export const cellStyles = {
-  default: {
-    default: fallbackCellStyle,
-  },
-  hero: {
-    default: hero,
-  },
-  screenSelector: {
-    default: screenSelector,
-  },
-};