@100mslive/roomkit-react 0.1.8-alpha.0 → 0.1.9-alpha.0

package/src/Prebuilt/layouts/SidePane.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
+import { Polls } from '../components/Polls/Polls';
 import { SidePaneTabs } from '../components/SidePaneTabs';
-// @ts-ignore: No implicit Any
-import { StreamingLanding } from '../components/Streaming/StreamingLanding';
 import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
 // @ts-ignore: No implicit Any
 import VideoTile from '../components/VideoTile';
 import { Box, Flex } from '../../Layout';
 import { config as cssConfig } from '../../Theme';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { translateAcross } from '../../utils';
 // @ts-ignore: No implicit Any
 import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
 
@@ -29,10 +29,11 @@ const SidePane = ({
   const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
   const { elements } = useRoomLayoutConferencingScreen();
   let ViewComponent;
+  if (sidepane === SIDE_PANE_OPTIONS.POLLS) {
+    ViewComponent = <Polls />;
+  }
   if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
     ViewComponent = <SidePaneTabs screenType={screenType} hideControls={hideControls} active={sidepane} />;
-  } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
-    ViewComponent = <StreamingLanding />;
   }
   if (!ViewComponent && !trackId) {
     return null;
@@ -64,6 +65,7 @@ const SidePane = ({
         <VideoTile
           peerId={activeScreensharePeerId}
           trackId={trackId}
+          width="100%"
           height={225}
           rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
           {...tileLayout}
@@ -96,6 +98,9 @@ const SidePane = ({
             '@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)`,
             },
           }}
         >

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -18,7 +18,7 @@ import SidePane from './SidePane';
 import { WaitingView } from './WaitingView';
 // import { useWhiteboardMetadata } from '../plugins/whiteboard';
 import {
-  usePDFAnnotator,
+  usePDFConfig,
   useUrlToEmbed,
   useWaitingViewerRole,
   // @ts-ignore: No implicit Any
@@ -45,7 +45,7 @@ export const VideoStreamingSection = ({
   const hmsActions = useHMSActions();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
-  const pdfAnnotatorActive = usePDFAnnotator();
+  const pdfAnnotatorActive = usePDFConfig();
 
   useEffect(() => {
     if (!isConnected) {

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -1,6 +1,5 @@
 import React, { useRef } from 'react';
 import { CheckIcon, CloudUploadIcon, CrossIcon } from '@100mslive/react-icons';
-import { PrebuiltDialogPortal } from '../components/PrebuiltDialogPortal';
 import { Button } from '../../Button';
 import { Checkbox } from '../../Checkbox';
 import { HorizontalDivider } from '../../Divider';
@@ -15,7 +14,7 @@ import { Text } from '../../Text';
 
 export const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {
   return (
-    <PrebuiltDialogPortal>
+    <Dialog.Portal>
       <Dialog.Overlay />
       <Dialog.Content css={{ width: 'min(600px, 100%)', ...css }} {...props}>
         <Dialog.Title>
@@ -36,7 +35,7 @@ export const DialogContent = ({ Icon, title, closeable = true, children, css, ic
         <HorizontalDivider css={{ mt: '0.8rem' }} />
         <Box>{children}</Box>
       </Dialog.Content>
-    </PrebuiltDialogPortal>
+    </Dialog.Portal>
   );
 };
 
@@ -61,7 +60,7 @@ export const ErrorDialog = ({ open = true, onOpenChange, title, children, ...pro
 
 export const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (
   <Dialog.Root open={open} onOpenChange={onOpenChange}>
-    <PrebuiltDialogPortal>
+    <Dialog.Portal>
       <Dialog.Overlay />
       <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
         <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md' }}>
@@ -98,7 +97,7 @@ export const RequestDialog = ({ open = true, onOpenChange, title, body, actionTe
           </Box>
         </Flex>
       </Dialog.Content>
-    </PrebuiltDialogPortal>
+    </Dialog.Portal>
   </Dialog.Root>
 );
 

package/src/context/DialogContext.tsx

@@ -0,0 +1,13 @@
+import React, { createContext, ReactNode } from 'react';
+
+export const DialogContainerContext = createContext('');
+
+export function DialogContainerProvider({
+  children,
+  dialogContainerSelector,
+}: {
+  children: ReactNode;
+  dialogContainerSelector: string;
+}) {
+  return <DialogContainerContext.Provider value={dialogContainerSelector}>{children}</DialogContainerContext.Provider>;
+}

package/src/hooks/useDialogContainerSelector.tsx

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { DialogContainerContext } from '../context/DialogContext';
+
+export function useDialogContainerSelector() {
+  const dialogContainerSelector = useContext(DialogContainerContext);
+  return dialogContainerSelector;
+}

package/src/index.ts

@@ -36,3 +36,4 @@ export * from './Link';
 export * from './Collapsible';
 export * from './Prebuilt';
 export * from './Progress';
+export * from './context/DialogContext';

package/src/utils/animations.ts

@@ -12,6 +12,12 @@ export const slideUp = (controller: string) =>
     to: { height: 0 },
   });
 
+export const translateAcross = ({ xFrom = '0', yFrom = '0', zFrom = '0', xTo = '0', yTo = '0', zTo = '0' }) =>
+  keyframes({
+    from: { transform: `translate3d(${xFrom}, ${yFrom}, ${zFrom})` },
+    to: { transform: `translate3d(${xTo}, ${yTo}, ${zTo}` },
+  });
+
 export const dialogOpen = keyframes({
   '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.90)' },
   '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },

package/dist/Prebuilt/components/PrebuiltDialogPortal.d.ts

@@ -1,4 +0,0 @@
-import React, { ReactNode } from 'react';
-export declare const PrebuiltDialogPortal: ({ children }: {
-    children: ReactNode;
-}) => React.JSX.Element;

package/dist/Prebuilt/components/Preview/PreviewContainer.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const PreviewContainer: () => React.JSX.Element;
-export default PreviewContainer;

package/dist/chunk-2H5NIZB7.js

@@ -1,70 +0,0 @@
-import {
-  Flex,
-  Text,
-  __objRest,
-  __spreadProps,
-  __spreadValues,
-  styled
-} from "./chunk-Z3O2WGWV.js";
-
-// src/Prebuilt/components/MoreSettings/ActionTile.jsx
-import React from "react";
-var ActionTileRoot = (_a) => {
-  var _b = _a, { active, disabled = false, children, onClick } = _b, props = __objRest(_b, ["active", "disabled", "children", "onClick"]);
-  return /* @__PURE__ */ React.createElement(
-    Flex,
-    __spreadProps(__spreadValues({}, props), {
-      css: {
-        flexDirection: "column",
-        alignItems: "center",
-        p: "$4 $2",
-        position: "relative",
-        bg: active ? "$surface_bright" : "",
-        color: disabled ? "$on_surface_low" : "$on_surface_high",
-        gap: "$4",
-        r: "$1",
-        "&:hover": {
-          bg: "$surface_bright"
-        }
-      },
-      onClick: () => {
-        if (!disabled) {
-          onClick();
-        }
-      }
-    }),
-    children
-  );
-};
-var ActionTileCount = styled(Text, {
-  position: "absolute",
-  top: 0,
-  right: 0,
-  fontWeight: "$semiBold",
-  color: "$on_surface_high",
-  p: "$1 $2",
-  minWidth: "$9",
-  textAlign: "center",
-  boxSizing: "border-box",
-  bg: "$surface_bright",
-  r: "$round",
-  letterSpacing: "1.5px",
-  fontSize: "$tiny !important",
-  lineHeight: "$tiny !important"
-});
-var ActionTileTitle = styled(Text, {
-  fontWeight: "$semiBold",
-  color: "inherit",
-  textAlign: "center",
-  fontSize: "$xs !important"
-});
-var ActionTile = {
-  Root: ActionTileRoot,
-  Title: ActionTileTitle,
-  Count: ActionTileCount
-};
-
-export {
-  ActionTile
-};
-//# sourceMappingURL=chunk-2H5NIZB7.js.map

package/dist/chunk-2H5NIZB7.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/MoreSettings/ActionTile.jsx"],
-  "sourcesContent": ["import React from 'react';\nimport { Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport { styled } from '../../../Theme';\n\nconst ActionTileRoot = ({ active, disabled = false, children, onClick, ...props }) => (\n  <Flex\n    {...props}\n    css={{\n      flexDirection: 'column',\n      alignItems: 'center',\n      p: '$4 $2',\n      position: 'relative',\n      bg: active ? '$surface_bright' : '',\n      color: disabled ? '$on_surface_low' : '$on_surface_high',\n      gap: '$4',\n      r: '$1',\n      '&:hover': {\n        bg: '$surface_bright',\n      },\n    }}\n    onClick={() => {\n      if (!disabled) {\n        onClick();\n      }\n    }}\n  >\n    {children}\n  </Flex>\n);\n\nconst ActionTileCount = styled(Text, {\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  fontWeight: '$semiBold',\n  color: '$on_surface_high',\n  p: '$1 $2',\n  minWidth: '$9',\n  textAlign: 'center',\n  boxSizing: 'border-box',\n  bg: '$surface_bright',\n  r: '$round',\n  letterSpacing: '1.5px',\n  fontSize: '$tiny !important',\n  lineHeight: '$tiny !important',\n});\n\nconst ActionTileTitle = styled(Text, {\n  fontWeight: '$semiBold',\n  color: 'inherit',\n  textAlign: 'center',\n  fontSize: '$xs !important',\n});\n\nexport const ActionTile = {\n  Root: ActionTileRoot,\n  Title: ActionTileTitle,\n  Count: ActionTileCount,\n};\n"],
-  "mappings": ";;;;;;;;;;AAAA,OAAO,WAAW;AAKlB,IAAM,iBAAiB,CAAC,OAA2D;AAA3D,eAAE,UAAQ,WAAW,OAAO,UAAU,QAL9D,IAKwB,IAAkD,kBAAlD,IAAkD,CAAhD,UAAQ,YAAkB,YAAU;AAC5D;AAAA,IAAC;AAAA,qCACK,QADL;AAAA,MAEC,KAAK;AAAA,QACH,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,GAAG;AAAA,QACH,UAAU;AAAA,QACV,IAAI,SAAS,oBAAoB;AAAA,QACjC,OAAO,WAAW,oBAAoB;AAAA,QACtC,KAAK;AAAA,QACL,GAAG;AAAA,QACH,WAAW;AAAA,UACT,IAAI;AAAA,QACN;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,YAAI,CAAC,UAAU;AACb,kBAAQ;AAAA,QACV;AAAA,MACF;AAAA;AAAA,IAEC;AAAA,EACH;AAAA;AAGF,IAAM,kBAAkB,OAAO,MAAM;AAAA,EACnC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,GAAG;AAAA,EACH,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,eAAe;AAAA,EACf,UAAU;AAAA,EACV,YAAY;AACd,CAAC;AAED,IAAM,kBAAkB,OAAO,MAAM;AAAA,EACnC,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AACZ,CAAC;AAEM,IAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT;",
-  "names": []
-}