@100mslive/roomkit-react 0.2.8-alpha.1 → 0.2.8-alpha.10

package/src/Prebuilt/layouts/SidePane.tsx

@@ -1,17 +1,16 @@
 import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
+import { match } from 'ts-pattern';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
 import { Polls } from '../components/Polls/Polls';
 import { RoomDetailsPane } from '../components/RoomDetails/RoomDetailsPane';
 import { LayoutMode } from '../components/Settings/LayoutSettings';
 import { SidePaneTabs } from '../components/SidePaneTabs';
 import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
-// @ts-ignore: No implicit Any
 import VideoTile from '../components/VideoTile';
-// @ts-ignore: No implicit Any
 import { VBPicker } from '../components/VirtualBackground/VBPicker';
-import { Box, Flex } from '../../Layout';
-import { config as cssConfig } from '../../Theme';
+import { Flex } from '../../Layout';
+import { config as cssConfig, styled } from '../../Theme';
 // @ts-ignore: No implicit Any
 import { useSidepaneReset } from '../components/AppData/useSidepane';
 // @ts-ignore: No implicit Any
@@ -20,9 +19,95 @@ import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { translateAcross } from '../../utils';
 import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants';
 
+const Wrapper = styled('div', {
+  w: '$100',
+  h: '100%',
+  p: '$10',
+  flex: '1 1 0',
+  background: '$surface_dim',
+  r: '$1',
+  position: 'relative',
+  '@lg': {
+    w: '100%',
+    h: '100%',
+    ml: 0,
+    right: 0,
+    position: 'fixed',
+    bottom: 0,
+    borderRadius: 0,
+    zIndex: 10,
+  },
+  '@md': {
+    p: '$6 $8',
+    animation: `${translateAcross({ yFrom: '100%' })} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
+  },
+  variants: {
+    landscapeStream: {
+      true: {
+        '@lg': {
+          position: 'unset',
+          minHeight: '100%',
+        },
+      },
+    },
+    mobileStream: {
+      true: {
+        '@md': {
+          position: 'unset',
+        },
+      },
+    },
+    overlayChat: {
+      true: {
+        '@lg': {
+          maxHeight: '300px',
+          background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)',
+          position: 'fixed',
+          zIndex: 12,
+          bottom: 0,
+        },
+      },
+    },
+    hideControls: {
+      true: {},
+    },
+  },
+  compoundVariants: [
+    {
+      landscapeStream: true,
+      overlayChat: true,
+      css: {
+        position: 'unset',
+        height: '100%',
+        maxHeight: 'unset',
+        '@md': {
+          pb: 0,
+        },
+      },
+    },
+    {
+      mobileStream: true,
+      overlayChat: true,
+      css: {
+        position: 'unset',
+        height: '100%',
+        maxHeight: 'unset',
+      },
+    },
+    {
+      hideControls: false,
+      overlayChat: true,
+      css: {
+        pb: '$17',
+      },
+    },
+  ],
+});
+
 const SidePane = ({
   tileProps,
   hideControls = false,
@@ -38,24 +123,14 @@ const SidePane = ({
   const { elements: preview_elements } = useRoomLayoutPreviewScreen();
   const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
 
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  const isMobileHLSStream = useMobileHLSStream();
+
   const backgroundMedia = preview_elements?.virtual_background?.background_media?.length
     ? preview_elements?.virtual_background?.background_media
     : elements?.virtual_background?.background_media || [];
 
   const resetSidePane = useSidepaneReset();
-  let ViewComponent;
-  if (sidepane === SIDE_PANE_OPTIONS.POLLS) {
-    ViewComponent = <Polls />;
-  }
-  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = <SidePaneTabs hideControls={hideControls} active={sidepane} />;
-  }
-  if (sidepane === SIDE_PANE_OPTIONS.VB) {
-    ViewComponent = <VBPicker backgroundMedia={backgroundMedia} />;
-  }
-  if (sidepane === SIDE_PANE_OPTIONS.ROOM_DETAILS) {
-    ViewComponent = <RoomDetailsPane />;
-  }
 
   useEffect(() => {
     return () => {
@@ -63,9 +138,6 @@ const SidePane = ({
     };
   }, [resetSidePane]);
 
-  if (!ViewComponent && (!trackId || layoutMode !== LayoutMode.GALLERY)) {
-    return null;
-  }
   const tileLayout = {
     hideParticipantNameOnTile: tileProps?.hide_participant_name_on_tile,
     roundedVideoTile: tileProps?.rounded_video_tile,
@@ -73,20 +145,69 @@ const SidePane = ({
     hideMetadataOnTile: tileProps?.hide_metadata_on_tile,
     objectFit: tileProps?.video_object_fit,
   };
-  const VB = sidepane === SIDE_PANE_OPTIONS.VB;
   const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && elements?.chat?.is_overlay;
+  const commonProps = {
+    landscapeStream: isLandscapeHLSStream,
+    mobileStream: isMobileHLSStream,
+    hideControls,
+    overlayChat: !!elements?.chat?.is_overlay,
+  };
+
+  const SidepaneComponent = match(sidepane)
+    .with(SIDE_PANE_OPTIONS.POLLS, () => (
+      <Wrapper
+        css={{
+          '@md': {
+            borderTopLeftRadius: '$2',
+            borderTopRightRadius: '$2',
+          },
+        }}
+        {...commonProps}
+      >
+        <Polls />
+      </Wrapper>
+    ))
+    .with(SIDE_PANE_OPTIONS.VB, () => (
+      <Wrapper css={{ p: '$10 $6 $10 $10' }} {...commonProps}>
+        <VBPicker backgroundMedia={backgroundMedia} />
+      </Wrapper>
+    ))
+    .with(SIDE_PANE_OPTIONS.CHAT, SIDE_PANE_OPTIONS.PARTICIPANTS, () => (
+      <Wrapper {...commonProps} overlayChat={mwebStreamingChat}>
+        <SidePaneTabs active={sidepane} hideTab={isMobileHLSStream || isLandscapeHLSStream} />
+      </Wrapper>
+    ))
+    .with(SIDE_PANE_OPTIONS.ROOM_DETAILS, () => (
+      <Wrapper {...commonProps}>
+        <RoomDetailsPane />
+      </Wrapper>
+    ))
+    .otherwise(() => {
+      return null;
+    });
+
+  if (!trackId && !SidepaneComponent) {
+    return null;
+  }
 
   return (
     <Flex
       direction="column"
       justify="center"
       css={{
-        w: '$100',
+        w: match({ isMobileHLSStream, isLandscapeHLSStream })
+          .with({ isLandscapeHLSStream: true }, () => '340px')
+          .with({ isMobileHLSStream: true }, () => '100%')
+          .otherwise(() => '$100'),
         h: '100%',
         flexShrink: 0,
         gap: '$4',
         position: 'relative',
-        '@md': { position: mwebStreamingChat ? 'absolute' : '', zIndex: 12 },
+        '&:empty': { display: 'none' },
+        '@md': {
+          position: 'absolute',
+          zIndex: 12,
+        },
       }}
     >
       {trackId && layoutMode === LayoutMode.GALLERY && (
@@ -99,42 +220,7 @@ const SidePane = ({
           {...tileLayout}
         />
       )}
-      {!!ViewComponent && (
-        <Box
-          css={{
-            w: '$100',
-            h: mwebStreamingChat ? '0' : '100%',
-            p: VB ? '$10 $6 $10 $10' : '$10',
-            flex: '1 1 0',
-            minHeight: 0,
-            maxHeight: mwebStreamingChat ? '300px' : 'unset',
-            background: mwebStreamingChat
-              ? 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)'
-              : '$surface_dim',
-            r: '$1',
-            position: 'relative',
-            '@lg': {
-              w: '100%',
-              h: '100%',
-              ml: 0,
-              right: 0,
-              position: 'fixed',
-              bottom: 0,
-              borderRadius: 0,
-              zIndex: 10,
-            },
-            '@md': {
-              p: '$6 $8',
-              pb: mwebStreamingChat ? '$20' : '$12',
-              borderTopLeftRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? '$2' : '0',
-              borderTopRightRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? '$2' : '0',
-              animation: `${translateAcross({ yFrom: '100%' })} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-            },
-          }}
-        >
-          {ViewComponent}
-        </Box>
-      )}
+      {SidepaneComponent}
     </Flex>
   );
 };

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -4,6 +4,7 @@ import {
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import {
   selectIsConnectedToRoom,
   selectLocalPeerRoleName,
@@ -31,6 +32,7 @@ import {
   // @ts-ignore: No implicit Any
 } from '../components/AppData/useUISettings';
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 // @ts-ignore: No implicit Any
 import { SESSION_STORE_KEY } from '../common/constants';
 
@@ -55,6 +57,8 @@ export const VideoStreamingSection = ({
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
   useCloseScreenshareWhiteboard();
 
   useEffect(() => {
@@ -102,11 +106,27 @@ export const VideoStreamingSection = ({
         css={{
           size: '100%',
           position: 'relative',
-          gap: '$4',
+          gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4',
         }}
+        direction={match<Record<string, boolean>, 'row' | 'column'>({ isLandscapeHLSStream, isMobileHLSStream })
+          .with({ isLandscapeHLSStream: true }, () => 'row')
+          .with({ isMobileHLSStream: true }, () => 'column')
+          .otherwise(() => 'row')}
       >
         {ViewComponent}
-        <Box css={{ height: '100%', maxHeight: '100%', overflowY: 'clip', '&:empty': { display: 'none' } }}>
+        <Box
+          css={{
+            flex: match({ isLandscapeHLSStream, isMobileHLSStream })
+              .with({ isLandscapeHLSStream: true }, () => '1  1 0')
+              .with({ isMobileHLSStream: true }, () => '2 1 0')
+              .otherwise(() => undefined),
+            position: 'relative',
+            height: !isMobileHLSStream ? '100%' : undefined,
+            maxHeight: '100%',
+            '&:empty': { display: 'none' },
+            overflowY: 'clip',
+          }}
+        >
           <SidePane
             screenType={screenType}
             // @ts-ignore

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -216,7 +216,7 @@ export const DialogInputFile = ({ value, onChange, placeholder, disabled, type,
           '&:hover': {
             border: 'none',
             background: 'none',
-            bg: '$transparent !important',
+            bg: 'transparent !important',
           },
         }}
       >

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

@@ -21,7 +21,7 @@ export const RoomLayoutContext = React.createContext<
 // 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: any, srcValue: any) {
+function customizer(objValue: unknown, srcValue: unknown) {
   if (isArray(objValue) || isArray(srcValue)) {
     return srcValue;
   }

package/src/Sheet/Sheet.tsx

@@ -58,6 +58,10 @@ const StyledContent = styled(DialogPrimitive.Content, {
       animation: `${sheetSlideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
     },
   },
+  '@ls': {
+    maxWidth: '50%',
+    margin: '0 auto',
+  },
 
   variants: {
     side: {
@@ -88,11 +92,11 @@ const StyledContent = styled(DialogPrimitive.Content, {
 
 type SheetContentVariants = VariantProps<typeof StyledContent>;
 type DialogContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;
-type SheetContentProps = DialogContentPrimitiveProps & SheetContentVariants & { css?: CSS };
+type SheetContentProps = DialogContentPrimitiveProps & SheetContentVariants & { css?: CSS; container?: HTMLElement };
 
 const SheetContent = React.forwardRef<React.ElementRef<typeof StyledContent>, SheetContentProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <Dialog.Portal>
+  ({ children, container, ...props }, forwardedRef) => (
+    <Dialog.Portal container={container}>
       <StyledOverlay />
       <StyledContent {...props} ref={forwardedRef}>
         {children}