demo: for meeting

.github/workflows/build.yml

@@ -66,7 +66,7 @@ jobs:
           yarn dist:win --${{ matrix.arch }}
         working-directory: example
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: AgoraRtcNgExample-win-${{ matrix.arch }}
           path: |
@@ -103,7 +103,7 @@ jobs:
           yarn dist:mac
         working-directory: example
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: AgoraRtcNgExample-mac-${{ matrix.arch }}
           path: |

example/src/renderer/App.tsx

@@ -25,6 +25,8 @@ const { Content, Footer, Sider } = Layout;
 class App extends Component {
   state = {
     version: { version: undefined, build: undefined },
+    collapsed: false,
+    showFooter: true,
   };
 
   componentDidMount() {
@@ -38,6 +40,12 @@ class App extends Component {
       <Router>
         <Layout hasSider style={{ height: '100vh' }}>
           <Sider
+            collapsible
+            onCollapse={(e) =>
+              this.setState({
+                collapsed: e,
+              })
+            }
             style={{
               overflow: 'auto',
               height: '100vh',
@@ -81,7 +89,10 @@ class App extends Component {
               })()}
             ></Menu>
           </Sider>
-          <Layout className="site-layout" style={{ marginLeft: 200 }}>
+          <Layout
+            className="site-layout"
+            style={{ marginLeft: this.state.collapsed ? 0 : 200 }}
+          >
             <Content>
               <Switch>
                 <Route path="/" children={<AuthInfoScreen />} exact={true} />
@@ -102,9 +113,18 @@ class App extends Component {
                 </Route>
               </Switch>
             </Content>
-            <Footer style={{ textAlign: 'center' }}>
-              {`Powered by Agora RTC SDK ${version.version} ${version.build}`}
-            </Footer>
+            {this.state.showFooter && (
+              <Footer
+                style={{ textAlign: 'center', cursor: 'pointer' }}
+                onClick={() => {
+                  this.setState({
+                    showFooter: !this.state.showFooter,
+                  });
+                }}
+              >
+                {`Powered by Agora RTC SDK ${version.version} ${version.build}`}
+              </Footer>
+            )}
           </Layout>
         </Layout>
       </Router>

example/src/renderer/components/BaseComponent.tsx

@@ -1,3 +1,4 @@
+import { LeftOutlined } from '@ant-design/icons';
 import {
   ErrorCodeType,
   IRtcEngine,
@@ -31,6 +32,7 @@ export interface BaseComponentState {
   joinChannelSuccess?: boolean;
   remoteUsers?: number[];
   startPreview?: boolean;
+  hideRightBar?: boolean;
 }
 
 export interface BaseAudioComponentState extends BaseComponentState {
@@ -146,7 +148,19 @@ export abstract class BaseComponent<
         <AgoraView className={AgoraStyle.content}>
           {users ? this.renderUsers() : undefined}
         </AgoraView>
-        <AgoraView className={AgoraStyle.rightBar}>
+        <AgoraView
+          className={`${AgoraStyle.rightBar} ${
+            this.state.hideRightBar ? AgoraStyle.hide : ''
+          }`}
+        >
+          <LeftOutlined
+            className={AgoraStyle.rightBarIcon}
+            onClick={() => {
+              this.setState({
+                hideRightBar: !this.state.hideRightBar,
+              });
+            }}
+          />
           {this.renderChannel()}
           {configuration ? (
             <>

example/src/renderer/components/RtcSurfaceView/index.tsx

@@ -17,6 +17,8 @@ import styles from './index.scss';
 
 interface Props {
   canvas: VideoCanvas;
+  containerClass?: string;
+  videoClass?: string;
   connection?: RtcConnection;
 }
 
@@ -132,20 +134,20 @@ export class RtcSurfaceView extends Component<Props, State> {
   };
 
   render() {
-    const { canvas } = this.props;
+    const { canvas, containerClass, videoClass } = this.props;
     const { uniqueId } = this.state;
 
     return (
       <div
-        className={styles['window-item']}
+        className={containerClass ? containerClass : styles['window-item']}
         onClick={() => {
           this.setState((preState) => {
             return { isMirror: !preState.isMirror };
           }, this.updateRenderer);
         }}
       >
         <div
-          className={styles['video-item']}
+          className={videoClass ? videoClass : styles['video-item']}
           id={`video-${canvas.uid}-${uniqueId}`}
         />
       </div>

example/src/renderer/components/ui/public.scss

@@ -4,6 +4,7 @@
   flex-direction: row;
   overflow: hidden;
   height: 100%;
+  position: relative;
 
   .card {
     height: 340px;
@@ -27,6 +28,18 @@
     flex-direction: column;
     padding: 16px 16px 0 16px;
     background-color: white;
+    position: relative;
+    &.hide {
+      flex: 0;
+      padding: 0 0 0 16px;
+    }
+  }
+
+  .rightBarIcon {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    cursor: pointer;
   }
 
   .rightBarBig {
@@ -41,4 +54,52 @@
       color: red;
     }
   }
+
+  .meetContainer {
+    position: relative;
+    .meetMain {
+      position: absolute;
+      width: 80%;
+      left: 0;
+      top: 0;
+      .meetSurfaceViewContainer {
+        height: 500px;
+      }
+      .meetSurfaceViewVideo {
+        height: 500px;
+      }
+    }
+    .meetRight {
+      position: absolute;
+      width: 20%;
+      right: 0;
+      top: 0;
+      display: flex;
+      flex-wrap: wrap;
+      .meetRenderContainer {
+        max-width: 70px;
+      }
+    }
+  }
+
+  .meetRenderContainer {
+    position: relative;
+    span {
+      position: absolute;
+      width: 100%;
+      z-index: 333;
+      color: #fff;
+    }
+    .meetSurfaceViewContainer {
+      flex: 1;
+      height: 150px;
+    }
+
+    .meetSurfaceViewVideo {
+      flex: 1;
+      height: 150px;
+      background: #000000;
+      overflow: hidden;
+    }
+  }
 }

example/src/renderer/components/ui/public.scss.d.ts

@@ -4,8 +4,16 @@ declare namespace PublicScssNamespace {
     content: string;
     require: string;
     rightBar: string;
+    hide: string;
+    rightBarIcon: string;
     rightBarBig: string;
     screen: string;
+    meetRenderContainer: string;
+    meetContainer: string;
+    meetMain: string;
+    meetRight: string;
+    meetSurfaceViewContainer: string;
+    meetSurfaceViewVideo: string;
     selectedItem: string;
   }
 }