@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Prebuilt/components/Preview/PreviewForm.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
-import { useRecordingStreaming } from '@100mslive/react-sdk';
-import { GoLiveIcon } from '@100mslive/react-icons';
-import { Button, config as cssConfig, Flex, Input, styled } from '../../..';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
-// @ts-ignore: No implicit Any
-import { PreviewSettings } from './PreviewJoin';
-
-const PreviewForm = ({
-  name,
-  disabled,
-  onChange,
-  onJoin,
-  enableJoin,
-  cannotPublishVideo = false,
-  cannotPublishAudio = false,
-}: {
-  name: string;
-  disabled?: boolean;
-  onChange: (name: string) => void;
-  onJoin: () => void;
-  enableJoin: boolean;
-  cannotPublishVideo: boolean;
-  cannotPublishAudio: boolean;
-}) => {
-  const formSubmit = (e: React.SyntheticEvent) => {
-    e.preventDefault();
-  };
-  const isMobile = useMedia(cssConfig.media.md);
-  const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = useRecordingStreaming();
-
-  const layout = useRoomLayout();
-  const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};
-
-  const showGoLive =
-    joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE &&
-    !isHLSRunning &&
-    !isRTMPRunning &&
-    !isHLSRecordingOn &&
-    !isBrowserRecordingOn;
-
-  return (
-    <Form
-      css={{ flexDirection: cannotPublishVideo ? 'column' : 'row', '@md': { flexDirection: 'row' } }}
-      onSubmit={formSubmit}
-    >
-      <Flex align="center" css={{ gap: '$8', w: '100%' }}>
-        <Input
-          required
-          id="name"
-          disabled={disabled}
-          css={{ w: '100%', boxSizing: 'border-box' }}
-          value={name}
-          onChange={e => onChange(e.target.value.trimStart())}
-          placeholder="Enter name"
-          autoFocus
-          autoComplete="name"
-          onKeyDown={e => {
-            if (e.key === 'Enter' && name.trim().length > 0) {
-              e.preventDefault();
-              if (isMobile) {
-                return;
-              }
-              onJoin();
-            }
-          }}
-        />
-        {cannotPublishAudio && cannotPublishVideo && !isMobile ? <PreviewSettings /> : null}
-      </Flex>
-
-      <Button type="submit" icon disabled={!name || !enableJoin} onClick={onJoin}>
-        {/* Conditions to show go live: The first broadcaster joins a streaming kit that is not live */}
-        {showGoLive ? <GoLiveIcon height={18} width={18} /> : null}
-        {showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label}
-      </Button>
-    </Form>
-  );
-};
-
-const Form = styled('form', {
-  width: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '$8',
-  mt: '$10',
-  mb: '$10',
-  '@md': {
-    gap: '$4',
-  },
-});
-
-export default PreviewForm;

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

@@ -1,292 +0,0 @@
-import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { useMeasure, useMedia } from 'react-use';
-import {
-  HMSRoomState,
-  selectAppData,
-  selectIsLocalVideoEnabled,
-  selectIsVBEnabled,
-  selectLocalPeer,
-  selectRoomState,
-  selectVideoTrackByID,
-  useAVToggle,
-  useAwayNotifications,
-  useHMSStore,
-  useParticipants,
-  usePreviewJoin,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
-import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Avatar, Box, config as cssConfig, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../..';
-import { AudioLevel } from '../../../AudioLevel';
-import { useHMSPrebuiltContext } from '../../AppContext';
-import IconButton from '../../IconButton';
-import SidePane from '../../layouts/SidePane';
-import { AudioVideoToggle, NoiseCancellation } from '../AudioVideoToggle';
-import Chip from '../Chip';
-import TileConnection from '../Connection/TileConnection';
-import FullPageProgress from '../FullPageProgress';
-// @ts-ignore: No implicit Any
-import { Logo } from '../Header/HeaderComponents';
-// @ts-ignore: No implicit Any
-import SettingsModal from '../Settings/SettingsModal';
-import { VBToggle } from '../VirtualBackground/VBToggle';
-import PreviewForm from './PreviewForm';
-import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import {
-  useAuthToken,
-  useUISettings,
-  // @ts-ignore: No implicit Any
-} from '../AppData/useUISettings';
-// @ts-ignore: No implicit Any
-import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-// @ts-ignore: No implicit Any
-import { calculateAvatarAndAttribBoxSize, getFormattedCount } from '../../common/utils';
-import { APP_DATA, UI_SETTINGS } from '../../common/constants';
-
-const getParticipantChipContent = (peerCount = 0) => {
-  if (peerCount === 0) {
-    return 'You are the first to join';
-  }
-  const formattedNum = getFormattedCount(peerCount);
-  return `${formattedNum} other${parseInt(formattedNum) === 1 ? '' : 's'} in the session`;
-};
-
-const useLocalTileAspectRatio = () => {
-  const localPeer = useHMSStore(selectLocalPeer);
-  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
-  const isMobile = useMedia(cssConfig.media.md);
-  let aspectRatio = 0;
-  if (videoTrack?.width && videoTrack?.height) {
-    aspectRatio = videoTrack.width / videoTrack.height;
-  } else {
-    aspectRatio = isMobile ? 9 / 16 : 16 / 9;
-  }
-  return aspectRatio.toString();
-};
-
-const PreviewJoin = ({
-  skipPreview,
-  initialName,
-  asRole,
-}: {
-  skipPreview?: boolean;
-  initialName?: string;
-  asRole?: string;
-}) => {
-  const [previewPreference, setPreviewPreference] = useUserPreferences(
-    UserPreferencesKeys.PREVIEW,
-    defaultPreviewPreference,
-  );
-  const { isStreamingOn } = useRecordingStreaming();
-  const authToken = useAuthToken();
-  const [name, setName] = useState(initialName || previewPreference.name);
-  const { toggleAudio, toggleVideo } = useAVToggle();
-  const [previewError, setPreviewError] = useState(false);
-  const { endpoints } = useHMSPrebuiltContext();
-  const { peerCount } = useParticipants();
-  const loadingEffects = useHMSStore(selectAppData(APP_DATA.loadingEffects));
-  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 { requestPermission } = useAwayNotifications();
-  const roomState = useHMSStore(selectRoomState);
-  const savePreferenceAndJoin = useCallback(() => {
-    setPreviewPreference({
-      name,
-    });
-    join();
-  }, [join, name, setPreviewPreference]);
-  const { elements = {} } = useRoomLayoutPreviewScreen();
-  const { preview_header: previewHeader = {}, virtual_background } = elements || {};
-  const aspectRatio = useLocalTileAspectRatio();
-
-  useEffect(() => {
-    if (authToken) {
-      if (skipPreview) {
-        savePreferenceAndJoin();
-      } else {
-        preview().then(() => requestPermission());
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [authToken, skipPreview]);
-
-  useEffect(() => {
-    if (initialName) {
-      setName(initialName);
-    }
-  }, [initialName]);
-
-  return roomState === HMSRoomState.Preview ? (
-    <Flex justify="center" css={{ size: '100%', position: 'relative' }}>
-      <Container css={{ h: '100%', pt: '$6', '@md': { justifyContent: 'space-between', pt: '$10' } }}>
-        {toggleVideo ? null : <Box />}
-        <Flex direction="column" justify="center" css={{ w: '100%', maxWidth: '600px', gap: '$8' }}>
-          <Logo />
-          <Text variant="h4" css={{ wordBreak: 'break-word', textAlign: 'center' }}>
-            {previewHeader.title}
-          </Text>
-          <Text
-            css={{ c: '$on_surface_medium', textAlign: 'center', maxWidth: '100%', wordWrap: 'break-word' }}
-            variant="sm"
-          >
-            {previewHeader.sub_title}
-          </Text>
-          <Flex justify="center" css={{ gap: '$4' }}>
-            {isStreamingOn ? (
-              <Chip
-                content="LIVE"
-                backgroundColor="$alert_error_default"
-                textColor="#FFF"
-                icon={<Box css={{ h: '$sm', w: '$sm', backgroundColor: '$on_primary_high', borderRadius: '$round' }} />}
-              />
-            ) : null}
-            <Chip content={getParticipantChipContent(peerCount)} hideIfNoContent />
-          </Flex>
-        </Flex>
-        {toggleVideo ? <PreviewTile name={name} error={previewError} /> : null}
-        <Box css={{ w: '100%', maxWidth: `${Math.max(parseFloat(aspectRatio), 1) * 340}px` }}>
-          <PreviewControls hideSettings={!toggleVideo && !toggleAudio} vbEnabled={!!virtual_background} />
-          <PreviewForm
-            name={name}
-            disabled={!!initialName}
-            onChange={setName}
-            enableJoin={enableJoin && !loadingEffects}
-            onJoin={savePreferenceAndJoin}
-            cannotPublishVideo={!toggleVideo}
-            cannotPublishAudio={!toggleAudio}
-          />
-        </Box>
-      </Container>
-      <Box css={{ position: 'absolute', right: '0', top: 0, height: '100%', overflow: 'hidden' }}>
-        <SidePane />
-      </Box>
-    </Flex>
-  ) : (
-    <FullPageProgress />
-  );
-};
-
-const Container = styled('div', {
-  width: '100%',
-  ...flexCenter,
-  flexDirection: 'column',
-  px: '$10',
-});
-
-export const PreviewTile = ({ name, error }: { name: string; error?: boolean }) => {
-  const localPeer = useHMSStore(selectLocalPeer);
-  const { isLocalAudioEnabled, toggleAudio } = useAVToggle();
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
-  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
-  const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);
-  const track = useHMSStore(trackSelector);
-  const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
-  const aspectRatio = useLocalTileAspectRatio();
-  const [ref, { width: calculatedWidth, height: calculatedHeight }] = useMeasure<HTMLDivElement>();
-  const [avatarSize, attribBoxSize] = useMemo(
-    () => calculateAvatarAndAttribBoxSize(calculatedWidth, calculatedHeight),
-    [calculatedWidth, calculatedHeight],
-  );
-
-  return (
-    <StyledVideoTile.Container
-      ref={ref}
-      css={{
-        bg: '$surface_default',
-        aspectRatio,
-        height: 'min(340px, 70vh)',
-        width: 'auto',
-        maxWidth: '600px',
-        overflow: 'clip',
-        mt: '$10',
-        '@md': {
-          mt: 0,
-          width: 'min(220px, 70vw)',
-          maxWidth: '100%',
-          my: '$4',
-        },
-      }}
-    >
-      {localPeer ? (
-        <>
-          <TileConnection name="" peerId={localPeer.id} hideLabel={false} />
-          <Video
-            mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}
-            trackId={localPeer.videoTrack}
-            data-testid="preview_tile"
-          />
-
-          {!isVideoOn ? (
-            <StyledVideoTile.AvatarContainer>
-              <Avatar name={name} data-testid="preview_avatar_tile" size={avatarSize} />
-            </StyledVideoTile.AvatarContainer>
-          ) : null}
-        </>
-      ) : null}
-      {!localPeer && !error ? <FullPageProgress /> : null}
-
-      {showMuteIcon ? (
-        <StyledVideoTile.AudioIndicator size={attribBoxSize}>
-          <MicOffIcon />
-        </StyledVideoTile.AudioIndicator>
-      ) : (
-        <StyledVideoTile.AudioIndicator size={attribBoxSize}>
-          <AudioLevel trackId={localPeer?.audioTrack} />
-        </StyledVideoTile.AudioIndicator>
-      )}
-    </StyledVideoTile.Container>
-  );
-};
-
-export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boolean; vbEnabled: boolean }) => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const isVBEnabledForUser = useHMSStore(selectIsVBEnabled);
-  return (
-    <Flex
-      justify={hideSettings && isMobile ? 'center' : 'between'}
-      css={{
-        width: '100%',
-        mt: '$6',
-      }}
-    >
-      <Flex css={{ gap: '$4' }}>
-        <AudioVideoToggle />
-        {vbEnabled && isVBEnabledForUser ? <VBToggle /> : null}
-      </Flex>
-      <Flex align="center" gap="1">
-        {isMobile && <NoiseCancellation iconOnly />}
-        {!hideSettings ? <PreviewSettings /> : null}
-      </Flex>
-    </Flex>
-  );
-};
-
-export const PreviewSettings = React.memo(() => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Fragment>
-      <IconButton data-testid="preview_setting_btn" css={{ flexShrink: 0 }} onClick={() => setOpen(value => !value)}>
-        <SettingsIcon />
-      </IconButton>
-      {open && <SettingsModal open={open} onOpenChange={setOpen} />}
-    </Fragment>
-  );
-});
-
-export default PreviewJoin;

package/src/Prebuilt/components/Preview/PreviewScreen.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { useSearchParam } from 'react-use';
-import { Flex } from '../../..';
-import { useHMSPrebuiltContext } from '../../AppContext';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
-import FullPageProgress from '../FullPageProgress';
-import PreviewJoin from './PreviewJoin';
-import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { useAuthToken } from '../AppData/useUISettings';
-import { QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
-
-export const PreviewScreen = () => {
-  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const skipPreview = !isPreviewScreenEnabled;
-  const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);
-  const { userName } = useHMSPrebuiltContext();
-  const initialName = userName || (skipPreview ? 'Beam' : '');
-  const authToken = useAuthToken();
-  const roomLayout = useRoomLayout();
-  const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
-
-  return (
-    <Flex direction="column" css={{ size: '100%' }}>
-      <Flex
-        css={{ flex: '1 1 0', position: 'relative', overflowY: 'auto', color: '$primary_default' }}
-        justify="center"
-        align="center"
-      >
-        {authToken && Object.keys(previewHeader).length > 0 ? (
-          <PreviewJoin initialName={initialName} skipPreview={skipPreview} asRole={previewAsRole ?? undefined} />
-        ) : (
-          <FullPageProgress />
-        )}
-      </Flex>
-    </Flex>
-  );
-};

package/src/Prebuilt/components/PreviousRoleInMetadata.tsx

@@ -1,20 +0,0 @@
-import { useEffect } from 'react';
-import { selectLocalPeerRoleName, useHMSVanillaStore } from '@100mslive/react-sdk';
-import { useMyMetadata } from './hooks/useMetadata';
-
-export const PreviousRoleInMetadata = () => {
-  const vanillaStore = useHMSVanillaStore();
-  const { updateMetaData } = useMyMetadata();
-
-  useEffect(() => {
-    let previousRole = vanillaStore.getState(selectLocalPeerRoleName);
-    const unsubscribe = vanillaStore.subscribe(currentRole => {
-      if (previousRole !== currentRole && currentRole) {
-        updateMetaData({ prevRole: previousRole });
-        previousRole = currentRole;
-      }
-    }, selectLocalPeerRoleName);
-    return unsubscribe;
-  }, [vanillaStore]); //eslint-disable-line
-  return null;
-};

package/src/Prebuilt/components/RaiseHand.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { HandIcon, HandRaiseSlashedIcon } from '@100mslive/react-icons';
-import { CSS } from '../../Theme';
-import { Tooltip } from '../../Tooltip';
-// @ts-ignore: No implicit Any
-import IconButton from '../IconButton';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useMyMetadata } from './hooks/useMetadata';
-
-export const RaiseHand = ({ css }: { css?: CSS }) => {
-  const { isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { elements } = useRoomLayoutConferencingScreen();
-
-  if (!elements.hand_raise) {
-    return null;
-  }
-
-  return (
-    <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton
-        data-testid="hand_raise_btn"
-        css={css}
-        active={!isHandRaised}
-        onClick={async () => await toggleHandRaise()}
-      >
-        {isHandRaised ? <HandRaiseSlashedIcon /> : <HandIcon />}
-      </IconButton>
-    </Tooltip>
-  );
-};

package/src/Prebuilt/components/RemoveParticipant.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { HMSPeerID, selectLocalPeerID, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { PeopleRemoveIcon } from '@100mslive/react-icons';
-// @ts-ignore: No implicit Any
-import { ToastManager } from './Toast/ToastManager';
-import { Dropdown } from '../../Dropdown';
-import { Text } from '../../Text';
-
-export const RemoveParticipant = ({ peerId }: { peerId: HMSPeerID }) => {
-  const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const actions = useHMSActions();
-
-  if (peerId === localPeerId || !canRemoveOthers) {
-    return null;
-  }
-  return (
-    <Dropdown.Item
-      css={{ color: '$alert_error_default', bg: '$surface_default' }}
-      onClick={async () => {
-        try {
-          await actions.removePeer(peerId, '');
-        } catch (error) {
-          const ex = error as Error;
-          ToastManager.addToast({ title: ex.message, variant: 'error' });
-        }
-      }}
-    >
-      <PeopleRemoveIcon />
-      <Text variant="sm" css={{ ml: '$4', color: 'inherit', fontWeight: '$semiBold' }}>
-        Remove Participant
-      </Text>
-    </Dropdown.Item>
-  );
-};