feat(auth): サインイン画面の背景を動画に変更

app/ios/Podfile.lock

@@ -124,6 +124,9 @@ PODS:
   - shared_preferences_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
+  - video_player_avfoundation (0.0.1):
+    - Flutter
+    - FlutterMacOS
 
 DEPENDENCIES:
   - firebase_analytics (from `.symlinks/plugins/firebase_analytics/ios`)
@@ -134,6 +137,7 @@ DEPENDENCIES:
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
   - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
   - shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`)
+  - video_player_avfoundation (from `.symlinks/plugins/video_player_avfoundation/darwin`)
 
 SPEC REPOS:
   trunk:
@@ -168,6 +172,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/path_provider_foundation/darwin"
   shared_preferences_foundation:
     :path: ".symlinks/plugins/shared_preferences_foundation/darwin"
+  video_player_avfoundation:
+    :path: ".symlinks/plugins/video_player_avfoundation/darwin"
 
 SPEC CHECKSUMS:
   Firebase: 26b040b20866a55f55eb3611b9fcf3ae64816b86
@@ -191,6 +197,7 @@ SPEC CHECKSUMS:
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   RecaptchaInterop: 7d1a4a01a6b2cb1610a47ef3f85f0c411434cb21
   shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
+  video_player_avfoundation: 7c6c11d8470e1675df7397027218274b6d2360b3
 
 PODFILE CHECKSUM: 6150a9e74fbdb1f914e34d1010fcbe9acdaf34db
 

catalog/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -6,7 +6,9 @@ import FlutterMacOS
 import Foundation
 
 import dynamic_color
+import video_player_avfoundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   DynamicColorPlugin.register(with: registry.registrar(forPlugin: "DynamicColorPlugin"))
+  FVPVideoPlayerPlugin.register(with: registry.registrar(forPlugin: "FVPVideoPlayerPlugin"))
 }

feature/auth/.flutter-plugins

@@ -0,0 +1,5 @@
+# This is a generated file; do not edit or check into version control.
+video_player=/Users/tatsutakein/.pub-cache/hosted/pub.dev/video_player-2.8.7/
+video_player_android=/Users/tatsutakein/.pub-cache/hosted/pub.dev/video_player_android-2.5.0/
+video_player_avfoundation=/Users/tatsutakein/.pub-cache/hosted/pub.dev/video_player_avfoundation-2.6.1/
+video_player_web=/Users/tatsutakein/.pub-cache/hosted/pub.dev/video_player_web-2.3.1/

feature/auth/.flutter-plugins-dependencies

@@ -0,0 +1 @@
+{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"video_player_avfoundation","path":"/Users/tatsutakein/.pub-cache/hosted/pub.dev/video_player_avfoundation-2.6.1/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"android":[{"name":"video_player_android","path":"/Users/tatsutakein/.pub-cache/hosted/pub.dev/video_player_android-2.5.0/","native_build":true,"dependencies":[]}],"macos":[{"name":"video_player_avfoundation","path":"/Users/tatsutakein/.pub-cache/hosted/pub.dev/video_player_avfoundation-2.6.1/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"linux":[],"windows":[],"web":[{"name":"video_player_web","path":"/Users/tatsutakein/.pub-cache/hosted/pub.dev/video_player_web-2.3.1/","dependencies":[]}]},"dependencyGraph":[{"name":"video_player","dependencies":["video_player_android","video_player_avfoundation","video_player_web"]},{"name":"video_player_android","dependencies":[]},{"name":"video_player_avfoundation","dependencies":[]},{"name":"video_player_web","dependencies":[]}],"date_created":"2024-06-15 00:29:59.394836","version":"3.23.0-0.1.pre","swift_package_manager_enabled":false}

feature/auth/lib/src/ui/page/auth/auth_page.dart

@@ -1,5 +1,7 @@
-import 'package:core_designsystem/component.dart';
+import 'dart:ui';
+
 import 'package:feature_auth/src/ui/page/auth/components/sign_in_form.dart';
+import 'package:feature_auth/src/ui/page/auth/components/video_background_view.dart';
 import 'package:flutter/material.dart';
 
 /// 認証ページ
@@ -21,12 +23,28 @@ final class AuthPage extends StatelessWidget {
           focus.unfocus();
         }
       },
-      child: AsisScaffold(
-        appBar: const AsisAppBar(
-          title: Text('サインイン'),
+      child: Scaffold(
+        extendBodyBehindAppBar: true,
+        appBar: AppBar(
+          title: const Text('サインイン'),
+          centerTitle: true,
+          backgroundColor: Colors.transparent,
+          elevation: 0,
         ),
-        body: SignInForm(
-          onLoginSuccess: _onLoginSuccess,
+        body: Stack(
+          children: [
+            ImageFiltered(
+              imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
+              child: const HeroBackground(),
+            ),
+            Positioned.fill(
+              child: SafeArea(
+                child: SignInForm(
+                  onLoginSuccess: _onLoginSuccess,
+                ),
+              ),
+            ),
+          ],
         ),
       ),
     );

feature/auth/lib/src/ui/page/auth/components/video_background_view.dart

@@ -0,0 +1,58 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:video_player/video_player.dart';
+
+final class HeroBackground extends HookWidget {
+  const HeroBackground({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final controller = useMemoized(
+      () => VideoPlayerController.asset(
+        'assets/videos/hero.mp4',
+        package: 'feature_auth',
+      ),
+    );
+    final isInitialized = useState(false);
+
+    useEffect(
+      () {
+        controller.addListener(() {
+          if (controller.value.isInitialized) {
+            isInitialized.value = true;
+          }
+        });
+
+        unawaited(
+          Future<void>(
+            () async {
+              await controller.setLooping(true);
+              await controller.initialize().then((_) {
+                isInitialized.value = true;
+                controller.play();
+              });
+            },
+          ),
+        );
+
+        return controller.dispose;
+      },
+      const [],
+    );
+
+    return SizedBox.expand(
+      child: FittedBox(
+        fit: BoxFit.cover,
+        child: isInitialized.value
+            ? SizedBox(
+                width: controller.value.size.width,
+                height: controller.value.size.height,
+                child: VideoPlayer(controller),
+              )
+            : const Center(child: CircularProgressIndicator()),
+      ),
+    );
+  }
+}