fix: jira CSD-61288 renderer issue (#1114)

* [AUTO] Update dependencies * chore: wip * ci: keep yarn version while setup * chore: wip * chore: wip * fix: jira CSD-61288 CSD-60920 renderer issue * chore: release 4.2.6-rc.1 * chore(example): update example to install [email protected] --------- Co-authored-by: LichKing-2234 <[email protected]> Co-authored-by: Arthas <[email protected]> Co-authored-by: HUI <[email protected]>
AgoraIO-Extensions · Nov 21, 2023 · fe50880 · fe50880
1 parent 52e9e64
commit fe50880
Show file tree

Hide file tree

Showing 15 changed files with 679 additions and 575 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -84,8 +84,12 @@
     "document": false,
     "HTMLElement": false,
     "HTMLDivElement": false,
+    "RenderingContext": false,
+    "WebGLRenderingContext": false,
     "WebGL2RenderingContext": false,
     "WebGLTexture": false,
+    "WebGLBuffer": false,
+    "WebGLProgram": false,
     "HTMLCanvasElement": false,
     "ResizeObserver": false,
     "name": false,

diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
@@ -9,6 +9,11 @@ runs:
       with:
         node-version-file: .nvmrc
 
+    - name: Setup Yarn
+      run:
+        npm i -g [email protected]
+      shell: bash
+
     - name: Set up Python
       uses: actions/setup-python@v4
       with:

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -113,4 +113,4 @@ jobs:
     needs: [ build-windows, build-mac ]
     steps:
       - run: |
-          curl -X POST "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=${{ secrets.WECHAT_KEY }}" -d '{"msgtype":"text","text":{"content":"Electron Example:\n${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"}}'
+          curl -X POST "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=${{ secrets.WECHAT_KEY }}" -d '{"msgtype":"text","text":{"content":"Electron Example:\n${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}\nDownload Link:\nhttps://nightly.link/${{ github.repository }}/actions/runs/${{ github.run_id }}"}}'
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,19 @@
 
 
+## [4.2.6-rc.1](https://github.com/AgoraIO-Extensions/Electron-SDK/compare/v4.2.4...v4.2.6-rc.1) (2023-11-21)
+
+
+### Bug Fixes
+
+* jira CSD-60920 render issue after ([#1110](https://github.com/AgoraIO-Extensions/Electron-SDK/issues/1110)) ([5730d86](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/5730d86d136539d79f50b1e92ba9ec5049196488))
+* jira CSD-61288 CSD-60920 renderer issue ([341491d](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/341491dfac72e1614df5ad32f0b40198d6a046dd))
+* use `setTimeout` intead of `setInterval` ([#1097](https://github.com/AgoraIO-Extensions/Electron-SDK/issues/1097)) ([9df0579](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/9df057989846e5e7e5fb4a00c6a1208f5728b9d8))
+
+
+### Features
+
+* suppot native 4.2.6 ([#1104](https://github.com/AgoraIO-Extensions/Electron-SDK/issues/1104)) ([e8be60b](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/e8be60bc762db3aac50d025a674664fb9e21c0bd)), closes [#1102](https://github.com/AgoraIO-Extensions/Electron-SDK/issues/1102)
+
 ## [4.2.4](https://github.com/AgoraIO-Extensions/Electron-SDK/compare/v4.2.3...v4.2.4) (2023-10-24)
 
 

diff --git a/example/package.json b/example/package.json
@@ -70,7 +70,7 @@
     ]
   },
   "dependencies": {
-    "agora-electron-sdk": "4.2.4",
+    "agora-electron-sdk": "4.2.6-rc.1",
     "antd": "^4.20.3",
     "download": "^8.0.0",
     "ffi-napi": "^4.0.3",

diff --git a/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx b/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
@@ -12,18 +12,20 @@ import {
   VideoSourceType,
   createAgoraRtcEngine,
 } from 'agora-electron-sdk';
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 
 import {
   BaseComponent,
   BaseVideoComponentState,
 } from '../../../components/BaseComponent';
-import { AgoraDropdown } from '../../../components/ui';
+import { AgoraButton, AgoraDropdown, AgoraView } from '../../../components/ui';
 import Config from '../../../config/agora.config';
 import { arrayToItems } from '../../../utils';
 import { askMediaAccess } from '../../../utils/permissions';
 
-interface State extends BaseVideoComponentState {}
+interface State extends BaseVideoComponentState {
+  selectedUser?: number;
+}
 
 export default class JoinChannelVideo
   extends BaseComponent<{}, State>
@@ -178,21 +180,53 @@ export default class JoinChannelVideo
   }
 
   protected renderConfiguration(): ReactElement | undefined {
-    const { joinChannelSuccess, remoteUsers } = this.state;
+    const { joinChannelSuccess, remoteUsers, selectedUser } = this.state;
     return (
       <>
         {joinChannelSuccess ? (
-          <AgoraDropdown
-            title={'Append renderer to remote users'}
-            items={arrayToItems(remoteUsers)}
-            onValueChange={(value) => {
-              this.setState((prev) => {
-                return {
-                  remoteUsers: [...prev.remoteUsers, value],
-                };
-              });
-            }}
-          />
+          <>
+            <AgoraDropdown
+              title={'Append renderer to remote users'}
+              items={arrayToItems(Array.from(new Set(remoteUsers)))}
+              value={selectedUser}
+              onValueChange={(value) => {
+                this.setState({ selectedUser: value });
+              }}
+            />
+            <AgoraView>
+              <AgoraButton
+                title="Add"
+                onPress={() => {
+                  if (selectedUser !== undefined) {
+                    this.setState((prev) => {
+                      return {
+                        remoteUsers: [...prev.remoteUsers, selectedUser],
+                      };
+                    });
+                  }
+                }}
+              />
+              <AgoraButton
+                title="Remove"
+                onPress={() => {
+                  if (selectedUser !== undefined) {
+                    this.setState((prev) => {
+                      const predicate = (it: number) => it === selectedUser;
+                      const firstIndex = prev.remoteUsers.findIndex(predicate);
+                      const lastIndex =
+                        prev.remoteUsers.findLastIndex(predicate);
+                      if (firstIndex !== lastIndex) {
+                        prev.remoteUsers.splice(lastIndex, 1);
+                      }
+                      return {
+                        remoteUsers: prev.remoteUsers,
+                      };
+                    });
+                  }
+                }}
+              />
+            </AgoraView>
+          </>
         ) : undefined}
       </>
     );

diff --git a/example/src/renderer/global.d.ts b/example/src/renderer/global.d.ts
@@ -0,0 +1,10 @@
+export {};
+
+declare global {
+  interface Array<T> {
+    findLastIndex(
+      predicate: (value: T, index: number, obj: T[]) => unknown,
+      thisArg?: any
+    ): number;
+  }
+}
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1783,10 +1783,10 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-[email protected].4:
-  version "4.2.4"
-  resolved "https://registry.npmjs.org/agora-electron-sdk/-/agora-electron-sdk-4.2.4.tgz#14b4cfdccf3297bc35aa27ab1ce2a377290af78f"
-  integrity sha512-qPkh+oF0HxESgRpITh5Gudyy2Z1lJ+LWWOP7p1HUWRxAPt+/Lyrr3sfdU5MUKKMSoaB41HT8cjC1HgfhnrN+Zg==
+[email protected].6-rc.1:
+  version "4.2.6-rc.1"
+  resolved "https://registry.npmjs.org/agora-electron-sdk/-/agora-electron-sdk-4.2.6-rc.1.tgz#39c03dbbe34e5b7bf5c7e94c4efe0629757a3dcf"
+  integrity sha512-AuxWSWUpYysR0jYaF5ZpbXJbmXGKtunjcaVV4E/sf2Pd07uBQ7pXUZq8U2gptd9bD3Bd6gKMZx6MOpmxmVU7cg==
   dependencies:
     buffer "^6.0.3"
     cross-env "^7.0.3"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "agora-electron-sdk",
-  "version": "4.2.4",
+  "version": "4.2.6-rc.1",
   "description": "agora-electron-sdk",
   "main": "js/AgoraSdk",
   "types": "types/AgoraSdk.d.ts",
@@ -135,7 +135,7 @@
     "yuv-canvas": "1.2.6"
   },
   "agora_electron": {
-    "iris_sdk_win": "https://download.agora.io/sdk/release/iris_4.2.6-build.2_DCG_Windows_Video_20231109_1040.zip",
-    "iris_sdk_mac": "https://download.agora.io/sdk/release/iris_4.2.6-build.2_DCG_Mac_Video_20231109_1040.zip"
+    "iris_sdk_win": "https://download.agora.io/sdk/release/iris_4.2.6-build.3_DCG_Windows_Video_20231116_0243.zip",
+    "iris_sdk_mac": "https://download.agora.io/sdk/release/iris_4.2.6-build.3_DCG_Mac_Video_20231116_0243.zip"
   }
 }
diff --git a/ts/Renderer/IRenderer.ts b/ts/Renderer/IRenderer.ts
@@ -1,18 +1,11 @@
-import { EventEmitter } from 'events';
-
 import { RenderModeType } from '../Private/AgoraMediaBase';
 import { RendererOptions, ShareVideoFrame } from '../Types';
 
-export type RenderFailCallback =
-  | ((obj: { error: string }) => void)
-  | undefined
-  | null;
-
 export abstract class IRenderer {
   parentElement?: HTMLElement;
+  container?: HTMLElement;
   canvas?: HTMLCanvasElement;
-  event?: EventEmitter;
-  contentMode = RenderModeType.RenderModeFit;
+  contentMode = RenderModeType.RenderModeHidden;
   mirror?: boolean;
 
   public snapshot(fileType = 'image/png') {
@@ -23,20 +16,40 @@ export abstract class IRenderer {
   }
 
   public bind(element: HTMLElement) {
-    if (!element) {
-      throw new Error('You have pass a element');
-    }
     this.parentElement = element;
+    this.container = document.createElement('div');
+    Object.assign(this.container.style, {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden',
+    });
+    this.parentElement.appendChild(this.container);
+    this.canvas = document.createElement('canvas');
+    this.container.appendChild(this.canvas);
   }
 
-  abstract unbind(): void;
+  public unbind() {
+    if (this.container && this.canvas?.parentNode === this.container) {
+      this.container.removeChild(this.canvas);
+    }
+    if (
+      this.parentElement &&
+      this.container?.parentNode === this.parentElement
+    ) {
+      this.parentElement.removeChild(this.container);
+    }
+
+    this.canvas = undefined;
+    this.container = undefined;
+    this.parentElement = undefined;
+  }
 
   public equalsElement(element: Element): boolean {
-    if (!element) {
-      throw new Error('You have pass a element');
-    }
     if (!this.parentElement) {
-      throw new Error('parentElement is null');
+      console.error('parentElement is null');
     }
     return element === this.parentElement;
   }