Add Auto Play Flag In DefaultAssetPickerViewerBuilderDelegate (#585)

Add an autoplay flag to autoplay video, audio, and live photos. Co-authored-by: yujune <[email protected]> Co-authored-by: Alex Li <[email protected]>
fluttercandies · Jul 30, 2024 · ecb2cdd · ecb2cdd
1 parent 333ff71
commit ecb2cdd
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 4 deletions.
diff --git a/README-ZH.md b/README-ZH.md
@@ -303,6 +303,7 @@ final List<AssetEntity>? result = await AssetPicker.pickAssets(
 | pathNameBuilder                   | `PathNameBuilder<AssetPathEntity>?`              | 基于路径（相册）构建自定义名称的方法                                   | `null`                      |
 | assetsChangeCallback              | `AssetsChangeCallback<AssetPathEntity>?`         | 当系统通知资源变化时将调用的回调                                     | `null`                      |
 | assetsChangeRefreshPredicate      | `AssetsChangeRefreshPredicate<AssetPathEntity>?` | 判断资源变化是否根据 call 和当前选中的路径进行更新                         | `null`                      |
+| shouldAutoplayPreview             | `bool`                               | 预览是否应自动播放                                                        | `false`                     |
 
 - 当 `maxAssets` 等于 `1`（即单选模式），搭配
   `SpecialPickerType.noPreview` 使用会在用户点选资源换时立刻选中并返回。

diff --git a/README.md b/README.md
@@ -312,6 +312,7 @@ Fields in `AssetPickerConfig`:
 | pathNameBuilder                   | `PathNameBuilder<AssetPathEntity>?`              | Build customized path (album) name with the given path entity.                                 | `null`                      |
 | assetsChangeCallback              | `AssetsChangeCallback<AssetPathEntity>?`         | The callback that will be called when the system notifies assets changes.                      | `null`                      |
 | assetsChangeRefreshPredicate      | `AssetsChangeRefreshPredicate<AssetPathEntity>?` | Whether assets changing should call refresh with the given call and the current selected path. | `null`                      |
+| shouldAutoPlayPreview             | `bool`                               | Whether the preview should auto play.                                                        | `false`                      |
 
 - When `maxAssets` equals to `1` (a.k.a. single picking mode),
   use `SpecialPickerType.noPreview` will immediately select asset

diff --git a/lib/src/constants/config.dart b/lib/src/constants/config.dart
@@ -38,6 +38,7 @@ class AssetPickerConfig {
     this.pathNameBuilder,
     this.assetsChangeCallback,
     this.assetsChangeRefreshPredicate,
+    this.shouldAutoplayPreview = false,
   })  : assert(
           pickerTheme == null || themeColor == null,
           'pickerTheme and themeColor cannot be set at the same time.',
@@ -200,4 +201,8 @@ class AssetPickerConfig {
   /// {@macro wechat_assets_picker.AssetsChangeRefreshPredicate}
   final AssetsChangeRefreshPredicate<AssetPathEntity>?
       assetsChangeRefreshPredicate;
+
+  /// Whether the preview should auto play.
+  /// 预览是否自动播放
+  final bool shouldAutoplayPreview;
 }
diff --git a/lib/src/delegates/asset_picker_builder_delegate.dart b/lib/src/delegates/asset_picker_builder_delegate.dart
@@ -718,6 +718,7 @@ class DefaultAssetPickerBuilderDelegate
     this.previewThumbnailSize,
     this.specialPickerType,
     this.keepScrollOffset = false,
+    this.shouldAutoplayPreview = false,
   }) {
     // Add the listener if [keepScrollOffset] is true.
     if (keepScrollOffset) {
@@ -772,6 +773,10 @@ class DefaultAssetPickerBuilderDelegate
   /// 选择器是否可以从同样的位置开始选择
   final bool keepScrollOffset;
 
+  /// Whether the preview should auto play.
+  /// 预览是否自动播放
+  final bool shouldAutoplayPreview;
+
   /// [Duration] when triggering path switching.
   /// 切换路径时的动画时长
   Duration get switchingPathDuration => const Duration(milliseconds: 300);
@@ -1009,6 +1014,7 @@ class DefaultAssetPickerBuilderDelegate
       specialPickerType: specialPickerType,
       maxAssets: p.maxAssets,
       shouldReversePreview: revert,
+      shouldAutoplayPreview: shouldAutoplayPreview,
     );
     if (result != null) {
       Navigator.maybeOf(context)?.maybePop(result);

diff --git a/lib/src/delegates/asset_picker_delegate.dart b/lib/src/delegates/asset_picker_delegate.dart
@@ -118,6 +118,7 @@ class AssetPickerDelegate {
         textDelegate: pickerConfig.textDelegate,
         themeColor: pickerConfig.themeColor,
         locale: Localizations.maybeLocaleOf(context),
+        shouldAutoplayPreview: pickerConfig.shouldAutoplayPreview,
       ),
     );
     final List<AssetEntity>? result = await Navigator.maybeOf(

diff --git a/lib/src/delegates/asset_picker_viewer_builder_delegate.dart b/lib/src/delegates/asset_picker_viewer_builder_delegate.dart
@@ -390,8 +390,13 @@ class DefaultAssetPickerViewerBuilderDelegate
     super.maxAssets,
     super.shouldReversePreview,
     super.selectPredicate,
+    this.shouldAutoplayPreview = false,
   });
 
+  /// Whether the preview should auto play.
+  /// 预览是否自动播放
+  final bool shouldAutoplayPreview;
+
   /// Thumb size for the preview of images in the viewer.
   /// 预览时图片的缩略图大小
   final ThumbnailSize? previewThumbnailSize;
@@ -421,16 +426,21 @@ class DefaultAssetPickerViewerBuilderDelegate
       shouldReversePreview ? previewAssets.length - index - 1 : index,
     );
     final Widget builder = switch (asset.type) {
-      AssetType.audio => AudioPageBuilder(asset: asset),
+      AssetType.audio => AudioPageBuilder(
+          asset: asset,
+          shouldAutoplayPreview: shouldAutoplayPreview,
+        ),
       AssetType.image => ImagePageBuilder(
           asset: asset,
           delegate: this,
           previewThumbnailSize: previewThumbnailSize,
+          shouldAutoplayPreview: shouldAutoplayPreview,
         ),
       AssetType.video => VideoPageBuilder(
           asset: asset,
           delegate: this,
           hasOnlyOneVideoAndMoment: isWeChatMoment && hasVideo,
+          shouldAutoplayPreview: shouldAutoplayPreview,
         ),
       AssetType.other => Center(
           child: ScaleText(

diff --git a/lib/src/widget/asset_picker_viewer.dart b/lib/src/widget/asset_picker_viewer.dart
@@ -43,6 +43,7 @@ class AssetPickerViewer<Asset, Path> extends StatefulWidget {
     AssetSelectPredicate<AssetEntity>? selectPredicate,
     PermissionRequestOption permissionRequestOption =
         const PermissionRequestOption(),
+    bool shouldAutoplayPreview = false,
   }) async {
     await AssetPicker.permissionCheck(requestOption: permissionRequestOption);
     final Widget viewer = AssetPickerViewer<AssetEntity, AssetPathEntity>(
@@ -65,6 +66,7 @@ class AssetPickerViewer<Asset, Path> extends StatefulWidget {
         maxAssets: maxAssets,
         shouldReversePreview: shouldReversePreview,
         selectPredicate: selectPredicate,
+        shouldAutoplayPreview: shouldAutoplayPreview,
       ),
     );
     final PageRouteBuilder<List<AssetEntity>> pageRoute =

diff --git a/lib/src/widget/builder/audio_page_builder.dart b/lib/src/widget/builder/audio_page_builder.dart
@@ -13,12 +13,20 @@ import '../../constants/constants.dart';
 import '../../internals/singleton.dart';
 
 class AudioPageBuilder extends StatefulWidget {
-  const AudioPageBuilder({super.key, required this.asset});
+  const AudioPageBuilder({
+    super.key,
+    required this.asset,
+    this.shouldAutoplayPreview = false,
+  });
 
   /// Asset currently displayed.
   /// 展示的资源
   final AssetEntity asset;
 
+  /// Whether the preview should auto play.
+  /// 预览是否自动播放
+  final bool shouldAutoplayPreview;
+
   @override
   State<StatefulWidget> createState() => _AudioPageBuilderState();
 }
@@ -92,6 +100,9 @@ class _AudioPageBuilderState extends State<AudioPageBuilder> {
       _controller = VideoPlayerController.networkUrl(Uri.parse(url!));
       await controller.initialize();
       controller.addListener(audioPlayerListener);
+      if (widget.shouldAutoplayPreview) {
+        controller.play();
+      }
     } catch (e, s) {
       FlutterError.presentError(
         FlutterErrorDetails(

diff --git a/lib/src/widget/builder/image_page_builder.dart b/lib/src/widget/builder/image_page_builder.dart
@@ -20,6 +20,7 @@ class ImagePageBuilder extends StatefulWidget {
     required this.asset,
     required this.delegate,
     this.previewThumbnailSize,
+    this.shouldAutoplayPreview = false,
   });
 
   /// Asset currently displayed.
@@ -30,6 +31,10 @@ class ImagePageBuilder extends StatefulWidget {
 
   final ThumbnailSize? previewThumbnailSize;
 
+  /// Whether the preview should auto play.
+  /// 预览是否自动播放
+  final bool shouldAutoplayPreview;
+
   @override
   State<ImagePageBuilder> createState() => _ImagePageBuilderState();
 }
@@ -79,7 +84,11 @@ class _ImagePageBuilderState extends State<ImagePageBuilder> {
       _controller = c;
     });
     c
-      ..initialize()
+      ..initialize().then((_) {
+        if (widget.shouldAutoplayPreview) {
+          _play();
+        }
+      })
       ..setVolume(0)
       ..addListener(() {
         if (mounted) {

diff --git a/lib/src/widget/builder/video_page_builder.dart b/lib/src/widget/builder/video_page_builder.dart
@@ -19,6 +19,7 @@ class VideoPageBuilder extends StatefulWidget {
     required this.asset,
     required this.delegate,
     this.hasOnlyOneVideoAndMoment = false,
+    this.shouldAutoplayPreview = false,
   });
 
   /// Asset currently displayed.
@@ -31,6 +32,10 @@ class VideoPageBuilder extends StatefulWidget {
   /// 是否处于 [SpecialPickerType.wechatMoment] 且只有一个视频
   final bool hasOnlyOneVideoAndMoment;
 
+  /// Whether the preview should auto play.
+  /// 预览是否自动播放
+  final bool shouldAutoplayPreview;
+
   @override
   State<VideoPageBuilder> createState() => _VideoPageBuilderState();
 }
@@ -113,7 +118,7 @@ class _VideoPageBuilderState extends State<VideoPageBuilder> {
       controller
         ..addListener(videoPlayerListener)
         ..setLooping(widget.hasOnlyOneVideoAndMoment);
-      if (widget.hasOnlyOneVideoAndMoment) {
+      if (widget.hasOnlyOneVideoAndMoment || widget.shouldAutoplayPreview) {
         controller.play();
       }
     } catch (e, s) {

diff --git a/test/test_utils.dart b/test/test_utils.dart
@@ -142,6 +142,7 @@ class TestAssetPickerDelegate extends AssetPickerDelegate {
         textDelegate: pickerConfig.textDelegate,
         themeColor: pickerConfig.themeColor,
         locale: Localizations.maybeLocaleOf(context),
+        shouldAutoplayPreview: pickerConfig.shouldAutoplayPreview,
       ),
     );
     final List<AssetEntity>? result = await Navigator.of(