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

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

@@ -0,0 +1,273 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  selectHMSMessages,
+  selectLocalPeerID,
+  selectPeerNameByID,
+  selectSessionStore,
+  selectUnreadHMSMessagesCount,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { SendIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { TextArea } from '../../../TextArea';
+import { Tooltip } from '../../../Tooltip';
+import IconButton from '../../IconButton';
+import { AnnotisedMessage } from '../Chat/ChatBody';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
+import { CHAT_MESSAGE_LIMIT, formatTime } from '../Chat/utils';
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+export const PIPChat = () => {
+  const messages = useHMSStore(selectHMSMessages);
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const count = useHMSStore(selectUnreadHMSMessagesCount);
+  const [unreadMessageCount, setUnreadMessageCount] = useState(0);
+
+  const getSenderName = useCallback(
+    (senderName: string, senderID?: string) => {
+      const slicedName = senderName.length > 10 ? senderName.slice(0, 10) + '...' : senderName;
+      return slicedName + (senderID === localPeerID ? ' (You)' : '');
+    },
+    [localPeerID],
+  );
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setUnreadMessageCount(count);
+    }, 100);
+    return () => clearTimeout(timeoutId);
+  }, [count]);
+
+  const blacklistedMessageIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST));
+  const filteredMessages = useMemo(() => {
+    const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
+    return messages?.filter(message => message.type === 'chat' && !blacklistedMessageIDSet.has(message.id)) || [];
+  }, [blacklistedMessageIDs, messages]);
+  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = '' } =
+    useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
+  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
+  const { elements } = useRoomLayoutConferencingScreen();
+  const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
+  const canSendChatMessages = !!elements?.chat?.public_chat_enabled || !!elements?.chat?.roles_whitelist?.length;
+
+  const getChatStatus = useCallback(() => {
+    if (isLocalPeerBlacklisted) return "You've been blocked from sending messages";
+    if (!isChatEnabled)
+      return `Chat has been paused by ${
+        chatStateUpdatedBy.peerId === localPeerID ? 'you' : chatStateUpdatedBy?.userName
+      }`;
+    return message_placeholder;
+  }, [
+    chatStateUpdatedBy.peerId,
+    chatStateUpdatedBy?.userName,
+    isChatEnabled,
+    isLocalPeerBlacklisted,
+    localPeerID,
+    message_placeholder,
+  ]);
+
+  return (
+    <div style={{ height: '100%' }}>
+      <Box
+        id="chat-container"
+        css={{
+          bg: '$surface_dim',
+          overflowY: 'auto',
+          // Subtracting height of footer
+          h: canSendChatMessages ? 'calc(100% - 87px)' : '100%',
+          position: 'relative',
+        }}
+      >
+        {unreadMessageCount ? (
+          <Box
+            id="new-message-notif"
+            style={{
+              position: 'fixed',
+              bottom: '76px',
+              right: '4px',
+            }}
+          >
+            <Text
+              variant="xs"
+              css={{ cursor: 'pointer' }}
+              style={{ color: 'white', background: 'gray', padding: '4px', borderRadius: '4px' }}
+            >
+              {unreadMessageCount === 1 ? 'New message' : `${unreadMessageCount} new messages`}
+            </Text>
+          </Box>
+        ) : (
+          ''
+        )}
+        {filteredMessages.length === 0 ? (
+          <div
+            style={{ display: 'flex', height: '100%', width: '100%', alignItems: 'center', justifyContent: 'center' }}
+          >
+            <Text>No messages here yet</Text>
+          </div>
+        ) : (
+          filteredMessages.map(message => (
+            <Box className="pip-message" key={message.id} id={message.id} style={{ padding: '8px 0.75rem' }}>
+              <Flex style={{ width: '100%', alignItems: 'center', justifyContent: 'between' }}>
+                <Text
+                  style={{ display: 'flex', justifyContent: 'between', width: '100%', alignItems: 'center' }}
+                  css={{
+                    color: '$on_surface_high',
+                    fontWeight: '$semiBold',
+                  }}
+                >
+                  <Flex style={{ flexGrow: 1, gap: '2px', alignItems: 'center' }}>
+                    {message.senderName === 'You' || !message.senderName ? (
+                      <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+                        {message.senderName || 'Anonymous'}
+                      </Text>
+                    ) : (
+                      <Tooltip title={message.senderName} side="top" align="start">
+                        <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+                          {getSenderName(message.senderName, message?.sender)}
+                        </Text>
+                      </Tooltip>
+                    )}
+                    <MessageTitle
+                      localPeerID={localPeerID}
+                      recipientPeer={message.recipientPeer}
+                      recipientRoles={message.recipientRoles}
+                    />
+                  </Flex>
+
+                  <Text
+                    variant="xs"
+                    css={{
+                      color: '$on_surface_medium',
+                      flexShrink: 0,
+                      p: '$2',
+                      whitespace: 'nowrap',
+                    }}
+                  >
+                    {formatTime(message.time)}
+                  </Text>
+                </Text>
+              </Flex>
+              <Text
+                variant="sm"
+                css={{
+                  w: '100%',
+                  mt: '$2',
+                  wordBreak: 'break-word',
+                  whiteSpace: 'pre-wrap',
+                  userSelect: 'all',
+                  color: '$on_surface_high',
+                }}
+              >
+                <AnnotisedMessage message={message.message} />
+              </Text>
+            </Box>
+          ))
+        )}
+        <div id="marker" style={{ height: filteredMessages.length ? '1px' : 0 }} />
+      </Box>
+      {canSendChatMessages && (
+        <Box css={{ bg: '$surface_dim' }}>
+          <Flex css={{ px: '$4', pb: '3px', gap: '$2', alignItems: 'center' }}>
+            <Text variant="caption">To:</Text>
+            <Flex css={{ bg: '$primary_bright', color: '$on_primary_high', r: '$2' }}>
+              <select
+                id="selector"
+                style={{
+                  background: 'inherit',
+                  color: 'inherit',
+                  border: 'none',
+                  outline: 'none',
+                  borderRadius: '4px',
+                  padding: '0 2px',
+                }}
+                defaultValue={elements.chat?.public_chat_enabled ? 'Everyone' : elements.chat?.roles_whitelist?.[0]}
+              >
+                {elements.chat?.roles_whitelist?.map(role => (
+                  <option key={role} value={role}>
+                    {role}
+                  </option>
+                ))}
+                {elements.chat?.public_chat_enabled ? <option value="Everyone">Everyone</option> : ''}
+              </select>
+            </Flex>
+          </Flex>
+          <Flex
+            align="center"
+            css={{
+              bg: '$surface_default',
+              minHeight: '$16',
+              width: '100%',
+              py: '$6',
+              pl: '$4',
+              boxSizing: 'border-box',
+              gap: '$2',
+              r: '$2',
+            }}
+          >
+            <TextArea
+              id="chat-input"
+              maxLength={CHAT_MESSAGE_LIMIT}
+              disabled={!isChatEnabled || isLocalPeerBlacklisted}
+              rows={1}
+              css={{
+                w: '100%',
+                c: '$on_surface_high',
+                p: '0.75rem 0.75rem !important',
+                border: 'none',
+                resize: 'none',
+              }}
+              placeholder={getChatStatus()}
+              required
+              autoComplete="off"
+              aria-autocomplete="none"
+            />
+
+            <IconButton
+              id="send-btn"
+              disabled={!isChatEnabled || isLocalPeerBlacklisted}
+              title={getChatStatus()}
+              css={{
+                ml: 'auto',
+                height: 'max-content',
+                mr: '$4',
+                '&:hover': { c: '$on_surface_medium' },
+              }}
+              data-testid="send_msg_btn"
+            >
+              <SendIcon />
+            </IconButton>
+          </Flex>
+        </Box>
+      )}
+    </div>
+  );
+};
+
+const MessageTitle = ({
+  recipientPeer,
+  recipientRoles,
+  localPeerID,
+}: {
+  recipientPeer?: string;
+  recipientRoles?: string[];
+  localPeerID: string;
+}) => {
+  const peerName = useHMSStore(selectPeerNameByID(recipientPeer));
+
+  return (
+    <>
+      {recipientRoles ? (
+        <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+          to {recipientRoles} (Group)
+        </Text>
+      ) : null}
+      {recipientPeer ? (
+        <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+          to {recipientPeer === localPeerID ? 'You' : peerName} (DM)
+        </Text>
+      ) : null}
+    </>
+  );
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ExternalLinkIcon } from '@100mslive/react-icons';
+import { Dropdown } from '../../../Dropdown';
+import { Text } from '../../../Text';
+
+export const PIPChatOption = ({ openChat, showPIPChat }: { openChat: () => void; showPIPChat: boolean }) => {
+  if (!showPIPChat) {
+    return <></>;
+  }
+  return (
+    <Dropdown.Item onClick={openChat} data-testid="brb_btn">
+      <ExternalLinkIcon height={18} width={18} style={{ padding: '0 $2' }} />
+      <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
+        Pop out Chat
+      </Text>
+    </Dropdown.Item>
+  );
+};

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

@@ -0,0 +1,56 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { PIPContext } from './context';
+
+type PIPProviderProps = {
+  children: React.ReactNode;
+};
+
+export const PIPProvider = ({ children }: PIPProviderProps) => {
+  // Detect if the feature is available.
+  const isSupported = 'documentPictureInPicture' in window;
+
+  // Expose pipWindow that is currently active
+  const [pipWindow, setPipWindow] = useState<Window | null>(null);
+
+  // Close pipWidnow programmatically
+  const closePipWindow = useCallback(() => {
+    if (pipWindow != null) {
+      pipWindow.close();
+      setPipWindow(null);
+    }
+  }, [pipWindow]);
+
+  // Open new pipWindow
+  const requestPipWindow = useCallback(
+    async (width: number, height: number) => {
+      // We don't want to allow multiple requests.
+      if (pipWindow != null) {
+        return;
+      }
+      // @ts-ignore for documentPIP
+      const pip = await window.documentPictureInPicture.requestWindow({
+        width,
+        height,
+      });
+
+      // Detect when window is closed by user
+      pip.addEventListener('pagehide', () => {
+        setPipWindow(null);
+      });
+
+      setPipWindow(pip);
+    },
+    [pipWindow],
+  );
+
+  const value = useMemo(() => {
+    return {
+      isSupported,
+      pipWindow,
+      requestPipWindow,
+      closePipWindow,
+    };
+  }, [closePipWindow, isSupported, pipWindow, requestPipWindow]);
+
+  return <PIPContext.Provider value={value}>{children}</PIPContext.Provider>;
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+type PIPWindowProps = {
+  pipWindow: Window;
+  children: React.ReactNode;
+};
+
+export const PIPWindow = ({ pipWindow, children }: PIPWindowProps) => {
+  pipWindow.document.body.style.margin = '0';
+  pipWindow.document.body.style.overflow = 'clip';
+  return createPortal(children, pipWindow.document.body);
+};

package/src/Prebuilt/components/PIP/context.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+export type PIPContextType = {
+  isSupported: boolean;
+  pipWindow: Window | null;
+  requestPipWindow: (width: number, height: number) => Promise<void>;
+  closePipWindow: () => void;
+};
+
+export const PIPContext = createContext<PIPContextType | undefined>(undefined);

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

@@ -0,0 +1,105 @@
+import { useEffect } from 'react';
+import { useHMSActions } from '@100mslive/react-sdk';
+import { getCssText } from '../../../Theme';
+import { usePIPWindow } from './usePIPWindow';
+
+export const usePIPChat = () => {
+  const hmsActions = useHMSActions();
+  const { isSupported, requestPipWindow, pipWindow, closePipWindow } = usePIPWindow();
+
+  useEffect(() => {
+    if (document && pipWindow) {
+      const style = document.createElement('style');
+      style.id = 'stitches';
+      style.textContent = getCssText();
+      pipWindow.document.head.appendChild(style);
+    }
+  }, [pipWindow]);
+
+  // @ts-ignore
+  useEffect(() => {
+    if (pipWindow) {
+      const chatContainer = pipWindow.document.getElementById('chat-container');
+      const selector = pipWindow.document.getElementById('selector') as HTMLSelectElement;
+      const sendBtn = pipWindow.document.getElementById('send-btn');
+      const pipChatInput = pipWindow.document.getElementById('chat-input') as HTMLTextAreaElement;
+      const marker = pipWindow.document.getElementById('marker');
+
+      marker?.scrollIntoView({ block: 'end' });
+
+      const observer = new IntersectionObserver(
+        entries => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting && entry.target.id) {
+              hmsActions.setMessageRead(true, entry.target.id);
+            }
+          });
+        },
+        {
+          root: chatContainer,
+          threshold: 0.8,
+        },
+      );
+
+      const mutationObserver = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          if (mutation.addedNodes.length > 0) {
+            const newMessages = mutation.addedNodes;
+            newMessages.forEach(message => {
+              const messageId = (message as Element)?.id;
+              if (messageId === 'new-message-notif') {
+                message.addEventListener('click', () =>
+                  setTimeout(() => marker?.scrollIntoView({ block: 'end', behavior: 'smooth' }), 0),
+                );
+              } else if (messageId) observer.observe(message as Element);
+            });
+          }
+        });
+      });
+      mutationObserver.observe(chatContainer as Node, {
+        childList: true,
+      });
+
+      const sendMessage = async () => {
+        const selection = selector?.value || 'Everyone';
+        if (selection === 'Everyone') {
+          await hmsActions.sendBroadcastMessage(pipChatInput.value.trim());
+        } else {
+          await hmsActions.sendGroupMessage(pipChatInput.value.trim(), [selection]);
+        }
+        pipChatInput.value = '';
+        setTimeout(() => marker?.scrollIntoView({ block: 'end', behavior: 'smooth' }), 0);
+      };
+
+      if (sendBtn && hmsActions && pipChatInput) {
+        const pipMessages = pipWindow.document.getElementsByClassName('pip-message');
+        // @ts-ignore
+        [...pipMessages].forEach(message => {
+          if (message.id) {
+            hmsActions.setMessageRead(true, message.id);
+          }
+        });
+        // @ts-ignore
+        const sendOnEnter = e => {
+          if (e.key === 'Enter') sendMessage();
+        };
+        sendBtn.addEventListener('click', sendMessage);
+        pipChatInput.addEventListener('keypress', sendOnEnter);
+        return () => {
+          sendBtn.removeEventListener('click', sendMessage);
+          pipChatInput.removeEventListener('keypress', sendOnEnter);
+          mutationObserver.disconnect();
+          observer.disconnect();
+        };
+      }
+    }
+  }, [pipWindow, hmsActions]);
+
+  useEffect(() => {
+    return () => {
+      pipWindow && closePipWindow();
+    };
+  }, [closePipWindow, pipWindow]);
+
+  return { isSupported, requestPipWindow, pipWindow };
+};

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

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { PIPContext, PIPContextType } from './context';
+
+export const usePIPWindow = (): PIPContextType => {
+  const context = useContext(PIPContext);
+
+  if (context === undefined) {
+    throw new Error('usePIPWindow must be used within a PIPContext');
+  }
+
+  return context;
+};

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -8,6 +8,7 @@ import {
   selectRoomState,
   selectVideoTrackByID,
   useAVToggle,
+  useAwayNotifications,
   useHMSStore,
   useParticipants,
   usePreviewJoin,
@@ -100,6 +101,7 @@ const PreviewJoin = ({
     },
     asRole,
   });
+  const { requestPermission } = useAwayNotifications();
   const roomState = useHMSStore(selectRoomState);
   const savePreferenceAndJoin = useCallback(() => {
     setPreviewPreference({
@@ -115,7 +117,7 @@ const PreviewJoin = ({
       if (skipPreview) {
         savePreferenceAndJoin();
       } else {
-        preview();
+        preview().then(() => requestPermission());
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -111,7 +111,7 @@ export const ToastConfig = {
       const count = new Set(notifications.map(notification => notification.data?.id)).size;
       return {
         title: `${notifications[notifications.length - 1].data?.name} ${
-          count > 1 ? `${count} and others` : ''
+          count > 1 ? `and ${count} others` : ''
         } raised hand`,
         icon: <HandIcon />,
       };
@@ -129,7 +129,7 @@ export const ToastConfig = {
       const count = new Set(notifications.map(notification => notification.data?.id)).size;
       return {
         title: `${notifications[notifications.length - 1].data?.name} ${
-          count > 1 ? `${count} and others` : ''
+          count > 1 ? `and ${count} others` : ''
         } raised hand`,
         icon: <HandIcon />,
         action: <HandRaiseAction isSingleHandRaise={false} />,