@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Prebuilt/plugins/transcription/TranscriptionButton.jsx

@@ -1,138 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import {
-  selectIsAllowedToPublish,
-  selectSessionStore,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { ClosedCaptionIcon } from '@100mslive/react-icons';
-import { Box } from '../../../Layout';
-import { Text } from '../../../Text';
-import { Tooltip } from '../../../Tooltip';
-import IconButton from '../../IconButton';
-import { Transcriber } from './Transcriber';
-import { SESSION_STORE_KEY } from '../../common/constants';
-
-export function TranscriptionButton() {
-  const transcriptionState = useHMSStore(selectSessionStore(SESSION_STORE_KEY.TRANSCRIPTION_STATE));
-  const rawStore = useHMSVanillaStore();
-  const isTranscriptionEnabled = !!transcriptionState?.enabled;
-  let transcript = '',
-    speakingPeer = '';
-  if (isTranscriptionEnabled) {
-    transcript = transcriptionState.transcript || '';
-    speakingPeer = transcriptionState.speakingPeer || '';
-  }
-
-  const transcriber = useRef(null);
-  const hmsActions = useHMSActions();
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-
-  useEffect(() => {
-    hmsActions.sessionStore.observe(SESSION_STORE_KEY.TRANSCRIPTION_STATE);
-  }, [hmsActions]);
-
-  useEffect(() => {
-    if (!transcriber.current) {
-      // create transcriber with the current room state for transcription
-      transcriber.current = new Transcriber({
-        hmsStore: rawStore,
-        setTranscriptAndSpeakingPeer: async (transcript, peerName) => {
-          const transcriptionCurrentEnabledState = !!rawStore.getState(
-            selectSessionStore(SESSION_STORE_KEY.TRANSCRIPTION_STATE),
-          )?.enabled;
-          await hmsActions.sessionStore.set(SESSION_STORE_KEY.TRANSCRIPTION_STATE, {
-            enabled: transcriptionCurrentEnabledState,
-            transcript,
-            speakingPeer: peerName,
-          });
-        },
-        setIsTranscriptionEnabled: async newEnabledState => {
-          await hmsActions.sessionStore.set(SESSION_STORE_KEY.TRANSCRIPTION_STATE, {
-            enabled: newEnabledState,
-          });
-        },
-      });
-    }
-    return () => {
-      if (transcriber.current) {
-        transcriber.current.cleanup();
-      }
-    };
-  }, [hmsActions, rawStore]);
-
-  useEffect(() => {
-    // remote enabled transcript
-    if (isTranscriptionEnabled) {
-      transcriber.current.enableTranscription(true);
-    }
-  }, [isTranscriptionEnabled]);
-
-  const toggleTranscriptionState = useCallback(() => {
-    transcriber.current.toggleTranscriptionState();
-  }, []);
-
-  return (
-    <>
-      <Box
-        css={{
-          textAlign: 'left',
-          fontWeight: '$medium',
-          bottom: '120px',
-          position: 'fixed',
-          width: '100%',
-          fontSize: '$20px',
-          zIndex: '1000000',
-          color: 'white',
-          textShadow: '0px 0px 6px #000',
-          whiteSpace: 'pre-line',
-          paddingLeft: '40px',
-        }}
-      />
-      <Box
-        css={{
-          textAlign: 'center',
-          fontWeight: '$medium',
-          bottom: '90px',
-          position: 'fixed',
-          width: '100%',
-          fontSize: '$20px',
-          zIndex: '1000000',
-          color: 'white',
-          textShadow: '0px 0px 6px #000',
-          whiteSpace: 'pre-line',
-        }}
-      >
-        <Text
-          css={{
-            color: 'white',
-            textShadow: '0px 0px 6px #000',
-          }}
-        >
-          {transcript}
-        </Text>
-        <Text
-          css={{
-            color: '#c0bbbb',
-            textShadow: '0px 0px 6px #000',
-            textTransform: 'capitalize',
-          }}
-        >
-          {speakingPeer}
-        </Text>
-      </Box>
-      {isAllowedToPublish.audio && (
-        <Tooltip title={`Turn ${!isTranscriptionEnabled ? 'on' : 'off'} transcription`}>
-          <IconButton
-            active={!isTranscriptionEnabled}
-            onClick={toggleTranscriptionState}
-            data-testid="transcription_btn"
-          >
-            <ClosedCaptionIcon />
-          </IconButton>
-        </Tooltip>
-      )}
-    </>
-  );
-}

package/src/Prebuilt/plugins/transcription/index.jsx

@@ -1 +0,0 @@
-export { TranscriptionButton as default } from './TranscriptionButton';

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -1,285 +0,0 @@
-import React, { useRef } from 'react';
-import { CheckIcon, CloudUploadIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../Button';
-import { Checkbox } from '../../Checkbox';
-import { HorizontalDivider } from '../../Divider';
-import { IconButton } from '../../IconButton';
-import { Input } from '../../Input';
-import { Label } from '../../Label';
-import { Box, Flex } from '../../Layout';
-import { Dialog } from '../../Modal';
-import { Select } from '../../Select';
-import { Switch } from '../../Switch';
-import { Text } from '../../Text';
-import { flexCenter } from '../../utils';
-
-export const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {
-  return (
-    <Dialog.Portal>
-      <Dialog.Overlay />
-      <Dialog.Content css={{ width: 'min(600px, 100%)', ...css }} {...props}>
-        <Dialog.Title>
-          <Flex justify="between">
-            <Flex align="center" css={{ mb: '$1' }}>
-              {Icon ? (
-                <Flex css={{ mr: '$2', color: '$on_primary_high', ...flexCenter, ...iconCSS }}>
-                  <Icon />
-                </Flex>
-              ) : null}
-              <Text variant="h6" inline>
-                {title}
-              </Text>
-            </Flex>
-            {closeable && <Dialog.DefaultClose data-testid="dialoge_cross_icon" />}
-          </Flex>
-        </Dialog.Title>
-        <HorizontalDivider css={{ mt: '0.8rem' }} />
-        <Box>{children}</Box>
-      </Dialog.Content>
-    </Dialog.Portal>
-  );
-};
-
-export const ErrorDialog = ({ open = true, onOpenChange, title, children, ...props }) => {
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        Icon={CrossIcon}
-        title={title}
-        onInteractOutside={e => e.preventDefault()}
-        onEscapeKeyDown={e => e.preventDefault()}
-        onPointerDownOutside={e => e.preventDefault()}
-        closeable={false}
-        iconCSS={{ color: '$alert_error_default' }}
-        {...props}
-      >
-        <Box css={{ mt: '$lg' }}>{children}</Box>
-      </DialogContent>
-    </Dialog.Root>
-  );
-};
-
-export const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (
-  <Dialog.Root open={open} onOpenChange={onOpenChange}>
-    <Dialog.Portal>
-      <Dialog.Overlay />
-      <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
-        <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md' }}>
-          {Icon ? Icon : null}
-          <Text variant="h6">{title}</Text>
-        </Dialog.Title>
-        {typeof body === 'string' ? (
-          <Text
-            variant="md"
-            css={{
-              fontWeight: 400,
-              mt: '$4',
-              mb: '$10',
-              c: '$on_surface_medium',
-            }}
-          >
-            {body}
-          </Text>
-        ) : (
-          <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
-        )}
-        <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
-          <Box css={{ width: '50%' }}>
-            <Dialog.Close css={{ width: '100%' }}>
-              <Button variant="standard" outlined css={{ width: '100%' }}>
-                Cancel
-              </Button>
-            </Dialog.Close>
-          </Box>
-          <Box css={{ width: '50%' }}>
-            <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
-              {actionText}
-            </Button>
-          </Box>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Portal>
-  </Dialog.Root>
-);
-
-/**
- * a row of items which breaks into column on small screen. For example title on left and options to select
- * from on right for select component.
- */
-export const DialogRow = ({ children, breakSm = false, css, justify = 'between' }) => {
-  let finalCSS = {
-    margin: '$10 0',
-    w: '100%',
-  };
-  if (breakSm) {
-    finalCSS['@sm'] = {
-      flexDirection: 'column',
-      alignItems: 'flex-start',
-    };
-  }
-  if (css) {
-    finalCSS = Object.assign(finalCSS, css);
-  }
-  return (
-    <Flex align="center" justify={justify} css={finalCSS}>
-      {children}
-    </Flex>
-  );
-};
-
-export const DialogCol = ({ children, breakSm = false, css, align = 'center', justify = 'between', ...props }) => {
-  let finalCSS = {
-    margin: '$10 0',
-    w: '100%',
-  };
-  if (breakSm) {
-    finalCSS['@sm'] = {
-      alignItems: 'flex-start',
-    };
-  }
-  if (css) {
-    finalCSS = Object.assign(finalCSS, css);
-  }
-  return (
-    <Flex direction="column" align={align} justify={justify} css={finalCSS} {...props}>
-      {children}
-    </Flex>
-  );
-};
-
-/**
- * key field and label field are optional, option is directly used if not passed
- */
-export const DialogSelect = ({ title, options, keyField, labelField, selected, onChange, ...props }) => {
-  return (
-    <DialogRow breakSm>
-      <Label>{title}</Label>
-      <Select.Root data-testid={`dialog_select_${title}`} css={{ width: '70%', '@sm': { width: '100%' } }} {...props}>
-        <Select.DefaultDownIcon />
-        <Select.Select onChange={e => onChange(e.target.value)} value={selected} css={{ width: '100%' }}>
-          {options.map(option => {
-            const id = keyField ? option[keyField] : option;
-            const label = labelField ? option[labelField] : option;
-            return (
-              <option value={id} key={id}>
-                {label}
-              </option>
-            );
-          })}
-        </Select.Select>
-      </Select.Root>
-    </DialogRow>
-  );
-};
-
-export const DialogInput = ({ title, value, onChange, placeholder, disabled, type, ...props }) => {
-  return (
-    <DialogRow breakSm>
-      <Label>{title}</Label>
-      <Input
-        css={{ width: '70%', '@sm': { width: '100%' }, bg: '$surface_bright' }}
-        value={value}
-        onChange={e => onChange(e.target.value)}
-        placeholder={placeholder}
-        disabled={disabled}
-        type={type}
-        {...props}
-      />
-    </DialogRow>
-  );
-};
-
-export const DialogInputFile = ({ value, onChange, placeholder, disabled, type, ...props }) => {
-  const inputRef = useRef();
-  return (
-    <DialogCol
-      breakSm
-      onClick={() => inputRef.current?.click()}
-      css={{
-        justifyContent: 'center',
-        position: 'relative',
-        cursor: 'pointer',
-        py: '$12',
-        border: '1px dashed $border_bright',
-        r: '$1',
-        height: 'max(140px, 30%)',
-        alignItems: 'center',
-        m: '$6 0',
-      }}
-      gap="8"
-    >
-      <IconButton
-        variant="standard"
-        css={{
-          border: 'none',
-          background: 'none',
-          '&:hover': {
-            border: 'none',
-            background: 'none',
-            bg: 'transparent !important',
-          },
-        }}
-      >
-        <CloudUploadIcon
-          style={{
-            width: '3rem',
-            height: '3rem',
-          }}
-        />
-      </IconButton>
-      <Flex direction="row">
-        <Input
-          ref={inputRef}
-          css={{ width: '70%', '@sm': { width: '100%' } }}
-          value={value}
-          onChange={e => onChange(e.target)}
-          placeholder={placeholder}
-          disabled={disabled}
-          type={type}
-          hidden={true}
-          {...props}
-        />
-        <IconButton
-          variant="standard"
-          css={{
-            background: 'none',
-            border: 'none',
-            textDecoration: 'underline',
-            '&:hover': {
-              background: 'none !important',
-              border: 'none !important',
-            },
-          }}
-        >
-          <Text variant="md">{placeholder}</Text>
-        </IconButton>
-      </Flex>
-    </DialogCol>
-  );
-};
-
-export const DialogSwitch = ({ title, value, onChange, disabled }) => {
-  return (
-    <DialogRow>
-      <Text>{title}</Text>
-      <Flex justify="end" css={{ width: '70%' }}>
-        <Switch checked={value} disabled={disabled} onCheckedChange={onChange} />
-      </Flex>
-    </DialogRow>
-  );
-};
-
-export const DialogCheckbox = ({ title, value, onChange, disabled, css, id }) => {
-  return (
-    <DialogRow css={css}>
-      <Label htmlFor={id} css={{ cursor: 'pointer' }}>
-        {title}
-      </Label>
-      <Checkbox.Root checked={value} onCheckedChange={value => onChange(value)} disabled={disabled} id={id}>
-        <Checkbox.Indicator>
-          <CheckIcon width={16} height={16} />
-        </Checkbox.Indicator>
-      </Checkbox.Root>
-    </DialogRow>
-  );
-};

package/src/Prebuilt/primitives/DropdownTrigger.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
-import { Dropdown, Flex, Text, textEllipsis } from '../../index';
-
-const DialogDropdownTrigger = React.forwardRef(({ title, css, open, icon, titleCSS = {} }, ref) => {
-  return (
-    <Dropdown.Trigger
-      asChild
-      data-testid={`${title}_selector`}
-      css={{
-        border: '1px solid $border_bright',
-        bg: '$surface_bright',
-        r: '$1',
-        p: '$6 $9',
-        zIndex: 10,
-        ...css,
-      }}
-      ref={ref}
-    >
-      <Flex
-        css={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          color: '$on_surface_high',
-          w: '100%',
-        }}
-      >
-        {icon}
-        <Text
-          css={{
-            color: 'inherit',
-            ...textEllipsis('90%'),
-            flex: '1 1 0',
-            mx: icon ? '$6' : '0',
-            ...titleCSS,
-          }}
-        >
-          {title}
-        </Text>
-        {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
-      </Flex>
-    </Dropdown.Trigger>
-  );
-});
-
-export { DialogDropdownTrigger };

package/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts

@@ -1,60 +0,0 @@
-import type { Layout } from '@100mslive/types-prebuilt';
-import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
-
-export const defaultLayout: Layout = {
-  id: '',
-  role_id: '',
-  template_id: '',
-  app_id: '',
-  typography: {
-    font_family: 'Inter',
-  },
-  themes: [],
-  options: {},
-  screens: {
-    preview: {
-      default: {
-        elements: {
-          preview_header: {
-            title: 'Get Started',
-            sub_title: 'Setup your audio and video before joining',
-          },
-          join_form: {
-            join_btn_type: JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_ONLY,
-            join_btn_label: 'Join Now',
-            go_live_btn_label: 'Go Live',
-          },
-        },
-      },
-    },
-    conferencing: {
-      default: {
-        elements: {
-          chat: {
-            public_chat_enabled: true,
-            private_chat_enabled: true,
-            chat_title: 'Chat',
-            allow_pinning_messages: true,
-            message_placeholder: 'Send a message...',
-            roles_whitelist: [],
-            real_time_controls: {
-              can_disable_chat: true,
-              can_block_user: true,
-              can_hide_message: true,
-            },
-          },
-          participant_list: {},
-          video_tile_layout: {
-            grid: {
-              enable_local_tile_inset: true,
-              prominent_roles: [],
-              enable_spotlighting_peer: true,
-            },
-          },
-          emoji_reactions: {},
-        },
-      },
-    },
-    leave: {},
-  },
-};

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts

@@ -1,88 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { GetResponse, Layout } from '@100mslive/types-prebuilt';
-import { defaultLayout } from '../constants';
-
-// TODO: remove this usage
-const fetchWithRetry = async (url = '', options = {}) => {
-  const MAX_RETRIES = 4;
-  let error = Error('something went wrong');
-  for (let i = 0; i < MAX_RETRIES; i++) {
-    try {
-      return await fetch(url, options);
-    } catch (err) {
-      error = err as Error;
-    }
-  }
-  console.error('Fetch failed after max retries', { url, options });
-  throw error;
-};
-
-// this should take endpoint and return
-export type useFetchRoomLayoutProps = {
-  endpoint?: string;
-  authToken: string;
-};
-
-export type useFetchRoomLayoutResponse = {
-  layout: Layout | undefined;
-  updateRoomLayoutForRole: (role: string) => void;
-  setOriginalLayout: () => void;
-};
-
-export const useFetchRoomLayout = ({
-  endpoint = '',
-  authToken = '',
-}: useFetchRoomLayoutProps): useFetchRoomLayoutResponse => {
-  const [layout, setLayout] = useState<Layout | undefined>(undefined);
-  const layoutResp = useRef<GetResponse>();
-  const originalLayout = useRef<Layout>();
-  const isFetchInProgress = useRef(false);
-
-  const setOriginalLayout = useCallback(() => setLayout(originalLayout.current), []);
-
-  const updateRoomLayoutForRole = useCallback((role: string) => {
-    if (!layoutResp.current) {
-      return;
-    }
-    const [layout] = (layoutResp.current?.data || []).filter(layout => layout.role === role);
-    if (layout) {
-      setLayout(layout);
-    }
-  }, []);
-  useEffect(() => {
-    (async () => {
-      if (isFetchInProgress.current || !authToken) {
-        return;
-      }
-      isFetchInProgress.current = true;
-      try {
-        const resp = await fetchWithRetry(endpoint || 'https://api.100ms.live/v2/layouts/ui', {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
-        });
-        layoutResp.current = await resp.json();
-      } catch (e) {
-        console.error('[Room Layout API]: Failed to fetch / process room layout. Resorting to default layout.', e);
-        layoutResp.current = {
-          data: [defaultLayout],
-        };
-      }
-      let layoutForRole = layoutResp.current?.data?.[0];
-      if (!layoutForRole) {
-        console.error(
-          '[Room Layout API]: Unable to figure out room layout from API response. Resorting to default layout.',
-        );
-        layoutForRole = defaultLayout;
-      }
-      const layout = layoutForRole;
-      if (!originalLayout.current) {
-        originalLayout.current = layout;
-      }
-      setLayout(layout);
-      isFetchInProgress.current = false;
-    })();
-  }, [authToken, endpoint]);
-
-  return { layout, updateRoomLayoutForRole, setOriginalLayout };
-};

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useInsetEnabled.ts

@@ -1,10 +0,0 @@
-import { useRoomLayout } from '..';
-
-export const useInsetEnabled = (): boolean => {
-  const layout = useRoomLayout();
-  const { enable_local_tile_inset = true } =
-    //@ts-ignore
-    layout?.screens?.conferencing?.default?.elements?.video_tile_layout?.grid || {};
-
-  return enable_local_tile_inset;
-};