self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-24 10:37:28 +02:00
Code Issues Releases Activity

feat(mobile): Library page rework (album sorting, favorites) (#1501)

Browse Source 
* Add album sorting

* Change AppBar to match photos page behaviour

* Add buttons

* First crude implementation of the favorites page

* Clean up

* Add favorite button

* i18n

* Add star indicator to thumbnail

* Add favorite logic to separate provider and fix favorite behavior in album

* Review feedback (Add isFavorite variable)

* dev: style buttons

* dev: styled drop down button

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Matthias Rupp 2023-02-05 04:25:11 +01:00 committed by GitHub
parent 0048662182
commit bb0b2a1f53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 425 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
mobile/assets/i18n/en-US.json
View File

@ -108,12 +108,17 @@
"experimental_settings_new_asset_list_title": "Enable experimental photo grid",
"experimental_settings_subtitle": "Use at your own risk!",
"experimental_settings_title": "Experimental",
"favorites_page_title": "Favorites",
"home_page_add_to_album_conflicts": "Added {added} assets to album {album}. {failed} assets are already in the album.",
"home_page_add_to_album_success": "Added {added} assets to album {album}.",
"home_page_building_timeline": "Building the timeline",
"home_page_first_time_notice": "If this is your first time using the app, please make sure to choose a backup album(s) so that the timeline can populate photos and videos in the album(s).",
"library_page_albums": "Albums",
"library_page_new_album": "New album",
"library_page_favorites": "Favorites",
"library_page_sharing": "Sharing",
"library_page_sort_created": "Most recently created",
"library_page_sort_title": "Album title",
"login_form_button_text": "Login",
"login_form_email_hint": "youremail@email.com",
"login_form_endpoint_hint": "http://your-server-ip:port/api",

15
mobile/lib/modules/album/ui/album_viewer_thumbnail.dart
View File

@ -1,6 +1,7 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/favorite/providers/favorite_provider.dart';
import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
import 'package:immich_mobile/routing/router.dart';
@ -26,6 +27,7 @@ class AlbumViewerThumbnail extends HookConsumerWidget {
ref.watch(assetSelectionProvider).selectedAssetsInAlbumViewer;
final isMultiSelectionEnable =
ref.watch(assetSelectionProvider).isMultiselectEnable;
final isFavorite = ref.watch(favoriteProvider).contains(asset.id);
viewAsset() {
AutoRouter.of(context).push(
@ -96,6 +98,18 @@ class AlbumViewerThumbnail extends HookConsumerWidget {
);
}
buildAssetFavoriteIcon() {
return const Positioned(
left: 10,
bottom: 5,
child: Icon(
Icons.star,
color: Colors.white,
size: 18,
),
);
}
buildAssetSelectionIcon() {
bool isSelected = selectedAssetsInAlbumViewer.contains(asset);
@ -143,6 +157,7 @@ class AlbumViewerThumbnail extends HookConsumerWidget {
child: Stack(
children: [
buildThumbnailImage(),
if (isFavorite) buildAssetFavoriteIcon(),
if (showStorageIndicator) buildAssetStoreLocationIcon(),
if (!asset.isImage) buildVideoLabel(),
if (isMultiSelectionEnable) buildAssetSelectionIcon(),

166
mobile/lib/modules/album/views/library_page.dart
View File

@ -1,4 +1,5 @@
import 'package:auto_route/auto_route.dart';
import 'package:collection/collection.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
@ -6,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/album/providers/album.provider.dart';
import 'package:immich_mobile/modules/album/ui/album_thumbnail_card.dart';
import 'package:immich_mobile/routing/router.dart';
import 'package:openapi/api.dart';
class LibraryPage extends HookConsumerWidget {
const LibraryPage({Key? key}) : super(key: key);
@ -22,14 +24,11 @@ class LibraryPage extends HookConsumerWidget {
[],
);
Widget buildAppBar() {
return const SliverAppBar(
AppBar buildAppBar() {
return AppBar(
centerTitle: true,
floating: true,
pinned: false,
snap: false,
automaticallyImplyLeading: false,
title: Text(
title: const Text(
'IMMICH',
style: TextStyle(
fontFamily: 'SnowburstOne',
@ -40,6 +39,74 @@ class LibraryPage extends HookConsumerWidget {
);
}
final selectedAlbumSortOrder = useState(0);
List<AlbumResponseDto> sortedAlbums() {
if (selectedAlbumSortOrder.value == 0) {
return albums.sortedBy((album) => album.createdAt).reversed.toList();
}
return albums.sortedBy((album) => album.albumName);
}
Widget buildSortButton() {
final options = [
"library_page_sort_created".tr(),
"library_page_sort_title".tr()
];
return PopupMenuButton(
position: PopupMenuPosition.over,
itemBuilder: (BuildContext context) {
return options.mapIndexed<PopupMenuEntry<int>>((index, option) {
final selected = selectedAlbumSortOrder.value == index;
return PopupMenuItem(
value: index,
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 12.0),
child: Icon(
Icons.check,
color: selected
? Theme.of(context).primaryColor
: Colors.transparent,
),
),
Text(
option,
style: TextStyle(
color: selected ? Theme.of(context).primaryColor : null,
fontSize: 12.0,
),
)
],
),
);
}).toList();
},
onSelected: (int value) {
selectedAlbumSortOrder.value = value;
},
child: Row(
children: [
Icon(
Icons.swap_vert_rounded,
size: 18,
color: Theme.of(context).primaryColor,
),
Text(
options[selectedAlbumSortOrder.value],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor,
fontSize: 12.0,
),
),
],
),
);
}
Widget buildCreateAlbumButton() {
return GestureDetector(
onTap: () {
@ -80,17 +147,90 @@ class LibraryPage extends HookConsumerWidget {
);
}
Widget buildLibraryNavButton(
String label,
IconData icon,
Function() onClick,
) {
return Expanded(
child: OutlinedButton.icon(
onPressed: onClick,
label: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
label,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12.0,
color: Theme.of(context).brightness == Brightness.dark
? Colors.white
: Colors.black,
),
),
),
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.all(12),
side: BorderSide(
color: Theme.of(context).brightness == Brightness.dark
? Colors.grey[600]!
: Colors.grey[300]!,
),
alignment: Alignment.centerLeft,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6.0),
),
),
icon: Icon(icon, color: Theme.of(context).primaryColor),
),
);
}
return Scaffold(
appBar: buildAppBar(),
body: CustomScrollView(
slivers: [
buildAppBar(),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: const Text(
'library_page_albums',
style: TextStyle(fontWeight: FontWeight.bold),
).tr(),
padding: const EdgeInsets.only(
left: 12.0,
right: 12.0,
top: 24.0,
bottom: 12.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
buildLibraryNavButton(
"library_page_favorites".tr(), Icons.star_border, () {
AutoRouter.of(context).navigate(const FavoritesRoute());
}),
const SizedBox(width: 12.0),
buildLibraryNavButton(
"library_page_sharing".tr(), Icons.group_outlined, () {
AutoRouter.of(context).navigate(const SharingRoute());
}),
],
),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(
top: 12.0,
left: 12.0,
right: 12.0,
bottom: 20.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'library_page_albums',
style: TextStyle(fontWeight: FontWeight.bold),
).tr(),
buildSortButton(),
],
),
),
),
SliverPadding(
@ -100,7 +240,7 @@ class LibraryPage extends HookConsumerWidget {
spacing: 12,
children: [
buildCreateAlbumButton(),
for (var album in albums)
for (var album in sortedAlbums())
AlbumThumbnailCard(
album: album,
),

19
mobile/lib/modules/asset_viewer/ui/top_control_app_bar.dart
View File

@ -14,6 +14,8 @@ class TopControlAppBar extends HookConsumerWidget {
required this.onAddToAlbumPressed,
required this.onToggleMotionVideo,
required this.isPlayingMotionVideo,
required this.onFavorite,
required this.isFavorite,
}) : super(key: key);
final Asset asset;
@ -22,13 +24,29 @@ class TopControlAppBar extends HookConsumerWidget {
final VoidCallback onToggleMotionVideo;
final VoidCallback onDeletePressed;
final VoidCallback onAddToAlbumPressed;
final VoidCallback onFavorite;
final Function onSharePressed;
final bool isPlayingMotionVideo;
final bool isFavorite;
@override
Widget build(BuildContext context, WidgetRef ref) {
double iconSize = 18.0;
Widget buildFavoriteButton() {
return IconButton(
iconSize: iconSize,
splashRadius: iconSize,
onPressed: () {
onFavorite();
},
icon: Icon(
isFavorite ? Icons.star : Icons.star_border,
color: Colors.grey[200],
),
);
}
return AppBar(
foregroundColor: Colors.grey[100],
backgroundColor: Colors.transparent,
@ -43,6 +61,7 @@ class TopControlAppBar extends HookConsumerWidget {
),
),
actions: [
if (asset.isRemote) buildFavoriteButton(),
if (asset.livePhotoVideoId != null)
IconButton(
iconSize: iconSize,

13
mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
View File

@ -13,6 +13,7 @@ import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_s
import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
import 'package:immich_mobile/modules/asset_viewer/ui/top_control_app_bar.dart';
import 'package:immich_mobile/modules/asset_viewer/views/video_viewer_page.dart';
import 'package:immich_mobile/modules/favorite/providers/favorite_provider.dart';
import 'package:immich_mobile/shared/services/asset.service.dart';
import 'package:immich_mobile/modules/home/ui/delete_diaglog.dart';
import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
@ -69,7 +70,11 @@ class GalleryViewerPage extends HookConsumerWidget {
[],
);
void getAssetExif() async {
void toggleFavorite(Asset asset) {
ref.watch(favoriteProvider.notifier).toggleFavorite(asset);
}
getAssetExif() async {
if (assetList[indexOfAsset.value].isRemote) {
assetDetail = await ref
.watch(assetServiceProvider)
@ -236,9 +241,15 @@ class GalleryViewerPage extends HookConsumerWidget {
child: TopControlAppBar(
isPlayingMotionVideo: isPlayingMotionVideo.value,
asset: assetList[indexOfAsset.value],
isFavorite: ref.watch(favoriteProvider).contains(
assetList[indexOfAsset.value].id,
),
onMoreInfoPressed: () {
showInfo();
},
onFavorite: () {
toggleFavorite(assetList[indexOfAsset.value]);
},
onDownloadPressed: assetList[indexOfAsset.value].isLocal
? null
: () {

52
mobile/lib/modules/favorite/providers/favorite_provider.dart Normal file
View File

@ -0,0 +1,52 @@
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/shared/models/asset.dart';
import 'package:immich_mobile/shared/providers/asset.provider.dart';
class FavoriteSelectionNotifier extends StateNotifier<Set<String>> {
FavoriteSelectionNotifier(this.ref) : super({}) {
state = ref.watch(assetProvider).allAssets
.where((asset) => asset.isFavorite)
.map((asset) => asset.id)
.toSet();
}
final Ref ref;
void _setFavoriteForAssetId(String id, bool favorite) {
if (!favorite) {
state = state.difference({id});
} else {
state = state.union({id});
}
}
bool _isFavorite(String id) {
return state.contains(id);
}
Future<void> toggleFavorite(Asset asset) async {
if (!asset.isRemote) return; // TODO support local favorite assets
_setFavoriteForAssetId(asset.id, !_isFavorite(asset.id));
await ref.watch(assetProvider.notifier).toggleFavorite(
asset,
state.contains(asset.id),
);
}
}
final favoriteProvider =
StateNotifierProvider<FavoriteSelectionNotifier, Set<String>>((ref) {
return FavoriteSelectionNotifier(ref);
});
final favoriteAssetProvider = StateProvider((ref) {
final favorites = ref.watch(favoriteProvider);
return ref
.watch(assetProvider)
.allAssets
.where((element) => favorites.contains(element.id))
.toList();
});

36
mobile/lib/modules/favorite/ui/favorite_image.dart Normal file
View File

@ -0,0 +1,36 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/routing/router.dart';
import 'package:immich_mobile/shared/models/asset.dart';
import 'package:immich_mobile/shared/ui/immich_image.dart';
class FavoriteImage extends HookConsumerWidget {
final Asset asset;
final List<Asset> assets;
const FavoriteImage(this.asset, this.assets, {super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
void viewAsset() {
AutoRouter.of(context).push(
GalleryViewerRoute(
asset: asset,
assetList: assets,
),
);
}
return GestureDetector(
onTap: viewAsset,
child: ImmichImage(
asset,
width: 300,
height: 300,
),
);
}
}

68
mobile/lib/modules/favorite/views/favorites_page.dart Normal file
View File

@ -0,0 +1,68 @@
import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/favorite/providers/favorite_provider.dart';
import 'package:immich_mobile/modules/favorite/ui/favorite_image.dart';
import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
class FavoritesPage extends HookConsumerWidget {
const FavoritesPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
AppBar buildAppBar() {
return AppBar(
leading: IconButton(
onPressed: () => AutoRouter.of(context).pop(),
icon: const Icon(Icons.arrow_back_ios_rounded),
),
centerTitle: true,
automaticallyImplyLeading: false,
title: const Text(
'favorites_page_title',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
).tr(),
);
}
Widget buildImageGrid() {
final appSettingService = ref.watch(appSettingsServiceProvider);
if (ref.watch(favoriteAssetProvider).isNotEmpty) {
return SliverPadding(
padding: const EdgeInsets.only(top: 10.0),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:
appSettingService.getSetting(AppSettingsEnum.tilesPerRow),
crossAxisSpacing: 5.0,
mainAxisSpacing: 5,
),
delegate: SliverChildBuilderDelegate(
(
BuildContext context,
int index,
) {
return FavoriteImage(
ref.watch(favoriteAssetProvider)[index],
ref.watch(favoriteAssetProvider),
);
},
childCount: ref.watch(favoriteAssetProvider).length,
),
),
);
}
return const SliverToBoxAdapter();
}
return Scaffold(
appBar: buildAppBar(),
body: CustomScrollView(
slivers: [buildImageGrid()],
),
);
}
}

11
mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
View File

@ -2,6 +2,7 @@ import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/favorite/providers/favorite_provider.dart';
import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
import 'package:immich_mobile/routing/router.dart';
import 'package:immich_mobile/shared/models/asset.dart';
@ -110,6 +111,16 @@ class ThumbnailImage extends HookConsumerWidget {
size: 18,
),
),
if (ref.watch(favoriteProvider).contains(asset.id))
const Positioned(
left: 10,
bottom: 5,
child: Icon(
Icons.star,
color: Colors.white,
size: 18,
),
),
if (!asset.isImage)
Positioned(
top: 5,

2
mobile/lib/routing/router.dart
View File

@ -15,6 +15,7 @@ import 'package:immich_mobile/modules/backup/views/album_preview_page.dart';
import 'package:immich_mobile/modules/backup/views/backup_album_selection_page.dart';
import 'package:immich_mobile/modules/backup/views/backup_controller_page.dart';
import 'package:immich_mobile/modules/backup/views/failed_backup_status_page.dart';
import 'package:immich_mobile/modules/favorite/views/favorites_page.dart';
import 'package:immich_mobile/modules/home/views/home_page.dart';
import 'package:immich_mobile/modules/login/views/change_password_page.dart';
import 'package:immich_mobile/modules/login/views/login_page.dart';
@ -55,6 +56,7 @@ part 'router.gr.dart';
AutoRoute(page: BackupControllerPage, guards: [AuthGuard]),
AutoRoute(page: SearchResultPage, guards: [AuthGuard]),
AutoRoute(page: CreateAlbumPage, guards: [AuthGuard]),
AutoRoute(page: FavoritesPage, guards: [AuthGuard]),
CustomRoute<AssetSelectionPageResult?>(
page: AssetSelectionPage,
guards: [AuthGuard],

14
mobile/lib/routing/router.gr.dart
View File

@ -77,6 +77,10 @@ class _$AppRouter extends RootStackRouter {
isSharedAlbum: args.isSharedAlbum,
initialAssets: args.initialAssets));
},
FavoritesRoute.name: (routeData) {
return MaterialPageX<dynamic>(
routeData: routeData, child: const FavoritesPage());
},
AssetSelectionRoute.name: (routeData) {
return CustomPage<AssetSelectionPageResult?>(
routeData: routeData,
@ -197,6 +201,8 @@ class _$AppRouter extends RootStackRouter {
path: '/search-result-page', guards: [authGuard]),
RouteConfig(CreateAlbumRoute.name,
path: '/create-album-page', guards: [authGuard]),
RouteConfig(FavoritesRoute.name,
path: '/favorites-page', guards: [authGuard]),
RouteConfig(AssetSelectionRoute.name,
path: '/asset-selection-page', guards: [authGuard]),
RouteConfig(SelectUserForSharingRoute.name,
@ -386,6 +392,14 @@ class CreateAlbumRouteArgs {
}
}
/// generated route for
/// [FavoritesPage]
class FavoritesRoute extends PageRouteInfo<void> {
const FavoritesRoute() : super(FavoritesRoute.name, path: '/favorites-page');
static const String name = 'FavoritesRoute';
}
/// generated route for
/// [AssetSelectionPage]
class AssetSelectionRoute extends PageRouteInfo<void> {

9
mobile/lib/shared/models/asset.dart
View File

@ -23,7 +23,8 @@ class Asset {
latitude = remote.exifInfo?.latitude?.toDouble(),
longitude = remote.exifInfo?.longitude?.toDouble(),
exifInfo =
remote.exifInfo != null ? ExifInfo.fromDto(remote.exifInfo!) : null;
remote.exifInfo != null ? ExifInfo.fromDto(remote.exifInfo!) : null,
isFavorite = remote.isFavorite;
Asset.local(AssetEntity local, String owner)
: localId = local.id,
@ -37,6 +38,7 @@ class Asset {
deviceId = Hive.box(userInfoBox).get(deviceIdKey),
ownerId = owner,
modifiedAt = local.modifiedDateTime.toUtc(),
isFavorite = local.isFavorite,
createdAt = local.createDateTime.toUtc() {
if (createdAt.year == 1970) {
createdAt = modifiedAt;
@ -59,6 +61,7 @@ class Asset {
required this.fileName,
this.livePhotoVideoId,
this.exifInfo,
required this.isFavorite,
});
AssetEntity? _local;
@ -111,6 +114,8 @@ class Asset {
ExifInfo? exifInfo;
bool isFavorite;
String get id => isLocal ? localId.toString() : remoteId!;
String get name => p.withoutExtension(fileName);
@ -150,6 +155,7 @@ class Asset {
json["height"] = height;
json["fileName"] = fileName;
json["livePhotoVideoId"] = livePhotoVideoId;
json["isFavorite"] = isFavorite;
if (exifInfo != null) {
json["exifInfo"] = exifInfo!.toJson();
}
@ -179,6 +185,7 @@ class Asset {
fileName: json["fileName"],
livePhotoVideoId: json["livePhotoVideoId"],
exifInfo: ExifInfo.fromJson(json["exifInfo"]),
isFavorite: json["isFavorite"],
);
}
return null;

20
mobile/lib/shared/providers/asset.provider.dart
View File

@ -268,6 +268,26 @@ class AssetNotifier extends StateNotifier<AssetsState> {
.where((a) => a.status == DeleteAssetStatus.SUCCESS)
.map((a) => a.id);
}
Future<bool> toggleFavorite(Asset asset, bool status) async {
final newAsset = await _assetService.changeFavoriteStatus(asset, status);
if (newAsset == null) {
log.severe("Change favorite status failed for asset ${asset.id}");
return asset.isFavorite;
}
await _updateAssetsState(
state.allAssets.map((a) {
if (asset.id == a.id) {
return Asset.remote(newAsset);
}
return a;
}).toList(),
);
return newAsset.isFavorite;
}
}
final assetProvider = StateNotifierProvider<AssetNotifier, AssetsState>((ref) {

9
mobile/lib/shared/services/asset.service.dart
View File

@ -104,4 +104,13 @@ class AssetService {
return null;
}
}
Future<AssetResponseDto?> updateAsset(Asset asset, UpdateAssetDto updateAssetDto) async {
return await _apiService.assetApi.updateAsset(asset.id, updateAssetDto);
}
Future<AssetResponseDto?> changeFavoriteStatus(Asset asset, bool isFavorite) {
return updateAsset(asset, UpdateAssetDto(isFavorite: isFavorite));
}
}

BIN
mobile/openapi/lib/model/album_response_dto.dart generated
View File

Binary file not shown.

1
mobile/test/asset_grid_data_structure_test.dart
View File

@ -20,6 +20,7 @@ void main() {
modifiedAt: date,
durationInSeconds: 0,
fileName: '',
isFavorite: false,
),
);
}