🚀 Sync video preview layouts for WeChat Moment

Author: AlexV525

lib/src/delegates/asset_picker_viewer_builder_delegate.dart

@@ -348,7 +348,11 @@ class DefaultAssetPickerViewerBuilderDelegate
         );
         break;
       case AssetType.video:
-        builder = VideoPageBuilder(asset: asset, state: viewerState);
+        builder = VideoPageBuilder(
+          asset: asset,
+          state: viewerState,
+          hasOnlyOneVideoAndMoment: isWeChatMoment && hasVideo,
+        );
         break;
       case AssetType.other:
         builder = Center(
@@ -399,6 +403,30 @@ class DefaultAssetPickerViewerBuilderDelegate
     );
   }
 
+  /// The back button when previewing video in [SpecialPickerType.wechatMoment].
+  /// 使用 [SpecialPickerType.wechatMoment] 预览视频时的返回按钮
+  Widget momentVideoBackButton(BuildContext context) {
+    return PositionedDirectional(
+      start: 16,
+      top: context.mediaQuery.padding.top + 16,
+      child: GestureDetector(
+        onTap: Navigator.of(context).maybePop,
+        child: Container(
+          padding: const EdgeInsets.all(5),
+          decoration: BoxDecoration(
+            color: themeData.iconTheme.color,
+            shape: BoxShape.circle,
+          ),
+          child: Icon(
+            Icons.keyboard_return_rounded,
+            color: themeData.canvasColor,
+            size: 18,
+          ),
+        ),
+      ),
+    );
+  }
+
   @override
   Widget bottomDetailBuilder(BuildContext context) {
     final Color _backgroundColor = themeData.primaryColor.withOpacity(.9);
@@ -790,9 +818,19 @@ class DefaultAssetPickerViewerBuilderDelegate
                     scrollDirection: Axis.horizontal,
                   ),
                 ),
-                appBar(context),
-                if (selectedAssets != null || (isWeChatMoment && hasVideo))
-                  bottomDetailBuilder(context),
+                if (isWeChatMoment && hasVideo) ...<Widget>[
+                  momentVideoBackButton(context),
+                  PositionedDirectional(
+                    end: 16,
+                    bottom: context.mediaQuery.padding.bottom + 16,
+                    child: confirmButton(context),
+                  ),
+                ] else ...<Widget>[
+                  appBar(context),
+                  if (selectedAssets != null ||
+                      (isWeChatMoment && hasVideo && isAppleOS))
+                    bottomDetailBuilder(context),
+                ],
               ],
             ),
           ),

lib/src/widget/builder/video_page_builder.dart

@@ -12,16 +12,21 @@ class VideoPageBuilder extends StatefulWidget {
     Key? key,
     required this.asset,
     required this.state,
+    this.hasOnlyOneVideoAndMoment = false,
   }) : super(key: key);
 
   /// Asset currently displayed.
   /// 展示的资源
   final AssetEntity asset;
 
   /// [State] for asset picker viewer.
-  /// 资源查看器的状态[State]
+  /// 资源查看器的状态 [State]
   final AssetPickerViewerState<AssetEntity, AssetPathEntity> state;
 
+  /// Only previewing one video and with the [SpecialPickerType.wechatMoment].
+  /// 是否处于 [SpecialPickerType.wechatMoment] 且只有一个视频
+  final bool hasOnlyOneVideoAndMoment;
+
   @override
   _VideoPageBuilderState createState() => _VideoPageBuilderState();
 }
@@ -81,7 +86,12 @@ class _VideoPageBuilderState extends State<VideoPageBuilder> {
     try {
       await _controller.initialize();
       hasLoaded = true;
-      _controller.addListener(videoPlayerListener);
+      _controller
+        ..addListener(videoPlayerListener)
+        ..setLooping(widget.hasOnlyOneVideoAndMoment);
+      if (widget.hasOnlyOneVideoAndMoment) {
+        _controller.play();
+      }
     } catch (e) {
       realDebugPrint('Error when initialize video controller: $e');
       hasErrorWhenInitializing = true;
@@ -142,35 +152,39 @@ class _VideoPageBuilderState extends State<VideoPageBuilder> {
             ),
           ),
         ),
-        ValueListenableBuilder<bool>(
-          valueListenable: isPlaying,
-          builder: (_, bool value, __) => GestureDetector(
-            behavior: HitTestBehavior.opaque,
-            onTap: value ? playButtonCallback : builder.switchDisplayingDetail,
-            child: Center(
-              child: AnimatedOpacity(
-                duration: kThemeAnimationDuration,
-                opacity: value ? 0.0 : 1.0,
-                child: GestureDetector(
-                  onTap: playButtonCallback,
-                  child: DecoratedBox(
-                    decoration: const BoxDecoration(
-                      boxShadow: <BoxShadow>[BoxShadow(color: Colors.black12)],
-                      shape: BoxShape.circle,
-                    ),
-                    child: Icon(
-                      value
-                          ? Icons.pause_circle_outline
-                          : Icons.play_circle_filled,
-                      size: 70.0,
-                      color: Colors.white,
+        if (!widget.hasOnlyOneVideoAndMoment)
+          ValueListenableBuilder<bool>(
+            valueListenable: isPlaying,
+            builder: (_, bool value, __) => GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap:
+                  value ? playButtonCallback : builder.switchDisplayingDetail,
+              child: Center(
+                child: AnimatedOpacity(
+                  duration: kThemeAnimationDuration,
+                  opacity: value ? 0.0 : 1.0,
+                  child: GestureDetector(
+                    onTap: playButtonCallback,
+                    child: DecoratedBox(
+                      decoration: const BoxDecoration(
+                        boxShadow: <BoxShadow>[
+                          BoxShadow(color: Colors.black12)
+                        ],
+                        shape: BoxShape.circle,
+                      ),
+                      child: Icon(
+                        value
+                            ? Icons.pause_circle_outline
+                            : Icons.play_circle_filled,
+                        size: 70.0,
+                        color: Colors.white,
+                      ),
                     ),
                   ),
                 ),
               ),
             ),
           ),
-        ),
       ],
     );
   }