🐛 Fix UI layouts (#634)

Author: AlexV525

CHANGELOG.md

@@ -9,7 +9,14 @@ that can be found in the LICENSE file. -->
 
 ## Unreleased
 
-*None.*
+### Improvements
+
+- Do not mute the Live Photo during the preview.
+
+### Fixes
+
+- Fix the GIF indicator's layout.
+- Fix the directionality with the reverted grid item.
 
 ## 9.3.0
 

example/ios/Runner.xcodeproj/project.pbxproj

@@ -76,7 +76,6 @@
 				FF5A0AA64F3B1C88D3552E39 /* Pods-Runner.release.xcconfig */,
 				6B0C8420452B45A5D1F1C0C7 /* Pods-Runner.profile.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};

example/ios/Runner/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CADisableMinimumFrameDurationOnPhone</key>
+	<true/>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>$(DEVELOPMENT_LANGUAGE)</string>
 	<key>CFBundleDisplayName</key>
@@ -30,6 +32,8 @@
 	<string>Take a video for display</string>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>Read your photos for display</string>
+	<key>UIApplicationSupportsIndirectInputEvents</key>
+	<true/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>
@@ -47,9 +51,5 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
-	<key>CADisableMinimumFrameDurationOnPhone</key>
-	<true/>
-	<key>UIApplicationSupportsIndirectInputEvents</key>
-	<true/>
 </dict>
 </plist>

example/lib/constants/picker_method.dart

@@ -96,6 +96,29 @@ class PickMethod {
     );
   }
 
+  factory PickMethod.livePhoto(BuildContext context, int maxAssetsCount) {
+    return PickMethod(
+      icon: '🎬',
+      name: context.l10n.pickMethodLivePhotoName,
+      description: context.l10n.pickMethodLivePhotoDescription,
+      method: (BuildContext context, List<AssetEntity> assets) {
+        return AssetPicker.pickAssets(
+          context,
+          pickerConfig: AssetPickerConfig(
+            maxAssets: maxAssetsCount,
+            selectedAssets: assets,
+            requestType: RequestType.image,
+            filterOptions: CustomFilter.sql(
+              where: '${CustomColumns.base.mediaType} = 1'
+                  ' AND '
+                  '${CustomColumns.darwin.mediaSubtypes} & (1 << 3) = (1 << 3)',
+            ),
+          ),
+        );
+      },
+    );
+  }
+
   factory PickMethod.camera({
     required BuildContext context,
     required int maxAssetsCount,

example/lib/l10n/app_en.arb

@@ -14,6 +14,8 @@
   "pickMethodVideoDescription": "Only pick video from device. (Includes Live Photos on iOS and macOS.)",
   "pickMethodAudioName": "Audio picker",
   "pickMethodAudioDescription": "Only pick audio from device.",
+  "pickMethodLivePhotoName": "Live Photo picker",
+  "pickMethodLivePhotoDescription": "Only pick Live Photos from device.",
   "pickMethodCameraName": "Pick from camera",
   "pickMethodCameraDescription": "Allow to pick an asset through camera.",
   "pickMethodCameraAndStayName": "Pick from camera and stay",

example/lib/l10n/app_zh.arb

@@ -13,9 +13,11 @@
   "pickMethodImageName": "图片选择",
   "pickMethodImageDescription": "仅选择图片。",
   "pickMethodVideoName": "视频选择",
-  "pickMethodVideoDescription": "仅选择视频。（在 iOS 和 macOS 上将包括实况图片。）",
+  "pickMethodVideoDescription": "仅选择视频。",
   "pickMethodAudioName": "音频选择",
   "pickMethodAudioDescription": "仅选择音频。",
+  "pickMethodLivePhotoName": "实况图片选择",
+  "pickMethodLivePhotoDescription": "仅选择实况图片。",
   "pickMethodCameraName": "从相机生成选择",
   "pickMethodCameraDescription": "通过相机拍照生成并选择资源",
   "pickMethodCameraAndStayName": "从相机生成选择并停留",

example/lib/l10n/gen/app_localizations.dart

@@ -180,6 +180,18 @@ abstract class AppLocalizations {
   /// **'Only pick audio from device.'**
   String get pickMethodAudioDescription;
 
+  /// No description provided for @pickMethodLivePhotoName.
+  ///
+  /// In en, this message translates to:
+  /// **'Live Photo picker'**
+  String get pickMethodLivePhotoName;
+
+  /// No description provided for @pickMethodLivePhotoDescription.
+  ///
+  /// In en, this message translates to:
+  /// **'Only pick Live Photos from device.'**
+  String get pickMethodLivePhotoDescription;
+
   /// No description provided for @pickMethodCameraName.
   ///
   /// In en, this message translates to:

example/lib/l10n/gen/app_localizations_en.dart

@@ -51,6 +51,13 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get pickMethodAudioDescription => 'Only pick audio from device.';
 
+  @override
+  String get pickMethodLivePhotoName => 'Live Photo picker';
+
+  @override
+  String get pickMethodLivePhotoDescription =>
+      'Only pick Live Photos from device.';
+
   @override
   String get pickMethodCameraName => 'Pick from camera';
 

example/lib/l10n/gen/app_localizations_zh.dart

@@ -42,14 +42,20 @@ class AppLocalizationsZh extends AppLocalizations {
   String get pickMethodVideoName => '视频选择';
 
   @override
-  String get pickMethodVideoDescription => '仅选择视频。（在 iOS 和 macOS 上将包括实况图片。）';
+  String get pickMethodVideoDescription => '仅选择视频。';
 
   @override
   String get pickMethodAudioName => '音频选择';
 
   @override
   String get pickMethodAudioDescription => '仅选择音频。';
 
+  @override
+  String get pickMethodLivePhotoName => '实况图片选择';
+
+  @override
+  String get pickMethodLivePhotoDescription => '仅选择实况图片。';
+
   @override
   String get pickMethodCameraName => '从相机生成选择';
 

example/lib/pages/multi_assets_page.dart

@@ -2,6 +2,8 @@
 // Use of this source code is governed by an Apache license that can be found
 // in the LICENSE file.
 
+import 'dart:io';
+
 import 'package:flutter/material.dart';
 import 'package:wechat_assets_picker/wechat_assets_picker.dart';
 
@@ -32,6 +34,8 @@ class _MultiAssetsPageState extends State<MultiAssetsPage>
       PickMethod.image(context, maxAssetsCount),
       PickMethod.video(context, maxAssetsCount),
       PickMethod.audio(context, maxAssetsCount),
+      if (Platform.isIOS || Platform.isMacOS)
+        PickMethod.livePhoto(context, maxAssetsCount),
       PickMethod.camera(
         context: context,
         maxAssetsCount: maxAssetsCount,

example/lib/pages/single_assets_page.dart

@@ -2,6 +2,8 @@
 // Use of this source code is governed by an Apache license that can be found
 // in the LICENSE file.
 
+import 'dart:io';
+
 import 'package:flutter/material.dart';
 import 'package:wechat_assets_picker/wechat_assets_picker.dart'
     show AssetEntity;
@@ -32,6 +34,8 @@ class _SingleAssetPageState extends State<SingleAssetPage>
       PickMethod.image(context, maxAssetsCount),
       PickMethod.video(context, maxAssetsCount),
       PickMethod.audio(context, maxAssetsCount),
+      if (Platform.isIOS || Platform.isMacOS)
+        PickMethod.livePhoto(context, maxAssetsCount),
       PickMethod.camera(
         context: context,
         maxAssetsCount: maxAssetsCount,

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: wechat_assets_picker_demo
 description: The demo project for the wechat_assets_picker package.
-version: 9.2.1+57
+version: 9.3.0+58
 publish_to: none
 
 environment:

lib/src/delegates/asset_picker_builder_delegate.dart

@@ -408,7 +408,7 @@ abstract class AssetPickerBuilderDelegate<Asset, Path> {
     return Align(
       alignment: Alignment.bottomCenter,
       child: Container(
-        alignment: AlignmentDirectional.centerEnd,
+        width: double.infinity,
         padding: const EdgeInsets.all(6),
         decoration: BoxDecoration(
           gradient: LinearGradient(
@@ -1227,11 +1227,7 @@ class DefaultAssetPickerBuilderDelegate
     final bool gridRevert = effectiveShouldRevertGrid(context);
     return Selector<DefaultAssetPickerProvider, PathWrapper<AssetPathEntity>?>(
       selector: (_, DefaultAssetPickerProvider p) => p.currentPath,
-      builder: (
-        BuildContext context,
-        PathWrapper<AssetPathEntity>? wrapper,
-        _,
-      ) {
+      builder: (context, wrapper, _) {
         // First, we need the count of the assets.
         int totalCount = wrapper?.assetCount ?? 0;
         final Widget? specialItem;
@@ -1270,30 +1266,29 @@ class DefaultAssetPickerBuilderDelegate
         final double topPadding =
             context.topPadding + appBarPreferredSize!.height;
 
+        final textDirection = Directionality.of(context);
         Widget sliverGrid(BuildContext context, List<AssetEntity> assets) {
           return SliverGrid(
             delegate: SliverChildBuilderDelegate(
-              (_, int index) => Builder(
-                builder: (BuildContext context) {
-                  if (gridRevert) {
-                    if (index < placeholderCount) {
-                      return const SizedBox.shrink();
-                    }
-                    index -= placeholderCount;
+              (context, int index) {
+                if (gridRevert) {
+                  if (index < placeholderCount) {
+                    return const SizedBox.shrink();
                   }
-                  return MergeSemantics(
-                    child: Directionality(
-                      textDirection: Directionality.of(context),
-                      child: assetGridItemBuilder(
-                        context,
-                        index,
-                        assets,
-                        specialItem: specialItem,
-                      ),
+                  index -= placeholderCount;
+                }
+                return MergeSemantics(
+                  child: Directionality(
+                    textDirection: textDirection,
+                    child: assetGridItemBuilder(
+                      context,
+                      index,
+                      assets,
+                      specialItem: specialItem,
                     ),
-                  );
-                },
-              ),
+                  ),
+                );
+              },
               childCount: assetsGridItemCount(
                 context: context,
                 assets: assets,

lib/src/widget/builder/image_page_builder.dart

@@ -87,11 +87,9 @@ class _ImagePageBuilderState extends State<ImagePageBuilder> {
     safeSetState(() {
       _livePhotoVideoController = c;
     });
-    c
-      ..setVolume(0)
-      ..addListener(() {
-        safeSetState(() {});
-      });
+    c.addListener(() {
+      safeSetState(() {});
+    });
   }
 
   Widget _imageBuilder(BuildContext context, AssetEntity asset) {

lib/wechat_assets_picker.dart

@@ -2,6 +2,7 @@
 // Use of this source code is governed by an Apache license that can be found
 // in the LICENSE file.
 
+// ignore: unnecessary_library_name
 library wechat_assets_picker;
 
 export 'package:photo_manager/photo_manager.dart';