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

package/src/hooks/usePreviewJoin.ts

@@ -1,166 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import {
-  HMSConfigInitialSettings,
-  HMSICEServer,
-  HMSPreviewConfig,
-  HMSRoomState,
-  selectIsConnectedToRoom,
-  selectRoomState,
-} from '@100mslive/hms-video-store';
-import { hooksErrHandler } from './types';
-import { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';
-import { logErrorHandler } from '../utils/commons';
-
-export interface usePreviewInput {
-  /**
-   * name of user who is joining, this is only required if join is called
-   */
-  name?: string;
-  /**
-   * app side authentication token
-   */
-  token: string;
-  /**
-   * any extra metadata info for the peer
-   */
-  metadata?: string;
-  /**
-   * function to handle errors happening during preview
-   */
-  handleError?: hooksErrHandler;
-  initEndpoint?: string;
-  /**
-   * initial settings for audio/video and device to be used.
-   */
-  initialSettings?: HMSConfigInitialSettings;
-  /**
-   * Enable to get a network quality score while in preview. The score ranges from -1 to 5.
-   * -1 when we are not able to connect to 100ms servers within an expected time limit
-   * 0 when there is a timeout/failure when measuring the quality
-   * 1-5 ranges from poor to good quality.
-   */
-  captureNetworkQualityInPreview?: boolean;
-  asRole?: string;
-  /**
-   * if this flag is enabled, the SDK takes care of unsubscribing to the video when it goes out of view.
-   * Additionally if simulcast is enabled, it takes care of auto managing simulcast layers based on the
-   * dimensions of the video element to conserve bandwidth.
-   */
-  autoManageVideo?: boolean;
-  /**
-   * if this flag is enabled, wake lock will be acquired automatically(if supported) when joining the room, so the device
-   * will be kept awake.
-   */
-  autoManageWakeLock?: boolean;
-
-  /**
-   * use custom STUN/TURN servers for media connection (advanced)
-   */
-  iceServers?: HMSICEServer[];
-}
-
-export interface usePreviewResult {
-  /**
-   * enable the join button for the user only when this is true
-   */
-  enableJoin: boolean;
-  /**
-   * call this function to join the room
-   */
-  join: () => Promise<void>;
-  /**
-   * once the user has joined the room, till leave happens this flag will be true. It can be used
-   * to decide to show between preview form and conferencing component/video tiles.
-   */
-  isConnected: boolean;
-  /**
-   * call this function to join the room
-   */
-  preview: () => Promise<void>;
-}
-
-/**
- * This hook can be used to build a preview UI component, this lets you call preview every time the passed in
- * token changes. This hook is best used in combination with useDevices for changing devices, useAVToggle for
- * muting/unmuting and useAudioLevelStyles for showing mic audio level to the user.
- * Any device change or mute/unmute will be carried across to join.
- */
-export const usePreviewJoin = ({
-  name = '',
-  token,
-  metadata,
-  handleError = logErrorHandler,
-  initEndpoint,
-  initialSettings,
-  captureNetworkQualityInPreview,
-  asRole,
-  autoManageVideo,
-  autoManageWakeLock,
-  iceServers,
-}: usePreviewInput): usePreviewResult => {
-  const actions = useHMSActions();
-  const roomState = useHMSStore(selectRoomState);
-  const isConnected = useHMSStore(selectIsConnectedToRoom) || false;
-  const enableJoin = roomState === HMSRoomState.Preview;
-
-  const config: HMSPreviewConfig = useMemo(() => {
-    return {
-      userName: name,
-      authToken: token,
-      metaData: metadata,
-      rememberDeviceSelection: true,
-      settings: initialSettings,
-      initEndpoint: initEndpoint,
-      asRole,
-      captureNetworkQualityInPreview,
-      autoManageVideo,
-      autoManageWakeLock,
-      iceServers,
-    };
-  }, [
-    name,
-    token,
-    metadata,
-    initEndpoint,
-    initialSettings,
-    captureNetworkQualityInPreview,
-    asRole,
-    autoManageVideo,
-    autoManageWakeLock,
-    iceServers,
-  ]);
-
-  const preview = useCallback(async () => {
-    if (!token) {
-      return;
-    }
-    try {
-      if (isConnected || roomState !== HMSRoomState.Disconnected) {
-        await actions.leave().catch(() => {
-          // Do nothing as this might lead to leave called before join
-        });
-      }
-      await actions.preview(config);
-    } catch (err) {
-      handleError(err as Error, 'preview');
-    }
-  }, [token, isConnected, roomState, actions, config, handleError]);
-
-  const join = useCallback(async () => {
-    if (!token) {
-      return;
-    }
-    try {
-      await actions.join(config);
-    } catch (err) {
-      handleError(err as Error, 'join');
-    }
-  }, [actions, config, handleError, token]);
-
-  return {
-    enableJoin,
-    join,
-    isConnected,
-    preview,
-  };
-};

package/src/hooks/useRecordingStreaming.ts

@@ -1,34 +0,0 @@
-import { selectHLSState, selectRecordingState, selectRTMPState } from '@100mslive/hms-video-store';
-import { useHMSStore } from '../primitives/HmsRoomProvider';
-
-export interface useRecordingStreamingResult {
-  isServerRecordingOn: boolean;
-  isBrowserRecordingOn: boolean;
-  isHLSRecordingOn: boolean;
-  isStreamingOn: boolean;
-  isHLSRunning: boolean;
-  isRTMPRunning: boolean;
-  isRecordingOn: boolean;
-}
-
-export const useRecordingStreaming = (): useRecordingStreamingResult => {
-  const recording = useHMSStore(selectRecordingState);
-  const rtmp = useHMSStore(selectRTMPState);
-  const hls = useHMSStore(selectHLSState);
-
-  const isServerRecordingOn = recording.server.running;
-  const isBrowserRecordingOn = recording.browser.running;
-  const isHLSRecordingOn = recording.hls.running;
-  const isStreamingOn = hls.running || rtmp.running;
-  const isRecordingOn = isServerRecordingOn || isBrowserRecordingOn || isHLSRecordingOn;
-
-  return {
-    isServerRecordingOn,
-    isBrowserRecordingOn,
-    isHLSRecordingOn,
-    isStreamingOn,
-    isHLSRunning: hls.running,
-    isRTMPRunning: rtmp.running,
-    isRecordingOn,
-  };
-};

package/src/hooks/useRemoteAVToggle.ts

@@ -1,102 +0,0 @@
-/* eslint-disable complexity */
-import { useCallback } from 'react';
-import {
-  HMSActions,
-  HMSTrack,
-  HMSTrackID,
-  selectAudioTrackByID,
-  selectAudioTrackVolume,
-  selectPermissions,
-  selectVideoTrackByID,
-} from '@100mslive/hms-video-store';
-import { hooksErrHandler } from './types';
-import { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';
-import { logErrorHandler } from '../utils/commons';
-
-export interface useRemoteAVToggleResult {
-  /**
-   * true if unmuted and vice versa
-   */
-  isAudioEnabled: boolean;
-  isVideoEnabled: boolean;
-  /**
-   * current volume of the audio track
-   */
-  volume?: number;
-  /**
-   * use this function to toggle audio state, the function will only be present if the user
-   * has permission to mute/unmute remote audio
-   */
-  toggleAudio?: () => void;
-  /**
-   * use this function to toggle video state, the function will only be present if the user
-   * has permission to mute/unmute remote video
-   */
-  toggleVideo?: () => void;
-  /**
-   * use this function to set the volume of peer's audio track for the local user, the function will
-   * only be present if the remote peer has an audio track to change volume for
-   */
-  setVolume?: (volume: number) => void;
-}
-
-const toggleTrackEnabled = async (
-  actions: HMSActions,
-  track: HMSTrack | undefined | null,
-  handleError: hooksErrHandler,
-) => {
-  if (track) {
-    try {
-      await actions.setRemoteTrackEnabled(track.id, !track.enabled);
-    } catch (err) {
-      handleError(err as Error, 'remoteToggle');
-    }
-  }
-};
-
-/**
- * This hook can be used to implement remote mute/unmute + audio volume changer on tile level.
- * @param peerId of the peer whose tracks need to be managed
- * @param audioTrackId of the peer whose tracks need to be managed
- * @param videoTrackId of the peer whose tracks need to be managed
- * @param handleError to handle any error during toggle of audio/video
- */
-export const useRemoteAVToggle = (
-  audioTrackId: HMSTrackID,
-  videoTrackId: HMSTrackID,
-  handleError: hooksErrHandler = logErrorHandler,
-): useRemoteAVToggleResult => {
-  const actions = useHMSActions();
-  const audioTrack = useHMSStore(selectAudioTrackByID(audioTrackId));
-  const videoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
-  const volume = useHMSStore(selectAudioTrackVolume(audioTrack?.id));
-  const permissions = useHMSStore(selectPermissions);
-  const canToggleVideo = videoTrack?.enabled ? permissions?.mute : permissions?.unmute;
-  const canToggleAudio = audioTrack?.enabled ? permissions?.mute : permissions?.unmute;
-
-  const toggleAudio = useCallback(async () => {
-    await toggleTrackEnabled(actions, audioTrack, handleError);
-  }, [actions, audioTrack, handleError]);
-
-  const toggleVideo = useCallback(async () => {
-    await toggleTrackEnabled(actions, videoTrack, handleError);
-  }, [actions, handleError, videoTrack]);
-
-  const setVolume = useCallback(
-    (volume: number) => {
-      if (audioTrack) {
-        actions.setVolume(volume, audioTrack.id);
-      }
-    },
-    [actions, audioTrack],
-  );
-
-  return {
-    isAudioEnabled: !!audioTrack?.enabled,
-    isVideoEnabled: !!videoTrack?.enabled,
-    volume,
-    toggleAudio: audioTrack && canToggleAudio ? toggleAudio : undefined,
-    toggleVideo: videoTrack?.source === 'regular' && canToggleVideo ? toggleVideo : undefined,
-    setVolume: audioTrack ? setVolume : undefined,
-  };
-};

package/src/hooks/useScreenShare.ts

@@ -1,77 +0,0 @@
-import { useCallback } from 'react';
-import {
-  HMSPeerID,
-  HMSScreenShareConfig,
-  HMSTrackID,
-  selectIsLocalScreenShared,
-  selectPeerScreenSharing,
-  selectScreenSharesByPeerId,
-} from '@100mslive/hms-video-store';
-import { hooksErrHandler } from '../hooks/types';
-import { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';
-import { logErrorHandler } from '../utils/commons';
-
-export interface useScreenShareResult {
-  /**
-   * true if the local user is sharing screen, false otherwise
-   */
-  amIScreenSharing: boolean;
-  /**
-   * toggle screenshare for the local user, will only be present if the user has the permission to toggle
-   */
-  toggleScreenShare?: (config?: HMSScreenShareConfig) => Promise<void>;
-  /**
-   * the id of the peer who is currently sharing screen, will only be present if there is a screenshare in the room.
-   * In case of multiple screenshares, the behaviour of which one is picked is not defined.
-   */
-  screenSharingPeerId?: HMSPeerID;
-  /**
-   * the name of the peer who is currently sharing screen. Will be undefined if no one is sharing the screen.
-   * In case of multiple screenshares, the behavior of which one is picked is not defined.
-   */
-  screenSharingPeerName?: string;
-  /**
-   * screenShare audio track id, will only be present if there is a screenshare with video track
-   */
-  screenShareVideoTrackId?: HMSTrackID;
-  /**
-   * screenShare audio track id, will only be present if there is a screenshare with audio track
-   */
-  screenShareAudioTrackId?: HMSTrackID;
-}
-
-/**
- * This hook can be used to implement a screenshare toggle button as well as know about the screenshare in the room.
- * This works best if your application only needs to show one screenshare in large view at a time with other screenshares
- * similar to normal user tiles.
- * For any complicated requirement with multiple screenshares it's best to use the store directly.
- * For viewing the screenshare this hook is best used in combination with useVideo.
- * For implementing control bar for local peer, this is used based with useAVToggle.
- * @param handleError to handle any errors during screenshare toggle
- */
-export const useScreenShare = (handleError: hooksErrHandler = logErrorHandler): useScreenShareResult => {
-  const actions = useHMSActions();
-  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
-  const screenSharePeer = useHMSStore(selectPeerScreenSharing);
-  const screenShare = useHMSStore(selectScreenSharesByPeerId(screenSharePeer?.id));
-
-  const toggleScreenShare = useCallback(
-    async (config?: HMSScreenShareConfig) => {
-      try {
-        await actions.setScreenShareEnabled(!amIScreenSharing, config);
-      } catch (err) {
-        handleError(err as Error, 'toggleScreenShare');
-      }
-    },
-    [actions, amIScreenSharing, handleError],
-  );
-
-  return {
-    amIScreenSharing,
-    screenSharingPeerId: screenSharePeer?.id,
-    screenSharingPeerName: screenSharePeer?.name,
-    screenShareVideoTrackId: screenShare?.video?.id,
-    screenShareAudioTrackId: screenShare?.audio?.id,
-    toggleScreenShare,
-  };
-};

package/src/hooks/useTranscript.ts

@@ -1,50 +0,0 @@
-import { useEffect } from 'react';
-import { HMSNotificationTypes } from '@100mslive/hms-video-store';
-import { hooksErrHandler } from './types';
-import { useHMSVanillaNotifications } from '../primitives/HmsRoomProvider';
-import { logErrorHandler } from '../utils/commons';
-
-export interface HMSTranscript {
-  start: number;
-  end: number;
-  peer_id: string;
-  final: boolean;
-  transcript: string;
-}
-
-export interface useHMSTranscriptInput {
-  onTranscript?: (data: HMSTranscript[]) => void;
-  handleError?: hooksErrHandler;
-}
-
-/**
- * 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 useTranscript = ({ onTranscript, handleError = logErrorHandler }: useHMSTranscriptInput) => {
-  const type = 'hms_transcript';
-  const notifications = useHMSVanillaNotifications();
-
-  // 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 message = JSON.parse(msg.message);
-          const data = message.results as HMSTranscript[];
-          onTranscript?.(data);
-        } catch (err) {
-          handleError(err as Error, 'handleCaptionEvent');
-        }
-      }
-    }, HMSNotificationTypes.NEW_MESSAGE);
-    return unsubscribe;
-  }, [notifications, type, handleError, onTranscript]);
-
-  return;
-};

package/src/hooks/useVideo.ts

@@ -1,87 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { HMSTrackID, selectVideoTrackByID } from '@100mslive/hms-video-store';
-import { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';
-import HMSLogger from '../utils/logger';
-
-export interface useVideoInput {
-  /**
-   * TrackId that is to be rendered
-   */
-  trackId?: HMSTrackID;
-  /**
-   * Boolean stating whether to override the internal behaviour.
-   * when attach is false, even if tile is inView or enabled, it won't be rendered
-   */
-  attach?: boolean;
-}
-export interface useVideoOutput {
-  videoRef: React.RefCallback<HTMLVideoElement>;
-}
-/**
- * This hooks can be used to implement a video tile component. Given a track id it will return a ref.
- * The returned ref can be used to set on a video element meant to display the video.
- * The hook will take care of attaching and detaching video, and will automatically detach when the video
- * goes out of view to save on bandwidth.
- */
-export const useVideo = ({ trackId, attach }: useVideoInput): useVideoOutput => {
-  const actions = useHMSActions();
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-  const track = useHMSStore(selectVideoTrackByID(trackId));
-  const prevTrackId = useRef<HMSTrackID | undefined>();
-
-  const setRefs = useCallback((node: HTMLVideoElement) => {
-    if (node) {
-      videoRef.current = node;
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!prevTrackId.current) {
-      prevTrackId.current = track?.id;
-    } else if (track?.id && prevTrackId.current !== track?.id) {
-      // Remove video element reference from previous track by detaching
-      (async () => {
-        if (videoRef.current) {
-          try {
-            HMSLogger.d('detaching because different track is passed');
-            await actions.detachVideo(prevTrackId.current!, videoRef.current);
-          } catch (err) {
-            HMSLogger.w('detach video error for track', prevTrackId.current, err);
-          }
-        }
-        prevTrackId.current = track?.id;
-      })();
-    }
-  }, [track?.id, actions]);
-
-  useEffect(() => {
-    (async () => {
-      if (track?.id && videoRef.current) {
-        if (attach !== false) {
-          await actions.attachVideo(track.id, videoRef.current);
-        } else {
-          await actions.detachVideo(track.id, videoRef.current);
-        }
-      }
-    })();
-  }, [track, attach, actions]);
-
-  // detach on unmount
-  useEffect(() => {
-    return () => {
-      (async () => {
-        if (videoRef.current && track) {
-          try {
-            // detach on unmount
-            await actions.detachVideo(track.id, videoRef.current);
-          } catch (err) {
-            HMSLogger.w('detach video error for track', track.id, err);
-          }
-        }
-      })();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return { videoRef: setRefs };
-};

package/src/hooks/useVideoList.ts

@@ -1,162 +0,0 @@
-import React, { useMemo } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
-import { HMSPeer, HMSTrack, HMSTrackID, selectTracksMap } from '@100mslive/hms-video-store';
-import { useHMSVanillaStore } from '../primitives/HmsRoomProvider';
-import {
-  calculateLayoutSizes,
-  chunkElements,
-  getModeAspectRatio,
-  getVideoTracksFromPeers,
-  TrackWithPeer,
-} from '../utils/layout';
-
-export interface useVideoListInput {
-  /**
-   * peers is the list of all peers you need to display
-   */
-  peers: HMSPeer[];
-  /**
-   * Max tiles in a  page. Overrides maxRowCount and maxColCount
-   */
-  maxTileCount?: number;
-  /**
-   * Max rows in a  page. Only applied if maxTileCount is not present
-   */
-  maxRowCount?: number;
-  /**
-   * Max columns in a  page. Only applied if maxTileCount and maxRowCount are not present
-   */
-  maxColCount?: number;
-  /**
-   * A function which tells whether to show the screenshare for a peer who is sharing their screen. A peer is passed
-   * and a boolean value is expected.
-   * This can be useful if there are multiple screenShares in the room where you may want to show the main one in the
-   * center view and others in video list along side other tiles. No screenShare is included by default.
-   * for example. includeScreenShare = (peer) => return peer.id !== mainScreenSharingPeer.id
-   */
-  includeScreenShareForPeer?: (peer: HMSPeer) => boolean;
-  /**
-   * Aspect ratio of VideoTiles, ideally this should be the same as the aspect ratio selected for
-   * capture in the dashboard template.
-   */
-  aspectRatio?: { width: number; height: number };
-  /**
-   * By default this will be true. Only publishing(audio/video/screen) peers in the passed in peer list
-   * will be filtered. If you wish to show all peers, pass false for this.
-   */
-  filterNonPublishingPeers?: boolean;
-  /**
-   * Height that would be subtracted from the parent's height to give the available height, use case: if your pagination is inside the parent component then offsetY would be the height of pagination
-   */
-  offsetY?: number;
-}
-
-export interface useVideoListTile extends TrackWithPeer {
-  width: number;
-  height: number;
-}
-
-export interface useVideoResult {
-  /**
-   * This returns a list of all pages with every page containing the list of all tiles on it.
-   */
-  pagesWithTiles: useVideoListTile[][];
-  /**
-   * add the ref to the element going to render the video list, this is used to measure the available
-   * space/dimensions in order to calculate the best fit
-   */
-  ref: React.MutableRefObject<any>;
-}
-
-const DEFAULTS = {
-  aspectRatio: {
-    width: 1,
-    height: 1,
-  },
-};
-
-/**
- * This hook can be used to build a paginated gallery view of video tiles. You can give the hook
- * a list of all the peers which need to be shown and it tells you how to structure the UI by giving
- * a list of pages with every page having a list of video tiles.
- * Please check the documentation of input and output types for more details.
- */
-export const useVideoList = ({
-  peers,
-  maxTileCount,
-  maxColCount,
-  maxRowCount,
-  includeScreenShareForPeer = () => false,
-  aspectRatio = DEFAULTS.aspectRatio,
-  filterNonPublishingPeers = true,
-  offsetY = 0,
-}: useVideoListInput): useVideoResult => {
-  const { width = 0, height = 0, ref } = useResizeDetector();
-  const store = useHMSVanillaStore();
-  // using vanilla store as we don't need re-rendering every time something in a track changes
-  const tracksMap: Record<HMSTrackID, HMSTrack> = store.getState(selectTracksMap);
-  const tracksWithPeer: TrackWithPeer[] = getVideoTracksFromPeers(
-    peers,
-    tracksMap,
-    includeScreenShareForPeer,
-    filterNonPublishingPeers,
-  );
-  const finalAspectRatio = useMemo(() => {
-    if (aspectRatio) {
-      return aspectRatio;
-    }
-    const modeAspectRatio = getModeAspectRatio(tracksWithPeer);
-    // Default to 1 if there are no video tracks
-    return {
-      width: modeAspectRatio || 1,
-      height: 1,
-    };
-  }, [aspectRatio, tracksWithPeer]);
-  const count = tracksWithPeer.length;
-  const {
-    tilesInFirstPage,
-    defaultWidth,
-    defaultHeight,
-    lastPageWidth,
-    lastPageHeight,
-    isLastPageDifferentFromFirstPage,
-  } = useMemo(
-    () =>
-      calculateLayoutSizes({
-        count,
-        parentWidth: Math.floor(width),
-        parentHeight: Math.floor(height) - Math.min(height, offsetY),
-        maxTileCount,
-        maxRowCount,
-        maxColCount,
-        aspectRatio: finalAspectRatio,
-      }),
-    [count, width, height, maxTileCount, maxRowCount, maxColCount, finalAspectRatio, offsetY],
-  );
-  const chunkedTracksWithPeer = useMemo(
-    () =>
-      chunkElements<TrackWithPeer>({
-        elements: tracksWithPeer,
-        tilesInFirstPage,
-        onlyOnePage: false,
-        isLastPageDifferentFromFirstPage,
-        defaultWidth,
-        defaultHeight,
-        lastPageWidth,
-        lastPageHeight,
-      }),
-    [
-      tracksWithPeer,
-      tilesInFirstPage,
-      isLastPageDifferentFromFirstPage,
-      defaultWidth,
-      defaultHeight,
-      lastPageWidth,
-      lastPageHeight,
-    ],
-  );
-  return {
-    pagesWithTiles: chunkedTracksWithPeer,
-    ref,
-  };
-};