@100mslive/roomkit-react 0.1.4-alpha.0 → 0.1.4

package/src/Prebuilt/components/Footer/ConferencingFooter.jsx

@@ -1,101 +0,0 @@
-import React, { Fragment, Suspense, useState } from 'react';
-import { useMedia } from 'react-use';
-import { selectIsAllowedToPublish, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
-import { MusicIcon } from '@100mslive/react-icons';
-import { config as cssConfig, Flex, Footer as AppFooter, Tooltip } from '../../../';
-import IconButton from '../../IconButton';
-import { AudioVideoToggle } from '../AudioVideoToggle';
-import { EmojiReaction } from '../EmojiReaction';
-import { LeaveRoom } from '../LeaveRoom';
-import MetaActions from '../MetaActions';
-import { MoreSettings } from '../MoreSettings/MoreSettings';
-import { PIP } from '../PIP';
-import { ScreenshareToggle } from '../ScreenShare';
-import { ScreenShareHintModal } from '../ScreenshareHintModal';
-import { ChatToggle } from './ChatToggle';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { isScreenshareSupported } from '../../common/utils';
-import { FeatureFlags } from '../../services/FeatureFlags';
-import { FEATURE_LIST } from '../../common/constants';
-
-const TranscriptionButton = React.lazy(() => import('../../plugins/transcription'));
-const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
-
-const ScreenshareAudio = () => {
-  const {
-    amIScreenSharing,
-    screenShareVideoTrackId: video,
-    screenShareAudioTrackId: audio,
-    toggleScreenShare,
-  } = useScreenShare();
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const isAudioScreenshare = amIScreenSharing && !video && !!audio;
-  const [showModal, setShowModal] = useState(false);
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.AUDIO_ONLY_SCREENSHARE);
-  if (!isFeatureEnabled || !isAllowedToPublish.screen || !isScreenshareSupported()) {
-    return null;
-  }
-  return (
-    <Fragment>
-      <Tooltip title={`${!isAudioScreenshare ? 'Start' : 'Stop'} audio sharing`} key="shareAudio">
-        <IconButton
-          active={!isAudioScreenshare}
-          onClick={() => {
-            if (amIScreenSharing) {
-              toggleScreenShare();
-            } else {
-              setShowModal(true);
-            }
-          }}
-          data-testid="screenshare_audio"
-        >
-          <MusicIcon />
-        </IconButton>
-      </Tooltip>
-      {showModal && <ScreenShareHintModal onClose={() => setShowModal(false)} />}
-    </Fragment>
-  );
-};
-
-export const ConferencingFooter = () => {
-  const isMobile = useMedia(cssConfig.media.md);
-  return (
-    <AppFooter.Root>
-      <AppFooter.Left>
-        <ScreenshareAudio />
-        <Suspense fallback="">
-          <VirtualBackground />
-        </Suspense>
-        {FeatureFlags.enableTranscription ? <TranscriptionButton /> : null}
-        <Flex
-          align="center"
-          css={{
-            display: 'none',
-            '@md': {
-              display: 'flex',
-              gap: '$8',
-            },
-          }}
-        >
-          {isMobile && <EmojiReaction />}
-          <MetaActions isMobile />
-        </Flex>
-      </AppFooter.Left>
-      <AppFooter.Center>
-        <AudioVideoToggle />
-        <ScreenshareToggle />
-        <PIP />
-        <MoreSettings />
-        <Flex align="center" css={{ display: 'none', '@md': { display: 'flex' } }}>
-          <ChatToggle />
-        </Flex>
-        <LeaveRoom />
-      </AppFooter.Center>
-      <AppFooter.Right>
-        {!isMobile && <EmojiReaction />}
-        <MetaActions />
-        <ChatToggle />
-      </AppFooter.Right>
-    </AppFooter.Root>
-  );
-};

package/src/Prebuilt/components/Footer/StreamingFooter.jsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { Box, Flex, Footer as AppFooter } from '../../../';
-import { AudioVideoToggle } from '../AudioVideoToggle';
-import { EmojiReaction } from '../EmojiReaction';
-import { StreamActions } from '../Header/StreamActions';
-import { LeaveRoom } from '../LeaveRoom';
-import MetaActions from '../MetaActions';
-import { MoreSettings } from '../MoreSettings/MoreSettings';
-import { PIP } from '../PIP';
-import { ScreenshareToggle } from '../ScreenShare';
-import { ChatToggle } from './ChatToggle';
-
-export const StreamingFooter = () => {
-  return (
-    <AppFooter.Root
-      css={{
-        flexWrap: 'nowrap',
-        '@md': {
-          justifyContent: 'center',
-        },
-      }}
-    >
-      <AppFooter.Left
-        css={{
-          '@md': {
-            w: 'unset',
-            p: '0',
-          },
-        }}
-      >
-        <AudioVideoToggle />
-      </AppFooter.Left>
-      <AppFooter.Center
-        css={{
-          '@md': {
-            w: 'unset',
-          },
-        }}
-      >
-        <ScreenshareToggle css={{ '@sm': { display: 'none' } }} />
-        <Box css={{ '@md': { display: 'none' } }}>
-          <PIP />
-        </Box>
-        <Box
-          css={{
-            display: 'none',
-            '@md': {
-              display: 'flex',
-              alignItems: 'center',
-              mx: '$4',
-            },
-          }}
-        >
-          <StreamActions />
-        </Box>
-        <MoreSettings />
-        <Box css={{ '@md': { display: 'none' } }}>
-          <LeaveRoom />
-        </Box>
-        <Flex align="center" css={{ display: 'none', '@md': { display: 'flex' } }}>
-          <ChatToggle />
-        </Flex>
-      </AppFooter.Center>
-      <AppFooter.Right>
-        <EmojiReaction />
-        <MetaActions />
-        <ChatToggle />
-      </AppFooter.Right>
-    </AppFooter.Root>
-  );
-};

package/src/Prebuilt/components/Footer.jsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ConferencingFooter } from './Footer/ConferencingFooter';
-import { StreamingFooter } from './Footer/StreamingFooter';
-import { isStreamingKit } from '../common/utils';
-
-export const Footer = () => {
-  return isStreamingKit() ? <StreamingFooter /> : <ConferencingFooter />;
-};

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

@@ -1,67 +0,0 @@
-import React, { useMemo } from 'react';
-import { useMedia } from 'react-use';
-import {
-  selectLocalPeerID,
-  selectLocalPeerRoleName,
-  selectPermissions,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { ArrowRightIcon, CheckIcon, PersonIcon } from '@100mslive/react-icons';
-import { config, Dropdown, Text } from '../../../';
-import { ToastManager } from '../Toast/ToastManager';
-import { useAppLayout } from '../AppData/useAppLayout';
-import { useFilteredRoles } from '../../common/hooks';
-import { arrayIntersection } from '../../common/utils';
-
-export const ChangeSelfRole = ({ onClick }) => {
-  const roles = useFilteredRoles();
-  const permissions = useHMSStore(selectPermissions);
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const hmsActions = useHMSActions();
-  const hideTriggerItem = useMedia(config.media.sm);
-  const selfRoleChangeTo = useAppLayout('selfRoleChangeTo');
-  const availableSelfChangeRoles = useMemo(() => arrayIntersection(selfRoleChangeTo, roles), [roles, selfRoleChangeTo]);
-
-  if (!permissions.changeRole) {
-    return null;
-  }
-  return hideTriggerItem ? (
-    <Dropdown.Item onClick={onClick}>
-      <PersonIcon />
-      <Text variant="sm" css={{ mx: '$4' }}>
-        Change My Role
-      </Text>
-    </Dropdown.Item>
-  ) : (
-    <Dropdown.SubMenu>
-      <Dropdown.TriggerItem data-testid="change_my_role_btn">
-        <PersonIcon />
-        <Text variant="sm" css={{ flex: '1 1 0', mx: '$4' }}>
-          Change My Role
-        </Text>
-        <ArrowRightIcon />
-      </Dropdown.TriggerItem>
-      <Dropdown.SubMenuContent sideOffset={8} alignOffset={-5} css={{ py: '$0', '@md': { w: '$64' } }}>
-        {availableSelfChangeRoles.map(role => (
-          <Dropdown.Item
-            key={role}
-            css={{ justifyContent: 'space-between' }}
-            onClick={async () => {
-              try {
-                await hmsActions.changeRole(localPeerId, role, true);
-              } catch (error) {
-                ToastManager.addToast({ title: error.message });
-              }
-            }}
-            data-testid={'change_to_role_' + role}
-          >
-            <Text variant="sm">{role}</Text>
-            {localPeerRole === role && <CheckIcon width={16} height={16} />}
-          </Dropdown.Item>
-        ))}
-      </Dropdown.SubMenuContent>
-    </Dropdown.SubMenu>
-  );
-};

package/src/Prebuilt/components/TileMenu.jsx

@@ -1,268 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import {
-  selectLocalPeerID,
-  selectPermissions,
-  selectSessionStore,
-  selectTemplateAppData,
-  selectTrackByID,
-  selectVideoTrackByPeerID,
-  useCustomEvent,
-  useHMSActions,
-  useHMSStore,
-  useRemoteAVToggle,
-} from '@100mslive/react-sdk';
-import {
-  HorizontalMenuIcon,
-  MicOffIcon,
-  MicOnIcon,
-  PinIcon,
-  RemoveUserIcon,
-  ShareScreenIcon,
-  SpeakerIcon,
-  StarIcon,
-  VideoOffIcon,
-  VideoOnIcon,
-} from '@100mslive/react-icons';
-import { ToastManager } from './Toast/ToastManager';
-import { Box, Flex } from '../../Layout';
-import { Slider } from '../../Slider';
-import { Text } from '../../Text';
-import { StyledMenuTile } from '../../TileMenu';
-import { useSetAppDataByKey } from './AppData/useUISettings';
-import { useDropdownList } from './hooks/useDropdownList';
-import { useDropdownSelection } from './hooks/useDropdownSelection';
-import { useIsFeatureEnabled } from './hooks/useFeatures';
-import { APP_DATA, FEATURE_LIST, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../common/constants';
-
-const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
-  trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId));
-
-const SpotlightActions = ({ peerId }) => {
-  const hmsActions = useHMSActions();
-  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
-  const isTileSpotlighted = spotlightPeerId === peerId;
-
-  const setSpotlightPeerId = peer =>
-    hmsActions.sessionStore
-      .set(SESSION_STORE_KEY.SPOTLIGHT, peer)
-      .catch(err => ToastManager.addToast({ title: err.description }));
-
-  return (
-    <StyledMenuTile.ItemButton onClick={() => (isTileSpotlighted ? setSpotlightPeerId() : setSpotlightPeerId(peerId))}>
-      <StarIcon />
-      <span>{isTileSpotlighted ? 'Remove from Spotlight' : 'Spotlight Tile for everyone'}</span>
-    </StyledMenuTile.ItemButton>
-  );
-};
-
-const PinActions = ({ audioTrackID, videoTrackID }) => {
-  const [pinnedTrackId, setPinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
-
-  const isTilePinned = isSameTile({
-    trackId: pinnedTrackId,
-    videoTrackID,
-    audioTrackID,
-  });
-
-  return (
-    <>
-      <StyledMenuTile.ItemButton
-        onClick={() => (isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID))}
-      >
-        <PinIcon />
-        <span>{isTilePinned ? 'Unpin' : 'Pin'} Tile for myself</span>
-      </StyledMenuTile.ItemButton>
-    </>
-  );
-};
-
-/**
- * Taking peerID as peer won't necesarilly have tracks
- */
-const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false }) => {
-  const [open, setOpen] = useState(false);
-  const actions = useHMSActions();
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const isLocal = localPeerID === peerID;
-  const { removeOthers, changeRole } = useHMSStore(selectPermissions);
-  const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
-    audioTrackID,
-    videoTrackID,
-  );
-  const showSpotlight = changeRole;
-  const { sendEvent } = useCustomEvent({
-    type: REMOTE_STOP_SCREENSHARE_TYPE,
-  });
-
-  const isPrimaryVideoTrack = useHMSStore(selectVideoTrackByPeerID(peerID))?.id === videoTrackID;
-  const uiMode = useHMSStore(selectTemplateAppData).uiMode;
-  const isInset = uiMode === 'inset';
-
-  const isPinEnabled = useIsFeatureEnabled(FEATURE_LIST.PIN_TILE);
-  const showPinAction = isPinEnabled && (audioTrackID || (videoTrackID && isPrimaryVideoTrack)) && !isInset;
-
-  const track = useHMSStore(selectTrackByID(videoTrackID));
-  const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled;
-
-  useDropdownList({ open, name: 'TileMenu' });
-
-  if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
-    return null;
-  }
-
-  if (isInset && isLocal) {
-    return null;
-  }
-
-  return (
-    <StyledMenuTile.Root open={open} onOpenChange={setOpen}>
-      <StyledMenuTile.Trigger data-testid="participant_menu_btn" onClick={e => e.stopPropagation()}>
-        <HorizontalMenuIcon />
-      </StyledMenuTile.Trigger>
-      <StyledMenuTile.Content side="top" align="end">
-        {isLocal ? (
-          showPinAction && (
-            <>
-              <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />
-              {showSpotlight && <SpotlightActions peerId={peerID} />}
-            </>
-          )
-        ) : (
-          <>
-            {toggleVideo ? (
-              <StyledMenuTile.ItemButton
-                onClick={toggleVideo}
-                data-testid={isVideoEnabled ? 'mute_video_participant_btn' : 'unmute_video_participant_btn'}
-              >
-                {isVideoEnabled ? <VideoOnIcon /> : <VideoOffIcon />}
-                <span>{isVideoEnabled ? 'Mute' : 'Request Unmute'}</span>
-              </StyledMenuTile.ItemButton>
-            ) : null}
-            {toggleAudio ? (
-              <StyledMenuTile.ItemButton
-                onClick={toggleAudio}
-                data-testid={isVideoEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
-              >
-                {isAudioEnabled ? <MicOnIcon /> : <MicOffIcon />}
-                <span>{isAudioEnabled ? 'Mute' : 'Request Unmute'}</span>
-              </StyledMenuTile.ItemButton>
-            ) : null}
-            {audioTrackID ? (
-              <StyledMenuTile.VolumeItem data-testid="participant_volume_slider">
-                <Flex align="center" gap={1}>
-                  <SpeakerIcon />
-                  <Box as="span" css={{ ml: '$4' }}>
-                    Volume ({volume})
-                  </Box>
-                </Flex>
-                <Slider css={{ my: '0.5rem' }} step={5} value={[volume]} onValueChange={e => setVolume(e[0])} />
-              </StyledMenuTile.VolumeItem>
-            ) : null}
-            {showPinAction && (
-              <>
-                <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />
-                {showSpotlight && <SpotlightActions peerId={peerID} />}
-              </>
-            )}
-            <SimulcastLayers trackId={videoTrackID} />
-            {removeOthers ? (
-              <StyledMenuTile.RemoveItem
-                onClick={async () => {
-                  try {
-                    await actions.removePeer(peerID, '');
-                  } catch (error) {
-                    // TODO: Toast here
-                  }
-                }}
-                data-testid="remove_participant_btn"
-              >
-                <RemoveUserIcon />
-                <span>Remove Participant</span>
-              </StyledMenuTile.RemoveItem>
-            ) : null}
-
-            {removeOthers && isScreenshare ? (
-              <StyledMenuTile.RemoveItem onClick={() => sendEvent({})}>
-                <ShareScreenIcon />
-                <span>Stop Screenshare</span>
-              </StyledMenuTile.RemoveItem>
-            ) : null}
-          </>
-        )}
-      </StyledMenuTile.Content>
-    </StyledMenuTile.Root>
-  );
-};
-
-const SimulcastLayers = ({ trackId }) => {
-  const track = useHMSStore(selectTrackByID(trackId));
-  const actions = useHMSActions();
-  const bg = useDropdownSelection();
-  if (!track?.layerDefinitions?.length || track.degraded || !track.enabled) {
-    return null;
-  }
-  const currentLayer = track.layerDefinitions.find(layer => layer.layer === track.layer);
-  return (
-    <Fragment>
-      <StyledMenuTile.ItemButton css={{ color: '$on_surface_medium', cursor: 'default' }}>
-        Select maximum resolution
-      </StyledMenuTile.ItemButton>
-      {track.layerDefinitions.map(layer => {
-        return (
-          <StyledMenuTile.ItemButton
-            key={layer.layer}
-            onClick={async () => {
-              await actions.setPreferredLayer(trackId, layer.layer);
-            }}
-            css={{
-              justifyContent: 'space-between',
-              bg: track.preferredLayer === layer.layer ? bg : undefined,
-              '&:hover': {
-                bg: track.preferredLayer === layer.layer ? bg : undefined,
-              },
-            }}
-          >
-            <Text
-              as="span"
-              css={{
-                textTransform: 'capitalize',
-                mr: '$2',
-                fontWeight: track.preferredLayer === layer.layer ? '$semiBold' : '$regular',
-              }}
-            >
-              {layer.layer}
-            </Text>
-            <Text as="span" variant="xs" css={{ color: '$on_surface_medium' }}>
-              {layer.resolution.width}x{layer.resolution.height}
-            </Text>
-          </StyledMenuTile.ItemButton>
-        );
-      })}
-      <StyledMenuTile.ItemButton>
-        <Text as="span" variant="xs" css={{ color: '$on_surface_medium' }}>
-          Currently streaming:
-          <Text
-            as="span"
-            variant="xs"
-            css={{
-              fontWeight: '$semiBold',
-              textTransform: 'capitalize',
-              color: '$on_surface_medium',
-              ml: '$2',
-            }}
-          >
-            {currentLayer ? (
-              <>
-                {track.layer} ({currentLayer.resolution.width}x{currentLayer.resolution.height})
-              </>
-            ) : (
-              '-'
-            )}
-          </Text>
-        </Text>
-      </StyledMenuTile.ItemButton>
-    </Fragment>
-  );
-};
-
-export default TileMenu;

package/src/Prebuilt/index.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import type { Screens, Theme, Typography } from '@100mslive/types-prebuilt';
-
-export declare const HMSPrebuilt: React.FC<{
-  roomCode: string;
-  logo?: {
-    url: string;
-  };
-  themes?: Theme[];
-  typography?: Typography;
-  screens?: Screens;
-  options?: {
-    endpoints?: {
-      tokenByRoomIdRole?: string;
-      tokenByRoomCode?: string;
-      init?: string;
-      roomLayout?: string;
-    };
-  };
-}>;

package/src/Prebuilt/index.js

@@ -1,2 +0,0 @@
-import { HMSPrebuilt } from './App.jsx';
-export { HMSPrebuilt };