helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

refactor(mobile): widgets (#9291)

Browse source 
* refactor(mobile): widgets

* update
This commit is contained in:
Alex 2024-05-06 23:04:21 -05:00 • committed by GitHub
parent 7520ffd6c3
commit 5806a3ce25
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
203 changed files with 318 additions and 318 deletions
Download patch file Download diff file Expand all files Collapse all files

210
mobile/lib/widgets/asset_viewer/exif_sheet/exif_bottom_sheet.dart Normal file
View file

@ -0,0 +1,210 @@
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.isDarkTheme ? Colors.white : Colors.black;
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),
],
),
),
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),
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 Normal file
View file

@ -0,0 +1,60 @@
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,
),
],
);
}
}

58
mobile/lib/widgets/asset_viewer/exif_sheet/exif_image_properties.dart Normal file
View file

@ -0,0 +1,58 @@
import 'package:flutter/material.dart';
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 {
final Asset asset;
const ExifImageProperties({
super.key,
required this.asset,
});
@override
Widget build(BuildContext context) {
final textColor = context.isDarkTheme ? Colors.white : Colors.black;
String resolution = asset.width != null && asset.height != null
? "${asset.height} x ${asset.width} "
: "";
String fileSize = asset.exifInfo?.fileSize != null
? formatBytes(asset.exifInfo!.fileSize!)
: "";
String text = resolution + fileSize;
final imgSizeString = text.isNotEmpty ? text : null;
String? title;
String? subtitle;
if (imgSizeString == null && asset.fileName.isNotEmpty) {
// There is only filename
title = asset.fileName;
} else if (imgSizeString != null && asset.fileName.isNotEmpty) {
// There is both filename and size information
title = asset.fileName;
subtitle = imgSizeString;
} else if (imgSizeString != null && asset.fileName.isEmpty) {
title = imgSizeString;
} else {
return const SizedBox.shrink();
}
return ListTile(
contentPadding: const EdgeInsets.all(0),
dense: true,
leading: Icon(
Icons.image,
color: textColor.withAlpha(200),
),
titleAlignment: ListTileTitleAlignment.center,
title: Text(
title,
style: context.textTheme.labelLarge,
),
subtitle: subtitle == null ? null : Text(subtitle),
);
}
}

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

@ -0,0 +1,105 @@
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),
),
),
],
),
],
);
}
}

94
mobile/lib/widgets/asset_viewer/exif_sheet/exif_map.dart Normal file
View file

@ -0,0 +1,94 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
import 'package:immich_mobile/entities/exif_info.entity.dart';
import 'package:maplibre_gl/maplibre_gl.dart';
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',
});
@override
Widget build(BuildContext context) {
final hasCoordinates = exifInfo.hasCoordinates;
Future<Uri?> createCoordinatesUri() async {
if (!hasCoordinates) {
return null;
}
final double latitude = exifInfo.latitude!;
final double longitude = exifInfo.longitude!;
const zoomLevel = 16;
if (Platform.isAndroid) {
Uri uri = Uri(
scheme: 'geo',
host: '$latitude,$longitude',
queryParameters: {
'z': '$zoomLevel',
'q': '$latitude,$longitude($formattedDateTime)',
},
);
if (await canLaunchUrl(uri)) {
return uri;
}
} else if (Platform.isIOS) {
var params = {
'll': '$latitude,$longitude',
'q': formattedDateTime,
'z': '$zoomLevel',
};
Uri uri = Uri.https('maps.apple.com', '/', params);
if (await canLaunchUrl(uri)) {
return uri;
}
}
return Uri(
scheme: 'https',
host: 'openstreetmap.org',
queryParameters: {'mlat': '$latitude', 'mlon': '$longitude'},
fragment: 'map=$zoomLevel/$latitude/$longitude',
);
}
return Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: LayoutBuilder(
builder: (context, constraints) {
return MapThumbnail(
centre: LatLng(
exifInfo.latitude ?? 0,
exifInfo.longitude ?? 0,
),
height: 150,
width: constraints.maxWidth,
zoom: 12.0,
assetMarkerRemoteId: markerId,
onTap: (tapPosition, latLong) async {
Uri? uri = await createCoordinatesUri();
if (uri == null) {
return;
}
debugPrint('Opening Map Uri: $uri');
launchUrl(uri);
},
);
},
),
);
}
}

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

@ -0,0 +1,97 @@
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),
},
),
),
),
],
);
}
}