From dd2d728cf2515d9312b8edec9c071938da265e93 Mon Sep 17 00:00:00 2001
From: Abdul Sattar <76883659+AB-70@users.noreply.github.com>
Date: Fri, 26 Apr 2024 14:18:11 +0000
Subject: [PATCH] #782 - Rounded Corners support for RTCSurfaceView

---
 .../ng/react/AgoraRtcSurfaceViewManager.java  |  9 +++-
 .../rtc/ng/react/RoundedFrameLayout.java      | 46 +++++++++++++++++++
 .../react/AgoraRtcSurfaceViewManagerSpec.java |  3 ++
 src/AgoraRtcRenderView.tsx                    |  5 ++
 .../AgoraRtcSurfaceViewNativeComponent.ts     |  2 +
 5 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 android/src/main/java/io/agora/rtc/ng/react/RoundedFrameLayout.java

diff --git a/android/src/main/java/io/agora/rtc/ng/react/AgoraRtcSurfaceViewManager.java b/android/src/main/java/io/agora/rtc/ng/react/AgoraRtcSurfaceViewManager.java
index 1a4e23e8b..4c92bca29 100644
--- a/android/src/main/java/io/agora/rtc/ng/react/AgoraRtcSurfaceViewManager.java
+++ b/android/src/main/java/io/agora/rtc/ng/react/AgoraRtcSurfaceViewManager.java
@@ -24,7 +24,7 @@ public String getName() {
   @Override
   public FrameLayout createViewInstance(ThemedReactContext context) {
     this.context = context;
-    FrameLayout layout = new FrameLayout(context.getReactApplicationContext());
+    RoundedFrameLayout layout = new RoundedFrameLayout(context.getReactApplicationContext());
     layout.addView(new SurfaceView(context.getApplicationContext()));
     return layout;
   }
@@ -55,4 +55,11 @@ public void setZOrderOnTop(FrameLayout view, boolean onTop) {
   public void setZOrderMediaOverlay(FrameLayout view, boolean isMediaOverlay) {
     ((SurfaceView) view.getChildAt(0)).setZOrderMediaOverlay(isMediaOverlay);
   }
+
+  
+  @Override
+  @ReactProp(name = "cornerRadius")
+  public void setCornerRadius(FrameLayout view, float radius){
+    ((RoundedFrameLayout) view).setCornerRadius(radius);
+  }
 }
diff --git a/android/src/main/java/io/agora/rtc/ng/react/RoundedFrameLayout.java b/android/src/main/java/io/agora/rtc/ng/react/RoundedFrameLayout.java
new file mode 100644
index 000000000..4ced7ae86
--- /dev/null
+++ b/android/src/main/java/io/agora/rtc/ng/react/RoundedFrameLayout.java
@@ -0,0 +1,46 @@
+package io.agora.rtc.ng.react;
+
+import android.view.SurfaceView;
+import android.widget.FrameLayout;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Path;
+import android.util.AttributeSet;
+
+public class RoundedFrameLayout extends FrameLayout {
+    private float cornerRadius = 18; 
+  
+    public RoundedFrameLayout(Context context) {
+        super(context);
+    }
+  
+    public RoundedFrameLayout(Context context, AttributeSet attrs) {
+        super(context, attrs);
+    }
+  
+    public RoundedFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+    }
+  
+    @Override
+    protected void dispatchDraw(Canvas canvas) {
+        Path path = new Path();
+        float[] radii = {cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius};
+        path.addRoundRect(0, 0, getWidth(), getHeight(), radii, Path.Direction.CW);
+        canvas.clipPath(path);
+        super.dispatchDraw(canvas);
+    }
+
+    public void setCornerRadius(float radius) {
+        cornerRadius = radius;
+        invalidate(); 
+    }
+  }
+  
\ No newline at end of file
diff --git a/android/src/oldarch/io/agora/rtc/ng/react/AgoraRtcSurfaceViewManagerSpec.java b/android/src/oldarch/io/agora/rtc/ng/react/AgoraRtcSurfaceViewManagerSpec.java
index 9fd6a4964..4711c652c 100644
--- a/android/src/oldarch/io/agora/rtc/ng/react/AgoraRtcSurfaceViewManagerSpec.java
+++ b/android/src/oldarch/io/agora/rtc/ng/react/AgoraRtcSurfaceViewManagerSpec.java
@@ -13,4 +13,7 @@ public abstract class AgoraRtcSurfaceViewManagerSpec<T extends View> extends Sim
   public abstract void setZOrderOnTop(T view, boolean onTop);
 
   public abstract void setZOrderMediaOverlay(T view, boolean isMediaOverlay);
+  
+  public abstract void setCornerRadius(T view, float radius);
+
 }
diff --git a/src/AgoraRtcRenderView.tsx b/src/AgoraRtcRenderView.tsx
index 347f3516e..b2f1ec382 100644
--- a/src/AgoraRtcRenderView.tsx
+++ b/src/AgoraRtcRenderView.tsx
@@ -34,6 +34,11 @@ export interface RtcSurfaceViewProps extends RtcRendererViewProps {
    * Controls whether to place the surface of the RtcSurfaceView on top of another RtcSurfaceView in the window (but still behind the window): true : Place it on top of another RtcSurfaceView in the window. false : Do not place it on top of another RtcSurfaceView in the window.
    */
   zOrderMediaOverlay?: boolean;
+  
+  /**
+   * Sets the corner radius of the SurfaceView's container. 
+   */
+  cornerRadius?: number; 
 }
 
 /**
diff --git a/src/specs/AgoraRtcSurfaceViewNativeComponent.ts b/src/specs/AgoraRtcSurfaceViewNativeComponent.ts
index 04f462c1b..c6c74427f 100644
--- a/src/specs/AgoraRtcSurfaceViewNativeComponent.ts
+++ b/src/specs/AgoraRtcSurfaceViewNativeComponent.ts
@@ -1,5 +1,6 @@
 import type { HostComponent, ViewProps } from 'react-native';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import { Float } from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface NativeProps extends ViewProps {
   callApi: {
@@ -9,6 +10,7 @@ export interface NativeProps extends ViewProps {
   };
   zOrderOnTop?: boolean;
   zOrderMediaOverlay?: boolean;
+  cornerRadius?: Float;
 }
 
 export default codegenNativeComponent<NativeProps>(