@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.10

package/src/Prebuilt/layouts/PDFView.jsx

@@ -1,67 +0,0 @@
-import React, { useEffect } from 'react';
-import { usePDFShare } from '@100mslive/react-sdk';
-import { ToastManager } from '../components/Toast/ToastManager';
-import { Box } from '../../Layout';
-import { EmbedScreenShareView } from './EmbedView';
-import { usePDFConfig, useResetPDFConfig } from '../components/AppData/useUISettings';
-
-/**
- * PDFView is responsible for rendering the PDF iframe and managing the screen sharing functionality.
- */
-export const PDFView = () => {
-  const pdfConfig = usePDFConfig();
-  const resetConfig = useResetPDFConfig();
-  // need to send resetConfig to clear configuration, if stop screenshare occurs.
-  const { iframeRef, startPDFShare, isPDFShareInProgress } = usePDFShare(resetConfig);
-
-  useEffect(() => {
-    // no working in other useEffect, as return is called multiple time on state change
-    return () => {
-      resetConfig();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!isPDFShareInProgress && pdfConfig) {
-          await startPDFShare(pdfConfig);
-        }
-      } catch (err) {
-        resetConfig();
-        ToastManager.addToast({
-          title: `Error while sharing annotator ${err.message || ''}`,
-          variant: 'error',
-        });
-      }
-    })();
-  }, [isPDFShareInProgress, pdfConfig, resetConfig, startPDFShare]);
-  return (
-    <EmbedScreenShareView>
-      <Box
-        css={{
-          mx: '$8',
-          flex: '3 1 0',
-          '@lg': {
-            flex: '2 1 0',
-            display: 'flex',
-            alignItems: 'center',
-          },
-        }}
-      >
-        <iframe
-          title="Embed View"
-          ref={iframeRef}
-          style={{
-            width: '100%',
-            height: '100%',
-            border: 0,
-            borderRadius: '0.75rem',
-          }}
-          allow="autoplay; clipboard-write;"
-          referrerPolicy="no-referrer"
-        />
-      </Box>
-    </EmbedScreenShareView>
-  );
-};

package/src/Prebuilt/layouts/Sheet.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
-import { RoomDetailsSheet } from '../components/RoomDetails/RoomDetailsSheet';
-import { Box } from '../../Layout';
-import { APP_DATA, SHEET_OPTIONS } from '../common/constants';
-
-export const Sheet = () => {
-  const sheet = useHMSStore(selectAppData(APP_DATA.sheet));
-  let ViewComponent;
-  if (sheet === SHEET_OPTIONS.ROOM_DETAILS) {
-    ViewComponent = <RoomDetailsSheet />;
-  }
-  return <Box>{ViewComponent}</Box>;
-};

package/src/Prebuilt/layouts/SidePane.tsx

@@ -1,241 +0,0 @@
-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
-import { useSidepaneReset } from '../components/AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { useUISettings } from '../components/AppData/useUISettings';
-import {
-  useRoomLayoutConferencingScreen,
-  useRoomLayoutPreviewScreen,
-} from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
-import { translateAcross } from '../../utils';
-import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants';
-
-const Wrapper = styled('div', {
-  w: '$100',
-  h: '100%',
-  p: '$10',
-  flex: '1 1 0',
-  background: '$surface_dim',
-  r: '$1',
-  position: 'relative',
-  '@lg': {
-    w: '100%',
-    h: '100%',
-    ml: 0,
-    right: 0,
-    position: 'fixed',
-    bottom: 0,
-    borderRadius: 0,
-    zIndex: 10,
-  },
-  '@md': {
-    p: '$6 $8',
-    animation: `${translateAcross({ yFrom: '100%' })} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-  },
-  variants: {
-    landscapeStream: {
-      true: {
-        '@lg': {
-          position: 'unset',
-          minHeight: '100%',
-        },
-      },
-    },
-    mobileStream: {
-      true: {
-        '@md': {
-          position: 'unset',
-        },
-      },
-    },
-    overlayChat: {
-      true: {
-        '@lg': {
-          maxHeight: '300px',
-          background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)',
-          position: 'fixed',
-          zIndex: 12,
-          bottom: 0,
-        },
-      },
-    },
-    roomDescription: {
-      true: {
-        overflowY: 'auto',
-      },
-    },
-    hideControls: {
-      true: {},
-    },
-    virtualBackground: {
-      true: {
-        maxHeight: '100%',
-        background: '$surface_dim',
-      },
-    },
-  },
-  compoundVariants: [
-    {
-      landscapeStream: true,
-      overlayChat: true,
-      css: {
-        position: 'unset',
-        height: '100%',
-        maxHeight: 'unset',
-        '@md': {
-          pb: 0,
-        },
-      },
-    },
-    {
-      mobileStream: true,
-      overlayChat: true,
-      css: {
-        position: 'unset',
-        height: '100%',
-        maxHeight: 'unset',
-      },
-    },
-    {
-      hideControls: false,
-      overlayChat: true,
-      css: {
-        pb: '$17',
-      },
-    },
-  ],
-});
-
-const SidePane = ({
-  tileProps,
-  hideControls = false,
-}: {
-  tileProps?: TileCustomisationProps;
-  hideControls?: boolean;
-}) => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
-  const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
-  const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
-  const { elements } = useRoomLayoutConferencingScreen();
-  const { elements: preview_elements } = useRoomLayoutPreviewScreen();
-  const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
-
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  const isMobileHLSStream = useMobileHLSStream();
-
-  const backgroundMedia = preview_elements?.virtual_background?.background_media?.length
-    ? preview_elements?.virtual_background?.background_media
-    : elements?.virtual_background?.background_media || [];
-
-  const tileLayout = {
-    hideParticipantNameOnTile: tileProps?.hide_participant_name_on_tile,
-    roundedVideoTile: tileProps?.rounded_video_tile,
-    hideAudioMuteOnTile: tileProps?.hide_audio_mute_on_tile,
-    hideMetadataOnTile: tileProps?.hide_metadata_on_tile,
-    objectFit: tileProps?.video_object_fit,
-  };
-  const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && elements?.chat?.is_overlay;
-  const commonProps = {
-    landscapeStream: isLandscapeHLSStream,
-    mobileStream: isMobileHLSStream,
-    hideControls,
-    overlayChat: !!elements?.chat?.is_overlay,
-    roomDescription: sidepane === SIDE_PANE_OPTIONS.ROOM_DETAILS,
-    virtualBackground: sidepane === SIDE_PANE_OPTIONS.VB,
-  };
-
-  const SidepaneComponent = match(sidepane)
-    .with(SIDE_PANE_OPTIONS.POLLS, () => (
-      <Wrapper
-        css={{
-          '@md': {
-            borderTopLeftRadius: '$2',
-            borderTopRightRadius: '$2',
-          },
-        }}
-        {...commonProps}
-      >
-        <Polls />
-      </Wrapper>
-    ))
-    .with(SIDE_PANE_OPTIONS.VB, () => (
-      <Wrapper css={{ p: '$10 $6 $10 $10' }} {...commonProps}>
-        <VBPicker backgroundMedia={backgroundMedia} />
-      </Wrapper>
-    ))
-    .with(SIDE_PANE_OPTIONS.CHAT, SIDE_PANE_OPTIONS.PARTICIPANTS, () => (
-      <Wrapper {...commonProps} overlayChat={mwebStreamingChat}>
-        <SidePaneTabs active={sidepane} hideTab={isMobileHLSStream || isLandscapeHLSStream} />
-      </Wrapper>
-    ))
-    .with(SIDE_PANE_OPTIONS.ROOM_DETAILS, () => (
-      <Wrapper {...commonProps}>
-        <RoomDetailsPane />
-      </Wrapper>
-    ))
-    .otherwise(() => {
-      return null;
-    });
-
-  const resetSidePane = useSidepaneReset();
-
-  useEffect(() => {
-    return () => {
-      resetSidePane();
-    };
-  }, [resetSidePane]);
-
-  if (!SidepaneComponent && !trackId) {
-    return null;
-  }
-
-  return (
-    <Flex
-      direction="column"
-      justify="center"
-      css={{
-        w: match({ isMobileHLSStream, isLandscapeHLSStream })
-          .with({ isLandscapeHLSStream: true }, () => '340px')
-          .with({ isMobileHLSStream: true }, () => '100%')
-          .otherwise(() => '$100'),
-        h: '100%',
-        flexShrink: 0,
-        gap: '$4',
-        position: 'relative',
-        '&:empty': { display: 'none' },
-        '@md': {
-          position: 'absolute',
-          zIndex: 12,
-        },
-      }}
-    >
-      {trackId && layoutMode === LayoutMode.GALLERY && (
-        <VideoTile
-          peerId={activeScreensharePeerId}
-          trackId={trackId}
-          width="100%"
-          height={225}
-          rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
-          {...tileLayout}
-        />
-      )}
-      {SidepaneComponent}
-    </Flex>
-  );
-};
-
-export default SidePane;

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -1,164 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { ControlPosition } from 'react-draggable';
-import { useMedia } from 'react-use';
-import {
-  ConferencingScreen,
-  DefaultConferencingScreen_Elements,
-  HLSLiveStreamingScreen_Elements,
-} from '@100mslive/types-prebuilt';
-import { match } from 'ts-pattern';
-import {
-  selectIsConnectedToRoom,
-  selectIsLocalScreenShared,
-  selectLocalPeerRoleName,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { PeopleAddIcon, ShareScreenIcon } from '@100mslive/react-icons';
-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';
-
-export const VideoStreamingSection = ({
-  screenType,
-  elements,
-  hideControls = false,
-}: {
-  screenType: keyof ConferencingScreen;
-  elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
-  hideControls: boolean;
-}) => {
-  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const isSharingScreen = useHMSStore(selectIsLocalScreenShared);
-
-  const hmsActions = useHMSActions();
-  const urlToIframe = useUrlToEmbed();
-  const pdfAnnotatorActive = usePDFConfig();
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  const isMobile = useMedia(config.media.md);
-  const [captionPosition, setCaptionPosition] = useState<ControlPosition>({ x: isMobile ? 0 : -200, y: 0 });
-  useCloseScreenshareWhiteboard();
-
-  const { isNotAllowedToPublish, isScreenOnlyPublishParams, hasSubscribedRolePublishing } = useWaitingRoomInfo();
-
-  useEffect(() => {
-    if (!isConnected) {
-      return;
-    }
-    hmsActions.sessionStore.observe([
-      SESSION_STORE_KEY.PINNED_MESSAGES,
-      SESSION_STORE_KEY.SPOTLIGHT,
-      SESSION_STORE_KEY.CHAT_STATE,
-      SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST,
-      SESSION_STORE_KEY.CHAT_PEER_BLACKLIST,
-    ]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isConnected, hmsActions]);
-
-  if (!localPeerRoleName) {
-    // we don't know the role yet to decide how to render UI
-    return null;
-  }
-
-  return (
-    <Flex
-      css={{
-        size: '100%',
-        position: 'relative',
-        gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4',
-      }}
-      direction={match<Record<string, boolean>, 'row' | 'column'>({ isLandscapeHLSStream, isMobileHLSStream })
-        .with({ isLandscapeHLSStream: true }, () => 'row')
-        .with({ isMobileHLSStream: true }, () => 'column')
-        .otherwise(() => 'row')}
-    >
-      {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} />
-      <Box
-        css={{
-          flex: match({ isLandscapeHLSStream, isMobileHLSStream })
-            .with({ isLandscapeHLSStream: true }, () => '1  1 0')
-            .with({ isMobileHLSStream: true }, () => '2 1 0')
-            .otherwise(() => undefined),
-          position: 'relative',
-          height: !isMobileHLSStream ? '100%' : undefined,
-          maxHeight: '100%',
-          '&:empty': { display: 'none' },
-          overflowY: 'clip',
-        }}
-      >
-        <SidePane
-          screenType={screenType}
-          // @ts-ignore
-          tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
-          hideControls={hideControls}
-        />
-      </Box>
-    </Flex>
-  );
-};

package/src/Prebuilt/layouts/WaitingView.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-
-export const WaitingView = React.memo(
-  ({ icon, title, subtitle }: { icon: React.ReactNode; title: string; subtitle: string }) => {
-    return (
-      <Flex
-        align="center"
-        direction="column"
-        css={{
-          textAlign: 'center',
-          margin: 'auto',
-          h: '100%',
-          justifyContent: 'center',
-          gap: '$8',
-        }}
-      >
-        <Box
-          css={{
-            backgroundColor: '$surface_default',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '$4',
-            size: '$20',
-            r: '$round',
-            justifyContent: 'center',
-          }}
-        >
-          {icon}
-        </Box>
-        <Flex
-          direction="column"
-          css={{
-            p: '$1',
-            gap: '$4',
-          }}
-        >
-          <Text variant="h4" css={{ '@md': { fontSize: '$lg', color: '$on_surface_high' } }}>
-            {title}
-          </Text>
-          <Text
-            variant="body1"
-            css={{ fontWeight: '$regular', color: '$on_surface_medium', '@md': { fontSize: '$md' } }}
-          >
-            {subtitle}
-          </Text>
-        </Flex>
-      </Flex>
-    );
-  },
-);