Transfer repository from Gitlab

mobile/lib/modules/home/models/get_all_asset_respose.model.dart

@@ -0,0 +1,113 @@
+import 'dart:convert';
+
+import 'package:flutter/foundation.dart';
+import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+
+class ImmichAssetGroupByDate {
+  final String date;
+  List<ImmichAsset> assets;
+  ImmichAssetGroupByDate({
+    required this.date,
+    required this.assets,
+  });
+
+  ImmichAssetGroupByDate copyWith({
+    String? date,
+    List<ImmichAsset>? assets,
+  }) {
+    return ImmichAssetGroupByDate(
+      date: date ?? this.date,
+      assets: assets ?? this.assets,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'date': date,
+      'assets': assets.map((x) => x.toMap()).toList(),
+    };
+  }
+
+  factory ImmichAssetGroupByDate.fromMap(Map<String, dynamic> map) {
+    return ImmichAssetGroupByDate(
+      date: map['date'] ?? '',
+      assets: List<ImmichAsset>.from(map['assets']?.map((x) => ImmichAsset.fromMap(x))),
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory ImmichAssetGroupByDate.fromJson(String source) => ImmichAssetGroupByDate.fromMap(json.decode(source));
+
+  @override
+  String toString() => 'ImmichAssetGroupByDate(date: $date, assets: $assets)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is ImmichAssetGroupByDate && other.date == date && listEquals(other.assets, assets);
+  }
+
+  @override
+  int get hashCode => date.hashCode ^ assets.hashCode;
+}
+
+class GetAllAssetResponse {
+  final int count;
+  final List<ImmichAssetGroupByDate> data;
+  final String nextPageKey;
+  GetAllAssetResponse({
+    required this.count,
+    required this.data,
+    required this.nextPageKey,
+  });
+
+  GetAllAssetResponse copyWith({
+    int? count,
+    List<ImmichAssetGroupByDate>? data,
+    String? nextPageKey,
+  }) {
+    return GetAllAssetResponse(
+      count: count ?? this.count,
+      data: data ?? this.data,
+      nextPageKey: nextPageKey ?? this.nextPageKey,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'count': count,
+      'data': data.map((x) => x.toMap()).toList(),
+      'nextPageKey': nextPageKey,
+    };
+  }
+
+  factory GetAllAssetResponse.fromMap(Map<String, dynamic> map) {
+    return GetAllAssetResponse(
+      count: map['count']?.toInt() ?? 0,
+      data: List<ImmichAssetGroupByDate>.from(map['data']?.map((x) => ImmichAssetGroupByDate.fromMap(x))),
+      nextPageKey: map['nextPageKey'] ?? '',
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory GetAllAssetResponse.fromJson(String source) => GetAllAssetResponse.fromMap(json.decode(source));
+
+  @override
+  String toString() => 'GetAllAssetResponse(count: $count, data: $data, nextPageKey: $nextPageKey)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is GetAllAssetResponse &&
+        other.count == count &&
+        listEquals(other.data, data) &&
+        other.nextPageKey == nextPageKey;
+  }
+
+  @override
+  int get hashCode => count.hashCode ^ data.hashCode ^ nextPageKey.hashCode;
+}

mobile/lib/modules/home/providers/asset.provider.dart

@@ -0,0 +1,60 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
+import 'package:immich_mobile/modules/home/services/asset.service.dart';
+
+class AssetNotifier extends StateNotifier<List<ImmichAssetGroupByDate>> {
+  final imagePerPage = 100;
+  final AssetService _assetService = AssetService();
+
+  AssetNotifier() : super([]);
+  late String? nextPageKey = "";
+  bool isFetching = false;
+
+  getImmichAssets() async {
+    GetAllAssetResponse? res = await _assetService.getAllAsset();
+    nextPageKey = res?.nextPageKey;
+
+    if (res != null) {
+      for (var assets in res.data) {
+        state = [...state, assets];
+      }
+    }
+  }
+
+  getMoreAsset() async {
+    if (nextPageKey != null && !isFetching) {
+      isFetching = true;
+      GetAllAssetResponse? res = await _assetService.getMoreAsset(nextPageKey);
+
+      if (res != null) {
+        nextPageKey = res.nextPageKey;
+
+        List<ImmichAssetGroupByDate> previousState = state;
+        List<ImmichAssetGroupByDate> currentState = [];
+
+        for (var assets in res.data) {
+          currentState = [...currentState, assets];
+        }
+
+        if (previousState.last.date == currentState.first.date) {
+          previousState.last.assets = [...previousState.last.assets, ...currentState.first.assets];
+          state = [...previousState, ...currentState.sublist(1)];
+        } else {
+          state = [...previousState, ...currentState];
+        }
+      }
+
+      isFetching = false;
+    }
+  }
+
+  clearAllAsset() {
+    state = [];
+  }
+}
+
+final currentLocalPageProvider = StateProvider<int>((ref) => 0);
+
+final assetProvider = StateNotifierProvider<AssetNotifier, List<ImmichAssetGroupByDate>>((ref) {
+  return AssetNotifier();
+});

mobile/lib/modules/home/services/asset.service.dart

@@ -0,0 +1,38 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
+import 'package:immich_mobile/shared/services/network.service.dart';
+
+class AssetService {
+  final NetworkService _networkService = NetworkService();
+
+  Future<GetAllAssetResponse?> getAllAsset() async {
+    var res = await _networkService.getRequest(url: "asset/all");
+    try {
+      Map<String, dynamic> decodedData = jsonDecode(res.toString());
+
+      GetAllAssetResponse result = GetAllAssetResponse.fromMap(decodedData);
+      return result;
+    } catch (e) {
+      debugPrint("Error getAllAsset  ${e.toString()}");
+    }
+  }
+
+  Future<GetAllAssetResponse?> getMoreAsset(String? nextPageKey) async {
+    try {
+      var res = await _networkService.getRequest(
+        url: "asset/all?nextPageKey=$nextPageKey",
+      );
+
+      Map<String, dynamic> decodedData = jsonDecode(res.toString());
+
+      GetAllAssetResponse result = GetAllAssetResponse.fromMap(decodedData);
+      if (result.count != 0) {
+        return result;
+      }
+    } catch (e) {
+      debugPrint("Error getAllAsset  ${e.toString()}");
+    }
+  }
+}

mobile/lib/modules/home/ui/image_grid.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/modules/home/ui/thumbnail_image.dart';
+import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+
+class ImageGrid extends StatelessWidget {
+  final List<ImmichAsset> assetGroup;
+
+  const ImageGrid({Key? key, required this.assetGroup}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverGrid(
+      gridDelegate:
+          const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 5.0, mainAxisSpacing: 5),
+      delegate: SliverChildBuilderDelegate(
+        (BuildContext context, int index) {
+          return GestureDetector(
+            onTap: () {},
+            child: ThumbnailImage(asset: assetGroup[index]),
+          );
+        },
+        childCount: assetGroup.length,
+      ),
+    );
+  }
+}

mobile/lib/modules/home/ui/immich_sliver_appbar.dart

@@ -0,0 +1,105 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/models/backup_state.model.dart';
+import 'package:immich_mobile/shared/providers/backup.provider.dart';
+
+class ImmichSliverAppBar extends ConsumerWidget {
+  const ImmichSliverAppBar({
+    Key? key,
+    required this.imageGridGroup,
+  }) : super(key: key);
+
+  final List<Widget> imageGridGroup;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final BackUpState _backupState = ref.watch(backupProvider);
+
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
+      sliver: SliverAppBar(
+        centerTitle: true,
+        floating: true,
+        pinned: false,
+        snap: false,
+        backgroundColor: Colors.grey[200],
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
+        leading: Builder(
+          builder: (BuildContext context) {
+            return IconButton(
+              icon: const Icon(Icons.account_circle_rounded),
+              onPressed: () {
+                Scaffold.of(context).openDrawer();
+              },
+              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
+            );
+          },
+        ),
+        title: Text(
+          'IMMICH',
+          style: GoogleFonts.snowburstOne(
+            textStyle: TextStyle(
+              fontWeight: FontWeight.bold,
+              fontSize: 18,
+              color: Theme.of(context).primaryColor,
+            ),
+          ),
+        ),
+        actions: [
+          Stack(
+            alignment: AlignmentDirectional.center,
+            children: [
+              _backupState.backupProgress == BackUpProgressEnum.inProgress
+                  ? Positioned(
+                      top: 10,
+                      right: 12,
+                      child: SizedBox(
+                        height: 8,
+                        width: 8,
+                        child: CircularProgressIndicator(
+                          strokeWidth: 1,
+                          valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
+                        ),
+                      ),
+                    )
+                  : Container(),
+              IconButton(
+                icon: const Icon(Icons.backup_rounded),
+                tooltip: 'Backup Controller',
+                onPressed: () async {
+                  var onPop = await AutoRouter.of(context).push(const BackupControllerRoute());
+
+                  // Fetch new image
+                  if (onPop == true) {
+                    // Remove and force getting new widget again
+                    if (imageGridGroup.isNotEmpty) {
+                      ref.read(assetProvider.notifier).getMoreAsset();
+                    } else {
+                      ref.read(assetProvider.notifier).getImmichAssets();
+                    }
+                  }
+                },
+              ),
+              _backupState.backupProgress == BackUpProgressEnum.inProgress
+                  ? Positioned(
+                      bottom: 5,
+                      child: Text(
+                        _backupState.backingUpAssetCount.toString(),
+                        style: const TextStyle(fontSize: 9, fontWeight: FontWeight.bold),
+                      ),
+                    )
+                  : Container()
+            ],
+          ),
+        ],
+        systemOverlayStyle: SystemUiOverlayStyle.dark,
+      ),
+    );
+  }
+}

mobile/lib/modules/home/ui/profile_drawer.dart

@@ -0,0 +1,72 @@
+import 'package:auto_route/annotations.dart';
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/src/widgets/framework.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class ProfileDrawer extends ConsumerWidget {
+  const ProfileDrawer({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    AuthenticationState _authState = ref.watch(authenticationProvider);
+
+    return Drawer(
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.only(
+          topRight: Radius.circular(5),
+          bottomRight: Radius.circular(5),
+        ),
+      ),
+      child: ListView(
+        padding: EdgeInsets.zero,
+        children: [
+          DrawerHeader(
+            decoration: BoxDecoration(
+              color: Colors.grey[200],
+            ),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                const Image(
+                  image: AssetImage('assets/immich-logo-no-outline.png'),
+                  width: 50,
+                  filterQuality: FilterQuality.high,
+                ),
+                const Padding(padding: EdgeInsets.all(8)),
+                Text(
+                  _authState.userEmail,
+                  style: TextStyle(color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold),
+                )
+              ],
+            ),
+          ),
+          ListTile(
+            tileColor: Colors.grey[100],
+            leading: const Icon(
+              Icons.logout_rounded,
+              color: Colors.black54,
+            ),
+            title: const Text(
+              "Sign Out",
+              style: TextStyle(color: Colors.black54, fontSize: 14),
+            ),
+            onTap: () async {
+              bool res = await ref.read(authenticationProvider.notifier).logout();
+              ref.read(assetProvider.notifier).clearAllAsset();
+
+              if (res) {
+                AutoRouter.of(context).popUntilRoot();
+              }
+            },
+          )
+        ],
+      ),
+    );
+  }
+}

mobile/lib/modules/home/ui/thumbnail_image.dart

@@ -0,0 +1,52 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:transparent_image/transparent_image.dart';
+
+class ThumbnailImage extends StatelessWidget {
+  final ImmichAsset asset;
+
+  const ThumbnailImage({Key? key, required this.asset}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var box = Hive.box(userInfoBox);
+    var thumbnailRequestUrl =
+        '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=true';
+
+    return GestureDetector(
+      onTap: () {
+        AutoRouter.of(context).push(
+          ImageViewerRoute(
+            imageUrl:
+                '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false',
+            heroTag: asset.id,
+            thumbnailUrl: thumbnailRequestUrl,
+          ),
+        );
+      },
+      onLongPress: () {},
+      child: Hero(
+        tag: asset.id,
+        child: CachedNetworkImage(
+          width: 300,
+          height: 300,
+          memCacheHeight: 250,
+          fit: BoxFit.cover,
+          imageUrl: thumbnailRequestUrl,
+          httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+          fadeInDuration: const Duration(milliseconds: 250),
+          progressIndicatorBuilder: (context, url, downloadProgress) => Transform.scale(
+            scale: 0.2,
+            child: CircularProgressIndicator(value: downloadProgress.progress),
+          ),
+          errorWidget: (context, url, error) => const Icon(Icons.error),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/modules/home/views/home_page.dart

@@ -0,0 +1,165 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
+import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
+import 'package:immich_mobile/shared/models/backup_state.model.dart';
+import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
+import 'package:immich_mobile/modules/home/ui/image_grid.dart';
+import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+import 'package:immich_mobile/shared/providers/backup.provider.dart';
+import 'package:intl/intl.dart';
+
+class HomePage extends HookConsumerWidget {
+  const HomePage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final ValueNotifier<bool> _showBackToTopBtn = useState(false);
+    ScrollController _scrollController = useScrollController();
+    List<ImmichAssetGroupByDate> assetGroup = ref.watch(assetProvider);
+    BackUpState _backupState = ref.watch(backupProvider);
+    List<Widget> imageGridGroup = [];
+    List<GlobalKey> monthGroupKey = [];
+
+    _scrollControllerCallback() {
+      var endOfPage = _scrollController.position.maxScrollExtent;
+
+      if (_scrollController.offset >= endOfPage - (endOfPage * 0.1) && !_scrollController.position.outOfRange) {
+        ref.read(assetProvider.notifier).getMoreAsset();
+      }
+
+      if (_scrollController.offset >= 400) {
+        _showBackToTopBtn.value = true;
+      } else {
+        _showBackToTopBtn.value = false;
+      }
+    }
+
+    useEffect(() {
+      ref.read(assetProvider.notifier).getImmichAssets();
+
+      _scrollController.addListener(_scrollControllerCallback);
+
+      return () => _scrollController.removeListener(_scrollControllerCallback);
+    }, [_scrollController, key]);
+
+    Widget _buildBody() {
+      if (assetGroup.isNotEmpty) {
+        String lastGroupDate = assetGroup[0].date;
+
+        for (var group in assetGroup) {
+          var dateTitle = group.date;
+          var assetGroup = group.assets;
+
+          int? currentMonth = DateTime.tryParse(dateTitle)?.month;
+          int? previousMonth = DateTime.tryParse(lastGroupDate)?.month;
+
+          if ((currentMonth! - previousMonth!) != 0) {
+            var myKey = GlobalKey();
+            monthGroupKey.add(myKey);
+            // debugPrint("Group Key $myKey");
+
+            imageGridGroup.add(
+              SliverToBoxAdapter(
+                key: myKey,
+                child: Padding(
+                  padding: const EdgeInsets.only(left: 10.0, top: 32),
+                  child: Text(
+                    DateFormat('MMMM, y').format(
+                      DateTime.parse(dateTitle),
+                    ),
+                    style: TextStyle(
+                      fontSize: 24,
+                      fontWeight: FontWeight.bold,
+                      color: Theme.of(context).primaryColor,
+                    ),
+                  ),
+                ),
+              ),
+            );
+          }
+
+          imageGridGroup.add(
+            _buildDateGroupTitle(dateTitle),
+          );
+
+          imageGridGroup.add(ImageGrid(assetGroup: assetGroup));
+
+          lastGroupDate = dateTitle;
+        }
+
+        return SafeArea(
+          child: CustomScrollView(
+            controller: _scrollController,
+            slivers: [
+              ImmichSliverAppBar(imageGridGroup: imageGridGroup),
+              ...imageGridGroup,
+            ],
+          ),
+        );
+      } else {
+        return Container();
+      }
+    }
+
+    return Scaffold(
+      drawer: const ProfileDrawer(),
+      body: _buildBody(),
+      bottomNavigationBar: BottomAppBar(
+        child: IconButton(
+          onPressed: () {
+            if (monthGroupKey.isNotEmpty) {
+              var targetContext = monthGroupKey.last.currentContext;
+              if (targetContext != null) {
+                Scrollable.ensureVisible(
+                  targetContext,
+                  duration: const Duration(milliseconds: 400),
+                  curve: Curves.easeInOut,
+                );
+              }
+            }
+          },
+          icon: const Icon(Icons.ac_unit_outlined),
+        ),
+      ),
+      floatingActionButton: _showBackToTopBtn.value
+          ? FloatingActionButton.small(
+              enableFeedback: true,
+              backgroundColor: Theme.of(context).secondaryHeaderColor,
+              foregroundColor: Theme.of(context).primaryColor,
+              onPressed: () {
+                _scrollController.animateTo(0, duration: const Duration(seconds: 1), curve: Curves.easeOutExpo);
+              },
+              child: const Icon(Icons.keyboard_arrow_up_rounded),
+            )
+          : null,
+    );
+  }
+
+  SliverToBoxAdapter _buildDateGroupTitle(String dateTitle) {
+    var currentYear = DateTime.now().year;
+    var groupYear = DateTime.parse(dateTitle).year;
+    var formatDateTemplate = currentYear == groupYear ? 'E, MMM dd' : 'E, MMM dd, yyyy';
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.only(top: 24.0, bottom: 24.0, left: 3.0),
+        child: Row(
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(left: 8.0, bottom: 5.0, top: 5.0),
+              child: Text(
+                DateFormat(formatDateTemplate).format(DateTime.parse(dateTitle)),
+                style: const TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.bold,
+                  color: Colors.black87,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}