💄 Roll UI design WeChat 8.3.x (#458)

Resolves #456.

CHANGELOG.md

@@ -4,6 +4,13 @@ that can be found in the LICENSE file. -->
 
 # Changelog
 
+## 8.6.0
+
+### New features
+
+- Sync all UI details from WeChat 8.3.x. (#458)
+- Fix semantics interactions for videos preview. (#458)
+
 ## 8.5.0
 
 ### Breaking changes

README-ZH.md

@@ -23,7 +23,7 @@ Language: [English](README.md) | 中文
 [extended_image][extended_image pub] 用于查看图片，
 [provider][provider pub] 用于协助管理选择器的状态。
 
-当前的界面设计基于的微信版本：**8.x**
+当前的界面设计基于的微信版本：**8.3.x**
 界面更新将在微信版本更新后随时进行跟进。
 
 如果你需要拍照及录制视频，请先查看示例的详细用法，

README.md

@@ -25,7 +25,7 @@ The package is using
 [extended_image][extended_image pub] for image preview,
 and [provider][provider pub] to help manage the state of the picker.
 
-Current WeChat version that UI based on: **8.x**
+Current WeChat version that UI based on: **8.3.x**
 UI designs will be updated following the WeChat update in anytime.
 
 To take a photo or a video for assets,

example/lib/main.dart

@@ -51,6 +51,9 @@ class MyApp extends StatelessWidget {
         GlobalMaterialLocalizations.delegate,
         GlobalCupertinoLocalizations.delegate,
       ],
+      supportedLocales: assetPickerTextDelegates.map(
+        (AssetPickerTextDelegate e) => Locale(e.languageCode),
+      ),
     );
   }
 }

lib/src/delegates/asset_picker_builder_delegate.dart

@@ -521,9 +521,9 @@ abstract class AssetPickerBuilderDelegate<Asset, Path> {
       color: theme.primaryColor.withOpacity(isAppleOS ? 0.90 : 1),
       child: Row(
         children: <Widget>[
-          if (!isAppleOS) previewButton(context),
-          if (isAppleOS) const Spacer(),
-          if (isAppleOS) confirmButton(context),
+          previewButton(context),
+          const Spacer(),
+          confirmButton(context),
         ],
       ),
     );
@@ -915,22 +915,11 @@ class DefaultAssetPickerBuilderDelegate
   AssetPickerAppBar appBar(BuildContext context) {
     return AssetPickerAppBar(
       backgroundColor: theme.appBarTheme.backgroundColor,
-      centerTitle: isAppleOS,
       title: Semantics(
         onTapHint: semanticsTextDelegate.sActionSwitchPathLabel,
         child: pathEntitySelector(context),
       ),
       leading: backButton(context),
-      // Condition for displaying the confirm button:
-      // - On Android, show if preview is enabled or if multi asset mode.
-      //   If no preview and single asset mode, do not show confirm button,
-      //   because any click on an asset selects it.
-      // - On iOS and macOS, show nothing.
-      actions: <Widget>[
-        if (!isAppleOS && (isPreviewEnabled || !isSingleAssetMode))
-          confirmButton(context),
-      ],
-      actionsPadding: const EdgeInsetsDirectional.only(end: 14),
       blurRadius: isAppleOS ? appleOSBlurRadius : 0,
     );
   }
@@ -952,7 +941,7 @@ class DefaultAssetPickerBuilderDelegate
                         child: Column(
                           children: <Widget>[
                             Expanded(child: assetsGridBuilder(context)),
-                            if (!isSingleAssetMode && isPreviewEnabled)
+                            if (isPreviewEnabled || !isSingleAssetMode)
                               bottomActionBar(context),
                           ],
                         ),
@@ -979,11 +968,8 @@ class DefaultAssetPickerBuilderDelegate
             child: Stack(
               children: <Widget>[
                 Positioned.fill(child: assetsGridBuilder(context)),
-                if (!isSingleAssetMode || isPreviewEnabled)
-                  Positioned.fill(
-                    top: null,
-                    child: bottomActionBar(context),
-                  ),
+                if (isPreviewEnabled || !isSingleAssetMode)
+                  Positioned.fill(top: null, child: bottomActionBar(context)),
               ],
             ),
           ),
@@ -2159,6 +2145,40 @@ class DefaultAssetPickerBuilderDelegate
     );
   }
 
+  @override
+  Widget bottomActionBar(BuildContext context) {
+    Widget child = Container(
+      height: bottomActionBarHeight + context.bottomPadding,
+      padding: const EdgeInsets.symmetric(horizontal: 20).copyWith(
+        bottom: context.bottomPadding,
+      ),
+      color: theme.primaryColor.withOpacity(isAppleOS ? .9 : 1),
+      child: Row(
+        children: <Widget>[
+          if (isPreviewEnabled) previewButton(context),
+          if (isPreviewEnabled || !isSingleAssetMode) const Spacer(),
+          if (isPreviewEnabled || !isSingleAssetMode) confirmButton(context),
+        ],
+      ),
+    );
+    if (isPermissionLimited) {
+      child = Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[accessLimitedBottomTip(context), child],
+      );
+    }
+    child = ClipRect(
+      child: BackdropFilter(
+        filter: ui.ImageFilter.blur(
+          sigmaX: appleOSBlurRadius,
+          sigmaY: appleOSBlurRadius,
+        ),
+        child: child,
+      ),
+    );
+    return child;
+  }
+
   @override
   Widget build(BuildContext context) {
     // Schedule the scroll position's restoration callback if this feature

lib/src/delegates/asset_picker_viewer_builder_delegate.dart

@@ -592,13 +592,10 @@ class DefaultAssetPickerViewerBuilderDelegate
                 color: backgroundColor,
               ),
               child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                mainAxisAlignment: MainAxisAlignment.end,
                 children: <Widget>[
-                  const Spacer(),
-                  if (isAppleOS && (provider != null || isWeChatMoment))
-                    confirmButton(context)
-                  else
-                    selectButton(context),
+                  if (provider != null || isWeChatMoment)
+                    confirmButton(context),
                 ],
               ),
             ),
@@ -763,32 +760,18 @@ class DefaultAssetPickerViewerBuilderDelegate
                   ),
                 ),
               ),
-            if (isAppleOS && provider != null)
+            if (provider != null)
               Expanded(
-                child: Align(
+                child: Container(
                   alignment: AlignmentDirectional.centerEnd,
+                  padding: const EdgeInsetsDirectional.only(end: 14),
                   child: Semantics(
                     sortKey: ordinalSortKey(0.2),
                     child: selectButton(context),
                   ),
                 ),
               )
-            else if (isAppleOS)
-              const Spacer(),
-            if (!isAppleOS && (provider != null || isWeChatMoment))
-              Expanded(
-                child: Align(
-                  alignment: AlignmentDirectional.centerEnd,
-                  child: Semantics(
-                    sortKey: ordinalSortKey(0.3),
-                    child: Padding(
-                      padding: const EdgeInsetsDirectional.only(end: 14),
-                      child: confirmButton(context),
-                    ),
-                  ),
-                ),
-              )
-            else if (!isAppleOS)
+            else
               const Spacer(),
           ],
         ),
@@ -968,7 +951,7 @@ class DefaultAssetPickerViewerBuilderDelegate
                     if (!isAppleOS)
                       ScaleText(
                         textDelegate.select,
-                        style: const TextStyle(fontSize: 17, height: 1),
+                        style: const TextStyle(fontSize: 17, height: 1.2),
                         semanticsLabel: semanticsTextDelegate.select,
                       ),
                   ],

lib/src/widget/builder/audio_page_builder.dart

@@ -73,7 +73,7 @@ class _AudioPageBuilderState extends State<AudioPageBuilder> {
     try {
       final String? url = await widget.asset.getMediaUrl();
       assetDuration = Duration(seconds: widget.asset.duration);
-      _controller = VideoPlayerController.network(url!);
+      _controller = VideoPlayerController.networkUrl(Uri.parse(url!));
       await _controller.initialize();
       _controller.addListener(audioPlayerListener);
     } catch (e) {

lib/src/widget/builder/video_page_builder.dart

@@ -85,10 +85,11 @@ class _VideoPageBuilderState extends State<VideoPageBuilder> {
       }
       return;
     }
+    final Uri uri = Uri.parse(url);
     if (Platform.isAndroid) {
-      _controller = VideoPlayerController.contentUri(Uri.parse(url));
+      _controller = VideoPlayerController.contentUri(uri);
     } else {
-      _controller = VideoPlayerController.network(url);
+      _controller = VideoPlayerController.networkUrl(uri);
     }
     try {
       await controller.initialize();
@@ -123,12 +124,13 @@ class _VideoPageBuilderState extends State<VideoPageBuilder> {
   /// Normally it only switches play state for the player. If the video reaches the end,
   /// then click the button will make the video replay.
   /// 一般来说按钮只切换播放暂停。当视频播放结束时，点击按钮将从头开始播放。
-  Future<void> playButtonCallback() async {
+  Future<void> playButtonCallback(BuildContext context) async {
     if (isPlaying.value) {
       controller.pause();
       return;
     }
-    if (widget.delegate.isDisplayingDetail.value) {
+    if (widget.delegate.isDisplayingDetail.value &&
+        !MediaQuery.accessibleNavigationOf(context)) {
       widget.delegate.switchDisplayingDetail(value: false);
     }
     if (controller.value.duration == controller.value.position) {
@@ -156,16 +158,15 @@ class _VideoPageBuilderState extends State<VideoPageBuilder> {
           ValueListenableBuilder<bool>(
             valueListenable: isPlaying,
             builder: (_, bool value, __) => GestureDetector(
-              behavior: HitTestBehavior.opaque,
-              onTap: value
-                  ? playButtonCallback
+              onTap: value || MediaQuery.accessibleNavigationOf(context)
+                  ? () => playButtonCallback(context)
                   : widget.delegate.switchDisplayingDetail,
               child: Center(
                 child: AnimatedOpacity(
                   duration: kThemeAnimationDuration,
                   opacity: value ? 0.0 : 1.0,
                   child: GestureDetector(
-                    onTap: playButtonCallback,
+                    onTap: () => playButtonCallback(context),
                     child: DecoratedBox(
                       decoration: const BoxDecoration(
                         boxShadow: <BoxShadow>[
@@ -211,15 +212,10 @@ class _VideoPageBuilderState extends State<VideoPageBuilder> {
           return const SizedBox.shrink();
         }
         return Semantics(
-          onLongPress: playButtonCallback,
+          onLongPress: () => playButtonCallback(context),
           onLongPressHint:
               Singleton.textDelegate.semanticsTextDelegate.sActionPlayHint,
-          child: GestureDetector(
-            onLongPress: MediaQuery.of(context).accessibleNavigation
-                ? playButtonCallback
-                : null,
-            child: _contentBuilder(context),
-          ),
+          child: _contentBuilder(context),
         );
       },
     );

pubspec.yaml

@@ -1,5 +1,5 @@
 name: wechat_assets_picker
-version: 8.5.0
+version: 8.6.0
 description: |
   An image picker (also with videos and audio)
   for Flutter projects based on WeChat's UI,
@@ -19,7 +19,7 @@ dependencies:
   extended_image: ^8.0.0
   photo_manager: ^2.6.0
   provider: ^6.0.5
-  video_player: ^2.6.0
+  video_player: ^2.7.0
 
 dev_dependencies:
   flutter_localizations: