- fix multiple channel render bug

- remove `Types` from export, you can import enum or class by `import {} from 'react-native-agora'`

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## THE CHANGELOG
 
+#### 3.0.1-rc.3
+  - fix multiple channel render bug
+  - remove `Types` from export, you can import enum or class by `import {} from 'react-native-agora'`
+  - optimize ts code and doc
+
 #### 3.0.1-rc.2
   - add `startPreview` `stopPreview`
 

android/src/main/java/io/agora/rtc/base/RtcSurfaceView.kt

@@ -46,35 +46,42 @@ class RtcSurfaceView(
         }
     }
 
-    fun setRenderMode(engine: RtcEngine, @Annotations.AgoraVideoRenderMode renderMode: Int) {
-        canvas.renderMode = renderMode
-        setupRenderMode(engine)
-    }
+    fun setData(engine: RtcEngine, channel: RtcChannel?, uid: Int) {
+        resetVideoCanvas(engine)
 
-    fun setChannel(engine: RtcEngine, channel: RtcChannel?) {
         this.channel = if (channel != null) WeakReference(channel) else null
-        canvas.channelId = channel?.channelId()
+        canvas.channelId = this.channel?.get()?.channelId()
+        canvas.uid = uid
+        setupVideoCanvas(engine)
+    }
+
+    private fun resetVideoCanvas(engine: RtcEngine) {
+        val canvas = VideoCanvas(null, canvas.renderMode, canvas.channelId, canvas.uid, canvas.mirrorMode)
         if (canvas.uid == 0) {
             engine.setupLocalVideo(canvas)
         } else {
             engine.setupRemoteVideo(canvas)
         }
     }
 
-    fun setMirrorMode(engine: RtcEngine, @Annotations.AgoraVideoMirrorMode mirrorMode: Int) {
-        canvas.mirrorMode = mirrorMode
-        setupRenderMode(engine)
-    }
-
-    fun setUid(engine: RtcEngine, uid: Int) {
-        canvas.uid = uid
+    private fun setupVideoCanvas(engine: RtcEngine) {
         if (canvas.uid == 0) {
             engine.setupLocalVideo(canvas)
         } else {
             engine.setupRemoteVideo(canvas)
         }
     }
 
+    fun setRenderMode(engine: RtcEngine, @Annotations.AgoraVideoRenderMode renderMode: Int) {
+        canvas.renderMode = renderMode
+        setupRenderMode(engine)
+    }
+
+    fun setMirrorMode(engine: RtcEngine, @Annotations.AgoraVideoMirrorMode mirrorMode: Int) {
+        canvas.mirrorMode = mirrorMode
+        setupRenderMode(engine)
+    }
+
     private fun setupRenderMode(engine: RtcEngine) {
         if (canvas.uid == 0) {
             engine.setLocalRenderMode(canvas.renderMode, canvas.mirrorMode)

android/src/main/java/io/agora/rtc/base/RtcTextureView.kt

@@ -22,8 +22,11 @@ class RtcTextureView(
         addView(texture)
     }
 
-    fun setChannel(engine: RtcEngine, channel: RtcChannel?) {
+    fun setData(engine: RtcEngine, channel: RtcChannel?, uid: Int) {
+        resetVideoRender(engine)
+
         this.channel = if (channel != null) WeakReference(channel) else null
+        this.uid = uid
         setupVideoRenderer(engine)
     }
 
@@ -32,22 +35,26 @@ class RtcTextureView(
         setupVideoRenderer(engine)
     }
 
-    fun setUid(engine: RtcEngine, uid: Int) {
-        this.uid = uid
-        setupVideoRenderer(engine)
+    private fun resetVideoRender(engine: RtcEngine) {
+        if (uid == 0) {
+            engine.setLocalVideoRenderer(null)
+        } else {
+            channel?.get()?.let {
+                it.setRemoteVideoRenderer(uid, null)
+                return@resetVideoRender
+            }
+            engine.setRemoteVideoRenderer(uid, null)
+        }
     }
 
     private fun setupVideoRenderer(engine: RtcEngine) {
         if (uid == 0) {
-            engine.setLocalVideoRenderer(null)
             engine.setLocalVideoRenderer(texture)
         } else {
             channel?.get()?.let {
-                it.setRemoteVideoRenderer(uid, null)
                 it.setRemoteVideoRenderer(uid, texture)
                 return@setupVideoRenderer
             }
-            engine.setRemoteVideoRenderer(uid, null)
             engine.setRemoteVideoRenderer(uid, texture)
         }
     }

android/src/main/java/io/agora/rtc/react/RCTAgoraRtcSurfaceViewManager.kt

@@ -1,5 +1,6 @@
 package io.agora.rtc.react
 
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
@@ -33,26 +34,22 @@ class RCTAgoraRtcSurfaceViewManager : SimpleViewManager<RtcSurfaceView>() {
         view.setZOrderOnTop(onTop)
     }
 
+    @ReactProp(name = "data")
+    fun setData(view: RtcSurfaceView, data: ReadableMap) {
+        val channel = data.getString("channelId")?.let { getChannel(it) }
+        getEngine()?.let { view.setData(it, channel, data.getInt("uid")) }
+    }
+
     @ReactProp(name = "renderMode")
     fun setRenderMode(view: RtcSurfaceView, renderMode: Int) {
         getEngine()?.let { view.setRenderMode(it, renderMode) }
     }
 
-    @ReactProp(name = "channelId")
-    fun setChannelId(view: RtcSurfaceView, channelId: String) {
-        getEngine()?.let { view.setChannel(it, getChannel(channelId)) }
-    }
-
     @ReactProp(name = "mirrorMode")
     fun setMirrorMode(view: RtcSurfaceView, mirrorMode: Int) {
         getEngine()?.let { view.setMirrorMode(it, mirrorMode) }
     }
 
-    @ReactProp(name = "uid")
-    fun setUid(view: RtcSurfaceView, uid: Int) {
-        getEngine()?.let { view.setUid(it, uid) }
-    }
-
     private fun getEngine(): RtcEngine? {
         return reactContext?.getNativeModule(RCTAgoraRtcEngineModule::class.java)?.engine()
     }

android/src/main/java/io/agora/rtc/react/RCTAgoraRtcTextureViewManager.kt

@@ -1,5 +1,6 @@
 package io.agora.rtc.react
 
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
@@ -23,10 +24,11 @@ class RCTAgoraRtcTextureViewManager : SimpleViewManager<RtcTextureView>() {
         return REACT_CLASS
     }
 
-    @ReactProp(name = "channelId")
-    fun setChannelId(view: RtcTextureView, channelId: String) {
+    @ReactProp(name = "data")
+    fun setData(view: RtcTextureView, data: ReadableMap) {
+        val channel = data.getString("channelId")?.let { getChannel(it) }
         getEngine()?.let {
-            view.setChannel(it, getChannel(channelId))
+            view.setData(it, channel, data.getInt("uid"))
         }
     }
 
@@ -35,11 +37,6 @@ class RCTAgoraRtcTextureViewManager : SimpleViewManager<RtcTextureView>() {
         getEngine()?.let { view.setMirror(it, mirror) }
     }
 
-    @ReactProp(name = "uid")
-    fun setUid(view: RtcTextureView, uid: Int) {
-        getEngine()?.let { view.setUid(it, uid) }
-    }
-
     private fun getEngine(): RtcEngine? {
         return reactContext?.getNativeModule(RCTAgoraRtcEngineModule::class.java)?.engine()
     }

ios/RCTAgora/Base/RtcSurfaceView.swift

@@ -18,34 +18,47 @@ class RtcSurfaceView: UIView {
     }()
     private weak var channel: AgoraRtcChannel?
 
-    func setRenderMode(_ engine: AgoraRtcEngineKit, _ renderMode: Int) {
-        canvas.renderMode = AgoraVideoRenderMode(rawValue: UInt(renderMode))!
-        setupRenderMode(engine)
-    }
-
-    func setChannel(_ engine: AgoraRtcEngineKit, _ channel: AgoraRtcChannel?) {
+    func setData(_ engine: AgoraRtcEngineKit, _ channel: AgoraRtcChannel?, _ uid: Int) {
+        resetVideoCanvas(engine)
+
         self.channel = channel
         canvas.channelId = channel?.getId()
+        canvas.uid = UInt(uid)
+        setupVideoCanvas(engine)
+    }
+
+    private func resetVideoCanvas(_ engine: AgoraRtcEngineKit) {
+        let canvas = AgoraRtcVideoCanvas()
+        canvas.view = nil
+        canvas.renderMode = self.canvas.renderMode
+        canvas.channelId = self.canvas.channelId
+        canvas.uid = self.canvas.uid
+        canvas.mirrorMode = self.canvas.mirrorMode
+
         if canvas.uid == 0 {
             engine.setupLocalVideo(canvas)
         } else {
             engine.setupRemoteVideo(canvas)
         }
     }
-
-    func setMirrorMode(_ engine: AgoraRtcEngineKit, _ mirrorMode: Int) {
-        canvas.mirrorMode = AgoraVideoMirrorMode(rawValue: UInt(mirrorMode))!
-        setupRenderMode(engine)
-    }
-
-    func setUid(_ engine: AgoraRtcEngineKit, _ uid: Int) {
-        canvas.uid = UInt(uid)
+
+    private func setupVideoCanvas(_ engine: AgoraRtcEngineKit) {
         if canvas.uid == 0 {
             engine.setupLocalVideo(canvas)
         } else {
             engine.setupRemoteVideo(canvas)
         }
     }
+
+    func setRenderMode(_ engine: AgoraRtcEngineKit, _ renderMode: Int) {
+        canvas.renderMode = AgoraVideoRenderMode(rawValue: UInt(renderMode))!
+        setupRenderMode(engine)
+    }
+
+    func setMirrorMode(_ engine: AgoraRtcEngineKit, _ mirrorMode: Int) {
+        canvas.mirrorMode = AgoraVideoMirrorMode(rawValue: UInt(mirrorMode))!
+        setupRenderMode(engine)
+    }
 
     private func setupRenderMode(_ engine: AgoraRtcEngineKit) {
         if canvas.uid == 0 {

ios/RCTAgora/React/RCTAgoraRtcSurfaceViewManager.swift

@@ -54,21 +54,19 @@ class RtcView: RtcSurfaceView {
         }
     }
 
-    @objc func setChannelId(_ channelId: String) {
-        if let engine = getEngine?(), let channel = getChannel?(channelId) {
-            setChannel(engine, channel)
+    @objc func setData(_ data: NSDictionary) {
+        var channel: AgoraRtcChannel? = nil
+        if let channelId = data["channelId"] as? String {
+            channel = getChannel?(channelId)
         }
-    }
-
-    @objc func setMirrorMode(_ mirrorMode: Int) {
         if let engine = getEngine?() {
-            setMirrorMode(engine, mirrorMode)
+            setData(engine, channel, data["uid"] as! Int)
         }
     }
 
-    @objc func setUid(_ uid: Int) {
+    @objc func setMirrorMode(_ mirrorMode: Int) {
         if let engine = getEngine?() {
-            setUid(engine, uid)
+            setMirrorMode(engine, mirrorMode)
         }
     }
 }

ios/RCTAgora/React/RCTAgoraRtcSurfaceViewManagerBridge.m

@@ -10,12 +10,10 @@
 
 @interface RCT_EXTERN_MODULE(RCTAgoraRtcSurfaceViewManager, NSObject)
 
-RCT_EXPORT_VIEW_PROPERTY(renderMode, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(data, NSDictionary)
 
-RCT_EXPORT_VIEW_PROPERTY(channelId, NSString)
+RCT_EXPORT_VIEW_PROPERTY(renderMode, NSInteger)
 
 RCT_EXPORT_VIEW_PROPERTY(mirrorMode, NSInteger)
 
-RCT_EXPORT_VIEW_PROPERTY(uid, NSInteger)
-
 @end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-agora",
-  "version": "3.0.1-rc.2",
+  "version": "3.0.1-rc.3",
   "description": "React Native around the Agora RTC SDKs for Android and iOS agora",
   "summary": "agora native sdk for react-native",
   "main": "lib/index.js",

src/index.ts

@@ -2,12 +2,12 @@ import RtcEngine from './src/RtcEngine.native'
 import RtcChannel from './src/RtcChannel.native'
 import RtcLocalView from './RtcLocalView'
 import RtcRemoteView from './RtcRemoteView'
-import * as Types from './Types'
+
+export * from './Types'
 
 export default RtcEngine
 export {
     RtcChannel,
     RtcLocalView,
-    RtcRemoteView,
-    Types,
+    RtcRemoteView
 }

src/src/RtcRenderView.native.tsx

@@ -69,8 +69,11 @@ const RCTRtcSurfaceView = requireNativeComponent('RCTAgoraRtcSurfaceView');
  */
 export class RtcSurfaceView extends Component<RtcSurfaceViewProps & RtcUidProps, {}> {
     render() {
+        const {channelId, uid, ...others} = this.props
         return (
-            <RCTRtcSurfaceView {...this.props}/>
+            <RCTRtcSurfaceView
+                data={{channelId, uid}}
+                {...others}/>
         )
     }
 }
@@ -85,8 +88,11 @@ const RCTRtcTextureView = requireNativeComponent('RCTAgoraRtcTextureView');
  */
 export class RtcTextureView extends Component<RtcTextureViewProps & RtcUidProps, {}> {
     render() {
+        const {channelId, uid, ...others} = this.props
         return (
-            <RCTRtcTextureView {...this.props}/>
+            <RCTRtcTextureView
+                data={{channelId, uid}}
+                {...others}/>
         )
     }
 }