@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/layouts/HLSView.jsx

@@ -0,0 +1,290 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useFullscreen, useToggle } from 'react-use';
+import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';
+import screenfull from 'screenfull';
+import { selectAppData, selectHLSState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
+import { HlsStatsOverlay } from '../components/HlsStatsOverlay';
+import { HMSVideoPlayer } from '../components/HMSVideo';
+import { FullScreenButton } from '../components/HMSVideo/FullscreenButton';
+import { HLSAutoplayBlockedPrompt } from '../components/HMSVideo/HLSAutoplayBlockedPrompt';
+import { HLSQualitySelector } from '../components/HMSVideo/HLSQualitySelector';
+import { ToastManager } from '../components/Toast/ToastManager';
+import { IconButton } from '../../IconButton';
+import { Box, Flex } from '../../Layout';
+import { Loading } from '../../Loading';
+import { Text } from '../../Text';
+import { useTheme } from '../../Theme';
+import { Tooltip } from '../../Tooltip';
+import { APP_DATA, EMOJI_REACTION_TYPE } from '../common/constants';
+
+let hlsPlayer;
+
+const HLSView = () => {
+  const videoRef = useRef(null);
+  const hlsViewRef = useRef(null);
+  const hlsState = useHMSStore(selectHLSState);
+  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
+  const hmsActions = useHMSActions();
+  const { themeType } = useTheme();
+  let [hlsStatsState, setHlsStatsState] = useState(null);
+  const hlsUrl = hlsState.variants[0]?.url;
+  const [availableLayers, setAvailableLayers] = useState([]);
+  const [isVideoLive, setIsVideoLive] = useState(true);
+  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState(true);
+  const [currentSelectedQuality, setCurrentSelectedQuality] = useState(null);
+  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const isFullScreenSupported = screenfull.isEnabled;
+  const [show, toggle] = useToggle(false);
+  const isFullScreen = useFullscreen(hlsViewRef, show, {
+    onClose: () => toggle(false),
+  });
+  const [showLoader, setShowLoader] = useState(false);
+
+  // FIXME: move this logic to player controller in next release
+  useEffect(() => {
+    /**
+     * @type {HTMLVideoElement} videoEl
+     */
+    const videoEl = videoRef.current;
+    const showLoader = () => setShowLoader(true);
+    const hideLoader = () => setShowLoader(false);
+    videoEl?.addEventListener('playing', hideLoader);
+    videoEl?.addEventListener('waiting', showLoader);
+    return () => {
+      videoEl?.removeEventListener('playing', hideLoader);
+      videoEl?.removeEventListener('waiting', showLoader);
+    };
+  }, []);
+
+  /**
+   * initialize HMSHLSPlayer and add event listeners.
+   */
+  useEffect(() => {
+    let videoEl = videoRef.current;
+    const manifestLoadedHandler = ({ layers }) => {
+      setAvailableLayers(layers);
+    };
+    const layerUpdatedHandler = ({ layer }) => {
+      setCurrentSelectedQuality(layer);
+    };
+    const metadataLoadedHandler = ({ payload, ...rest }) => {
+      const parsePayload = str => {
+        try {
+          return JSON.parse(str);
+        } catch (e) {
+          return str;
+        }
+      };
+      // parse payload and extract start_time and payload
+      const duration = rest.duration;
+      const parsedPayload = parsePayload(payload);
+      switch (parsedPayload.type) {
+        case EMOJI_REACTION_TYPE:
+          window.showFlyingEmoji(parsedPayload?.emojiId, parsedPayload?.senderId);
+          break;
+        default: {
+          const toast = {
+            title: `Payload from timed Metadata ${parsedPayload}`,
+            duration: duration || 3000,
+          };
+          console.debug('Added toast ', JSON.stringify(toast));
+          ToastManager.addToast(toast);
+          break;
+        }
+      }
+    };
+    const handleError = data => {
+      console.error('[HLSView] error in hls', `${data}`);
+    };
+    const handleNoLongerLive = ({ isLive }) => {
+      setIsVideoLive(isLive);
+    };
+
+    const playbackEventHandler = data => setIsPaused(data.state === HLSPlaybackState.paused);
+
+    const handleAutoplayBlock = data => setIsHlsAutoplayBlocked(!!data);
+    if (videoEl && hlsUrl) {
+      hlsPlayer = new HMSHLSPlayer(hlsUrl, videoEl);
+      hlsPlayer.on(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);
+      hlsPlayer.on(HMSHLSPlayerEvents.TIMED_METADATA_LOADED, metadataLoadedHandler);
+      hlsPlayer.on(HMSHLSPlayerEvents.ERROR, handleError);
+      hlsPlayer.on(HMSHLSPlayerEvents.PLAYBACK_STATE, playbackEventHandler);
+      hlsPlayer.on(HMSHLSPlayerEvents.AUTOPLAY_BLOCKED, handleAutoplayBlock);
+
+      hlsPlayer.on(HMSHLSPlayerEvents.MANIFEST_LOADED, manifestLoadedHandler);
+      hlsPlayer.on(HMSHLSPlayerEvents.LAYER_UPDATED, layerUpdatedHandler);
+      return () => {
+        hlsPlayer.off(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);
+        hlsPlayer.off(HMSHLSPlayerEvents.ERROR, handleError);
+        hlsPlayer.off(HMSHLSPlayerEvents.TIMED_METADATA_LOADED, metadataLoadedHandler);
+        hlsPlayer.off(HMSHLSPlayerEvents.PLAYBACK_STATE, playbackEventHandler);
+        hlsPlayer.off(HMSHLSPlayerEvents.AUTOPLAY_BLOCKED, handleAutoplayBlock);
+        hlsPlayer.off(HMSHLSPlayerEvents.MANIFEST_LOADED, manifestLoadedHandler);
+        hlsPlayer.off(HMSHLSPlayerEvents.LAYER_UPDATED, layerUpdatedHandler);
+        hlsPlayer.reset();
+        hlsPlayer = null;
+      };
+    }
+  }, [hlsUrl]);
+
+  /**
+   * initialize and subscribe to hlsState
+   */
+  useEffect(() => {
+    const onHLSStats = state => setHlsStatsState(state);
+    if (enablHlsStats) {
+      hlsPlayer?.on(HMSHLSPlayerEvents.STATS, onHLSStats);
+    } else {
+      hlsPlayer?.off(HMSHLSPlayerEvents.STATS, onHLSStats);
+    }
+    return () => {
+      hlsPlayer?.off(HMSHLSPlayerEvents.STATS, onHLSStats);
+    };
+  }, [enablHlsStats]);
+
+  const unblockAutoPlay = async () => {
+    try {
+      await hlsPlayer.play();
+      setIsHlsAutoplayBlocked(false);
+    } catch (error) {
+      console.error('Tried to unblock Autoplay failed with', error.message);
+    }
+  };
+
+  const handleQuality = useCallback(
+    quality => {
+      if (hlsPlayer) {
+        setIsUserSelectedAuto(quality.height.toString().toLowerCase() === 'auto');
+        hlsPlayer.setLayer(quality);
+      }
+    },
+    [availableLayers], //eslint-disable-line
+  );
+
+  const sfnOverlayClose = () => {
+    hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
+  };
+
+  return (
+    <Flex
+      key="hls-viewer"
+      id={`hls-viewer-${themeType}`}
+      ref={hlsViewRef}
+      css={{
+        size: '100%',
+      }}
+    >
+      {hlsStatsState?.url && enablHlsStats ? (
+        <HlsStatsOverlay hlsStatsState={hlsStatsState} onClose={sfnOverlayClose} />
+      ) : null}
+      {hlsUrl && hlsState.running ? (
+        <Flex
+          id="hls-player-container"
+          align="center"
+          justify="center"
+          css={{
+            width: '100%',
+            margin: '0 auto',
+            height: '100%',
+          }}
+        >
+          <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
+          {showLoader && (
+            <Flex
+              align="center"
+              justify="center"
+              css={{
+                position: 'absolute',
+              }}
+            >
+              <Loading width={72} height={72} />
+            </Flex>
+          )}
+          <HMSVideoPlayer.Root ref={videoRef}>
+            {hlsPlayer && (
+              <HMSVideoPlayer.Progress
+                onValueChange={currentTime => {
+                  hlsPlayer.seekTo(currentTime);
+                }}
+                hlsPlayer={hlsPlayer}
+              />
+            )}
+
+            <HMSVideoPlayer.Controls.Root css={{ p: '$4 $8' }}>
+              <HMSVideoPlayer.Controls.Left>
+                <HMSVideoPlayer.PlayButton
+                  onClick={async () => {
+                    isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+                  }}
+                  isPaused={isPaused}
+                />
+                <HMSVideoPlayer.Duration hlsPlayer={hlsPlayer} />
+                <HMSVideoPlayer.Volume hlsPlayer={hlsPlayer} />
+              </HMSVideoPlayer.Controls.Left>
+
+              <HMSVideoPlayer.Controls.Right>
+                {availableLayers.length > 0 ? (
+                  <>
+                    <IconButton
+                      variant="standard"
+                      css={{ px: '$2' }}
+                      onClick={async () => {
+                        await hlsPlayer.seekToLivePosition();
+                        setIsVideoLive(true);
+                      }}
+                      key="jump-to-live_btn"
+                      data-testid="jump-to-live_btn"
+                    >
+                      <Tooltip title="Go to Live" side="top">
+                        <Flex justify="center" gap={2} align="center">
+                          <Box
+                            css={{
+                              height: '$4',
+                              width: '$4',
+                              background: isVideoLive ? '$error' : '$white',
+                              r: '$1',
+                            }}
+                          />
+                          <Text
+                            variant={{
+                              '@sm': 'xs',
+                            }}
+                          >
+                            {isVideoLive ? 'LIVE' : 'GO LIVE'}
+                          </Text>
+                        </Flex>
+                      </Tooltip>
+                    </IconButton>
+                    <HLSQualitySelector
+                      layers={availableLayers}
+                      selection={currentSelectedQuality}
+                      onQualityChange={handleQuality}
+                      isAuto={isUserSelectedAuto}
+                    />
+                  </>
+                ) : null}
+                {isFullScreenSupported ? (
+                  <FullScreenButton
+                    isFullScreen={isFullScreen}
+                    onToggle={toggle}
+                    icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}
+                  />
+                ) : null}
+              </HMSVideoPlayer.Controls.Right>
+            </HMSVideoPlayer.Controls.Root>
+          </HMSVideoPlayer.Root>
+        </Flex>
+      ) : (
+        <Flex align="center" justify="center" css={{ size: '100%', px: '$10' }}>
+          <Text variant="md" css={{ textAlign: 'center' }}>
+            Waiting for the stream to start...
+          </Text>
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default HLSView;

package/src/Prebuilt/layouts/InsetView.jsx

@@ -0,0 +1,222 @@
+import React, { Fragment, useEffect, useRef } from 'react';
+import Draggable from 'react-draggable';
+import { useMedia } from 'react-use';
+import { selectAppData, selectLocalPeer, selectRemotePeers, selectRolesMap, useHMSStore } from '@100mslive/react-sdk';
+import { FirstPersonDisplay } from '../components/FirstPersonDisplay';
+import VideoTile from '../components/VideoTile';
+import { Box, Flex } from '../../Layout';
+import { config as cssConfig } from '../../Theme';
+import { useRolePreference } from '../components/hooks/useFeatures';
+import { APP_DATA } from '../common/constants';
+
+const getAspectRatio = ({ roleMap, roleName, isMobile }) => {
+  const role = roleMap[roleName];
+  const { width, height } = role.publishParams.video;
+  return isMobile ? height / width : width / height;
+};
+
+export function InsetView() {
+  const remotePeers = useHMSStore(selectRemotePeers);
+  const localPeer = useHMSStore(selectLocalPeer);
+  const isMobile = useMedia(cssConfig.media.md);
+  const isLandscape = useMedia(cssConfig.media.ls);
+  const roleMap = useHMSStore(selectRolesMap);
+  const rolePreference = useRolePreference();
+  let centerPeers = [];
+  let sidepanePeers = [];
+  if (rolePreference) {
+    const center = rolePreference[localPeer.roleName]?.split(',') || [];
+    for (const peer of remotePeers) {
+      if (center.includes(peer.roleName)) {
+        centerPeers.push(peer);
+      } else {
+        sidepanePeers.push(peer);
+      }
+    }
+    if (centerPeers.length === 0 && sidepanePeers.length > 0) {
+      centerPeers = sidepanePeers;
+      sidepanePeers = [];
+    }
+  } else {
+    centerPeers = remotePeers;
+  }
+  const hideInset = sidepanePeers.length > 0 && (isMobile || isLandscape);
+
+  return (
+    <Fragment>
+      <Box
+        css={{
+          display: 'grid',
+          gridTemplateColumns: sidepanePeers.length > 0 ? '3fr 1fr' : '100%',
+          gridTemplateRows: '1fr',
+          gap: '$8',
+          px: '$10',
+          size: '100%',
+          '@md': {
+            gridTemplateColumns: '1fr',
+            gridTemplateRows: sidepanePeers.length > 0 ? `3fr 1fr` : '100%',
+          },
+        }}
+      >
+        <Flex
+          align="center"
+          justify="center"
+          css={{
+            size: '100%',
+            gap: '$8',
+            flexWrap: 'wrap',
+            placeContent: 'center',
+            minHeight: 0,
+            minWidth: 0,
+            '@lg': { flexFlow: 'column' },
+            '@ls': { flexFlow: 'row' },
+          }}
+        >
+          {centerPeers.length > 0 ? (
+            centerPeers.map(peer => (
+              <VideoTile
+                key={peer.videoTrack || peer.id}
+                peerId={peer.id}
+                trackId={peer.videoTrack}
+                rootCSS={{
+                  aspectRatio: getAspectRatio({
+                    roleMap,
+                    roleName: peer.roleName,
+                    isMobile,
+                  }),
+                  padding: 0,
+                  height: '100%',
+                  maxWidth: '100%',
+                  minWidth: 0,
+                  minHeight: 0,
+                  flex: remotePeers.length === 1 ? undefined : '1 1 0',
+                  display: 'flex',
+                  alignItems: 'center',
+                  '@lg': {
+                    display: 'block',
+                    padding: '0 !important',
+                    width: '100%',
+                  },
+                }}
+                objectFit="contain"
+              />
+            ))
+          ) : (
+            <FirstPersonDisplay />
+          )}
+        </Flex>
+        {sidepanePeers.length > 0 && (
+          <Flex
+            align="center"
+            justify="center"
+            css={{
+              size: '100%',
+              gap: '$4',
+              flexFlow: 'row wrap',
+              placeContent: 'center',
+            }}
+          >
+            {(hideInset ? [...sidepanePeers, localPeer] : sidepanePeers).map((peer, _, arr) => (
+              <VideoTile
+                key={peer.videoTrack || peer.id}
+                peerId={peer.id}
+                trackId={peer.videoTrack}
+                rootCSS={{
+                  aspectRatio: getAspectRatio({
+                    roleMap,
+                    roleName: peer.roleName,
+                    isMobile: false,
+                  }),
+                  flexBasis: '100%',
+                  '@ls': {
+                    aspectRatio: 1,
+                    flexBasis: 'calc(50% - $4)',
+                  },
+                  '@md': {
+                    aspectRatio: 1,
+                    flexBasis: arr.length < 4 ? 'calc(50% - $4)' : 'calc(33% - $4)',
+                  },
+                  '@sm': {
+                    flexBasis: arr.length <= 4 ? 'calc(50% - $4)' : 'calc(33% - $4)',
+                  },
+                  padding: 0,
+                }}
+                objectFit="contain"
+              />
+            ))}
+          </Flex>
+        )}
+      </Box>
+      {!hideInset && <InsetTile roleMap={roleMap} isMobile={isMobile} isLandscape={isLandscape} />}
+    </Fragment>
+  );
+}
+
+const InsetTile = ({ isMobile, roleMap, isLandscape }) => {
+  const localPeer = useHMSStore(selectLocalPeer);
+  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
+  const aspectRatio = getAspectRatio({
+    roleMap,
+    roleName: localPeer.roleName,
+    isMobile,
+  });
+  let height = 180;
+  let width = height * aspectRatio;
+  if (isLandscape && width > 240) {
+    width = 240;
+    height = width / aspectRatio;
+  }
+  const nodeRef = useRef(null);
+
+  useEffect(() => {
+    if (!nodeRef.current || !window.ResizeObserver) {
+      return;
+    }
+    const node = nodeRef.current;
+    const resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.target === node.parentElement) {
+          // reset to original position on resize
+          node.style.transform = `translate(0,0)`;
+        }
+      });
+    });
+    resizeObserver.observe(node.parentElement);
+    return () => {
+      node?.parentElement && resizeObserver?.unobserve(node.parentElement);
+      resizeObserver?.disconnect();
+    };
+  }, []);
+
+  return (
+    <Draggable bounds="parent" nodeRef={nodeRef}>
+      <Box
+        ref={nodeRef}
+        css={{
+          position: 'absolute',
+          bottom: 0,
+          right: sidepane ? '$100' : '$10',
+          mr: sidepane ? '$14' : 0,
+          boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
+          zIndex: 10,
+          aspectRatio: aspectRatio,
+          h: height,
+        }}
+      >
+        <VideoTile
+          peerId={localPeer.id}
+          trackid={localPeer.videoTrack}
+          rootCSS={{
+            size: '100%',
+            padding: 0,
+          }}
+          containerCSS={{
+            bg: '$surfaceDefault',
+          }}
+          width={width}
+          height={height}
+        />
+      </Box>
+    </Draggable>
+  );
+};

package/src/Prebuilt/layouts/NonPublisherView.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ShieldAlertIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+
+export const NonPublisherView = React.memo(({ message }) => {
+  return (
+    <Box
+      css={{
+        overflow: 'hidden',
+        w: '96%',
+        maxWidth: '96%',
+        h: '100%',
+        m: 'auto',
+        background: '$surfaceDefault',
+        borderRadius: '$3',
+      }}
+      data-testid="non_publisher_view"
+    >
+      <Flex
+        align="center"
+        direction="column"
+        css={{
+          w: '$96',
+          textAlign: 'center',
+          margin: 'auto',
+          h: '100%',
+          justifyContent: 'center',
+          gap: '$8',
+        }}
+      >
+        <ShieldAlertIcon color="#C3D0E5" width="80px" height="80px" />
+        <Flex
+          direction="column"
+          css={{
+            w: '$80',
+            p: '$1',
+            gap: '$4',
+          }}
+        >
+          <Text color="white" variant="h6" css={{ '@md': { fontSize: '$md' } }}>
+            {message}
+          </Text>
+          <Text color="$textMedEmp" css={{ mt: '$4', '@md': { fontSize: '$sm' } }}>
+            Please go to dashboard and reconfigure role settings or contact the role admin.
+          </Text>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+});

package/src/Prebuilt/layouts/PDFView.jsx

@@ -0,0 +1,122 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { throwErrorHandler, useScreenShare } from '@100mslive/react-sdk';
+import { Box } from '../../Layout';
+import { ThemeTypes, useTheme } from '../../Theme';
+import { EmbebScreenShareView } from './EmbedView';
+import { useSetAppDataByKey } from '../components/AppData/useUISettings';
+import { APP_DATA, isChrome } from '../common/constants';
+
+export const PDFView = () => {
+  return (
+    <EmbebScreenShareView>
+      <PDFEmbedComponent />
+    </EmbebScreenShareView>
+  );
+};
+
+export const PDFEmbedComponent = () => {
+  const ref = useRef();
+  const themeType = useTheme().themeType;
+  const [isPDFLoaded, setIsPDFLoaded] = useState(false);
+  let pdfJSURL = process.env.REACT_APP_PDFJS_IFRAME_URL;
+  const { amIScreenSharing, toggleScreenShare } = useScreenShare(throwErrorHandler);
+  const [pdfConfig, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
+  if (pdfConfig.url && !pdfConfig.file) {
+    pdfJSURL = pdfJSURL + '?file=' + encodeURIComponent(pdfConfig.url);
+  }
+  const [wasScreenShared, setWasScreenShared] = useState(false);
+  // to handle - https://github.com/facebook/react/issues/24502
+  const screenShareAttemptInProgress = useRef(false);
+  const iframeRef = useRef();
+
+  const resetEmbedConfig = useCallback(() => {
+    setPDFConfig({ state: false });
+  }, [setPDFConfig]);
+  useEffect(() => {
+    if (isPDFLoaded && ref.current) {
+      ref.current.contentWindow.postMessage(
+        {
+          theme: themeType === ThemeTypes.dark ? 2 : 1,
+        },
+        '*',
+      );
+    }
+  }, [isPDFLoaded, themeType]);
+  useEffect(() => {
+    if (!amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
+      screenShareAttemptInProgress.current = true;
+      // start screenshare on load for others in the room to see
+      toggleScreenShare({
+        forceCurrentTab: isChrome,
+        cropElement: iframeRef.current,
+        preferCurrentTab: isChrome,
+      })
+        .then(() => {
+          setWasScreenShared(true);
+        })
+        .catch(resetEmbedConfig)
+        .finally(() => {
+          screenShareAttemptInProgress.current = false;
+        });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    // reset embed when screenshare is closed from anywhere
+    if (wasScreenShared && !amIScreenSharing) {
+      resetEmbedConfig();
+    }
+    return () => {
+      // close screenshare when this component is being unmounted
+      if (wasScreenShared && amIScreenSharing) {
+        resetEmbedConfig();
+        toggleScreenShare(); // stop
+      }
+    };
+  }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
+
+  return (
+    <Box
+      ref={iframeRef}
+      css={{
+        mx: '$8',
+        flex: '3 1 0',
+        '@lg': {
+          flex: '2 1 0',
+          display: 'flex',
+          alignItems: 'center',
+        },
+      }}
+    >
+      <iframe
+        src={pdfJSURL}
+        title="PDF Annotator"
+        ref={ref}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 0,
+          borderRadius: '0.75rem',
+        }}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture fullscreen"
+        referrerPolicy="no-referrer"
+        onLoad={() => {
+          if (ref.current && pdfConfig.file) {
+            // setting theme dark -> 2 and light -> 1
+            requestAnimationFrame(() => {
+              ref.current.contentWindow.postMessage(
+                {
+                  file: pdfConfig.file,
+                  theme: themeType === ThemeTypes.dark ? 2 : 1,
+                },
+                '*',
+              );
+              setIsPDFLoaded(true);
+            }, 1000);
+          }
+        }}
+      />
+    </Box>
+  );
+};