@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/Settings/SwitchWithLabel.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Label } from '../../../Label';
+import { Flex } from '../../../Layout';
+import { Switch } from '../../../Switch';
+// import { Flex, Label, Switch } from '../../../';
+
+const SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) => {
+  return (
+    <Flex
+      align="center"
+      css={{
+        my: '$2',
+        py: '$8',
+        w: '100%',
+        borderBottom: '1px solid $borderDefault',
+        display: hide ? 'none' : 'flex',
+      }}
+    >
+      <Label
+        htmlFor={id}
+        css={{
+          fontSize: '$md',
+          fontWeight: '$semiBold',
+          color: checked ? '$textHighEmp' : '$textDisabled',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '$8',
+          flex: '1 1 0',
+        }}
+      >
+        {icon}
+        {label}
+      </Label>
+      <Switch id={id} checked={checked} onCheckedChange={onChange} />
+    </Flex>
+  );
+};
+
+export default SwitchWithLabel;

package/src/Prebuilt/components/Settings/common.js

@@ -0,0 +1,15 @@
+import { css } from '../../..';
+export const settingOverflow = css({
+  flex: '1 1 0',
+  pr: '$12',
+  mr: '-$12',
+  overflowY: 'auto',
+});
+
+export const settingContent = css({
+  display: 'flex',
+  flexDirection: 'column',
+  '&[hidden]': {
+    display: 'none',
+  },
+});

package/src/Prebuilt/components/ShareMenuIcon.jsx

@@ -0,0 +1,26 @@
+import { styled } from '../../Theme';
+import IconButton from '../IconButton';
+
+export const ScreenShareButton = styled(IconButton, {
+  h: '$14',
+  px: '$8',
+  r: '$1',
+  borderTopRightRadius: 0,
+  borderBottomRightRadius: 0,
+  '@md': {
+    px: '$4',
+    mx: 0,
+  },
+});
+
+export const ShareMenuIcon = styled(ScreenShareButton, {
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  borderTopRightRadius: '$1',
+  borderBottomRightRadius: '$1',
+  borderLeftWidth: 0,
+  w: '$4',
+  '@md': {
+    px: '$2',
+  },
+});

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -0,0 +1,250 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  selectHMSStats,
+  selectLocalPeerID,
+  selectPeersMap,
+  selectTracksMap,
+  useHMSStatsStore,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { HorizontalDivider } from '../../Divider';
+import { Dropdown } from '../../Dropdown';
+import { Label } from '../../Label';
+import { Box, Flex } from '../../Layout';
+import { Dialog } from '../../Modal';
+import { Switch } from '../../Switch';
+import { Text } from '../../Text';
+import { DialogDropdownTrigger } from '../primitives/DropdownTrigger';
+import { useSetUiSettings } from './AppData/useUISettings';
+import { useDropdownSelection } from './hooks/useDropdownSelection';
+import { UI_SETTINGS } from '../common/constants';
+
+export const StatsForNerds = ({ onOpenChange }) => {
+  const tracksWithLabels = useTracksWithLabel();
+  const statsOptions = useMemo(
+    () => [{ id: 'local-peer', label: 'Local Peer Stats' }, ...tracksWithLabels],
+    [tracksWithLabels],
+  );
+  const [selectedStat, setSelectedStat] = useState(statsOptions[0]);
+  const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
+  const [open, setOpen] = useState(false);
+  const ref = useRef();
+  const selectionBg = useDropdownSelection();
+
+  useEffect(() => {
+    if (selectedStat.id !== 'local-peer' && !tracksWithLabels.find(track => track.id === selectedStat.id)) {
+      setSelectedStat('local-peer');
+    }
+  }, [tracksWithLabels, selectedStat]);
+
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content
+          css={{
+            width: 'min(500px, 95%)',
+            maxHeight: '100%',
+            overflowY: 'auto',
+          }}
+        >
+          {/* Title */}
+          <Dialog.Title css={{ p: '$4 0' }}>
+            <Flex justify="between">
+              <Flex align="center" css={{ mb: '$1' }}>
+                <Text variant="h6" inline>
+                  Stats For Nerds
+                </Text>
+              </Flex>
+              <Dialog.DefaultClose data-testid="stats_dialog_close_icon" />
+            </Flex>
+          </Dialog.Title>
+          <HorizontalDivider css={{ mt: '0.8rem' }} />
+          {/* Switch */}
+          <Flex justify="start" gap={4} css={{ m: '$10 0' }}>
+            <Switch checked={showStatsOnTiles} onCheckedChange={setShowStatsOnTiles} />
+            <Text variant="body2" css={{ fontWeight: '$semiBold' }}>
+              Show Stats on Tiles
+            </Text>
+          </Flex>
+          {/* Select */}
+          <Flex
+            direction="column"
+            css={{
+              mb: '$12',
+              position: 'relative',
+              minWidth: 0,
+            }}
+          >
+            <Label variant="body2">Stats For</Label>
+            <Dropdown.Root data-testid="dialog_select_Stats For" open={open} onOpenChange={setOpen}>
+              <DialogDropdownTrigger
+                title={selectedStat.label || 'Select Stats'}
+                css={{ mt: '$4' }}
+                titleCSS={{ mx: 0 }}
+                open={open}
+                ref={ref}
+              />
+              <Dropdown.Portal>
+                <Dropdown.Content align="start" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1000 }}>
+                  {statsOptions.map(option => {
+                    const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer;
+                    return (
+                      <Dropdown.Item
+                        key={`${option.id}-${option.layer || ''}`}
+                        onClick={() => {
+                          setSelectedStat(option);
+                        }}
+                        css={{
+                          px: '$9',
+                          bg: isSelected ? selectionBg : undefined,
+                          c: isSelected ? '$white' : '$textPrimary',
+                        }}
+                      >
+                        {option.label}
+                      </Dropdown.Item>
+                    );
+                  })}
+                </Dropdown.Content>
+              </Dropdown.Portal>
+            </Dropdown.Root>
+          </Flex>
+          {/* Stats */}
+          {selectedStat.id === 'local-peer' ? (
+            <LocalPeerStats />
+          ) : (
+            <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+const useTracksWithLabel = () => {
+  const tracksMap = useHMSStore(selectTracksMap);
+  const peersMap = useHMSStore(selectPeersMap);
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const tracksWithLabels = useMemo(
+    () =>
+      Object.values(tracksMap).reduce((res, track) => {
+        const peerName = peersMap[track.peerId]?.name;
+        const isLocalTrack = track.peerId === localPeerID;
+        if (isLocalTrack && track.layerDefinitions?.length) {
+          res = res.concat(
+            track.layerDefinitions.map(({ layer }) => {
+              return {
+                id: track.id,
+                layer,
+                local: true,
+                label: `${peerName} ${track.source} ${track.type} - ${layer}`,
+              };
+            }),
+          );
+          return res;
+        }
+        res.push({
+          id: track.id,
+          local: isLocalTrack,
+          label: `${peerName} ${track.source} ${track.type}`,
+        });
+        return res;
+      }, []),
+    [tracksMap, peersMap, localPeerID],
+  );
+  return tracksWithLabels;
+};
+
+const LocalPeerStats = () => {
+  const stats = useHMSStatsStore(selectHMSStats.localPeerStats);
+
+  if (!stats) {
+    return null;
+  }
+
+  return (
+    <Flex css={{ flexWrap: 'wrap', gap: '$10' }}>
+      <StatsRow label="Packets Lost" value={stats.subscribe?.packetsLost} />
+      <StatsRow label="Jitter" value={stats.subscribe?.jitter} />
+      <StatsRow label="Publish Bitrate" value={formatBytes(stats.publish?.bitrate, 'b/s')} />
+      <StatsRow label="Subscribe Bitrate" value={formatBytes(stats.subscribe?.bitrate, 'b/s')} />
+      <StatsRow
+        label="Available Outgoing Bitrate"
+        value={formatBytes(stats.publish?.availableOutgoingBitrate, 'b/s')}
+      />
+      <StatsRow label="Total Bytes Sent" value={formatBytes(stats.publish?.bytesSent)} />
+      <StatsRow label="Total Bytes Received" value={formatBytes(stats.subscribe?.bytesReceived)} />
+      <StatsRow
+        label="Round Trip Time"
+        value={`${
+          (((stats.publish?.currentRoundTripTime || 0) + (stats.subscribe?.currentRoundTripTime || 0)) / 2).toFixed(3) *
+          1000
+        } ms`}
+      />
+    </Flex>
+  );
+};
+
+const TrackStats = ({ trackID, layer, local }) => {
+  const selector = layer
+    ? selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID)
+    : local
+    ? selectHMSStats.localAudioTrackStatsByID(trackID)
+    : selectHMSStats.trackStatsByID(trackID);
+  const stats = useHMSStatsStore(selector);
+  if (!stats) {
+    return null;
+  }
+  const inbound = stats.type.includes('inbound');
+
+  return (
+    <Flex css={{ flexWrap: 'wrap', gap: '$10' }}>
+      <StatsRow label="Type" value={stats.type + ' ' + stats.kind} />
+      <StatsRow label="Bitrate" value={formatBytes(stats.bitrate, 'b/s')} />
+      <StatsRow label="Packets Lost" value={stats.packetsLost} />
+      <StatsRow label="Jitter" value={stats.jitter?.toFixed(3)} />
+      <StatsRow
+        label={inbound ? 'Bytes Received' : 'Bytes Sent'}
+        value={formatBytes(inbound ? stats.bytesReceived : stats.bytesSent)}
+      />
+      {stats.kind === 'video' && (
+        <>
+          <StatsRow label="Framerate" value={stats.framesPerSecond} />
+          {!inbound && <StatsRow label="Quality Limitation Reason" value={stats.qualityLimitationReason} />}
+        </>
+      )}
+      <StatsRow label="Round Trip Time" value={stats.roundTripTime ? `${stats.roundTripTime * 1000} ms` : '-'} />
+    </Flex>
+  );
+};
+
+const StatsRow = React.memo(({ label, value }) => (
+  <Box css={{ bg: '$surfaceLight', w: 'calc(50% - $6)', p: '$8', r: '$3' }}>
+    <Text
+      variant="overline"
+      css={{
+        fontWeight: '$semiBold',
+        color: '$textMedEmp',
+        textTransform: 'uppercase',
+      }}
+    >
+      {label}{' '}
+    </Text>
+    <Text variant="sub1" css={{ fontWeight: '$semiBold', color: '$textHighEmp' }}>
+      {value || '-'}
+    </Text>
+  </Box>
+));
+
+const formatBytes = (bytes, unit = 'B', decimals = 2) => {
+  if (bytes === undefined) return '-';
+  if (bytes === 0) return '0 ' + unit;
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'].map(size => size + unit);
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};

package/src/Prebuilt/components/Streaming/Common.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { selectPermissions, useHMSStore } from '@100mslive/react-sdk';
+import { ChevronLeftIcon, ChevronRightIcon, CrossIcon, RecordIcon } from '@100mslive/react-icons';
+import { Box, Flex, IconButton, slideLeftAndFade, Switch, Text } from '../../../';
+
+export const StreamCard = ({ title, subtitle, Icon, css = {}, onClick, testId }) => {
+  return (
+    <Flex
+      css={{
+        w: '100%',
+        p: '$10',
+        r: '$1',
+        cursor: 'pointer',
+        bg: '$surfaceLight',
+        mb: '$10',
+        mt: '$8',
+        ...css,
+      }}
+      data-testid={testId}
+      onClick={onClick}
+    >
+      <Text css={{ alignSelf: 'center', p: '$4' }}>
+        <Icon width={40} height={40} />
+      </Text>
+      <Box css={{ flex: '1 1 0', mx: '$8' }}>
+        <Text variant="h6" css={{ mb: '$4' }}>
+          {title}
+        </Text>
+        <Text variant="sm" css={{ color: '$textMedEmp' }}>
+          {subtitle}
+        </Text>
+      </Box>
+      <Text css={{ alignSelf: 'center' }}>
+        <ChevronRightIcon />
+      </Text>
+    </Flex>
+  );
+};
+
+export const ContentHeader = ({ onBack, title, content }) => {
+  return (
+    <Flex css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer' }}>
+      <Text
+        css={{ p: '$2', bg: '$surfaceLight', r: '$round', alignSelf: 'center' }}
+        onClick={onBack}
+        data-testid="go_back"
+      >
+        <ChevronLeftIcon width={16} height={16} />
+      </Text>
+      <Box css={{ flex: '1 1 0', mx: '$8' }}>
+        <Text
+          variant="tiny"
+          css={{
+            textTransform: 'uppercase',
+            fontWeight: '$semiBold',
+            color: '$textMedEmp',
+          }}
+        >
+          {title}
+        </Text>
+        <Text variant="h6">{content}</Text>
+      </Box>
+      <IconButton onClick={onBack} css={{ alignSelf: 'flex-start' }} data-testid="close_stream_section">
+        <CrossIcon width={16} height={16} />
+      </IconButton>
+    </Flex>
+  );
+};
+
+export const Container = ({ children, rounded = false }) => {
+  return (
+    <Box
+      css={{
+        size: '100%',
+        zIndex: 2,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bg: '$surfaceDefault',
+        transform: 'translateX(10%)',
+        animation: `${slideLeftAndFade('10%')} 100ms ease-out forwards`,
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: rounded ? '$2' : '0',
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export const ContentBody = ({ Icon, title, removeVerticalPadding = false, children }) => {
+  return (
+    <Box css={{ p: removeVerticalPadding ? '$0 $10' : '$10' }}>
+      <Text css={{ display: 'flex', alignItems: 'center', mb: '$4' }}>
+        <Icon />
+        <Text as="span" css={{ fontWeight: '$semiBold', ml: '$4' }}>
+          {title}
+        </Text>
+      </Text>
+      <Text variant="sm" css={{ color: '$textMedEmp' }}>
+        {children}
+      </Text>
+    </Box>
+  );
+};
+
+export const RecordStream = ({ record, setRecord, testId }) => {
+  const permissions = useHMSStore(selectPermissions);
+  return permissions?.browserRecording ? (
+    <Flex align="center" css={{ bg: '$surfaceLight', m: '$8 $10', p: '$8', r: '$0' }}>
+      <Text css={{ color: '$error' }}>
+        <RecordIcon />
+      </Text>
+      <Text variant="sm" css={{ flex: '1 1 0', mx: '$8' }}>
+        Record the stream
+      </Text>
+      <Switch checked={record} onCheckedChange={setRecord} data-testid={testId} />
+    </Flex>
+  ) : null;
+};
+
+export const ErrorText = ({ error }) => {
+  if (!error) {
+    return null;
+  }
+  return (
+    <Text variant="sm" css={{ mb: '$8', color: '$error' }}>
+      {error}
+    </Text>
+  );
+};

package/src/Prebuilt/components/Streaming/HLSStreaming.jsx

@@ -0,0 +1,226 @@
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { selectAppData, selectRoomID, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+import {
+  EndStreamIcon,
+  EyeOpenIcon,
+  GoLiveIcon,
+  InfoIcon,
+  LinkIcon,
+  PeopleIcon,
+  SupportIcon,
+  WrenchIcon,
+} from '@100mslive/react-icons';
+import { Box, Button, Flex, Loading, Text } from '../../../';
+import { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common';
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { useFilteredRoles } from '../../common/hooks';
+import { getDefaultMeetingUrl } from '../../common/utils';
+import { APP_DATA } from '../../common/constants';
+
+const getCardData = (roleName, roomId) => {
+  let data = {};
+  const formattedRoleName = roleName[0].toUpperCase() + roleName.slice(1);
+
+  switch (roleName) {
+    case 'broadcaster': {
+      data = {
+        title: formattedRoleName,
+        content: 'Broadcasters can livestream audio or video, manage stream appearance and control the room via HLS.',
+        icon: <SupportIcon />,
+      };
+      break;
+    }
+    case 'hls-viewer': {
+      data = {
+        title: 'HLS Viewer',
+        content:
+          'Viewers can view and send chat messages, but need to be made broadcasters to participate with audio or video.',
+        icon: <EyeOpenIcon />,
+      };
+      break;
+    }
+    default:
+      data = {
+        title: formattedRoleName,
+        content: `${formattedRoleName} is customised with specific permissions, which will determine how it interacts with this room.`,
+        icon: <WrenchIcon />,
+        order: 1,
+      };
+  }
+  data['link'] = `/${roomId}/${roleName}`;
+  return data;
+};
+
+const Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
+  const [copied, setCopied] = useState(false);
+  return isHLSRunning ? (
+    <Box
+      key={title}
+      css={{
+        backgroundColor: '$surfaceLight',
+        padding: '$10',
+        order,
+        borderRadius: '$2',
+      }}
+    >
+      <Flex align="center" gap="2" css={{ color: '$primaryLight' }}>
+        {icon}
+        <Text variant="h6" css={{ fontWeight: '$semiBold' }}>
+          {title}
+        </Text>
+      </Flex>
+      <Text variant="sm" css={{ color: '$textMedEmp', mt: '$6' }}>
+        {content}
+      </Text>
+      <Button
+        variant="standard"
+        onClick={() => {
+          navigator.clipboard.writeText(`${window.location.origin}${link}`);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        }}
+        css={{ w: '100%', r: '$1', mt: '$10', fontWeight: '$semiBold' }}
+        icon
+      >
+        {copied ? (
+          <>Link copied!</>
+        ) : (
+          <>
+            <LinkIcon style={{ color: 'inherit' }} />
+            Copy Invite Link
+          </>
+        )}
+      </Button>
+    </Box>
+  ) : null;
+};
+
+export const HLSStreaming = ({ onBack }) => {
+  const roleNames = useFilteredRoles();
+  const roomId = useHMSStore(selectRoomID);
+  const cards = roleNames.map(roleName => getCardData(roleName, roomId));
+
+  const { isHLSRunning } = useRecordingStreaming();
+  const [showLinks, setShowLinks] = useState(false);
+  return !showLinks ? (
+    <Container rounded>
+      <ContentHeader title="Start Streaming" content="HLS" onBack={onBack} />
+      <ContentBody title="HLS Streaming" Icon={GoLiveIcon} removeVerticalPadding>
+        Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this
+        platform.
+      </ContentBody>
+      {isHLSRunning ? <EndHLS setShowLinks={setShowLinks} /> : <StartHLS />}
+    </Container>
+  ) : (
+    <Container rounded>
+      <ContentHeader title="Invite People" content="Start the conversation" onBack={() => setShowLinks(false)} />
+
+      <Flex direction="column" css={{ gap: '$10', p: '$0 $10', overflowY: 'auto', mb: '$10' }}>
+        {cards.map(card => (
+          <Card key={card.title} {...card} isHLSRunning={isHLSRunning} />
+        ))}
+      </Flex>
+    </Container>
+  );
+};
+
+const StartHLS = () => {
+  const [record, setRecord] = useState(false);
+  const [error, setError] = useState(false);
+  const hmsActions = useHMSActions();
+  const recordingUrl = useHMSStore(selectAppData(APP_DATA.recordingUrl));
+  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const startHLS = useCallback(
+    async variants => {
+      try {
+        if (isHLSStarted) {
+          return;
+        }
+        setHLSStarted(true);
+        setError('');
+        await hmsActions.startHLSStreaming({
+          variants,
+          recording: { hlsVod: record, singleFilePerLayer: record },
+        });
+      } catch (error) {
+        if (error.message.includes('invalid input')) {
+          await startHLS([{ meetingURL: recordingUrl || getDefaultMeetingUrl() }]);
+          return;
+        }
+        setHLSStarted(false);
+        setError(error.message);
+      }
+    },
+    [hmsActions, record, isHLSStarted, setHLSStarted, recordingUrl],
+  );
+
+  return (
+    <Fragment>
+      <RecordStream record={record} setRecord={setRecord} testId="hls-recording" />
+      <Box css={{ p: '$4 $10' }}>
+        <ErrorText error={error} />
+        <Button
+          data-testid="start_hls"
+          css={{ w: '100%', r: '$0' }}
+          icon
+          onClick={() => startHLS()}
+          disabled={isHLSStarted}
+        >
+          {isHLSStarted ? <Loading size={24} color="currentColor" /> : <GoLiveIcon />}
+          {isHLSStarted ? 'Starting stream...' : 'Go Live'}
+        </Button>
+      </Box>
+      <Flex align="center" css={{ p: '$4 $10' }}>
+        <Text>
+          <InfoIcon width={16} height={16} />
+        </Text>
+        <Text variant="tiny" color="$textMedEmp" css={{ mx: '$8' }}>
+          You cannot start recording once the stream starts, you will have to stop the stream to enable recording.
+        </Text>
+      </Flex>
+    </Fragment>
+  );
+};
+
+const EndHLS = ({ setShowLinks }) => {
+  const hmsActions = useHMSActions();
+
+  const [inProgress, setInProgress] = useState(false);
+  const [error, setError] = useState('');
+  const { isHLSRunning } = useRecordingStreaming();
+
+  useEffect(() => {
+    if (inProgress && !isHLSRunning) {
+      setInProgress(false);
+    }
+  }, [inProgress, isHLSRunning]);
+
+  return (
+    <Box css={{ p: '$4 $10' }}>
+      <ErrorText error={error} />
+      <Button
+        data-testid="stop_hls"
+        variant="danger"
+        css={{ w: '100%', r: '$0', mt: '$8' }}
+        icon
+        loading={inProgress}
+        disabled={inProgress}
+        onClick={async () => {
+          try {
+            setInProgress(true);
+            await hmsActions.stopHLSStreaming();
+          } catch (error) {
+            setError(error.message);
+            setInProgress(false);
+          }
+        }}
+      >
+        <EndStreamIcon />
+        End Stream
+      </Button>
+      <Button icon css={{ w: '100%', r: '$0', mt: '$8' }} onClick={() => setShowLinks(true)}>
+        <PeopleIcon /> Invite People
+      </Button>
+    </Box>
+  );
+};