feat: adding portal animation for mobile devices (#404)

* feat: adding portal animation for mobile devices

* fix animation

Co-authored-by: Oscar <martinm.oscar@gmail.com>

lib/assets/assets.gen.dart

@@ -56,6 +56,10 @@ class $AssetsAnimationsGen {
   AssetGenImage get mobilePortalSpritesheet =>
       const AssetGenImage('assets/animations/mobile-portal-spritesheet.png');
 
+  /// File path: assets/animations/small-portal-animation.png
+  AssetGenImage get smallPortalAnimation =>
+      const AssetGenImage('assets/animations/small-portal-animation.png');
+
   /// File path: assets/animations/sparky_desktop.riv
   RiveGenImage get sparkyDesktop =>
       const RiveGenImage('assets/animations/sparky_desktop.riv');
@@ -79,6 +83,7 @@ class $AssetsAnimationsGen {
         dashMobile,
         desktopPortalSpritesheet,
         mobilePortalSpritesheet,
+        smallPortalAnimation,
         sparkyDesktop,
         sparkyMobile
       ];

lib/share/widgets/portal_animation.dart

@@ -10,7 +10,8 @@ import 'package:holobooth/assets/assets.dart';
 
 enum PortalMode {
   portrait,
-  landscape;
+  landscape,
+  mobile;
 
   PortalModeData get data {
     switch (this) {
@@ -20,6 +21,8 @@ enum PortalMode {
           textureSize: Vector2(650, 850),
           thumbSize: Vector2(322, 378),
           thumbOffset: Vector2(168, 104),
+          frameAmout: 90,
+          amountPerRow: 10,
         );
       case PortalMode.landscape:
         return PortalModeData(
@@ -27,6 +30,17 @@ enum PortalMode {
           textureSize: Vector2(710, 750),
           thumbSize: Vector2(498, 280),
           thumbOffset: Vector2(100, 96),
+          frameAmout: 90,
+          amountPerRow: 10,
+        );
+      case PortalMode.mobile:
+        return PortalModeData(
+          texturePath: Assets.animations.smallPortalAnimation.path,
+          textureSize: Vector2(325, 425),
+          thumbSize: Vector2(162, 190),
+          thumbOffset: Vector2(84, 52),
+          frameAmout: 72,
+          amountPerRow: 12,
         );
     }
   }
@@ -38,12 +52,16 @@ class PortalModeData {
     required this.textureSize,
     required this.thumbSize,
     required this.thumbOffset,
+    required this.frameAmout,
+    required this.amountPerRow,
   });
 
   final String texturePath;
   final Vector2 textureSize;
   final Vector2 thumbSize;
   final Vector2 thumbOffset;
+  final int frameAmout;
+  final int amountPerRow;
 }
 
 class PortalAnimation extends StatefulWidget {
@@ -102,8 +120,8 @@ class PortalGame extends FlameGame {
     final animation = await loadSpriteAnimation(
       data.texturePath,
       SpriteAnimationData.sequenced(
-        amount: 90,
-        amountPerRow: 10,
+        amount: data.frameAmout,
+        amountPerRow: data.amountPerRow,
         textureSize: data.textureSize,
         stepTime: .05,
         loop: false,

lib/share/widgets/share_body.dart

@@ -45,12 +45,12 @@ class SmallShareBody extends StatelessWidget {
     final thumbnail = context.read<ConvertBloc>().state.firstFrameProcessed;
     return Column(
       children: [
-        if (thumbnail != null && !isMobile)
+        if (thumbnail != null)
           SizedBox(
             height: 450,
             child: PortalAnimationView(
               thumbnail: thumbnail,
-              mode: PortalMode.portrait,
+              mode: isMobile ? PortalMode.mobile : PortalMode.portrait,
             ),
           ),
         const SizedBox(height: 48),
@@ -76,14 +76,15 @@ class LargeShareBody extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Expanded(
-            child: thumbnail != null && !isMobile
+            child: thumbnail != null
                 ? SizedBox(
                     width: 450,
                     height: 450,
                     child: Align(
                       child: PortalAnimationView(
                         thumbnail: thumbnail,
-                        mode: PortalMode.landscape,
+                        mode:
+                            isMobile ? PortalMode.mobile : PortalMode.landscape,
                       ),
                     ),
                   )

test/share/widgets/share_body_test.dart

@@ -56,7 +56,7 @@ void main() {
     );
 
     testWidgets(
-      'does not render PortalAnimationView on SmallShareBody if mobile',
+      'forces the small resolution animation on mobile on SmalleShareBody',
       (WidgetTester tester) async {
         tester.setSmallDisplaySize();
         when(() => platformHelper.isMobile).thenReturn(true);
@@ -65,7 +65,13 @@ void main() {
           convertBloc: convertBloc,
           downloadBloc: downloadBloc,
         );
-        expect(find.byType(PortalAnimationView), findsNothing);
+        expect(find.byType(PortalAnimationView), findsOneWidget);
+
+        final widget = tester.widget<PortalAnimationView>(
+          find.byType(PortalAnimationView),
+        );
+
+        expect(widget.mode, equals(PortalMode.mobile));
       },
     );
 
@@ -97,7 +103,7 @@ void main() {
     );
 
     testWidgets(
-      'does not render PortalAnimationView on LargeShareBody if mobile',
+      'forces the small resolution animation on mobile on LargeShareBody',
       (WidgetTester tester) async {
         tester.setLargeDisplaySize();
         when(() => platformHelper.isMobile).thenReturn(true);
@@ -107,7 +113,13 @@ void main() {
           convertBloc: convertBloc,
           downloadBloc: downloadBloc,
         );
-        expect(find.byType(PortalAnimationView), findsNothing);
+        expect(find.byType(PortalAnimationView), findsOneWidget);
+
+        final widget = tester.widget<PortalAnimationView>(
+          find.byType(PortalAnimationView),
+        );
+
+        expect(widget.mode, equals(PortalMode.mobile));
       },
     );