refactor(mobile): Use hooks to manage Chewie controller for video (#7008)

* video loading delayed

* Chewie controller implemented in hook

* fixing look and feel

* Finalizing delay and animations

* Fixes issue with immersive mode showing immediately in videos

* format fix

* Fixes bug where video controls would hide immediately after showing while playing and reverts hide controls timer to 5 seconds

* Fixed rebase issues

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

mobile/lib/shared/models/asset.dart

@@ -171,6 +171,11 @@ class Asset {
 
   int? stackCount;
 
+  /// Aspect ratio of the asset
+  @ignore
+  double? get aspectRatio =>
+      width == null || height == null ? 0 : width! / height!;
+
   /// `true` if this [Asset] is present on the device
   @ignore
   bool get isLocal => localId != null;

mobile/lib/shared/ui/delayed_loading_indicator.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+
+class DelayedLoadingIndicator extends StatelessWidget {
+  /// The delay to avoid showing the loading indicator
+  final Duration delay;
+
+  /// Defaults to using the [ImmichLoadingIndicator]
+  final Widget? child;
+
+  /// An optional fade in duration to animate the loading
+  final Duration? fadeInDuration;
+
+  const DelayedLoadingIndicator({
+    super.key,
+    this.delay = const Duration(seconds: 3),
+    this.child,
+    this.fadeInDuration,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedSwitcher(
+      duration: fadeInDuration ?? Duration.zero,
+      child: FutureBuilder(
+        future: Future.delayed(delay),
+        builder: (context, snapshot) {
+          if (snapshot.connectionState == ConnectionState.done) {
+            return child ??
+                const ImmichLoadingIndicator(
+                  key: ValueKey('loading'),
+                );
+          }
+
+          return Container(key: const ValueKey('hiding'));
+        },
+      ),
+    );
+  }
+}

mobile/lib/shared/views/immich_loading_overlay.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+import 'package:immich_mobile/shared/ui/delayed_loading_indicator.dart';
 
 final _loadingEntry = OverlayEntry(
   builder: (context) => SizedBox.square(
@@ -9,7 +9,12 @@ final _loadingEntry = OverlayEntry(
     child: DecoratedBox(
       decoration:
           BoxDecoration(color: context.colorScheme.surface.withAlpha(200)),
-      child: const Center(child: ImmichLoadingIndicator()),
+      child: const Center(
+        child: DelayedLoadingIndicator(
+          delay: Duration(seconds: 1),
+          fadeInDuration: Duration(milliseconds: 400),
+        ),
+      ),
     ),
   ),
 );
@@ -27,19 +32,19 @@ class _LoadingOverlay extends Hook<ValueNotifier<bool>> {
 
 class _LoadingOverlayState
     extends HookState<ValueNotifier<bool>, _LoadingOverlay> {
-  late final _isProcessing = ValueNotifier(false)..addListener(_listener);
-  OverlayEntry? overlayEntry;
+  late final _isLoading = ValueNotifier(false)..addListener(_listener);
+  OverlayEntry? _loadingOverlay;
 
   void _listener() {
     setState(() {
       WidgetsBinding.instance.addPostFrameCallback((_) {
-        if (_isProcessing.value) {
-          overlayEntry?.remove();
-          overlayEntry = _loadingEntry;
+        if (_isLoading.value) {
+          _loadingOverlay?.remove();
+          _loadingOverlay = _loadingEntry;
           Overlay.of(context).insert(_loadingEntry);
         } else {
-          overlayEntry?.remove();
-          overlayEntry = null;
+          _loadingOverlay?.remove();
+          _loadingOverlay = null;
         }
       });
     });
@@ -47,17 +52,17 @@ class _LoadingOverlayState
 
   @override
   ValueNotifier<bool> build(BuildContext context) {
-    return _isProcessing;
+    return _isLoading;
   }
 
   @override
   void dispose() {
-    _isProcessing.dispose();
+    _isLoading.dispose();
     super.dispose();
   }
 
   @override
-  Object? get debugValue => _isProcessing.value;
+  Object? get debugValue => _isLoading.value;
 
   @override
   String get debugLabel => 'useProcessingOverlay<>';