From 52e9e647e21d68fa1c2e610a4942f83d9140d742 Mon Sep 17 00:00:00 2001
From: HUI <luxuhui@agora.io>
Date: Thu, 16 Nov 2023 21:09:28 +0800
Subject: [PATCH] chore: support append renderer for example

---
 .../JoinChannelVideo/JoinChannelVideo.tsx     | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx b/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
index b38d4ca75..5140fa5b5 100644
--- a/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
+++ b/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
@@ -18,7 +18,9 @@ import {
   BaseComponent,
   BaseVideoComponentState,
 } from '../../../components/BaseComponent';
+import { AgoraDropdown } from '../../../components/ui';
 import Config from '../../../config/agora.config';
+import { arrayToItems } from '../../../utils';
 import { askMediaAccess } from '../../../utils/permissions';
 
 interface State extends BaseVideoComponentState {}
@@ -174,4 +176,25 @@ export default class JoinChannelVideo
   protected renderVideo(user: VideoCanvas): ReactElement | undefined {
     return super.renderVideo(user);
   }
+
+  protected renderConfiguration(): ReactElement | undefined {
+    const { joinChannelSuccess, remoteUsers } = this.state;
+    return (
+      <>
+        {joinChannelSuccess ? (
+          <AgoraDropdown
+            title={'Append renderer to remote users'}
+            items={arrayToItems(remoteUsers)}
+            onValueChange={(value) => {
+              this.setState((prev) => {
+                return {
+                  remoteUsers: [...prev.remoteUsers, value],
+                };
+              });
+            }}
+          />
+        ) : undefined}
+      </>
+    );
+  }
 }