@100mslive/roomkit-react 0.3.19-alpha.0 → 0.3.19-alpha.10

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.19-alpha.0",
+  "version": "0.3.19-alpha.10",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,13 +75,13 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.19-alpha.0",
+    "@100mslive/hls-player": "0.3.19-alpha.10",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.19-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.9-alpha.0",
-    "@100mslive/react-icons": "0.10.19-alpha.0",
-    "@100mslive/react-sdk": "0.10.19-alpha.0",
-    "@100mslive/types-prebuilt": "0.12.11",
+    "@100mslive/hms-virtual-background": "1.13.19-alpha.10",
+    "@100mslive/hms-whiteboard": "0.0.9-alpha.10",
+    "@100mslive/react-icons": "0.10.19-alpha.10",
+    "@100mslive/react-sdk": "0.10.19-alpha.10",
+    "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -117,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "5de66a04a026c41273f2e5c7726569cf75ee4bc4"
+  "gitHead": "ff1d543414b72cd0acb3f4caf867bacb5ba806d5"
 }

package/src/Modal/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useRef } from 'react';
+import React, { ReactNode, useEffect, useRef } from 'react';
 import { Root } from '@radix-ui/react-dialog';
 import { styled } from '@stitches/react';
 import {
@@ -15,6 +15,17 @@ import { useDialogContainerSelector } from '../hooks/useDialogContainerSelector'
 
 const StyledDialog = styled(Root, {});
 
+// Handles race conditions when multiple elements with dismissable layer are present
+// https://github.com/radix-ui/primitives/issues/2122
+const DialogRoot = <T extends React.ComponentProps<typeof StyledDialog>>(props: T) => {
+  useEffect(() => {
+    return () => {
+      if (document) setTimeout(() => (document.body.style.pointerEvents = 'auto'), 0);
+    };
+  }, []);
+  return <StyledDialog {...(props as object)} />;
+};
+
 const CustomDialogPortal = ({ children, container }: { children: ReactNode; container?: HTMLElement | null }) => {
   const dialogContainerSelector = useDialogContainerSelector();
   const containerRef = useRef<HTMLElement | null>(null);
@@ -34,7 +45,7 @@ const CustomDialogPortal = ({ children, container }: { children: ReactNode; cont
 };
 
 export const Dialog = {
-  Root: StyledDialog,
+  Root: DialogRoot,
   Trigger: StyledDialogTrigger,
   Overlay: CustomDialogOverlay,
   Content: CustomDialogContent,

package/src/Prebuilt/App.tsx

@@ -140,10 +140,12 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
           init: string;
           tokenByRoomCode: string;
           roomLayout: string;
+          event: string;
         }
       | undefined;
     const tokenByRoomCodeEndpoint: string = endpointsObj?.tokenByRoomCode || '';
     const initEndpoint: string = endpointsObj?.init || '';
+    const eventEndpoint: string = endpointsObj?.event || '';
     const roomLayoutEndpoint: string = endpointsObj?.roomLayout || '';
 
     const overrideLayout: Partial<Layout> = {
@@ -182,6 +184,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
               tokenByRoomCode: tokenByRoomCodeEndpoint,
               init: initEndpoint,
               roomLayout: roomLayoutEndpoint,
+              event: eventEndpoint,
             },
           }}
         >

package/src/Prebuilt/AppStateContext.tsx

@@ -84,7 +84,6 @@ export const useAppStateManager = () => {
       .otherwise(() => {
         // do nothing
       });
-  }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave, hmsActions]);
-
+  }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave]);
   return { activeState, rejoin };
 };

package/src/Prebuilt/Prebuilt.stories.tsx

@@ -28,6 +28,7 @@ const endpoints: HMSPrebuiltOptions['endpoints'] = {
   roomLayout: process.env.STORYBOOK_ROOM_LAYOUT_ENDPOINT,
   tokenByRoomCode: process.env.STORYBOOK_TOKEN_BY_ROOM_CODE_ENDPOINT,
   init: process.env.STORYBOOK_INIT_API_ENDPOINT,
+  event: process.env.STORYBOOK_EVENT_API_ENDPOINT,
 };
 
 const hasEndpoints = Object.values(endpoints).some(val => !!val);

package/src/Prebuilt/common/PeersSorter.ts

@@ -7,13 +7,14 @@ class PeersSorter {
   lruPeers: Set<HMSPeerID>;
   tilesPerPage!: number;
   speaker?: HMSPeer;
-  listeners: Set<(peers: HMSPeer[]) => void> = new Set();
+  listeners: Set<(peers: HMSPeer[]) => void>;
 
   constructor(store: IStoreReadOnly<any>) {
     this.store = store;
     this.peers = new Map();
     this.lruPeers = new Set();
     this.speaker = undefined;
+    this.listeners = new Set();
   }
 
   setPeersAndTilesPerPage = ({ peers, tilesPerPage }: { peers: HMSPeer[]; tilesPerPage: number }) => {

package/src/Prebuilt/components/EndCallFeedback/Feedback.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { useMedia } from 'react-use';
+import { Flex } from '../../../Layout';
+import { config as cssConfig } from '../../../Theme';
+import { FEEBACK_INDEX, FeedbackHeader, FeedbackModal } from './FeedbackForm';
+import { ThankyouView } from './ThankyouView';
+import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+export const Feedback = () => {
+  const { feedback } = useRoomLayoutLeaveScreen();
+  const [index, setIndex] = useState(FEEBACK_INDEX.INIT);
+  const isMobile = useMedia(cssConfig.media.md);
+
+  if (!feedback) {
+    return null;
+  }
+  const { ratings } = feedback;
+  if (!ratings) {
+    return null;
+  }
+  ratings.sort((a, b) => {
+    if (!a.value || !b.value) {
+      return 0;
+    }
+    return a.value - b.value;
+  });
+  // TO show thank ypu page
+  if (index === FEEBACK_INDEX.THANK_YOU) {
+    return (
+      <Flex
+        justify="center"
+        css={{
+          pt: '$16',
+        }}
+      >
+        <ThankyouView />
+      </Flex>
+    );
+  }
+  return (
+    <Flex
+      justify="center"
+      css={{
+        pt: '$16',
+        w: '528px',
+      }}
+    >
+      {index === FEEBACK_INDEX.INIT ? (
+        <Flex
+          css={{
+            p: '$12',
+            border: '1px solid $border_default',
+            bg: '$surface_dim',
+            borderRadius: !isMobile ? '$3' : '$3 $3 0 0',
+            gap: '$10',
+            '@md': {
+              position: 'absolute',
+              bottom: '0',
+            },
+          }}
+          direction="column"
+        >
+          <FeedbackHeader ratings={ratings} onEmojiClicked={setIndex} />
+        </Flex>
+      ) : (
+        <FeedbackModal ratings={ratings} index={index} setIndex={setIndex} />
+      )}
+    </Flex>
+  );
+};

package/src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx

@@ -0,0 +1,371 @@
+import React, { useState } from 'react';
+import { useMedia } from 'react-use';
+import { Rating } from '@100mslive/types-prebuilt/elements/feedback';
+import { useHMSActions } from '@100mslive/react-sdk';
+import { CheckIcon, CrossIcon } from '@100mslive/react-icons';
+import { Button } from '../../../Button';
+import { Checkbox } from '../../../Checkbox';
+import { Label } from '../../../Label';
+import { Flex } from '../../../Layout';
+import { Dialog } from '../../../Modal';
+import { Sheet } from '../../../Sheet';
+import { Text } from '../../../Text';
+import { TextArea } from '../../../TextArea';
+import { config as cssConfig } from '../../../Theme';
+import { useHMSPrebuiltContext } from '../../AppContext';
+import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+export const FEEBACK_INDEX = {
+  THANK_YOU: -10,
+  INIT: -1,
+};
+export const FeedbackModal = ({
+  ratings,
+  index,
+  setIndex,
+}: {
+  ratings: Rating[];
+  index: number;
+  setIndex: (index: number) => void;
+}) => {
+  const isMobile = useMedia(cssConfig.media.md);
+  const onOpenChange = () => {
+    setIndex(FEEBACK_INDEX.INIT);
+  };
+  const avoidDefaultDomBehavior = (e: Event) => {
+    e.preventDefault();
+  };
+  if (isMobile) {
+    return (
+      <Sheet.Root open={index !== FEEBACK_INDEX.INIT} onOpenChange={onOpenChange}>
+        <Sheet.Content
+          css={{ bg: '$surface_dim', p: '$12' }}
+          onPointerDownOutside={avoidDefaultDomBehavior}
+          onInteractOutside={avoidDefaultDomBehavior}
+        >
+          <FeedbackContent ratings={ratings} indexSelected={index} setIndex={setIndex} />
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+  return (
+    <Dialog.Root open={index !== FEEBACK_INDEX.INIT} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content
+          css={{ bg: '$surface_dim', width: '528px', p: '$12' }}
+          onPointerDownOutside={avoidDefaultDomBehavior}
+          onInteractOutside={avoidDefaultDomBehavior}
+        >
+          <FeedbackContent ratings={ratings} indexSelected={index} setIndex={setIndex} />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export const FeedbackContent = ({
+  ratings,
+  indexSelected,
+  setIndex,
+}: {
+  ratings: Rating[];
+  indexSelected: number;
+  setIndex: (index: number) => void;
+}) => {
+  const { feedback } = useRoomLayoutLeaveScreen();
+  const { endpoints } = useHMSPrebuiltContext();
+  const hmsActions = useHMSActions();
+  const [comment, setComment] = useState('');
+  const [selectedReasons, setSelectedReasons] = useState(new Set<number>());
+  const handleCheckedChange = (checked: boolean | string, index: number) => {
+    const newSelected = new Set(selectedReasons);
+    if (checked) {
+      newSelected.add(index);
+    } else {
+      newSelected.delete(index);
+    }
+    setSelectedReasons(newSelected);
+  };
+  const submitFeedback = async () => {
+    if (indexSelected < 0 || ratings.length <= indexSelected) {
+      return;
+    }
+    try {
+      const reasons = [...selectedReasons].map((value: number) => ratings[indexSelected]?.reasons?.[value] || '');
+      await hmsActions.submitSessionFeedback(
+        {
+          question: ratings[indexSelected].question,
+          rating: ratings[indexSelected].value || 1,
+          min_rating: 1,
+          max_rating: ratings.length,
+          reasons: selectedReasons.size === 0 ? [] : reasons,
+          comment: comment,
+        },
+        endpoints?.event,
+      );
+    } catch (e) {
+      console.error(e);
+    }
+    // always submit and take it to thankyou page
+    setIndex(FEEBACK_INDEX.THANK_YOU);
+  };
+  return (
+    <Flex
+      css={{
+        p: indexSelected === FEEBACK_INDEX.INIT ? '$12 !important' : '0',
+        bg: '$surface_dim',
+        r: '$3',
+        gap: '$10',
+      }}
+      direction="column"
+    >
+      <FeedbackHeader
+        ratings={ratings}
+        indexSelected={indexSelected}
+        onEmojiClicked={(value: number) => {
+          setSelectedReasons(new Set<number>());
+          setIndex(value);
+        }}
+      />
+      <FeedbackForm
+        rating={ratings[indexSelected]}
+        comment={comment}
+        setComment={setComment}
+        selectedReasons={selectedReasons}
+        handleCheckedChange={handleCheckedChange}
+      />
+      <Button
+        type="submit"
+        icon
+        css={{
+          alignSelf: 'end',
+        }}
+        onClick={submitFeedback}
+      >
+        {feedback?.submit_btn_label || 'Submit Feedback'}
+      </Button>
+    </Flex>
+  );
+};
+export const FeedbackHeader = ({
+  onEmojiClicked,
+  ratings,
+  indexSelected = FEEBACK_INDEX.INIT,
+}: {
+  onEmojiClicked: (index: number) => void;
+  ratings: Rating[];
+  indexSelected?: number;
+}) => {
+  const { feedback } = useRoomLayoutLeaveScreen();
+  return (
+    <>
+      <Flex align="center">
+        <Flex
+          direction="column"
+          css={{
+            flex: '1 1 0',
+          }}
+        >
+          <Text
+            variant="h5"
+            css={{
+              c: '$on_surface_high',
+              fontStyle: 'normal',
+            }}
+          >
+            {feedback?.title || 'How was your experience?'}
+          </Text>
+          <Text
+            variant="body1"
+            css={{
+              c: '$on_surface_medium',
+              opacity: 0.9,
+              fontWeight: '$regular',
+            }}
+          >
+            {feedback?.sub_title || 'Your answers help us improve the quality.'}
+          </Text>
+        </Flex>
+        {indexSelected !== FEEBACK_INDEX.INIT ? (
+          <CrossIcon width="24px" height="24px" color="white" onClick={() => onEmojiClicked(FEEBACK_INDEX.INIT)} />
+        ) : null}
+      </Flex>
+      <Flex
+        css={{
+          gap: '$17',
+          c: '$on_surface_high',
+        }}
+      >
+        {ratings.map((element, index) => {
+          return (
+            <Flex
+              align="center"
+              direction="column"
+              css={{
+                c:
+                  indexSelected === index || indexSelected === FEEBACK_INDEX.INIT
+                    ? '$on_surface_high'
+                    : '$on_surface_default',
+                gap: '$4',
+              }}
+              onClick={() => onEmojiClicked(index)}
+              key={`${index}`}
+            >
+              <Text
+                css={{
+                  fontWeight: '$semiBold',
+                  fontSize: '$h4',
+                  pb: '$1',
+                  cursor: 'pointer',
+                  opacity: indexSelected === index || indexSelected === FEEBACK_INDEX.INIT ? 1 : 0.2,
+                }}
+              >
+                {element.emoji}
+              </Text>
+              <Text
+                variant="body1"
+                css={{
+                  c:
+                    indexSelected === index || indexSelected === FEEBACK_INDEX.INIT
+                      ? '$on_surface_medium'
+                      : '$on_surface_low',
+                  fontWeight: '$regular',
+                }}
+              >
+                {element.label}
+              </Text>
+            </Flex>
+          );
+        })}
+      </Flex>
+    </>
+  );
+};
+export const FeedbackForm = ({
+  rating,
+  comment,
+  setComment,
+  selectedReasons,
+  handleCheckedChange,
+}: {
+  rating: Rating;
+  comment: string;
+  setComment: (value: string) => void;
+  selectedReasons: Set<number>;
+  handleCheckedChange: (checked: string | boolean, index: number) => void;
+}) => {
+  const { feedback } = useRoomLayoutLeaveScreen();
+  return (
+    <>
+      {rating.reasons && rating.reasons.length > 0 && (
+        <Flex
+          direction="column"
+          css={{
+            gap: '$4',
+          }}
+        >
+          <Text
+            variant="sub2"
+            css={{
+              c: '$on_surface_high',
+              fontWeight: '$semiBold',
+              fontSize: '$sm',
+              px: '$2',
+            }}
+          >
+            {rating.question || 'What do you like/dislike here?'}
+          </Text>
+          <Flex
+            css={{
+              alignItems: 'flex-start',
+              alignSelf: 'stretch',
+              flexWrap: 'wrap',
+              gap: '$6',
+              flex: '1 1 calc(25% - 12px)',
+              '@md': {
+                flex: '1 1 calc(50% - 12px)',
+              },
+              '@sm': {
+                flex: '1 1 100%',
+              },
+            }}
+          >
+            {rating.reasons.map((option: string, index: number) => {
+              return (
+                <Flex
+                  align="center"
+                  gap="2"
+                  key={index}
+                  css={{
+                    border: '1px solid $border_bright',
+                    r: '$1',
+                    p: '$6',
+                  }}
+                >
+                  <Checkbox.Root
+                    id={`${option}-${index}`}
+                    checked={selectedReasons.has(index)}
+                    onCheckedChange={checked => handleCheckedChange(checked, index)}
+                    css={{
+                      cursor: 'pointer',
+                      flexShrink: 0,
+                      bg: '$on_secondary_low',
+                      border: '1px solid $border_bright',
+                    }}
+                  >
+                    <Checkbox.Indicator>
+                      <CheckIcon width={12} height={12} />
+                    </Checkbox.Indicator>
+                  </Checkbox.Root>
+                  <Label
+                    css={{
+                      color: '$on_surface_high',
+                      fontSize: '$sm',
+                      fontWeight: '$regular',
+                      lineHeight: '20px' /* 142.857% */,
+                    }}
+                  >
+                    {option}
+                  </Label>
+                </Flex>
+              );
+            })}
+          </Flex>
+        </Flex>
+      )}
+      {feedback?.comment && (
+        <Flex
+          direction="column"
+          css={{
+            gap: '$4',
+          }}
+        >
+          <Text
+            variant="body2"
+            css={{
+              c: '$on_surface_high',
+              fontWeight: '$regular',
+              fontSize: '$sm',
+            }}
+          >
+            {feedback?.comment.label || 'Additional comments (optional)'}
+          </Text>
+          <TextArea
+            maxLength={1024}
+            placeholder={feedback?.comment.placeholder || 'Tell us more...'}
+            css={{
+              backgroundColor: '$surface_bright',
+              border: '1px solid $border_bright',
+              resize: 'none',
+              height: '$36',
+              display: 'flex',
+            }}
+            value={comment}
+            onChange={event => setComment(event.target.value.trimStart())}
+          />
+        </Flex>
+      )}
+    </>
+  );
+};

package/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { UserMusicIcon } from '@100mslive/react-icons';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
+
+export const ThankyouView = () => {
+  const isMobile = useMedia(cssConfig.media.md);
+  return (
+    <Flex
+      direction={isMobile ? 'column' : 'row'}
+      align="center"
+      css={{
+        gap: '$10',
+        border: '1px solid $border_default',
+        borderRadius: !isMobile ? '$3' : '$3 $3 0 0',
+        bg: '$surface_dim',
+        w: !isMobile ? '528px' : '410px',
+        p: '$12',
+        pb: isMobile ? '$16' : '$12',
+        '@md': {
+          position: 'absolute',
+          bottom: '0',
+        },
+      }}
+    >
+      <UserMusicIcon width="64px" height="64px" />
+      <Flex direction="column" align={isMobile ? 'center' : 'start'}>
+        <Text variant="h5">Thank you for your feedback!</Text>
+        <Text
+          variant="body1"
+          css={{
+            fontWeight: '$regular',
+            fontSize: '$md',
+            opacity: '0.9',
+          }}
+        >
+          Your answers help us improve.
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/LeaveScreen.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ExitIcon } from '@100mslive/react-icons';
+import { Feedback } from './EndCallFeedback/Feedback';
 // @ts-ignore: No implicit Any
 import { ToastManager } from './Toast/ToastManager';
 import { Button } from '../../Button';
@@ -63,6 +64,7 @@ export const LeaveScreen = () => {
             <Text css={{ ml: '$3', fontWeight: '$semiBold', color: 'inherit' }}>Rejoin</Text>
           </Button>
         </Flex>
+        <Feedback />
       </Flex>
     </Flex>
   );

package/src/Prebuilt/components/PIP/PIPChat.tsx

@@ -102,9 +102,21 @@ export const PIPChat = () => {
         )}
         {filteredMessages.length === 0 ? (
           <div
-            style={{ display: 'flex', height: '100%', width: '100%', alignItems: 'center', justifyContent: 'center' }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
+              width: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
           >
-            <Text>No messages here yet</Text>
+            <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
+              {canSendChatMessages ? 'Start a conversation' : 'No messages yet'}
+            </Text>
+            <Text variant="sm" style={{ maxWidth: '80%', textAlign: 'center', marginTop: '4px' }}>
+              There are no messages here yet. Start a conversation by sending a message.
+            </Text>
           </div>
         ) : (
           filteredMessages.map(message => (

package/src/Prebuilt/components/VideoLayouts/RoleProminence.tsx

@@ -5,7 +5,6 @@ import { config as cssConfig } from '../../../Theme';
 import { InsetTile } from '../InsetTile';
 import { Pagination } from '../Pagination';
 import { SecondaryTiles } from '../SecondaryTiles';
-import { LayoutMode } from '../Settings/LayoutSettings';
 import { Grid } from './Grid';
 import { LayoutProps } from './interface';
 import { ProminenceLayout } from './ProminenceLayout';
@@ -25,7 +24,6 @@ export function RoleProminence({
 }: LayoutProps) {
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
   const localPeer = useHMSStore(selectLocalPeer);
-  const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
   const isMobile = useMedia(cssConfig.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? 4 : maxTileCount;
@@ -47,7 +45,7 @@ export function RoleProminence({
   }, [pageSize, onPageSize]);
 
   return (
-    <ProminenceLayout.Root hasSidebar={layoutMode === LayoutMode.SIDEBAR}>
+    <ProminenceLayout.Root>
       <ProminenceLayout.ProminentSection>
         <Grid ref={ref} tiles={pagesWithTiles[page]} />
       </ProminenceLayout.ProminentSection>
@@ -61,12 +59,7 @@ export function RoleProminence({
           numPages={pagesWithTiles.length}
         />
       )}
-      <SecondaryTiles
-        peers={layoutMode === LayoutMode.SPOTLIGHT ? [] : secondaryPeers}
-        isInsetEnabled={isInsetEnabled}
-        edgeToEdge={edgeToEdge}
-        hasSidebar={layoutMode === LayoutMode.SIDEBAR}
-      />
+      <SecondaryTiles peers={secondaryPeers} isInsetEnabled={isInsetEnabled} edgeToEdge={edgeToEdge} />
       {isInsetEnabled && localPeer && prominentPeers.length > 0 && !prominentPeers.includes(localPeer) && <InsetTile />}
     </ProminenceLayout.Root>
   );