settings [nfc]: Centralize logic for checking device animation settings

This is only used with image emojis, for now, but it'll also be
useful for #1936, suppressing image animations in image previews.

Related: #1936

Author: chrisbobbe

lib/widgets/emoji.dart

@@ -13,7 +13,7 @@ class EmojiWidget extends StatelessWidget {
     required this.squareDimension,
     this.squareDimensionScaler = TextScaler.noScaling,
     this.imagePlaceholderStyle = EmojiImagePlaceholderStyle.square,
-    this.neverAnimateImage = false,
+    this.imageAnimationMode = ImageAnimationMode.animateConditionally,
     this.buildCustomTextEmoji,
   });
 
@@ -35,11 +35,12 @@ class EmojiWidget extends StatelessWidget {
 
   final EmojiImagePlaceholderStyle imagePlaceholderStyle;
 
-  /// Whether to show an animated emoji in its still (non-animated) variant
-  /// only, even if device settings permit animation.
+  /// Whether to show an animated emoji in its still or animated version.
   ///
-  /// Defaults to false.
-  final bool neverAnimateImage;
+  /// Ignored except for animated image emoji.
+  ///
+  /// Defaults to [ImageAnimationMode.animateConditionally].
+  final ImageAnimationMode imageAnimationMode;
 
   /// An optional callback to specify a custom plain-text emoji style.
   ///
@@ -66,7 +67,7 @@ class EmojiWidget extends StatelessWidget {
           EmojiImagePlaceholderStyle.nothing => SizedBox.shrink(),
           EmojiImagePlaceholderStyle.text => _buildTextEmoji(),
         },
-        neverAnimate: neverAnimateImage),
+        animationMode: imageAnimationMode),
       UnicodeEmojiDisplay() => UnicodeEmojiWidget(
         emojiDisplay: emojiDisplay,
         size: squareDimension,
@@ -185,7 +186,7 @@ class ImageEmojiWidget extends StatelessWidget {
     required this.size,
     this.textScaler = TextScaler.noScaling,
     this.errorBuilder,
-    this.neverAnimate = false,
+    this.animationMode = ImageAnimationMode.animateConditionally,
   });
 
   final ImageEmojiDisplay emojiDisplay;
@@ -202,30 +203,20 @@ class ImageEmojiWidget extends StatelessWidget {
 
   final ImageErrorWidgetBuilder? errorBuilder;
 
-  /// Whether to show an animated emoji in its still (non-animated) variant
-  /// only, even if device settings permit animation.
+  /// Whether to show an animated emoji in its still or animated version.
+  ///
+  /// Ignored for non-animated emoji.
   ///
-  /// Defaults to false.
-  final bool neverAnimate;
+  /// Defaults to [ImageAnimationMode.animateConditionally].
+  final ImageAnimationMode animationMode;
 
   @override
   Widget build(BuildContext context) {
-    final doNotAnimate =
-      neverAnimate
-      // From reading code, this doesn't actually get set on iOS:
-      //   https://github.com/zulip/zulip-flutter/pull/410#discussion_r1408522293
-      || MediaQuery.disableAnimationsOf(context)
-      || (defaultTargetPlatform == TargetPlatform.iOS
-        // TODO(#1924) On iOS 17+ (new in 2023), there's a more closely
-        //   relevant setting than "reduce motion". It's called "auto-play
-        //   animated images"; we should use that once Flutter exposes it.
-        && WidgetsBinding.instance.platformDispatcher.accessibilityFeatures.reduceMotion);
-
     final size = textScaler.scale(this.size);
 
-    final resolvedUrl = doNotAnimate
-      ? (emojiDisplay.resolvedStillUrl ?? emojiDisplay.resolvedUrl)
-      : emojiDisplay.resolvedUrl;
+    final resolvedUrl = animationMode.resolve(context)
+      ? emojiDisplay.resolvedUrl
+      : (emojiDisplay.resolvedStillUrl ?? emojiDisplay.resolvedUrl);
 
     return RealmContentNetworkImage(
       width: size, height: size,

lib/widgets/image.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 
 import '../api/core.dart';
@@ -107,3 +108,44 @@ class RealmContentNetworkImage extends StatelessWidget {
     );
   }
 }
+
+/// Whether to show an animated image in its still or animated version.
+///
+/// Use [resolve] to evaluate this for the given [BuildContext],
+/// which reads device-setting data for [animateConditionally].
+enum ImageAnimationMode {
+  /// Always show the animated version.
+  animateAlways,
+
+  /// Always show the still version.
+  animateNever,
+
+  /// Show the animated version
+  /// just if animations aren't disabled in device settings.
+  animateConditionally,
+  ;
+
+  /// True if the image should be animated, false if it should be still.
+  bool resolve(BuildContext context) {
+    switch (this) {
+      case animateAlways: return true;
+      case animateNever: return false;
+      case animateConditionally:
+        // From reading code, this doesn't actually get set on iOS:
+        //   https://github.com/zulip/zulip-flutter/pull/410#discussion_r1408522293
+        if (MediaQuery.disableAnimationsOf(context)) return false;
+
+        if (
+          defaultTargetPlatform == TargetPlatform.iOS
+          // TODO(#1924) On iOS 17+ (new in 2023), there's a more closely
+          //   relevant setting than "reduce motion". It's called "auto-play
+          //   animated images"; we should use that once Flutter exposes it.
+          && WidgetsBinding.instance.platformDispatcher.accessibilityFeatures.reduceMotion
+        ) {
+          return false;
+        }
+
+        return true;
+    }
+  }
+}

lib/widgets/profile.dart

@@ -15,6 +15,7 @@ import 'app_bar.dart';
 import 'button.dart';
 import 'content.dart';
 import 'icons.dart';
+import 'image.dart';
 import 'message_list.dart';
 import 'page.dart';
 import 'remote_settings.dart';
@@ -87,7 +88,7 @@ class ProfilePage extends StatelessWidget {
               userId: userId,
               fontSize: nameStyle.fontSize!,
               textScaler: MediaQuery.textScalerOf(context),
-              neverAnimate: false,
+              animationMode: ImageAnimationMode.animateConditionally,
             ),
         ]),
         textAlign: TextAlign.center,
@@ -267,7 +268,7 @@ class _SetStatusButton extends StatelessWidget {
           fontSize: 16,
           textScaler: MediaQuery.textScalerOf(context),
           position: StatusEmojiPosition.before,
-          neverAnimate: false,
+          animationMode: ImageAnimationMode.animateConditionally,
         ),
         userStatus.text == null
           ? TextSpan(text: zulipLocalizations.noStatusText,

lib/widgets/set_status.dart

@@ -10,6 +10,7 @@ import '../log.dart';
 import 'app_bar.dart';
 import 'emoji_reaction.dart';
 import 'icons.dart';
+import 'image.dart';
 import 'inset_shadow.dart';
 import 'page.dart';
 import 'store.dart';
@@ -214,7 +215,11 @@ class _SetStatusPageState extends State<SetStatusPage> {
                         final emoji = change.emoji.or(oldStatus.emoji);
                         return emoji == null
                           ? const Icon(ZulipIcons.smile, size: 24)
-                          : UserStatusEmoji(emoji: emoji, size: 24, neverAnimate: false);
+                          : UserStatusEmoji(
+                              emoji: emoji,
+                              size: 24,
+                              animationMode: ImageAnimationMode.animateConditionally,
+                            );
                       }),
                     Icon(ZulipIcons.chevron_down, size: 16),
                   ]),

lib/widgets/user.dart

@@ -297,24 +297,24 @@ class _PresenceCircleState extends State<PresenceCircle> with PerAccountStoreAwa
 /// widgets.
 /// When there is no status emoji to be shown, the padding will be omitted too.
 ///
-/// Use [neverAnimate] to forcefully disable the animation for animated emojis.
-/// Defaults to true.
+/// Use [animationMode] to control whether an animated emoji is shown
+/// in its still or animated version.
 class UserStatusEmoji extends StatelessWidget {
   const UserStatusEmoji({
     super.key,
     this.userId,
     this.emoji,
     required this.size,
     this.padding = EdgeInsets.zero,
-    this.neverAnimate = true,
+    this.animationMode = ImageAnimationMode.animateNever,
   }) : assert((userId == null) != (emoji == null),
               'Only one of the userId or emoji should be provided.');
 
   final int? userId;
   final StatusEmoji? emoji;
   final double size;
   final EdgeInsetsGeometry padding;
-  final bool neverAnimate;
+  final ImageAnimationMode animationMode;
 
   static const double _spanPadding = 4;
 
@@ -329,7 +329,7 @@ class UserStatusEmoji extends StatelessWidget {
     required double fontSize,
     required TextScaler textScaler,
     StatusEmojiPosition position = StatusEmojiPosition.after,
-    bool neverAnimate = true,
+    ImageAnimationMode animationMode = ImageAnimationMode.animateNever,
   }) {
     final (double paddingStart, double paddingEnd) = switch (position) {
       StatusEmojiPosition.before => (0,            _spanPadding),
@@ -340,7 +340,7 @@ class UserStatusEmoji extends StatelessWidget {
       alignment: PlaceholderAlignment.middle,
       child: UserStatusEmoji(userId: userId, emoji: emoji, size: size,
         padding: EdgeInsetsDirectional.only(start: paddingStart, end: paddingEnd),
-        neverAnimate: neverAnimate));
+        animationMode: animationMode));
   }
 
   @override
@@ -363,7 +363,7 @@ class UserStatusEmoji extends StatelessWidget {
       child: EmojiWidget(
         emojiDisplay: emojiDisplay,
         squareDimension: size,
-        neverAnimateImage: neverAnimate,
+        imageAnimationMode: animationMode,
         buildCustomTextEmoji: () =>
           // Invoked when an image emoji's URL didn't parse; see
           // EmojiStore.emojiDisplayFor. Don't show text, just an empty square.

test/widgets/autocomplete_test.dart

@@ -16,6 +16,7 @@ import 'package:zulip/model/store.dart';
 import 'package:zulip/model/typing_status.dart';
 import 'package:zulip/widgets/autocomplete.dart';
 import 'package:zulip/widgets/compose_box.dart';
+import 'package:zulip/widgets/image.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/user.dart';
 
@@ -212,7 +213,7 @@ void main() {
           matching: find.byType(UserStatusEmoji));
         check(statusEmojiFinder).findsOne();
         check(tester.widget<UserStatusEmoji>(statusEmojiFinder)
-          .neverAnimate).isTrue();
+          .animationMode).equals(ImageAnimationMode.animateNever);
         check(find.ancestor(of: statusEmojiFinder,
           matching: find.byType(MentionAutocompleteItem))).findsOne();
       }

test/widgets/message_list_test.dart

@@ -1870,7 +1870,7 @@ void main() {
           matching: find.byType(UserStatusEmoji));
         check(statusEmojiFinder).findsOne();
         check(tester.widget<UserStatusEmoji>(statusEmojiFinder)
-          .neverAnimate).isTrue();
+          .animationMode).equals(ImageAnimationMode.animateNever);
         check(find.ancestor(of: statusEmojiFinder,
           matching: find.byType(SenderRow))).findsOne();
       }

test/widgets/new_dm_sheet_test.dart

@@ -9,6 +9,7 @@ import 'package:zulip/widgets/app_bar.dart';
 import 'package:zulip/widgets/compose_box.dart';
 import 'package:zulip/widgets/home.dart';
 import 'package:zulip/widgets/icons.dart';
+import 'package:zulip/widgets/image.dart';
 import 'package:zulip/widgets/new_dm_sheet.dart';
 import 'package:zulip/widgets/store.dart';
 import 'package:zulip/widgets/user.dart';
@@ -344,7 +345,7 @@ void main() {
       final tileStatusEmojiFinder = find.descendant(of: findUserTile(user),
         matching: statusEmojiFinder);
       check(tester.widget<UserStatusEmoji>(tileStatusEmojiFinder)
-        .neverAnimate).isTrue();
+        .animationMode).equals(ImageAnimationMode.animateNever);
       check(tileStatusEmojiFinder).findsOne();
     }
 
@@ -354,7 +355,7 @@ void main() {
       final chipStatusEmojiFinder = find.descendant(of: findUserChip(user),
         matching: statusEmojiFinder);
       check(tester.widget<UserStatusEmoji>(chipStatusEmojiFinder)
-        .neverAnimate).isTrue();
+        .animationMode).equals(ImageAnimationMode.animateNever);
       check(chipStatusEmojiFinder).findsOne();
     }
 

test/widgets/profile_test.dart

@@ -469,7 +469,7 @@ void main() {
         matching: find.byType(UserStatusEmoji));
       check(statusEmojiFinder).findsOne();
       check(tester.widget<UserStatusEmoji>(statusEmojiFinder)
-        .neverAnimate).isFalse();
+        .animationMode).equals(ImageAnimationMode.animateConditionally);
       check(find.text('Busy')).findsOne();
     });
 
@@ -495,7 +495,7 @@ void main() {
         check(statusButtonFinder).findsOne();
         check(statusEmojiFinder).findsOne();
         check(tester.widget<UserStatusEmoji>(statusEmojiFinder)
-          .neverAnimate).isFalse();
+          .animationMode).equals(ImageAnimationMode.animateConditionally);
         check(statusTextFinder).findsOne();
 
         check(find.descendant(of: statusButtonFinder,

test/widgets/recent_dm_conversations_test.dart

@@ -10,6 +10,7 @@ import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/widgets/home.dart';
 import 'package:zulip/widgets/icons.dart';
+import 'package:zulip/widgets/image.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/new_dm_sheet.dart';
 import 'package:zulip/widgets/page.dart';
@@ -189,7 +190,7 @@ void main() {
           matching: find.byType(UserStatusEmoji));
         check(statusEmojiFinder).findsOne();
         check(tester.widget<UserStatusEmoji>(statusEmojiFinder)
-          .neverAnimate).isTrue();
+          .animationMode).equals(ImageAnimationMode.animateNever);
         check(find.ancestor(of: statusEmojiFinder,
           matching: find.byType(RecentDmConversationsItem))).findsOne();
       }