fix: AgoraVideoView takes over the whole browser window (#1717)

Refer flutter/flutter#143922 (comment) Fix #1635
AgoraIO-Extensions · Apr 24, 2024 · 0052cc7 · 0052cc7
1 parent 3e50409
commit 0052cc7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 15 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -564,9 +564,7 @@ jobs:
     if: ${{ !contains(github.event.pull_request.labels.*.name, 'ci:skip') }}
     strategy:
       matrix:
-        # TODO(littlegnal): Temporily pin the Flutter SDK version to 3.16, since the rendering on web not work correct after 3.16, 
-        # see https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/actions/runs/7958003510/job/21721962323?pr=1572
-        version: ['3.16']
+        version: ['3.x']
     runs-on: ubuntu-latest
     timeout-minutes: 60
     env:

diff --git a/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart b/lib/src/impl/platform/web/global_video_view_controller_platform_web.dart
@@ -1,6 +1,5 @@
 import 'dart:async';
-// ignore: avoid_web_libraries_in_flutter
-import 'dart:html';
+import 'dart:html' as html;
 import 'dart:ui' as ui;
 
 import 'package:agora_rtc_engine/agora_rtc_engine.dart';
@@ -15,8 +14,36 @@ String _getViewType(int id) {
   return 'agora_rtc_engine/${_platformRendererViewType}_$id';
 }
 
+class _View {
+  _View(int platformViewId)
+      : _element = html.DivElement()
+          ..id = _getViewType(platformViewId)
+          ..style.width = '100%'
+          ..style.height = '100%' {
+    // Wait until the element is injected into the DOM,
+    // see https://github.com/flutter/flutter/issues/143922#issuecomment-1960133128
+    final observer = html.IntersectionObserver((entries, observer) {
+      if (_element.isConnected == true) {
+        observer.unobserve(_element);
+        _viewCompleter.complete(_element);
+      }
+    });
+    observer.observe(_element);
+  }
+
+  final html.HtmlElement _element;
+  html.HtmlElement get element => _element;
+
+  final _viewCompleter = Completer<html.HtmlElement>();
+
+  Future<String> waitAndGetId() async {
+    final div = await _viewCompleter.future;
+    return div.id;
+  }
+}
+
 // TODO(littlegnal): Need handle remove view logic on web
-final Map<int, HtmlElement> _viewMap = {};
+final Map<int, _View> _viewMap = {};
 
 class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom {
   GlobalVideoViewControllerWeb(
@@ -25,14 +52,9 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom {
     // ignore: undefined_prefixed_name
     ui.platformViewRegistry.registerViewFactory(_platformRendererViewType,
         (int viewId) {
-      final div = DivElement()
-        ..id = _getViewType(viewId)
-        ..style.width = '100%'
-        ..style.height = '100%';
-
-      _viewMap[viewId] = div;
-
-      return div;
+      final view = _View(viewId);
+      _viewMap[viewId] = view;
+      return view.element;
     });
   }
 
@@ -49,7 +71,8 @@ class GlobalVideoViewControllerWeb extends GlobalVideoViewControllerPlatfrom {
     final viewId = viewHandle as int;
 
     final div = _viewMap[viewId]!;
+    final divId = await div.waitAndGetId();
 
-    await super.setupVideoView(div.id, videoCanvas, connection: connection);
+    await super.setupVideoView(divId, videoCanvas, connection: connection);
   }
 }