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

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

@@ -1,112 +0,0 @@
-import { useMemo } from 'react';
-import {
-  ConferencingScreen,
-  DefaultConferencingScreen_Elements,
-  DefaultPreviewScreen_Elements,
-  HLSLiveStreamingScreen_Elements,
-  LeaveScreen,
-  PreviewScreen,
-  Screens,
-} from '@100mslive/types-prebuilt';
-import {
-  selectHLSState,
-  selectPeerCount,
-  selectRoomStartTime,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
-import { useRoomLayout } from '..';
-// @ts-ignore
-import { getFormattedCount } from '../../../common/utils';
-
-export type useRoomLayoutScreenProps = {
-  screen: keyof Screens;
-};
-
-type useRoomLayoutScreenReturnType<T extends useRoomLayoutScreenProps> = T['screen'] extends 'conferencing'
-  ? ConferencingScreen
-  : T['screen'] extends 'leave'
-  ? LeaveScreen
-  : T['screen'] extends 'preview'
-  ? PreviewScreen
-  : undefined;
-
-function useRoomLayoutScreen<T extends useRoomLayoutScreenProps>({
-  screen,
-}: T): useRoomLayoutScreenReturnType<T> | undefined {
-  const roomLayout = useRoomLayout();
-  const screenProps = roomLayout?.screens?.[screen] as useRoomLayoutScreenReturnType<T> | undefined;
-  return screenProps;
-}
-
-type PreviewKeys = Omit<PreviewScreen, 'skip_preview_screen'>;
-
-export function useRoomLayoutPreviewScreen() {
-  const screenProps = useRoomLayoutScreen({ screen: 'preview' });
-  const isPreviewScreenEnabled = !!screenProps && !screenProps?.skip_preview_screen;
-  let elements: DefaultPreviewScreen_Elements | undefined;
-  let screenType: keyof PreviewKeys | undefined;
-  if (isPreviewScreenEnabled) {
-    screenType = Object.keys(screenProps).filter(key => key !== 'skip_preview_screen')[0] as keyof PreviewKeys;
-    elements = screenProps[screenType]?.elements;
-  }
-  return {
-    isPreviewScreenEnabled,
-    elements,
-    screenType,
-  };
-}
-
-export type ConferencingScreenElements = DefaultConferencingScreen_Elements & HLSLiveStreamingScreen_Elements;
-
-export function useRoomLayoutConferencingScreen() {
-  const screenProps = useRoomLayoutScreen({ screen: 'conferencing' }) || {};
-  const screenType = Object.keys(screenProps)[0] as keyof ConferencingScreen;
-  const elements = screenProps[screenType]?.elements as ConferencingScreenElements;
-  // @ts-ignore
-  const hideSections: string[] = screenProps[screenType]?.hideSections || [];
-  return {
-    hideSections,
-    elements,
-    screenType,
-  };
-}
-
-export function useRoomLayoutLeaveScreen() {
-  const screenProps = useRoomLayoutScreen({ screen: 'leave' });
-  const isLeaveScreenEnabled = !!screenProps;
-  return {
-    isLeaveScreenEnabled,
-    feedback: screenProps?.default?.elements?.feedback,
-  };
-}
-
-export function useRoomLayoutHeader() {
-  const { elements } = useRoomLayoutConferencingScreen();
-  // return elements.header;
-  const { isRecordingOn } = useRecordingStreaming();
-  const peerCount = useHMSStore(selectPeerCount);
-  const sessionStartedAt = useHMSStore(selectRoomStartTime);
-  const hlsState = useHMSStore(selectHLSState);
-
-  // People watching, start timestamp, recording status
-  const details = useMemo(() => {
-    const details = [];
-    if (hlsState?.variants[0]?.['startedAt']) {
-      details.push(`${getFormattedCount(peerCount)} watching`);
-      details.push(hlsState.variants[0]['startedAt']);
-    } else if (sessionStartedAt) {
-      details.push(sessionStartedAt);
-    }
-    if (isRecordingOn) {
-      details.push('Recording');
-    }
-    return details;
-  }, [hlsState?.variants, isRecordingOn, peerCount, sessionStartedAt]);
-
-  return {
-    title: elements.header?.title || '',
-    description: elements.header?.description || '',
-    details,
-  };
-}

package/src/Prebuilt/provider/roomLayoutProvider/index.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import type { Layout } from '@100mslive/types-prebuilt';
-import { isArray, mergeWith } from 'lodash';
-// @ts-ignore: fix types
-import { useAuthToken } from '../../components/AppData/useUISettings';
-import { useFetchRoomLayout, useFetchRoomLayoutResponse } from './hooks/useFetchRoomLayout';
-
-export type RoomLayoutProviderProps = {
-  roomLayoutEndpoint?: string;
-  overrideLayout?: Partial<Layout>;
-};
-
-export const RoomLayoutContext = React.createContext<
-  | {
-      layout: Layout | undefined;
-      updateRoomLayoutForRole: useFetchRoomLayoutResponse['updateRoomLayoutForRole'] | undefined;
-      setOriginalLayout: useFetchRoomLayoutResponse['setOriginalLayout'] | undefined;
-    }
-  | undefined
->(undefined);
-
-// The default merge in lodash merges the values of current layout and the changes.
-// This behaviour makes changes in array based values inconsistent since a union happens.
-// The customizer uses the new value provided if one of the values is an array
-function customizer(objValue: unknown, srcValue: unknown) {
-  if (isArray(objValue) || isArray(srcValue)) {
-    return srcValue;
-  }
-  // default merge behaviour is followed
-  return undefined;
-}
-
-export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>> = ({
-  children,
-  roomLayoutEndpoint,
-  overrideLayout,
-}) => {
-  const authToken: string = useAuthToken();
-  const { layout, updateRoomLayoutForRole, setOriginalLayout } = useFetchRoomLayout({
-    authToken,
-    endpoint: roomLayoutEndpoint,
-  });
-  const mergedLayout = authToken && layout ? mergeWith(layout, overrideLayout, customizer) : layout;
-  return (
-    <RoomLayoutContext.Provider value={{ layout: mergedLayout, updateRoomLayoutForRole, setOriginalLayout }}>
-      {children}
-    </RoomLayoutContext.Provider>
-  );
-};
-
-export const useRoomLayout = () => React.useContext(RoomLayoutContext)?.layout;
-export const useUpdateRoomLayout = () => React.useContext(RoomLayoutContext)?.updateRoomLayoutForRole;
-export const useSetOriginalLayout = () => React.useContext(RoomLayoutContext)?.setOriginalLayout;

package/src/Prebuilt/services/FeatureFlags.jsx

@@ -1,46 +0,0 @@
-import { useEffect } from 'react';
-import { selectRoomID, useHMSStore } from '@100mslive/react-sdk';
-
-export class FeatureFlags {
-  static enableTranscription = process.env.REACT_APP_ENABLE_TRANSCRIPTION === 'true';
-  static enableStatsForNerds = process.env.REACT_APP_ENABLE_STATS_FOR_NERDS === 'true';
-  static enableWhiteboard =
-    process.env.REACT_APP_ENABLE_WHITEBOARD &&
-    process.env.REACT_APP_PUSHER_APP_KEY &&
-    process.env.REACT_APP_PUSHER_AUTHENDPOINT;
-
-  static init(roomId) {
-    if (!window.HMS) {
-      window.HMS = {};
-    }
-    // some extra config to hls js to bring down latency
-    window.HMS.OPTIMISE_HLS_LATENCY = false;
-    // ask permissions in preview even if role doesn't have it
-    window.HMS.ALWAYS_REQUEST_PERMISSIONS = false;
-    window.HMS.SHOW_NS = process.env.REACT_APP_ENV !== 'prod';
-
-    this.enableTranscription = process.env.REACT_APP_TRANSCRIPTION_ROOM_ID === roomId;
-  }
-
-  static showNS() {
-    return window.HMS.SHOW_NS;
-  }
-
-  static optimiseHLSLatency() {
-    return window.HMS.OPTIMISE_HLS_LATENCY;
-  }
-
-  static alwaysRequestPermissions() {
-    return window.HMS.ALWAYS_REQUEST_PERMISSIONS;
-  }
-}
-
-export function FeatureFlagsInit() {
-  const roomId = useHMSStore(selectRoomID);
-  useEffect(() => {
-    if (roomId) {
-      FeatureFlags.init(roomId);
-    }
-  }, [roomId]);
-  return null;
-}

package/src/Progress/index.tsx

@@ -1,17 +0,0 @@
-import { Indicator, Root } from '@radix-ui/react-progress';
-import { styled } from '../Theme';
-
-const StyledIndicator = styled(Indicator, { h: '$4', backgroundColor: '$primary_default' });
-
-const StyledRoot = styled(Root, {
-  w: '100%',
-  h: '$4',
-  borderRadius: '$round',
-  backgroundColor: '$secondary_dim',
-  overflow: 'hidden',
-});
-
-export const Progress = {
-  Root: StyledRoot,
-  Content: StyledIndicator,
-};

package/src/QRCode/QRCode.tsx

@@ -1,6 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { QRCodeSVG } from 'qrcode.react';
-
-export const QRCode = (props: ComponentProps<typeof QRCodeSVG>) => {
-  return <QRCodeSVG style={{ width: '100%', height: '100%' }} {...props} />;
-};

package/src/QRCode/index.tsx

@@ -1 +0,0 @@
-export * from './QRCode';

package/src/RadioGroup/RadioGroup.tsx

@@ -1,33 +0,0 @@
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { styled } from '../Theme';
-
-const RadioGroupRoot = styled(RadioGroupPrimitive.Root, {
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const RadioGroupItem = styled(RadioGroupPrimitive.Item, {
-  bg: '$on_primary_high',
-  width: '$8',
-  height: '$8',
-  border: '1px solid $primary_default',
-  cursor: 'pointer',
-  borderRadius: '$round',
-  '&:focus': {
-    boxShadow: 'none',
-    outline: 'none',
-  },
-  '&[data-state="checked"]': {
-    borderWidth: '$space$2',
-    p: '$1',
-  },
-});
-const RadioGroupIndicator = styled(RadioGroupPrimitive.Indicator, {
-  bg: '$primary_default',
-});
-
-export const RadioGroup = {
-  Root: RadioGroupRoot,
-  Item: RadioGroupItem,
-  Indicator: RadioGroupIndicator,
-};

package/src/RadioGroup/index.tsx

@@ -1 +0,0 @@
-export * from './RadioGroup';

package/src/ReactSelect/ReactSelect.tsx

@@ -1,97 +0,0 @@
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { styled } from '../Theme';
-
-const StyledRoot = styled(SelectPrimitive.Root, {});
-
-const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
-  all: 'unset',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '$2',
-  padding: '$8',
-  lineHeight: '$px',
-  gap: '$8',
-  backgroundColor: '$secondary_default',
-  color: '$on_primary_high',
-  fontSize: '$8',
-  cursor: 'pointer',
-  r: '$1',
-});
-
-const StyledContent = styled(SelectPrimitive.Content, {
-  overflow: 'hidden',
-  backgroundColor: '$surface_bright',
-  r: '$1',
-  h: '$80',
-});
-
-const StyledViewport = styled(SelectPrimitive.Viewport, {
-  padding: '$3',
-});
-
-const StyledItem = styled(SelectPrimitive.Item, {
-  all: 'unset',
-  fontSize: '$7',
-  r: '$1',
-  display: 'flex',
-  p: '$4 $8',
-  w: '$52',
-  position: 'relative',
-  userSelect: 'none',
-  cursor: 'pointer',
-});
-
-const StyledLabel = styled(SelectPrimitive.Label, {
-  p: '$4 $8',
-  lineHeight: '$10',
-  color: '$on_primary_high',
-});
-
-const StyledSeparator = styled(SelectPrimitive.Separator, {
-  height: '$px',
-  backgroundColor: '$on_primary_high',
-  margin: '$4',
-  opacity: 0.4,
-});
-
-const StyledItemIndicator = styled(SelectPrimitive.ItemIndicator, {
-  position: 'absolute',
-  right: '$8',
-  width: '$8',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: '$on_primary_high',
-});
-
-const scrollButtonStyles = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  p: '$4',
-  backgroundColor: '$surface_bright',
-  color: '$on_primary_high',
-  cursor: 'default',
-};
-
-const StyledScrollUpButton = styled(SelectPrimitive.ScrollUpButton, scrollButtonStyles);
-
-const StyledScrollDownButton = styled(SelectPrimitive.ScrollDownButton, scrollButtonStyles);
-
-export const Select = {
-  Root: StyledRoot,
-  Trigger: StyledTrigger,
-  Content: StyledContent,
-  Viewport: StyledViewport,
-  Item: StyledItem,
-  Label: StyledLabel,
-  Separator: StyledSeparator,
-  ItemIndicator: StyledItemIndicator,
-  ScrollUpButton: StyledScrollUpButton,
-  ScrollDownButton: StyledScrollDownButton,
-  Value: SelectPrimitive.Value,
-  Icon: SelectPrimitive.Icon,
-  ItemText: SelectPrimitive.ItemText,
-  Group: SelectPrimitive.Group,
-};

package/src/ReactSelect/index.ts

@@ -1 +0,0 @@
-export { Select } from './ReactSelect';

package/src/Select/Select.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { ChevronDownIcon } from '@100mslive/react-icons';
-import { styled } from '../Theme';
-
-const Root = styled('div', {
-  color: '$on_primary_high',
-  display: 'inline-flex',
-  position: 'relative',
-  outline: 'none',
-  overflow: 'hidden',
-  borderRadius: '$1',
-  backgroundColor: '$surface_default',
-  maxWidth: '100%',
-});
-
-// TODO: replace these with tokens
-const SelectRoot = styled('select', {
-  h: '$16',
-  fontSize: '$md',
-  fontWeight: '500',
-  lineHeight: 'inherit',
-  textTransform: 'none',
-  appearance: 'none',
-  color: '$on_secondary_high',
-  padding: '5px',
-  paddingLeft: '12px',
-  paddingRight: '30px',
-  border: 'none',
-  borderRadius: '8px',
-  backgroundColor: '$secondary_default',
-  '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-  '&[disabled]': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-  },
-});
-
-const Arrow = styled('span', {
-  color: '$on_secondary_high',
-  width: '30px',
-  height: '100%',
-  position: 'absolute',
-  right: 0,
-  pointerEvents: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  transition: 'border .2s ease 0s',
-});
-
-const DefaultDownIcon = ({ ...props }) => (
-  <Arrow {...props}>
-    <ChevronDownIcon />
-  </Arrow>
-);
-
-export const Select = {
-  Root,
-  DownIcon: Arrow,
-  DefaultDownIcon,
-  Select: SelectRoot,
-};

package/src/Select/index.ts

@@ -1 +0,0 @@
-export { Select } from './Select';

package/src/Sheet/Sheet.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { CSS, VariantProps } from '@stitches/react';
-import { Dialog } from '../Modal';
-import { styled } from '../Theme';
-import { sheetFadeIn, sheetFadeOut, sheetSlideIn, sheetSlideOut } from '../utils';
-
-const SheetRoot = styled(DialogPrimitive.Root, {
-  minHeight: '240px',
-  maxWidth: '100%',
-});
-const SheetTrigger = styled(DialogPrimitive.Trigger, {
-  appearance: 'none !important', // Needed for safari it shows white overlay
-});
-
-const StyledOverlay = styled(Dialog.Overlay, {
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-
-  '&[data-state="open"]': {
-    animation: `${sheetFadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-  },
-
-  '&[data-state="closed"]': {
-    animation: `${sheetFadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-  },
-});
-
-const StyledContent = styled(DialogPrimitive.Content, {
-  color: '$on_surface_medium',
-  backgroundColor: '$surface_default',
-  borderTopLeftRadius: '$3',
-  borderTopRightRadius: '$3',
-  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-  position: 'fixed',
-  zIndex: 22,
-  top: 0,
-  right: 0,
-  left: 0,
-  bottom: 0,
-  maxHeight: '96%',
-
-  // Among other things, prevents text alignment inconsistencies when dialog can't be centered in the viewport evenly.
-  // Affects animated and non-animated dialogs alike.
-  willChange: 'transform',
-
-  '&:focus': {
-    outline: 'none',
-  },
-  '@allowMotion': {
-    '&[data-state="open"]': {
-      animation: `${sheetSlideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-    },
-
-    '&[data-state="closed"]': {
-      animation: `${sheetSlideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-    },
-  },
-  '@ls': {
-    maxWidth: '50%',
-    margin: '0 auto',
-  },
-
-  variants: {
-    side: {
-      top: {
-        $$transformValue: 'translate3d(0,-100%,0)',
-        bottom: 'auto',
-      },
-      right: {
-        $$transformValue: 'translate3d(100%,0,0)',
-        right: 0,
-      },
-      bottom: {
-        $$transformValue: 'translate3d(0,100%,0)',
-        bottom: 0,
-        top: 'auto',
-      },
-      left: {
-        $$transformValue: 'translate3d(-100%,0,0)',
-        left: 0,
-      },
-    },
-  },
-
-  defaultVariants: {
-    side: 'bottom',
-  },
-});
-
-type SheetContentVariants = VariantProps<typeof StyledContent>;
-type DialogContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;
-type SheetContentProps = DialogContentPrimitiveProps & SheetContentVariants & { css?: CSS; container?: HTMLElement };
-
-const SheetContent = React.forwardRef<React.ElementRef<typeof StyledContent>, SheetContentProps>(
-  ({ children, container, ...props }, forwardedRef) => (
-    <Dialog.Portal container={container}>
-      <StyledOverlay />
-      <StyledContent {...props} ref={forwardedRef}>
-        {children}
-      </StyledContent>
-    </Dialog.Portal>
-  ),
-);
-const SheetClose = Dialog.Close;
-const SheetTitle = styled(DialogPrimitive.Title, {
-  margin: 0,
-});
-const SheetDescription = Dialog.Description;
-const SheetDefaultCloseIcon = Dialog.DefaultClose;
-
-export const Sheet = {
-  Root: SheetRoot,
-  Trigger: SheetTrigger,
-  Content: SheetContent,
-  Description: SheetDescription,
-  Title: SheetTitle,
-  Close: SheetClose,
-  DefaultClose: SheetDefaultCloseIcon,
-};

package/src/Sheet/index.ts

@@ -1 +0,0 @@
-export { Sheet } from './Sheet';

package/src/Slider/Slider.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import * as BaseSlider from '@radix-ui/react-slider';
-import { CSS } from '@stitches/react';
-import { styled } from '../Theme';
-import { Tooltip } from '../Tooltip';
-
-const Root = styled(BaseSlider.Root, {
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  userSelect: 'none',
-  touchAction: 'none',
-  width: '100%',
-  '&[data-orientation="horizontal"]': {
-    height: 20,
-  },
-});
-
-const Track = styled(BaseSlider.Track, {
-  backgroundColor: '$surface_bright',
-  position: 'relative',
-  flexGrow: 1,
-  borderRadius: '$round',
-  cursor: 'pointer',
-  '&[data-orientation="horizontal"]': { height: 3 },
-});
-
-const Range = styled(BaseSlider.Range, {
-  position: 'absolute',
-  backgroundColor: '$primary_default',
-  borderRadius: '$round',
-  height: '100%',
-});
-
-const Thumb = styled(BaseSlider.Thumb, {
-  all: 'unset',
-  display: 'block',
-  width: '$8',
-  height: '$8',
-  backgroundColor: '$primary_default',
-  cursor: 'pointer',
-  boxShadow: `0 2px 10px $colors$surface_default`,
-  borderRadius: 10,
-  '&:hover': { backgroundColor: '$primary_default' },
-  '&:focus': { boxShadow: 'none' },
-});
-
-type SliderProps = React.ComponentProps<typeof Root> & {
-  thumbStyles?: CSS;
-  showTooltip?: boolean;
-};
-
-export const Slider: React.FC<SliderProps & { showTooltip?: boolean }> = ({
-  showTooltip = true,
-  thumbStyles,
-  ...props
-}) => (
-  <Root {...props}>
-    <Track>
-      <Range />
-    </Track>
-    {showTooltip ? (
-      <Tooltip title={String(props.value?.[0])}>
-        <Thumb css={thumbStyles} />
-      </Tooltip>
-    ) : (
-      <Thumb css={thumbStyles} />
-    )}
-  </Root>
-);

package/src/Slider/index.ts

@@ -1 +0,0 @@
-export { Slider } from './Slider';