@100mslive/react-sdk 0.11.3-alpha.2 → 0.11.3-alpha.4

package/src/hooks/useCustomEvent.ts

@@ -1,121 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { HMSNotificationTypes, HMSPeerID, HMSRoleName } from '@100mslive/hms-video-store';
-import { hooksErrHandler } from './types';
-import { useHMSActions, useHMSVanillaNotifications } from '../primitives/HmsRoomProvider';
-import { logErrorHandler } from '../utils/commons';
-
-export interface useCustomEventInput<T> {
-  /**
-   * type of the event, for example, MODERATOR_EVENT, EMOJI_REACTIONS etc.
-   */
-  type: string;
-  /**
-   * the handler function for when the custom event comes. It's recommended
-   * to use `useCallback` for the function passed in here for performance
-   * reasons.
-   * The callback is optional in case you want to decouple sending event and
-   * handling event in the UI.
-   */
-  onEvent?: (data: T) => void;
-  /**
-   * flag to treat event payload as json.
-   * If true, the payload will be stringified before sending and
-   * parsed before calling the onEvent handler function.
-   *
-   * Set it to `false` if you want to send/receive only string messages
-   *
-   * Set it to `true` if you want to send/receive objects
-   *
-   * default value is true
-   */
-  json?: boolean;
-  /**
-   * function to handle errors happening during sending the event
-   */
-  handleError?: hooksErrHandler;
-}
-
-export interface EventReceiver {
-  peerId?: HMSPeerID;
-  roleNames?: HMSRoleName[];
-}
-
-export interface useCustomEventResult<T> {
-  /**
-   * sends the event data to others in the room who will receive it in onEvent
-   *
-   * @example to send message to peers of specific roles
-   * ```js
-   * sendEvent(data, {roleNames: ['host','guest']})
-   * ```
-   *
-   * @example to send message to single peer
-   * ```js
-   * sendEvent(data, {peerId})
-   * ```
-   */
-  sendEvent: (data: T, receiver?: EventReceiver) => void;
-}
-
-const stringifyData = <T>(data: T, json: boolean) => (json ? JSON.stringify(data || '') : (data as unknown as string));
-
-/**
- * A generic function to implement [custom events](https://www.100ms.live/docs/javascript/v2/features/chat#custom-events) in your UI.
- * The data to be sent to remote is expected to be a serializable JSON. The serialization
- * and deserialization is taken care of by the hook.
- */
-export const useCustomEvent = <T>({
-  type,
-  json = true,
-  onEvent,
-  handleError = logErrorHandler,
-}: useCustomEventInput<T>): useCustomEventResult<T> => {
-  const actions = useHMSActions();
-  const notifications = useHMSVanillaNotifications();
-
-  useEffect(() => {
-    // we don't want these messages to be stored in store reserving that for chat messages
-    actions.ignoreMessageTypes([type]);
-  }, [actions, type]);
-
-  // this is to handle messages from remote peers
-  useEffect(() => {
-    if (!notifications) {
-      return;
-    }
-    const unsubscribe = notifications.onNotification(notification => {
-      const msg = notification.data;
-      if (msg && msg.type === type) {
-        try {
-          const data = json ? JSON.parse(msg.message) : msg.message;
-          onEvent?.(data as T);
-        } catch (err) {
-          handleError(err as Error, 'handleCustomEvent');
-        }
-      }
-    }, HMSNotificationTypes.NEW_MESSAGE);
-    return unsubscribe;
-  }, [notifications, type, json, onEvent, handleError]);
-
-  // this is to send message to remote peers, peers of specific role or single peer, and call onEvent
-  const sendEvent = useCallback(
-    async (data: T, receiver?: EventReceiver) => {
-      try {
-        const dataStr = stringifyData<T>(data, json);
-        if (receiver && Array.isArray(receiver?.roleNames)) {
-          await actions.sendGroupMessage(dataStr, receiver.roleNames, type);
-        } else if (typeof receiver?.peerId === 'string') {
-          await actions.sendDirectMessage(dataStr, receiver.peerId, type);
-        } else {
-          await actions.sendBroadcastMessage(dataStr, type);
-        }
-        onEvent?.(data);
-      } catch (err) {
-        handleError(err as Error, 'sendCustomEvent');
-      }
-    },
-    [actions, handleError, onEvent, type, json],
-  );
-
-  return { sendEvent };
-};

package/src/hooks/useDevices.ts

@@ -1,96 +0,0 @@
-import { useCallback } from 'react';
-import {
-  DeviceType,
-  selectDevices,
-  selectIsAllowedToPreviewMedia,
-  selectIsAllowedToPublish,
-  selectIsInPreview,
-  selectLocalMediaSettings,
-} from '@100mslive/hms-video-store';
-import { hooksErrHandler } from '../hooks/types';
-import { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';
-import { logErrorHandler } from '../utils/commons';
-
-export type DeviceTypeAndInfo<T> = {
-  [key in DeviceType]?: T;
-};
-
-export interface useDevicesResult {
-  /**
-   * list of all devices by type
-   */
-  allDevices: DeviceTypeAndInfo<MediaDeviceInfo[]>;
-  /**
-   * selected device ids for all types
-   */
-  selectedDeviceIDs: DeviceTypeAndInfo<string>;
-  /**
-   * function to call to update device
-   */
-  updateDevice: ({ deviceType, deviceId }: { deviceType: DeviceType; deviceId: string }) => Promise<void>;
-}
-
-/**
- * This hook can be used to implement a UI component which allows the user to manually change their
- * audio/video device. It returns the list of all devices as well as the currently selected one. The input
- * devices will be returned based on what the user is allowed to publish, so a audio only user won't get
- * the audioInput field. This can be used to show the UI dropdowns properly.
- *
- * Note:
- * - Browsers give access to the list of devices only if the user has given permission to access them
- * - Changing devices manually work best in combination with remembering the user's selection for the next time, do
- *   pass the rememberDeviceSelection flag at time of join for this to happen.
- *
- * @param handleError error handler for any errors during device change
- */
-export const useDevices = (handleError: hooksErrHandler = logErrorHandler): useDevicesResult => {
-  const actions = useHMSActions();
-  const sdkAllDevices: DeviceTypeAndInfo<MediaDeviceInfo[]> = useHMSStore(selectDevices);
-  const sdkSelectedDevices = useHMSStore(selectLocalMediaSettings);
-  const isInPreview = useHMSStore(selectIsInPreview);
-  const selectAllowed = isInPreview ? selectIsAllowedToPreviewMedia : selectIsAllowedToPublish;
-  const isAllowedToPublish = useHMSStore(selectAllowed);
-
-  const selectedDeviceIDs: DeviceTypeAndInfo<string> = {
-    [DeviceType.audioOutput]: sdkSelectedDevices.audioOutputDeviceId,
-  };
-  const allDevices: DeviceTypeAndInfo<MediaDeviceInfo[]> = {
-    [DeviceType.audioOutput]: sdkAllDevices.audioOutput,
-  };
-
-  if (isAllowedToPublish.video) {
-    allDevices[DeviceType.videoInput] = sdkAllDevices.videoInput;
-    selectedDeviceIDs[DeviceType.videoInput] = sdkSelectedDevices.videoInputDeviceId;
-  }
-  if (isAllowedToPublish.audio) {
-    allDevices[DeviceType.audioInput] = sdkAllDevices.audioInput;
-    selectedDeviceIDs[DeviceType.audioInput] = sdkSelectedDevices.audioInputDeviceId;
-  }
-
-  const updateDevice = useCallback(
-    async ({ deviceType, deviceId }: { deviceType: DeviceType; deviceId: string }) => {
-      try {
-        switch (deviceType) {
-          case DeviceType.audioInput:
-            await actions.setAudioSettings({ deviceId });
-            break;
-          case DeviceType.videoInput:
-            await actions.setVideoSettings({ deviceId });
-            break;
-          case DeviceType.audioOutput:
-            await actions.setAudioOutputDevice(deviceId);
-            break;
-        }
-      } catch (err) {
-        handleError(err as Error, 'updateDevices');
-      }
-    },
-    [handleError, actions],
-  );
-
-  return {
-    allDevices,
-    selectedDeviceIDs,
-    updateDevice,
-  };
-};

package/src/hooks/useEmbedShare.ts

@@ -1,97 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useScreenShare } from './useScreenShare';
-import usePrevious, { isChromiumBased } from '../utils/commons';
-
-export interface useEmbedShareResult {
-  /**
-   * Embed and start sharing a URL.
-   *
-   * It will throw an error in the following scenarios:
-   * - When the URL has not been passed
-   * - When the reference has not been attached to an iframe
-   * - When screen share cannot be started
-   */
-  startEmbedShare: (value: string) => Promise<void>;
-
-  /**
-   * Stop sharing the embed.
-   */
-  stopEmbedShare: () => Promise<void>;
-  /**
-   * Flag to check if an embed is currently being shared.
-   */
-  isEmbedShareInProgress: boolean;
-
-  /**
-   * Reference to attach to the iframe that is responsible for rendering the URL passed.
-   */
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
-}
-
-/**
- * @param resetConfig Callback that implements cleanup after Embed sharing stops. It is an optional parameter.
- * @returns useEmbedShareResult
- */
-export const useEmbedShare = (resetConfig?: () => void): useEmbedShareResult => {
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const [sharing, setSharing] = useState(false);
-
-  const handleScreenShareError = useCallback(() => {
-    throw new Error('unable to start screen share');
-  }, []);
-  const inProgress = useRef(false);
-  const { amIScreenSharing, toggleScreenShare } = useScreenShare(handleScreenShareError);
-  // store previous state of screensharing, it will help to reset the config after screensharing stop.
-  const previouslySharing = usePrevious(amIScreenSharing);
-
-  const stopShare = useCallback(async () => {
-    if (amIScreenSharing) {
-      await toggleScreenShare?.(); // Stop screen sharing
-      iframeRef.current = null;
-    }
-  }, [amIScreenSharing, toggleScreenShare]);
-
-  const startShare = useCallback(
-    async (value: string) => {
-      if (inProgress.current) {
-        return;
-      }
-      if (!value) {
-        throw new Error('URL not found');
-      }
-      if (amIScreenSharing) {
-        throw new Error('You are already sharing');
-      }
-      if (!iframeRef.current) {
-        throw new Error('Attach a reference `iframeRef` to iframe for sharing');
-      }
-      iframeRef.current.src = value;
-      inProgress.current = true;
-      setSharing(true);
-      await toggleScreenShare?.({
-        forceCurrentTab: isChromiumBased,
-        cropElement: iframeRef.current,
-        preferCurrentTab: isChromiumBased,
-      });
-    },
-    [amIScreenSharing, toggleScreenShare],
-  );
-
-  useEffect(() => {
-    if (previouslySharing && !amIScreenSharing) {
-      resetConfig?.();
-      if (iframeRef.current) {
-        iframeRef.current.src = '';
-      }
-      inProgress.current = false;
-      setSharing(false);
-    }
-  }, [amIScreenSharing, previouslySharing, resetConfig]);
-
-  return {
-    startEmbedShare: startShare,
-    stopEmbedShare: stopShare,
-    iframeRef,
-    isEmbedShareInProgress: sharing,
-  };
-};

package/src/hooks/usePDFShare.ts

@@ -1,117 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useScreenShare } from './useScreenShare';
-import usePrevious, { isChromiumBased, pdfIframeURL } from '../utils/commons';
-
-export interface usePDFShareResult {
-  /**
-   * Start sharing a PDF file or URL.
-   * It will throw an error in the following scenarios:
-   * - When file or URL has not been passed, or is invalid
-   * - When the reference has not been attached to an iframe
-   * - When screen share cannot be started
-   */
-  startPDFShare: (value: File | string) => Promise<void>;
-
-  /**
-   * Stop sharing the PDF file or URL.
-   */
-  stopPDFShare: () => Promise<void>;
-  /**
-   * Flag to check if PDF sharing is currently in progress.
-   */
-  isPDFShareInProgress: boolean;
-
-  /**
-   * Reference to attach to the iframe that is responsible for rendering the PDF.
-   */
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
-}
-
-/**
- * @param resetConfig  Callback that implements cleanup after PDF sharing stops. Typically used to reset the currently selected PDF file or URL in your state. It is an optional parameter.
- * @returns usePDFShareResult
- */
-export const usePDFShare = (resetConfig?: () => void): usePDFShareResult => {
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const [sharing, setSharing] = useState(false);
-
-  const handleScreenShareError = useCallback(() => {
-    throw new Error('unable to start screen share');
-  }, []);
-  const inProgress = useRef(false);
-  const { amIScreenSharing, toggleScreenShare } = useScreenShare(handleScreenShareError);
-  // store previous state of screensharing, it will help to reset the config after screensharing stop.
-  const previouslySharing = usePrevious(amIScreenSharing);
-
-  const sendDataToPDFIframe = useCallback((file?: File) => {
-    if (iframeRef.current) {
-      iframeRef.current.contentWindow?.postMessage(
-        {
-          theme: 2, // dark theme -> 2, light theme -> 1
-          file,
-        },
-        '*',
-      );
-    }
-  }, []);
-
-  const stopShare = useCallback(async () => {
-    if (amIScreenSharing) {
-      await toggleScreenShare?.(); // Stop screen sharing
-    }
-  }, [amIScreenSharing, toggleScreenShare]);
-
-  const startShare = useCallback(
-    // eslint-disable-next-line complexity
-    async (value: File | string) => {
-      if (inProgress.current) {
-        return;
-      }
-      if (!value) {
-        throw new Error('File or url not found');
-      }
-      if (amIScreenSharing) {
-        throw new Error('You are already sharing');
-      }
-      if (!iframeRef.current) {
-        throw new Error('Attach a reference `iframeRef` to iframe for sharing');
-      }
-
-      iframeRef.current.src = `${pdfIframeURL}${typeof value === 'string' ? `?file=${value}` : ''}`;
-      iframeRef.current.onload = () => {
-        requestAnimationFrame(() => {
-          if (value instanceof File) {
-            sendDataToPDFIframe(value);
-          }
-        });
-      };
-      inProgress.current = true;
-      setSharing(true);
-      const isInsideIframe = window.self !== window.top;
-      await toggleScreenShare?.({
-        forceCurrentTab: isChromiumBased && !isInsideIframe,
-        cropElement: iframeRef.current,
-        preferCurrentTab: isChromiumBased && !isInsideIframe,
-      });
-    },
-    [amIScreenSharing, sendDataToPDFIframe, toggleScreenShare],
-  );
-
-  useEffect(() => {
-    if (previouslySharing && !amIScreenSharing) {
-      resetConfig?.();
-      if (iframeRef.current) {
-        iframeRef.current.removeAttribute('src');
-      }
-      inProgress.current = false;
-      setSharing(false);
-    }
-  }, [amIScreenSharing, previouslySharing, resetConfig]);
-
-  return {
-    startPDFShare: startShare,
-    stopPDFShare: stopShare,
-    iframeRef,
-    isPDFShareInProgress: sharing,
-  };
-};

package/src/hooks/usePaginatedParticipants.ts

@@ -1,56 +0,0 @@
-import { useRef, useState } from 'react';
-import { HMSPeer, HMSPeerListIteratorOptions } from '@100mslive/hms-video-store';
-import { useHMSActions } from '../primitives/HmsRoomProvider';
-
-export interface usePaginatedParticipantsResult {
-  /**
-   * call this function to load initial peers and also when you want to poll the peers information
-   */
-  loadPeers: Promise<void>;
-  /**
-   * this function is to be called when loadPeers is called at least once. This will fetch the next batch of peers
-   */
-  loadMorePeers: Promise<void>;
-  hasNext: () => boolean;
-  // list of peers loaded
-  peers: HMSPeer[];
-  // total number of peers matching the input options at the time of the request
-  total: number;
-}
-
-export type usePaginatedParticipantsInput = HMSPeerListIteratorOptions;
-
-const processPeers = (peers: HMSPeer[]) => {
-  return peers.reduce<Record<string, HMSPeer>>((acc, peer) => {
-    acc[peer.id] = peer;
-    return acc;
-  }, {});
-};
-
-export const usePaginatedParticipants = (options: HMSPeerListIteratorOptions) => {
-  const actions = useHMSActions();
-  const iterator = useRef(actions.getPeerListIterator(options));
-  const [peers, setPeers] = useState<Record<string, HMSPeer>>({});
-  const [total, setTotal] = useState(0);
-
-  return {
-    loadPeers: () =>
-      iterator.current.findPeers().then(peers => {
-        setPeers(processPeers(peers));
-        setTotal(iterator.current.getTotal());
-      }),
-    loadMorePeers: () =>
-      iterator.current.next().then(peers => {
-        setPeers(prevPeers => {
-          return {
-            ...prevPeers,
-            ...processPeers(peers),
-          };
-        });
-        setTotal(iterator.current.getTotal());
-      }),
-    hasNext: () => iterator.current.hasNext(),
-    total,
-    peers: Object.values(peers),
-  };
-};

package/src/hooks/useParticipantList.ts

@@ -1,27 +0,0 @@
-import { useMemo } from 'react';
-import {
-  HMSPeer,
-  HMSRoleName,
-  selectIsConnectedToRoom,
-  selectPeerCount,
-  selectPeers,
-  selectRemotePeers,
-} from '@100mslive/hms-video-store';
-import { useHMSStore } from '../primitives/HmsRoomProvider';
-import { groupByRoles } from '../utils/groupBy';
-
-export interface useParticipantListResult {
-  roles: HMSRoleName[];
-  participantsByRoles: Record<string, HMSPeer[]>;
-  peerCount: number;
-  isConnected: boolean;
-}
-
-export const useParticipantList = () => {
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const participantList = useHMSStore(isConnected ? selectPeers : selectRemotePeers);
-  const peerCount = useHMSStore(selectPeerCount);
-  const participantsByRoles = useMemo(() => groupByRoles(participantList), [participantList]);
-  const roles = Object.keys(participantsByRoles);
-  return { roles, participantsByRoles, peerCount, isConnected };
-};

package/src/hooks/useParticipants.ts

@@ -1,72 +0,0 @@
-import {
-  HMSPeer,
-  HMSRoleName,
-  selectAvailableRoleNames,
-  selectIsConnectedToRoom,
-  selectPeerCount,
-  selectPeerMetadata,
-  selectPeers,
-  selectRemotePeers,
-} from '@100mslive/hms-video-store';
-import { useHMSStore, useHMSVanillaStore } from '../primitives/HmsRoomProvider';
-
-export interface useParticipantsResult {
-  /**
-   * list of participants that match the given filters
-   */
-  participants: HMSPeer[];
-  /**
-   * Total number of participants in the room
-   */
-  peerCount: number;
-  /**
-   * is joined in the room
-   */
-  isConnected: boolean;
-  /**
-   * role names with at least one participant present with that role
-   */
-  rolesWithParticipants: HMSRoleName[];
-}
-
-export type useParticipantsParams = {
-  /** To filter by particular role */
-  role: HMSRoleName;
-  /**
-   * To filter by particular by metadata. only supports `{ isHandRaised: true }` for now
-   * @beta
-   */
-  metadata: Record<string, any>;
-  /** To filter by name/role (partial match) */
-  search: string;
-};
-
-/**
- * This can be used to get the total count of participants in the room, participants
- * filtered by role or metadata with isHandRaised or the entire participants if no params are passed
- * @param {useParticipantsParams} params
- * @returns {useParticipantsResult}
- */
-export const useParticipants = (params?: useParticipantsParams) => {
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const peerCount = useHMSStore(selectPeerCount);
-  const availableRoles = useHMSStore(selectAvailableRoleNames);
-  let participantList = useHMSStore(isConnected ? selectPeers : selectRemotePeers);
-  const rolesWithParticipants = Array.from(new Set(participantList.map(peer => peer.roleName)));
-  const vanillaStore = useHMSVanillaStore();
-  if (params?.metadata?.isHandRaised) {
-    participantList = participantList.filter(peer => {
-      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;
-    });
-  }
-  if (params?.role && availableRoles.includes(params.role)) {
-    participantList = participantList.filter(peer => peer.roleName === params.role);
-  }
-  if (params?.search) {
-    const search = params.search.toLowerCase();
-    participantList = participantList.filter(
-      peer => peer.roleName?.toLowerCase().includes(search) || peer.name.toLowerCase().includes(search),
-    );
-  }
-  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
-};