self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-29 17:43:42 +02:00
Code Issues Releases Activity

feat(mobile): Add people list to exit bottom sheet (#6717)

Browse Source 
* feat(mobile): Define constants as 'const'

* feat(mobile): Add people list to asset bottom sheet

Add a list of people per asset in the exif bottom sheet, like on the
web.

Currently the list of people is loaded by making a request each time to
the server. This is the MVP approach.
In the future, the people information can be synced like we're doing
with the assets.

* styling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Emanuel Bennici 2024-03-06 17:15:54 +01:00 committed by GitHub
parent 52a52f9f40
commit ba12d92af3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 375 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
mobile/assets/i18n/de-DE.json
View File

@ -185,6 +185,7 @@
"exif_bottom_sheet_details": "DETAILS",
"exif_bottom_sheet_location": "STANDORT",
"exif_bottom_sheet_location_add": "Aufnahmeort hinzufügen",
"exif_bottom_sheet_people": "PERSONEN",
"experimental_settings_new_asset_list_subtitle": "In Arbeit",
"experimental_settings_new_asset_list_title": "Experimentelles Fotogitter aktivieren",
"experimental_settings_subtitle": "Benutzung auf eigene Gefahr!",
@ -476,4 +477,4 @@
"viewer_remove_from_stack": "Aus Stapel entfernen",
"viewer_stack_use_as_main_asset": "An Stapelanfang",
"viewer_unstack": "Stapel aufheben"
}
}

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

@ -185,6 +185,7 @@
"exif_bottom_sheet_details": "DETAILS",
"exif_bottom_sheet_location": "LOCATION",
"exif_bottom_sheet_location_add": "Add a location",
"exif_bottom_sheet_people": "PEOPLE",
"experimental_settings_new_asset_list_subtitle": "Work in progress",
"experimental_settings_new_asset_list_title": "Enable experimental photo grid",
"experimental_settings_subtitle": "Use at your own risk!",
@ -476,4 +477,4 @@
"viewer_remove_from_stack": "Remove from Stack",
"viewer_stack_use_as_main_asset": "Use as Main Asset",
"viewer_unstack": "Un-Stack"
}
}

3
mobile/assets/i18n/it-IT.json
View File

@ -185,6 +185,7 @@
"exif_bottom_sheet_details": "DETTAGLI",
"exif_bottom_sheet_location": "POSIZIONE",
"exif_bottom_sheet_location_add": "Add a location",
"exif_bottom_sheet_people": "PERSONE",
"experimental_settings_new_asset_list_subtitle": "Work in progress",
"experimental_settings_new_asset_list_title": "Attiva griglia di foto sperimentale",
"experimental_settings_subtitle": "Usalo a tuo rischio!",
@ -476,4 +477,4 @@
"viewer_remove_from_stack": "Rimuovi dalla pila",
"viewer_stack_use_as_main_asset": "Use as Main Asset",
"viewer_unstack": "Un-Stack"
}
}

51
mobile/lib/modules/asset_viewer/providers/asset_people.provider.dart Normal file
View File

@ -0,0 +1,51 @@
import 'package:immich_mobile/shared/models/asset.dart';
import 'package:immich_mobile/shared/services/asset.service.dart';
import 'package:logging/logging.dart';
import 'package:openapi/api.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'asset_people.provider.g.dart';
/// Maintains the list of people for an asset.
@riverpod
class AssetPeopleNotifier extends _$AssetPeopleNotifier {
final log = Logger('AssetPeopleNotifier');
@override
Future<List<PersonWithFacesResponseDto>> build(Asset asset) async {
if (!asset.isRemote) {
return [];
}
final list = await ref
.watch(assetServiceProvider)
.getRemotePeopleOfAsset(asset.remoteId!);
if (list == null) {
return [];
}
// explicitly a sorted slice to make it deterministic
// named people will be at the beginning, and names are sorted
// ascendingly
list.sort((a, b) {
final aNotEmpty = a.name.isNotEmpty;
final bNotEmpty = b.name.isNotEmpty;
if (aNotEmpty && !bNotEmpty) {
return -1;
} else if (!aNotEmpty && bNotEmpty) {
return 1;
} else if (!aNotEmpty && !bNotEmpty) {
return 0;
}
return a.name.compareTo(b.name);
});
return list;
}
Future<void> refresh() async {
// invalidate the state – this way we don't have to
// duplicate the code from build.
ref.invalidateSelf();
}
}

189
mobile/lib/modules/asset_viewer/providers/asset_people.provider.g.dart generated Normal file
View File

@ -0,0 +1,189 @@
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'asset_people.provider.dart';
// **************************************************************************
// RiverpodGenerator
// **************************************************************************
String _$assetPeopleNotifierHash() =>
r'192a4ee188f781000fe43f1675c49e1081ccc631';
/// Copied from Dart SDK
class _SystemHash {
_SystemHash._();
static int combine(int hash, int value) {
// ignore: parameter_assignments
hash = 0x1fffffff & (hash + value);
// ignore: parameter_assignments
hash = 0x1fffffff & (hash + ((0x0007ffff & hash) << 10));
return hash ^ (hash >> 6);
}
static int finish(int hash) {
// ignore: parameter_assignments
hash = 0x1fffffff & (hash + ((0x03ffffff & hash) << 3));
// ignore: parameter_assignments
hash = hash ^ (hash >> 11);
return 0x1fffffff & (hash + ((0x00003fff & hash) << 15));
}
}
abstract class _$AssetPeopleNotifier extends BuildlessAutoDisposeAsyncNotifier<
List<PersonWithFacesResponseDto>> {
late final Asset asset;
Future<List<PersonWithFacesResponseDto>> build(
Asset asset,
);
}
/// Maintains the list of people for an asset.
///
/// Copied from [AssetPeopleNotifier].
@ProviderFor(AssetPeopleNotifier)
const assetPeopleNotifierProvider = AssetPeopleNotifierFamily();
/// Maintains the list of people for an asset.
///
/// Copied from [AssetPeopleNotifier].
class AssetPeopleNotifierFamily
extends Family<AsyncValue<List<PersonWithFacesResponseDto>>> {
/// Maintains the list of people for an asset.
///
/// Copied from [AssetPeopleNotifier].
const AssetPeopleNotifierFamily();
/// Maintains the list of people for an asset.
///
/// Copied from [AssetPeopleNotifier].
AssetPeopleNotifierProvider call(
Asset asset,
) {
return AssetPeopleNotifierProvider(
asset,
);
}
@override
AssetPeopleNotifierProvider getProviderOverride(
covariant AssetPeopleNotifierProvider provider,
) {
return call(
provider.asset,
);
}
static const Iterable<ProviderOrFamily>? _dependencies = null;
@override
Iterable<ProviderOrFamily>? get dependencies => _dependencies;
static const Iterable<ProviderOrFamily>? _allTransitiveDependencies = null;
@override
Iterable<ProviderOrFamily>? get allTransitiveDependencies =>
_allTransitiveDependencies;
@override
String? get name => r'assetPeopleNotifierProvider';
}
/// Maintains the list of people for an asset.
///
/// Copied from [AssetPeopleNotifier].
class AssetPeopleNotifierProvider extends AutoDisposeAsyncNotifierProviderImpl<
AssetPeopleNotifier, List<PersonWithFacesResponseDto>> {
/// Maintains the list of people for an asset.
///
/// Copied from [AssetPeopleNotifier].
AssetPeopleNotifierProvider(
Asset asset,
) : this._internal(
() => AssetPeopleNotifier()..asset = asset,
from: assetPeopleNotifierProvider,
name: r'assetPeopleNotifierProvider',
debugGetCreateSourceHash:
const bool.fromEnvironment('dart.vm.product')
? null
: _$assetPeopleNotifierHash,
dependencies: AssetPeopleNotifierFamily._dependencies,
allTransitiveDependencies:
AssetPeopleNotifierFamily._allTransitiveDependencies,
asset: asset,
);
AssetPeopleNotifierProvider._internal(
super._createNotifier, {
required super.name,
required super.dependencies,
required super.allTransitiveDependencies,
required super.debugGetCreateSourceHash,
required super.from,
required this.asset,
}) : super.internal();
final Asset asset;
@override
Future<List<PersonWithFacesResponseDto>> runNotifierBuild(
covariant AssetPeopleNotifier notifier,
) {
return notifier.build(
asset,
);
}
@override
Override overrideWith(AssetPeopleNotifier Function() create) {
return ProviderOverride(
origin: this,
override: AssetPeopleNotifierProvider._internal(
() => create()..asset = asset,
from: from,
name: null,
dependencies: null,
allTransitiveDependencies: null,
debugGetCreateSourceHash: null,
asset: asset,
),
);
}
@override
AutoDisposeAsyncNotifierProviderElement<AssetPeopleNotifier,
List<PersonWithFacesResponseDto>> createElement() {
return _AssetPeopleNotifierProviderElement(this);
}
@override
bool operator ==(Object other) {
return other is AssetPeopleNotifierProvider && other.asset == asset;
}
@override
int get hashCode {
var hash = _SystemHash.combine(0, runtimeType.hashCode);
hash = _SystemHash.combine(hash, asset.hashCode);
return _SystemHash.finish(hash);
}
}
mixin AssetPeopleNotifierRef
on AutoDisposeAsyncNotifierProviderRef<List<PersonWithFacesResponseDto>> {
/// The parameter `asset` of this provider.
Asset get asset;
}
class _AssetPeopleNotifierProviderElement
extends AutoDisposeAsyncNotifierProviderElement<AssetPeopleNotifier,
List<PersonWithFacesResponseDto>> with AssetPeopleNotifierRef {
_AssetPeopleNotifierProviderElement(super.provider);
@override
Asset get asset => (origin as AssetPeopleNotifierProvider).asset;
}
// ignore_for_file: type=lint
// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member

86
mobile/lib/modules/asset_viewer/ui/exif_bottom_sheet.dart
View File

@ -1,13 +1,21 @@
import 'dart:io';
import 'dart:math' as math;
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/extensions/asset_extensions.dart';
import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/extensions/duration_extensions.dart';
import 'package:immich_mobile/modules/asset_viewer/providers/asset_people.provider.dart';
import 'package:immich_mobile/modules/asset_viewer/ui/description_input.dart';
import 'package:immich_mobile/modules/map/widgets/map_thumbnail.dart';
import 'package:immich_mobile/modules/search/models/curated_content.dart';
import 'package:immich_mobile/modules/search/ui/curated_people_row.dart';
import 'package:immich_mobile/modules/search/ui/person_name_edit_form.dart';
import 'package:immich_mobile/routing/router.dart';
import 'package:immich_mobile/shared/models/asset.dart';
import 'package:immich_mobile/shared/providers/asset.provider.dart';
import 'package:immich_mobile/utils/selection_handlers.dart';
@ -24,6 +32,10 @@ class ExifBottomSheet extends HookConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final assetWithExif = ref.watch(assetDetailProvider(asset));
final exifInfo = (assetWithExif.value ?? asset).exifInfo;
final peopleProvider =
ref.watch(assetPeopleNotifierProvider(asset).notifier);
final people = ref.watch(assetPeopleNotifierProvider(asset));
final double imageSize = math.min(context.width / 3, 150);
var textColor = context.isDarkTheme ? Colors.white : Colors.black;
bool hasCoordinates() =>
@ -212,6 +224,72 @@ class ExifBottomSheet extends HookConsumerWidget {
);
}
showPersonNameEditModel(
String personId,
String personName,
) {
return showDialog(
context: context,
builder: (BuildContext context) {
return PersonNameEditForm(personId: personId, personName: personName);
},
).then((_) {
// ensure the people list is up-to-date.
peopleProvider.refresh();
});
}
buildPeople() {
return people.widgetWhen(
onData: (data) {
// either the server is not reachable or this asset has no people
if (data.isEmpty) {
return Container();
}
final curatedPeople =
data.map((p) => CuratedContent(id: p.id, label: p.name)).toList();
return Column(
children: [
Align(
alignment: Alignment.topLeft,
child: Text(
"exif_bottom_sheet_people",
style: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color?.withAlpha(200),
fontWeight: FontWeight.w600,
),
).tr(),
),
SizedBox(
height: imageSize,
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: CuratedPeopleRow(
content: curatedPeople,
onTap: (content, index) {
context
.pushRoute(
PersonResultRoute(
personId: content.id,
personName: content.label,
),
)
.then((_) => peopleProvider.refresh());
},
onNameTap: (person, index) => {
showPersonNameEditModel(person.id, person.label),
},
),
),
),
],
);
},
);
}
buildDate() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -350,6 +428,12 @@ class ExifBottomSheet extends HookConsumerWidget {
child: buildLocation(),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 8.0),
child: buildPeople(),
),
),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 300),
child: Padding(
@ -382,6 +466,8 @@ class ExifBottomSheet extends HookConsumerWidget {
child: CircularProgressIndicator.adaptive(),
),
),
const SizedBox(height: 16),
buildPeople(),
buildLocation(),
SizedBox(height: hasCoordinates() ? 16.0 : 6.0),
buildDetail(),

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

@ -148,9 +148,9 @@ class GalleryViewerPage extends HookConsumerWidget {
}
void handleSwipeUpDown(DragUpdateDetails details) {
int sensitivity = 15;
int dxThreshold = 50;
double ratioThreshold = 3.0;
const int sensitivity = 15;
const int dxThreshold = 50;
const double ratioThreshold = 3.0;
if (isZoomed.value) {
return;

4
mobile/lib/modules/search/ui/curated_people_row.dart
View File

@ -44,10 +44,6 @@ class CuratedPeopleRow extends StatelessWidget {
return ListView.builder(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.only(
left: 16,
top: 8,
),
itemBuilder: (context, index) {
final person = content[index];
final headers = {

32
mobile/lib/modules/search/views/search_page.dart
View File

@ -78,19 +78,25 @@ class SearchPage extends HookConsumerWidget {
height: imageSize,
child: curatedPeople.widgetWhen(
onError: (error, stack) => const ScaffoldErrorBody(withIcon: false),
onData: (people) => CuratedPeopleRow(
content: people.take(12).toList(),
onTap: (content, index) {
context.pushRoute(
PersonResultRoute(
personId: content.id,
personName: content.label,
),
);
},
onNameTap: (person, index) => {
showNameEditModel(person.id, person.label),
},
onData: (people) => Padding(
padding: const EdgeInsets.only(
left: 16,
top: 8,
),
child: CuratedPeopleRow(
content: people.take(12).toList(),
onTap: (content, index) {
context.pushRoute(
PersonResultRoute(
personId: content.id,
personName: content.label,
),
);
},
onNameTap: (person, index) => {
showNameEditModel(person.id, person.label),
},
),
),
),
);

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

@ -61,6 +61,27 @@ class AssetService {
return (assetDto.map(Asset.remote).toList(), deleted.ids);
}
/// Returns the list of people of the given asset id.
// If the server is not reachable `null` is returned.
Future<List<PersonWithFacesResponseDto>?> getRemotePeopleOfAsset(
String remoteId,
) async {
try {
final AssetResponseDto? dto =
await _apiService.assetApi.getAssetInfo(remoteId);
return dto?.people;
} catch (error, stack) {
log.severe(
'Error while getting remote asset info: ${error.toString()}',
error,
stack,
);
return null;
}
}
/// Returns `null` if the server state did not change, else list of assets
Future<List<Asset>?> _getRemoteAssets(User user) async {
const int chunkSize = 10000;