@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5114122134 → 12.0.0-alpha.5208030571

package/Components/ModalComponent/Header/Title.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
+
+import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils/";
+
+export type TitleProps = {
+  text: string;
+  letterSpacing: number;
+  lineHeight: number;
+  fontFamily: string;
+  fontSize: number;
+  color: string;
+  marginTop: number;
+  marginLeft: number;
+  marginRight: number;
+  marginBottom: number;
+  transform: string;
+  numberOfLines: number;
+};
+
+export function Title(props: TitleProps) {
+  const {
+    text,
+    letterSpacing,
+    lineHeight,
+    fontFamily,
+    fontSize,
+    color,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    numberOfLines,
+    transform,
+  } = props;
+
+  const isRTL = useIsRTL();
+  const writingDirection = isRTL ? "rtl" : "ltr";
+
+  if (!text) return null;
+
+  return (
+    <View
+      style={{
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
+      }}
+    >
+      {!!text?.length && (
+        <Text
+          style={{
+            letterSpacing,
+            fontFamily,
+            fontSize,
+            lineHeight,
+            color,
+            writingDirection,
+          }}
+          numberOfLines={numberOfLines}
+          ellipsizeMode="tail"
+        >
+          {textTransform(transform, text)}
+        </Text>
+      )}
+    </View>
+  );
+}

package/Components/ModalComponent/Header/assets.ts

@@ -0,0 +1,4 @@
+/* eslint-disable max-len */
+
+export const defaultCloseAsset: string =
+  "data:image/png;base64,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";

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>
   );
 };