@applicaster/quick-brick-player 13.0.0-alpha.6400875052 → 13.0.0-alpha.6444233049

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.6400875052",
+  "version": "13.0.0-alpha.6444233049",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,12 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.88",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.124",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.6400875052",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.6400875052",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.6400875052",
-    "keymirror": "^0.1.1",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.6444233049",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.6444233049",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.6444233049",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",
@@ -53,7 +52,6 @@
     "@applicaster/applicaster-types": "*",
     "@applicaster/blur": "*",
     "@applicaster/quick-brick-xray": "*",
-    "@applicaster/react-native-color-thief": "*",
     "@applicaster/zapp-pipes-v2-client": "*",
     "@applicaster/zapp-react-dom-ui-components": "*",
     "@applicaster/zapp-react-native-redux": "*",

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, TextStyle, View } from "react-native";
+import { StyleSheet, Text, TextStyle, View } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type AudioDescriptionProps = {
@@ -10,86 +10,125 @@ type AudioDescriptionProps = {
     docked: boolean;
     isModal: boolean;
   };
+  maxWidth?: number;
   value: GetValue;
 };
 
-const containerStyles = { paddingTop: 32, paddingBottom: 12 };
+const TITLE_PADDING_BOTTOM = 5;
+const TITLE_LINES = 2;
+const SUBTITLE_LINES = 1;
 
-const titleStyles = (value: GetValue, prefix: string): TextStyle => ({
-  textAlign: "left",
-  color: value(`${prefix}title_color`),
-  alignSelf: "center",
-  paddingBottom: 5,
-  lineHeight:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}title_lineheight_ios`),
-        android: value(`${prefix}title_lineheight_android`),
-      })
-    ) || 18,
-  letterSpacing:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}title_letterspacing_ios`),
-        android: value(`${prefix}title_letterspacing_android`),
-      })
-    ) || 0,
-  fontSize:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}title_fontsize_ios`),
-        android: value(`${prefix}title_fontsize_android`),
-      })
-    ) || 16,
-  fontFamily: platformSelect({
-    ios: value(`${prefix}title_font_ios`),
-    android: value(`${prefix}title_font_android`),
-  }),
+const styles = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    alignSelf: "center",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  titleText: {
+    textAlign: "center",
+    alignSelf: "center",
+    paddingBottom: TITLE_PADDING_BOTTOM,
+  },
+  summaryText: {
+    textAlign: "left",
+    alignSelf: "center",
+  },
 });
 
-const summaryStyles = (value: GetValue, prefix: string): TextStyle => ({
-  textAlign: "left",
-  color: value(`${prefix}subtitle_color`),
-  alignSelf: "center",
-  lineHeight:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}subtitle_lineheight_ios`),
-        android: value(`${prefix}subtitle_lineheight_android`),
-      })
-    ) || 18,
-  letterSpacing:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}subtitle_letterspacing_ios`),
-        android: value(`${prefix}subtitle_letterspacing_android`),
-      })
-    ) || 0,
-  fontSize:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}subtitle_fontsize_ios`),
-        android: value(`${prefix}subtitle_fontsize_android`),
-      })
-    ) || 13,
-  fontFamily: platformSelect({
-    ios: value(`${prefix}subtitle_font_ios`),
-    android: value(`${prefix}subtitle_font_android`),
-  }),
-});
+const getTitleStyles = (value: GetValue, prefix: string) =>
+  ({
+    color: value(`${prefix}title_color`),
+    lineHeight:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}title_lineheight_ios`),
+          android: value(`${prefix}title_lineheight_android`),
+        })
+      ) || 18,
+    letterSpacing:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}title_letterspacing_ios`),
+          android: value(`${prefix}title_letterspacing_android`),
+        })
+      ) || 0,
+    fontSize:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}title_fontsize_ios`),
+          android: value(`${prefix}title_fontsize_android`),
+        })
+      ) || 16,
+    fontFamily: platformSelect({
+      ios: value(`${prefix}title_font_ios`),
+      android: value(`${prefix}title_font_android`),
+    }),
+  }) as const;
+
+const getSummaryStyles = (value: GetValue, prefix: string): TextStyle =>
+  ({
+    color: value(`${prefix}subtitle_color`),
+    lineHeight:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}subtitle_lineheight_ios`),
+          android: value(`${prefix}subtitle_lineheight_android`),
+        })
+      ) || 18,
+    letterSpacing:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}subtitle_letterspacing_ios`),
+          android: value(`${prefix}subtitle_letterspacing_android`),
+        })
+      ) || 0,
+    fontSize:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}subtitle_fontsize_ios`),
+          android: value(`${prefix}subtitle_fontsize_android`),
+        })
+      ) || 13,
+    fontFamily: platformSelect({
+      ios: value(`${prefix}subtitle_font_ios`),
+      android: value(`${prefix}subtitle_font_android`),
+    }),
+  }) as const;
+
+const getHeight = (titleLineHeight: number, subtitleLineHeight) =>
+  titleLineHeight * TITLE_LINES + subtitleLineHeight + TITLE_PADDING_BOTTOM;
 
 export const AudioDescription = (props: AudioDescriptionProps) => {
-  const { title, summary, layoutState, value } = props;
+  const { title, summary, layoutState, value, maxWidth } = props;
   const prefix = layoutState.docked ? "docked_player_" : "";
 
+  const summaryStyles = getSummaryStyles(value, prefix);
+  const titleStyles = getTitleStyles(value, prefix);
+
+  const height = getHeight(titleStyles.lineHeight, summaryStyles.lineHeight);
+
   return (
-    <View style={containerStyles}>
-      <Text style={titleStyles(value, prefix)} numberOfLines={1}>
+    <View
+      style={[
+        styles.wrapper,
+        {
+          maxWidth: Math.max(maxWidth, 320),
+          height,
+        },
+      ]}
+    >
+      <Text style={[styles.titleText, titleStyles]} numberOfLines={TITLE_LINES}>
         {title}
       </Text>
-      <Text style={summaryStyles(value, prefix)} numberOfLines={2}>
-        {summary}
-      </Text>
+      {summary ? (
+        <Text
+          style={[styles.summaryText, summaryStyles]}
+          numberOfLines={SUBTITLE_LINES}
+        >
+          {summary}
+        </Text>
+      ) : null}
     </View>
   );
 };

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
+import { useEffect, useState } from "react";
 import {
+  Dimensions as ScreenDimensions,
   StyleSheet,
-  ViewStyle,
   View,
-  Dimensions as ScreenDimensions,
+  ViewStyle,
 } from "react-native";
 
-import { SafeAreaView, Edge } from "react-native-safe-area-context";
+import { Edge, SafeAreaView } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import * as R from "ramda";
@@ -20,36 +21,29 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { PlayerDetails } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/PlayerDetails";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useEffect, useState } from "react";
-import { MagicBG } from "./MagicBG";
 import { formatSpeed } from "./utils";
 import {
-  addQueryParam,
   getBottomSheetModalDefaultItemIcon,
   getBottomSheetModalIconProps,
   getBottomSheetModalItemProps,
   getBottomSheetModalLabelProps,
   getBottomSheetModalSelectedItemIcon,
-  getLiveUrl,
 } from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import {
+  AnimatedScrollModal,
   AnimationComponent,
   ComponentAnimationType,
-  AnimatedScrollModal,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { PADDING_HORIZONTAL } from "./Layout/defaultLayoutsConts";
+import { PADDING_HORIZONTAL } from "./Layout/const";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+import { DEFAULT_SPEED, PlaybackSpeed, SpeedController } from "./SpeedManager";
 import {
-  SleepTimerController,
-  SleepTimerState,
-  SLEEP_TIMER_OFF,
-} from "./SleepTimerManager";
-import { SpeedController, PlaybackSpeed, DEFAULT_SPEED } from "./SpeedManager";
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
-import { sleepTimerOptions } from "../Const/sleepTimerOptions";
+  dismissModal as dismissBottomSheetModal,
+  openBottomSheetModal,
+  useModalStoreState,
+} from "@applicaster/zapp-react-native-utils/modalState";
 import { speedOptions } from "../Const/speedOptions";
 
 const { log_debug } = createLogger({
@@ -66,8 +60,6 @@ type Dimensions = {
 
 type Configuration = {
   [key: string]: any;
-  magic_background?: boolean;
-  audio_player_background_image_query?: string;
   audio_player_background_image_default_color?: string;
   tablet_landscape_sidebar_width?: string;
   tablet_landscape_player_container_background_color?: string;
@@ -76,7 +68,6 @@ type Configuration = {
 type Props = {
   children: React.ReactNode;
   inline?: boolean;
-  docked?: boolean;
   configuration: Configuration;
   style: ViewStyle & Dimensions;
   entry: ZappEntry;
@@ -109,10 +100,10 @@ const edges: Edge[] = ["right", "left", "top"];
 export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
-  const theme = useTheme();
+
+  const modalBottomSheetState = useModalStoreState();
 
   const {
-    docked,
     configuration,
     style,
     entry,
@@ -126,41 +117,45 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
-  // TODO: Have generic place for live url from configuration. Currently its hardcoded for client.
-
-  const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
-
   const { title, summary } = useTitleSummaryOverlay(
-    feedUrl,
     entry,
     playerState?.isLive,
     configuration?.audio_live_player_update_interval
   );
 
-  const [sleepTimerManager, setSleepTimerManager] =
-    useState<SleepTimerController | null>(null);
-
   const [speedManager, setSpeedManager] = useState<SpeedController | null>(
     null
   );
 
   useEffect(() => {
     if (player) {
-      setSleepTimerManager(new SleepTimerController(player));
       setSpeedManager(new SpeedController(player));
     } else {
-      setSleepTimerManager(null);
       setSpeedManager(null);
     }
   }, [player]);
 
+  useEffect(() => {
+    if (!player) return;
+
+    const unsubscribe = player.addListener({
+      id: "audio-player-wrapper-bottom-sheet-modal",
+      listener: {
+        onVideoEnd: () => {
+          // Dismiss the bottom sheet modal when the video ends to avoid audio breaks and app freeze
+          if (modalBottomSheetState.visible) {
+            dismissBottomSheetModal();
+          }
+        },
+      },
+    });
+
+    return () => unsubscribe?.();
+  }, [player, modalBottomSheetState.visible]);
+
   const [playbackSpeed, setPlaybackSpeed] =
     useState<PlaybackSpeed>(DEFAULT_SPEED);
 
-  const [sleepTimerState, setSleepTimerState] = useState<SleepTimerState>(
-    new SleepTimerState(SLEEP_TIMER_OFF, 0)
-  );
-
   const [defaultDimensions, setDefaultDimensions] =
     React.useState<Dimensions>(undefined);
 
@@ -183,17 +178,13 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   };
 
   useEffect(() => {
-    const sleepSubscription =
-      sleepTimerManager?.sleepTimerState$.subscribe(setSleepTimerState);
-
     const speedSubscription =
       speedManager?.playbackSpeed$.subscribe(setPlaybackSpeed);
 
     return () => {
-      sleepSubscription?.unsubscribe();
       speedSubscription?.unsubscribe();
     };
-  }, [sleepTimerManager, speedManager]);
+  }, [speedManager]);
 
   useEffect(() => {
     if (!playerState.isReadyToPlay) {
@@ -201,8 +192,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     }
 
     void speedManager?.loadSpeed();
-    void sleepTimerManager?.loadSleep();
-  }, [playerState.isReadyToPlay, speedManager, sleepTimerManager]);
+  }, [playerState.isReadyToPlay, speedManager]);
 
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
@@ -250,13 +240,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     [speedManager]
   );
 
-  const onSleepSelect = React.useCallback(
-    async (item) => {
-      await sleepTimerManager?.setSleepTimer(item);
-    },
-    [sleepTimerManager]
-  );
-
   const onSpeedButtonPress = React.useCallback(() => {
     openBottomSheetModal({
       modalBottomSheetContentProps: {
@@ -272,48 +255,15 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         iconPlacement: "right",
       },
       options: {
-        supportedOrientations: ["portrait"],
+        supportedOrientations: [
+          "portrait",
+          "landscape",
+          "portrait-upside-down",
+        ],
       },
     });
   }, [playbackSpeed, onSpeedSelect, configuration["playback_speed_title"]]);
 
-  const onSleepButtonPress = React.useCallback(() => {
-    openBottomSheetModal({
-      modalBottomSheetContentProps: {
-        items: [
-          {
-            label: configuration["playback_sleep_off_label"],
-            value: 0,
-          },
-        ].concat(sleepTimerOptions),
-        current_selection: sleepTimerState.timer,
-        onPress: onSleepSelect,
-        title: configuration["playback_sleep_title"],
-        itemProps: getBottomSheetModalItemProps,
-        iconProps: getBottomSheetModalIconProps,
-        labelProps: getBottomSheetModalLabelProps,
-        getSelectedItemIcon: getBottomSheetModalSelectedItemIcon,
-        iconPlacement: "right",
-      },
-      options: {
-        supportedOrientations: ["portrait"],
-      },
-    });
-  }, [
-    sleepTimerState.timer,
-    configuration["playback_sleep_title"],
-    configuration["playback_sleep_off_label"],
-    onSleepSelect,
-  ]);
-
-  // This method does not actually cancel the sleep timer
-  // (and should not to avoid race condition),
-  // it just performs the cleanup when timer expires
-  // TODO: rename it in code above
-  const cancelSleepTimer = React.useCallback(() => {
-    sleepTimerManager?.onTimerExpired();
-  }, [sleepTimerManager]);
-
   const onCloseVideoModal = React.useCallback(() => {
     playerManager.close();
   }, [playerManager]);
@@ -333,116 +283,53 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const ContainerView = SafeAreaView;
-
-  const MainContent = React.useMemo(() => {
-    return (
-      <ContainerView style={[style, Styles.playerContainer]} edges={edges}>
-        <AnimationComponent
-          animationType={ComponentAnimationType.moveUpComponent}
-          additionalData={{ saveArea: true }}
-          style={Styles.playerContainer}
-        >
-          <AnimatedScrollModal>
-            <View style={Styles.playerContainer} onLayout={onLayout}>
-              <Layout
-                entry={entry}
-                playerState={playerState}
-                layoutState={layoutState}
-                value={value}
-                onPlaybackButtonPress={onPlaybackButtonPress}
-                onRewindButtonPress={onRewindButtonPress}
-                onForwardButtonPress={onForwardButtonPress}
-                onPlayerSeek={onPlayerSeek}
-                onSkipStart={onSkipStart}
-                onSpeedButtonPress={onSpeedButtonPress}
-                onSleepButtonPress={onSleepButtonPress}
-                playbackSpeedName={formatSpeed(playbackSpeed.value)}
-                playbackSleepName={
-                  sleepTimerState.timer.value === 0
-                    ? "sleep_timer"
-                    : "sleep_timer_active"
-                }
-                sleepTimerDate={sleepTimerState.timerDate}
-                cancelSleepTimer={cancelSleepTimer}
-                onSkipLive={onSkipLive}
-                onCloseVideoModal={onCloseVideoModal}
-                maximiseVideoModal={maximiseVideoModal}
-                configuration={configuration}
-                dimensions={dimensions}
-                playNextData={playNextData}
-                title={title}
-                summary={summary}
-                defaultDimensions={defaultDimensions}
-              />
-              <View style={Styles.paddingHorizontal}>
-                {children}
-                <AnimationComponent
-                  animationType={ComponentAnimationType.componentFade}
-                >
-                  <PlayerDetails
-                    isAudioPlayer
-                    configuration={configuration}
-                    style={Styles.playerDetails}
-                    entry={entry}
-                    isTabletLandscape={isTabletLandscape}
-                  />
-                </AnimationComponent>
-              </View>
-            </View>
-          </AnimatedScrollModal>
-        </AnimationComponent>
-      </ContainerView>
-    );
-  }, [
-    docked,
-    style,
-    entry,
-    playerState,
-    layoutState,
-    value,
-    onPlaybackButtonPress,
-    onRewindButtonPress,
-    onForwardButtonPress,
-    onPlayerSeek,
-    onCloseVideoModal,
-    maximiseVideoModal,
-    configuration,
-    dimensions,
-    children,
-    playNextData,
-    onSkipStart,
-    onSkipLive,
-    sleepTimerState.timer.value,
-    sleepTimerState.timerDate,
-  ]);
-
-  if (configuration.magic_background) {
-    const baseUrl = imageSrcFromMediaItem(entry, null);
-
-    const queryParamName =
-      configuration.audio_player_background_image_query || "width";
-
-    const defaultBackgroundColor =
-      configuration.audio_player_background_image_default_color ||
-      theme?.app_background_color;
-
-    const queryParamValue = 15;
-
-    const url =
-      baseUrl && addQueryParam(baseUrl, queryParamName, queryParamValue);
-
-    return (
-      <MagicBG
-        image={url}
-        fallbackUrl={baseUrl}
-        colors={entry?.extensions?.backgroundColors}
-        defaultColor={defaultBackgroundColor}
+  return (
+    <SafeAreaView style={[style, Styles.playerContainer]} edges={edges}>
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        additionalData={{ saveArea: true }}
+        style={Styles.playerContainer}
       >
-        {MainContent}
-      </MagicBG>
-    );
-  }
-
-  return MainContent;
+        <AnimatedScrollModal>
+          <View style={Styles.playerContainer} onLayout={onLayout}>
+            <Layout
+              entry={entry}
+              playerState={playerState}
+              layoutState={layoutState}
+              value={value}
+              onPlaybackButtonPress={onPlaybackButtonPress}
+              onRewindButtonPress={onRewindButtonPress}
+              onForwardButtonPress={onForwardButtonPress}
+              onPlayerSeek={onPlayerSeek}
+              onSkipStart={onSkipStart}
+              onSpeedButtonPress={onSpeedButtonPress}
+              playbackSpeedName={formatSpeed(playbackSpeed.value)}
+              onSkipLive={onSkipLive}
+              onCloseVideoModal={onCloseVideoModal}
+              maximiseVideoModal={maximiseVideoModal}
+              configuration={configuration}
+              dimensions={dimensions}
+              playNextData={playNextData}
+              title={title}
+              summary={summary}
+            />
+            <View style={Styles.paddingHorizontal}>
+              {children}
+              <AnimationComponent
+                animationType={ComponentAnimationType.componentFade}
+              >
+                <PlayerDetails
+                  isAudioPlayer
+                  configuration={configuration}
+                  style={Styles.playerDetails}
+                  entry={entry}
+                  isTabletLandscape={isTabletLandscape}
+                />
+              </AnimationComponent>
+            </View>
+          </View>
+        </AnimatedScrollModal>
+      </AnimationComponent>
+    </SafeAreaView>
+  );
 };

package/src/Player/AudioLayer/Layout/Controls/VerticalGutter.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import {
+  TABLET_VERTICAL_SEPARATOR_HEIGHT,
+  TABLET_VERTICAL_SEPARATOR_HEIGHT_S,
+} from "../const";
+
+import { withDebug } from "../debug";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+import { isSmallTabletHeight } from "../utils";
+
+const styles = StyleSheet.create({
+  flexingHeight: {
+    flex: 1,
+    ...withDebug({ backgroundColor: "red" }),
+  },
+  fixedHeight: {
+    height: TABLET_VERTICAL_SEPARATOR_HEIGHT,
+    ...withDebug({ backgroundColor: "red" }),
+  },
+  fixedHeightSmall: {
+    height: TABLET_VERTICAL_SEPARATOR_HEIGHT_S,
+    ...withDebug({ backgroundColor: "red" }),
+  },
+});
+
+export const VerticalGutter = () => {
+  const isTablet = useIsTablet();
+  const { height } = useSafeAreaFrame();
+
+  return (
+    <View
+      style={
+        isTablet
+          ? isSmallTabletHeight(height)
+            ? styles.fixedHeightSmall
+            : styles.fixedHeight
+          : styles.flexingHeight
+      }
+    />
+  );
+};