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

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,103 @@
+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');
+
+      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} />,