@100mslive/react-native-hms 0.9.2 → 0.9.5

package/src/classes/HMSRemoteAudioTrack.ts

@@ -1,5 +1,5 @@
 import { NativeModules } from 'react-native';
-import { HMSSDK } from './HMSSDK';
+import { getLogger } from './HMSLogger';
 import type { HMSTrackType } from './HMSTrackType';
 import { HMSAudioTrack } from './HMSAudioTrack';
 
@@ -18,7 +18,7 @@ export class HMSRemoteAudioTrack extends HMSAudioTrack {
    * @memberof HMSRemoteAudioTrack
    */
   setPlaybackAllowed(playbackAllowed: boolean) {
-    const logger = HMSSDK.getLogger();
+    const logger = getLogger();
     logger?.verbose('#Function setPlaybackAllowed', {
       trackId: this.trackId,
       id: this.id,
@@ -35,7 +35,7 @@ export class HMSRemoteAudioTrack extends HMSAudioTrack {
 
   isPlaybackAllowed = async () => {
     try {
-      const logger = HMSSDK.getLogger();
+      const logger = getLogger();
       logger?.verbose('#Function isPlaybackAllowed', {
         trackId: this.trackId,
         id: this.id,

package/src/classes/HMSRemotePeer.ts

@@ -1,4 +1,5 @@
 import type { HMSAudioTrack } from './HMSAudioTrack';
+import type { HMSNetworkQuality } from './HMSNetworkQuality';
 import { HMSPeer } from './HMSPeer';
 import { HMSRemoteAudioTrack } from './HMSRemoteAudioTrack';
 import { HMSRemoteVideoTrack } from './HMSRemoteVideoTrack';
@@ -28,6 +29,7 @@ export class HMSRemotePeer extends HMSPeer {
     audioTrack?: HMSAudioTrack;
     videoTrack?: HMSVideoTrack;
     role?: HMSRole;
+    networkQuality?: HMSNetworkQuality;
     auxiliaryTracks?: HMSTrack[];
     remoteAudioTrackData?: {
       trackId: string;

package/src/classes/HMSRemoteVideoTrack.ts

@@ -1,5 +1,5 @@
 import { NativeModules } from 'react-native';
-import { HMSSDK } from './HMSSDK';
+import { getLogger } from './HMSLogger';
 import { HMSVideoTrack } from './HMSVideoTrack';
 import type { HMSTrackType } from './HMSTrackType';
 
@@ -20,7 +20,7 @@ export class HMSRemoteVideoTrack extends HMSVideoTrack {
    * @memberof HMSRemoteVideoTrack
    */
   setPlaybackAllowed(playbackAllowed: boolean) {
-    const logger = HMSSDK.getLogger();
+    const logger = getLogger();
     logger?.verbose('#Function setPlaybackAllowed', {
       trackId: this.trackId,
       id: this.id,
@@ -37,7 +37,7 @@ export class HMSRemoteVideoTrack extends HMSVideoTrack {
 
   isPlaybackAllowed = async () => {
     try {
-      const logger = HMSSDK.getLogger();
+      const logger = getLogger();
       logger?.verbose('#Function isPlaybackAllowed', {
         trackId: this.trackId,
         id: this.id,

package/src/classes/HMSSDK.tsx

@@ -7,35 +7,35 @@ import {
   AppState,
 } from 'react-native';
 import { HMSUpdateListenerActions } from './HMSUpdateListenerActions';
+import { HMSEncoder } from './HMSEncoder';
+import { HMSMessage } from './HMSMessage';
+import { HMSHelper } from './HMSHelper';
+import { HmsViewComponent } from './HmsView';
+import { HMSLocalAudioStats } from './HMSLocalAudioStats';
+import { HMSLocalVideoStats } from './HMSLocalVideoStats';
+import { HMSRemoteVideoStats } from './HMSRemoteVideoStats';
+import { HMSRemoteAudioStats } from './HMSRemoteAudioStats';
+import { logger, getLogger, setLogger } from './HMSLogger';
 import type { HMSConfig } from './HMSConfig';
 import type { HMSLocalPeer } from './HMSLocalPeer';
 import type { HMSRemotePeer } from './HMSRemotePeer';
 import type { HMSRoom } from './HMSRoom';
 import type { HMSRole } from './HMSRole';
-import { HMSEncoder } from './HMSEncoder';
-import { HMSMessage } from './HMSMessage';
-import { HMSHelper } from './HMSHelper';
 import type { HMSTrack } from './HMSTrack';
 import type { HMSTrackType } from './HMSTrackType';
 import type { HMSLogger } from './HMSLogger';
 import type { HMSPeer } from './HMSPeer';
-import { HmsView as HMSViewComponent } from './HmsView';
-import { HMSVideoViewMode } from './HMSVideoViewMode';
+import type { HMSVideoViewMode } from './HMSVideoViewMode';
 import type { HMSTrackSettings } from './HMSTrackSettings';
 import type { HMSRTMPConfig } from './HMSRTMPConfig';
 import type { HMSHLSConfig } from './HMSHLSConfig';
-import { HMSLocalAudioStats } from './HMSLocalAudioStats';
-import { HMSLocalVideoStats } from './HMSLocalVideoStats';
-import { HMSRemoteVideoStats } from './HMSRemoteVideoStats';
-import { HMSRemoteAudioStats } from './HMSRemoteAudioStats';
 
-interface HmsComponentProps {
+interface HmsViewProps {
   trackId: string;
-  sink: boolean;
-  style: ViewStyle;
+  style?: ViewStyle;
   mirror?: boolean;
-  scaleType: HMSVideoViewMode;
-  id?: string | null;
+  scaleType?: HMSVideoViewMode;
+  setZOrderMediaOverlay?: boolean;
 }
 
 const {
@@ -49,8 +49,6 @@ const HmsEventEmitter = new NativeEventEmitter(HmsManager);
 
 let HmsSdk: HMSSDK | undefined;
 
-let logger: HMSLogger | undefined;
-
 export class HMSSDK {
   room?: HMSRoom;
   localPeer?: HMSLocalPeer;
@@ -105,7 +103,7 @@ export class HMSSDK {
    * @memberof HMSSDK
    */
   static getLogger() {
-    return logger;
+    return getLogger();
   }
 
   /**
@@ -114,8 +112,7 @@ export class HMSSDK {
    * @memberof HMSSDK
    */
   setLogger = (hmsLogger: HMSLogger) => {
-    logger = hmsLogger;
-    hmsLogger.verbose('#Function setLogger', { id: this.id });
+    setLogger(hmsLogger, this.id);
   };
 
   /**
@@ -380,7 +377,6 @@ export class HMSSDK {
   /**
    * - HmsView is react component that takes one track and starts showing that track on a tile.
    * - The appearance of tile is completely customizable with style prop.
-   * - setting sink true or false for a video tile will add or remove sink for a video.
    * - scale type can determine how the incoming video will fit in the canvas check {@link HMSVideoViewMode} for more information.
    *
    * checkout {@link https://www.100ms.live/docs/react-native/v2/features/render-video} for more info
@@ -388,24 +384,20 @@ export class HMSSDK {
    * @param {HmsComponentProps}
    * @memberof HMSSDK
    */
-  HmsView = ({
-    sink,
-    trackId,
-    style,
-    mirror,
-    scaleType = HMSVideoViewMode.ASPECT_FIT,
-  }: HmsComponentProps) => {
+  HmsView = React.forwardRef<any, HmsViewProps>((props, ref) => {
+    const { trackId, style, mirror, scaleType, setZOrderMediaOverlay } = props;
     return (
-      <HMSViewComponent
-        sink={sink}
+      <HmsViewComponent
+        ref={ref}
         trackId={trackId}
         style={style}
+        setZOrderMediaOverlay={setZOrderMediaOverlay}
         mirror={mirror}
         scaleType={scaleType}
         id={this.id}
       />
     );
-  };
+  });
 
   /**
    * Calls leave function of native sdk and session of current user is invalidated.

package/src/classes/HmsView.tsx

@@ -1,66 +1,124 @@
-import React, { useState, useEffect } from 'react';
-import { requireNativeComponent, StyleSheet, ViewStyle } from 'react-native';
-import { HMSVideoViewMode } from '../classes/HMSVideoViewMode';
+import React, { useState, useEffect, useImperativeHandle, useRef } from 'react';
+import {
+  findNodeHandle,
+  requireNativeComponent,
+  StyleSheet,
+  UIManager,
+  ViewStyle,
+} from 'react-native';
+import { HMSVideoViewMode } from './HMSVideoViewMode';
 
 interface HmsViewProps {
   data: {
     trackId: string;
-    sink: boolean;
-    id?: string | null;
-    mirror?: boolean;
+    id: string;
+    mirror: boolean;
   };
+  setZOrderMediaOverlay: boolean;
   scaleType: HMSVideoViewMode;
   style: ViewStyle;
   onChange: Function;
+  onDataReturned: Function;
 }
 
-const HmsViewComponent = requireNativeComponent<HmsViewProps>('HmsView');
+const HmsView = requireNativeComponent<HmsViewProps>('HmsView');
+let _nextRequestId = 1;
+let _requestMap = new Map();
 
 interface HmsComponentProps {
   trackId: string;
-  sink: boolean;
-  style: ViewStyle;
+  style?: ViewStyle;
   mirror?: boolean;
-  scaleType: HMSVideoViewMode;
-  id?: string | null;
+  scaleType?: HMSVideoViewMode;
+  setZOrderMediaOverlay?: boolean;
+  id: string;
 }
 
-export const HmsView = ({
-  sink,
-  trackId,
-  style,
-  id,
-  mirror,
-  scaleType = HMSVideoViewMode.ASPECT_FILL,
-}: HmsComponentProps) => {
-  const [tempVal, setTempVal] = useState(0);
-  const data = {
-    trackId,
-    sink,
-    id: id || null,
-    mirror: mirror || false,
-  };
+export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
+  (props, ref) => {
+    const {
+      trackId,
+      style = temporaryStyles.customStyle,
+      id = '12345',
+      mirror = false,
+      setZOrderMediaOverlay = false,
+      scaleType = HMSVideoViewMode.ASPECT_FILL,
+    } = props;
 
-  const onChange = (values: any) => {
-    console.log(values, 'values');
-    setTimeout(() => {
-      setTempVal(1);
-    }, 2000);
-  };
+    const hmsViewRef: any = useRef();
+    const [tempVal, setTempVal] = useState(0);
+    const data = {
+      trackId,
+      id,
+      mirror,
+    };
+
+    const onChange = (values: any) => {
+      console.log(values, 'values');
+      setTimeout(() => {
+        setTempVal(1);
+      }, 2000);
+    };
+
+    const _onDataReturned = (event: {
+      nativeEvent: { requestId: any; result: any; error: any };
+    }) => {
+      // We grab the relevant data out of our event.
+      let { requestId, result, error } = event.nativeEvent;
+      // Then we get the promise we saved earlier for the given request ID.
+      let promise = _requestMap.get(requestId);
+      if (result) {
+        // If it was successful, we resolve the promise.
+        promise.resolve(result);
+      } else {
+        // Otherwise, we reject it.
+        promise.reject(error);
+      }
+      // Finally, we clean up our request map.
+      _requestMap.delete(requestId);
+    };
+
+    const capture = async () => {
+      let requestId = _nextRequestId++;
+      let requestMap = _requestMap;
+
+      // We create a promise here that will be resolved once `_onRequestDone` is
+      // called.
+      let promise = new Promise(function (resolve, reject) {
+        requestMap.set(requestId, { resolve, reject });
+      });
+      const viewManagerConfig = UIManager.getViewManagerConfig('HmsView');
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(hmsViewRef.current),
+        viewManagerConfig.Commands.capture,
+        [requestId]
+      );
+      return promise;
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        capture,
+      };
+    });
 
-  useEffect(() => {
-    setTempVal(0);
-  }, [tempVal]);
+    useEffect(() => {
+      setTempVal(0);
+    }, [tempVal]);
 
-  return (
-    <HmsViewComponent
-      onChange={onChange}
-      data={data}
-      style={tempVal === 0 ? style : temporaryStyles.customStyle}
-      scaleType={scaleType}
-    />
-  );
-};
+    return (
+      <HmsView
+        ref={hmsViewRef}
+        onChange={onChange}
+        data={data}
+        style={tempVal === 0 ? style : temporaryStyles.customStyle}
+        scaleType={scaleType}
+        setZOrderMediaOverlay={setZOrderMediaOverlay}
+        onDataReturned={_onDataReturned}
+      />
+    );
+  }
+);
 
 const temporaryStyles = StyleSheet.create({
   customStyle: {

package/src/index.ts

@@ -1,7 +1,6 @@
 export * from './classes/HMSConfig';
 export * from './classes/HMSUpdateListenerActions';
 export * from './classes/HMSMessage';
-export * from './classes/HmsView';
 export * from './classes/HMSVideoTrackSettings';
 export * from './classes/HMSVideoTrack';
 export * from './classes/HMSVideoSettings';
@@ -61,6 +60,7 @@ export * from './classes/HMSHLSRecordingConfig';
 export * from './classes/HMSHLSRecordingState';
 export * from './classes/HMSMessageRecipient';
 export * from './classes/HMSMessageRecipientType';
+export * from './classes/HMSNetworkQuality';
 
 import { HMSSDK as HmsManager } from './classes/HMSSDK';
 export default HmsManager;