Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

revert: lazy load #3332

Merged
merged 2 commits into from
Oct 22, 2024
Merged

revert: lazy load #3332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3376986
revert: lazy load
raviteja83 Oct 22, 2024
9f6fa7d
fix: remove suspense usage
raviteja83 Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions packages/roomkit-react/src/Prebuilt/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@ import {
import { AppData } from './components/AppData/AppData';
// @ts-ignore: No implicit Any
import AuthToken from './components/AuthToken';
import { ConferenceScreen } from './components/ConferenceScreen';
// @ts-ignore: No implicit Any
import { ErrorBoundary } from './components/ErrorBoundary';
// @ts-ignore: No implicit Any
import { Init } from './components/init/Init';
// @ts-ignore: No implicit Any
import { KeyboardHandler } from './components/Input/KeyboardInputManager';
import { LeaveScreen } from './components/LeaveScreen';
import { MwebLandscapePrompt } from './components/MwebLandscapePrompt';
import { Notifications } from './components/Notifications';
import { PIPProvider } from './components/PIP/PIPProvider';
Expand Down Expand Up @@ -48,12 +50,6 @@ import {
import { FeatureFlags } from './services/FeatureFlags';
// @ts-ignore: No implicit Any
import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
const LeaveScreen = React.lazy(() =>
import('./components/LeaveScreen').then(module => ({ default: module.LeaveScreen })),
);
const ConferenceScreen = React.lazy(() =>
import('./components/ConferenceScreen').then(module => ({ default: module.ConferenceScreen })),
);

export type HMSPrebuiltOptions = {
userName?: string;
Expand Down
20 changes: 8 additions & 12 deletions packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { MutableRefObject, Suspense, useCallback, useRef } from 'react';
import React, { MutableRefObject, useCallback, useRef } from 'react';
import { useMedia } from 'react-use';
import { VariableSizeList } from 'react-window';
import { selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store';
Expand All @@ -8,6 +8,10 @@ import { ChevronDownIcon } from '@100mslive/react-icons';
import { Button } from '../../../Button';
import { Box, Flex } from '../../../Layout';
import { config as cssConfig } from '../../../Theme';
// @ts-ignore: No implicit Any
import { EmojiReaction } from '../EmojiReaction';
import { MoreSettings } from '../MoreSettings/MoreSettings';
import { RaiseHand } from '../RaiseHand';
import { ChatBody } from './ChatBody';
import { ChatFooter } from './ChatFooter';
import { ChatBlocked, ChatPaused } from './ChatStates';
Expand All @@ -17,12 +21,6 @@ import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLay
import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants';
const MoreSettings = React.lazy(() =>
import('../MoreSettings/MoreSettings').then(module => ({ default: module.MoreSettings })),
);
const RaiseHand = React.lazy(() => import('../RaiseHand').then(module => ({ default: module.RaiseHand })));
// @ts-ignore: No implicit any
const EmojiReaction = React.lazy(() => import('../EmojiReaction').then(module => ({ default: module.EmojiReaction })));

export const Chat = () => {
const { elements, screenType } = useRoomLayoutConferencingScreen();
Expand Down Expand Up @@ -67,10 +65,10 @@ export const Chat = () => {
<ChatPaused />
<ChatBlocked />
{streaming && (!isChatEnabled || isLocalPeerBlacklisted) && (
<Suspense fallback={<></>}>
<>
<RaiseHand css={{ bg: '$surface_default' }} />
<MoreSettings elements={elements} screenType={screenType} />
</Suspense>
</>
)}
</Flex>
{isMobile && elements?.chat?.is_overlay && !streaming ? <PinnedMessage /> : null}
Expand Down Expand Up @@ -131,9 +129,7 @@ export const Chat = () => {
.otherwise(() => ({})),
}}
>
<Suspense fallback={<></>}>
<EmojiReaction />
</Suspense>
<EmojiReaction />
</Box>
)}
</Flex>
Expand Down
73 changes: 30 additions & 43 deletions packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Suspense, useEffect, useMemo, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
import {
selectLocalPeerID,
Expand All @@ -9,22 +9,15 @@ import {
useHMSStore,
useHMSVanillaStore,
} from '@100mslive/react-sdk';
import FullPageProgress from '../FullPageProgress';
import { EqualProminence } from './EqualProminence';
import { RoleProminence } from './RoleProminence';
import { ScreenshareLayout } from './ScreenshareLayout';
import { WhiteboardLayout } from './WhiteboardLayout';
// @ts-ignore: No implicit Any
import { usePinnedTrack, useSetAppDataByKey } from '../AppData/useUISettings';
import { VideoTileContext } from '../hooks/useVideoTileLayout';
import PeersSorter from '../../common/PeersSorter';
import { APP_DATA } from '../../common/constants';
const RoleProminence = React.lazy(() =>
import('./RoleProminence').then(module => ({ default: module.RoleProminence })),
);
const ScreenshareLayout = React.lazy(() =>
import('./ScreenshareLayout').then(module => ({ default: module.ScreenshareLayout })),
);
const WhiteboardLayout = React.lazy(() =>
import('./WhiteboardLayout').then(module => ({ default: module.WhiteboardLayout })),
);

export type TileCustomisationProps = {
hide_participant_name_on_tile: boolean;
Expand Down Expand Up @@ -114,44 +107,38 @@ export const GridLayout = ({

if (peerSharing) {
return (
<Suspense fallback={<FullPageProgress />}>
<VideoTileContext.Provider value={tileLayout}>
<ScreenshareLayout
peers={sortedPeers}
onPageSize={setPageSize}
onPageChange={setMainPage}
edgeToEdge={edge_to_edge}
/>
</VideoTileContext.Provider>
</Suspense>
<VideoTileContext.Provider value={tileLayout}>
<ScreenshareLayout
peers={sortedPeers}
onPageSize={setPageSize}
onPageChange={setMainPage}
edgeToEdge={edge_to_edge}
/>
</VideoTileContext.Provider>
);
} else if (whiteboard?.open) {
return (
<Suspense fallback={<FullPageProgress />}>
<VideoTileContext.Provider value={tileLayout}>
<WhiteboardLayout
peers={sortedPeers}
onPageSize={setPageSize}
onPageChange={setMainPage}
edgeToEdge={edge_to_edge}
/>
</VideoTileContext.Provider>
</Suspense>
<VideoTileContext.Provider value={tileLayout}>
<WhiteboardLayout
peers={sortedPeers}
onPageSize={setPageSize}
onPageChange={setMainPage}
edgeToEdge={edge_to_edge}
/>
</VideoTileContext.Provider>
);
} else if (isRoleProminence) {
return (
<Suspense fallback={<FullPageProgress />}>
<VideoTileContext.Provider value={tileLayout}>
<RoleProminence
peers={sortedPeers}
onPageSize={setPageSize}
onPageChange={setMainPage}
prominentRoles={prominentRoles}
isInsetEnabled={isInsetEnabled}
edgeToEdge={edge_to_edge}
/>
</VideoTileContext.Provider>
</Suspense>
<VideoTileContext.Provider value={tileLayout}>
<RoleProminence
peers={sortedPeers}
onPageSize={setPageSize}
onPageChange={setMainPage}
prominentRoles={prominentRoles}
isInsetEnabled={isInsetEnabled}
edgeToEdge={edge_to_edge}
/>
</VideoTileContext.Provider>
);
}
return (
Expand Down
18 changes: 6 additions & 12 deletions packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import React, { Suspense, useEffect } from 'react';
import React, { useEffect } from 'react';
import { useMedia } from 'react-use';
import { match } from 'ts-pattern';
import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
import { Polls } from '../components/Polls/Polls';
import { RoomDetailsPane } from '../components/RoomDetails/RoomDetailsPane';
import { LayoutMode } from '../components/Settings/LayoutSettings';
import { SidePaneTabs } from '../components/SidePaneTabs';
import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
import VideoTile from '../components/VideoTile';
import { VBPicker } from '../components/VirtualBackground/VBPicker';
import { Flex } from '../../Layout';
import { config as cssConfig, styled } from '../../Theme';
// @ts-ignore: No implicit Any
Expand All @@ -18,16 +22,6 @@ import {
import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
import { translateAcross } from '../../utils';
import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants';
const SidePaneTabs = React.lazy(() =>
import('../components/SidePaneTabs').then(module => ({ default: module.SidePaneTabs })),
);
const Polls = React.lazy(() => import('../components/Polls/Polls').then(module => ({ default: module.Polls })));
const RoomDetailsPane = React.lazy(() =>
import('../components/RoomDetails/RoomDetailsPane').then(module => ({ default: module.RoomDetailsPane })),
);
const VBPicker = React.lazy(() =>
import('../components/VirtualBackground/VBPicker').then(module => ({ default: module.VBPicker })),
);

const Wrapper = styled('div', {
w: '$100',
Expand Down Expand Up @@ -239,7 +233,7 @@ const SidePane = ({
{...tileLayout}
/>
)}
<Suspense fallback={<></>}>{SidepaneComponent}</Suspense>
{SidepaneComponent}
</Flex>
);
};
Expand Down
133 changes: 64 additions & 69 deletions packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Suspense, useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { ControlPosition } from 'react-draggable';
import { useMedia } from 'react-use';
import {
Expand All @@ -15,24 +15,23 @@ import {
useHMSStore,
} from '@100mslive/react-sdk';
import { PeopleAddIcon, ShareScreenIcon } from '@100mslive/react-icons';
import FullPageProgress from '../components/FullPageProgress';
import { GridLayout } from '../components/VideoLayouts/GridLayout';
import { Box, Flex } from '../../Layout';
import { config } from '../../Theme';
// @ts-ignore: No implicit Any
import { EmbedView } from './EmbedView';
// @ts-ignore: No implicit Any
import HLSView from './HLSView';
// @ts-ignore: No implicit Any
import { PDFView } from './PDFView';
import SidePane from './SidePane';
import { WaitingView } from './WaitingView';
import { CaptionsViewer } from '../plugins/CaptionsViewer';
// @ts-ignore: No implicit Any
import { usePDFConfig, useUrlToEmbed } from '../components/AppData/useUISettings';
import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
import { useLandscapeHLSStream, useMobileHLSStream, useWaitingRoomInfo } from '../common/hooks';
import { SESSION_STORE_KEY } from '../common/constants';
// @ts-ignore: No implicit Any
const HLSView = React.lazy(() => import('./HLSView'));
// @ts-ignore: No implicit Any
const EmbedView = React.lazy(() => import('./EmbedView').then(module => ({ default: module.EmbedView })));
// @ts-ignore: No implicit Any
const PDFView = React.lazy(() => import('./PDFView').then(module => ({ default: module.PDFView })));
const WaitingView = React.lazy(() => import('./WaitingView').then(module => ({ default: module.WaitingView })));

export const VideoStreamingSection = ({
screenType,
Expand Down Expand Up @@ -89,59 +88,57 @@ export const VideoStreamingSection = ({
.with({ isMobileHLSStream: true }, () => 'column')
.otherwise(() => 'row')}
>
<Suspense fallback={<FullPageProgress />}>
{match({
screenType,
isNotAllowedToPublish,
isScreenOnlyPublishParams,
hasSubscribedRolePublishing,
isSharingScreen,
pdfAnnotatorActive,
urlToIframe,
})
.with(
{
screenType: 'hls_live_streaming',
},
() => <HLSView />,
)
.when(
({ isNotAllowedToPublish, hasSubscribedRolePublishing }) =>
isNotAllowedToPublish && !hasSubscribedRolePublishing,
() => (
<WaitingView
title="Waiting for Host to join"
subtitle="Sit back and relax"
icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
/>
),
)
.when(
({ isScreenOnlyPublishParams, isSharingScreen, hasSubscribedRolePublishing }) =>
isScreenOnlyPublishParams && !isSharingScreen && !hasSubscribedRolePublishing,
() => (
<WaitingView
title="Ready to present"
subtitle="Select the Screenshare button to start presenting"
icon={<ShareScreenIcon width="56px" height="56px" style={{ color: 'white' }} />}
/>
),
)
.when(
({ pdfAnnotatorActive }) => !!pdfAnnotatorActive,
() => <PDFView />,
)
.when(
({ urlToIframe }) => !!urlToIframe,
() => <EmbedView />,
)
{match({
screenType,
isNotAllowedToPublish,
isScreenOnlyPublishParams,
hasSubscribedRolePublishing,
isSharingScreen,
pdfAnnotatorActive,
urlToIframe,
})
.with(
{
screenType: 'hls_live_streaming',
},
() => <HLSView />,
)
.when(
({ isNotAllowedToPublish, hasSubscribedRolePublishing }) =>
isNotAllowedToPublish && !hasSubscribedRolePublishing,
() => (
<WaitingView
title="Waiting for Host to join"
subtitle="Sit back and relax"
icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
/>
),
)
.when(
({ isScreenOnlyPublishParams, isSharingScreen, hasSubscribedRolePublishing }) =>
isScreenOnlyPublishParams && !isSharingScreen && !hasSubscribedRolePublishing,
() => (
<WaitingView
title="Ready to present"
subtitle="Select the Screenshare button to start presenting"
icon={<ShareScreenIcon width="56px" height="56px" style={{ color: 'white' }} />}
/>
),
)
.when(
({ pdfAnnotatorActive }) => !!pdfAnnotatorActive,
() => <PDFView />,
)
.when(
({ urlToIframe }) => !!urlToIframe,
() => <EmbedView />,
)

.otherwise(() => {
// @ts-ignore
return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
})}
<CaptionsViewer setDefaultPosition={setCaptionPosition} defaultPosition={captionPosition} />
</Suspense>
.otherwise(() => {
// @ts-ignore
return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
})}
<CaptionsViewer setDefaultPosition={setCaptionPosition} defaultPosition={captionPosition} />
<Box
css={{
flex: match({ isLandscapeHLSStream, isMobileHLSStream })
Expand All @@ -155,14 +152,12 @@ export const VideoStreamingSection = ({
overflowY: 'clip',
}}
>
<Suspense fallback={<></>}>
<SidePane
screenType={screenType}
// @ts-ignore
tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
hideControls={hideControls}
/>
</Suspense>
<SidePane
screenType={screenType}
// @ts-ignore
tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
hideControls={hideControls}
/>
</Box>
</Flex>
);
Expand Down
Loading