Preview

app/assets/locales/app_en.arb

@@ -18,7 +18,9 @@
   "something_went_wrong_error": "Something went wrong! Please try again later.",
   "user_google_sign_in_account_not_found_error": "You haven't signed in with Google account yet. Please sign in with Google account and try again.",
   "back_up_folder_not_found_error": "Back up folder not found!",
-  "unable_to_open_attachment_error": "Unable to open attachment!",
+
+  "unable_to_load_media_error": "Unable to load media!",
+  "unable_to_load_media_message": "Oops! It looks like we're having trouble loading the media right now. Please try again later.",
 
   "on_board_description": "Effortlessly move, share, and organize your photos and videos in a breeze. Access all your clouds in one friendly place. Your moments, your way, simplified for you! 🚀",
 

app/lib/components/app_page.dart

@@ -1,6 +1,7 @@
 import 'dart:io';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:style/extensions/context_extensions.dart';
 
 class AppPage extends StatelessWidget {
   final String? title;
@@ -145,11 +146,16 @@ class AdaptiveAppBar extends StatelessWidget {
                         children: actions!,
                       ),
           )
-        : AppBar(
-            leading: leading,
-            actions: actions,
-            automaticallyImplyLeading: automaticallyImplyLeading,
-            title: Text(text),
-          );
+        : Column(
+          children: [
+            AppBar(
+                backgroundColor: context.colorScheme.barColor,
+                leading: leading,
+                actions: actions,
+                automaticallyImplyLeading: automaticallyImplyLeading,
+                title: Text(text),
+              ),
+          ],
+        );
   }
 }

app/lib/components/error_view.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/cupertino.dart';
+import 'package:style/buttons/primary_button.dart';
+import 'package:style/extensions/context_extensions.dart';
+import 'package:style/text/app_text_style.dart';
+
+class ErrorViewAction {
+  final String title;
+  final VoidCallback onPressed;
+
+  const ErrorViewAction({required this.title, required this.onPressed});
+}
+
+class ErrorView extends StatelessWidget {
+  final Widget? icon;
+  final String title;
+  final String message;
+  final ErrorViewAction? action;
+
+  const ErrorView({
+    super.key,
+    this.icon,
+    required this.title,
+    this.message = '',
+    this.action,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.all(30),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            const SizedBox(width: double.infinity),
+            icon ??
+                Icon(
+                  CupertinoIcons.exclamationmark_circle,
+                  color: context.colorScheme.containerHighOnSurface,
+                  size: 100,
+                ),
+            const SizedBox(height: 20),
+            Text(title,
+                style: AppTextStyles.subtitle2.copyWith(
+                  color: context.colorScheme.textPrimary,
+                )),
+            const SizedBox(height: 20),
+            Text(
+              message,
+              style: AppTextStyles.body2.copyWith(
+                color: context.colorScheme.textSecondary,
+              ),
+              textAlign: TextAlign.center,
+            ),
+            if (action != null) ...[
+              const SizedBox(height: 20),
+              PrimaryButton(
+                onPressed: action!.onPressed,
+                child: Text(action!.title),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

app/lib/ui/flow/accounts/accounts_screen.dart

@@ -13,6 +13,7 @@ import 'package:style/text/app_text_style.dart';
 import 'package:style/theme/colors.dart';
 import 'package:style/buttons/buttons_list.dart';
 import 'package:style/buttons/switch.dart';
+import '../../../components/snack_bar.dart';
 import 'components/account_tab.dart';
 
 class AccountsScreen extends ConsumerStatefulWidget {
@@ -32,11 +33,20 @@ class _AccountsScreenState extends ConsumerState<AccountsScreen> {
     runPostFrame(() => notifier.init());
   }
 
+  void _errorObserver() {
+    ref.listen(accountsStateNotifierProvider.select((value) => value.error),
+        (previous, next) {
+      if (next != null) {
+        showErrorSnackBar(context: context, error: next);
+      }
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
+    _errorObserver();
     final googleAccount = ref.watch(
         accountsStateNotifierProvider.select((value) => value.googleAccount));
-
     return AppPage(
       title: context.l10n.common_accounts,
       bodyBuilder: (context) {

app/lib/ui/flow/home/components/no_local_medias_access_screen.dart

@@ -1,53 +1,31 @@
+import 'package:cloud_gallery/components/error_view.dart';
 import 'package:cloud_gallery/domain/extensions/context_extensions.dart';
 import 'package:cloud_gallery/ui/flow/home/home_screen_view_model.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:permission_handler/permission_handler.dart';
 import 'package:style/extensions/context_extensions.dart';
-import 'package:style/text/app_text_style.dart';
-import 'package:style/buttons/primary_button.dart';
 
 class NoLocalMediasAccessScreen extends ConsumerWidget {
   const NoLocalMediasAccessScreen({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final notifier = ref.read(homeViewStateNotifier.notifier);
-    return SafeArea(
-      child: Padding(
-        padding: const EdgeInsets.all(30),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            Icon(
-              CupertinoIcons.photo,
-              color: context.colorScheme.containerHighOnSurface,
-              size: 100,
-            ),
-            const SizedBox(height: 20),
-            Text(context.l10n.cant_find_media_title,
-                style: AppTextStyles.subtitle2.copyWith(
-                  color: context.colorScheme.textPrimary,
-                )),
-            const SizedBox(height: 20),
-            Text(
-              context.l10n.ask_for_media_permission_message,
-              style: AppTextStyles.body2.copyWith(
-                color: context.colorScheme.textSecondary,
-              ),
-              textAlign: TextAlign.center,
-            ),
-            const SizedBox(height: 20),
-            PrimaryButton(
-              onPressed: () async {
-                await openAppSettings();
-                await notifier.loadLocalMedia();
-              },
-              text: context.l10n.load_local_media_button_text,
-            ),
-          ],
-        ),
+    return ErrorView(
+      title: context.l10n.cant_find_media_title,
+      icon: Icon(
+        CupertinoIcons.photo,
+        color: context.colorScheme.containerHighOnSurface,
+        size: 100,
+      ),
+      message: context.l10n.ask_for_media_permission_message,
+      action: ErrorViewAction(
+        onPressed: () async {
+          await openAppSettings();
+          await notifier.loadLocalMedia();
+        },
+        title: context.l10n.load_local_media_button_text,
       ),
     );
   }

app/lib/ui/flow/home/home_screen.dart

@@ -1,9 +1,7 @@
 import 'dart:io';
-
 import 'package:cloud_gallery/components/app_page.dart';
 import 'package:cloud_gallery/domain/extensions/widget_extensions.dart';
 import 'package:cloud_gallery/domain/formatter/date_formatter.dart';
-import 'package:cloud_gallery/ui/flow/media_preview/media_preview.dart';
 import 'package:cloud_gallery/domain/extensions/context_extensions.dart';
 import 'package:cloud_gallery/ui/flow/home/components/no_local_medias_access_screen.dart';
 import 'package:cloud_gallery/ui/flow/home/home_screen_view_model.dart';
@@ -59,7 +57,6 @@ class _HomeScreenState extends ConsumerState<HomeScreen> {
   Widget build(BuildContext context) {
     _errorObserver();
     return AppPage(
-      //barBackgroundColor: context.colorScheme.surface,
       titleWidget: _titleWidget(context: context),
       actions: [
         ActionButton(
@@ -179,10 +176,12 @@ class _HomeScreenState extends ConsumerState<HomeScreen> {
                         if (selectedMedias.isNotEmpty) {
                           notifier.toggleMediaSelection(media);
                         } else {
-                          AppMediaView.showPreview(
-                            context: context,
-                            media: media,
-                          );
+                          AppRouter.preview(
+                                  medias: medias.values
+                                      .expand((element) => element)
+                                      .toList(),
+                                  startingMediaId: media.id)
+                              .push(context);
                         }
                       },
                       onLongTap: () {
@@ -208,8 +207,7 @@ class _HomeScreenState extends ConsumerState<HomeScreen> {
   Widget _titleWidget({required BuildContext context}) {
     return Row(
       children: [
-        if(Platform.isIOS)
-          const SizedBox(width: 10),
+        if (Platform.isIOS) const SizedBox(width: 10),
         Image.asset(
           Assets.images.appIcon,
           width: 28,

app/lib/ui/flow/media_preview/components/image_preview_screen.dart

@@ -0,0 +1,68 @@
+import 'dart:io';
+import 'package:cloud_gallery/components/app_page.dart';
+import 'package:cloud_gallery/components/error_view.dart';
+import 'package:cloud_gallery/domain/extensions/context_extensions.dart';
+import 'package:data/models/media/media.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../../../domain/extensions/widget_extensions.dart';
+import 'network_image_preview/network_image_preview.dart';
+import 'network_image_preview/network_image_preview_view_model.dart';
+
+class ImagePreview extends ConsumerStatefulWidget {
+  final AppMedia media;
+
+  const ImagePreview({
+    super.key,
+    required this.media,
+  });
+
+  @override
+  ConsumerState<ImagePreview> createState() => _ImagePreviewScreenState();
+}
+
+class _ImagePreviewScreenState extends ConsumerState<ImagePreview> {
+  late NetworkImagePreviewStateNotifier notifier;
+
+  @override
+  void initState() {
+    if (!widget.media.sources.contains(AppMediaSource.local)) {
+      notifier = ref.read(networkImagePreviewStateNotifierProvider.notifier);
+      runPostFrame(() {
+        notifier.loadImage(widget.media.id);
+      });
+    }
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return InteractiveViewer(
+      maxScale: 100,
+      child: Center(
+        child: SizedBox(
+          width: double.infinity,
+          child: widget.media.sources.contains(AppMediaSource.local)
+              ? _displayLocalImage(context: context)
+              : NetworkImagePreview(
+                  media: widget.media,
+                ),
+        ),
+      ),
+    );
+  }
+
+  Widget _displayLocalImage({required BuildContext context}) {
+    return Hero(
+      tag: widget.media,
+      child: Image.file(File(widget.media.path), fit: BoxFit.contain,
+          errorBuilder: (context, error, stackTrace) {
+        return AppPage(
+            body: ErrorView(
+          title: context.l10n.unable_to_load_media_error,
+          message: context.l10n.unable_to_load_media_message,
+        ));
+      }),
+    );
+  }
+}

app/lib/ui/flow/media_preview/image_preview/components/network_image_preview/network_image_preview.dart → app/lib/ui/flow/media_preview/components/network_image_preview/network_image_preview.dart

@@ -1,8 +1,10 @@
 import 'dart:typed_data';
+import 'package:cloud_gallery/domain/extensions/context_extensions.dart';
 import 'package:data/models/media/media.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:style/indicators/circular_progress_indicator.dart';
+import '../../../../../components/error_view.dart';
 import 'network_image_preview_view_model.dart';
 
 class NetworkImagePreview extends ConsumerWidget {
@@ -23,7 +25,10 @@ class NetworkImagePreview extends ConsumerWidget {
             fit: BoxFit.fitWidth),
       );
     } else if (state.error != null) {
-      return const Center(child: Text('Error'));
+      return ErrorView(
+        title: context.l10n.unable_to_load_media_error,
+        message: context.l10n.unable_to_load_media_message,
+      );
     }
     return const Placeholder();
   }