@100mslive/roomkit-react 0.1.0

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

@@ -0,0 +1,220 @@
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+import {
+  DeviceType,
+  selectIsLocalVideoEnabled,
+  selectLocalVideoTrackID,
+  selectVideoTrackByID,
+  useDevices,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { MicOnIcon, SpeakerIcon, VideoOnIcon } from '@100mslive/react-icons';
+import { Box, Button, Dropdown, Flex, StyledVideoTile, Text, Video } from '../../../';
+import { DialogDropdownTrigger } from '../../primitives/DropdownTrigger';
+import { useUISettings } from '../AppData/useUISettings';
+import { useDropdownSelection } from '../hooks/useDropdownSelection';
+import { settingOverflow } from './common.js';
+import { UI_SETTINGS } from '../../common/constants';
+
+/**
+ * wrap the button on click of whom settings should open, this component will take care of the rest,
+ * it'll give the user options to change input/output device as well as check speaker.
+ * There is also another controlled way of using this by passing in open and onOpenChange.
+ */
+const Settings = ({ setHide }) => {
+  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
+  const { videoInput, audioInput, audioOutput } = allDevices;
+  const videoTrackId = useHMSStore(selectLocalVideoTrackID);
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  // 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;
+  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
+  const trackSelector = selectVideoTrackByID(videoTrackId);
+  const track = useHMSStore(trackSelector);
+
+  /**
+   * Chromium browsers return an audioOutput with empty label when no permissions are given
+   */
+  const audioOutputFiltered = audioOutput?.filter(item => !!item.label) ?? [];
+
+  if (!videoInput?.length && !audioInput?.length && !audioOutputFiltered?.length) {
+    setHide(true);
+  }
+
+  return (
+    <Box className={settingOverflow()}>
+      {videoInput?.length ? (
+        <Fragment>
+          {isVideoOn && (
+            <StyledVideoTile.Container
+              css={{
+                w: '90%',
+                px: '$10',
+                height: '$48',
+                bg: 'transparent',
+                m: '$10 auto',
+              }}
+            >
+              <Video trackId={videoTrackId} mirror={track?.facingMode !== 'environment' && mirrorLocalVideo} />
+            </StyledVideoTile.Container>
+          )}
+          <DeviceSelector
+            title="Video"
+            devices={videoInput}
+            icon={<VideoOnIcon />}
+            selection={selectedDeviceIDs.videoInput}
+            onChange={deviceId =>
+              updateDevice({
+                deviceId,
+                deviceType: DeviceType.videoInput,
+              })
+            }
+          />
+        </Fragment>
+      ) : null}
+      {audioInput?.length ? (
+        <DeviceSelector
+          title={shouldShowAudioOutput ? 'Microphone' : 'Audio'}
+          icon={<MicOnIcon />}
+          devices={audioInput}
+          selection={selectedDeviceIDs.audioInput}
+          onChange={deviceId =>
+            updateDevice({
+              deviceId,
+              deviceType: DeviceType.audioInput,
+            })
+          }
+        />
+      ) : null}
+      {audioOutputFiltered?.length && shouldShowAudioOutput ? (
+        <DeviceSelector
+          title="Speaker"
+          icon={<SpeakerIcon />}
+          devices={audioOutput}
+          selection={selectedDeviceIDs.audioOutput}
+          onChange={deviceId =>
+            updateDevice({
+              deviceId,
+              deviceType: DeviceType.audioOutput,
+            })
+          }
+        >
+          <TestAudio id={selectedDeviceIDs.audioOutput} />
+        </DeviceSelector>
+      ) : null}
+    </Box>
+  );
+};
+
+const DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
+  const [open, setOpen] = useState(false);
+  const selectionBg = useDropdownSelection();
+  const ref = useRef(null);
+
+  return (
+    <Box css={{ mb: '$10' }}>
+      <Text css={{ mb: '$4' }}>{title}</Text>
+      <Flex
+        align="center"
+        css={{
+          gap: '$4',
+          '@md': {
+            flexDirection: children ? 'column' : 'row',
+            alignItems: children ? 'start' : 'center',
+          },
+        }}
+      >
+        <Box
+          css={{
+            position: 'relative',
+            flex: '1 1 0',
+            w: '100%',
+            minWidth: 0,
+            '@md': {
+              mb: children ? '$8' : 0,
+            },
+          }}
+        >
+          <Dropdown.Root open={open} onOpenChange={setOpen}>
+            <DialogDropdownTrigger
+              ref={ref}
+              css={{
+                ...(children
+                  ? {
+                      flex: '1 1 0',
+                      minWidth: 0,
+                    }
+                  : {}),
+              }}
+              icon={icon}
+              title={devices.find(({ deviceId }) => deviceId === selection)?.label || 'Select device from list'}
+              open={open}
+            />
+            <Dropdown.Portal>
+              <Dropdown.Content align="start" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1000 }}>
+                {devices.map(device => {
+                  return (
+                    <Dropdown.Item
+                      key={device.label}
+                      onSelect={() => onChange(device.deviceId)}
+                      css={{
+                        px: '$9',
+                        bg: device.deviceId === selection ? selectionBg : undefined,
+                      }}
+                    >
+                      {device.label}
+                    </Dropdown.Item>
+                  );
+                })}
+              </Dropdown.Content>
+            </Dropdown.Portal>
+          </Dropdown.Root>
+        </Box>
+        {children}
+      </Flex>
+    </Box>
+  );
+};
+
+const TEST_AUDIO_URL = 'https://100ms.live/test-audio.wav';
+
+const TestAudio = ({ id }) => {
+  const audioRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  useEffect(() => {
+    if (audioRef.current && id) {
+      try {
+        if (typeof audioRef.current.setSinkId !== 'undefined') {
+          audioRef.current.setSinkId(id);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  }, [id]);
+  return (
+    <>
+      <Button
+        variant="standard"
+        css={{
+          flexShrink: 0,
+          p: '$6 $9',
+          '@md': {
+            w: '100%',
+          },
+        }}
+        onClick={() => audioRef.current?.play()}
+        disabled={playing}
+      >
+        <SpeakerIcon />
+        &nbsp;Test{' '}
+        <Text as="span" css={{ display: 'none', '@md': { display: 'inline' } }}>
+          &nbsp; speaker
+        </Text>
+      </Button>
+      <audio ref={audioRef} src={TEST_AUDIO_URL} onEnded={() => setPlaying(false)} onPlay={() => setPlaying(true)} />
+    </>
+  );
+};
+
+export default Settings;

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

@@ -0,0 +1,91 @@
+import React, { useCallback } from 'react';
+import { selectIsLocalScreenShared, selectIsLocalVideoEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { Box, Flex, Slider, Text } from '../../../';
+import SwitchWithLabel from './SwitchWithLabel';
+import { useSetUiSettings } from '../AppData/useUISettings';
+import { settingOverflow } from './common.js';
+import { UI_MODE_ACTIVE_SPEAKER, UI_MODE_GRID, UI_SETTINGS } from '../../common/constants';
+
+export const LayoutSettings = () => {
+  const hmsActions = useHMSActions();
+  const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
+  const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);
+  const [
+    { isAudioOnly, uiViewMode, maxTileCount, mirrorLocalVideo, activeSpeakerSorting, hideLocalVideo },
+    setUISettings,
+  ] = useSetUiSettings();
+  const toggleIsAudioOnly = useCallback(
+    async isAudioOnlyModeOn => {
+      if (isAudioOnlyModeOn) {
+        // turn off video and screen share if user switches to audio only mode
+        isLocalVideoEnabled && (await hmsActions.setLocalVideoEnabled(false));
+        isLocalScreenShared && (await hmsActions.setScreenShareEnabled(false));
+      }
+      setUISettings({ [UI_SETTINGS.isAudioOnly]: isAudioOnlyModeOn });
+    },
+    [hmsActions, isLocalVideoEnabled, isLocalScreenShared, setUISettings],
+  );
+
+  return (
+    <Box className={settingOverflow()}>
+      <SwitchWithLabel
+        checked={uiViewMode === UI_MODE_ACTIVE_SPEAKER}
+        onChange={value => {
+          setUISettings({
+            [UI_SETTINGS.uiViewMode]: value ? UI_MODE_ACTIVE_SPEAKER : UI_MODE_GRID,
+          });
+        }}
+        id="activeSpeakerMode"
+        label="Active Speaker Mode"
+      />
+      <SwitchWithLabel
+        label="Active Speaker Sorting"
+        id="activeSpeakerSortingMode"
+        checked={activeSpeakerSorting}
+        onChange={value => {
+          setUISettings({
+            [UI_SETTINGS.activeSpeakerSorting]: value,
+          });
+        }}
+      />
+      <SwitchWithLabel label="Audio Only Mode" id="audioOnlyMode" checked={isAudioOnly} onChange={toggleIsAudioOnly} />
+      <SwitchWithLabel
+        label="Mirror Local Video"
+        id="mirrorMode"
+        checked={mirrorLocalVideo}
+        onChange={value => {
+          setUISettings({
+            [UI_SETTINGS.mirrorLocalVideo]: value,
+          });
+        }}
+      />
+      <SwitchWithLabel
+        label="Hide Local Video"
+        id="hideLocalVideo"
+        checked={hideLocalVideo}
+        onChange={value => {
+          setUISettings({
+            [UI_SETTINGS.hideLocalVideo]: value,
+          });
+        }}
+      />
+      <Flex align="center" css={{ w: '100%', my: '$2', py: '$8', '@md': { display: 'none' } }}>
+        <Text variant="md" css={{ fontWeight: '$semiBold' }}>
+          Tiles In View({maxTileCount})
+        </Text>
+        <Flex justify="end" css={{ flex: '1 1 0' }}>
+          <Slider
+            step={1}
+            value={[maxTileCount]}
+            min={1}
+            max={49}
+            onValueChange={e => {
+              setUISettings({ [UI_SETTINGS.maxTileCount]: e[0] });
+            }}
+            css={{ w: '70%' }}
+          />
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { AlertOctagonIcon, ChatIcon, ExitIcon, HandIcon, PersonIcon } from '@100mslive/react-icons';
+import { Box } from '../../../';
+import SwitchWithLabel from './SwitchWithLabel';
+import { useSetSubscribedNotifications, useSubscribedNotifications } from '../AppData/useUISettings';
+import { settingOverflow } from './common.js';
+import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
+
+const NotificationItem = ({ type, label, icon, checked }) => {
+  const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);
+  return (
+    <SwitchWithLabel
+      label={label}
+      id={type}
+      icon={icon}
+      checked={checked}
+      onChange={value => {
+        setSubscribedNotifications(value);
+      }}
+    />
+  );
+};
+
+export const NotificationSettings = () => {
+  const subscribedNotifications = useSubscribedNotifications();
+
+  return (
+    <Box className={settingOverflow()}>
+      <NotificationItem
+        label="Peer Joined"
+        type={SUBSCRIBED_NOTIFICATIONS.PEER_JOINED}
+        icon={<PersonIcon />}
+        checked={subscribedNotifications.PEER_JOINED}
+      />
+      <NotificationItem
+        label="Peer Leave"
+        type={SUBSCRIBED_NOTIFICATIONS.PEER_LEFT}
+        icon={<ExitIcon />}
+        checked={subscribedNotifications.PEER_LEFT}
+      />
+      <NotificationItem
+        label="New Message"
+        type={SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE}
+        icon={<ChatIcon />}
+        checked={subscribedNotifications.NEW_MESSAGE}
+      />
+      <NotificationItem
+        label="Hand Raised"
+        type={SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED}
+        icon={<HandIcon />}
+        checked={subscribedNotifications.METADATA_UPDATED}
+      />
+      <NotificationItem
+        label="Error"
+        type={SUBSCRIBED_NOTIFICATIONS.ERROR}
+        icon={<AlertOctagonIcon />}
+        checked={subscribedNotifications.ERROR}
+      />
+    </Box>
+  );
+};

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

@@ -0,0 +1,171 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
+import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
+import { ChevronLeftIcon, CrossIcon, GridFourIcon, NotificationsIcon, SettingsIcon } from '@100mslive/react-icons';
+import { Box, config as cssConfig, Dialog, Flex, IconButton, Tabs, Text } from '../../../';
+import DeviceSettings from './DeviceSettings';
+import { LayoutSettings } from './LayoutSettings';
+import { NotificationSettings } from './NotificationSettings';
+import { useHLSViewerRole } from '../AppData/useUISettings';
+import { settingContent } from './common.js';
+
+const settings = [
+  {
+    tabName: 'devices',
+    title: 'Device Settings',
+    icon: SettingsIcon,
+    content: DeviceSettings,
+  },
+  {
+    tabName: 'notifications',
+    title: 'Notifications',
+    icon: NotificationsIcon,
+    content: NotificationSettings,
+  },
+  {
+    tabName: 'layout',
+    title: 'Layout',
+    icon: GridFourIcon,
+    content: LayoutSettings,
+  },
+];
+
+const SettingsModal = ({ open, onOpenChange, children }) => {
+  const mediaQueryLg = cssConfig.media.md;
+  const isMobile = useMedia(mediaQueryLg);
+
+  const hlsViewerRole = useHLSViewerRole();
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const isHlsViewer = hlsViewerRole === localPeerRole;
+
+  const [showSetting, setShowSetting] = useState(() =>
+    settings.reduce((obj, { tabName }) => ({ ...obj, [tabName]: true }), {}),
+  );
+
+  const hideSettingByTabName = useCallback(
+    key => hide => setShowSetting(prev => ({ ...prev, [key]: !hide })),
+    [setShowSetting],
+  );
+
+  useEffect(() => {
+    if (isHlsViewer) {
+      hideSettingByTabName('layout')(true);
+    }
+  }, [isHlsViewer, hideSettingByTabName]);
+
+  const [selection, setSelection] = useState(() => Object.keys(showSetting).find(key => showSetting[key]) ?? '');
+  const resetSelection = useCallback(() => {
+    setSelection('');
+  }, []);
+
+  useEffect(() => {
+    if (isMobile) {
+      setSelection('');
+    } else {
+      const firstNotHiddenTabName = Object.keys(showSetting).find(key => showSetting[key]) ?? '';
+      setSelection(firstNotHiddenTabName);
+    }
+  }, [isMobile, showSetting]);
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Trigger asChild>{children}</Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content
+          css={{
+            w: 'min(800px, 90%)',
+            height: 'min(656px, 90%)',
+            p: 0,
+            r: '$4',
+          }}
+        >
+          <Tabs.Root
+            value={selection}
+            activationMode={isMobile ? 'manual' : 'automatic'}
+            onValueChange={setSelection}
+            css={{ size: '100%', position: 'relative' }}
+          >
+            <Tabs.List
+              css={{
+                w: isMobile ? '100%' : '18.625rem',
+                flexDirection: 'column',
+                bg: '$backgroundDefault',
+                p: '$14 $10',
+                borderTopLeftRadius: '$4',
+                borderBottomLeftRadius: '$4',
+              }}
+            >
+              <Text variant="h5">Settings </Text>
+              <Flex direction="column" css={{ mx: isMobile ? '-$8' : 0, overflowY: 'auto', pt: '$10' }}>
+                {settings
+                  .filter(({ tabName }) => showSetting[tabName])
+                  .map(({ icon: Icon, tabName, title }) => {
+                    return (
+                      <Tabs.Trigger key={tabName} value={tabName} css={{ gap: '$8' }}>
+                        <Icon />
+                        {title}
+                      </Tabs.Trigger>
+                    );
+                  })}
+              </Flex>
+            </Tabs.List>
+            {selection && (
+              <Flex
+                direction="column"
+                css={{
+                  flex: '1 1 0',
+                  minWidth: 0,
+                  mr: '$4',
+                  ...(isMobile
+                    ? {
+                        position: 'absolute',
+                        left: 0,
+                        right: 0,
+                        bg: '$surfaceDefault',
+                        width: '100%',
+                        height: '100%',
+                      }
+                    : {}),
+                }}
+              >
+                {settings
+                  .filter(({ tabName }) => showSetting[tabName])
+                  .map(({ content: Content, title, tabName }) => {
+                    return (
+                      <Tabs.Content key={tabName} value={tabName} className={settingContent()}>
+                        <SettingsContentHeader onBack={resetSelection} isMobile={isMobile}>
+                          {title}
+                        </SettingsContentHeader>
+                        <Content setHide={hideSettingByTabName(tabName)} />
+                      </Tabs.Content>
+                    );
+                  })}
+              </Flex>
+            )}
+          </Tabs.Root>
+          <Dialog.Close css={{ position: 'absolute', right: '$10', top: '$10' }}>
+            <IconButton as="div" data-testid="dialog_cross_icon">
+              <CrossIcon />
+            </IconButton>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+const SettingsContentHeader = ({ children, isMobile, onBack }) => {
+  return (
+    <Text variant="h6" css={{ mb: '$12', display: 'flex', alignItems: 'center' }}>
+      {isMobile && (
+        <Box as="span" css={{ bg: '$surfaceLight', mr: '$4', r: '$round', p: '$2' }} onClick={onBack}>
+          <ChevronLeftIcon />
+        </Box>
+      )}
+      {children}
+    </Text>
+  );
+};
+
+export default SettingsModal;

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

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import {
+  selectAppData,
+  selectPermissions,
+  useHMSActions,
+  useHMSStore,
+  useRecordingStreaming,
+} from '@100mslive/react-sdk';
+import { AlertTriangleIcon } from '@100mslive/react-icons';
+import { Button, Dialog, Flex, Text } from '../../../';
+import { ResolutionInput } from '../Streaming/ResolutionInput';
+import { getResolution } from '../Streaming/RTMPStreaming';
+import { ToastManager } from '../Toast/ToastManager';
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
+
+const StartRecording = ({ open, onOpenChange }) => {
+  const permissions = useHMSStore(selectPermissions);
+  const recordingUrl = useHMSStore(selectAppData(APP_DATA.recordingUrl));
+  const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
+
+  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
+  const hmsActions = useHMSActions();
+  if (!permissions?.browserRecording || isHLSRunning) {
+    return null;
+  }
+  if (isBrowserRecordingOn) {
+    return (
+      <Dialog.Root open={open} onOpenChange={onOpenChange}>
+        <Dialog.Portal>
+          <Dialog.Content
+            css={{
+              width: 'min(400px,80%)',
+              p: '$10',
+              bg: '#201617',
+            }}
+          >
+            <Dialog.Title>
+              <Flex gap={2} css={{ c: '$error' }}>
+                <AlertTriangleIcon />
+                <Text css={{ c: 'inherit' }} variant="h6">
+                  End Recording
+                </Text>
+              </Flex>
+            </Dialog.Title>
+            <Text variant="sm" css={{ c: '$textMedEmp', my: '$8' }}>
+              Are you sure you want to end recording? You can’t undo this action.
+            </Text>
+            <Flex justify="end" css={{ mt: '$12' }}>
+              <Dialog.Close asChild>
+                <Button outlined css={{ borderColor: '$secondaryLight', mr: '$4' }}>
+                  Don't end
+                </Button>
+              </Dialog.Close>
+              <Button
+                data-testid="stop_recording_confirm_mobile"
+                variant="danger"
+                icon
+                onClick={async () => {
+                  try {
+                    await hmsActions.stopRTMPAndRecording();
+                  } catch (error) {
+                    ToastManager.addToast({
+                      title: error.message,
+                      variant: 'error',
+                    });
+                  }
+                  onOpenChange(false);
+                }}
+              >
+                End recording
+              </Button>
+            </Flex>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  }
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
+        <Dialog.Title>
+          <Text variant="h6">Start Recording</Text>
+        </Dialog.Title>
+        <ResolutionInput
+          testId="recording_resolution_mobile"
+          css={{ flexDirection: 'column', alignItems: 'start' }}
+          onResolutionChange={setResolution}
+        />
+        <Button
+          data-testid="start_recording_confirm_mobile"
+          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);
+            }
+            onOpenChange(false);
+          }}
+        >
+          Start
+        </Button>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+};
+
+export default StartRecording;