@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

package/src/Prebuilt/components/LeaveRoom.jsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { useMedia } from 'react-use';
-import { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { DesktopLeaveRoom } from './MoreSettings/SplitComponents/DesktopLeaveRoom';
-import { MwebLeaveRoom } from './MoreSettings/SplitComponents/MwebLeaveRoom';
-import { PictureInPicture } from './PIP/PIPManager';
-import { ToastManager } from './Toast/ToastManager';
-import { IconButton } from '../../IconButton';
-import { config as cssConfig, styled } from '../../Theme';
-import { useHMSPrebuiltContext } from '../AppContext';
-import { useNavigation } from './hooks/useNavigation';
-
-export const LeaveRoom = () => {
-  const navigate = useNavigation();
-  const params = useParams();
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const permissions = useHMSStore(selectPermissions);
-  const isMobile = useMedia(cssConfig.media.md);
-  const hmsActions = useHMSActions();
-  const { showLeave, onLeave } = useHMSPrebuiltContext();
-
-  const stopStream = async () => {
-    try {
-      console.log('Stopping HLS stream');
-      await hmsActions.stopHLSStreaming();
-      ToastManager.addToast({ title: 'Stopping the stream' });
-    } catch (e) {
-      console.error('Error stopping stream', e);
-      ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });
-    }
-  };
-
-  const redirectToLeavePage = () => {
-    if (showLeave) {
-      if (params.role) {
-        navigate('/leave/' + params.roomId + '/' + params.role);
-      } else {
-        navigate('/leave/' + params.roomId);
-      }
-    }
-    PictureInPicture.stop().catch(() => console.error('stopping pip'));
-    ToastManager.clearAllToast();
-    onLeave?.();
-  };
-
-  const leaveRoom = () => {
-    hmsActions.leave();
-    redirectToLeavePage();
-  };
-
-  // const endRoom = () => {
-  //   hmsActions.endRoom(false, 'End Room');
-  //   redirectToLeavePage();
-  // };
-
-  if (!permissions || !isConnected) {
-    return null;
-  }
-  return isMobile ? (
-    <MwebLeaveRoom leaveIconButton={LeaveIconButton} leaveRoom={leaveRoom} stopStream={stopStream} />
-  ) : (
-    <DesktopLeaveRoom
-      leaveIconButton={LeaveIconButton}
-      menuTriggerButton={MenuTriggerButton}
-      leaveRoom={leaveRoom}
-      stopStream={stopStream}
-    />
-  );
-};
-
-const LeaveIconButton = styled(IconButton, {
-  color: '$on_primary_high',
-  h: '$14',
-  px: '$4',
-  r: '$1',
-  bg: '$alert_error_default',
-  '&:not([disabled]):hover': {
-    bg: '$alert_error_bright',
-  },
-  '&:not([disabled]):active': {
-    bg: '$alert_error_default',
-  },
-  '@md': {
-    mx: 0,
-  },
-});
-
-const MenuTriggerButton = styled(LeaveIconButton, {
-  borderLeft: '1px solid $alert_error_dim',
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0,
-  px: '$2',
-});

package/src/Prebuilt/components/MoreSettings/MoreSettings.jsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { DesktopOptions } from './SplitComponents/DesktopOptions';
-import { MwebOptions } from './SplitComponents/MwebOptions';
-import { config as cssConfig } from '../../../';
-
-export const MoreSettings = () => {
-  const isMobile = useMedia(cssConfig.media.md);
-  return isMobile ? <MwebOptions /> : <DesktopOptions />;
-};

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx

@@ -1,219 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import { HMSHLSPlayer } from '@100mslive/hls-player';
-import {
-  selectAppData,
-  selectLocalPeerID,
-  selectLocalPeerRoleName,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { BrbIcon, CheckIcon, DragHandleIcon, HandIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../../';
-import IconButton from '../../../IconButton';
-import { PIP } from '../../PIP';
-import { RoleChangeModal } from '../../RoleChangeModal';
-import SettingsModal from '../../Settings/SettingsModal';
-import StartRecording from '../../Settings/StartRecording';
-import { StatsForNerds } from '../../StatsForNerds';
-import { BulkRoleChangeModal } from '.././BulkRoleChangeModal';
-import { FullScreenItem } from '.././FullScreenItem';
-import { MuteAllModal } from '.././MuteAllModal';
-import { useHLSViewerRole } from '../../AppData/useUISettings';
-import { useDropdownList } from '../../hooks/useDropdownList';
-import { useIsFeatureEnabled } from '../../hooks/useFeatures';
-import { useMyMetadata } from '../../hooks/useMetadata';
-import { useShowStreamingUI } from '../../../common/hooks';
-import { FeatureFlags } from '../../../services/FeatureFlags';
-import { APP_DATA, FEATURE_LIST, isMacOS } from '../../../common/constants';
-
-const MODALS = {
-  CHANGE_NAME: 'changeName',
-  SELF_ROLE_CHANGE: 'selfRoleChange',
-  MORE_SETTINGS: 'moreSettings',
-  START_RECORDING: 'startRecording',
-  DEVICE_SETTINGS: 'deviceSettings',
-  STATS_FOR_NERDS: 'statsForNerds',
-  BULK_ROLE_CHANGE: 'bulkRoleChange',
-  MUTE_ALL: 'muteAll',
-  EMBED_URL: 'embedUrl',
-};
-
-export const DesktopOptions = () => {
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const hmsActions = useHMSActions();
-  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
-  const isSFNEnabled = useIsFeatureEnabled(FEATURE_LIST.STARTS_FOR_NERDS);
-  const [openModals, setOpenModals] = useState(new Set());
-  const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();
-  const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE);
-  const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB);
-  const showStreamingUI = useShowStreamingUI();
-  const hlsViewerRole = useHLSViewerRole();
-  const isHlsViewer = hlsViewerRole === localPeerRole;
-  const isPIPEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
-
-  useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
-
-  const updateState = (modalName, value) => {
-    setOpenModals(modals => {
-      const copy = new Set(modals);
-      if (value) {
-        // avoiding extra set state trigger which removes currently open dialog by clearing set.
-        copy.clear();
-        copy.add(modalName);
-      } else {
-        copy.delete(modalName);
-      }
-      return copy;
-    });
-  };
-
-  return (
-    <Fragment>
-      <Dropdown.Root
-        open={openModals.has(MODALS.MORE_SETTINGS)}
-        onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
-        modal={false}
-      >
-        <Dropdown.Trigger asChild data-testid="more_settings_btn">
-          <IconButton>
-            <Tooltip title="More options">
-              <DragHandleIcon />
-            </Tooltip>
-          </IconButton>
-        </Dropdown.Trigger>
-
-        <Dropdown.Content
-          sideOffset={5}
-          align="end"
-          css={{
-            py: '$0',
-            maxHeight: 'unset',
-            '@md': { w: '$64' },
-            "div[role='separator']:first-child": {
-              display: 'none',
-            },
-          }}
-        >
-          {isHandRaiseEnabled && !showStreamingUI ? (
-            <Dropdown.Item onClick={toggleHandRaise} data-testid="raise_hand_btn">
-              <HandIcon />
-              <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
-                Raise Hand
-              </Text>
-              <Flex justify="end" css={{ color: '$on_surface_high', flexGrow: '1' }}>
-                {isHandRaised ? <CheckIcon /> : null}
-              </Flex>
-            </Dropdown.Item>
-          ) : null}
-
-          {isBRBEnabled && !showStreamingUI ? (
-            <Dropdown.Item onClick={toggleBRB} data-testid="brb_btn">
-              <BrbIcon />
-              <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
-                Be Right Back
-              </Text>
-              <Flex justify="end" css={{ color: '$on_surface_high', flexGrow: '1' }}>
-                {isBRBOn ? <CheckIcon /> : null}
-              </Flex>
-            </Dropdown.Item>
-          ) : null}
-
-          {(isBRBEnabled || isHandRaiseEnabled) && !showStreamingUI ? (
-            <Dropdown.ItemSeparator css={{ mx: '0' }} />
-          ) : null}
-
-          {isPIPEnabled && !isHlsViewer ? (
-            <Dropdown.Item>
-              <PIP
-                content={
-                  <Flex css={{ w: '100%' }}>
-                    <PipIcon />
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      Picture in picture mode
-                    </Text>
-                  </Flex>
-                }
-              />
-            </Dropdown.Item>
-          ) : null}
-
-          <FullScreenItem />
-          {/* {isAllowedToPublish.screen && isEmbedEnabled && (
-            <EmbedUrl setShowOpenUrl={() => updateState(MODALS.EMBED_URL, true)} />
-          )} */}
-
-          <Dropdown.ItemSeparator css={{ mx: 0 }} />
-
-          <Dropdown.Item onClick={() => updateState(MODALS.DEVICE_SETTINGS, true)} data-testid="device_settings_btn">
-            <SettingsIcon />
-            <Text variant="sm" css={{ ml: '$4' }}>
-              Settings
-            </Text>
-          </Dropdown.Item>
-
-          {FeatureFlags.enableStatsForNerds &&
-            isSFNEnabled &&
-            (localPeerRole === 'hls-viewer' ? (
-              HMSHLSPlayer.isSupported() ? (
-                <Dropdown.Item
-                  onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                  data-testid="hls_stats"
-                >
-                  <Checkbox.Root
-                    css={{ margin: '$2' }}
-                    checked={enablHlsStats}
-                    onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                  >
-                    <Checkbox.Indicator>
-                      <CheckIcon width={16} height={16} />
-                    </Checkbox.Indicator>
-                  </Checkbox.Root>
-                  <Flex justify="between" css={{ width: '100%' }}>
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      Show HLS Stats
-                    </Text>
-
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
-                    </Text>
-                  </Flex>
-                </Dropdown.Item>
-              ) : null
-            ) : (
-              <Dropdown.Item
-                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
-                data-testid="stats_for_nreds_btn"
-              >
-                <InfoIcon />
-                <Text variant="sm" css={{ ml: '$4' }}>
-                  Stats for Nerds
-                </Text>
-              </Dropdown.Item>
-            ))}
-        </Dropdown.Content>
-      </Dropdown.Root>
-      {openModals.has(MODALS.BULK_ROLE_CHANGE) && (
-        <BulkRoleChangeModal onOpenChange={value => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
-      )}
-      {openModals.has(MODALS.MUTE_ALL) && <MuteAllModal onOpenChange={value => updateState(MODALS.MUTE_ALL, value)} />}
-
-      {openModals.has(MODALS.START_RECORDING) && (
-        <StartRecording open onOpenChange={value => updateState(MODALS.START_RECORDING, value)} />
-      )}
-      {openModals.has(MODALS.DEVICE_SETTINGS) && (
-        <SettingsModal open onOpenChange={value => updateState(MODALS.DEVICE_SETTINGS, value)} />
-      )}
-      {FeatureFlags.enableStatsForNerds && openModals.has(MODALS.STATS_FOR_NERDS) && (
-        <StatsForNerds open onOpenChange={value => updateState(MODALS.STATS_FOR_NERDS, value)} />
-      )}
-      {openModals.has(MODALS.SELF_ROLE_CHANGE) && (
-        <RoleChangeModal peerId={localPeerId} onOpenChange={value => updateState(MODALS.SELF_ROLE_CHANGE, value)} />
-      )}
-      {/* {openModals.has(MODALS.EMBED_URL) && (
-        <EmbedUrlModal onOpenChange={value => updateState(MODALS.EMBED_URL, value)} />
-      )} */}
-    </Fragment>
-  );
-};

package/src/Prebuilt/components/Notifications/MessageNotifications.jsx

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { ToastBatcher } from '../Toast/ToastBatcher';
-import { useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { FEATURE_LIST, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
-
-export const MessageNotifications = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.NEW_MESSAGE);
-  const isChatEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT);
-  const isNewMessageSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE);
-  const isHeadless = useIsHeadless();
-  useEffect(() => {
-    if (!notification) {
-      return;
-    }
-    console.debug(`[${notification.type}]`, notification);
-    if (!isNewMessageSubscribed || notification.data?.ignored || !isChatEnabled) {
-      return;
-    }
-    ToastBatcher.showToast({ notification });
-  }, [notification, isNewMessageSubscribed, isHeadless, isChatEnabled]);
-
-  return null;
-};

package/src/Prebuilt/components/Pagination.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
-import { StyledPagination } from '../../Pagination';
-
-export const Pagination = ({ page, onPageChange, numPages }) => {
-  const disableLeft = page === 0;
-  const disableRight = page === numPages - 1;
-  const nextPage = () => {
-    onPageChange(Math.min(page + 1, numPages - 1));
-  };
-  const prevPage = () => {
-    onPageChange(Math.max(page - 1, 0));
-  };
-  return (
-    <StyledPagination.Root>
-      <StyledPagination.Chevron disabled={disableLeft} onClick={prevPage}>
-        <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
-      </StyledPagination.Chevron>
-      <StyledPagination.Dots>
-        {[...Array(numPages)].map((_, i) => (
-          <StyledPagination.Dot key={i} active={page === i} onClick={() => onPageChange(i)} />
-        ))}
-      </StyledPagination.Dots>
-      <StyledPagination.Chevron disabled={disableRight} onClick={nextPage}>
-        <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
-      </StyledPagination.Chevron>
-    </StyledPagination.Root>
-  );
-};

package/src/Prebuilt/components/RoleChangeRequestModal.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { selectRoleChangeRequest, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { RequestDialog } from '../primitives/DialogContent';
-import { useIsHeadless } from './AppData/useUISettings';
-
-export const RoleChangeRequestModal = () => {
-  const hmsActions = useHMSActions();
-  const isHeadless = useIsHeadless();
-  const roleChangeRequest = useHMSStore(selectRoleChangeRequest);
-
-  if (!roleChangeRequest?.role || isHeadless) {
-    return null;
-  }
-
-  return (
-    <RequestDialog
-      title="Role Change Request"
-      onOpenChange={value => !value && hmsActions.rejectChangeRole(roleChangeRequest)}
-      body={`${roleChangeRequest?.requestedBy?.name} has requested you to change your role to ${roleChangeRequest?.role?.name}.`}
-      onAction={() => {
-        hmsActions.acceptChangeRole(roleChangeRequest);
-      }}
-      actionText="Accept"
-    />
-  );
-};

package/src/Prebuilt/components/VideoList.jsx

@@ -1,73 +0,0 @@
-import React, { Fragment, useEffect, useState } from 'react';
-import { useVideoList } from '@100mslive/react-sdk';
-import { useTheme } from '../../Theme';
-import { StyledVideoList } from '../../VideoList';
-import { Pagination } from './Pagination';
-import ScreenshareTile from './ScreenshareTile';
-import VideoTile from './VideoTile';
-import { useAppConfig } from './AppData/useAppConfig';
-import { useIsHeadless } from './AppData/useUISettings';
-
-const List = ({ maxTileCount, peers, maxColCount, maxRowCount, includeScreenShareForPeer }) => {
-  const { aspectRatio } = useTheme();
-  const tileOffset = useAppConfig('headlessConfig', 'tileOffset');
-  const isHeadless = useIsHeadless();
-
-  const { ref, pagesWithTiles } = useVideoList({
-    peers,
-    maxTileCount,
-    maxColCount,
-    maxRowCount,
-    includeScreenShareForPeer,
-    aspectRatio,
-    offsetY: getOffset({ isHeadless, tileOffset }),
-  });
-  const [page, setPage] = useState(0);
-  useEffect(() => {
-    // currentPageIndex should not exceed pages length
-    if (page >= pagesWithTiles.length) {
-      setPage(0);
-    }
-  }, [pagesWithTiles.length, page]);
-  return (
-    <StyledVideoList.Root ref={ref}>
-      <StyledVideoList.Container css={{ flexWrap: 'wrap', placeContent: 'center' }}>
-        {pagesWithTiles && pagesWithTiles.length > 0
-          ? pagesWithTiles[page]?.map(tile => {
-              if (tile.width === 0 || tile.height === 0) {
-                return null;
-              }
-              return (
-                <Fragment key={tile.track?.id || tile.peer.id}>
-                  {tile.track?.source === 'screen' ? (
-                    <ScreenshareTile width={tile.width} height={tile.height} peerId={tile.peer.id} />
-                  ) : (
-                    <VideoTile
-                      width={tile.width}
-                      height={tile.height}
-                      peerId={tile.peer?.id}
-                      trackId={tile.track?.id}
-                    />
-                  )}
-                </Fragment>
-              );
-            })
-          : null}
-      </StyledVideoList.Container>
-      {!isHeadless && pagesWithTiles.length > 1 ? (
-        <Pagination page={page} onPageChange={setPage} numPages={pagesWithTiles.length} />
-      ) : null}
-    </StyledVideoList.Root>
-  );
-};
-
-const VideoList = React.memo(List);
-
-const getOffset = ({ tileOffset, isHeadless }) => {
-  if (!isHeadless || isNaN(Number(tileOffset))) {
-    return 32;
-  }
-  return Number(tileOffset);
-};
-
-export default VideoList;

package/src/Prebuilt/components/gridView.jsx

@@ -1,85 +0,0 @@
-import React, { Fragment } from 'react';
-import { useMedia } from 'react-use';
-import { Box, Flex } from '../../Layout';
-import { config as cssConfig } from '../../Theme';
-import { FirstPersonDisplay } from './FirstPersonDisplay';
-import { Image } from './Image';
-import VideoList from './VideoList';
-import { useAppConfig } from './AppData/useAppConfig';
-import { useIsHeadless } from './AppData/useUISettings';
-
-const MAX_TILES_FOR_MOBILE = 4;
-
-/**
- * the below variables are for showing webinar etc. related image if required on certain meeting urls
- */
-const webinarProps = JSON.parse(process.env.REACT_APP_WEBINAR_PROPS || '{}');
-const eventRoomIDs = webinarProps?.ROOM_IDS || [];
-const eventsImg = webinarProps?.IMAGE_FILE || ''; // the image to show in center
-// the link to navigate to when user clicks on the image
-const webinarInfoLink = webinarProps?.LINK_HREF || 'https://100ms.live/';
-
-// The center of the screen shows bigger tiles
-export const GridCenterView = ({ peers, maxTileCount }) => {
-  const mediaQueryLg = cssConfig.media.md;
-  const limitMaxTiles = useMedia(mediaQueryLg);
-
-  const headlessConfig = useAppConfig('headlessConfig');
-  const isHeadless = useIsHeadless();
-  return (
-    <Fragment>
-      <Box
-        css={{
-          flex: '1 1 0',
-          height: '100%',
-          mx: isHeadless && Number(headlessConfig?.tileOffset) === 0 ? '0' : '$8',
-          '@md': { flex: '2 1 0' },
-        }}
-      >
-        {peers && peers.length > 0 ? (
-          <VideoList peers={peers} maxTileCount={limitMaxTiles ? MAX_TILES_FOR_MOBILE : maxTileCount} />
-        ) : eventRoomIDs.some(id => window.location.href.includes(id)) ? (
-          <Box
-            css={{
-              display: 'grid',
-              placeItems: 'center',
-              size: '100%',
-              p: '$12',
-            }}
-          >
-            <a href={webinarInfoLink} target="_blank" rel="noreferrer">
-              <Image css={{ p: '$4', boxShadow: '$sm' }} alt="Event template" src={eventsImg} />
-            </a>
-          </Box>
-        ) : (
-          <FirstPersonDisplay />
-        )}
-      </Box>
-    </Fragment>
-  );
-};
-
-// Side pane shows smaller tiles
-export const GridSidePaneView = ({ peers }) => {
-  const headlessConfig = useAppConfig('headlessConfig');
-  const isHeadless = useIsHeadless();
-  return (
-    <Flex
-      direction="column"
-      css={{
-        flex: '0 0 20%',
-        mx: isHeadless && Number(headlessConfig?.tileOffset) === 0 ? '0' : '$8',
-        '@lg': {
-          flex: '0 0 25%',
-        },
-        '@md': {
-          flex: '1 1 0',
-        },
-      }}
-    >
-      <Flex css={{ flex: '1 1 0' }} align="end">
-        {peers && peers.length > 0 && <VideoList peers={peers} maxColCount={1} />}
-      </Flex>
-    </Flex>
-  );
-};

package/src/Prebuilt/components/hooks/useFeatures.js

@@ -1,22 +0,0 @@
-import { selectTemplateAppData, useHMSStore } from '@100mslive/react-sdk';
-
-export const useFeatures = () => {
-  let features = useHMSStore(selectTemplateAppData)?.features;
-  return features && typeof features === 'string' ? features.split(',') : undefined;
-};
-
-export const useIsFeatureEnabled = key => {
-  let features = useFeatures();
-  return features ? features.includes(key) : true;
-};
-
-export const useRolePreference = () => {
-  let preference = useHMSStore(selectTemplateAppData)?.rolePreference;
-  try {
-    preference = JSON.parse(preference || '{}');
-    return preference;
-  } catch (e) {
-    console.log('role preference parse error', e);
-    return undefined;
-  }
-};

package/src/Prebuilt/components/hooks/useNavigation.js

@@ -1,19 +0,0 @@
-import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { getRoutePrefix } from '../../common/utils';
-
-export const useNavigation = () => {
-  const navigate = useNavigate();
-  const navigation = useCallback(
-    path => {
-      const prefix = getRoutePrefix();
-      let route = path;
-      if (prefix && !path.startsWith(prefix)) {
-        route = `${prefix}${path}`;
-      }
-      navigate(route);
-    },
-    [navigate],
-  );
-  return navigation;
-};

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

@@ -1,20 +0,0 @@
-import { useEffect } from 'react';
-import { useSearchParam } from 'react-use';
-import { useSetUiSettings } from '../AppData/useUISettings';
-import { QUERY_PARAM_SKIP_PREVIEW, QUERY_PARAM_SKIP_PREVIEW_HEADFUL, UI_SETTINGS } from '../../common/constants';
-
-export const useSkipPreview = () => {
-  // way to skip preview for automated tests, beam recording and streaming
-  const beamInToken = useSearchParam('token') === 'beam_recording'; // old format to remove
-  // use this field to join directly for quick testing while in local
-  const directJoinHeadfulFromEnv = process.env.REACT_APP_HEADLESS_JOIN === 'true';
-  const directJoinHeadful = useSearchParam(QUERY_PARAM_SKIP_PREVIEW_HEADFUL) === 'true' || directJoinHeadfulFromEnv;
-  let skipPreview = useSearchParam(QUERY_PARAM_SKIP_PREVIEW) === 'true';
-  skipPreview = skipPreview || beamInToken || directJoinHeadful;
-  const [, setIsHeadless] = useSetUiSettings(UI_SETTINGS.isHeadless);
-  useEffect(() => {
-    !directJoinHeadful && setIsHeadless(skipPreview);
-  }, [directJoinHeadful, skipPreview]); //eslint-disable-line
-
-  return skipPreview;
-};

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import { InfoIcon } from '@100mslive/react-icons';
-import { Text } from '../../../';
-import { DialogRow } from '../../primitives/DialogContent';
-
-export const PdfErrorView = ({ isPDFUrlValid }) => {
-  return (
-    !isPDFUrlValid && (
-      <DialogRow
-        css={{
-          mt: '-$8',
-          color: '$alert_error_default',
-          justifyContent: 'start',
-        }}
-      >
-        <InfoIcon width="12px" height="12px" />
-        <Text
-          variant="caption"
-          css={{
-            pl: '$1',
-            color: '$alert_error_default',
-          }}
-        >
-          Please enter a valid PDF URL
-        </Text>
-      </DialogRow>
-    )
-  );
-};

package/src/Prebuilt/images/Logo.svg

@@ -1,8 +0,0 @@
-<svg width="32" height="42" viewBox="0 0 32 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="14.528" y="5.91187" width="2.944" height="30.176" fill="#538DFF"/>
-<rect x="22.2692" y="7.19727" width="2.944" height="30.176" transform="rotate(30 22.2692 7.19727)" fill="#538DFF"/>
-<rect x="31.088" y="19.5278" width="2.944" height="30.176" transform="rotate(90 31.088 19.5278)" fill="#538DFF"/>
-<rect x="29.8026" y="27.269" width="2.944" height="30.176" transform="rotate(120 29.8026 27.269)" fill="#538DFF"/>
-<rect x="24.8188" y="33.3304" width="2.944" height="30.176" transform="rotate(150 24.8188 33.3304)" fill="#538DFF"/>
-<rect x="28.3306" y="12.181" width="2.944" height="30.176" transform="rotate(60 28.3306 12.181)" fill="#538DFF"/>
-</svg>