@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/Preview/PreviewJoin.jsx

@@ -0,0 +1,196 @@
+import React, { Fragment, Suspense, useCallback, useEffect, useState } from 'react';
+import {
+  selectIsLocalVideoEnabled,
+  selectLocalPeer,
+  selectVideoTrackByID,
+  useAVToggle,
+  useHMSStore,
+  usePreviewJoin,
+} from '@100mslive/react-sdk';
+import { SettingsIcon } from '@100mslive/react-icons';
+import {
+  Avatar,
+  Flex,
+  flexCenter,
+  Loading,
+  styled,
+  StyledVideoTile,
+  Text,
+  textEllipsis,
+  useBorderAudioLevel,
+  useTheme,
+  Video,
+} from '../../../';
+import { useHMSPrebuiltContext } from '../../AppContext';
+import IconButton from '../../IconButton';
+import { AudioVideoToggle } from '../AudioVideoToggle';
+import TileConnection from '../Connection/TileConnection';
+import SettingsModal from '../Settings/SettingsModal';
+import PreviewName from './PreviewName';
+import { useAuthToken, useUISettings } from '../AppData/useUISettings';
+import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
+import { UI_SETTINGS } from '../../common/constants';
+
+const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
+
+const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
+  const [previewPreference, setPreviewPreference] = useUserPreferences(
+    UserPreferencesKeys.PREVIEW,
+    defaultPreviewPreference,
+  );
+  const authToken = useAuthToken();
+  const [name, setName] = useState(initialName || previewPreference.name);
+  const { isLocalAudioEnabled, isLocalVideoEnabled } = useAVToggle();
+  const [previewError, setPreviewError] = useState(false);
+  const { endPoints } = useHMSPrebuiltContext();
+  const { enableJoin, preview, join } = usePreviewJoin({
+    name,
+    token: authToken,
+    initEndpoint: endPoints?.init,
+    initialSettings: {
+      isAudioMuted: skipPreview || previewPreference.isAudioMuted,
+      isVideoMuted: skipPreview || previewPreference.isVideoMuted,
+      speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
+    },
+    captureNetworkQualityInPreview: true,
+    handleError: (_, method) => {
+      if (method === 'preview') {
+        setPreviewError(true);
+      }
+    },
+    asRole,
+  });
+  const savePreferenceAndJoin = useCallback(() => {
+    setPreviewPreference({
+      name,
+      isAudioMuted: !isLocalAudioEnabled,
+      isVideoMuted: !isLocalVideoEnabled,
+    });
+    join();
+    onJoin && onJoin();
+  }, [join, isLocalAudioEnabled, isLocalVideoEnabled, name, setPreviewPreference, onJoin]);
+  useEffect(() => {
+    if (authToken) {
+      if (skipPreview) {
+        savePreferenceAndJoin();
+      } else {
+        preview();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [authToken, skipPreview]);
+  return (
+    <Container>
+      <Text variant="h4" css={{ wordBreak: 'break-word', textAlign: 'center' }}>
+        Get Started
+      </Text>
+      <Text css={{ c: '$textMedEmp', my: '$6', textAlign: 'center' }} variant="body1">
+        Setup your audio and video before joining
+      </Text>
+      <Flex
+        align="center"
+        justify="center"
+        css={{
+          '@sm': { width: '100%' },
+          flexDirection: 'column',
+        }}
+      >
+        <PreviewTile name={name} error={previewError} />
+        <PreviewControls enableJoin={enableJoin} savePreferenceAndJoin={savePreferenceAndJoin} />
+        <PreviewName name={name} onChange={setName} enableJoin={enableJoin} onJoin={savePreferenceAndJoin} />
+      </Flex>
+    </Container>
+  );
+};
+
+const Container = styled('div', {
+  width: '100%',
+  ...flexCenter,
+  flexDirection: 'column',
+  px: '$10',
+});
+
+const PreviewTile = ({ name, error }) => {
+  const localPeer = useHMSStore(selectLocalPeer);
+  const borderAudioRef = useBorderAudioLevel(localPeer?.audioTrack);
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
+  const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);
+  const track = useHMSStore(trackSelector);
+
+  const {
+    aspectRatio: { width, height },
+  } = useTheme();
+  return (
+    <StyledVideoTile.Container
+      css={{
+        bg: '$surfaceDefault',
+        aspectRatio: width / height,
+        width: 'unset',
+        height: 'min(360px, 60vh)',
+        mt: '$12',
+        '@sm': {
+          height: 'unset',
+          width: 'min(360px, 100%)',
+          maxWidth: '100%',
+        },
+      }}
+      ref={borderAudioRef}
+    >
+      {localPeer ? (
+        <>
+          <TileConnection name={name} peerId={localPeer.id} hideLabel={true} />
+          <Video
+            mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}
+            trackId={localPeer.videoTrack}
+            data-testid="preview_tile"
+          />
+          {!isVideoOn ? (
+            <StyledVideoTile.AvatarContainer>
+              <Avatar name={name} data-testid="preview_avatar_tile" />
+              <Text css={{ ...textEllipsis('75%') }} variant="body2">
+                {name}
+              </Text>
+            </StyledVideoTile.AvatarContainer>
+          ) : null}
+        </>
+      ) : !error ? (
+        <Loading size={100} />
+      ) : null}
+    </StyledVideoTile.Container>
+  );
+};
+
+const PreviewControls = () => {
+  return (
+    <Flex
+      justify="between"
+      css={{
+        width: '100%',
+        mt: '$8',
+      }}
+    >
+      <Flex css={{ gap: '$4' }}>
+        <AudioVideoToggle compact />
+        <Suspense fallback="">
+          <VirtualBackground />
+        </Suspense>
+      </Flex>
+      <PreviewSettings />
+    </Flex>
+  );
+};
+
+const PreviewSettings = React.memo(() => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Fragment>
+      <IconButton data-testid="preview_setting_btn" onClick={() => setOpen(value => !value)}>
+        <SettingsIcon />
+      </IconButton>
+      {open && <SettingsModal open={open} onOpenChange={setOpen} />}
+    </Fragment>
+  );
+});
+
+export default PreviewJoin;

package/src/Prebuilt/components/Preview/PreviewName.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, Input, styled } from '../../../';
+import { isStreamingKit } from '../../common/utils';
+
+const PreviewName = ({ name, onChange, onJoin, enableJoin }) => {
+  const formSubmit = e => {
+    e.preventDefault();
+  };
+  return (
+    <Form onSubmit={formSubmit}>
+      <Input
+        required
+        id="name"
+        css={{ w: '100%' }}
+        value={name}
+        onChange={e => onChange(e.target.value)}
+        placeholder="Enter your name"
+        autoFocus
+        autoComplete="name"
+      />
+      <Button type="submit" disabled={!name || !enableJoin} onClick={onJoin}>
+        {isStreamingKit() ? 'Join Studio' : 'Join Room'}
+      </Button>
+    </Form>
+  );
+};
+
+const Form = styled('form', {
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$4',
+  mt: '$10',
+  mb: '$10',
+});
+
+export default PreviewName;

package/src/Prebuilt/components/RoleChangeModal.jsx

@@ -0,0 +1,185 @@
+import React, { forwardRef, useRef, useState } from 'react';
+import { selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Checkbox } from '../../Checkbox';
+import { Dropdown } from '../../Dropdown';
+import { Label } from '../../Label';
+import { Box, Flex } from '../../Layout';
+import { Dialog } from '../../Modal';
+import { Text } from '../../Text';
+import { Tooltip } from '../../Tooltip';
+import { useDropdownSelection } from './hooks/useDropdownSelection';
+import { useFilteredRoles } from '../common/hooks';
+import { textEllipsis } from '../../utils';
+
+const PeerName = forwardRef(({ children, maxWidth, ...rest }, ref) => (
+  <Text
+    {...rest}
+    ref={ref}
+    as="strong"
+    variant="body2"
+    css={{
+      ...textEllipsis(maxWidth),
+      display: 'inline-block',
+      fontWeight: '$semiBold',
+      c: 'inherit',
+    }}
+  >
+    {children}
+  </Text>
+));
+
+export const RoleChangeModal = ({ peerId, onOpenChange }) => {
+  const peer = useHMSStore(selectPeerByID(peerId));
+  const roles = useFilteredRoles();
+  const [selectedRole, setRole] = useState(peer?.roleName);
+  const [requestPermission, setRequestPermission] = useState(true);
+  const hmsActions = useHMSActions();
+  const [open, setOpen] = useState(false);
+  const selectionBg = useDropdownSelection();
+  const [peerNameRef, setPeerNameRef] = useState();
+  const ref = useRef();
+  if (!peer) {
+    return null;
+  }
+
+  const peerNameMaxWidth = 200;
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
+          <Dialog.Title css={{ p: 0 }} asChild>
+            <Text as="h6" variant="h6">
+              Change Role
+            </Text>
+          </Dialog.Title>
+          <Dialog.Description asChild>
+            <Text
+              variant="body2"
+              css={{
+                mt: '$4',
+                mb: '$8',
+                c: '$textMedEmp',
+                display: 'flex',
+                flexWrap: 'wrap',
+                columnGap: '4px',
+              }}
+            >
+              Change the role of
+              {peerNameRef && peerNameRef.clientWidth === peerNameMaxWidth ? (
+                <Tooltip title={peer.name} side="top">
+                  <PeerName ref={setPeerNameRef} maxWidth={peerNameMaxWidth}>
+                    {peer.name}
+                  </PeerName>
+                </Tooltip>
+              ) : (
+                <PeerName ref={setPeerNameRef} maxWidth={peerNameMaxWidth}>
+                  {peer.name}
+                </PeerName>
+              )}
+              to
+            </Text>
+          </Dialog.Description>
+          <Flex
+            align="center"
+            css={{
+              w: '100%',
+              mb: '$10',
+            }}
+          >
+            <Box
+              css={{
+                position: 'relative',
+                flex: '1 1 0',
+                minWidth: 0,
+              }}
+            >
+              <Dropdown.Root open={open} onOpenChange={setOpen} css={{ width: '100%' }}>
+                <Dropdown.Trigger
+                  data-testid="open_role_selection_dropdown"
+                  asChild
+                  css={{
+                    border: '1px solid $borderLight',
+                    bg: '$surfaceLight',
+                    r: '$1',
+                    p: '$6 $9',
+                  }}
+                  ref={ref}
+                >
+                  <Flex align="center" justify="between" css={{ width: '100%' }}>
+                    <Text>{selectedRole}</Text>
+                    {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+                  </Flex>
+                </Dropdown.Trigger>
+                <Dropdown.Portal>
+                  <Dropdown.Content
+                    align="start"
+                    sideOffset={8}
+                    css={{ zIndex: 1000, width: ref.current?.clientWidth }}
+                  >
+                    {roles.map(role => {
+                      return (
+                        <Dropdown.Item
+                          data-testid={role}
+                          key={role}
+                          onSelect={() => setRole(role)}
+                          css={{
+                            px: '$9',
+                            bg: role === selectedRole ? selectionBg : undefined,
+                          }}
+                        >
+                          {role}
+                        </Dropdown.Item>
+                      );
+                    })}
+                  </Dropdown.Content>
+                </Dropdown.Portal>
+              </Dropdown.Root>
+            </Box>
+          </Flex>
+          {!peer.isLocal && (
+            <Flex justify="between" css={{ w: '100%', mb: '$10' }}>
+              <Label htmlFor="requestRoleChangePermission" css={{ cursor: 'pointer' }}>
+                Request Permission
+              </Label>
+              <Checkbox.Root
+                checked={requestPermission}
+                onCheckedChange={value => setRequestPermission(value)}
+                id="requestRoleChangePermission"
+                data-testid="force_role_change_checkbox"
+              >
+                <Checkbox.Indicator>
+                  <CheckIcon width={16} height={16} />
+                </Checkbox.Indicator>
+              </Checkbox.Root>
+            </Flex>
+          )}
+          <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
+            <Box css={{ width: '50%' }}>
+              <Dialog.Close css={{ width: '100%', p: '$4 $8' }} asChild>
+                <Button variant="standard" outlined css={{ width: '100%' }} data-testid="cancel_button">
+                  Cancel
+                </Button>
+              </Dialog.Close>
+            </Box>
+            <Box css={{ width: '50%' }}>
+              <Button
+                data-testid="change_button"
+                variant="primary"
+                css={{ width: '100%' }}
+                onClick={async () => {
+                  await hmsActions.changeRole(peerId, selectedRole, peer.isLocal ? true : !requestPermission);
+                  onOpenChange(false);
+                }}
+              >
+                Change
+              </Button>
+            </Box>
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

package/src/Prebuilt/components/RoleChangeRequestModal.jsx

@@ -0,0 +1,26 @@
+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/ScreenShare.jsx

@@ -0,0 +1,45 @@
+import React, { Fragment } from 'react';
+import { selectIsAllowedToPublish, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
+import { ShareScreenIcon } from '@100mslive/react-icons';
+import { ShareScreenOptions } from './pdfAnnotator/shareScreenOptions';
+import { Box, Flex } from '../../Layout';
+import { Tooltip } from '../../Tooltip';
+import { ScreenShareButton } from './ShareMenuIcon';
+import { useUISettings } from './AppData/useUISettings';
+import { isScreenshareSupported } from '../common/utils';
+import { UI_SETTINGS } from '../common/constants';
+
+export const ScreenshareToggle = ({ css = {} }) => {
+  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
+  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
+
+  const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = useScreenShare();
+  const isVideoScreenshare = amIScreenSharing && !!video;
+  if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <Flex direction="row">
+        <ScreenShareButton
+          variant="standard"
+          key="ShareScreen"
+          active={!isVideoScreenshare}
+          css={css}
+          disabled={isAudioOnly}
+          onClick={() => {
+            toggleScreenShare();
+          }}
+        >
+          <Tooltip title={`${!isVideoScreenshare ? 'Start' : 'Stop'} screen sharing`}>
+            <Box>
+              <ShareScreenIcon />
+            </Box>
+          </Tooltip>
+        </ScreenShareButton>
+        <ShareScreenOptions />
+      </Flex>
+    </Fragment>
+  );
+};

package/src/Prebuilt/components/ScreenshareDisplay.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useHMSActions } from '@100mslive/react-sdk';
+import { CrossIcon, ShareScreenIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Flex } from '../../Layout';
+import { Text } from '../../Text';
+
+export const ScreenshareDisplay = () => {
+  const hmsActions = useHMSActions();
+
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      justify="center"
+      css={{
+        position: 'relative',
+        overflow: 'hidden',
+        w: '37.5rem',
+        maxWidth: '80%',
+        h: '100%',
+        r: '$3',
+        m: '0 auto',
+        color: '$textPrimary',
+        bg: '$surfaceDefault',
+        textAlign: 'center',
+      }}
+    >
+      <ShareScreenIcon width={48} height={48} />
+      <Text variant="h5" css={{ m: '$8 0' }}>
+        You are sharing your screen
+      </Text>
+      <Button
+        variant="danger"
+        onClick={async () => {
+          await hmsActions.setScreenShareEnabled(false);
+        }}
+        data-testid="stop_screen_share_btn"
+      >
+        <CrossIcon width={18} height={18} />
+        &nbsp; Stop screen share
+      </Button>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/ScreenshareHintModal.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useHMSActions } from '@100mslive/react-sdk';
+import { Button } from '../../Button';
+import { Dialog } from '../../Modal';
+import { DialogContent, DialogRow } from '../primitives/DialogContent';
+
+export const ScreenShareHintModal = ({ onClose }) => {
+  const hmsActions = useHMSActions();
+  return (
+    <Dialog.Root defaultOpen onOpenChange={value => !value && onClose()}>
+      <DialogContent title="AudioOnly Screenshare">
+        <img
+          src="https://images.app.100ms.live/share-audio.png"
+          alt="AudioOnly Screenshare instructions"
+          width="100%"
+        />
+        <DialogRow justify="end">
+          <Button
+            variant="primary"
+            onClick={() => {
+              hmsActions
+                .setScreenShareEnabled(true, {
+                  audioOnly: true,
+                  displaySurface: 'browser',
+                })
+                .catch(console.error);
+              onClose();
+            }}
+            data-testid="audio_screenshare_continue"
+          >
+            Continue
+          </Button>
+        </DialogRow>
+      </DialogContent>
+    </Dialog.Root>
+  );
+};

package/src/Prebuilt/components/ScreenshareTile.jsx

@@ -0,0 +1,91 @@
+import React, { useRef, useState } from 'react';
+import { useFullscreen } from 'react-use';
+import screenfull from 'screenfull';
+import {
+  selectLocalPeerID,
+  selectPeerByID,
+  selectScreenShareAudioByPeerID,
+  selectScreenShareByPeerID,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
+import { VideoTileStats } from '../../Stats';
+import { Video } from '../../Video';
+import { StyledVideoTile } from '../../VideoTile';
+import { getVideoTileLabel } from './peerTileUtils';
+import TileMenu from './TileMenu';
+import { useIsHeadless, useUISettings } from './AppData/useUISettings';
+import { UI_SETTINGS } from '../common/constants';
+
+const labelStyles = {
+  position: 'unset',
+  width: '100%',
+  textAlign: 'center',
+  transform: 'none',
+  mt: '$2',
+  flexShrink: 0,
+};
+
+const Tile = ({ peerId, width = '100%', height = '100%' }) => {
+  const isLocal = useHMSStore(selectLocalPeerID) === peerId;
+  const track = useHMSStore(selectScreenShareByPeerID(peerId));
+  const peer = useHMSStore(selectPeerByID(peerId));
+  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
+  const isHeadless = useIsHeadless();
+  const [isMouseHovered, setIsMouseHovered] = useState(false);
+  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
+  const label = getVideoTileLabel({
+    peerName: peer.name,
+    isLocal: false,
+    track,
+  });
+  const fullscreenRef = useRef(null);
+  // fullscreen is for desired state
+  const [fullscreen, setFullscreen] = useState(false);
+  // isFullscreen is for true state
+  const isFullscreen = useFullscreen(fullscreenRef, fullscreen, {
+    onClose: () => setFullscreen(false),
+  });
+  const isFullScreenSupported = screenfull.isEnabled;
+  const audioTrack = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));
+  return (
+    <StyledVideoTile.Root css={{ width, height }} data-testid="screenshare_tile">
+      {peer ? (
+        <StyledVideoTile.Container
+          transparentBg
+          ref={fullscreenRef}
+          css={{ flexDirection: 'column' }}
+          onMouseEnter={() => setIsMouseHovered(true)}
+          onMouseLeave={() => {
+            setIsMouseHovered(false);
+          }}
+        >
+          {showStatsOnTiles ? (
+            <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
+          ) : null}
+          {isFullScreenSupported && !isHeadless ? (
+            <StyledVideoTile.FullScreenButton onClick={() => setFullscreen(!fullscreen)}>
+              {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
+            </StyledVideoTile.FullScreenButton>
+          ) : null}
+          {track ? (
+            <Video
+              screenShare={true}
+              mirror={peer.isLocal && track?.source === 'regular'}
+              attach={!isAudioOnly}
+              trackId={track.id}
+            />
+          ) : null}
+          <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>
+          {isMouseHovered && !isHeadless && !peer?.isLocal ? (
+            <TileMenu isScreenshare peerID={peer?.id} audioTrackID={audioTrack?.id} videoTrackID={track?.id} />
+          ) : null}
+        </StyledVideoTile.Container>
+      ) : null}
+    </StyledVideoTile.Root>
+  );
+};
+
+const ScreenshareTile = React.memo(Tile);
+
+export default ScreenshareTile;