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

package/src/Prebuilt/layouts/mainView.jsx

@@ -1,5 +1,4 @@
 import React, { Suspense, useCallback, useEffect } from 'react';
-import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
   selectIsConnectedToRoom,
   selectLocalPeerRoleName,
@@ -7,26 +6,21 @@ import {
   selectPeerSharingAudio,
   selectPeerSharingVideoPlaylist,
   selectPermissions,
-  selectTemplateAppData,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
+import { EqualProminence } from '../components/EqualProminence';
 import FullPageProgress from '../components/FullPageProgress';
 import { Flex } from '../../Layout';
-import { useRoomLayout } from '../provider/roomLayoutProvider';
 import { EmbedView } from './EmbedView';
-import { InsetView } from './InsetView';
-import { MainGridView } from './mainGridView';
 import { PDFView } from './PDFView';
 import ScreenShareView from './screenShareView';
 import SidePane from './SidePane';
 import { WaitingView } from './WaitingView';
 import { useWhiteboardMetadata } from '../plugins/whiteboard';
-import { useAppConfig } from '../components/AppData/useAppConfig';
 import {
   useHLSViewerRole,
-  useIsHeadless,
   usePDFAnnotator,
   usePinnedTrack,
   useSetAppDataByKey,
@@ -34,11 +28,11 @@ import {
   useUrlToEmbed,
   useWaitingViewerRole,
 } from '../components/AppData/useUISettings';
-import { APP_DATA, SESSION_STORE_KEY, UI_MODE_ACTIVE_SPEAKER } from '../common/constants';
+import { useShowStreamingUI } from '../common/hooks';
+import { APP_DATA, SESSION_STORE_KEY } from '../common/constants';
 
 // const WhiteboardView = React.lazy(() => import("./WhiteboardView"));
 const HLSView = React.lazy(() => import('./HLSView'));
-const ActiveSpeakerView = React.lazy(() => import('./ActiveSpeakerView'));
 const PinnedTrackView = React.lazy(() => import('./PinnedTrackView'));
 
 export const ConferenceMainView = () => {
@@ -49,21 +43,16 @@ export const ConferenceMainView = () => {
   const peerSharingPlaylist = useHMSStore(selectPeerSharingVideoPlaylist);
   const { whiteboardOwner: whiteboardShared } = useWhiteboardMetadata();
   const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const uiMode = useHMSStore(selectTemplateAppData).uiMode;
   const hmsActions = useHMSActions();
-  const isHeadless = useIsHeadless();
-  const headlessUIMode = useAppConfig('headlessConfig', 'uiMode');
-  const { uiViewMode, isAudioOnly } = useUISettings();
+  const { isAudioOnly } = useUISettings();
   const hlsViewerRole = useHLSViewerRole();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFAnnotator();
-
   const { isHLSRunning } = useRecordingStreaming();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const permissions = useHMSStore(selectPermissions);
-  const roomLayout = useRoomLayout();
-  const { join_form: joinForm = {} } = roomLayout?.screens?.preview?.default?.elements || {};
+  const showStreamingUI = useShowStreamingUI();
 
   const startHLS = useCallback(async () => {
     try {
@@ -73,6 +62,9 @@ export const ConferenceMainView = () => {
       setHLSStarted(true);
       await hmsActions.startHLSStreaming({});
     } catch (error) {
+      if (error.message === 'beam already started') {
+        return;
+      }
       if (error.message.includes('invalid input')) {
         await startHLS();
         return;
@@ -81,6 +73,17 @@ export const ConferenceMainView = () => {
     }
   }, [hmsActions, isHLSStarted, setHLSStarted]);
 
+  useEffect(() => {
+    if (!isConnected) {
+      return;
+    }
+    // Is a streaming kit and broadcaster joins
+    if (permissions?.hlsStreaming && !isHLSRunning && showStreamingUI) {
+      startHLS();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected]);
+
   useEffect(() => {
     if (!isConnected) {
       return;
@@ -94,17 +97,9 @@ export const ConferenceMainView = () => {
       hmsActions.audioPlaylist.setList(audioPlaylist);
     }
 
-    // Is a streaming kit and broadcaster joins
-    if (
-      permissions?.hlsStreaming &&
-      !isHLSRunning &&
-      joinForm.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE
-    ) {
-      startHLS();
-    }
-
     hmsActions.sessionStore.observe([SESSION_STORE_KEY.PINNED_MESSAGE, SESSION_STORE_KEY.SPOTLIGHT]);
-  }, [isConnected, hmsActions, permissions, joinForm]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected, hmsActions]);
 
   if (!localPeerRole) {
     // we don't know the role yet to decide how to render UI
@@ -122,16 +117,12 @@ export const ConferenceMainView = () => {
     ViewComponent = EmbedView;
   } else if (whiteboardShared) {
     // ViewComponent = WhiteboardView;
-  } else if (uiMode === 'inset') {
-    ViewComponent = InsetView;
   } else if (((peerSharing && peerSharing.id !== peerSharingAudio?.id) || peerSharingPlaylist) && !isAudioOnly) {
     ViewComponent = ScreenShareView;
   } else if (pinnedTrack) {
     ViewComponent = PinnedTrackView;
-  } else if (uiViewMode === UI_MODE_ACTIVE_SPEAKER || (isHeadless && headlessUIMode === UI_MODE_ACTIVE_SPEAKER)) {
-    ViewComponent = ActiveSpeakerView;
   } else {
-    ViewComponent = MainGridView;
+    ViewComponent = EqualProminence;
   }
 
   return (

package/src/Prebuilt/layouts/screenShareView.jsx

@@ -105,7 +105,6 @@ const ScreenShareComponent = ({ amIPresenting, peerPresenting, peerSharingPlayli
     return (
       <Box
         css={{
-          mx: '$8',
           flex: '3 1 0',
           '@xl': {
             flex: '2 1 0',
@@ -123,7 +122,6 @@ const ScreenShareComponent = ({ amIPresenting, peerPresenting, peerSharingPlayli
     <Box
       css={{
         flex: '3 1 0',
-        mx: '$8',
         '@xl': { ml: '$4', maxHeight: '80%', minHeight: 0 },
       }}
     >

package/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx

@@ -9,6 +9,7 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { VirtualBackgroundIcon } from '@100mslive/react-icons';
+import { ActionTile } from '../../components/MoreSettings/ActionTile';
 import { Loading } from '../../../Loading';
 import { Tooltip } from '../../../Tooltip';
 import IconButton from '../../IconButton';
@@ -16,13 +17,19 @@ import { useIsFeatureEnabled } from '../../components/hooks/useFeatures';
 import { getRandomVirtualBackground } from './vbutils';
 import { FEATURE_LIST } from '../../common/constants';
 
-export const VirtualBackground = () => {
+export const VirtualBackground = ({
+  asActionTile = false,
+  onVBClick = () => {
+    return;
+  },
+}) => {
   const pluginRef = useRef(null);
   const hmsActions = useHMSActions();
   const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
   const role = useHMSStore(selectLocalPeerRole);
   const [isVBLoading, setIsVBLoading] = useState(false);
   const [isVBSupported, setIsVBSupported] = useState(false);
+  const [isVBOn, setIsVBOn] = useState(false);
   const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);
   const isVBPresent = useHMSStore(selectIsLocalVideoPluginPresent('HMSVB'));
   const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.VIDEO_PLUGINS);
@@ -68,6 +75,23 @@ export const VirtualBackground = () => {
   if (!isAllowedToPublish.video || !isVBSupported || !isFeatureEnabled) {
     return null;
   }
+  if (asActionTile) {
+    return (
+      <ActionTile.Root
+        data-testid="virtual_bg_btn"
+        active={isVBPresent}
+        disabled={isVBLoading}
+        onClick={() => {
+          setIsVBOn(!isVBOn);
+          !isVBPresent ? addPlugin() : removePlugin();
+          onVBClick();
+        }}
+      >
+        <VirtualBackgroundIcon />
+        <ActionTile.Title>Virtual Background</ActionTile.Title>
+      </ActionTile.Root>
+    );
+  }
 
   return (
     <Tooltip

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -172,7 +172,7 @@ export const DialogInput = ({ title, value, onChange, placeholder, disabled, typ
     <DialogRow breakSm>
       <Label>{title}</Label>
       <Input
-        css={{ width: '70%', '@sm': { width: '100%' } }}
+        css={{ width: '70%', '@sm': { width: '100%' }, bg: '$surface_bright' }}
         value={value}
         onChange={e => onChange(e.target.value)}
         placeholder={placeholder}

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

@@ -7,7 +7,7 @@ import { useFetchRoomLayout } from './hooks/useFetchRoomLayout';
 
 export type RoomLayoutProviderProps = {
   roomLayoutEndpoint?: string;
-  overrideLayout?: Layout;
+  overrideLayout?: Partial<Layout>;
 };
 
 export const RoomLayoutContext = React.createContext<Layout | undefined>(undefined);

package/src/Sheet/Sheet.mdx

@@ -0,0 +1,19 @@
+# Replacing DocsPage with custom `MDX` content
+
+This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage).
+
+It can be further expanded with your own code snippets and include specific information related to your stories.
+
+For example:
+
+import { Story } from '@storybook/addon-docs';
+
+## Sheet
+
+Sheet is an hover component used to have a focus-mode like UI for users.
+
+- [Example](#example)
+
+### Example
+
+<Story id="sheet--example" />

package/src/Sheet/Sheet.stories.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { CrossIcon, InfoIcon } from '@100mslive/react-icons';
+import { Button } from '../Button';
+import { HorizontalDivider } from '../Divider';
+import { Fieldset } from '../Fieldset';
+import { Input } from '../Input';
+import { Label } from '../Label';
+import { Box, Flex } from '../Layout';
+import { Text } from '../Text';
+import { Sheet } from './Sheet';
+import SheetDocs from './Sheet.mdx';
+
+export default {
+  title: 'UI Components/Sheet',
+  component: Sheet.Root,
+  argTypes: { onClick: { action: 'clicked' } },
+  parameters: {
+    docs: {
+      page: SheetDocs,
+    },
+  },
+} as ComponentMeta<typeof Sheet.Root>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof Sheet.Root> = () => (
+  <Sheet.Root>
+    <Sheet.Trigger asChild>
+      <Button variant="standard">Open Sheet</Button>
+    </Sheet.Trigger>
+    <Sheet.Content>
+      <Sheet.Title css={{ p: '$10' }}>
+        <Flex direction="row" justify="between" css={{ w: '100%' }}>
+          <Flex justify="start" align="center" gap="3">
+            <InfoIcon />
+            <Text variant="h5">Sheet Heading</Text>
+          </Flex>
+          <Sheet.Close css={{ color: 'white' }}>
+            <CrossIcon />
+          </Sheet.Close>
+        </Flex>
+      </Sheet.Title>
+      <HorizontalDivider />
+      <Box as="div" css={{ p: '$10', overflowY: 'scroll', maxHeight: '70vh' }}>
+        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
+          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
+        </Text>
+        <Fieldset>
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
+        </Fieldset>
+        <Fieldset>
+          <Label htmlFor="username">Username</Label>
+          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
+        </Fieldset>
+        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
+          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
+        </Text>
+        <Fieldset>
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
+        </Fieldset>
+        <Fieldset>
+          <Label htmlFor="username">Username</Label>
+          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
+        </Fieldset>
+        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
+          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
+        </Text>
+        <Fieldset>
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
+        </Fieldset>
+        <Fieldset>
+          <Label htmlFor="username">Username</Label>
+          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
+        </Fieldset>
+        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
+          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
+        </Text>
+        <Fieldset>
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
+        </Fieldset>
+        <Fieldset>
+          <Label htmlFor="username">Username</Label>
+          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
+        </Fieldset>
+      </Box>
+    </Sheet.Content>
+  </Sheet.Root>
+);
+
+export const Example = Template.bind({});
+Example.storyName = 'Sheet';

package/src/Sheet/Sheet.tsx

@@ -0,0 +1,118 @@
+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: 1001,
+  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)`,
+    },
+  },
+
+  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 };
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof StyledContent>, SheetContentProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <Dialog.Portal>
+      <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

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

package/src/Theme/ThemeProvider.tsx

@@ -14,7 +14,7 @@ export enum ThemeTypes {
 }
 
 export type ThemeContextValue = {
-  themeType: ThemeTypes;
+  themeType: string;
   theme: Theme;
   aspectRatio: { width: number; height: number };
   /**
@@ -27,7 +27,7 @@ export type ThemeContextValue = {
 };
 
 export type ThemeProviderProps = {
-  themeType?: ThemeTypes;
+  themeType?: string;
   theme?: Theme;
   aspectRatio?: { width: number; height: number };
 };
@@ -40,7 +40,7 @@ const defaultContext = {
     return;
   },
 };
-export const ThemeContext = React.createContext(defaultContext);
+export const ThemeContext = React.createContext<ThemeContextValue>(defaultContext);
 
 /**
  * Wrap this around your root component to get access to theme
@@ -72,16 +72,13 @@ export const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderPro
     return updatedTheme;
   }, [userTheme, currentTheme, isBrowser]);
 
-  const toggleTheme = useCallback(
-    (themeToUpdateTo?: ThemeTypes) => {
-      if (themeToUpdateTo) {
-        setCurrentTheme(themeToUpdateTo);
-        return;
-      }
-      setCurrentTheme(ThemeTypes.default);
-    },
-    [currentTheme],
-  );
+  const toggleTheme = useCallback((themeToUpdateTo?: ThemeTypes) => {
+    if (themeToUpdateTo) {
+      setCurrentTheme(themeToUpdateTo);
+      return;
+    }
+    setCurrentTheme(ThemeTypes.default);
+  }, []);
 
   useEffect(() => {
     if (themeType) {

package/src/Theme/base.config.ts

@@ -123,7 +123,7 @@ export const baseConfig = {
       72: '18rem',
       80: '20rem',
       96: '24rem',
-      100: '27rem',
+      100: '25rem',
     },
     borderWidths: {
       light: '1px',

package/src/Theme/stitches.config.ts

@@ -82,7 +82,7 @@ export const createTheme = ({
   theme,
   className,
 }: {
-  themeType: ThemeType;
+  themeType: string;
   className?: string;
   theme?: Partial<Theme>;
 }) => {

package/src/TileMenu/StyledMenuTile.tsx

@@ -13,7 +13,7 @@ const StyledTrigger = styled(Popover.Trigger, {
   width: '$13',
   height: '$13',
   color: '$on_surface_high',
-  borderRadius: '$round',
+  borderRadius: '$2',
   backgroundColor: '$surface_bright',
   cursor: 'pointer',
   border: 'none',
@@ -26,7 +26,7 @@ const StyledTrigger = styled(Popover.Trigger, {
 
 const StyledContent = styled(Popover.Content, {
   fontFamily: '$sans',
-  backgroundColor: '$surface_bright',
+  backgroundColor: '$surface_dim',
   padding: '$5 0',
   display: 'flex',
   flexDirection: 'column',

package/src/TileMenu/TileMenu.tsx

@@ -33,6 +33,7 @@ export const TileMenu: React.FC<TileMenuProps> = ({ peerId }) => {
   const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));
   const canMuteVideo = videoTrack?.enabled ? permissions?.mute : permissions?.unmute;
   const canMuteAudio = audioTrack?.enabled ? permissions?.mute : permissions?.unmute;
+
   const toggleTrackEnabled = async (track?: HMSTrack | null) => {
     if (track) {
       try {
@@ -55,6 +56,7 @@ export const TileMenu: React.FC<TileMenuProps> = ({ peerId }) => {
             <span>{`${videoTrack?.enabled ? 'Mute' : 'Unmute'} Video`}</span>
           </StyledMenuTile.ItemButton>
         ) : null}
+
         {canMuteAudio ? (
           <StyledMenuTile.ItemButton onClick={() => toggleTrackEnabled(audioTrack)}>
             {audioTrack?.enabled ? <MicOnIcon /> : <MicOffIcon />}

package/src/VideoTile/StyledVideoTile.tsx

@@ -57,6 +57,11 @@ const Info = styled('div', {
 const AttributeBox = styled('div', {
   position: 'absolute',
   color: '$on_primary_high',
+  w: '$12',
+  h: '$12',
+  bg: '$secondary_dim',
+  r: '$round',
+  ...flexCenter,
 });
 
 const AudioIndicator = styled('div', {

package/src/utils/animations.ts

@@ -34,6 +34,24 @@ export const slideRightAndFade = (start = '-2px') =>
     '100%': { opacity: 1, transform: 'translateX(0)' },
   });
 
+export const sheetSlideIn = keyframes({
+  from: { transform: '$$transformValue' },
+  to: { transform: 'translate3d(0,0,0)' },
+});
+
+export const sheetSlideOut = keyframes({
+  from: { transform: 'translate3d(0,0,0)' },
+  to: { transform: '$$transformValue' },
+});
+export const sheetFadeIn = keyframes({
+  from: { opacity: '0' },
+  to: { opacity: '1' },
+});
+
+export const sheetFadeOut = keyframes({
+  from: { opacity: '1' },
+  to: { opacity: '0' },
+});
 export const slideDownAndFade = (start = '-2px') =>
   keyframes({
     '0%': { opacity: 0, transform: `translateY(${start})` },

package/dist/ActiveSpeakerView-V6O4K3BV.js

@@ -1,39 +0,0 @@
-import {
-  GridSidePaneView,
-  VideoTile_default
-} from "./chunk-ESUJK7AT.js";
-import "./chunk-42SWPN2C.js";
-import "./chunk-4ZBEFSRC.js";
-import {
-  Box,
-  Flex
-} from "./chunk-R6PDR5WZ.js";
-import {
-  init_define_process_env
-} from "./chunk-4NEZLVVH.js";
-
-// src/Prebuilt/layouts/ActiveSpeakerView.jsx
-init_define_process_env();
-import React, { useRef } from "react";
-import { selectDominantSpeaker, selectPeers, useHMSStore } from "@100mslive/react-sdk";
-var ActiveSpeakerView = () => {
-  const dominantSpeaker = useHMSStore(selectDominantSpeaker);
-  const latestDominantSpeakerRef = useRef(dominantSpeaker);
-  const peers = (useHMSStore(selectPeers) || []).filter(
-    (peer) => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0
-  );
-  if (dominantSpeaker) {
-    latestDominantSpeakerRef.current = dominantSpeaker;
-  }
-  if (peers.length === 0) {
-    return null;
-  }
-  const activeSpeaker = latestDominantSpeakerRef.current || peers[0];
-  const showSidePane = activeSpeaker && peers.length > 1;
-  return /* @__PURE__ */ React.createElement(Flex, { css: { size: "100%", "@lg": { flexDirection: "column" } } }, /* @__PURE__ */ React.createElement(Box, { css: { flex: "1 1 0 " } }, /* @__PURE__ */ React.createElement(VideoTile_default, { peerId: activeSpeaker.id, width: "100%", height: "100%" })), showSidePane && /* @__PURE__ */ React.createElement(GridSidePaneView, { peers: peers.filter((peer) => peer.id !== activeSpeaker.id) }));
-};
-var ActiveSpeakerView_default = ActiveSpeakerView;
-export {
-  ActiveSpeakerView_default as default
-};
-//# sourceMappingURL=ActiveSpeakerView-V6O4K3BV.js.map

package/dist/ActiveSpeakerView-V6O4K3BV.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/layouts/ActiveSpeakerView.jsx"],
-  "sourcesContent": ["import React, { useRef } from 'react';\nimport { selectDominantSpeaker, selectPeers, useHMSStore } from '@100mslive/react-sdk';\nimport { GridSidePaneView } from '../components/gridView';\nimport VideoTile from '../components/VideoTile';\nimport { Box, Flex } from '../../Layout';\n\nconst ActiveSpeakerView = () => {\n  const dominantSpeaker = useHMSStore(selectDominantSpeaker);\n  const latestDominantSpeakerRef = useRef(dominantSpeaker);\n  const peers = (useHMSStore(selectPeers) || []).filter(\n    peer => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0,\n  );\n  // if there is no current dominant speaker latest keeps pointing to last\n  if (dominantSpeaker) {\n    latestDominantSpeakerRef.current = dominantSpeaker;\n  }\n  if (peers.length === 0) {\n    return null;\n  }\n  // show local peer if there hasn't been any dominant speaker\n  const activeSpeaker = latestDominantSpeakerRef.current || peers[0];\n  const showSidePane = activeSpeaker && peers.length > 1;\n\n  return (\n    <Flex css={{ size: '100%', '@lg': { flexDirection: 'column' } }}>\n      <Box css={{ flex: '1 1 0 ' }}>\n        <VideoTile peerId={activeSpeaker.id} width=\"100%\" height=\"100%\" />\n      </Box>\n      {showSidePane && <GridSidePaneView peers={peers.filter(peer => peer.id !== activeSpeaker.id)} />}\n    </Flex>\n  );\n};\n\nexport default ActiveSpeakerView;\n"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA,OAAO,SAAS,cAAc;AAC9B,SAAS,uBAAuB,aAAa,mBAAmB;AAKhE,IAAM,oBAAoB,MAAM;AAC9B,QAAM,kBAAkB,YAAY,qBAAqB;AACzD,QAAM,2BAA2B,OAAO,eAAe;AACvD,QAAM,SAAS,YAAY,WAAW,KAAK,CAAC,GAAG;AAAA,IAC7C,UAAQ,KAAK,cAAc,KAAK,cAAc,KAAK,gBAAgB,SAAS;AAAA,EAC9E;AAEA,MAAI,iBAAiB;AACnB,6BAAyB,UAAU;AAAA,EACrC;AACA,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgB,yBAAyB,WAAW,MAAM,CAAC;AACjE,QAAM,eAAe,iBAAiB,MAAM,SAAS;AAErD,SACE,oCAAC,QAAK,KAAK,EAAE,MAAM,QAAQ,OAAO,EAAE,eAAe,SAAS,EAAE,KAC5D,oCAAC,OAAI,KAAK,EAAE,MAAM,SAAS,KACzB,oCAAC,qBAAU,QAAQ,cAAc,IAAI,OAAM,QAAO,QAAO,QAAO,CAClE,GACC,gBAAgB,oCAAC,oBAAiB,OAAO,MAAM,OAAO,UAAQ,KAAK,OAAO,cAAc,EAAE,GAAG,CAChG;AAEJ;AAEA,IAAO,4BAAQ;",
-  "names": []
-}