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

package/src/hooks/useWhiteboard.ts

@@ -1,50 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import {
-  selectAppData,
-  selectIsConnectedToRoom,
-  selectLocalPeer,
-  selectPermissions,
-  selectWhiteboard,
-} from '@100mslive/hms-video-store';
-import { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';
-
-export const useWhiteboard = (isMobile = false) => {
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const localPeerUserId = useHMSStore(selectLocalPeer)?.customerUserId;
-  const whiteboard = useHMSStore(selectWhiteboard);
-  const isHeadless = useHMSStore(selectAppData('disableNotifications'));
-  const open = !!whiteboard?.open;
-  const isOwner = whiteboard?.owner === localPeerUserId;
-  const actions = useHMSActions();
-  const [isEnabled, setIsEnabled] = useState(false);
-  const permissions = useHMSStore(selectPermissions)?.whiteboard;
-  const isAdmin = !!permissions?.includes('admin');
-
-  useEffect(() => {
-    if (isConnected) {
-      setIsEnabled(actions.interactivityCenter.whiteboard.isEnabled);
-    }
-  }, [isConnected, actions]);
-
-  const toggle = useCallback(async () => {
-    if (!isConnected || !isAdmin) {
-      return;
-    }
-
-    if (open) {
-      isOwner && (await actions.interactivityCenter.whiteboard.close());
-    } else {
-      await actions.interactivityCenter.whiteboard.open();
-    }
-  }, [actions, isOwner, isAdmin, open, isConnected]);
-
-  return {
-    open,
-    token: whiteboard?.token,
-    endpoint: whiteboard?.addr,
-    isOwner,
-    isAdmin,
-    zoomToContent: isHeadless || isMobile,
-    toggle: isEnabled && isAdmin ? toggle : undefined,
-  };
-};

package/src/index.ts

@@ -1,56 +0,0 @@
-export {
-  HMSRoomProvider,
-  useHMSStore,
-  useHMSActions,
-  useHMSNotifications,
-  useHMSVanillaStore,
-  useHMSVanillaNotifications,
-  useHMSStatsStore,
-} from './primitives/HmsRoomProvider';
-export { usePreviewJoin } from './hooks/usePreviewJoin';
-export { useAVToggle } from './hooks/useAVToggle';
-export { useVideo } from './hooks/useVideo';
-export { useScreenShare } from './hooks/useScreenShare';
-export { useRemoteAVToggle } from './hooks/useRemoteAVToggle';
-export { useVideoList } from './hooks/useVideoList';
-export { useAudioLevelStyles } from './hooks/useAudioLevelStyles';
-export { useDevices } from './hooks/useDevices';
-export { useParticipantList } from './hooks/useParticipantList';
-export { useRecordingStreaming } from './hooks/useRecordingStreaming';
-export { useAutoplayError } from './hooks/useAutoplayError';
-export { useCustomEvent } from './hooks/useCustomEvent';
-export { useParticipants } from './hooks/useParticipants';
-export { useEmbedShare } from './hooks/useEmbedShare';
-export { usePDFShare } from './hooks/usePDFShare';
-export { usePaginatedParticipants } from './hooks/usePaginatedParticipants';
-export { useWhiteboard } from './hooks/useWhiteboard';
-export { useAwayNotifications } from './hooks/useAwayNotifications';
-export { useTranscript } from './hooks/useTranscript';
-export { useAudioMode } from './hooks/useAudioMode';
-
-// types
-export type { hooksErrHandler } from './hooks/types';
-export type { usePreviewInput, usePreviewResult } from './hooks/usePreviewJoin';
-export type { useVideoListInput, useVideoResult, useVideoListTile } from './hooks/useVideoList';
-export type { useAVToggleResult } from './hooks/useAVToggle';
-export type { useDevicesResult } from './hooks/useDevices';
-export type { useScreenShareResult } from './hooks/useScreenShare';
-export type { useRemoteAVToggleResult } from './hooks/useRemoteAVToggle';
-export type { useRecordingStreamingResult } from './hooks/useRecordingStreaming';
-export type { useParticipantListResult } from './hooks/useParticipantList';
-export type { useParticipantsResult, useParticipantsParams } from './hooks/useParticipants';
-export type { useVideoInput, useVideoOutput } from './hooks/useVideo';
-export type { useAutoplayErrorResult } from './hooks/useAutoplayError';
-export type { useCustomEventInput, useCustomEventResult } from './hooks/useCustomEvent';
-export type { useEmbedShareResult } from './hooks/useEmbedShare';
-export type { usePDFShareResult } from './hooks/usePDFShare';
-export type { TrackWithPeerAndDimensions } from './utils/layout';
-export type { usePaginatedParticipantsResult, usePaginatedParticipantsInput } from './hooks/usePaginatedParticipants';
-export type { HMSTranscript, useHMSTranscriptInput } from './hooks/useTranscript';
-
-// helpers
-export { throwErrorHandler } from './utils/commons';
-
-export { getVideoTracksFromPeers as getPeersWithTiles } from './utils/layout';
-// reexport everything from store so app can import everything directly from this
-export * from '@100mslive/hms-video-store';

package/src/primitives/HmsRoomProvider.ts

@@ -1,221 +0,0 @@
-import React, { createContext, PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';
-import create from 'zustand';
-import {
-  HMSActions,
-  HMSGenericTypes,
-  HMSNotificationInCallback,
-  HMSNotifications,
-  HMSNotificationTypeParam,
-  HMSReactiveStore,
-  HMSStatsStore,
-  HMSStatsStoreWrapper,
-  HMSStore,
-  HMSStoreWrapper,
-} from '@100mslive/hms-video-store';
-import { HMSContextProviderProps, hooksErrorMessage, makeHMSStatsStoreHook, makeHMSStoreHook } from './store';
-import { isBrowser } from '../utils/isBrowser';
-
-export interface HMSRoomProviderProps<T extends HMSGenericTypes> {
-  actions?: HMSActions<T>;
-  store?: HMSStoreWrapper<T>;
-  notifications?: HMSNotifications;
-  stats?: HMSStatsStoreWrapper;
-  /**
-   * if true this will enable webrtc stats collection
-   */
-  isHMSStatsOn?: boolean;
-  leaveOnUnload?: boolean;
-}
-
-/**
- * only one context is being created currently. This would need to be changed if multiple
- * rooms have to be supported, where every room will have its own context, provider, store and actions.
- */
-const HMSContext = createContext<HMSContextProviderProps | null>(null);
-
-/**
- * top level wrapper for using react sdk hooks. This doesn't have any mandatory arguments, if you are already
- * initialising the sdk on your side, you can pass in the primitives from there as well to use hooks for
- * react part of your code.
- * @constructor
- */
-// eslint-disable-next-line complexity
-export const HMSRoomProvider = <T extends HMSGenericTypes = { sessionStore: Record<string, any> }>({
-  children,
-  actions,
-  store,
-  notifications,
-  stats,
-  isHMSStatsOn = false,
-  leaveOnUnload = true,
-}: PropsWithChildren<HMSRoomProviderProps<T>>) => {
-  const providerProps: HMSContextProviderProps = useMemo(() => {
-    let providerProps: HMSContextProviderProps;
-    // adding a dummy function for setstate and destroy because zustan'd create expects them
-    // to be present but we don't expose them from the store.
-    const errFn = () => {
-      throw new Error('modifying store is not allowed');
-    };
-    if (actions && store) {
-      providerProps = {
-        actions: actions,
-        store: create<HMSStore<T>>({
-          ...store,
-          setState: errFn,
-          destroy: errFn,
-        }),
-      };
-      if (notifications) {
-        providerProps.notifications = notifications;
-      }
-      if (stats) {
-        providerProps.statsStore = create<HMSStatsStore>({
-          getState: stats.getState,
-          subscribe: stats.subscribe,
-          setState: errFn,
-          destroy: errFn,
-        });
-      }
-    } else {
-      const hmsReactiveStore = new HMSReactiveStore<T>();
-      providerProps = {
-        actions: hmsReactiveStore.getActions(),
-        store: create<HMSStore<T>>({
-          ...hmsReactiveStore.getStore(),
-          setState: errFn,
-          destroy: errFn,
-        }), // convert vanilla store in react hook
-        notifications: hmsReactiveStore.getNotifications(),
-      };
-
-      if (isHMSStatsOn) {
-        const stats = hmsReactiveStore.getStats();
-        providerProps.statsStore = create<HMSStatsStore>({
-          getState: stats.getState,
-          subscribe: stats.subscribe,
-          setState: errFn,
-          destroy: errFn,
-        });
-      }
-    }
-
-    // @ts-ignore
-    providerProps.actions.setFrameworkInfo({
-      type: 'react-web',
-      version: React.version,
-      sdkVersion: process.env.REACT_SDK_VERSION,
-    });
-
-    return providerProps;
-  }, [actions, store, notifications, stats, isHMSStatsOn]);
-
-  useEffect(() => {
-    if (isBrowser && leaveOnUnload) {
-      const unloadCallback = () => providerProps.actions.leave();
-      window.addEventListener('unload', unloadCallback);
-      return () => {
-        window.removeEventListener('unload', unloadCallback);
-      };
-    }
-
-    return () => {};
-  }, [leaveOnUnload, providerProps]);
-
-  return React.createElement(HMSContext.Provider, { value: providerProps }, children);
-};
-
-/**
- * `useHMSStore` is a read only hook which can be passed a selector to read data.
- * The hook can only be used in a component if HMSRoomProvider is present in its ancestors.
- */
-export const useHMSStore = makeHMSStoreHook(HMSContext);
-
-export const useHMSStatsStore = makeHMSStatsStoreHook(HMSContext);
-
-/**
- * `useHMSVanillaStore` is a read only hook which returns the vanilla HMSStore.
- * Usage:
- * ```
- * const hmsStore = useHMSVanillaStore();
- * const dominantSpeaker = hmsStore.getState(selectDominantSpeaker);
- * ```
- *
- * Note: There's no need to use the vanilla hmsStore in React components.
- * This is used in rare cases where the store needs to be accessed outside a React component.
- * For almost every case, `useHMSStore` would get the job done.
- */
-export const useHMSVanillaStore = () => {
-  const HMSContextConsumer = useContext(HMSContext);
-  if (!HMSContextConsumer) {
-    throw new Error(hooksErrorMessage);
-  }
-
-  return HMSContextConsumer.store;
-};
-
-/*
- * `useHMSVanillaNotifications` returns the vanilla HMSNotifications object. This makes it a bit easier to ensure
- * a notification is processed only once in your components. The other way is to use the hook version and put
- * the component high enough in the chain.
- * Usage:
- * ```
- * useEffect(() => {
- *   const unsub = notifications.onNotification((notification) => {
- *     console.log(notification);
- *   }, notificationType);
- *   return unsub;
- * }, [])
- * ```
- */
-export const useHMSVanillaNotifications = () => {
-  const HMSContextConsumer = useContext(HMSContext);
-  if (!HMSContextConsumer) {
-    throw new Error(hooksErrorMessage);
-  }
-  return HMSContextConsumer.notifications;
-};
-
-/*
- * `useHMSActions` is a write only hook which can be used to dispatch actions.
- */
-export const useHMSActions = () => {
-  const HMSContextConsumer = useContext(HMSContext);
-  if (!HMSContextConsumer) {
-    throw new Error(hooksErrorMessage);
-  }
-  return HMSContextConsumer.actions;
-};
-
-/**
- * `useHMSNotifications` is a read only hook which gives the latest notification(HMSNotification) received.
- * @param type can be a string or an array of string for the types of notifications to listen to. If an array is passed
- * either declare it outside the functional component or use a useMemo to make sure its reference stays same across
- * rerenders for performance reasons.
- */
-export const useHMSNotifications = <T extends HMSNotificationTypeParam>(
-  type?: T,
-): HMSNotificationInCallback<T> | null => {
-  const HMSContextConsumer = useContext(HMSContext);
-  const [notification, setNotification] = useState<HMSNotificationInCallback<T> | null>(null);
-
-  if (!HMSContextConsumer) {
-    throw new Error(hooksErrorMessage);
-  }
-
-  useEffect(() => {
-    if (!HMSContextConsumer.notifications) {
-      return;
-    }
-    const unsubscribe = HMSContextConsumer.notifications.onNotification<T>(notification => {
-      setNotification(notification);
-    }, type);
-    return unsubscribe;
-  }, [HMSContextConsumer.notifications, type]);
-
-  return notification;
-};
-
-export const useIsHMSStatsOn = () => {
-  const HMSContextConsumer = useContext(HMSContext);
-  return Boolean(HMSContextConsumer?.statsStore);
-};

package/src/primitives/store.ts

@@ -1,59 +0,0 @@
-import React, { useContext } from 'react';
-import { EqualityChecker, StateSelector } from 'zustand';
-import shallow from 'zustand/shallow';
-import { HMSActions, HMSNotifications, HMSStatsStore, HMSStore, IStoreReadOnly } from '@100mslive/hms-video-store';
-import HMSLogger from '../utils/logger';
-
-export interface IHMSReactStore<S extends HMSStore | HMSStatsStore> extends IStoreReadOnly<S> {
-  <U>(selector: StateSelector<S, U>, equalityFn?: EqualityChecker<U>): U;
-}
-
-export const hooksErrorMessage = `It seems like you forgot to add your component within a top level HMSRoomProvider, please refer to 100ms react docs(https://www.100ms.live/docs/javascript/v2/how-to-guides/install-the-sdk/integration#react-hooks) to check on the required steps for using this hook. If the provider is present
-  at the top level, check the yarn.lock/package-lock.json, if there are multiple versions of @100mslive/react-sdk. Please ensure the versions of @100mslive/react-sdk and @100mslive/roomkit-react are the same versions from the release notes(https://www.100ms.live/docs/javascript/v2/changelog/release-notes) that you are trying to update to.`;
-
-export interface HMSContextProviderProps {
-  actions: HMSActions; // for actions which may also mutate store
-  store: IHMSReactStore<HMSStore>; // readonly store, don't mutate this
-  notifications?: HMSNotifications;
-  statsStore?: IHMSReactStore<HMSStatsStore>;
-}
-
-export function makeHMSStoreHook(hmsContext: React.Context<HMSContextProviderProps | null>) {
-  const useHMSStore = <StateSlice>(
-    selector: StateSelector<HMSStore, StateSlice>,
-    equalityFn: EqualityChecker<StateSlice> = shallow,
-  ) => {
-    if (!selector) {
-      HMSLogger.w(
-        'fetching full store without passing any selector may have a heavy performance impact on your website.',
-      );
-    }
-    const HMSContextConsumer = useContext(hmsContext);
-    if (!HMSContextConsumer) {
-      throw new Error(hooksErrorMessage);
-    }
-    const useStore = HMSContextConsumer.store;
-    return useStore(selector, equalityFn);
-  };
-  return useHMSStore;
-}
-
-export function makeHMSStatsStoreHook(hmsContext: React.Context<HMSContextProviderProps | null>) {
-  const useHMSStatsStore = <StateSlice>(
-    selector: StateSelector<HMSStatsStore, StateSlice>,
-    equalityFn: EqualityChecker<StateSlice> = shallow,
-  ) => {
-    if (!selector) {
-      HMSLogger.w(
-        'fetching full store without passing any selector may have a heavy performance impact on your website.',
-      );
-    }
-    const HMSContextConsumer = useContext(hmsContext);
-    if (!HMSContextConsumer) {
-      throw new Error(hooksErrorMessage);
-    }
-    const useStore = HMSContextConsumer.statsStore;
-    return useStore?.(selector, equalityFn);
-  };
-  return useHMSStatsStore;
-}

package/src/primitives/types.ts

@@ -1,6 +0,0 @@
-import { EqualityChecker, StateSelector } from 'zustand';
-import { HMSStatsStore, HMSStore, IStoreReadOnly } from '@100mslive/hms-video-store';
-
-export interface IHMSReactStore<S extends HMSStore | HMSStatsStore> extends IStoreReadOnly<S> {
-  <U>(selector: StateSelector<S, U>, equalityFn?: EqualityChecker<U>): U;
-}

package/src/utils/commons.ts

@@ -1,34 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { parsedUserAgent } from '@100mslive/hms-video-store';
-import HMSLogger from './logger';
-import { hooksErrHandler } from '../hooks/types';
-
-const TAG = 'react-sdk';
-
-export const logErrorHandler: hooksErrHandler = (err: Error, method?: string) => HMSLogger.e(TAG, method, err);
-
-/**
- * pass in this error handler to get the error thrown back to the UI for further handling, showing toast etc.
- * @param err
- */
-export const throwErrorHandler: hooksErrHandler = (err: Error) => {
-  throw err;
-};
-
-export default function usePrevious<T>(state: T): T | undefined {
-  const ref = useRef<T>();
-
-  useEffect(() => {
-    ref.current = state;
-  });
-
-  return ref.current;
-}
-
-const chromiumBasedBrowsers = ['blink'];
-
-export const isChromiumBased = chromiumBasedBrowsers.some(
-  (value: string) => parsedUserAgent.getEngine()?.name?.toLowerCase() === value,
-);
-
-export const pdfIframeURL = 'https://pdf-annotation.100ms.live/generic/web/viewer.html';

package/src/utils/groupBy.ts

@@ -1,29 +0,0 @@
-import { HMSPeer } from '@100mslive/hms-video-store';
-/**
- * Give array like [
- * { name: 'peer1', id: 1, roleName: 'role1' },
- * { name: 'peer2', id: 2, roleName: 'role2' }
- *]
- * the output will be
- * {
- * 'role1': [{'name': 'peer1', id: 1, roleName: 'role1'}],
- * 'role2': [{ name: 'peer2', id: 2, roleName: 'role2' }]
- * }
- * @param {HMSPeer[]} peers
- * @returns
- */
-export const groupByRoles = (peers: HMSPeer[]) => {
-  if (!peers || !Array.isArray(peers) || peers.length === 0) {
-    return {};
-  }
-  return peers.reduce((res: Record<string, HMSPeer[]>, peer) => {
-    if (!peer.roleName) {
-      return res;
-    }
-    if (!res[peer.roleName]) {
-      res[peer.roleName] = [];
-    }
-    res[peer.roleName].push(peer);
-    return res;
-  }, {});
-};

package/src/utils/isBrowser.ts

@@ -1 +0,0 @@
-export const isBrowser = typeof window !== 'undefined';