@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/Header/ParticipantList.jsx

@@ -0,0 +1,337 @@
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { useDebounce, useMeasure } from 'react-use';
+import { FixedSizeList } from 'react-window';
+import {
+  selectAudioTrackByPeerID,
+  selectLocalPeerID,
+  selectPeerCount,
+  selectPeerMetadata,
+  selectPermissions,
+  useHMSActions,
+  useHMSStore,
+  useParticipants,
+} from '@100mslive/react-sdk';
+import {
+  ChangeRoleIcon,
+  CrossIcon,
+  HandRaiseIcon,
+  PeopleIcon,
+  RemoveUserIcon,
+  SearchIcon,
+  SpeakerIcon,
+  VerticalMenuIcon,
+} from '@100mslive/react-icons';
+import { Avatar, Box, Dropdown, Flex, Input, Slider, Text, textEllipsis } from '../../../';
+import IconButton from '../../IconButton';
+import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
+import { RoleChangeModal } from '../RoleChangeModal';
+import { ParticipantFilter } from './ParticipantFilter';
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+import { isInternalRole } from '../../common/utils';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const ParticipantList = () => {
+  const [filter, setFilter] = useState();
+  const { participants, isConnected, peerCount, rolesWithParticipants } = useParticipants(filter);
+  const [selectedPeerId, setSelectedPeerId] = useState(null);
+  const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const onSearch = useCallback(value => {
+    setFilter(filterValue => {
+      if (!filterValue) {
+        filterValue = {};
+      }
+      filterValue.search = value;
+      return { ...filterValue };
+    });
+  }, []);
+  if (peerCount === 0) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <Flex direction="column" css={{ size: '100%' }}>
+        <Flex align="center" css={{ w: '100%', mb: '$10' }}>
+          <Text css={{ fontWeight: '$semiBold', mr: '$4' }}>Participants</Text>
+          <ParticipantFilter
+            selection={filter}
+            onSelection={setFilter}
+            isConnected={isConnected}
+            roles={rolesWithParticipants}
+          />
+          <IconButton onClick={toggleSidepane} css={{ w: '$11', h: '$11', ml: 'auto' }}>
+            <CrossIcon />
+          </IconButton>
+        </Flex>
+        {!filter?.search && participants.length === 0 ? null : <ParticipantSearch onSearch={onSearch} />}
+        {participants.length === 0 && (
+          <Flex align="center" justify="center" css={{ w: '100%', p: '$8 0' }}>
+            <Text variant="sm">{!filter ? 'No participants' : 'No matching participants'}</Text>
+          </Flex>
+        )}
+        <VirtualizedParticipants
+          participants={participants}
+          isConnected={isConnected}
+          setSelectedPeerId={setSelectedPeerId}
+        />
+      </Flex>
+      {selectedPeerId && (
+        <RoleChangeModal
+          peerId={selectedPeerId}
+          onOpenChange={value => {
+            !value && setSelectedPeerId(null);
+          }}
+        />
+      )}
+    </Fragment>
+  );
+};
+
+export const ParticipantCount = () => {
+  const peerCount = useHMSStore(selectPeerCount);
+  const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  useEffect(() => {
+    if (isParticipantsOpen && peerCount === 0) {
+      toggleSidepane();
+    }
+  }, [isParticipantsOpen, peerCount, toggleSidepane]);
+
+  if (peerCount === 0) {
+    return null;
+  }
+  return (
+    <IconButton
+      css={{
+        w: 'auto',
+        p: '$4',
+        h: 'auto',
+      }}
+      onClick={() => {
+        if (peerCount > 0) {
+          toggleSidepane();
+        }
+      }}
+      active={!isParticipantsOpen}
+      data-testid="participant_list"
+    >
+      <PeopleIcon />
+      <Text variant="sm" css={{ mx: '$4', c: 'inherit' }}>
+        {peerCount}
+      </Text>
+    </IconButton>
+  );
+};
+
+function itemKey(index, data) {
+  return data.participants[index].id;
+}
+
+const VirtualizedParticipants = ({ participants, isConnected, setSelectedPeerId }) => {
+  const [ref, { width, height }] = useMeasure();
+  return (
+    <Box
+      ref={ref}
+      css={{
+        flex: '1 1 0',
+        mr: '-$10',
+      }}
+    >
+      <FixedSizeList
+        itemSize={68}
+        itemData={{ participants, isConnected, setSelectedPeerId }}
+        itemKey={itemKey}
+        itemCount={participants.length}
+        width={width}
+        height={height}
+      >
+        {VirtualisedParticipantListItem}
+      </FixedSizeList>
+    </Box>
+  );
+};
+
+const VirtualisedParticipantListItem = React.memo(({ style, index, data }) => {
+  return (
+    <div style={style} key={data.participants[index].id}>
+      <Participant
+        peer={data.participants[index]}
+        isConnected={data.isConnected}
+        setSelectedPeerId={data.setSelectedPeerId}
+      />
+    </div>
+  );
+});
+
+const Participant = ({ peer, isConnected, setSelectedPeerId }) => {
+  return (
+    <Fragment>
+      <Flex
+        key={peer.id}
+        css={{ w: '100%', py: '$4', pr: '$10' }}
+        align="center"
+        data-testid={'participant_' + peer.name}
+      >
+        <Avatar
+          name={peer.name}
+          css={{
+            position: 'unset',
+            transform: 'unset',
+            mr: '$8',
+            fontSize: '$sm',
+            size: '$12',
+            p: '$4',
+          }}
+        />
+        <Flex direction="column" css={{ flex: '1 1 0' }}>
+          <Text variant="md" css={{ ...textEllipsis(150), fontWeight: '$semiBold' }}>
+            {peer.name}
+          </Text>
+          <Text variant="sub2">{peer.roleName}</Text>
+        </Flex>
+        {isConnected && (
+          <ParticipantActions
+            peerId={peer.id}
+            role={peer.roleName}
+            onSettings={() => {
+              setSelectedPeerId(peer.id);
+            }}
+          />
+        )}
+      </Flex>
+    </Fragment>
+  );
+};
+
+/**
+ * shows settings to change for a participant like changing their role
+ */
+const ParticipantActions = React.memo(({ onSettings, peerId, role }) => {
+  const isHandRaised = useHMSStore(selectPeerMetadata(peerId))?.isHandRaised;
+  const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
+  const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const canChangeVolume = peerId !== localPeerId && audioTrack;
+  const shouldShowMoreActions = canChangeRole || canChangeVolume;
+
+  return (
+    <Flex align="center" css={{ flexShrink: 0 }}>
+      <ConnectionIndicator peerId={peerId} />
+      {isHandRaised && <HandRaiseIcon />}
+      {shouldShowMoreActions && !isInternalRole(role) && (
+        <ParticipantMoreActions onRoleChange={onSettings} peerId={peerId} role={role} />
+      )}
+    </Flex>
+  );
+});
+
+const ParticipantMoreActions = ({ onRoleChange, peerId }) => {
+  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore(selectPermissions);
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const isLocal = localPeerId === peerId;
+  const actions = useHMSActions();
+  const [open, setOpen] = useState(false);
+  return (
+    <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
+      <Dropdown.Trigger asChild data-testid="participant_more_actions" css={{ p: '$2', r: '$0' }} tabIndex={0}>
+        <Text>
+          <VerticalMenuIcon />
+        </Text>
+      </Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.Content align="end" sideOffset={8} css={{ w: '$64' }}>
+          {canChangeRole && (
+            <Dropdown.Item onClick={() => onRoleChange(peerId)}>
+              <ChangeRoleIcon />
+              <Text css={{ ml: '$4' }}>Change Role</Text>
+            </Dropdown.Item>
+          )}
+          <ParticipantVolume peerId={peerId} />
+          {!isLocal && canRemoveOthers && (
+            <Dropdown.Item
+              onClick={async () => {
+                try {
+                  await actions.removePeer(peerId, '');
+                } catch (error) {
+                  // TODO: Toast here
+                }
+              }}
+            >
+              <RemoveUserIcon />
+              <Text css={{ ml: '$4', color: '$error' }}>Remove Participant</Text>
+            </Dropdown.Item>
+          )}
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  );
+};
+
+const ParticipantVolume = ({ peerId }) => {
+  const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const hmsActions = useHMSActions();
+  // No volume control for local peer or non audio publishing role
+  if (peerId === localPeerId || !audioTrack) {
+    return null;
+  }
+
+  return (
+    <Dropdown.Item css={{ h: 'auto' }}>
+      <Flex direction="column" css={{ w: '100%' }}>
+        <Flex align="center">
+          <SpeakerIcon />
+          <Text css={{ ml: '$4' }}>Volume{audioTrack.volume ? `(${audioTrack.volume})` : ''}</Text>
+        </Flex>
+        <Slider
+          css={{ my: '0.5rem' }}
+          step={5}
+          value={[audioTrack.volume]}
+          onValueChange={e => {
+            hmsActions.setVolume(e[0], audioTrack?.id);
+          }}
+        />
+      </Flex>
+    </Dropdown.Item>
+  );
+};
+
+export const ParticipantSearch = ({ onSearch, placeholder }) => {
+  const [value, setValue] = React.useState('');
+  useDebounce(
+    () => {
+      onSearch(value);
+    },
+    300,
+    [value, onSearch],
+  );
+  return (
+    <Box css={{ p: '$4 0', my: '$8', position: 'relative' }}>
+      <Box
+        css={{
+          position: 'absolute',
+          left: '$4',
+          top: '$2',
+          transform: 'translateY(50%)',
+          color: '$textMedEmp',
+        }}
+      >
+        <SearchIcon />
+      </Box>
+      <Input
+        type="text"
+        placeholder={placeholder || 'Find what you are looking for'}
+        css={{ w: '100%', pl: '$14' }}
+        value={value}
+        onKeyDown={event => {
+          event.stopPropagation();
+        }}
+        onChange={event => {
+          setValue(event.currentTarget.value);
+        }}
+        autoComplete="off"
+        aria-autocomplete="none"
+      />
+    </Box>
+  );
+};

package/src/Prebuilt/components/Header/StreamActions.jsx

@@ -0,0 +1,225 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
+import {
+  selectAppData,
+  selectIsConnectedToRoom,
+  selectPermissions,
+  useHMSActions,
+  useHMSStore,
+  useRecordingStreaming,
+} from '@100mslive/react-sdk';
+import { RecordIcon, WrenchIcon } from '@100mslive/react-icons';
+import { Box, Button, config as cssConfig, Flex, Loading, Popover, Text, Tooltip } from '../../../';
+import GoLiveButton from '../GoLiveButton';
+import { ResolutionInput } from '../Streaming/ResolutionInput';
+import { getResolution } from '../Streaming/RTMPStreaming';
+import { ToastManager } from '../Toast/ToastManager';
+import { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';
+import { useSidepaneState, useSidepaneToggle } from '../AppData/useSidepane';
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION, SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const LiveStatus = () => {
+  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
+  if (!isHLSRunning && !isRTMPRunning) {
+    return null;
+  }
+  return (
+    <Flex align="center">
+      <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$error', mr: '$2' }} />
+      <Text>
+        Live
+        <Text as="span" css={{ '@md': { display: 'none' } }}>
+          &nbsp;with {isHLSRunning ? 'HLS' : 'RTMP'}
+        </Text>
+      </Text>
+    </Flex>
+  );
+};
+
+export const RecordingStatus = () => {
+  const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming();
+  const permissions = useHMSStore(selectPermissions);
+
+  if (
+    !isRecordingOn ||
+    // if only browser recording is enabled, stop recording is shown
+    // so no need to show this as it duplicates
+    [permissions?.browserRecording, !isServerRecordingOn, !isHLSRecordingOn, isBrowserRecordingOn].every(
+      value => !!value,
+    )
+  ) {
+    return null;
+  }
+  return (
+    <Tooltip
+      title={getRecordingText({
+        isBrowserRecordingOn,
+        isServerRecordingOn,
+        isHLSRecordingOn,
+      })}
+    >
+      <Box
+        css={{
+          color: '$error',
+        }}
+      >
+        <RecordIcon width={24} height={24} />
+      </Box>
+    </Tooltip>
+  );
+};
+
+const EndStream = () => {
+  const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
+  const sidePane = useSidepaneState();
+  useEffect(() => {
+    if (window && !sidePane) {
+      const userStartedStream = window.sessionStorage.getItem('userStartedStream');
+      if (userStartedStream === 'true') {
+        toggleStreaming();
+        window.sessionStorage.setItem('userStartedStream', '');
+      }
+    }
+  }, [sidePane, toggleStreaming]);
+
+  return (
+    <Button data-testid="end_stream" variant="danger" icon onClick={toggleStreaming}>
+      <WrenchIcon />
+      Manage Stream
+    </Button>
+  );
+};
+
+const StartRecording = () => {
+  const permissions = useHMSStore(selectPermissions);
+  const recordingUrl = useHMSStore(selectAppData(APP_DATA.recordingUrl));
+  const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
+  const [open, setOpen] = useState(false);
+  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
+  const hmsActions = useHMSActions();
+  if (!permissions?.browserRecording || isHLSRunning) {
+    return null;
+  }
+  if (isBrowserRecordingOn) {
+    return (
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Trigger asChild>
+          <Button variant="danger" data-testid="stop_recording" icon outlined onClick={() => setOpen(true)}>
+            <RecordIcon />
+            <Text as="span" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>
+              Stop Recording
+            </Text>
+          </Button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content align="end" sideOffset={8} css={{ w: '$64' }}>
+            <Text variant="body" css={{ color: '$textMedEmp' }}>
+              Are you sure you want to end the recording?
+            </Text>
+            <Button
+              data-testid="stop_recording_confirm"
+              variant="danger"
+              icon
+              css={{ ml: 'auto' }}
+              onClick={async () => {
+                try {
+                  await hmsActions.stopRTMPAndRecording();
+                } catch (error) {
+                  ToastManager.addToast({
+                    title: error.message,
+                    variant: 'error',
+                  });
+                }
+                setOpen(false);
+              }}
+            >
+              Stop
+            </Button>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    );
+  }
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <Button
+          data-testid="start_recording"
+          variant="standard"
+          icon
+          disabled={recordingStarted || isStreamingOn}
+          onClick={() => setOpen(true)}
+        >
+          {recordingStarted ? <Loading size={24} color="currentColor" /> : <RecordIcon />}
+          <Text as="span" css={{ '@md': { display: 'none' }, color: 'currentColor' }}>
+            {recordingStarted ? 'Starting' : 'Start'} Recording
+          </Text>
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content align="end" sideOffset={8} css={{ w: '$64' }}>
+        <ResolutionInput
+          testId="recording_resolution"
+          css={{ flexDirection: 'column', alignItems: 'start' }}
+          onResolutionChange={setResolution}
+        />
+        <Button
+          data-testid="start_recording_confirm"
+          variant="primary"
+          icon
+          css={{ ml: 'auto' }}
+          type="submit"
+          disabled={recordingStarted || isStreamingOn}
+          onClick={async () => {
+            try {
+              setRecordingState(true);
+              await hmsActions.startRTMPOrRecording({
+                meetingURL: recordingUrl,
+                resolution: getResolution(resolution),
+                record: true,
+              });
+            } catch (error) {
+              if (error.message.includes('stream already running')) {
+                ToastManager.addToast({
+                  title: 'Recording already running',
+                  variant: 'error',
+                });
+              } else {
+                ToastManager.addToast({
+                  title: error.message,
+                  variant: 'error',
+                });
+              }
+              setRecordingState(false);
+            }
+            setOpen(false);
+          }}
+        >
+          Start
+        </Button>
+      </Popover.Content>
+    </Popover.Root>
+  );
+};
+
+export const StreamActions = () => {
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const permissions = useHMSStore(selectPermissions);
+  const isMobile = useMedia(cssConfig.media.md);
+  const { isStreamingOn } = useRecordingStreaming();
+
+  return (
+    <Flex align="center" css={{ gap: '$4' }}>
+      <AdditionalRoomState />
+      <Flex align="center" css={{ gap: '$4', '@md': { display: 'none' } }}>
+        <LiveStatus />
+        <RecordingStatus />
+      </Flex>
+      {isConnected && !isMobile ? <StartRecording /> : null}
+      {isConnected && (permissions.hlsStreaming || permissions.rtmpStreaming) && (
+        <Fragment>{isStreamingOn ? <EndStream /> : <GoLiveButton />}</Fragment>
+      )}
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Header/StreamingHeader.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { config as cssConfig, Flex } from '../../../';
+import { EmojiReaction } from '../EmojiReaction';
+import { LeaveRoom } from '../LeaveRoom';
+import MetaActions from '../MetaActions';
+import { Logo, SpeakerTag } from './HeaderComponents';
+import { ParticipantCount } from './ParticipantList';
+import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
+
+export const StreamingHeader = ({ isPreview }) => {
+  const isMobile = useMedia(cssConfig.media.md);
+  return (
+    <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
+      <Flex
+        align="center"
+        css={{
+          position: 'absolute',
+          left: '$10',
+        }}
+      >
+        <Logo />
+        {isMobile && (
+          <Flex align="center" gap={2}>
+            <LeaveRoom />
+            <LiveStatus />
+            <RecordingStatus />
+          </Flex>
+        )}
+        {!isPreview ? <SpeakerTag /> : null}
+      </Flex>
+
+      <Flex
+        align="center"
+        css={{
+          position: 'absolute',
+          right: '$10',
+          gap: '$4',
+        }}
+      >
+        {isMobile ? (
+          <>
+            <EmojiReaction />
+            <MetaActions compact />
+          </>
+        ) : (
+          <Flex css={{ gap: '$4' }}>
+            <StreamActions />
+          </Flex>
+        )}
+        <ParticipantCount />
+      </Flex>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Header/index.jsx

@@ -0,0 +1 @@
+export { Header } from './Header';