@applicaster/zapp-react-native-ui-components 12.0.0-alpha.9004455836 → 12.0.0-alpha.9233494544

package/Components/ModalComponent/Header/index.tsx

@@ -0,0 +1,71 @@
+import React, { useMemo } from "react";
+import { View, StyleSheet, LayoutChangeEvent } from "react-native";
+import { Title, TitleProps } from "./Title";
+import { CloseButton, CloseButtonProps } from "./CloseButton";
+import { getCloseButtonProps, getTitleProps } from "./utils";
+import { PluginConfiguration } from "../index";
+
+type Props = {
+  dismiss: () => void;
+  configuration: PluginConfiguration;
+  width: number;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  summary?: string;
+  title?: string;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});
+
+export function ModalHeader(props: Props) {
+  const { configuration, dismiss, width, onLayout, summary, title } = props;
+
+  const closeButtonProps = useMemo<CloseButtonProps>(
+    () => ({
+      ...getCloseButtonProps(configuration),
+      close: dismiss,
+    }),
+    [configuration, dismiss]
+  );
+
+  const titleProps = useMemo<TitleProps>(
+    () => ({
+      ...getTitleProps(configuration, "title"),
+      text: title,
+    }),
+    [configuration, title]
+  );
+
+  const summaryProps = useMemo<TitleProps>(
+    () => ({
+      ...getTitleProps(configuration, "summary"),
+      text: summary,
+    }),
+    [configuration, summary]
+  );
+
+  const buttonsContainerWidth =
+    configuration.modal_bottom_sheet_close_width +
+    configuration.modal_bottom_sheet_close_margin_left +
+    configuration.modal_bottom_sheet_close_margin_right;
+
+  return (
+    <View onLayout={onLayout} style={styles.container}>
+      <View
+        style={{
+          width: width - buttonsContainerWidth,
+        }}
+      >
+        {title && <Title {...titleProps} />}
+        {summary && <Title {...summaryProps} />}
+      </View>
+      <View style={{ width: buttonsContainerWidth }}>
+        <CloseButton {...closeButtonProps} />
+      </View>
+    </View>
+  );
+}

package/Components/ModalComponent/Header/utils.ts

@@ -0,0 +1,79 @@
+import * as R from "ramda";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { PluginConfiguration } from "../index";
+
+export function getCloseButtonProps(config: PluginConfiguration) {
+  const {
+    modal_bottom_sheet_close_asset,
+    modal_bottom_sheet_close_focus_asset,
+    modal_bottom_sheet_close_height,
+    modal_bottom_sheet_close_width,
+    modal_bottom_sheet_close_switch,
+    modal_bottom_sheet_close_margin_bottom,
+    modal_bottom_sheet_close_margin_left,
+    modal_bottom_sheet_close_margin_right,
+    modal_bottom_sheet_close_margin_top,
+  } = config;
+
+  return {
+    asset: modal_bottom_sheet_close_asset,
+    assetFocused: modal_bottom_sheet_close_focus_asset,
+    enabled: modal_bottom_sheet_close_switch,
+    width: modal_bottom_sheet_close_width,
+    height: modal_bottom_sheet_close_height,
+    marginTop: modal_bottom_sheet_close_margin_top,
+    marginBottom: modal_bottom_sheet_close_margin_bottom,
+    marginLeft: modal_bottom_sheet_close_margin_left,
+    marginRight: modal_bottom_sheet_close_margin_right,
+  };
+}
+
+export function getTextValue(
+  config: PluginConfiguration,
+  entry: ZappEntry,
+  key: string
+): string {
+  const keyValue = config[key];
+
+  if (entry) {
+    const keyPath = R.split(".", keyValue);
+
+    return R.path(keyPath, entry);
+  } else {
+    return keyValue;
+  }
+}
+
+function getConfigKey(
+  config: PluginConfiguration,
+  suffix: string,
+  key: "title" | "summary"
+) {
+  return config?.[`modal_bottom_sheet_${key}_${suffix}`];
+}
+
+export function getTitleProps(
+  config: PluginConfiguration,
+  key: "title" | "summary"
+) {
+  return {
+    enabled: getConfigKey(config, "switch", key),
+    letterSpacing: platformSelect({
+      ios: getConfigKey(config, "ios_letter_spacing", key),
+      android: getConfigKey(config, "android_letter_spacing", key),
+    }),
+    fontFamily: platformSelect({
+      ios: getConfigKey(config, "family_ios_font_selector", key),
+      android: getConfigKey(config, "family_android_font_selector", key),
+    }),
+    lineHeight: getConfigKey(config, "line_height", key),
+    fontSize: getConfigKey(config, "font_size", key),
+    color: getConfigKey(config, "font_color", key),
+    marginTop: getConfigKey(config, "margin_top", key),
+    marginBottom: getConfigKey(config, "margin_bottom", key),
+    marginLeft: getConfigKey(config, "margin_left", key),
+    marginRight: getConfigKey(config, "margin_right", key),
+    numberOfLines: getConfigKey(config, "number_of_lines", key),
+    transform: getConfigKey(config, "transform", key),
+  };
+}

package/Components/ModalComponent/index.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useState } from "react";
+
+import { BasicMeasurementsPortal as MeasurementsPortal } from "@applicaster/zapp-react-native-ui-components/Components/MeasurmentsPortal";
+import { BottomSheetModalContent } from "./BottomSheetModalContent";
+
+export type PluginConfiguration = {
+  [key: string]: any;
+};
+
+type Props = {
+  actionPlugins?: [QuickBrickPlugin];
+  configuration?: PluginConfiguration;
+};
+
+export function ModalComponent(props: ModalBottomSheetContentProps & Props) {
+  const [height, setHeight] = useState(0);
+
+  const onLayout = useCallback(
+    ({ nativeEvent }) => {
+      if (height === 0) {
+        setHeight(nativeEvent.layout.height);
+      }
+    },
+    [height]
+  );
+
+  if (height === 0) {
+    return (
+      <MeasurementsPortal
+        Component={BottomSheetModalContent}
+        componentProps={props}
+        onLayout={onLayout}
+      />
+    );
+  }
+
+  return <BottomSheetModalContent {...props} />;
+}

package/Components/ModalComponent/utils.ts

@@ -0,0 +1,126 @@
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { PluginConfiguration } from "./index";
+
+export function defaultItemProps(
+  config: PluginConfiguration,
+  maxWidth: number
+) {
+  const {
+    modal_bottom_sheet_item_background_color,
+    modal_bottom_sheet_item_focus_background_color,
+    modal_bottom_sheet_item_selected_background_color,
+    modal_bottom_sheet_item_focusected_background_color,
+    modal_bottom_sheet_item_corner_radius,
+    modal_bottom_sheet_item_margin_bottom,
+    modal_bottom_sheet_item_margin_left,
+    modal_bottom_sheet_item_margin_right,
+    modal_bottom_sheet_item_margin_top,
+    modal_bottom_sheet_item_padding_bottom,
+    modal_bottom_sheet_item_padding_left,
+    modal_bottom_sheet_item_padding_right,
+    modal_bottom_sheet_item_padding_top,
+  } = config;
+
+  return {
+    backgroundColor: modal_bottom_sheet_item_background_color,
+    focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
+    selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
+    focusectedBackgroundColor:
+      modal_bottom_sheet_item_focusected_background_color,
+    borderRadius: modal_bottom_sheet_item_corner_radius,
+    marginBottom: modal_bottom_sheet_item_margin_bottom,
+    marginTop: modal_bottom_sheet_item_margin_top,
+    marginLeft: modal_bottom_sheet_item_margin_left,
+    marginRight: modal_bottom_sheet_item_margin_right,
+    paddingTop: modal_bottom_sheet_item_padding_top,
+    paddingBottom: modal_bottom_sheet_item_padding_bottom,
+    paddingRight: modal_bottom_sheet_item_padding_right,
+    paddingLeft: modal_bottom_sheet_item_padding_left,
+    maxWidth,
+  };
+}
+
+export function defaultItemLabelProps(
+  config: PluginConfiguration,
+  sheetWidth: number
+) {
+  const {
+    modal_bottom_sheet_item_label_android_letter_spacing,
+    modal_bottom_sheet_item_label_ios_letter_spacing,
+    modal_bottom_sheet_item_label_family_ios_font_selector,
+    modal_bottom_sheet_item_label_family_android_font_selector,
+    modal_bottom_sheet_item_label_focus_font_color,
+    modal_bottom_sheet_item_label_font_color,
+    modal_bottom_sheet_item_label_selected_font_color,
+    modal_bottom_sheet_item_label_hover_selected_font_color,
+    modal_bottom_sheet_item_label_font_size,
+    modal_bottom_sheet_item_label_line_height,
+    modal_bottom_sheet_item_label_margin_bottom,
+    modal_bottom_sheet_item_label_margin_top,
+    modal_bottom_sheet_item_label_margin_left,
+    modal_bottom_sheet_item_label_margin_right,
+    modal_bottom_sheet_item_label_transform,
+    modal_bottom_sheet_item_icon_width,
+    modal_bottom_sheet_item_icon_margin_left,
+    modal_bottom_sheet_item_icon_margin_right,
+    modal_bottom_sheet_item_margin_left,
+    modal_bottom_sheet_item_margin_right,
+    modal_bottom_sheet_item_padding_left,
+    modal_bottom_sheet_item_padding_right,
+  } = config;
+
+  const maxWidth =
+    sheetWidth -
+    (modal_bottom_sheet_item_icon_width +
+      modal_bottom_sheet_item_icon_margin_left +
+      modal_bottom_sheet_item_icon_margin_right +
+      modal_bottom_sheet_item_margin_left +
+      modal_bottom_sheet_item_margin_right +
+      modal_bottom_sheet_item_padding_left +
+      modal_bottom_sheet_item_padding_right);
+
+  return {
+    fontFamily: platformSelect({
+      ios: modal_bottom_sheet_item_label_family_ios_font_selector,
+      android: modal_bottom_sheet_item_label_family_android_font_selector,
+    }),
+    letterSpacing: platformSelect({
+      ios: modal_bottom_sheet_item_label_ios_letter_spacing,
+      android: modal_bottom_sheet_item_label_android_letter_spacing,
+    }),
+    fontSize: modal_bottom_sheet_item_label_font_size,
+    color: modal_bottom_sheet_item_label_font_color,
+    focusColor: modal_bottom_sheet_item_label_focus_font_color,
+    hoverSelectedColor: modal_bottom_sheet_item_label_hover_selected_font_color,
+    selectedColor: modal_bottom_sheet_item_label_selected_font_color,
+    lineHeight: modal_bottom_sheet_item_label_line_height,
+    marginBottom: modal_bottom_sheet_item_label_margin_bottom,
+    marginTop: modal_bottom_sheet_item_label_margin_top,
+    marginLeft: modal_bottom_sheet_item_label_margin_left,
+    marginRight: modal_bottom_sheet_item_label_margin_right,
+    transform: modal_bottom_sheet_item_label_transform,
+    maxWidth,
+  };
+}
+
+export function defaultItemIconProps(config: PluginConfiguration) {
+  const {
+    modal_bottom_sheet_item_icon_height,
+    modal_bottom_sheet_item_icon_width,
+    modal_bottom_sheet_item_icon_margin_bottom,
+    modal_bottom_sheet_item_icon_margin_left,
+    modal_bottom_sheet_item_icon_margin_right,
+    modal_bottom_sheet_item_icon_margin_top,
+    modal_bottom_sheet_item_icon_flavour,
+  } = config;
+
+  return {
+    width: modal_bottom_sheet_item_icon_width,
+    height: modal_bottom_sheet_item_icon_height,
+    flavour: modal_bottom_sheet_item_icon_flavour,
+    marginTop: modal_bottom_sheet_item_icon_margin_top,
+    marginBottom: modal_bottom_sheet_item_icon_margin_bottom,
+    marginLeft: modal_bottom_sheet_item_icon_margin_left,
+    marginRight: modal_bottom_sheet_item_icon_margin_right,
+  };
+}

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -54,6 +54,11 @@ import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
 type Props = {
   Player: React.ComponentType<any>;
   PlayerLoadingView?: React.ComponentType<any>; // 👀 we are not receiving this prop
@@ -63,6 +68,7 @@ type Props = {
   mode?: VideoModalMode;
   loadPipesData: (url: string, options: {}) => void;
   disableCastAction?: boolean;
+  groupId?: string;
 };
 
 type ScreenStyles = ZappRiver["styles"] & {
@@ -145,34 +151,30 @@ const renderApplePlayer = ({
 }) => {
   const { title, summary } = item || {};
 
-  if (!isApplePlatform()) {
+  if (!isAppleTV() || !player) {
+    return null;
+  }
+
+  if (isAudioContent) {
+    return (
+      <AudioPlayer
+        audio_item={item}
+        plugin_configuration={pluginConfiguration}
+      />
+    );
+  }
+
+  if (!playNextData && player.isPaused() && player.isAd() === false) {
     return null;
   }
 
   return (
-    <>
-      {!playNextData && (
-        <>
-          {!isAudioContent &&
-            !!player?.isPaused() &&
-            !!player?.isAd() === false && (
-              <ProgramInfo
-                title={title}
-                subtitle={summary}
-                plugin_configuration={pluginConfiguration}
-                videoStyle={videoStyle}
-              />
-            )}
-        </>
-      )}
-
-      {isAudioContent && (
-        <AudioPlayer
-          audio_item={item}
-          plugin_configuration={pluginConfiguration}
-        />
-      )}
-    </>
+    <ProgramInfo
+      title={title}
+      subtitle={summary}
+      plugin_configuration={pluginConfiguration}
+      videoStyle={videoStyle}
+    />
   );
 };
 
@@ -199,6 +201,7 @@ const PlayerContainerComponent = (props: Props) => {
     style: videoStyle,
     mode = VideoModalMode.MAXIMIZED,
     disableCastAction = false,
+    groupId,
   } = props;
 
   // Hooks
@@ -233,6 +236,9 @@ const PlayerContainerComponent = (props: Props) => {
   const screenData = useTargetScreenData(item);
   const { setVisible: showNavBar } = useSetNavbarState();
 
+  const { isActiveGesture, startComponentsAnimation, setPlayerAnimationState } =
+    useModalAnimationContext();
+
   const playerEvent = (event, ...args) => {
     playerManager.invokeHandler(event, ...args);
   };
@@ -245,7 +251,6 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
-    navigator.goBack();
     showNavBar(true);
   }, [isModal, navigator.goBack, showNavBar]);
 
@@ -339,6 +344,18 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, [item?.id, item?.extensions?.resumeTime, player]);
 
+  const onVideoFullscreenPlayerWillPresent = React.useCallback(() => {
+    playerManager.invokeHandler("toggleFullscreen", {
+      fullscreen: true,
+    });
+  }, []);
+
+  const onVideoFullscreenPlayerWillDismiss = React.useCallback(() => {
+    playerManager.invokeHandler("toggleFullscreen", {
+      fullscreen: false,
+    });
+  }, []);
+
   // Util methods
   const toggleFullscreen = (event) => {
     const { fullscreen = false } = event || {};
@@ -381,17 +398,27 @@ const PlayerContainerComponent = (props: Props) => {
       id: playerContainerId,
       listener: {
         onVideoEnd,
-        onError: onError,
-        onLoad: onLoad,
+        onError,
+        onLoad,
         onPlayerClose: close,
         onPlayerDetached: close,
+        onVideoFullscreenPlayerWillDismiss,
+        onVideoFullscreenPlayerWillPresent,
       },
     });
 
     return () => {
       player.removeListener(playerContainerId);
     };
-  }, [player, onVideoEnd]);
+  }, [
+    player,
+    onVideoEnd,
+    onError,
+    onLoad,
+    close,
+    onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerWillPresent,
+  ]);
 
   useEffect(() => {
     // TODO: We should not use playerManager here to connect buttons to player container
@@ -428,7 +455,7 @@ const PlayerContainerComponent = (props: Props) => {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
       } else {
-        navigator.minimiseVideoModal();
+        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
@@ -603,6 +630,7 @@ const PlayerContainerComponent = (props: Props) => {
                 style={styles.focusableGroup}
                 preferredFocus
                 shouldUsePreferredFocus
+                groupId={groupId}
               >
                 {/* Video player and components */}
                 <View
@@ -621,9 +649,13 @@ const PlayerContainerComponent = (props: Props) => {
                         }}
                         focused={isInlineTV ? true : undefined}
                         autoplay={true}
-                        controls={isAppleTV() && !isInlineTV}
+                        controls={false}
                         disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked()}
+                        docked={
+                          navigator.isVideoModalDocked() &&
+                          !startComponentsAnimation &&
+                          !isActiveGesture
+                        }
                         entry={item}
                         fullscreen={mode === VideoModalMode.FULLSCREEN}
                         inline={inline}

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/PlayerImageBackground/index.tsx

@@ -1,38 +1,64 @@
 import React, { PropsWithChildren } from "react";
-import { ImageBackground } from "react-native";
+import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: { [K: string]: any };
   imageStyle?: { [K: string]: any };
   imageKey?: string;
+  defaultImageDimensions?: { [K: string]: any };
 }>;
 
+const imageSize = { width: "100%", height: "100%" };
+
 const PlayerImageBackgroundComponent = ({
   entry,
   children,
   style,
   imageStyle,
   imageKey,
+  defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
     () => ({ uri: imageSrcFromMediaItem(entry, imageKey) }),
     [imageKey, entry]
   );
 
+  const { playerAnimationState } = useModalAnimationContext();
+
   if (!source) return <>{children}</>;
 
   return (
-    <ImageBackground
-      resizeMode="cover"
-      style={style}
-      imageStyle={imageStyle}
-      source={source}
+    <View
+      style={
+        playerAnimationState === PlayerAnimationStateEnum.maximaze
+          ? defaultImageDimensions
+          : style
+      }
     >
-      {children}
-    </ImageBackground>
+      <AnimationComponent
+        style={style}
+        animationType={ComponentAnimationType.player}
+        additionalData={defaultImageDimensions}
+      >
+        <ImageBackground
+          resizeMode="cover"
+          style={imageSize}
+          imageStyle={imageStyle}
+          source={source}
+        >
+          {children}
+        </ImageBackground>
+      </AnimationComponent>
+    </View>
   );
 };