Merge pull request Sub6Resources#622 from tneotia/bugfix/audio-video-disposing

erickok · web-flow · commit db41f465a7ec · 2021-12-16T16:37:31.000+01:00
Fix audio/video not disposing when going to a different screen
diff --git a/README.md b/README.md
@@ -39,6 +39,8 @@ A Flutter widget for rendering HTML and CSS as Flutter widgets.
 
   - [Parameters Table](#parameters)
   
+  - [Methods](#methods)
+  
   - [Getters](#getters)
 
   - [Data](#data)
@@ -187,12 +189,26 @@ Once the above issue is resolved, the aforementioned compromises will go away. C
 | `customImageRender` | A powerful API that allows you to fully customize how images are loaded. |
 | `selectionControls` |  A custom text selection controls that allow you to override default toolbar and build toolbar with custom text selection options. See an [example](https://github.com/justinmc/flutter-text-selection-menu-examples/blob/master/lib/custom_menu_page.dart). |
 
+### Methods:
+
+|  Methods  |   Description   |
+|--------------|-----------------|
+| `disposeAll()` | Disposes all `ChewieController`s, `ChewieAudioController`s, and `VideoPlayerController`s being used by every `Html` widget. (Note: `Html` widgets automatically dispose their controllers, this method is only provided in case you need other behavior) |
+
 ### Getters:
 
 1. `Html.tags`. This provides a list of all the tags the package renders. The main use case is to assist in excluding elements using `tagsList`. See an [example](#example-usage---tagslist---excluding-tags) below.
 
 2. `SelectableHtml.tags`. This provides a list of all the tags that can be rendered in selectable mode.
 
+3. `Html.chewieAudioControllers`. This provides a list of all `ChewieAudioController`s being used by `Html` widgets.
+
+4. `Html.chewieControllers`. This provides a list of all `ChewieController`s being used by `Html` widgets.
+
+5. `Html.videoPlayerControllers`. This provides a list of all `VideoPlayerController`s being used for video widgets by `Html` widgets.
+
+6. `Html.audioPlayerControllers`. This provides a list of all `VideoPlayerController`s being used for audio widgets by `Html` widgets.
+
 ### Data:
 
 The HTML data passed to the `Html` widget as a `String`. This is required and cannot be null when using `Html`.
diff --git a/lib/flutter_html.dart b/lib/flutter_html.dart
@@ -1,14 +1,18 @@
 library flutter_html;
 
+import 'package:chewie/chewie.dart';
+import 'package:chewie_audio/chewie_audio.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_html/custom_render.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_html/html_parser.dart';
 import 'package:flutter_html/image_render.dart';
 import 'package:flutter_html/src/html_elements.dart';
+import 'package:flutter_html/src/utils.dart';
 import 'package:flutter_html/style.dart';
 import 'package:html/dom.dart' as dom;
 import 'package:flutter_html/src/navigation_delegate.dart';
+import 'package:video_player/video_player.dart';
 
 //export render context api
 export 'package:flutter_html/html_parser.dart';
@@ -29,7 +33,7 @@ export 'package:flutter_html/src/navigation_delegate.dart';
 //export style api
 export 'package:flutter_html/style.dart';
 
-class Html extends StatelessWidget {
+class Html extends StatefulWidget {
   /// The `Html` widget takes HTML as input and displays a RichText
   /// tree of the parsed HTML content.
   ///
@@ -149,41 +153,126 @@ class Html extends StatelessWidget {
   /// to use NavigationDelegate.
   final NavigationDelegate? navigationDelegateForIframe;
 
-  static List<String> get tags => new List<String>.from(STYLED_ELEMENTS)
-    ..addAll(INTERACTABLE_ELEMENTS)
-    ..addAll(REPLACED_ELEMENTS)
-    ..addAll(LAYOUT_ELEMENTS)
-    ..addAll(TABLE_CELL_ELEMENTS)
-    ..addAll(TABLE_DEFINITION_ELEMENTS);
+  /// Get the list of supported tags for the [Html] widget
+  static List<String> get tags =>
+      new List<String>.from(STYLED_ELEMENTS)
+        ..addAll(INTERACTABLE_ELEMENTS)..addAll(REPLACED_ELEMENTS)..addAll(
+          LAYOUT_ELEMENTS)..addAll(TABLE_CELL_ELEMENTS)..addAll(
+          TABLE_DEFINITION_ELEMENTS);
+
+  /// Protected member to track controllers used in all [Html] widgets. Please
+  /// refrain from using this member, and rather use the [chewieAudioControllers],
+  /// [chewieControllers], [videoPlayerControllers], and [audioPlayerControllers]
+  /// getters to access the controllers in your own code.
+  @protected
+  static final InternalControllers controllers = InternalControllers();
+
+  /// Internal member to track controllers used in the specific [Html] widget.
+  /// This is only used so controllers can be automatically disposed when the
+  /// widget disposes.
+  final InternalControllers _controllers = InternalControllers();
+
+  /// Getter for all [ChewieAudioController]s initialized by [Html] widgets.
+  static List<ChewieAudioController> get chewieAudioControllers => controllers.chewieAudioControllers.values.toList();
+  /// Getter for all [ChewieController]s initialized by [Html] widgets.
+  static List<ChewieController> get chewieControllers => controllers.chewieControllers.values.toList();
+  /// Getter for all [VideoPlayerController]s for video widgets initialized by [Html] widgets.
+  static List<VideoPlayerController> get videoPlayerControllers => controllers.videoPlayerControllers.values.toList();
+  /// Getter for all [VideoPlayerController]s for audio widgets initialized by [Html] widgets.
+  static List<VideoPlayerController> get audioPlayerControllers => controllers.audioPlayerControllers.values.toList();
+
+  /// Convenience method to dispose all controllers used by all [Html] widgets
+  /// at this time. This is not necessary to be called, as each [Html] widget
+  /// will automatically handle disposing.
+  static void disposeAll() {
+    controllers.chewieAudioControllers.values.forEach((element) {
+      element.dispose();
+    });
+    controllers.chewieControllers.values.forEach((ChewieController element) {
+      element.dispose();
+    });
+    controllers.videoPlayerControllers.values.forEach((element) {
+      element.dispose();
+    });
+    controllers.audioPlayerControllers.values.forEach((element) {
+      element.dispose();
+    });
+  }
+
+  /// Internal method to add controllers to the global list and widget-specific
+  /// list. This should not be used in your app code.
+  void addController(int hashCode, dynamic controller, {bool isAudioController = false}) {
+    if (controller is ChewieAudioController) {
+      controllers.chewieAudioControllers[hashCode] = controller;
+      _controllers.chewieAudioControllers[hashCode] = controller;
+    } else if (controller is ChewieController) {
+      controllers.chewieControllers[hashCode] = controller;
+      _controllers.chewieControllers[hashCode] = controller;
+    } else if (controller is VideoPlayerController && !isAudioController) {
+      controllers.videoPlayerControllers[hashCode] = controller;
+      _controllers.videoPlayerControllers[hashCode] = controller;
+    } else if (controller is VideoPlayerController) {
+      controllers.audioPlayerControllers[hashCode] = controller;
+      _controllers.audioPlayerControllers[hashCode] = controller;
+    }
+  }
 
   @override
-  Widget build(BuildContext context) {
-    final dom.Document doc =
-        data != null ? HtmlParser.parseHTML(data!) : document!;
-    final double? width = shrinkWrap ? null : MediaQuery.of(context).size.width;
+  State<StatefulWidget> createState() => _HtmlState();
+}
 
+class _HtmlState extends State<Html> {
+  late final dom.Document doc;
+
+  @override
+  void initState() {
+    super.initState();
+    doc =
+      widget.data != null ? HtmlParser.parseHTML(widget.data!) : widget.document!;
+  }
+
+  @override
+  void dispose() {
+    widget._controllers.chewieAudioControllers.values.forEach((element) {
+      element.dispose();
+    });
+    widget._controllers.chewieControllers.values.forEach((ChewieController element) {
+      element.dispose();
+    });
+    widget._controllers.videoPlayerControllers.values.forEach((element) {
+      element.dispose();
+    });
+    widget._controllers.audioPlayerControllers.values.forEach((element) {
+      element.dispose();
+    });
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
     return Container(
-      width: width,
+      width: widget.shrinkWrap ? null : MediaQuery.of(context).size.width,
       child: HtmlParser(
-        key: _anchorKey,
+        key: widget._anchorKey,
         htmlData: doc,
-        onLinkTap: onLinkTap,
-        onAnchorTap: onAnchorTap,
-        onImageTap: onImageTap,
-        onCssParseError: onCssParseError,
-        onImageError: onImageError,
-        onMathError: onMathError,
-        shrinkWrap: shrinkWrap,
+        onLinkTap: widget.onLinkTap,
+        onAnchorTap: widget.onAnchorTap,
+        onImageTap: widget.onImageTap,
+        onCssParseError: widget.onCssParseError,
+        onImageError: widget.onImageError,
+        onMathError: widget.onMathError,
+        shrinkWrap: widget.shrinkWrap,
         selectable: false,
-        style: style,
+        style: widget.style,
         customRenders: {}
-          ..addAll(customRenders)
+          ..addAll(widget.customRenders)
           ..addAll(defaultRenders),
         imageRenders: {}
-          ..addAll(customImageRenders)
+          ..addAll(widget.customImageRenders)
           ..addAll(defaultImageRenders),
-        tagsList: tagsList.isEmpty ? Html.tags : tagsList,
-        navigationDelegateForIframe: navigationDelegateForIframe,
+        tagsList: widget.tagsList.isEmpty ? Html.tags : widget.tagsList,
+        navigationDelegateForIframe: widget.navigationDelegateForIframe,
+        root: widget,
       ),
     );
   }
@@ -297,6 +386,7 @@ class SelectableHtml extends StatelessWidget {
   /// fallback to the default rendering.
   final Map<CustomRenderMatcher, SelectableCustomRender> customRenders;
 
+  /// Get the list of supported tags for the [SelectableHtml] widget
   static List<String> get tags => new List<String>.from(SELECTABLE_ELEMENTS);
 
   @override
diff --git a/lib/html_parser.dart b/lib/html_parser.dart
@@ -4,16 +4,10 @@ import 'dart:math';
 import 'package:csslib/parser.dart' as cssparser;
 import 'package:csslib/visitor.dart' as css;
 import 'package:flutter/material.dart';
-import 'package:flutter/rendering.dart';
 import 'package:flutter_html/flutter_html.dart';
-import 'package:flutter_html/image_render.dart';
-import 'package:flutter_html/src/anchor.dart';
 import 'package:flutter_html/src/css_parser.dart';
 import 'package:flutter_html/src/html_elements.dart';
-import 'package:flutter_html/src/layout_element.dart';
-import 'package:flutter_html/src/navigation_delegate.dart';
 import 'package:flutter_html/src/utils.dart';
-import 'package:flutter_html/style.dart';
 import 'package:html/dom.dart' as dom;
 import 'package:html/parser.dart' as htmlparser;
 import 'package:numerus/numerus.dart';
@@ -52,6 +46,7 @@ class HtmlParser extends StatelessWidget {
   final List<String> tagsList;
   final NavigationDelegate? navigationDelegateForIframe;
   final OnTap? internalOnAnchorTap;
+  final Html? root;
   final TextSelectionControls? selectionControls;
   final ScrollPhysics? scrollPhysics;
 
@@ -73,6 +68,7 @@ class HtmlParser extends StatelessWidget {
     required this.imageRenders,
     required this.tagsList,
     required this.navigationDelegateForIframe,
+    this.root,
     this.selectionControls,
     this.scrollPhysics,
   })  : this.internalOnAnchorTap = onAnchorTap != null
diff --git a/lib/src/anchor.dart b/lib/src/anchor.dart
@@ -1,4 +1,3 @@
-import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_html/src/styled_element.dart';
 
diff --git a/lib/src/css_parser.dart b/lib/src/css_parser.dart
@@ -3,11 +3,9 @@ import 'dart:ui';
 import 'package:collection/collection.dart';
 import 'package:csslib/visitor.dart' as css;
 import 'package:csslib/parser.dart' as cssparser;
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_html/src/utils.dart';
-import 'package:flutter_html/style.dart';
 
 Style declarationsToStyle(Map<String, List<css.Expression>> declarations) {
   Style style = new Style();
diff --git a/lib/src/replaced_element.dart b/lib/src/replaced_element.dart
@@ -3,16 +3,11 @@ import 'dart:math';
 import 'package:chewie/chewie.dart';
 import 'package:chewie_audio/chewie_audio.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
-import 'package:flutter_html/html_parser.dart';
-import 'package:flutter_html/src/anchor.dart';
-import 'package:flutter_html/src/html_elements.dart';
-import 'package:flutter_html/src/navigation_delegate.dart';
+import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_html/src/utils.dart';
 import 'package:flutter_html/src/widgets/iframe_unsupported.dart'
   if (dart.library.io) 'package:flutter_html/src/widgets/iframe_mobile.dart'
   if (dart.library.html) 'package:flutter_html/src/widgets/iframe_web.dart';
-import 'package:flutter_html/style.dart';
 import 'package:flutter_math_fork/flutter_math.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:html/dom.dart' as dom;
@@ -124,21 +119,25 @@ class AudioContentElement extends ReplacedElement {
 
   @override
   Widget toWidget(RenderContext context) {
+    final VideoPlayerController audioController = VideoPlayerController.network(
+      src.first ?? "",
+    );
+    final ChewieAudioController chewieAudioController = ChewieAudioController(
+      videoPlayerController: audioController,
+      autoPlay: autoplay,
+      looping: loop,
+      showControls: showControls,
+      autoInitialize: true,
+    );
+    context.parser.root?.addController(element.hashCode, audioController, isAudioController: true);
+    context.parser.root?.addController(element.hashCode, chewieAudioController);
     return Container(
       key: AnchorKey.of(context.parser.key, this),
       width: context.style.width ?? 300,
       height: Theme.of(context.buildContext).platform == TargetPlatform.android
           ? 48 : 75,
       child: ChewieAudio(
-        controller: ChewieAudioController(
-          videoPlayerController: VideoPlayerController.network(
-            src.first ?? "",
-          ),
-          autoPlay: autoplay,
-          looping: loop,
-          showControls: showControls,
-          autoInitialize: true,
-        ),
+        controller: chewieAudioController,
       ),
     );
   }
@@ -172,24 +171,28 @@ class VideoContentElement extends ReplacedElement {
   Widget toWidget(RenderContext context) {
     final double _width = width ?? (height ?? 150) * 2;
     final double _height = height ?? (width ?? 300) / 2;
+    final VideoPlayerController videoController = VideoPlayerController.network(
+      src.first ?? "",
+    );
+    final ChewieController chewieController = ChewieController(
+      videoPlayerController: videoController,
+      placeholder: poster != null && poster!.isNotEmpty
+          ? Image.network(poster!)
+          : Container(color: Colors.black),
+      autoPlay: autoplay,
+      looping: loop,
+      showControls: showControls,
+      autoInitialize: true,
+      aspectRatio: _width / _height,
+    );
+    context.parser.root?.addController(element.hashCode, videoController);
+    context.parser.root?.addController(element.hashCode, chewieController);
     return AspectRatio(
       aspectRatio: _width / _height,
       child: Container(
         key: AnchorKey.of(context.parser.key, this),
         child: Chewie(
-          controller: ChewieController(
-            videoPlayerController: VideoPlayerController.network(
-              src.first ?? "",
-            ),
-            placeholder: poster != null && poster!.isNotEmpty
-                ? Image.network(poster!)
-                : Container(color: Colors.black),
-            autoPlay: autoplay,
-            looping: loop,
-            showControls: showControls,
-            autoInitialize: true,
-            aspectRatio: _width / _height,
-          ),
+          controller: chewieController,
         ),
       ),
     );
diff --git a/lib/src/styled_element.dart b/lib/src/styled_element.dart
diff --git a/lib/src/utils.dart b/lib/src/utils.dart
diff --git a/test/html_parser_test.dart b/test/html_parser_test.dart

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import 'package:flutter/foundation.dart';`
`2`	`1`	`import 'package:flutter/widgets.dart';`
`3`	`2`	`import 'package:flutter_html/src/styled_element.dart';`
`4`	`3`