@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/AppData/useSidepane.js

@@ -0,0 +1,49 @@
+import { useCallback } from 'react';
+import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import { APP_DATA } from '../../common/constants';
+
+/**
+ * Gives a boolean value if the sidepaneType matches current sidepane value in store
+ * @param {string} sidepaneType
+ * @returns {boolean} - if the sidepaneType is passed returns boolean else the current value
+ */
+export const useIsSidepaneTypeOpen = sidepaneType => {
+  if (!sidepaneType) {
+    throw Error('Pass one of the side pane options');
+  }
+  return useHMSStore(selectAppData(APP_DATA.sidePane)) === sidepaneType;
+};
+
+/**
+ * Gives the current value of sidepane in store
+ * @returns {string} - if the sidepaneType is passed returns boolean else the current value
+ */
+export const useSidepaneState = () => {
+  const sidePane = useHMSStore(selectAppData(APP_DATA.sidePane));
+  return sidePane;
+};
+
+/**
+ * Toggle the sidepane value between passed sidePaneType and '';
+ * @param {string} sidepaneType
+ */
+export const useSidepaneToggle = sidepaneType => {
+  const hmsActions = useHMSActions();
+  const vanillaStore = useHMSVanillaStore();
+  const toggleSidepane = useCallback(() => {
+    const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sidePane)) === sidepaneType;
+    hmsActions.setAppData(APP_DATA.sidePane, !isOpen ? sidepaneType : '');
+  }, [vanillaStore, hmsActions, sidepaneType]);
+  return toggleSidepane;
+};
+
+/**
+ * reset's the sidepane value
+ */
+export const useSidepaneReset = () => {
+  const hmsActions = useHMSActions();
+  const resetSidepane = useCallback(() => {
+    hmsActions.setAppData(APP_DATA.sidePane, '');
+  }, [hmsActions]);
+  return resetSidepane;
+};

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -0,0 +1,164 @@
+import { useCallback } from 'react';
+import {
+  selectAppData,
+  selectAppDataByPath,
+  selectSessionStore,
+  selectTrackByID,
+  useHMSActions,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
+import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../../common/constants';
+
+/**
+ * fields saved related to UI settings in store's app data can be
+ * accessed using this hook. key is optional if not passed
+ * the whole UI settings object is returned. Usage -
+ * 1. val = useUiSettings("isAudioOnly");
+ *    console.log(val); // false
+ * 2. val = useUISettings();
+ *    console.log(val); // {isAudioOnly: false}
+ * @param {string | undefined} uiSettingKey
+ */
+export const useUISettings = uiSettingKey => {
+  const uiSettings = useHMSStore(selectAppDataByPath(APP_DATA.uiSettings, uiSettingKey));
+  return uiSettings;
+};
+
+/**
+ * fields saved related to UI settings in store's app data can be
+ * accessed using this hook. key is optional if not passed
+ * the whole UI settings object is returned. Usage -
+ * [val, setVal] = useUiSettings("isAudioOnly");
+ * console.log(val); // false
+ * setVal(true);
+ * @param {string} uiSettingKey
+ */
+export const useSetUiSettings = uiSettingKey => {
+  const value = useUISettings(uiSettingKey);
+  const setValue = useSetAppData({
+    key1: APP_DATA.uiSettings,
+    key2: uiSettingKey,
+  });
+  return [value, setValue];
+};
+
+export const useIsHeadless = () => {
+  const isHeadless = useUISettings(UI_SETTINGS.isHeadless);
+  return isHeadless;
+};
+
+export const useActiveSpeakerSorting = () => {
+  const activeSpeakerSorting = useUISettings(UI_SETTINGS.activeSpeakerSorting);
+  return activeSpeakerSorting;
+};
+
+export const useHLSViewerRole = () => {
+  return useHMSStore(selectAppData(APP_DATA.hlsViewerRole));
+};
+
+export const useWaitingViewerRole = () => {
+  return useHMSStore(selectAppData(APP_DATA.waitingViewerRole));
+};
+export const useIsHLSStartedFromUI = () => {
+  return useHMSStore(selectAppData(APP_DATA.hlsStarted));
+};
+
+export const useIsRTMPStartedFromUI = () => {
+  return useHMSStore(selectAppData(APP_DATA.rtmpStarted));
+};
+
+export const useTokenEndpoint = () => {
+  return useHMSStore(selectAppData(APP_DATA.tokenEndpoint));
+};
+
+export const useAuthToken = () => {
+  return useHMSStore(selectAppData(APP_DATA.authToken));
+};
+
+export const useLogo = () => {
+  return useHMSStore(selectAppData(APP_DATA.logo));
+};
+
+export const useUrlToEmbed = () => {
+  return useHMSStore(selectAppData(APP_DATA.embedConfig))?.url;
+};
+
+export const usePDFAnnotator = () => {
+  return useHMSStore(selectAppData(APP_DATA.pdfConfig))?.state;
+};
+export const usePinnedTrack = () => {
+  const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
+  const spotlightTrackId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
+  return useHMSStore(selectTrackByID(pinnedTrackId || spotlightTrackId));
+};
+
+export const useSubscribedNotifications = notificationKey => {
+  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.subscribedNotifications, notificationKey));
+  return notificationPreference;
+};
+
+export const useSetSubscribedNotifications = notificationKey => {
+  const value = useSubscribedNotifications(notificationKey);
+  const setValue = useSetAppData({
+    key1: APP_DATA.subscribedNotifications,
+    key2: notificationKey,
+  });
+  return [value, setValue];
+};
+
+export const useSubscribeChatSelector = chatSelectorKey => {
+  const chatSelectorPreference = useHMSStore(selectAppDataByPath(APP_DATA.chatSelector, chatSelectorKey));
+  return chatSelectorPreference;
+};
+
+export const useSetSubscribedChatSelector = chatSelectorKey => {
+  const value = useSubscribeChatSelector(chatSelectorKey);
+  const setValue = useSetAppData({
+    key1: APP_DATA.chatSelector,
+    key2: chatSelectorKey,
+  });
+  return [value, setValue];
+};
+
+export const useSetAppDataByKey = appDataKey => {
+  const value = useHMSStore(selectAppData(appDataKey));
+  const actions = useHMSActions();
+  const setValue = useCallback(
+    value => {
+      actions.setAppData(appDataKey, value);
+    },
+    [actions, appDataKey],
+  );
+  return [value, setValue];
+};
+
+const useSetAppData = ({ key1, key2 }) => {
+  const actions = useHMSActions();
+  const store = useHMSVanillaStore();
+  const [, setPreferences] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
+  const setValue = useCallback(
+    value => {
+      if (!key1) {
+        return;
+      }
+      actions.setAppData(
+        key1,
+        key2
+          ? {
+              [key2]: value,
+            }
+          : value,
+        true,
+      );
+      const appData = store.getState(selectAppData());
+      setPreferences({
+        ...appData.uiSettings,
+        subscribedNotifications: appData.subscribedNotifications,
+      });
+    },
+    [actions, key1, key2, store, setPreferences],
+  );
+  return setValue;
+};

package/src/Prebuilt/components/AudioLevel/BeamSpeakerLabelsLogging.jsx

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useHMSActions } from '@100mslive/react-sdk';
+import { useIsHeadless } from '../AppData/useUISettings';
+import { FeatureFlags } from '../../services/FeatureFlags';
+
+export function BeamSpeakerLabelsLogging() {
+  const hmsActions = useHMSActions();
+  const isHeadless = useIsHeadless();
+
+  useEffect(() => {
+    if (FeatureFlags.enableBeamSpeakersLogging && isHeadless) {
+      hmsActions.enableBeamSpeakerLabelsLogging();
+    }
+  }, [hmsActions, isHeadless]);
+  return null;
+}

package/src/Prebuilt/components/AudioVideoToggle.jsx

@@ -0,0 +1,67 @@
+import React, { Fragment } from 'react';
+import {
+  selectIsConnectedToRoom,
+  selectLocalVideoTrackID,
+  selectVideoTrackByID,
+  useAVToggle,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { CameraFlipIcon, MicOffIcon, MicOnIcon, VideoOffIcon, VideoOnIcon } from '@100mslive/react-icons';
+import { ToastManager } from './Toast/ToastManager';
+import { Tooltip } from '../../Tooltip';
+import IconButton from '../IconButton';
+import { isMacOS } from '../common/constants';
+
+export const AudioVideoToggle = () => {
+  const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
+  const actions = useHMSActions();
+  const videoTracKId = useHMSStore(selectLocalVideoTrackID);
+  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTracKId));
+  const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
+
+  return (
+    <Fragment>
+      {toggleAudio ? (
+        <Tooltip title={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}>
+          <IconButton active={isLocalAudioEnabled} onClick={toggleAudio} key="toggleAudio" data-testid="audio_btn">
+            {!isLocalAudioEnabled ? (
+              <MicOffIcon data-testid="audio_off_btn" />
+            ) : (
+              <MicOnIcon data-testid="audio_on_btn" />
+            )}
+          </IconButton>
+        </Tooltip>
+      ) : null}
+      {toggleVideo ? (
+        <Tooltip title={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}>
+          <IconButton key="toggleVideo" active={isLocalVideoEnabled} onClick={toggleVideo} data-testid="video_btn">
+            {!isLocalVideoEnabled ? (
+              <VideoOffIcon data-testid="video_off_btn" />
+            ) : (
+              <VideoOnIcon data-testid="video_on_btn" />
+            )}
+          </IconButton>
+        </Tooltip>
+      ) : null}
+      {localVideoTrack?.facingMode && isConnectedToRoom ? (
+        <Tooltip title="Switch Camera" key="switchCamera">
+          <IconButton
+            onClick={async () => {
+              try {
+                await actions.switchCamera();
+              } catch (e) {
+                ToastManager.addToast({
+                  title: `Error while flipping camera ${e.message || ''}`,
+                  variant: 'error',
+                });
+              }
+            }}
+          >
+            <CameraFlipIcon />
+          </IconButton>
+        </Tooltip>
+      ) : null}
+    </Fragment>
+  );
+};

package/src/Prebuilt/components/AuthToken.jsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { matchPath, useLocation } from 'react-router-dom';
+import { useSearchParam } from 'react-use';
+import { v4 as uuid } from 'uuid';
+import { useHMSActions } from '@100mslive/react-sdk';
+import { styled } from '../../Theme';
+import { useHMSPrebuiltContext } from '../AppContext';
+import { ErrorDialog } from '../primitives/DialogContent';
+import { useSetAppDataByKey, useTokenEndpoint } from './AppData/useUISettings';
+import getToken from '../services/tokenService';
+import { APP_DATA, QUERY_PARAM_AUTH_TOKEN } from '../common/constants';
+
+/**
+ * query params exposed -
+ * skip_preview=true => used by recording and streaming service, skips preview and directly joins
+ *                      header and footer don't show up in this case
+ * skip_preview_headful=true => used by automation testing to skip preview without impacting the UI
+ * name=abc => gives the initial name for the peer joining
+ * auth_token=123 => uses the passed in token to join instead of fetching from token endpoint
+ * ui_mode=activespeaker => lands in active speaker mode after joining the room
+ */
+const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {
+  const hmsActions = useHMSActions();
+  const tokenEndpoint = useTokenEndpoint();
+  const { showPreview, roomCode } = useHMSPrebuiltContext();
+  const location = useLocation();
+  const matches = useMemo(
+    () =>
+      matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomId/:role`, location.pathname) ||
+      matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomCode/`, location.pathname),
+    [location, showPreview],
+  );
+  const { roomCode: urlRoomCode, roomId: urlRoomId, role: userRole } = matches?.params || {};
+  const [error, setError] = useState({ title: '', body: '' });
+  let authToken = useSearchParam(QUERY_PARAM_AUTH_TOKEN);
+  const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
+
+  useEffect(() => {
+    if (authToken) {
+      setAuthTokenInAppData(authToken);
+      return;
+    }
+    if (!tokenEndpoint && !urlRoomId && !roomCode && !urlRoomCode) {
+      return;
+    }
+    const code = !userRole && (roomCode || urlRoomCode);
+
+    const getTokenFn = code
+      ? () => hmsActions.getAuthTokenByRoomCode({ roomCode: code }, { endpoint: authTokenByRoomCodeEndpoint })
+      : () => getToken(tokenEndpoint, uuid(), userRole, urlRoomId);
+
+    getTokenFn()
+      .then(token => {
+        setAuthTokenInAppData(token);
+      })
+      .catch(error => {
+        setError(convertError(error));
+      });
+  }, [
+    hmsActions,
+    tokenEndpoint,
+    urlRoomId,
+    urlRoomCode,
+    userRole,
+    authToken,
+    authTokenByRoomCodeEndpoint,
+    setAuthTokenInAppData,
+    roomCode,
+  ]);
+
+  if (error.title) {
+    return <ErrorDialog title={error.title}>{error.body}</ErrorDialog>;
+  }
+  return null;
+});
+
+const convertError = error => {
+  console.error('[error]', { error });
+  if (error.action === 'GET_TOKEN' && error.code === 403) {
+    return {
+      title: 'Room code is disabled',
+      body: ErrorWithSupportLink('Room code corresponding to this link is no more active.'),
+    };
+  } else if (error.action === 'GET_TOKEN' && error.code === 404) {
+    return {
+      title: 'Room code does not exist',
+      body: ErrorWithSupportLink('We could not find a room code corresponding to this link.'),
+    };
+  } else if (error.action === 'GET_TOKEN' && error.code === 2003) {
+    return {
+      title: 'Endpoint is not reachable',
+      body: ErrorWithSupportLink(`Endpoint is not reachable. ${error.description}.`),
+    };
+  } else if (error.response && error.response.status === 404) {
+    return {
+      title: 'Room does not exist',
+      body: ErrorWithSupportLink('We could not find a room corresponding to this link.'),
+    };
+  } else if (error.response && error.response.status === 403) {
+    return {
+      title: 'Accessing room using this link format is disabled',
+      body: ErrorWithSupportLink('You can re-enable this from the developer section in Dashboard.'),
+    };
+  } else {
+    console.error('Token API Error', error);
+    return {
+      title: 'Error fetching token',
+      body: ErrorWithSupportLink(
+        'An error occurred while fetching the app token. Please look into logs for more details.',
+      ),
+    };
+  }
+};
+
+const Link = styled('a', {
+  color: '#2f80e1',
+});
+
+export const ErrorWithSupportLink = errorMessage => (
+  <div>
+    {errorMessage} If you think this is a mistake on our side, please create{' '}
+    <Link target="_blank" href="https://github.com/100mslive/100ms-web/issues" rel="noreferrer">
+      an issue
+    </Link>{' '}
+    or reach out over{' '}
+    <Link target="_blank" href="https://discord.com/invite/kGdmszyzq2" rel="noreferrer">
+      Discord
+    </Link>
+    .
+  </div>
+);
+
+export default AuthToken;

package/src/Prebuilt/components/BottomActionSheet/BottomActionSheet.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { CrossIcon } from '@100mslive/react-icons';
+import { Box, Flex, Popover, Text } from '../../..';
+import { getUpdatedHeight } from '../../common/utils';
+
+const BottomActionSheet = ({
+  title = '',
+  children = <></>,
+  triggerContent,
+  containerCSS = {},
+  // By default the component starts just above the trigger.
+  // A negative offset allows it to start from the bottom of the screen.
+  sideOffset = -50,
+  defaultHeight = 50,
+}) => {
+  const MINIMUM_HEIGHT = 20; // vh
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [sheetHeight, setSheetHeight] = useState(`${Math.min(Math.max(MINIMUM_HEIGHT, defaultHeight), 100)}vh`);
+  const closeRef = useRef(null);
+
+  // Close the sheet if height goes under MINIMUM_HEIGHT
+  useEffect(() => {
+    if (closeRef?.current && parseFloat(sheetHeight.slice(0, -2)) <= MINIMUM_HEIGHT) {
+      setSheetOpen(false);
+      // Delay for showing the opacity animation, can be removed if not needed
+      setTimeout(() => closeRef.current?.click(), 200);
+    }
+  }, [sheetHeight]);
+
+  return (
+    <>
+      <Popover.Root
+        onOpenChange={open => {
+          if (!open) {
+            setSheetHeight('0');
+          }
+          setSheetOpen(open);
+        }}
+      >
+        <Popover.Trigger asChild>{triggerContent}</Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content sideOffset={sideOffset} style={{ zIndex: '2' }}>
+            <Box
+              css={{
+                w: '100vw',
+                py: '$8',
+                opacity: sheetOpen ? '1' : '0.5',
+                h: sheetHeight,
+                minHeight: '50vh',
+                overflowY: 'auto',
+                backgroundColor: '$surface_default',
+                transition: 'all 0.2s linear',
+                ...containerCSS,
+              }}
+            >
+              <Flex
+                justify="between"
+                onTouchMove={e => {
+                  const updatedSheetHeight = getUpdatedHeight(e, MINIMUM_HEIGHT);
+                  setSheetHeight(updatedSheetHeight);
+                }}
+                css={{
+                  borderBottom: '1px solid $border_bright',
+                  px: '$8',
+                  pb: '$4',
+                  mb: '$4',
+                  w: '100%',
+                }}
+              >
+                <Text variant="h6" css={{ color: '$on_surface_high' }}>
+                  {title}
+                </Text>
+                <Popover.Close aria-label="Close">
+                  <Box
+                    ref={closeRef}
+                    css={{
+                      color: '$on_surface_high',
+                      bg: '$surface_bright',
+                      p: '$2',
+                      borderRadius: '$round',
+                    }}
+                  >
+                    <CrossIcon />
+                  </Box>
+                </Popover.Close>
+              </Flex>
+              <Box css={{ px: '$8', maxHeight: '100%', overflowY: 'auto' }}>{children}</Box>
+            </Box>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </>
+  );
+};
+
+export default BottomActionSheet;

package/src/Prebuilt/components/BottomActionSheet/BottomActionSheet.stories.tsx

@@ -0,0 +1,46 @@
+import React, { ReactElement } from 'react';
+import { Meta } from '@storybook/react';
+import { Button } from '../../../Button';
+import { Box } from '../../../Layout';
+import { Text } from '../../../Text';
+import { CSS } from '../../../Theme';
+import BottomActionSheet from './BottomActionSheet';
+
+// WIP
+
+export default {
+  title: 'Components/BottomActionSheet',
+  component: BottomActionSheet,
+  argTypes: {
+    title: { control: 'text' },
+    triggerContent: { control: 'jsx' },
+    containerCSS: { control: 'object' },
+    sideOffset: { control: 'number' },
+    defaultHeight: { control: 'number' },
+  },
+} as Meta;
+
+interface BottomActionSheetProps {
+  title: string;
+  triggerContent: ReactElement;
+  children: ReactElement;
+  containerCSS: CSS;
+  sideOffset: number;
+  defaultHeight: number;
+}
+
+const Template = (args: BottomActionSheetProps) => (
+  <BottomActionSheet {...args}>
+    <Box>
+      <Text>This is the content of the BottomActionSheet.</Text>
+      <Text>You can put any content you like here.</Text>
+    </Box>
+  </BottomActionSheet>
+);
+
+// Example story with default props
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Example BottomActionSheet',
+  triggerContent: <Button>Open BottomActionSheet</Button>,
+};