@100mslive/react-native-hms 0.9.3 → 0.9.6

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';
@@ -9,6 +8,7 @@ export * from './classes/HMSVideoCodec';
 export * from './classes/HMSTrackSettings';
 export * from './classes/HMSTrack';
 export * from './classes/HMSTrackType';
+export * from './classes/HMSTrackSource';
 export * from './classes/HMSSubscribeSettings';
 export * from './classes/HMSSimulcastSettings';
 export * from './classes/HMSSimulcastLayerSettings';

package/android/src/main/java/com/reactnativehmssdk/HmssdkViewManager.kt

@@ -1,54 +0,0 @@
-package com.reactnativehmssdk
-
-import com.facebook.react.bridge.ReadableMap
-import com.facebook.react.common.MapBuilder
-import com.facebook.react.uimanager.SimpleViewManager
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.annotations.ReactProp
-
-class HmssdkViewManager : SimpleViewManager<HmsView>() {
-
-  private var reactContext: ThemedReactContext? = null
-
-  override fun getName(): String {
-    return REACT_CLASS
-  }
-
-  public override fun createViewInstance(reactContext: ThemedReactContext): HmsView {
-    this.reactContext = reactContext
-    return HmsView(reactContext)
-  }
-
-  override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any>? {
-    return MapBuilder.builder<String, Any>()
-        .put(
-            "topChange",
-            MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", "onChange"))
-        )
-        .build()
-  }
-
-  @ReactProp(name = "data")
-  fun setData(view: HmsView, data: ReadableMap) {
-    val trackId = data.getString("trackId")
-    val id = data.getString("id")
-    val mirror = data.getBoolean("mirror")
-    val hmsCollection = getHms()
-    if (hmsCollection != null) {
-      view.setData(id, trackId, hmsCollection, mirror)
-    }
-  }
-
-  @ReactProp(name = "scaleType")
-  fun setScaleType(view: HmsView, data: String?) {
-    view.updateScaleType(data)
-  }
-
-  private fun getHms(): MutableMap<String, HmsSDK>? {
-    return reactContext?.getNativeModule(HmsModule::class.java)?.getHmsInstance()
-  }
-
-  companion object {
-    const val REACT_CLASS = "HmsView"
-  }
-}