Merge branch 'main' into fix/landing-page-resize

lib/assets/assets.gen.dart

@@ -40,15 +40,38 @@ class $AssetsAnimationsGen {
   /// File path: assets/animations/bg_08.riv
   RiveGenImage get bg08 => const RiveGenImage('assets/animations/bg_08.riv');
 
-  /// File path: assets/animations/dash.riv
+  /// File path: assets/animations/dash_desktop.riv
-  RiveGenImage get dash => const RiveGenImage('assets/animations/dash.riv');
+  RiveGenImage get dashDesktop =>
+      const RiveGenImage('assets/animations/dash_desktop.riv');
 
-  /// File path: assets/animations/sparky.riv
+  /// File path: assets/animations/dash_mobile.riv
-  RiveGenImage get sparky => const RiveGenImage('assets/animations/sparky.riv');
+  RiveGenImage get dashMobile =>
+      const RiveGenImage('assets/animations/dash_mobile.riv');
+
+  /// File path: assets/animations/sparky_desktop.riv
+  RiveGenImage get sparkyDesktop =>
+      const RiveGenImage('assets/animations/sparky_desktop.riv');
+
+  /// File path: assets/animations/sparky_mobile.riv
+  RiveGenImage get sparkyMobile =>
+      const RiveGenImage('assets/animations/sparky_mobile.riv');
 
   /// List of all assets
-  List<RiveGenImage> get values =>
+  List<RiveGenImage> get values => [
-      [bg00, bg01, bg02, bg03, bg04, bg05, bg06, bg07, bg08, dash, sparky];
+        bg00,
+        bg01,
+        bg02,
+        bg03,
+        bg04,
+        bg05,
+        bg06,
+        bg07,
+        bg08,
+        dashDesktop,
+        dashMobile,
+        sparkyDesktop,
+        sparkyMobile
+      ];
 }
 
 class $AssetsAudioGen {

lib/rive/widgets/character_animation.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:holobooth/assets/assets.dart';
 import 'package:holobooth/in_experience_selection/in_experience_selection.dart';
 import 'package:holobooth/rive/rive.dart';
+import 'package:platform_helper/platform_helper.dart';
 import 'package:rive/rive.dart';
 
 class DashCharacterAnimation extends CharacterAnimation {
@@ -14,8 +15,11 @@ class DashCharacterAnimation extends CharacterAnimation {
     required super.glasses,
     required super.clothes,
     required super.handheldlLeft,
+    PlatformHelper? platformHelper,
   }) : super(
-          assetGenImage: Assets.animations.dash,
+          riveGenImage: (platformHelper ?? PlatformHelper()).isMobile
+              ? Assets.animations.dashMobile
+              : Assets.animations.dashDesktop,
           riveImageSize: const Size(2400, 2100),
         );
 }
@@ -28,8 +32,11 @@ class SparkyCharacterAnimation extends CharacterAnimation {
     required super.glasses,
     required super.clothes,
     required super.handheldlLeft,
+    PlatformHelper? platformHelper,
   }) : super(
-          assetGenImage: Assets.animations.sparky,
+          riveGenImage: (platformHelper ?? PlatformHelper()).isMobile
+              ? Assets.animations.sparkyMobile
+              : Assets.animations.sparkyDesktop,
           riveImageSize: const Size(2500, 2100),
         );
 }
@@ -43,7 +50,7 @@ class CharacterAnimation extends StatefulWidget {
     required this.glasses,
     required this.clothes,
     required this.handheldlLeft,
-    required this.assetGenImage,
+    required this.riveGenImage,
     required this.riveImageSize,
   });
 
@@ -62,7 +69,7 @@ class CharacterAnimation extends StatefulWidget {
   final HandheldlLeft handheldlLeft;
 
   /// The character's [RiveGenImage].
-  final RiveGenImage assetGenImage;
+  final RiveGenImage riveGenImage;
 
   /// The size of the character's [RiveGenImage].
   final Size riveImageSize;
@@ -359,7 +366,7 @@ class CharacterAnimationState<T extends CharacterAnimation> extends State<T>
         scale: _scale,
         alignment: const Alignment(0, 5 / 6),
         duration: const Duration(milliseconds: 400),
-        child: widget.assetGenImage.rive(
+        child: widget.riveGenImage.rive(
           onInit: onRiveInit,
           fit: BoxFit.cover,
         ),

test/photo_booth/widgets/photobooth_character_test.dart

@@ -26,11 +26,11 @@ void main() {
   group('PhotoboothCharacter', () {
     late InExperienceSelectionBloc inExperienceSelectionBloc;
     late AvatarDetectorBloc avatarDetectorBloc;
+
     setUp(() {
       inExperienceSelectionBloc = _MockInExperienceSelectionBloc();
       when(() => inExperienceSelectionBloc.state)
           .thenReturn(InExperienceSelectionState());
-
       avatarDetectorBloc = _MockAvatarDetectorBloc();
       when(() => avatarDetectorBloc.state).thenReturn(AvatarDetectorState());
     });
@@ -40,6 +40,7 @@ void main() {
       (WidgetTester tester) async {
         when(() => inExperienceSelectionBloc.state)
             .thenReturn(InExperienceSelectionState());
+
         await tester.pumpSubject(
           PhotoboothCharacter(),
           inExperienceSelectionBloc: inExperienceSelectionBloc,
@@ -59,6 +60,7 @@ void main() {
         when(() => inExperienceSelectionBloc.state).thenReturn(
           InExperienceSelectionState(character: Character.sparky),
         );
+
         await tester.pumpSubject(
           PhotoboothCharacter(),
           inExperienceSelectionBloc: inExperienceSelectionBloc,

test/rive/widgets/character_animation_test.dart

@@ -6,18 +6,130 @@ import 'package:holobooth/assets/assets.dart';
 import 'package:holobooth/in_experience_selection/in_experience_selection.dart';
 import 'package:holobooth/rive/rive.dart';
 import 'package:mocktail/mocktail.dart';
+import 'package:platform_helper/platform_helper.dart';
+
+import '../../helpers/helpers.dart';
 
 class _MockLeftEyeGeometry extends Mock implements LeftEyeGeometry {}
 
 class _MockRightEyeGeometry extends Mock implements RightEyeGeometry {}
 
+class _MockPlatformHelper extends Mock implements PlatformHelper {}
+
+Finder _findCharacterAnimation<T extends CharacterAnimation>(
+  String path,
+) =>
+    find.byWidgetPredicate(
+      (widget) => widget is T && widget.riveGenImage.path == path,
+    );
+
 void main() {
+  late PlatformHelper platformHelper;
+
+  setUp(() => platformHelper = _MockPlatformHelper());
+
+  group('DashCharacterAnimation', () {
+    testWidgets(
+      'renders mobile asset',
+      (WidgetTester tester) async {
+        when(() => platformHelper.isMobile).thenReturn(true);
+
+        await tester.pumpApp(
+          DashCharacterAnimation(
+            avatar: Avatar.zero,
+            hat: Hats.none,
+            glasses: Glasses.none,
+            clothes: Clothes.none,
+            handheldlLeft: HandheldlLeft.none,
+            platformHelper: platformHelper,
+          ),
+        );
+
+        final widgetFinder =
+            _findCharacterAnimation(Assets.animations.dashMobile.path);
+
+        expect(widgetFinder, findsOneWidget);
+      },
+    );
+
+    testWidgets(
+      'renders desktop asset',
+      (WidgetTester tester) async {
+        when(() => platformHelper.isMobile).thenReturn(false);
+
+        await tester.pumpApp(
+          DashCharacterAnimation(
+            avatar: Avatar.zero,
+            hat: Hats.none,
+            glasses: Glasses.none,
+            clothes: Clothes.none,
+            handheldlLeft: HandheldlLeft.none,
+            platformHelper: platformHelper,
+          ),
+        );
+
+        final widgetFinder =
+            _findCharacterAnimation(Assets.animations.dashDesktop.path);
+
+        expect(widgetFinder, findsOneWidget);
+      },
+    );
+  });
+
+  group('SparkyCharacterAnimation', () {
+    testWidgets(
+      'renders mobile asset',
+      (WidgetTester tester) async {
+        when(() => platformHelper.isMobile).thenReturn(true);
+
+        await tester.pumpApp(
+          SparkyCharacterAnimation(
+            avatar: Avatar.zero,
+            hat: Hats.none,
+            glasses: Glasses.none,
+            clothes: Clothes.none,
+            handheldlLeft: HandheldlLeft.none,
+            platformHelper: platformHelper,
+          ),
+        );
+
+        final widgetFinder =
+            _findCharacterAnimation(Assets.animations.sparkyMobile.path);
+
+        expect(widgetFinder, findsOneWidget);
+      },
+    );
+
+    testWidgets(
+      'renders desktop asset',
+      (WidgetTester tester) async {
+        when(() => platformHelper.isMobile).thenReturn(false);
+
+        await tester.pumpApp(
+          SparkyCharacterAnimation(
+            avatar: Avatar.zero,
+            hat: Hats.none,
+            glasses: Glasses.none,
+            clothes: Clothes.none,
+            handheldlLeft: HandheldlLeft.none,
+            platformHelper: platformHelper,
+          ),
+        );
+
+        final widgetFinder =
+            _findCharacterAnimation(Assets.animations.sparkyDesktop.path);
+
+        expect(widgetFinder, findsOneWidget);
+      },
+    );
+  });
+
   group('CharacterAnimation', () {
-    late RiveGenImage assetGenImage;
+    late RiveGenImage riveGenImage;
     late Size riveImageSize;
 
     setUp(() {
-      assetGenImage = Assets.animations.dash;
+      riveGenImage = Assets.animations.dashMobile;
       riveImageSize = Size(100, 100);
     });
 
@@ -45,7 +157,7 @@ void main() {
                   glasses: Glasses.none,
                   clothes: Clothes.none,
                   handheldlLeft: HandheldlLeft.none,
-                  assetGenImage: assetGenImage,
+                  riveGenImage: riveGenImage,
                   riveImageSize: riveImageSize,
                 );
               },
@@ -127,7 +239,7 @@ void main() {
                   glasses: Glasses.none,
                   clothes: Clothes.none,
                   handheldlLeft: HandheldlLeft.none,
-                  assetGenImage: assetGenImage,
+                  riveGenImage: riveGenImage,
                   riveImageSize: riveImageSize,
                 );
               },
@@ -194,7 +306,7 @@ void main() {
                   glasses: Glasses.none,
                   clothes: Clothes.none,
                   handheldlLeft: HandheldlLeft.none,
-                  assetGenImage: assetGenImage,
+                  riveGenImage: riveGenImage,
                   riveImageSize: riveImageSize,
                 );
               },
@@ -256,7 +368,7 @@ void main() {
                   glasses: Glasses.none,
                   clothes: Clothes.none,
                   handheldlLeft: HandheldlLeft.none,
-                  assetGenImage: assetGenImage,
+                  riveGenImage: riveGenImage,
                   riveImageSize: riveImageSize,
                 );
               },
@@ -350,7 +462,7 @@ void main() {
                     glasses: Glasses.none,
                     clothes: Clothes.none,
                     handheldlLeft: HandheldlLeft.none,
-                    assetGenImage: assetGenImage,
+                    riveGenImage: riveGenImage,
                     riveImageSize: riveImageSize,
                   );
                 },
@@ -417,7 +529,7 @@ void main() {
                     glasses: Glasses.none,
                     clothes: Clothes.none,
                     handheldlLeft: HandheldlLeft.none,
-                    assetGenImage: assetGenImage,
+                    riveGenImage: riveGenImage,
                     riveImageSize: riveImageSize,
                   );
                 },
@@ -520,7 +632,7 @@ void main() {
                     glasses: Glasses.none,
                     clothes: Clothes.none,
                     handheldlLeft: HandheldlLeft.none,
-                    assetGenImage: assetGenImage,
+                    riveGenImage: riveGenImage,
                     riveImageSize: riveImageSize,
                   );
                 },
@@ -586,7 +698,7 @@ void main() {
                     glasses: Glasses.none,
                     clothes: Clothes.none,
                     handheldlLeft: HandheldlLeft.none,
-                    assetGenImage: assetGenImage,
+                    riveGenImage: riveGenImage,
                     riveImageSize: riveImageSize,
                   );
                 },
@@ -668,7 +780,7 @@ void main() {
                   glasses: Glasses.none,
                   clothes: Clothes.none,
                   handheldlLeft: HandheldlLeft.none,
-                  assetGenImage: assetGenImage,
+                  riveGenImage: riveGenImage,
                   riveImageSize: riveImageSize,
                 );
               },
@@ -729,7 +841,7 @@ void main() {
                   glasses: Glasses.none,
                   clothes: Clothes.none,
                   handheldlLeft: HandheldlLeft.none,
-                  assetGenImage: assetGenImage,
+                  riveGenImage: riveGenImage,
                   riveImageSize: riveImageSize,
                 );
               },
@@ -781,7 +893,7 @@ void main() {
                 glasses: Glasses.none,
                 clothes: Clothes.none,
                 handheldlLeft: HandheldlLeft.none,
-                assetGenImage: assetGenImage,
+                riveGenImage: riveGenImage,
                 riveImageSize: riveImageSize,
               );
             },
@@ -818,7 +930,7 @@ void main() {
                 glasses: glasses,
                 clothes: Clothes.none,
                 handheldlLeft: HandheldlLeft.none,
-                assetGenImage: assetGenImage,
+                riveGenImage: riveGenImage,
                 riveImageSize: riveImageSize,
               );
             },
@@ -855,7 +967,7 @@ void main() {
                 glasses: Glasses.none,
                 clothes: clothes,
                 handheldlLeft: HandheldlLeft.none,
-                assetGenImage: assetGenImage,
+                riveGenImage: riveGenImage,
                 riveImageSize: riveImageSize,
               );
             },
@@ -892,7 +1004,7 @@ void main() {
                 glasses: Glasses.none,
                 clothes: Clothes.none,
                 handheldlLeft: handheldLeft,
-                assetGenImage: assetGenImage,
+                riveGenImage: riveGenImage,
                 riveImageSize: riveImageSize,
               );
             },

web/index.html

@@ -26,10 +26,8 @@
 
     <!-- Favicon -->
     <link rel="icon" type="image/png" href="favicon.png" />
-
+    
     <link rel="preload" crossorigin="anonymous" as="fetch" href="assets/assets/animations/background.riv" />
-    <link rel="preload" crossorigin="anonymous" as="fetch" href="assets/assets/animations/dash.riv" />
-    <link rel="preload" crossorigin="anonymous" as="fetch" href="assets/assets/animations/sparky.riv" />
     <link rel="preload" crossorigin="anonymous" as="fetch" href="assets/assets/images/holobooth_avatar.png" />
 
     <title>Holobooth</title>