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

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
+import { config as cssConfig, Footer as AppFooter } from '../../..';
+import { AudioVideoToggle } from '../AudioVideoToggle';
+import { EmojiReaction } from '../EmojiReaction';
+import { LeaveRoom } from '../LeaveRoom';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { RaiseHand } from '../RaiseHand';
+import { ScreenshareToggle } from '../ScreenShare';
+import { ChatToggle } from './ChatToggle';
+import { ParticipantCount } from './ParticipantList';
+import { useHLSViewerRole } from '../AppData/useUISettings';
+
+export const Footer = () => {
+  const isMobile = useMedia(cssConfig.media.md);
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const hlsViewerRole = useHLSViewerRole();
+  const isHlsViewer = hlsViewerRole === localPeerRole;
+
+  return (
+    <AppFooter.Root
+      css={{
+        flexWrap: 'nowrap',
+        '@md': {
+          justifyContent: 'center',
+          gap: '$10',
+        },
+      }}
+    >
+      <AppFooter.Left
+        css={{
+          '@md': {
+            w: 'unset',
+            p: '0',
+            gap: '$10',
+          },
+        }}
+      >
+        {isMobile ? <LeaveRoom /> : null}
+        <AudioVideoToggle />
+      </AppFooter.Left>
+      <AppFooter.Center
+        css={{
+          '@md': {
+            w: 'unset',
+            gap: '$10',
+          },
+        }}
+      >
+        {isMobile ? (
+          <>
+            {isHlsViewer ? <RaiseHand /> : null}
+            <ChatToggle />
+            <MoreSettings />
+          </>
+        ) : (
+          <>
+            <ScreenshareToggle />
+            {isHlsViewer ? <RaiseHand /> : null}
+            <EmojiReaction />
+            <LeaveRoom />
+          </>
+        )}
+      </AppFooter.Center>
+      <AppFooter.Right>
+        <ChatToggle />
+        <ParticipantCount />
+        <MoreSettings />
+      </AppFooter.Right>
+    </AppFooter.Root>
+  );
+};

package/src/Prebuilt/components/{Header → Footer}/ParticipantList.jsx

@@ -21,11 +21,11 @@ import {
   SpeakerIcon,
   VerticalMenuIcon,
 } from '@100mslive/react-icons';
-import { Avatar, Box, Dropdown, Flex, Input, Slider, Text, textEllipsis } from '../../../';
+import { Avatar, Box, Dropdown, Flex, Input, Slider, Text, textEllipsis } from '../../..';
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
+import { ParticipantFilter } from '../Header/ParticipantFilter';
 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';
@@ -232,7 +232,7 @@ const ParticipantMoreActions = ({ onRoleChange, peerId }) => {
   const actions = useHMSActions();
   const [open, setOpen] = useState(false);
   return (
-    <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
+    <Dropdown.Root open={open} onOpenChange={value => setOpen(value)} modal={false}>
       <Dropdown.Trigger asChild data-testid="participant_more_actions" css={{ p: '$2', r: '$0' }} tabIndex={0}>
         <Text>
           <VerticalMenuIcon />
@@ -320,8 +320,8 @@ export const ParticipantSearch = ({ onSearch, placeholder }) => {
       </Box>
       <Input
         type="text"
-        placeholder={placeholder || 'Find what you are looking for'}
-        css={{ w: '100%', pl: '$14' }}
+        placeholder={placeholder || 'Search among participants'}
+        css={{ w: '100%', pl: '$14', bg: '$surface_bright' }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();

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

@@ -1,16 +1,31 @@
 import React from 'react';
-import { Flex } from '../../../';
-import { SpeakerTag } from './HeaderComponents';
-import { ParticipantCount } from './ParticipantList';
-import { StreamActions } from './StreamActions';
+import { useMedia } from 'react-use';
+import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
+import { config as cssConfig, Flex } from '../../../';
+import { Logo, SpeakerTag } from './HeaderComponents';
+import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
+import { AudioOutputActions, CamaraFlipActions } from './common';
 
 export const ConferencingHeader = () => {
+  const roomState = useHMSStore(selectRoomState);
+  const isMobile = useMedia(cssConfig.media.md);
+  const isPreview = roomState === HMSRoomState.Preview;
+  // no header if there in preview
+  if (isPreview) {
+    return <></>;
+  }
   return (
     <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
-      <Flex align="center" css={{ position: 'absolute', left: '$10' }}>
+      <Flex align="center" gap="2" css={{ position: 'absolute', left: '$10' }}>
+        <Logo />
         <SpeakerTag />
+        {isMobile && (
+          <Flex align="center" css={{ gap: '$4' }}>
+            <LiveStatus />
+            <RecordingStatus />
+          </Flex>
+        )}
       </Flex>
-
       <Flex
         align="center"
         css={{
@@ -20,7 +35,12 @@ export const ConferencingHeader = () => {
         }}
       >
         <StreamActions />
-        <ParticipantCount />
+        {isMobile && (
+          <>
+            <CamaraFlipActions />
+            <AudioOutputActions />
+          </>
+        )}
       </Flex>
     </Flex>
   );

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

@@ -2,25 +2,27 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
 import { VolumeOneIcon } from '@100mslive/react-icons';
-import { config as cssConfig, Flex, styled, Text, textEllipsis } from '../../../';
+import { config as cssConfig, Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import { isStreamingKit } from '../../common/utils';
 
 export const SpeakerTag = () => {
   const dominantSpeaker = useHMSStore(selectDominantSpeaker);
-  return dominantSpeaker && dominantSpeaker.name ? (
-    <Flex
-      align="center"
-      justify="center"
-      css={{ flex: '1 1 0', color: '$on_primary_high', '@md': { display: 'none' } }}
-    >
-      <VolumeOneIcon />
-      <Text variant="md" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>
-        {dominantSpeaker.name}
-      </Text>
-    </Flex>
-  ) : (
-    <></>
+  return (
+    dominantSpeaker &&
+    dominantSpeaker.name && (
+      <Flex
+        align="center"
+        justify="center"
+        css={{ flex: '1 1 0', color: '$on_primary_high', '@md': { display: 'none' } }}
+      >
+        <VerticalDivider css={{ ml: '$8' }} />
+        <VolumeOneIcon />
+        <Text variant="md" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>
+          {dominantSpeaker.name}
+        </Text>
+      </Flex>
+    )
   );
 };
 

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

@@ -1,7 +1,8 @@
-import React, { Fragment, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   HMSRoomState,
+  selectHLSState,
   selectIsConnectedToRoom,
   selectPermissions,
   selectRoomState,
@@ -9,31 +10,65 @@ import {
   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 { AlertTriangleIcon, CrossIcon, RecordIcon } from '@100mslive/react-icons';
+import { Box, Button, config as cssConfig, Flex, HorizontalDivider, Loading, Popover, Text, Tooltip } from '../../../';
+import { Sheet } from '../../../Sheet';
 import { ResolutionInput } from '../Streaming/ResolutionInput';
 import { getResolution } from '../Streaming/RTMPStreaming';
 import { ToastManager } from '../Toast/ToastManager';
 import { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';
-import { useSidepaneToggle } from '../AppData/useSidepane';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
-import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION, SIDE_PANE_OPTIONS } from '../../common/constants';
+import { formatTime } from '../../common/utils';
+import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
 
 export const LiveStatus = () => {
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
+  const hlsState = useHMSStore(selectHLSState);
+  const isMobile = useMedia(cssConfig.media.md);
+  const intervalRef = useRef(null);
+
+  const [liveTime, setLiveTime] = useState(0);
+
+  const startTimer = useCallback(() => {
+    intervalRef.current = setInterval(() => {
+      if (hlsState?.running) {
+        setLiveTime(Date.now() - hlsState?.variants[0]?.startedAt.getTime());
+      }
+    }, 1000);
+  }, [hlsState?.running, hlsState?.variants]);
+
+  useEffect(() => {
+    if (hlsState?.running) {
+      startTimer();
+    }
+    if (!hlsState?.running && intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [hlsState.running, isMobile, startTimer]);
+
   if (!isHLSRunning && !isRTMPRunning) {
     return null;
   }
   return (
-    <Flex align="center">
+    <Flex
+      align="center"
+      gap="1"
+      css={{
+        border: '1px solid $border_default',
+        padding: '$4 $6 $4 $6',
+        borderRadius: '$1',
+      }}
+    >
       <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$alert_error_default', mr: '$2' }} />
-      <Text>
-        Live
-        <Text as="span" css={{ '@md': { display: 'none' } }}>
-          &nbsp;with {isHLSRunning ? 'HLS' : 'RTMP'}
-        </Text>
-      </Text>
+      <Flex align="center" gap="2">
+        <Text variant={!isMobile ? 'button' : 'body2'}>LIVE</Text>
+        <Text variant="caption">{hlsState?.variants?.length > 0 ? formatTime(liveTime) : ''}</Text>
+      </Flex>
     </Flex>
   );
 };
@@ -41,6 +76,7 @@ export const LiveStatus = () => {
 export const RecordingStatus = () => {
   const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming();
   const permissions = useHMSStore(selectPermissions);
+  const isMobile = useMedia(cssConfig.media.md);
 
   if (
     !isRecordingOn ||
@@ -50,8 +86,10 @@ export const RecordingStatus = () => {
       value => !!value,
     )
   ) {
-    return null;
+    // show recording icon in mobile without popover
+    if (!(isMobile && isRecordingOn)) return null;
   }
+
   return (
     <Tooltip
       title={getRecordingText({
@@ -60,28 +98,18 @@ export const RecordingStatus = () => {
         isHLSRecordingOn,
       })}
     >
-      <Box
+      <Flex
         css={{
           color: '$alert_error_default',
+          alignItems: 'center',
         }}
       >
         <RecordIcon width={24} height={24} />
-      </Box>
+      </Flex>
     </Tooltip>
   );
 };
 
-const EndStream = () => {
-  const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
-
-  return (
-    <Button data-testid="end_stream" variant="danger" icon onClick={toggleStreaming}>
-      <WrenchIcon />
-      Manage Stream
-    </Button>
-  );
-};
-
 const StartRecording = () => {
   const permissions = useHMSStore(selectPermissions);
   const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
@@ -192,24 +220,61 @@ const StartRecording = () => {
   );
 };
 
+/**
+ * @description only start recording button will be shown.
+ */
 export const StreamActions = () => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const permissions = useHMSStore(selectPermissions);
   const isMobile = useMedia(cssConfig.media.md);
-  const { isStreamingOn } = useRecordingStreaming();
   const roomState = useHMSStore(selectRoomState);
 
   return (
     <Flex align="center" css={{ gap: '$4' }}>
       <AdditionalRoomState />
-      <Flex align="center" css={{ gap: '$4', '@md': { display: 'none' } }}>
-        {roomState !== HMSRoomState.Preview ? <LiveStatus /> : null}
-        <RecordingStatus />
-      </Flex>
-      {isConnected && !isMobile ? <StartRecording /> : null}
-      {isConnected && (permissions.hlsStreaming || permissions.rtmpStreaming) && (
-        <Fragment>{isStreamingOn ? <EndStream /> : <GoLiveButton />}</Fragment>
+      {!isMobile && (
+        <Flex align="center" css={{ gap: '$4' }}>
+          <RecordingStatus />
+          {roomState !== HMSRoomState.Preview ? <LiveStatus /> : null}
+        </Flex>
       )}
+      {isConnected && !isMobile ? <StartRecording /> : null}
     </Flex>
   );
 };
+
+export const StopRecordingInSheet = ({ onStopRecording, onClose }) => {
+  return (
+    <Sheet.Root open={true}>
+      <Sheet.Content>
+        <Sheet.Title css={{ p: '$10' }}>
+          <Flex direction="row" justify="between" css={{ w: '100%', c: '$alert_error_default' }}>
+            <Flex justify="start" align="center" gap="3">
+              <AlertTriangleIcon />
+              <Text variant="h5" css={{ c: '$alert_error_default' }}>
+                Stop Recording
+              </Text>
+            </Flex>
+            <Sheet.Close css={{ color: 'white' }} onClick={onClose}>
+              <CrossIcon />
+            </Sheet.Close>
+          </Flex>
+        </Sheet.Title>
+        <HorizontalDivider />
+        <Box as="div" css={{ p: '$10', overflowY: 'scroll', maxHeight: '70vh' }}>
+          <Text variant="caption" css={{ c: '$on_surface_medium', pb: '$8' }}>
+            Are you sure you want to stop recording? You can’t undo this action.
+          </Text>
+          <Button
+            variant="danger"
+            css={{ width: '100%' }}
+            type="submit"
+            data-testid="popup_change_btn"
+            onClick={onStopRecording}
+          >
+            Stop
+          </Button>
+        </Box>
+      </Sheet.Content>
+    </Sheet.Root>
+  );
+};

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { config as cssConfig, Flex } from '../../../';
 import { EmojiReaction } from '../EmojiReaction';
+import { ParticipantCount } from '../Footer/ParticipantList';
 import { LeaveRoom } from '../LeaveRoom';
 import MetaActions from '../MetaActions';
 import { SpeakerTag } from './HeaderComponents';
-import { ParticipantCount } from './ParticipantList';
 import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
 
 export const StreamingHeader = () => {

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

@@ -0,0 +1,164 @@
+import React from 'react';
+import {
+  DeviceType,
+  selectIsLocalVideoEnabled,
+  selectLocalVideoTrackID,
+  selectVideoTrackByID,
+  useDevices,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { CameraFlipIcon, CheckIcon, CrossIcon, SpeakerIcon } from '@100mslive/react-icons';
+import { HorizontalDivider } from '../../../Divider';
+import { Label } from '../../../Label';
+import { Box, Flex } from '../../../Layout';
+import { Sheet } from '../../../Sheet';
+import { Text } from '../../../Text';
+import IconButton from '../../IconButton';
+import { ToastManager } from '../Toast/ToastManager';
+
+export const CamaraFlipActions = () => {
+  const actions = useHMSActions();
+  const { allDevices } = useDevices();
+  const { videoInput } = allDevices;
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+
+  const videoTrackId = useHMSStore(selectLocalVideoTrackID);
+  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
+
+  return (
+    <Box>
+      <IconButton
+        disabled={!videoInput?.length || !isVideoOn || !localVideoTrack?.facingMode}
+        onClick={async () => {
+          try {
+            await actions.switchCamera();
+          } catch (e) {
+            ToastManager.addToast({
+              title: `Error while flipping camera ${e.message || ''}`,
+              variant: 'error',
+            });
+          }
+        }}
+      >
+        <CameraFlipIcon />
+      </IconButton>
+    </Box>
+  );
+};
+
+export const AudioOutputActions = () => {
+  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
+  const { audioOutput } = allDevices;
+  // don't show speaker selector where the API is not supported, and use
+  // a generic word("Audio") for Mic. In some cases(Chrome Android for e.g.) this changes both mic and speaker keeping them in sync.
+  const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;
+
+  /**
+   * Chromium browsers return an audioOutput with empty label when no permissions are given
+   */
+  const audioOutputFiltered = audioOutput?.filter(item => !!item.label) ?? [];
+  if (!shouldShowAudioOutput || !audioOutputFiltered?.length > 0) {
+    return null;
+  }
+  return (
+    <AudioOutputSelectionSheet
+      outputDevices={audioOutput}
+      outputSelected={selectedDeviceIDs.outputDevices}
+      onChange={async deviceId => {
+        try {
+          await updateDevice({
+            deviceId,
+            deviceType: DeviceType.audioOutput,
+          });
+        } catch (e) {
+          ToastManager.addToast({
+            title: `Error while changing audio output ${e.message || ''}`,
+            variant: 'error',
+          });
+        }
+      }}
+    >
+      <Box>
+        <IconButton>
+          <SpeakerIcon />
+        </IconButton>
+      </Box>
+    </AudioOutputSelectionSheet>
+  );
+};
+
+const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, children }) => {
+  return (
+    <Sheet.Root>
+      <Sheet.Trigger asChild>{children}</Sheet.Trigger>
+      <Sheet.Content>
+        <Sheet.Title css={{ py: '$10', px: '$8', alignItems: 'center' }}>
+          <Flex direction="row" justify="between" css={{ w: '100%' }}>
+            <Text variant="h6" css={{ display: 'flex' }}>
+              Audio Output
+            </Text>
+            <Sheet.Close>
+              <IconButton as="div" data-testid="dialog_cross_icon">
+                <CrossIcon />
+              </IconButton>
+            </Sheet.Close>
+          </Flex>
+        </Sheet.Title>
+        <HorizontalDivider />
+        <Flex
+          direction="column"
+          css={{
+            px: '$8',
+            maxHeight: '80vh',
+            overflowY: 'scroll',
+          }}
+        >
+          {outputDevices.map(audioDevice => {
+            return (
+              <SelectWithLabel
+                label={audioDevice.label}
+                id={audioDevice.deviceId}
+                checked={audioDevice.deviceId === outputSelected}
+                onChange={() => onChange(audioDevice.deviceId)}
+              />
+            );
+          })}
+        </Flex>
+      </Sheet.Content>
+    </Sheet.Root>
+  );
+};
+
+const SelectWithLabel = ({ label, icon = <></>, checked, id, onChange }) => {
+  return (
+    <Flex
+      align="center"
+      css={{
+        my: '$2',
+        py: '$8',
+        w: '100%',
+        borderBottom: '1px solid $border_default',
+      }}
+      onClick={onChange}
+    >
+      <Label
+        htmlFor={id}
+        css={{
+          fontSize: '$md',
+          fontWeight: '$semiBold',
+          color: checked ? '$on_surface_high' : '$on_surface_low',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '$8',
+          flex: '1 1 0',
+        }}
+      >
+        {icon}
+        {label}
+      </Label>
+      {checked && <CheckIcon width={24} height={24} />}
+    </Flex>
+  );
+};

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx

@@ -46,13 +46,12 @@ export const IconButtonWithOptions = ({
   onClick = () => {
     return;
   },
-  key = '',
 }) => {
   const bgCss = { backgroundColor: active ? '$transparent' : '$secondary_dim' };
   const iconCss = { color: active ? '$on_surface_high' : '$on_primary_high' };
   return (
     <Flex>
-      <IconSection css={bgCss} onClick={onClick} key={key}>
+      <IconSection css={bgCss} onClick={onClick}>
         <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
           <Flex align="center" justify="center" css={iconCss}>
             {icon}

package/src/Prebuilt/components/LeaveCard.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+
+export const LeaveCard = ({ icon, title, subtitle, onClick, bg, titleColor, subtitleColor, css = {} }) => {
+  return (
+    <Flex css={{ p: '$10', flexGrow: 1, gap: '$8', bg, ...css }} onClick={onClick}>
+      <Box css={{ color: titleColor }}>{icon}</Box>
+      <Box css={{ gap: '$2' }}>
+        <Text variant="lg" css={{ color: titleColor }}>
+          {title}
+        </Text>
+        <Text variant="sm" css={{ color: subtitleColor }}>
+          {subtitle}
+        </Text>
+      </Box>
+    </Flex>
+  );
+};