@applicaster/zapp-react-native-ui-components 12.0.0-rc.13 → 12.0.0-rc.130

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/Navigator/StackNavigator.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { isEmpty } from "ramda";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+
+import { Screen } from "../Screen/TV/index.web";
+import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  Components: Components;
+};
+
+export const StackNavigator = ({ Components }: Props) => {
+  const { mainStack } = useNavigation();
+
+  const renderScreen = ({ route, state }, index) => {
+    const pathAttributes = getPathAttributes({ pathname: route });
+
+    if (isEmpty(pathAttributes)) {
+      return null;
+    }
+
+    // HACK: Adding index to route to avoid conflicts in the navigator.
+    // Startup hooks are all using PUSH navigation action to navigate, but their routes are always like root routes.
+    // This means some hooks can have the same routes, e.g., ["hooks/context-setter", "/hooks/login-plug", "hooks/context-setter"].
+    const routeId = `${route}--${index}`;
+
+    return (
+      <FocusableGroup
+        id={route}
+        preferredFocus={isLast(index, mainStack.length)}
+        excludeFromFocusSearching
+        key={routeId}
+      >
+        <ScreenDataContext.Provider value={state}>
+          <PathnameContext.Provider value={route}>
+            <ScreenContextProvider pathname={route}>
+              <Screen route={route} Components={Components} />
+            </ScreenContextProvider>
+          </PathnameContext.Provider>
+        </ScreenDataContext.Provider>
+      </FocusableGroup>
+    );
+  };
+
+  return <>{mainStack.map(renderScreen)}</>;
+};

package/Components/Navigator/index.ts

@@ -0,0 +1 @@
+export { StackNavigator } from "./StackNavigator";

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"] & {
@@ -118,6 +124,7 @@ const nativeStyles = {
   playerScreen: {
     flex: 1,
     backgroundColor: "black",
+    overflow: "hidden",
   },
   playerWrapper: {
     flex: 1,
@@ -145,34 +152,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 +202,7 @@ const PlayerContainerComponent = (props: Props) => {
     style: videoStyle,
     mode = VideoModalMode.MAXIMIZED,
     disableCastAction = false,
+    groupId,
   } = props;
 
   // Hooks
@@ -233,6 +237,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,8 +252,8 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
-    navigator.goBack();
     showNavBar(true);
+    navigator.goBack();
   }, [isModal, navigator.goBack, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
@@ -339,16 +346,28 @@ 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 || {};
 
     if (fullscreen) {
-      playerEvent("onFullscreenPlayerWillPresent");
       navigator.fullscreenVideoModal();
+      playerEvent("onFullscreenPlayerWillPresent");
     } else {
-      playerEvent("onFullscreenPlayerWillDismiss");
       navigator.maximiseVideoModal();
+      playerEvent("onFullscreenPlayerWillDismiss");
     }
   };
 
@@ -381,17 +400,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,12 +457,16 @@ const PlayerContainerComponent = (props: Props) => {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
       } else {
-        navigator.minimiseVideoModal();
+        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
     if (mode === VideoModalMode.FULLSCREEN) {
       toggleFullscreen({ fullscreen: false });
+
+      if (!isModal) {
+        playerManager.closeNativePlayer();
+      }
     }
 
     return !!(
@@ -490,7 +523,7 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     return () => {
-      playerEvent("player_did_close");
+      playerEvent("player_did_close", { item });
 
       if (!isModal) {
         showNavBar(true);
@@ -603,6 +636,7 @@ const PlayerContainerComponent = (props: Props) => {
                 style={styles.focusableGroup}
                 preferredFocus
                 shouldUsePreferredFocus
+                groupId={groupId}
               >
                 {/* Video player and components */}
                 <View
@@ -621,9 +655,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}
@@ -641,6 +679,7 @@ const PlayerContainerComponent = (props: Props) => {
                         setNextVideoPreloadThresholdPercentage={
                           setNextVideoPreloadThresholdPercentage
                         }
+                        startComponentsAnimation={startComponentsAnimation}
                       >
                         {renderApplePlayer(applePlayerProps)}
                       </Player>