@100mslive/roomkit-react 0.1.4 → 0.1.6-alpha.0

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
@@ -6,24 +6,25 @@ import {
   selectLocalPeerID,
   selectPeerMetadata,
   selectPeerNameByID,
+  selectSessionStore,
+  selectTrackAudioByID,
   selectVideoTrackByID,
   selectVideoTrackByPeerID,
   useHMSStore,
+  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { BrbTileIcon, HandIcon, MicOffIcon } from '@100mslive/react-icons';
 import TileConnection from './Connection/TileConnection';
-import TileMenu from './TileMenu/TileMenu';
-import { useBorderAudioLevel } from '../../AudioLevel';
+import TileMenu, { isSameTile } from './TileMenu/TileMenu';
 import { Avatar } from '../../Avatar';
+import { Box, Flex } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
-import { config as cssConfig } from '../../Theme';
+import { config as cssConfig, keyframes } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
-import { useAppConfig } from './AppData/useAppConfig';
-import { useIsHeadless, useUISettings } from './AppData/useUISettings';
-import { useShowStreamingUI } from '../common/hooks';
-import { UI_SETTINGS } from '../common/constants';
+import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
+import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
 const Tile = ({
   peerId,
@@ -35,6 +36,10 @@ const Tile = ({
   isDragabble = false,
   rootCSS = {},
   containerCSS = {},
+  enableSpotlightingPeer = true,
+  hideParticipantNameOnTile = false,
+  roundedVideoTile = true,
+  hideAudioMuteOnTile = false,
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
   const track = useHMSStore(trackSelector);
@@ -44,15 +49,18 @@ const Tile = ({
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const isHeadless = useIsHeadless();
   const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
   const isVideoMuted = !track?.enabled;
   const [isMouseHovered, setIsMouseHovered] = useState(false);
-  const borderAudioRef = useBorderAudioLevel(audioTrack?.id);
   const isVideoDegraded = track?.degraded;
   const isLocal = localPeerID === peerId;
-  const isMobile = useMedia(cssConfig.media.md);
-  const showStreamingUI = useShowStreamingUI();
+  const [pinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
+  const pinned = isSameTile({
+    trackId: pinnedTrackId,
+    videoTrackID: track?.id,
+    audioTrackID: audioTrack?.id,
+  });
+  const spotlighted = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
   const label = getVideoTileLabel({
     peerName,
     track,
@@ -61,8 +69,6 @@ const Tile = ({
   const onHoverHandler = useCallback(event => {
     setIsMouseHovered(event.type === 'mouseenter');
   }, []);
-  const headlessConfig = useAppConfig('headlessConfig');
-  const hideLabel = isHeadless && headlessConfig?.hideTileName;
   const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
   const avatarSize = useMemo(() => {
     if (!width || !height) {
@@ -75,17 +81,13 @@ const Tile = ({
     }
     return 'large';
   }, [width, height]);
+  const isMobile = useMedia(cssConfig.media.md);
 
   return (
     <StyledVideoTile.Root
       css={{
         width,
         height,
-        padding: getPadding({
-          isHeadless,
-          tileOffset: headlessConfig?.tileOffset,
-          hideAudioLevel: headlessConfig?.hideAudioLevel,
-        }),
         ...rootCSS,
       }}
       data-testid={`participant_tile_${peerName}`}
@@ -94,8 +96,7 @@ const Tile = ({
         <StyledVideoTile.Container
           onMouseEnter={onHoverHandler}
           onMouseLeave={onHoverHandler}
-          ref={isHeadless && headlessConfig?.hideAudioLevel ? undefined : borderAudioRef}
-          noRadius={isHeadless && Number(headlessConfig?.tileOffset) === 0}
+          noRadius={!roundedVideoTile}
           css={containerCSS}
         >
           {showStatsOnTiles && isTileBigEnoughToShowStats ? (
@@ -112,23 +113,23 @@ const Tile = ({
                 track?.source === 'regular' &&
                 track?.facingMode !== 'environment'
               }
-              degraded={isVideoDegraded}
-              noRadius={isHeadless && Number(headlessConfig?.tileOffset) === 0}
+              noRadius={!roundedVideoTile}
               data-testid="participant_video_tile"
               css={{
                 objectFit,
+                filter: isVideoDegraded ? 'blur($space$2)' : undefined,
+                bg: 'transparent',
               }}
             />
           ) : null}
-          {isVideoMuted || isVideoDegraded || (!isLocal && isAudioOnly) ? (
+          {isVideoMuted || (!isLocal && isAudioOnly) ? (
             <StyledVideoTile.AvatarContainer>
               <Avatar name={peerName || ''} data-testid="participant_avatar_icon" size={avatarSize} />
             </StyledVideoTile.AvatarContainer>
           ) : null}
 
           {showAudioMuted({
-            hideTileAudioMute: headlessConfig?.hideTileAudioMute,
-            isHeadless,
+            hideAudioMute: hideAudioMuteOnTile,
             isAudioMuted,
           }) ? (
             <StyledVideoTile.AudioIndicator
@@ -137,18 +138,29 @@ const Tile = ({
             >
               <MicOffIcon />
             </StyledVideoTile.AudioIndicator>
-          ) : null}
-          {(isMouseHovered || isDragabble) && !isHeadless ? (
+          ) : (
+            <AudioLevel trackId={audioTrack?.id} />
+          )}
+          {isMouseHovered || isDragabble ? (
             <TileMenu
               peerID={peerId}
               audioTrackID={audioTrack?.id}
               videoTrackID={track?.id}
               canMinimise={canMinimise}
+              enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
           <PeerMetadata peerId={peerId} />
-          {showStreamingUI && isMobile ? null : (
-            <TileConnection hideLabel={hideLabel} name={label} isTile peerId={peerId} width={width} />
+          {isMobile ? null : (
+            <TileConnection
+              hideLabel={hideParticipantNameOnTile}
+              name={label}
+              isTile
+              peerId={peerId}
+              width={width}
+              pinned={pinned}
+              spotlighted={spotlighted}
+            />
           )}
         </StyledVideoTile.Container>
       ) : null}
@@ -158,6 +170,55 @@ const Tile = ({
 
 const metaStyles = { top: '$4', left: '$4' };
 
+const heightAnimation = value =>
+  keyframes({
+    '50%': {
+      transform: `scale3d(1,${value},1)`,
+    },
+    '100%': {
+      transform: `scale3d(1,1,1)`,
+    },
+  });
+
+const AudioLevelIndicator = ({ trackId, value, delay }) => {
+  const vanillaStore = useHMSVanillaStore();
+  const ref = useRef();
+
+  useEffect(() => {
+    const unsubscribe = vanillaStore.subscribe(audioLevel => {
+      if (ref.current) {
+        ref.current.style['animation'] = `${heightAnimation(
+          audioLevel ? value : 1,
+        )} 0.3s cubic-bezier(0.61, 1, 0.88, 1) infinite ${delay}s`;
+      }
+    }, selectTrackAudioByID(trackId));
+    return unsubscribe;
+  }, [vanillaStore, trackId, value, delay]);
+  return (
+    <Box
+      ref={ref}
+      css={{
+        w: 4,
+        height: 6,
+        r: 2,
+        bg: '$on_primary_high',
+      }}
+    />
+  );
+};
+
+export const AudioLevel = ({ trackId }) => {
+  return (
+    <StyledVideoTile.AudioIndicator>
+      <Flex align="center" justify="center" css={{ gap: '$2' }}>
+        {[3, 2, 3].map((v, i) => (
+          <AudioLevelIndicator trackId={trackId} value={v} delay={i * 0.15} key={i} />
+        ))}
+      </Flex>
+    </StyledVideoTile.AudioIndicator>
+  );
+};
+
 const PeerMetadata = ({ peerId }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
   const isHandRaised = metaData?.isHandRaised || false;
@@ -181,19 +242,8 @@ const PeerMetadata = ({ peerId }) => {
 
 const VideoTile = React.memo(Tile);
 
-const showAudioMuted = ({ hideTileAudioMute, isHeadless, isAudioMuted }) => {
-  if (!isHeadless) {
-    return isAudioMuted;
-  }
-  return isAudioMuted && !hideTileAudioMute;
-};
-
-const getPadding = ({ isHeadless, tileOffset, hideAudioLevel }) => {
-  if (!isHeadless || isNaN(Number(tileOffset))) {
-    return undefined;
-  }
-  // Adding extra padding of 3px to ensure that the audio border is visible properly between tiles when tileOffset is 0.
-  return Number(tileOffset) === 0 ? (hideAudioLevel ? 0 : 3) : undefined;
+const showAudioMuted = ({ hideAudioMute, isAudioMuted }) => {
+  return isAudioMuted && !hideAudioMute;
 };
 
 export default VideoTile;

package/src/Prebuilt/components/conference.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { usePrevious } from 'react-use';
 import {
   HMSRoomState,
@@ -15,34 +15,36 @@ import { ActivatedPIP } from './PIP/PIPComponent';
 import { PictureInPicture } from './PIP/PIPManager';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
-import { ConferenceMainView } from '../layouts/mainView';
+import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { RoleChangeRequestModal } from './RoleChangeRequestModal';
+import {
+  useRoomLayoutConferencingScreen,
+  useRoomLayoutPreviewScreen,
+} from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useAuthToken, useIsHeadless, useSetAppDataByKey } from './AppData/useUISettings';
-import { useNavigation } from './hooks/useNavigation';
-import { useSkipPreview } from './hooks/useSkipPreview';
 import { APP_DATA, EMOJI_REACTION_TYPE, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
 const Conference = () => {
-  const navigate = useNavigation();
+  const navigate = useNavigate();
   const { roomId, role } = useParams();
   const isHeadless = useIsHeadless();
+  const { userName } = useHMSPrebuiltContext();
+  const screenProps = useRoomLayoutConferencingScreen();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
   const prevState = usePrevious(roomState);
   const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
   const hmsActions = useHMSActions();
   const [hideControls, setHideControls] = useState(false);
   const dropdownList = useHMSStore(selectAppData(APP_DATA.dropdownList));
-  const skipPreview = useSkipPreview();
-  const { showPreview } = useHMSPrebuiltContext();
   const authTokenInAppData = useAuthToken();
   const headerRef = useRef();
   const footerRef = useRef();
   const dropdownListRef = useRef();
   const performAutoHide = hideControls && (isAndroid || isIOS || isIPadOS);
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-
   const toggleControls = () => {
     if (dropdownListRef.current?.length === 0) {
       setHideControls(value => !value);
@@ -70,7 +72,7 @@ const Conference = () => {
       navigate(`/`);
       return;
     }
-    if (!showPreview) {
+    if (!isPreviewScreenEnabled) {
       return;
     }
     if (
@@ -80,26 +82,26 @@ const Conference = () => {
       if (role) navigate(`/preview/${roomId || ''}/${role}`);
       else navigate(`/preview/${roomId || ''}`);
     }
-  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, showPreview]);
+  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
 
   useEffect(() => {
-    if (authTokenInAppData && !isConnectedToRoom && !showPreview && roomState !== HMSRoomState.Connecting) {
+    if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting) {
       hmsActions
         .join({
-          userName: 'Test',
+          userName,
           authToken: authTokenInAppData,
           initEndpoint: process.env.REACT_APP_ENV
             ? `https://${process.env.REACT_APP_ENV}-init.100ms.live/init`
             : undefined,
           initialSettings: {
-            isAudioMuted: skipPreview,
-            isVideoMuted: skipPreview,
+            isAudioMuted: !isPreviewScreenEnabled,
+            isVideoMuted: !isPreviewScreenEnabled,
             speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
           },
         })
         .catch(console.error);
     }
-  }, [authTokenInAppData, skipPreview, hmsActions, isConnectedToRoom, showPreview, roomState]);
+  }, [authTokenInAppData, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
 
   useEffect(() => {
     // beam doesn't need to store messages, saves on unnecessary store updates in large calls
@@ -124,7 +126,7 @@ const Conference = () => {
 
   return (
     <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
-      {!isHeadless && (
+      {!screenProps.hideSections.includes('header') && (
         <Box
           ref={headerRef}
           css={{
@@ -137,7 +139,7 @@ const Conference = () => {
           }}
           data-testid="header"
         >
-          <Header />
+          <Header elements={screenProps.elements} screenType={screenProps.screenType} />
         </Box>
       )}
       <Box
@@ -155,23 +157,25 @@ const Conference = () => {
         data-testid="conferencing"
         onClick={toggleControls}
       >
-        <ConferenceMainView />
+        <VideoStreamingSection screenType={screenProps.screenType} elements={screenProps.elements} />
       </Box>
-      {!isHeadless && (
+      {!screenProps.hideSections.includes('footer') && (
         <Box
           ref={footerRef}
           css={{
             flexShrink: 0,
             maxHeight: '$24',
             transition: 'margin 0.3s ease-in-out',
+            bg: '$background_dim',
             marginBottom: performAutoHide ? `-${footerRef.current?.clientHeight}px` : undefined,
             '@md': {
               maxHeight: 'unset',
+              bg: screenProps.screenType === 'hls_live_streaming' ? 'transparent' : '$background_dim',
             },
           }}
           data-testid="footer"
         >
-          <Footer />
+          <Footer elements={screenProps.elements} screenType={screenProps.screenType} />
         </Box>
       )}
       <RoleChangeRequestModal />

package/src/Prebuilt/components/hooks/useMetadata.jsx

@@ -41,6 +41,12 @@ export const useMyMetadata = () => {
     }
   }, [isHandRaised, isBRBOn]); //eslint-disable-line
 
+  const setPrevRole = async role => {
+    await update({
+      prevRole: role,
+    });
+  };
+
   return {
     isHandRaised,
     isBRBOn,
@@ -48,5 +54,6 @@ export const useMyMetadata = () => {
     updateMetaData: update,
     toggleHandRaise,
     toggleBRB,
+    setPrevRole,
   };
 };

package/src/Prebuilt/components/hooks/useRoleProminencePeers.tsx

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { HMSPeer } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { usePinnedTrack } from '../AppData/useUISettings';
+
+export const useRoleProminencePeers = (prominentRoles: string[], peers: HMSPeer[], isInsetEnabled: boolean) => {
+  const pinnedTrack = usePinnedTrack();
+
+  const [prominentPeers, secondaryPeers] = useMemo(() => {
+    return peers.reduce<[HMSPeer[], HMSPeer[]]>(
+      (acc, peer) => {
+        if (pinnedTrack) {
+          if (pinnedTrack.peerId === peer.id) {
+            acc[0].push(peer);
+          } else {
+            acc[1].push(peer);
+          }
+          return acc;
+        }
+        if (peer.isLocal && isInsetEnabled) {
+          return acc;
+        }
+        if (prominentRoles?.includes(peer.roleName || '')) {
+          acc[0].push(peer);
+        } else {
+          acc[1].push(peer);
+        }
+        return acc;
+      },
+      [[], []],
+    );
+  }, [peers, isInsetEnabled, prominentRoles, pinnedTrack]);
+
+  return {
+    prominentPeers,
+    secondaryPeers,
+  };
+};

package/src/Prebuilt/components/hooks/useTileLayout.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useMeasure, useMedia } from 'react-use';
+import {
+  getPeersWithTiles,
+  HMSPeer,
+  selectTracksMap,
+  TrackWithPeerAndDimensions,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
+
+const aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
+const gap = 8; // gap between flex items
+
+export const usePagesWithTiles = ({ peers, maxTileCount }: { peers: HMSPeer[]; maxTileCount: number }) => {
+  const vanillaStore = useHMSVanillaStore();
+  const tracksMap = vanillaStore.getState(selectTracksMap);
+  const peersWithTiles = useMemo(
+    () => getPeersWithTiles(peers, tracksMap, () => false) as TrackWithPeerAndDimensions[],
+    [peers, tracksMap],
+  );
+  const noOfPages = Math.ceil(peersWithTiles.length / maxTileCount);
+  const pagesList = useMemo(() => {
+    let sliceStart = 0;
+    let remaining = peersWithTiles.length;
+    const list = [];
+    // split into pages
+    for (let i = 0; i < noOfPages; i++) {
+      const count = Math.min(remaining, maxTileCount);
+      list.push(peersWithTiles.slice(sliceStart, sliceStart + count));
+      remaining = remaining - count;
+      sliceStart += count;
+    }
+    return list;
+  }, [peersWithTiles, noOfPages, maxTileCount]);
+  return pagesList;
+};
+
+export const useTileLayout = ({
+  pageList,
+  maxTileCount,
+}: {
+  pageList: TrackWithPeerAndDimensions[][];
+  maxTileCount: number;
+}) => {
+  const vanillaStore = useHMSVanillaStore();
+  const [ref, { width, height }] = useMeasure<HTMLDivElement>();
+  const isMobile = useMedia(cssConfig.media.lg);
+  const [pagesWithTiles, setPagesWithTiles] = useState<TrackWithPeerAndDimensions[][]>([]);
+
+  useEffect(() => {
+    if (width === 0 || height === 0) {
+      return;
+    }
+    // calculate dimesions for each page
+    for (const page of pageList) {
+      const noOfTilesInPage = page.length;
+      let maxCols =
+        noOfTilesInPage > 2 && noOfTilesInPage < 9
+          ? Math.ceil(noOfTilesInPage / 2)
+          : Math.ceil(Math.sqrt(noOfTilesInPage));
+      if (isMobile) {
+        maxCols = noOfTilesInPage < 4 ? 1 : Math.min(maxCols, 2);
+      }
+      const maxRows = Math.ceil(noOfTilesInPage / maxCols);
+      let index = 0;
+      // convert the current page to a matrix(grid)
+      const matrix = new Array(maxRows).fill(null).map((_, i) => {
+        const numCols = Math.min(maxCols, noOfTilesInPage - i * maxCols);
+        const rowElements = [];
+        for (let j = 0; j < numCols; j++) {
+          if (index < page.length) {
+            rowElements.push(page[index++]);
+          }
+        }
+        return rowElements;
+      });
+
+      const maxHeight = height - (maxRows - 1) * gap;
+      const maxRowHeight = maxHeight / matrix.length;
+      const aspectRatios =
+        isMobile && (noOfTilesInPage === 1 || noOfTilesInPage > 3)
+          ? aspectRatioConfig.mobile
+          : aspectRatioConfig.default;
+      // calculate height and width of each tile in a row
+      for (const row of matrix) {
+        let tileWidth = (width - (row.length - 1) * gap) / row.length;
+        let tileHeight = 0;
+        const calcHeights = aspectRatios.map(aR => tileWidth / aR);
+        for (const h of calcHeights) {
+          if (h < maxRowHeight) {
+            if (tileHeight < h) {
+              tileHeight = h;
+            }
+          }
+        }
+
+        // tileHeight is not calculated as it could be exceeding the max possible height
+        // find the max possible width instead
+        if (tileHeight === 0) {
+          tileHeight = maxRowHeight;
+          const calcWidths = aspectRatios.map(aR => tileHeight * aR);
+          tileWidth = 0;
+          for (const w of calcWidths) {
+            if (w < width) {
+              if (tileWidth < w) {
+                tileWidth = w;
+              }
+            }
+          }
+        }
+        for (let i = 0; i < row.length; i++) {
+          row[i].width = tileWidth;
+          row[i].height = tileHeight;
+        }
+      }
+    }
+    setPagesWithTiles([...pageList]);
+  }, [width, height, maxTileCount, pageList, vanillaStore, isMobile]);
+  return { pagesWithTiles, ref };
+};

package/src/Prebuilt/components/hooks/useVideoTileLayout.ts

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+
+type TileContextType = {
+  enableSpotlightingPeer: boolean;
+  hideParticipantNameOnTile?: boolean;
+  roundedVideoTile?: boolean;
+  hideAudioMuteOnTile?: boolean;
+  objectFit?: 'cover' | 'contain';
+};
+
+export const VideoTileContext = React.createContext<TileContextType>({
+  enableSpotlightingPeer: true,
+  hideParticipantNameOnTile: false,
+  roundedVideoTile: true,
+  hideAudioMuteOnTile: false,
+  objectFit: 'contain',
+});
+
+export const useVideoTileContext = () => {
+  const context = useContext(VideoTileContext);
+  return context;
+};

package/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx

@@ -1,17 +1,12 @@
 import React, { useState } from 'react';
-import { Dialog, Flex, HorizontalDivider, Input, Text } from '../../../';
-import { DialogInputFile, DialogRow } from '../../primitives/DialogContent';
-import { PdfErrorView } from './pdfErrorView';
+import { Dialog, Flex } from '../../../';
+import { DialogInputFile } from '../../primitives/DialogContent';
 import { PDFHeader } from './pdfHeader';
-import { PDFInfo } from './pdfInfo';
 import { SubmitPDF } from './submitPdf';
 import { UploadedFile } from './uploadedFile';
 
 export function PDFFileOptions({ onOpenChange }) {
-  const [isPDFUrlValid, setIsPDFUrlValid] = useState(true);
-  const [isValidateProgress, setIsValidateProgress] = useState(false);
   const [pdfFile, setPDFFile] = useState(null);
-  const [pdfURL, setPDFURL] = useState('');
 
   return !pdfFile ? (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
@@ -35,75 +30,13 @@ export function PDFFileOptions({ onOpenChange }) {
               type="file"
               accept=".pdf"
             />
-            <DialogRow
-              css={{
-                m: '$10 0',
-              }}
-            >
-              <HorizontalDivider
-                css={{
-                  mr: '$4',
-                }}
-              />
-              <Text
-                variant="tiny"
-                css={{
-                  color: '$on_surface_low',
-                }}
-              >
-                OR
-              </Text>
-              <HorizontalDivider
-                css={{
-                  ml: '$4',
-                }}
-              />
-            </DialogRow>
-            <Text
-              variant="sm"
-              css={{
-                py: '$2',
-              }}
-            >
-              Import from URL
-            </Text>
-            <Input
-              css={{ w: '100%', mb: '$10' }}
-              value={pdfURL}
-              onFocus={() => {
-                setIsPDFUrlValid(true);
-                setIsValidateProgress(false);
-              }}
-              onChange={e => {
-                setPDFURL(e.target.value);
-              }}
-              placeholder="Paste PDF URL"
-              type="text"
-              error={!isPDFUrlValid}
-            />
-            {!isPDFUrlValid && <PdfErrorView isPDFUrlValid={isPDFUrlValid} />}
-            <PDFInfo />
-            <SubmitPDF
-              pdfFile={pdfFile}
-              pdfURL={pdfURL}
-              isValidateProgress={isValidateProgress}
-              setIsPDFUrlValid={setIsPDFUrlValid}
-              setIsValidateProgress={setIsValidateProgress}
-              onOpenChange={onOpenChange}
-            />
+
+            <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
   ) : (
-    <UploadedFile
-      pdfFile={pdfFile}
-      pdfURL={pdfURL}
-      isValidateProgress={isValidateProgress}
-      setPDFFile={setPDFFile}
-      setIsPDFUrlValid={setIsPDFUrlValid}
-      setIsValidateProgress={setIsValidateProgress}
-      onOpenChange={onOpenChange}
-    />
+    <UploadedFile pdfFile={pdfFile} setPDFFile={setPDFFile} onOpenChange={onOpenChange} />
   );
 }