@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

package/src/Prebuilt/components/Chat/ChatSelectorContainer.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { useMedia } from 'react-use';
+import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';
+import { Dropdown } from '../../../Dropdown';
+import { Flex } from '../../../Layout';
+import { Sheet } from '../../../Sheet';
+import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
+import { ChatSelector } from './ChatSelector';
+import { textEllipsis } from '../../../utils';
+
+export const ChatSelectorContainer = ({ onSelect, role, peerId, selection }) => {
+  const [open, setOpen] = useState(false);
+  const isMobile = useMedia(cssConfig.media.md);
+
+  return (
+    <Flex align="center" css={{ mb: '$8' }}>
+      <Text variant="tiny" css={{ color: '$on_surface_medium', textTransform: 'uppercase' }}>
+        Send To
+      </Text>
+
+      <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
+        <Dropdown.Trigger
+          asChild
+          data-testid="participant_list_filter"
+          css={{
+            border: '1px solid $border_bright',
+            r: '$0',
+            p: '$1 $2',
+            ml: '$8',
+          }}
+          tabIndex={0}
+        >
+          <Flex align="center" css={{ c: '$on_surface_medium' }}>
+            <Text variant="tiny" css={{ ...textEllipsis(80), textTransform: 'uppercase', c: '$on_surface_high' }}>
+              {selection}
+            </Text>
+            {open ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
+          </Flex>
+        </Dropdown.Trigger>
+
+        <Dropdown.Content
+          css={{
+            w: '$64',
+            overflow: 'hidden',
+            maxHeight: 'unset',
+            bg: '$surface_default',
+          }}
+          align="start"
+          sideOffset={8}
+        >
+          {isMobile ? (
+            <Sheet.Root open={open} onOpenChange={value => setOpen(value)}>
+              <Sheet.Content css={{ pt: '$8' }}>
+                <Sheet.Title
+                  css={{
+                    display: 'flex',
+                    w: '100%',
+                    justifyContent: 'space-between',
+                    px: '$10',
+                    pb: '$4',
+                    mb: '$8',
+                    borderBottom: '1px solid $border_bright',
+                  }}
+                >
+                  <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>Send message to</Text>
+                  <Sheet.Close css={{ color: '$on_surface_medium' }}>
+                    <CrossIcon />
+                  </Sheet.Close>
+                </Sheet.Title>
+                <ChatSelector onSelect={onSelect} role={role} peerId={peerId} />
+              </Sheet.Content>
+            </Sheet.Root>
+          ) : (
+            <ChatSelector onSelect={onSelect} role={role} peerId={peerId} />
+          )}
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Chat/useEmojiPickerStyles.js

@@ -9,16 +9,17 @@ export const useEmojiPickerStyles = showing => {
         const style = document.createElement('style');
         style.textContent = `
           #root {
-            --em-rgb-color: var(--hms-ui-colors-on_primary_high);
+            --em-rgb-color: var(--hms-ui-colors-on_surface_high);
             --em-rgb-input: var(--hms-ui-colors-on_primary_high);
-            --em-color-border: var(--hms-ui-colors-surface_default);
-            --color-b: var(--hms-ui-colors-on_primary_high);
+            --em-color-border: var(--hms-ui-colors-surface_bright);
+            --color-b: var(--hms-ui-colors-on_surface_high);
             --rgb-background: transparent;
-            color: var(--hms-ui-colors-on_primary_high);
+            color: var(--hms-ui-colors-on_surface_high);
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
             background-color: var(--hms-ui-colors-surface_bright);
+            margin-top: 0.5rem;
           }
         `;
         root?.appendChild(style);

package/src/Prebuilt/components/Connection/{ConnectionIndicator.jsx → ConnectionIndicator.tsx}

@@ -1,7 +1,8 @@
 import React from 'react';
 import { selectConnectionQualityByPeerID, useHMSStore } from '@100mslive/react-sdk';
 import { PoorConnectivityIcon } from '@100mslive/react-icons';
-import { styled, Tooltip, useTheme } from '../../../';
+import { styled, Tooltip, useTheme } from '../../..';
+// @ts-ignore
 import { getColor, getTooltipText } from './connectionQualityUtils';
 
 const Wrapper = styled('span', {
@@ -10,7 +11,6 @@ const Wrapper = styled('span', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: '$background_dim',
   borderRadius: '$round',
   variants: {
     isTile: {
@@ -22,7 +22,15 @@ const Wrapper = styled('span', {
   },
 });
 
-export const ConnectionIndicator = ({ peerId, isTile = false }) => {
+export const ConnectionIndicator = ({
+  peerId,
+  isTile = false,
+  hideBg = false,
+}: {
+  peerId: string;
+  isTile?: boolean;
+  hideBg?: boolean;
+}) => {
   const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
   const { theme } = useTheme();
   const defaultColor = theme.colors.surface_brighter;
@@ -41,7 +49,7 @@ export const ConnectionIndicator = ({ peerId, isTile = false }) => {
   const size = isTile ? 12 : 16;
   return (
     <Tooltip title={getTooltipText(downlinkQuality)}>
-      <Wrapper isTile={isTile} data-testid="tile_network">
+      <Wrapper isTile={isTile} data-testid="tile_network" css={{ backgroundColor: hideBg ? '' : '$surface_bright' }}>
         <svg
           width={size}
           height={size}

package/src/Prebuilt/components/Connection/TileConnection.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { PinIcon, SpotlightIcon } from '@100mslive/react-icons';
+import { Flex, styled, Text, textEllipsis } from '../../..';
+import { ConnectionIndicator } from './ConnectionIndicator';
+
+const TileConnection = ({
+  name,
+  peerId,
+  hideLabel,
+  width,
+  spotlighted,
+  pinned,
+}: {
+  name: string;
+  peerId: string;
+  hideLabel: boolean;
+  width?: number;
+  spotlighted?: boolean;
+  pinned?: boolean;
+}) => {
+  return (
+    <Wrapper>
+      {!hideLabel ? (
+        <>
+          <Flex align="center">
+            {pinned && (
+              <IconWrapper>
+                <PinIcon width="15" height="15" />
+              </IconWrapper>
+            )}
+            {spotlighted && (
+              <IconWrapper>
+                <SpotlightIcon width="15" height="15" />
+              </IconWrapper>
+            )}
+            <Text
+              css={{
+                c: '$on_surface_high',
+                verticalAlign: 'baseline',
+                ...(width ? textEllipsis(width - 60) : {}),
+              }}
+              variant="xs"
+            >
+              {name}
+            </Text>
+          </Flex>
+          <ConnectionIndicator isTile peerId={peerId} hideBg />
+        </>
+      ) : null}
+    </Wrapper>
+  );
+};
+
+const IconWrapper = styled('div', { c: '$on_surface_high', ml: '$3', mt: '$1' });
+
+const Wrapper = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  position: 'absolute',
+  bottom: '$2',
+  left: '$2',
+  backgroundColor: '$background_dim',
+  borderRadius: '$1',
+  maxWidth: '85%',
+  '& p,span': {
+    p: '$2 $3',
+  },
+});
+
+export default TileConnection;

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -1,4 +1,5 @@
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import React, { Fragment, useState } from 'react';
+import { useMedia } from 'react-use';
 import data from '@emoji-mart/data/sets/14/apple.json';
 import { init } from 'emoji-mart';
 import {
@@ -6,43 +7,35 @@ import {
   selectIsConnectedToRoom,
   selectLocalPeerID,
   useCustomEvent,
-  useHMSActions,
+  // useHMSActions,
   useHMSStore,
-  useRecordingStreaming,
+  // useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { EmojiIcon } from '@100mslive/react-icons';
 import { EmojiCard } from './Footer/EmojiCard';
-import { ToastManager } from './Toast/ToastManager';
+// import { ToastManager } from './Toast/ToastManager';
 import { Dropdown } from '../../Dropdown';
 import { Box } from '../../Layout';
+import { config as cssConfig } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
-import { useHLSViewerRole } from './AppData/useUISettings';
 import { useDropdownList } from './hooks/useDropdownList';
-import { useIsFeatureEnabled } from './hooks/useFeatures';
-import { EMOJI_REACTION_TYPE, FEATURE_LIST } from '../common/constants';
+import { EMOJI_REACTION_TYPE } from '../common/constants';
 
 init({ data });
 
 export const EmojiReaction = () => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.EMOJI_REACTION);
   useDropdownList({ open: open, name: 'EmojiReaction' });
-  const hmsActions = useHMSActions();
+  // const hmsActions = useHMSActions();
   const roles = useHMSStore(selectAvailableRoleNames);
   const localPeerId = useHMSStore(selectLocalPeerID);
-  const hlsViewerRole = useHLSViewerRole();
-  const { isStreamingOn } = useRecordingStreaming();
-  const filteredRoles = useMemo(() => roles.filter(role => role !== hlsViewerRole), [roles, hlsViewerRole]);
-
-  const onEmojiEvent = useCallback(data => {
-    window.showFlyingEmoji(data?.emojiId, data?.senderId);
-  }, []);
+  // const { isStreamingOn } = useRecordingStreaming();
+  const isMobile = useMedia(cssConfig.media.md);
 
   const { sendEvent } = useCustomEvent({
     type: EMOJI_REACTION_TYPE,
-    onEvent: onEmojiEvent,
   });
 
   const sendReaction = async emojiId => {
@@ -51,8 +44,10 @@ export const EmojiReaction = () => {
       emojiId: emojiId,
       senderId: localPeerId,
     };
-    sendEvent(data, { roleNames: filteredRoles });
-    if (isStreamingOn) {
+    // TODO: RT find a way to figure out hls-viewer roles
+    sendEvent(data, { roleNames: roles });
+    window.showFlyingEmoji?.({ emojiId, senderId: localPeerId });
+    /* if (isStreamingOn) {
       try {
         await hmsActions.sendHLSTimedMetadata([
           {
@@ -64,13 +59,15 @@ export const EmojiReaction = () => {
         console.log(error);
         ToastManager.addToast({ title: error.message });
       }
-    }
+    } */
   };
 
-  if (!isConnected || !isFeatureEnabled) {
+  if (!isConnected) {
     return null;
   }
-  return (
+  return isMobile ? (
+    <EmojiCard sendReaction={sendReaction} />
+  ) : (
     <Fragment>
       <Dropdown.Root open={open} onOpenChange={setOpen}>
         <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">

package/src/Prebuilt/components/Footer/{ChatToggle.jsx → ChatToggle.tsx}

@@ -1,21 +1,25 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { selectUnreadHMSMessagesCount, useHMSStore } from '@100mslive/react-sdk';
 import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
-import { Tooltip } from '../../../';
+import { Tooltip } from '../../..';
+// @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
+// @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../common/constants';
+// @ts-ignore: No implicit Any
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ChatToggle = () => {
+export const ChatToggle = ({ openByDefault }: { openByDefault: boolean }) => {
   const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT);
 
-  if (!isFeatureEnabled) {
-    return;
-  }
+  useEffect(() => {
+    if (!isChatOpen && openByDefault) {
+      toggleChat();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggleChat, openByDefault]);
 
   return (
     <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -0,0 +1,98 @@
+import React, { Suspense } from 'react';
+import { useMedia } from 'react-use';
+import {
+  ConferencingScreen,
+  DefaultConferencingScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
+} from '@100mslive/types-prebuilt';
+import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
+import { selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
+import { config as cssConfig, Footer as AppFooter } from '../../..';
+// @ts-ignore: No implicit Any
+import { AudioVideoToggle } from '../AudioVideoToggle';
+// @ts-ignore: No implicit Any
+import { EmojiReaction } from '../EmojiReaction';
+// @ts-ignore: No implicit Any
+import { LeaveRoom } from '../Leave/LeaveRoom';
+// @ts-ignore: No implicit Any
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+// @ts-ignore: No implicit Any
+import { RaiseHand } from '../RaiseHand';
+// @ts-ignore: No implicit Any
+import { ScreenshareToggle } from '../ScreenShareToggle';
+// @ts-ignore: No implicit Any
+import { ChatToggle } from './ChatToggle';
+// @ts-ignore: No implicit Any
+import { ParticipantCount } from './ParticipantList';
+// @ts-ignore: No implicit Any
+const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
+
+export const Footer = ({
+  screenType,
+  elements,
+}: {
+  screenType: keyof ConferencingScreen;
+  elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+}) => {
+  const isMobile = useMedia(cssConfig.media.md);
+  const isOverlayChat = !!elements?.chat?.is_overlay;
+  const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+
+  return (
+    <AppFooter.Root
+      css={{
+        flexWrap: 'nowrap',
+        '@md': {
+          justifyContent: 'center',
+          gap: '$10',
+          position: 'relative',
+          // To prevent it from showing over the sidepane if chat type is not overlay
+          zIndex: isOverlayChat ? 20 : 1,
+        },
+      }}
+    >
+      <AppFooter.Left
+        css={{
+          '@md': {
+            w: 'unset',
+            p: '0',
+            gap: '$10',
+          },
+        }}
+      >
+        {isMobile ? <LeaveRoom screenType={screenType} /> : null}
+        <AudioVideoToggle />
+        {isMobile ? null : <Suspense fallback={<></>}>{isVideoOn ? <VirtualBackground /> : null}</Suspense>}
+      </AppFooter.Left>
+      <AppFooter.Center
+        css={{
+          '@md': {
+            w: 'unset',
+            gap: '$10',
+          },
+        }}
+      >
+        {isMobile ? (
+          <>
+            {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
+            {elements?.chat && <ChatToggle openByDefault={openByDefault} />}
+            <MoreSettings elements={elements} screenType={screenType} />
+          </>
+        ) : (
+          <>
+            <ScreenshareToggle />
+            <RaiseHand />
+            {elements?.emoji_reactions && <EmojiReaction />}
+            <LeaveRoom screenType={screenType} />
+          </>
+        )}
+      </AppFooter.Center>
+      <AppFooter.Right>
+        {!isMobile && elements?.chat && <ChatToggle openByDefault={openByDefault} />}
+        {elements?.participant_list && <ParticipantCount />}
+        <MoreSettings elements={elements} screenType={screenType} />
+      </AppFooter.Right>
+    </AppFooter.Root>
+  );
+};