c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-28 06:31:58 +00:00
Code Releases Activity

chore(mobile): refactor detail panel (#11662)

Browse source 
* date time component

* rename to info_sheet

* simplify map info

* Edit datetime sheet

* fix janking when scroll on info sheet

* Location refactor

* refactor name

* Update date time after editing

* localize rebuild to smaller component

* restore advanced bottom sheet

* reassign EXIF back to local database

* remove print statements
This commit is contained in:
Alex 2024-08-09 08:43:47 -05:00 committed by GitHub
parent a144a1bec3
commit d346985457
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 580 additions and 609 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
mobile/assets/i18n/en-US.json
View file

@ -201,7 +201,7 @@
"delete_shared_link_dialog_title": "Delete Shared Link",
"description_input_hint_text": "Add description...",
"description_input_submit_error": "Error updating description, check the log for more details",
"edit_date_time_dialog_date_time": "Date and Time",
"edit_date_time_dialog_date_time": "Edit date and time",
"edit_date_time_dialog_timezone": "Timezone",
"edit_location_dialog_title": "Location",
"exif_bottom_sheet_description": "Add Description...",

3
mobile/devtools_options.yaml Normal file
View file

@ -0,0 +1,3 @@
description: This file stores settings for Dart & Flutter DevTools.
documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
extensions:

24
mobile/lib/entities/exif_info.entity.dart
View file

@ -170,6 +170,30 @@ class ExifInfo {
state.hashCode ^
country.hashCode ^
description.hashCode;
@override
String toString() {
return """
{
id: $id,
fileSize: $fileSize,
dateTimeOriginal: $dateTimeOriginal,
timeZone: $timeZone,
make: $make,
model: $model,
lens: $lens,
f: $f,
mm: $mm,
iso: $iso,
exposureSeconds: $exposureSeconds,
lat: $lat,
long: $long,
city: $city,
state: $state,
country: $country,
description: $description,
}""";
}
}
double? _exposureTimeToSeconds(String? s) {

4
mobile/lib/pages/common/gallery_viewer.page.dart
View file

@ -22,7 +22,7 @@ import 'package:immich_mobile/services/app_settings.service.dart';
import 'package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart';
import 'package:immich_mobile/widgets/asset_viewer/advanced_bottom_sheet.dart';
import 'package:immich_mobile/widgets/asset_viewer/bottom_gallery_bar.dart';
import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_bottom_sheet.dart';
import 'package:immich_mobile/widgets/asset_viewer/detail_panel/detail_panel.dart';
import 'package:immich_mobile/widgets/asset_viewer/gallery_app_bar.dart';
import 'package:immich_mobile/widgets/common/immich_image.dart';
import 'package:immich_mobile/widgets/common/immich_thumbnail.dart';
@ -152,7 +152,7 @@ class GalleryViewerPage extends HookConsumerWidget {
.watch(appSettingsServiceProvider)
.getSetting<bool>(AppSettingsEnum.advancedTroubleshooting)
? AdvancedBottomSheet(assetDetail: asset)
: ExifBottomSheet(asset: asset),
: DetailPanel(asset: asset),
),
);
},

8
mobile/lib/pages/sharing/shared_link/shared_link_edit.page.dart
View file

@ -234,14 +234,6 @@ class SharedLinkEditPage extends HookConsumerWidget {
onSelected: (value) {
expiryAfter.value = value!;
},
inputDecorationTheme: themeData.inputDecorationTheme.copyWith(
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey.withOpacity(0.5)),
),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
),
dropdownMenuEntries: [
DropdownMenuEntry(
value: 0,

1
mobile/lib/services/asset.service.dart
View file

@ -162,6 +162,7 @@ class AssetService {
final dto = await _apiService.assetsApi.getAssetInfo(a.remoteId!);
if (dto != null && dto.exifInfo != null) {
final newExif = Asset.remote(dto).exifInfo!.copyWith(id: a.id);
a.exifInfo = newExif;
if (newExif != a.exifInfo) {
if (a.isInDb) {
_db.writeTxn(() => a.put(_db));

13
mobile/lib/services/asset_description.service.dart
View file

@ -43,6 +43,19 @@ class AssetDescriptionService {
}
}
}
String getAssetDescription(Asset asset) {
final localExifId = asset.exifInfo?.id;
// Guard [remoteAssetId] and [localExifId] null
if (localExifId == null) {
return "";
}
final exifInfo = _db.exifInfos.getSync(localExifId);
return exifInfo?.description ?? "";
}
}
final assetDescriptionServiceProvider = Provider(

31
mobile/lib/utils/immich_app_theme.dart
View file

@ -251,11 +251,13 @@ ThemeData getThemeData({required ColorScheme colorScheme}) {
borderSide: BorderSide(
color: primaryColor,
),
borderRadius: const BorderRadius.all(Radius.circular(15)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: colorScheme.outlineVariant,
),
borderRadius: const BorderRadius.all(Radius.circular(15)),
),
labelStyle: TextStyle(
color: primaryColor,
@ -268,5 +270,34 @@ ThemeData getThemeData({required ColorScheme colorScheme}) {
textSelectionTheme: TextSelectionThemeData(
cursorColor: primaryColor,
),
dropdownMenuTheme: DropdownMenuThemeData(
menuStyle: MenuStyle(
shape: WidgetStatePropertyAll<OutlinedBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
inputDecorationTheme: InputDecorationTheme(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: primaryColor,
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: colorScheme.outlineVariant,
),
borderRadius: const BorderRadius.all(Radius.circular(15)),
),
labelStyle: TextStyle(
color: primaryColor,
),
hintStyle: const TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.normal,
),
),
),
);
}

3
mobile/lib/utils/selection_handlers.dart
View file

@ -118,6 +118,7 @@ Future<void> handleEditDateTime(
initialTZ: timeZone,
initialTZOffset: offset,
);
if (dateTime == null) {
return;
}
@ -142,10 +143,12 @@ Future<void> handleEditLocation(
);
}
}
final location = await showLocationPicker(
context: context,
initialLatLng: initialLatLng,
);
if (location == null) {
return;
}

14
mobile/lib/widgets/asset_viewer/description_input.dart
View file

@ -6,6 +6,7 @@ import 'package:immich_mobile/entities/exif_info.entity.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/extensions/theme_extensions.dart';
import 'package:immich_mobile/providers/asset.provider.dart';
import 'package:immich_mobile/providers/user.provider.dart';
import 'package:immich_mobile/services/asset_description.service.dart';
import 'package:immich_mobile/widgets/common/immich_toast.dart';
@ -29,17 +30,16 @@ class DescriptionInput extends HookConsumerWidget {
final isFocus = useState(false);
final isTextEmpty = useState(controller.text.isEmpty);
final descriptionProvider = ref.watch(assetDescriptionServiceProvider);
final owner = ref.watch(currentUserProvider);
final hasError = useState(false);
final assetWithExif = ref.watch(assetDetailProvider(asset));
useEffect(
() {
controller.text = exifInfo?.description ?? '';
isTextEmpty.value = exifInfo?.description?.isEmpty ?? true;
controller.text = descriptionProvider.getAssetDescription(asset);
return null;
},
[exifInfo?.description],
[assetWithExif.value],
);
submitDescription(String description) async {
@ -49,6 +49,7 @@ class DescriptionInput extends HookConsumerWidget {
asset,
description,
);
controller.text = description;
} catch (error, stack) {
hasError.value = true;
_log.severe("Error updating description", error, stack);
@ -101,6 +102,11 @@ class DescriptionInput extends HookConsumerWidget {
hintText: 'description_input_hint_text'.tr(),
border: InputBorder.none,
suffixIcon: suffixIcon,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
disabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
focusedErrorBorder: InputBorder.none,
),
);
}

54
mobile/lib/widgets/asset_viewer/detail_panel/asset_date_time.dart Normal file
View file

@ -0,0 +1,54 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/extensions/asset_extensions.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/extensions/duration_extensions.dart';
import 'package:immich_mobile/providers/asset.provider.dart';
import 'package:immich_mobile/utils/selection_handlers.dart';
class AssetDateTime extends ConsumerWidget {
final Asset asset;
const AssetDateTime({super.key, required this.asset});
String getDateTimeString(Asset a) {
final (deltaTime, timeZone) = a.getTZAdjustedTimeAndOffset();
final date = DateFormat.yMMMEd().format(deltaTime);
final time = DateFormat.jm().format(deltaTime);
return '$date • $time GMT${timeZone.formatAsOffset()}';
}
@override
Widget build(BuildContext context, WidgetRef ref) {
final watchedAsset = ref.watch(assetDetailProvider(asset));
String formattedDateTime = getDateTimeString(asset);
void editDateTime() async {
await handleEditDateTime(ref, context, [asset]);
if (watchedAsset.value != null) {
formattedDateTime = getDateTimeString(watchedAsset.value!);
}
}
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
formattedDateTime,
style: context.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.w600,
),
),
if (asset.isRemote)
IconButton(
onPressed: editDateTime,
icon: const Icon(Icons.edit_outlined),
iconSize: 20,
),
],
);
}
}

44
mobile/lib/widgets/asset_viewer/detail_panel/asset_details.dart Normal file
View file

@ -0,0 +1,44 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/providers/asset.provider.dart';
import 'package:immich_mobile/widgets/asset_viewer/detail_panel/file_info.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/entities/exif_info.entity.dart';
import 'package:immich_mobile/widgets/asset_viewer/detail_panel/camera_info.dart';
class AssetDetails extends ConsumerWidget {
final Asset asset;
final ExifInfo? exifInfo;
const AssetDetails({
super.key,
required this.asset,
this.exifInfo,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final assetWithExif = ref.watch(assetDetailProvider(asset));
final ExifInfo? exifInfo = (assetWithExif.value ?? asset).exifInfo;
return Padding(
padding: const EdgeInsets.only(top: 24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"exif_bottom_sheet_details",
style: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color?.withAlpha(200),
fontWeight: FontWeight.w600,
),
).tr(),
FileInfo(asset: asset),
if (exifInfo?.make != null) CameraInfo(exifInfo: exifInfo!),
],
),
);
}
}

106
mobile/lib/widgets/asset_viewer/detail_panel/asset_location.dart Normal file
View file

@ -0,0 +1,106 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/providers/asset.provider.dart';
import 'package:immich_mobile/utils/selection_handlers.dart';
import 'package:immich_mobile/widgets/asset_viewer/detail_panel/exif_map.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/entities/exif_info.entity.dart';
class AssetLocation extends HookConsumerWidget {
final Asset asset;
const AssetLocation({
super.key,
required this.asset,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final assetWithExif = ref.watch(assetDetailProvider(asset));
final ExifInfo? exifInfo = (assetWithExif.value ?? asset).exifInfo;
final hasCoordinates = exifInfo?.hasCoordinates ?? false;
void editLocation() {
handleEditLocation(ref, context, [assetWithExif.value ?? asset]);
}
// Guard no lat/lng
if (!hasCoordinates) {
return asset.isRemote
? ListTile(
minLeadingWidth: 0,
contentPadding: const EdgeInsets.all(0),
leading: const Icon(Icons.location_on),
title: Text(
"exif_bottom_sheet_location_add",
style: context.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.w600,
color: context.primaryColor,
),
).tr(),
onTap: editLocation,
)
: const SizedBox.shrink();
}
Widget getLocationName() {
if (exifInfo == null) {
return const SizedBox.shrink();
}
final cityName = exifInfo.city;
final stateName = exifInfo.state;
bool hasLocationName = (cityName != null && stateName != null);
return hasLocationName
? Text(
"$cityName, $stateName",
style: context.textTheme.labelLarge,
)
: const SizedBox.shrink();
}
return Padding(
padding: EdgeInsets.only(top: asset.isRemote ? 0 : 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"exif_bottom_sheet_location",
style: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color?.withAlpha(200),
fontWeight: FontWeight.w600,
),
).tr(),
if (asset.isRemote)
IconButton(
onPressed: editLocation,
icon: const Icon(Icons.edit_outlined),
iconSize: 20,
),
],
),
asset.isRemote ? const SizedBox.shrink() : const SizedBox(height: 16),
ExifMap(
exifInfo: exifInfo!,
markerId: asset.remoteId,
),
const SizedBox(height: 16),
getLocationName(),
Text(
"${exifInfo.latitude!.toStringAsFixed(4)}, ${exifInfo.longitude!.toStringAsFixed(4)}",
style: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color?.withAlpha(150),
),
),
],
),
);
}
}

38
mobile/lib/widgets/asset_viewer/detail_panel/camera_info.dart Normal file
View file

@ -0,0 +1,38 @@
import 'package:flutter/material.dart';
import 'package:immich_mobile/entities/exif_info.entity.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
class CameraInfo extends StatelessWidget {
final ExifInfo exifInfo;
const CameraInfo({
super.key,
required this.exifInfo,
});
@override
Widget build(BuildContext context) {
final textColor = context.isDarkTheme ? Colors.white : Colors.black;
return ListTile(
contentPadding: const EdgeInsets.all(0),
dense: true,
leading: Icon(
Icons.camera,
color: textColor.withAlpha(200),
),
title: Text(
"${exifInfo.make} ${exifInfo.model}",
style: context.textTheme.labelLarge,
),
subtitle: exifInfo.f != null ||
exifInfo.exposureSeconds != null ||
exifInfo.mm != null ||
exifInfo.iso != null
? Text(
"ƒ/${exifInfo.fNumber} ${exifInfo.exposureTime} ${exifInfo.focalLength} mm ISO ${exifInfo.iso ?? ''} ",
style: context.textTheme.bodySmall,
)
: null,
);
}
}

37
mobile/lib/widgets/asset_viewer/detail_panel/detail_panel.dart Normal file
View file

@ -0,0 +1,37 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/widgets/asset_viewer/description_input.dart';
import 'package:immich_mobile/widgets/asset_viewer/detail_panel/asset_date_time.dart';
import 'package:immich_mobile/widgets/asset_viewer/detail_panel/asset_details.dart';
import 'package:immich_mobile/widgets/asset_viewer/detail_panel/asset_location.dart';
import 'package:immich_mobile/widgets/asset_viewer/detail_panel/people_info.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
class DetailPanel extends HookConsumerWidget {
final Asset asset;
const DetailPanel({super.key, required this.asset});
@override
Widget build(BuildContext context, WidgetRef ref) {
return ListView(
shrinkWrap: true,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
children: [
AssetDateTime(asset: asset),
asset.isRemote
? DescriptionInput(asset: asset)
: const SizedBox.shrink(),
PeopleInfo(asset: asset),
AssetLocation(asset: asset),
AssetDetails(asset: asset),
],
),
),
],
);
}
}

11
mobile/lib/widgets/asset_viewer/exif_sheet/exif_map.dart → mobile/lib/widgets/asset_viewer/detail_panel/exif_map.dart
View file

@ -8,13 +8,11 @@ import 'package:url_launcher/url_launcher.dart';
class ExifMap extends StatelessWidget {
final ExifInfo exifInfo;
final String formattedDateTime;
final String? markerId;
const ExifMap({
super.key,
required this.exifInfo,
required this.formattedDateTime,
this.markerId = 'marker',
});
@ -37,7 +35,7 @@ class ExifMap extends StatelessWidget {
host: '$latitude,$longitude',
queryParameters: {
'z': '$zoomLevel',
'q': '$latitude,$longitude($formattedDateTime)',
'q': '$latitude,$longitude',
},
);
if (await canLaunchUrl(uri)) {
@ -46,7 +44,7 @@ class ExifMap extends StatelessWidget {
} else if (Platform.isIOS) {
var params = {
'll': '$latitude,$longitude',
'q': formattedDateTime,
'q': '$latitude,$longitude',
'z': '$zoomLevel',
};
Uri uri = Uri.https('maps.apple.com', '/', params);
@ -63,9 +61,7 @@ class ExifMap extends StatelessWidget {
);
}
return Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: LayoutBuilder(
return LayoutBuilder(
builder: (context, constraints) {
return MapThumbnail(
centre: LatLng(
@ -88,7 +84,6 @@ class ExifMap extends StatelessWidget {
},
);
},
),
);
}
}

4
mobile/lib/widgets/asset_viewer/exif_sheet/exif_image_properties.dart → mobile/lib/widgets/asset_viewer/detail_panel/file_info.dart
View file

@ -3,10 +3,10 @@ import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/utils/bytes_units.dart';
class ExifImageProperties extends StatelessWidget {
class FileInfo extends StatelessWidget {
final Asset asset;
const ExifImageProperties({
const FileInfo({
super.key,
required this.asset,
});

102
mobile/lib/widgets/asset_viewer/detail_panel/people_info.dart Normal file
View file

@ -0,0 +1,102 @@
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/build_context_extensions.dart';
import 'package:immich_mobile/providers/asset_viewer/asset_people.provider.dart';
import 'package:immich_mobile/models/search/search_curated_content.model.dart';
import 'package:immich_mobile/widgets/search/curated_people_row.dart';
import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
import 'package:immich_mobile/routing/router.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
class PeopleInfo extends ConsumerWidget {
final Asset asset;
final EdgeInsets? padding;
const PeopleInfo({super.key, required this.asset, this.padding});
@override
Widget build(BuildContext context, WidgetRef ref) {
final peopleProvider =
ref.watch(assetPeopleNotifierProvider(asset).notifier);
final people = ref
.watch(assetPeopleNotifierProvider(asset))
.value
?.where((p) => !p.isHidden);
final double imageSize = math.min(context.width / 3, 150);
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();
});
}
final curatedPeople = people
?.map((p) => SearchCuratedContent(id: p.id, label: p.name))
.toList() ??
[];
return AnimatedCrossFade(
crossFadeState: (people?.isEmpty ?? true)
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: const Duration(milliseconds: 200),
firstChild: Container(),
secondChild: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Column(
children: [
Padding(
padding: padding ?? EdgeInsets.zero,
child: 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: 16.0),
child: CuratedPeopleRow(
padding: padding,
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),
},
),
),
),
],
),
),
);
}
}

212
mobile/lib/widgets/asset_viewer/exif_sheet/exif_bottom_sheet.dart
View file

@ -1,212 +0,0 @@
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/build_context_extensions.dart';
import 'package:immich_mobile/extensions/duration_extensions.dart';
import 'package:immich_mobile/widgets/asset_viewer/description_input.dart';
import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_detail.dart';
import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_image_properties.dart';
import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_location.dart';
import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_people.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/entities/exif_info.entity.dart';
import 'package:immich_mobile/providers/asset.provider.dart';
import 'package:immich_mobile/utils/selection_handlers.dart';
class ExifBottomSheet extends HookConsumerWidget {
final Asset asset;
const ExifBottomSheet({super.key, required this.asset});
@override
Widget build(BuildContext context, WidgetRef ref) {
final assetWithExif = ref.watch(assetDetailProvider(asset));
var textColor = context.colorScheme.onSurface;
final ExifInfo? exifInfo = (assetWithExif.value ?? asset).exifInfo;
// Format the date time with the timezone
final (dt, timeZone) =
(assetWithExif.value ?? asset).getTZAdjustedTimeAndOffset();
final date = DateFormat.yMMMEd().format(dt);
final time = DateFormat.jm().format(dt);
String formattedDateTime = '$date • $time GMT${timeZone.formatAsOffset()}';
final dateWidget = Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
formattedDateTime,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
if (asset.isRemote)
IconButton(
onPressed: () => handleEditDateTime(
ref,
context,
[assetWithExif.value ?? asset],
),
icon: const Icon(Icons.edit_outlined),
iconSize: 20,
),
],
);
return SingleChildScrollView(
padding: const EdgeInsets.only(
bottom: 50,
),
child: LayoutBuilder(
builder: (context, constraints) {
final horizontalPadding = constraints.maxWidth > 600 ? 24.0 : 16.0;
if (constraints.maxWidth > 600) {
// Two column
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
child: Column(
children: [
dateWidget,
if (asset.isRemote)
DescriptionInput(asset: asset, exifInfo: exifInfo),
],
),
),
ExifPeople(
asset: asset,
padding: EdgeInsets.symmetric(
horizontal: horizontalPadding,
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: horizontalPadding,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 8.0),
child: ExifLocation(
asset: asset,
exifInfo: exifInfo,
editLocation: () => handleEditLocation(
ref,
context,
[assetWithExif.value ?? asset],
),
formattedDateTime: formattedDateTime,
),
),
),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 300),
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: ExifDetail(asset: asset, exifInfo: exifInfo),
),
),
],
),
),
],
);
}
// One column
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: horizontalPadding,
),
child: Column(
children: [
dateWidget,
if (asset.isRemote)
DescriptionInput(asset: asset, exifInfo: exifInfo),
Padding(
padding: EdgeInsets.only(top: asset.isRemote ? 0 : 16.0),
child: ExifLocation(
asset: asset,
exifInfo: exifInfo,
editLocation: () => handleEditLocation(
ref,
context,
[assetWithExif.value ?? asset],
),
formattedDateTime: formattedDateTime,
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ExifPeople(
asset: asset,
padding: EdgeInsets.symmetric(
horizontal: horizontalPadding,
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
"exif_bottom_sheet_details",
style: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color
?.withAlpha(200),
fontWeight: FontWeight.w600,
),
).tr(),
),
ExifImageProperties(asset: asset),
if (exifInfo?.make != null)
ListTile(
contentPadding: const EdgeInsets.all(0),
dense: true,
leading: Icon(
Icons.camera,
color: textColor.withAlpha(200),
),
title: Text(
"${exifInfo!.make} ${exifInfo.model}",
style: context.textTheme.labelLarge,
),
subtitle: exifInfo.f != null ||
exifInfo.exposureSeconds != null ||
exifInfo.mm != null ||
exifInfo.iso != null
? Text(
"ƒ/${exifInfo.fNumber} ${exifInfo.exposureTime} ${exifInfo.focalLength} mm ISO ${exifInfo.iso ?? ''} ",
style: context.textTheme.bodySmall,
)
: null,
),
],
),
),
const SizedBox(height: 50),
],
);
},
),
);
}
}

60
mobile/lib/widgets/asset_viewer/exif_sheet/exif_detail.dart
View file

@ -1,60 +0,0 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_image_properties.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/entities/exif_info.entity.dart';
class ExifDetail extends StatelessWidget {
final Asset asset;
final ExifInfo? exifInfo;
const ExifDetail({
super.key,
required this.asset,
this.exifInfo,
});
@override
Widget build(BuildContext context) {
final textColor = context.isDarkTheme ? Colors.white : Colors.black;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
"exif_bottom_sheet_details",
style: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color?.withAlpha(200),
fontWeight: FontWeight.w600,
),
).tr(),
),
ExifImageProperties(asset: asset),
if (exifInfo?.make != null)
ListTile(
contentPadding: const EdgeInsets.all(0),
dense: true,
leading: Icon(
Icons.camera,
color: textColor.withAlpha(200),
),
title: Text(
"${exifInfo?.make} ${exifInfo?.model}",
style: context.textTheme.labelLarge,
),
subtitle: exifInfo?.f != null ||
exifInfo?.exposureSeconds != null ||
exifInfo?.mm != null ||
exifInfo?.iso != null
? Text(
"ƒ/${exifInfo?.fNumber} ${exifInfo?.exposureTime} ${exifInfo?.focalLength} mm ISO ${exifInfo?.iso ?? ''} ",
style: context.textTheme.bodySmall,
)
: null,
),
],
);
}
}

105
mobile/lib/widgets/asset_viewer/exif_sheet/exif_location.dart
View file

@ -1,105 +0,0 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_map.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/entities/exif_info.entity.dart';
class ExifLocation extends StatelessWidget {
final Asset asset;
final ExifInfo? exifInfo;
final void Function() editLocation;
final String formattedDateTime;
const ExifLocation({
super.key,
required this.asset,
required this.exifInfo,
required this.editLocation,
required this.formattedDateTime,
});
@override
Widget build(BuildContext context) {
final hasCoordinates = exifInfo?.hasCoordinates ?? false;
// Guard no lat/lng
if (!hasCoordinates) {
return asset.isRemote
? ListTile(
minLeadingWidth: 0,
contentPadding: const EdgeInsets.all(0),
leading: const Icon(Icons.location_on),
title: Text(
"exif_bottom_sheet_location_add",
style: context.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.w600,
color: context.primaryColor,
),
).tr(),
onTap: editLocation,
)
: const SizedBox.shrink();
}
return Column(
children: [
// Location
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"exif_bottom_sheet_location",
style: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color?.withAlpha(200),
fontWeight: FontWeight.w600,
),
).tr(),
if (asset.isRemote)
IconButton(
onPressed: editLocation,
icon: const Icon(Icons.edit_outlined),
iconSize: 20,
),
],
),
ExifMap(
exifInfo: exifInfo!,
formattedDateTime: formattedDateTime,
markerId: asset.remoteId,
),
RichText(
text: TextSpan(
style: context.textTheme.labelLarge,
children: [
if (exifInfo != null && exifInfo?.city != null)
TextSpan(
text: exifInfo!.city,
),
if (exifInfo != null &&
exifInfo?.city != null &&
exifInfo?.state != null)
const TextSpan(
text: ", ",
),
if (exifInfo != null && exifInfo?.state != null)
TextSpan(
text: exifInfo!.state,
),
],
),
),
Text(
"${exifInfo!.latitude!.toStringAsFixed(4)}, ${exifInfo!.longitude!.toStringAsFixed(4)}",
style: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color?.withAlpha(150),
),
),
],
),
],
);
}
}

97
mobile/lib/widgets/asset_viewer/exif_sheet/exif_people.dart
View file

@ -1,97 +0,0 @@
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/build_context_extensions.dart';
import 'package:immich_mobile/providers/asset_viewer/asset_people.provider.dart';
import 'package:immich_mobile/models/search/search_curated_content.model.dart';
import 'package:immich_mobile/widgets/search/curated_people_row.dart';
import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
import 'package:immich_mobile/routing/router.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
class ExifPeople extends ConsumerWidget {
final Asset asset;
final EdgeInsets? padding;
const ExifPeople({super.key, required this.asset, this.padding});
@override
Widget build(BuildContext context, WidgetRef ref) {
final peopleProvider =
ref.watch(assetPeopleNotifierProvider(asset).notifier);
final people = ref
.watch(assetPeopleNotifierProvider(asset))
.value
?.where((p) => !p.isHidden);
final double imageSize = math.min(context.width / 3, 150);
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();
});
}
if (people?.isEmpty ?? true) {
// Empty list or loading
return Container();
}
final curatedPeople = people
?.map((p) => SearchCuratedContent(id: p.id, label: p.name))
.toList() ??
[];
return Column(
children: [
Padding(
padding: padding ?? EdgeInsets.zero,
child: 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(
padding: padding,
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),
},
),
),
),
],
);
}
}

134
mobile/lib/widgets/common/date_time_picker.dart
View file

@ -84,6 +84,19 @@ class _DateTimePicker extends HookWidget {
final date = useState<DateTime>(initialDateTime ?? DateTime.now());
final tzOffset = useState<_TimeZoneOffset>(_getInitiationLocation());
final timeZones = useMemoized(() => getAllTimeZones(), const []);
final menuEntries = timeZones
.map(
(timezone) => DropdownMenuEntry<_TimeZoneOffset>(
value: timezone,
label: timezone.display,
style: ButtonStyle(
textStyle: WidgetStatePropertyAll(
context.textTheme.bodyMedium,
),
),
),
)
.toList();
void pickDate() async {
final now = DateTime.now();
@ -120,71 +133,10 @@ class _DateTimePicker extends HookWidget {
context.pop(dtWithOffset);
}
return AlertDialog(
contentPadding: const EdgeInsets.all(30),
alignment: Alignment.center,
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"edit_date_time_dialog_date_time",
textAlign: TextAlign.center,
).tr(),
TextButton.icon(
onPressed: pickDate,
icon: Text(
DateFormat("dd-MM-yyyy hh:mm a").format(date.value),
style: context.textTheme.bodyLarge
?.copyWith(color: context.primaryColor),
),
label: const Icon(
Icons.edit_outlined,
size: 18,
),
),
const Text(
"edit_date_time_dialog_timezone",
textAlign: TextAlign.center,
).tr(),
DropdownMenu(
menuHeight: 300,
width: 280,
inputDecorationTheme: const InputDecorationTheme(
border: InputBorder.none,
contentPadding: EdgeInsets.zero,
),
trailingIcon: Padding(
padding: const EdgeInsets.only(right: 10),
child: Icon(
Icons.arrow_drop_down,
color: context.primaryColor,
),
),
textStyle: context.textTheme.bodyLarge?.copyWith(
color: context.primaryColor,
),
menuStyle: const MenuStyle(
fixedSize: WidgetStatePropertyAll(Size.fromWidth(350)),
alignment: Alignment(-1.25, 0.5),
),
onSelected: (value) => tzOffset.value = value!,
initialSelection: tzOffset.value,
dropdownMenuEntries: timeZones
.map(
(t) => DropdownMenuEntry<_TimeZoneOffset>(
value: t,
label: t.display,
style: ButtonStyle(
textStyle: WidgetStatePropertyAll(
context.textTheme.bodyMedium,
),
),
),
)
.toList(),
),
],
),
return LayoutBuilder(
builder: (context, constraint) => AlertDialog(
contentPadding:
const EdgeInsets.symmetric(vertical: 32, horizontal: 18),
actions: [
TextButton(
onPressed: () => context.pop(),
@ -207,6 +159,58 @@ class _DateTimePicker extends HookWidget {
).tr(),
),
],
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"edit_date_time_dialog_date_time",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
).tr(),
const SizedBox(height: 32),
ListTile(
tileColor: context.colorScheme.surfaceContainerHighest,
shape: ShapeBorder.lerp(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
1,
),
trailing: Icon(
Icons.edit_outlined,
size: 18,
color: context.primaryColor,
),
title: Text(
DateFormat("dd-MM-yyyy hh:mm a").format(date.value),
style: context.textTheme.bodyMedium,
).tr(),
onTap: pickDate,
),
const SizedBox(height: 24),
DropdownMenu(
width: 275,
menuHeight: 300,
trailingIcon: Icon(
Icons.arrow_drop_down,
color: context.primaryColor,
),
hintText: "edit_date_time_dialog_timezone".tr(),
label: const Text('edit_date_time_dialog_timezone').tr(),
textStyle: context.textTheme.bodyMedium,
onSelected: (value) => tzOffset.value = value!,
initialSelection: tzOffset.value,
dropdownMenuEntries: menuEntries,
),
],
),
),
);
}
}

4
mobile/lib/widgets/common/immich_app_bar.dart
View file

@ -65,8 +65,8 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
size: widgetSize,
)
: UserCircleAvatar(
radius: 15,
size: 27,
radius: 17,
size: 31,
user: user,
),
),

8
mobile/lib/widgets/search/search_filter/common/dropdown.dart
View file

@ -18,13 +18,6 @@ class SearchDropdown<T> extends StatelessWidget {
@override
Widget build(BuildContext context) {
final inputDecorationTheme = InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
),
contentPadding: const EdgeInsets.only(left: 16),
);
final menuStyle = MenuStyle(
shape: WidgetStatePropertyAll<OutlinedBorder>(
RoundedRectangleBorder(
@ -40,7 +33,6 @@ class SearchDropdown<T> extends StatelessWidget {
width: constraints.maxWidth,
dropdownMenuEntries: dropdownMenuEntries,
label: label,
inputDecorationTheme: inputDecorationTheme,
menuStyle: menuStyle,
trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),