Sync preview (#26)

* Sync preview * Add pagination in home media list * Add pagination in home media list
canopas · Mar 27, 2024 · ff5aff9 · ff5aff9
1 parent 2ad7957
commit ff5aff9
Show file tree

Hide file tree

Showing 32 changed files with 1,211 additions and 518 deletions.
diff --git a/.idea/libraries/Dart_Packages.xml b/.idea/libraries/Dart_Packages.xml
diff --git a/.idea/libraries/Flutter_Plugins.xml b/.idea/libraries/Flutter_Plugins.xml
diff --git a/app/lib/components/app_page.dart b/app/lib/components/app_page.dart
@@ -9,8 +9,11 @@ class AppPage extends StatelessWidget {
   final Widget? leading;
   final Widget? floatingActionButton;
   final Widget? body;
+  final Widget Function(BuildContext context)? bodyBuilder;
   final bool automaticallyImplyLeading;
   final bool? resizeToAvoidBottomInset;
+  final Color? backgroundColor;
+  final Color? barBackgroundColor;
 
   const AppPage({
     super.key,
@@ -21,7 +24,10 @@ class AppPage extends StatelessWidget {
     this.body,
     this.floatingActionButton,
     this.resizeToAvoidBottomInset,
+    this.bodyBuilder,
     this.automaticallyImplyLeading = true,
+    this.barBackgroundColor,
+    this.backgroundColor,
   });
 
   @override
@@ -39,6 +45,7 @@ class AppPage extends StatelessWidget {
                 leading == null
             ? null
             : CupertinoNavigationBar(
+                backgroundColor: barBackgroundColor,
                 leading: leading,
                 middle: titleWidget ?? _title(context),
                 border: null,
@@ -56,10 +63,15 @@ class AppPage extends StatelessWidget {
                     : null,
               ),
         resizeToAvoidBottomInset: resizeToAvoidBottomInset ?? true,
+        backgroundColor: backgroundColor,
         child: Stack(
           alignment: Alignment.bottomRight,
           children: [
-            body ?? const SizedBox(),
+            body ??
+                Builder(
+                  builder: (context) =>
+                      bodyBuilder?.call(context) ?? const SizedBox(),
+                ),
             SafeArea(
               child: Padding(
                 padding: const EdgeInsets.only(right: 16, bottom: 16),
@@ -76,12 +88,18 @@ class AppPage extends StatelessWidget {
                 leading == null
             ? null
             : AppBar(
+                backgroundColor: barBackgroundColor,
                 title: titleWidget ?? _title(context),
                 actions: actions,
                 leading: leading,
                 automaticallyImplyLeading: automaticallyImplyLeading,
               ),
-        body: body,
+        body: body ??
+            Builder(
+              builder: (context) =>
+                  bodyBuilder?.call(context) ?? const SizedBox(),
+            ),
+        backgroundColor: backgroundColor,
         floatingActionButton: floatingActionButton,
         resizeToAvoidBottomInset: resizeToAvoidBottomInset,
       );
@@ -92,3 +110,46 @@ class AppPage extends StatelessWidget {
         overflow: TextOverflow.ellipsis,
       );
 }
+
+class AdaptiveAppBar extends StatelessWidget {
+  final String text;
+  final Widget? leading;
+  final List<Widget>? actions;
+  final bool iosTransitionBetweenRoutes;
+  final bool automaticallyImplyLeading;
+
+  const AdaptiveAppBar(
+      {super.key,
+      required this.text,
+      this.leading,
+      this.actions,
+      this.iosTransitionBetweenRoutes = true,
+      this.automaticallyImplyLeading = true});
+
+  @override
+  Widget build(BuildContext context) {
+    return Platform.isIOS || Platform.isMacOS
+        ? CupertinoNavigationBar(
+            transitionBetweenRoutes: iosTransitionBetweenRoutes,
+            middle: Text(text),
+            previousPageTitle:
+                MaterialLocalizations.of(context).backButtonTooltip,
+            automaticallyImplyLeading: automaticallyImplyLeading,
+            leading: leading,
+            trailing: actions == null
+                ? null
+                : actions!.length == 1
+                    ? actions!.first
+                    : Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: actions!,
+                      ),
+          )
+        : AppBar(
+            leading: leading,
+            actions: actions,
+            automaticallyImplyLeading: automaticallyImplyLeading,
+            title: Text(text),
+          );
+  }
+}
diff --git a/app/lib/domain/extensions/map_extensions.dart b/app/lib/domain/extensions/map_extensions.dart
@@ -0,0 +1,4 @@
+extension MapExtension<K,E> on Map<K, List<E>> {
+  List<E> valuesWhere(bool Function(E element) test) =>
+      values.expand((element) => element).toList().where(test).toList();
+}
diff --git a/app/lib/ui/flow/accounts/accounts_screen.dart b/app/lib/ui/flow/accounts/accounts_screen.dart
@@ -39,56 +39,58 @@ class _AccountsScreenState extends ConsumerState<AccountsScreen> {
 
     return AppPage(
       title: context.l10n.common_accounts,
-      body: ListView(
-        padding: const EdgeInsets.all(16),
-        children: [
-          if (googleAccount != null)
-            AccountsTab(
-              name: googleAccount.displayName ?? googleAccount.email,
-              serviceDescription: context.l10n.common_google_drive,
-              profileImage: googleAccount.photoUrl,
-              actionList: ActionList(buttons: [
-                ActionListButton(
-                  title: context.l10n.common_auto_back_up,
-                  trailing: Consumer(
-                    builder: (context, ref, child) {
-                      final googleDriveAutoBackUp = ref
-                          .watch(AppPreferences.canTakeAutoBackUpInGoogleDrive);
-                      return AppSwitch(
-                        value: googleDriveAutoBackUp,
-                        onChanged: (bool value) {
-                          ref
-                              .read(AppPreferences
-                                  .canTakeAutoBackUpInGoogleDrive.notifier)
-                              .state = value;
-                        },
-                      );
-                    },
+      bodyBuilder: (context) {
+        return ListView(
+          padding: context.systemPadding + const EdgeInsets.all(16),
+          children: [
+            if (googleAccount != null)
+              AccountsTab(
+                name: googleAccount.displayName ?? googleAccount.email,
+                serviceDescription: context.l10n.common_google_drive,
+                profileImage: googleAccount.photoUrl,
+                actionList: ActionList(buttons: [
+                  ActionListButton(
+                    title: context.l10n.common_auto_back_up,
+                    trailing: Consumer(
+                      builder: (context, ref, child) {
+                        final googleDriveAutoBackUp = ref.watch(
+                            AppPreferences.canTakeAutoBackUpInGoogleDrive);
+                        return AppSwitch(
+                          value: googleDriveAutoBackUp,
+                          onChanged: (bool value) {
+                            ref
+                                .read(AppPreferences
+                                    .canTakeAutoBackUpInGoogleDrive.notifier)
+                                .state = value;
+                          },
+                        );
+                      },
+                    ),
                   ),
+                  ActionListButton(
+                    title: context.l10n.common_sign_out,
+                    onPressed: notifier.signOutWithGoogle,
+                  ),
+                ]),
+                backgroundColor: AppColors.googleDriveColor.withAlpha(50),
+              ),
+            if (googleAccount == null)
+              OnTapScale(
+                onTap: () {
+                  notifier.signInWithGoogle();
+                },
+                child: AccountsTab(
+                  name: context.l10n.add_account_title,
+                  backgroundColor: context.colorScheme.containerNormal,
                 ),
-                ActionListButton(
-                  title: context.l10n.common_sign_out,
-                  onPressed: notifier.signOutWithGoogle,
-                ),
-              ]),
-              backgroundColor: AppColors.googleDriveColor.withAlpha(50),
-            ),
-          if (googleAccount == null)
-            OnTapScale(
-              onTap: () {
-                notifier.signInWithGoogle();
-              },
-              child: AccountsTab(
-                name: context.l10n.add_account_title,
-                backgroundColor: context.colorScheme.containerNormal,
               ),
-            ),
-          const SizedBox(height: 16),
-          const SettingsActionList(),
-          const SizedBox(height: 16),
-          _buildVersion(context: context),
-        ],
-      ),
+            const SizedBox(height: 16),
+            const SettingsActionList(),
+            const SizedBox(height: 16),
+            _buildVersion(context: context),
+          ],
+        );
+      },
     );
   }
 

diff --git a/app/lib/ui/flow/home/components/app_media_item.dart b/app/lib/ui/flow/home/components/app_media_item.dart
@@ -5,6 +5,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:style/extensions/context_extensions.dart';
 import 'package:style/indicators/circular_progress_indicator.dart';
+import 'package:video_player/video_player.dart';
 import '../../../../domain/assets/assets_paths.dart';
 import 'package:style/animations/item_selector.dart';
 
@@ -30,47 +31,47 @@ class AppMediaItem extends StatefulWidget {
 
 class _AppMediaItemState extends State<AppMediaItem>
     with AutomaticKeepAliveClientMixin {
-  //VideoPlayerController? _videoPlayerController;
+  VideoPlayerController? _videoPlayerController;
 
   @override
   void initState() {
     ///TODO: Video view
-    // if (widget.media.type.isVideo &&
-    //     widget.media.sources.contains(AppMediaSource.local)) {
-    //
-    //      _videoPlayerController =
-    //          VideoPlayerController.file(File(widget.media.path))
-    //            ..initialize().then((_) {
-    //             setState(() {});
-    //            });
-    //
-    // }
+    if (widget.media.type.isVideo &&
+        widget.media.sources.contains(AppMediaSource.local)) {
+      _videoPlayerController =
+          VideoPlayerController.file(File(widget.media.path))
+            ..initialize().then((_) {
+              setState(() {});
+            });
+    }
     super.initState();
   }
 
   @override
   void dispose() {
-    // _videoPlayerController?.dispose();
+    _videoPlayerController?.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
     super.build(context);
-    return ItemSelector(
-      onTap: widget.onTap,
-      onLongTap: widget.onLongTap,
-      isSelected: widget.isSelected,
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(4),
-        child: Stack(
-          alignment: Alignment.bottomLeft,
-          children: [
-            widget.media.type.isVideo && widget.media.thumbnailLink == null
-                ? _buildVideoView(context: context)
-                : _buildImageView(context: context),
-            _sourceIndicators(context: context),
-          ],
+    return LayoutBuilder(
+      builder: (context, constraints) => ItemSelector(
+        onTap: widget.onTap,
+        onLongTap: widget.onLongTap,
+        isSelected: widget.isSelected,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(4),
+          child: Stack(
+            alignment: Alignment.bottomLeft,
+            children: [
+              widget.media.type.isVideo && widget.media.thumbnailLink == null
+                  ? _buildVideoView(context: context)
+                  : _buildImageView(context: context, constraints: constraints),
+              _sourceIndicators(context: context),
+            ],
+          ),
         ),
       ),
     );
@@ -114,9 +115,11 @@ class _AppMediaItemState extends State<AppMediaItem>
     );
   }
 
-  Widget _buildImageView({required BuildContext context}) {
-    return LayoutBuilder(builder: (context, constraints) {
-      return Image(
+  Widget _buildImageView(
+      {required BuildContext context, required BoxConstraints constraints}) {
+    return Hero(
+      tag: widget.media,
+      child: Image(
         image: widget.media.sources.contains(AppMediaSource.local)
             ? ResizeImage(
                 FileImage(File(widget.media.path)),
@@ -162,8 +165,8 @@ class _AppMediaItemState extends State<AppMediaItem>
         },
         width: double.maxFinite,
         height: double.maxFinite,
-      );
-    });
+      ),
+    );
   }
 
   Widget _buildVideoView({required BuildContext context}) {
@@ -174,7 +177,7 @@ class _AppMediaItemState extends State<AppMediaItem>
           decoration: BoxDecoration(
             color: context.colorScheme.containerNormalOnSurface,
           ),
-          // child: VideoPlayer(_videoPlayerController!),
+          child: VideoPlayer(_videoPlayerController!),
         ),
         Icon(CupertinoIcons.play_arrow_solid,
             color: context.colorScheme.onPrimary),

diff --git a/app/lib/ui/flow/home/components/no_local_medias_access_screen.dart b/app/lib/ui/flow/home/components/no_local_medias_access_screen.dart
@@ -42,7 +42,7 @@ class NoLocalMediasAccessScreen extends ConsumerWidget {
             PrimaryButton(
               onPressed: () async {
                 await openAppSettings();
-                await notifier.loadMedias();
+                await notifier.loadLocalMedia();
               },
               text: context.l10n.load_local_media_button_text,
             ),