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

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

111
mobile/lib/widgets/search/curated_people_row.dart Normal file
View file

@ -0,0 +1,111 @@
import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/models/search/search_curated_content.model.dart';
import 'package:immich_mobile/widgets/search/thumbnail_with_info.dart';
import 'package:immich_mobile/entities/store.entity.dart';
import 'package:immich_mobile/utils/image_url_builder.dart';
class CuratedPeopleRow extends StatelessWidget {
final List<SearchCuratedContent> content;
final EdgeInsets? padding;
/// Callback with the content and the index when tapped
final Function(SearchCuratedContent, int)? onTap;
final Function(SearchCuratedContent, int)? onNameTap;
const CuratedPeopleRow({
super.key,
required this.content,
this.onTap,
this.padding,
required this.onNameTap,
});
@override
Widget build(BuildContext context) {
const imageSize = 60.0;
// Guard empty [content]
if (content.isEmpty) {
// Return empty thumbnail
return Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: SizedBox(
width: imageSize,
height: imageSize,
child: ThumbnailWithInfo(
textInfo: '',
onTap: () {},
),
),
),
);
}
return ListView.builder(
padding: padding,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
final person = content[index];
final headers = {
"x-immich-user-token": Store.get(StoreKey.accessToken),
};
return Padding(
padding: const EdgeInsets.only(right: 18.0),
child: SizedBox(
width: imageSize,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
GestureDetector(
onTap: () => onTap?.call(person, index),
child: SizedBox(
height: imageSize,
child: Material(
shape: const CircleBorder(side: BorderSide.none),
elevation: 3,
child: CircleAvatar(
maxRadius: imageSize / 2,
backgroundImage: NetworkImage(
getFaceThumbnailUrl(person.id),
headers: headers,
),
),
),
),
),
if (person.label == "")
GestureDetector(
onTap: () => onNameTap?.call(person, index),
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(
"exif_bottom_sheet_person_add_person",
style: context.textTheme.labelLarge?.copyWith(
color: context.primaryColor,
),
).tr(),
),
)
else
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(
person.label,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: context.textTheme.labelLarge,
),
),
],
),
),
);
},
itemCount: content.length,
);
}
}

135
mobile/lib/widgets/search/curated_places_row.dart Normal file
View file

@ -0,0 +1,135 @@
import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
import 'package:immich_mobile/widgets/search/curated_row.dart';
import 'package:immich_mobile/widgets/search/thumbnail_with_info.dart';
import 'package:immich_mobile/routing/router.dart';
import 'package:immich_mobile/entities/store.entity.dart';
import 'package:maplibre_gl/maplibre_gl.dart';
class CuratedPlacesRow extends CuratedRow {
final bool isMapEnabled;
const CuratedPlacesRow({
super.key,
required super.content,
this.isMapEnabled = true,
super.imageSize,
super.onTap,
});
@override
Widget build(BuildContext context) {
// Calculating the actual index of the content based on the whether map is enabled or not.
// If enabled, inject map as the first item in the list (index 0) and so the actual content will start from index 1
final int actualContentIndex = isMapEnabled ? 1 : 0;
Widget buildMapThumbnail() {
return GestureDetector(
onTap: () => context.pushRoute(
const MapRoute(),
),
child: SizedBox.square(
dimension: imageSize,
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: MapThumbnail(
zoom: 2,
centre: const LatLng(
47,
5,
),
height: imageSize,
width: imageSize,
showAttribution: false,
),
),
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.black,
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
colors: [
Colors.blueGrey.withOpacity(0.0),
Colors.black.withOpacity(0.4),
],
stops: const [0.0, 0.4],
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: const Text(
"search_page_your_map",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14,
),
).tr(),
),
),
],
),
),
);
}
// Return empty thumbnail
if (!isMapEnabled && content.isEmpty) {
return Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: SizedBox(
width: imageSize,
height: imageSize,
child: ThumbnailWithInfo(
textInfo: '',
onTap: () {},
),
),
),
);
}
return ListView.builder(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(
horizontal: 16,
),
itemBuilder: (context, index) {
// Injecting Map thumbnail as the first element
if (isMapEnabled && index == 0) {
return buildMapThumbnail();
}
final actualIndex = index - actualContentIndex;
final object = content[actualIndex];
final thumbnailRequestUrl =
'${Store.get(StoreKey.serverEndpoint)}/asset/thumbnail/${object.id}';
return SizedBox(
width: imageSize,
height: imageSize,
child: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: ThumbnailWithInfo(
imageUrl: thumbnailRequestUrl,
textInfo: object.label,
onTap: () => onTap?.call(object, actualIndex),
),
),
);
},
itemCount: content.length + actualContentIndex,
);
}
}

66
mobile/lib/widgets/search/curated_row.dart Normal file
View file

@ -0,0 +1,66 @@
import 'package:flutter/material.dart';
import 'package:immich_mobile/models/search/search_curated_content.model.dart';
import 'package:immich_mobile/widgets/search/thumbnail_with_info.dart';
import 'package:immich_mobile/entities/store.entity.dart';
class CuratedRow extends StatelessWidget {
final List<SearchCuratedContent> content;
final double imageSize;
/// Callback with the content and the index when tapped
final Function(SearchCuratedContent, int)? onTap;
const CuratedRow({
super.key,
required this.content,
this.imageSize = 200,
this.onTap,
});
@override
Widget build(BuildContext context) {
// Guard empty [content]
if (content.isEmpty) {
// Return empty thumbnail
return Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: SizedBox(
width: imageSize,
height: imageSize,
child: ThumbnailWithInfo(
textInfo: '',
onTap: () {},
),
),
),
);
}
return ListView.builder(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(
horizontal: 16,
),
itemBuilder: (context, index) {
final object = content[index];
final thumbnailRequestUrl =
'${Store.get(StoreKey.serverEndpoint)}/asset/thumbnail/${object.id}';
return SizedBox(
width: imageSize,
height: imageSize,
child: Padding(
padding: const EdgeInsets.only(right: 4.0),
child: ThumbnailWithInfo(
imageUrl: thumbnailRequestUrl,
textInfo: object.label,
onTap: () => onTap?.call(object, index),
),
),
);
},
itemCount: content.length,
);
}
}

85
mobile/lib/widgets/search/explore_grid.dart Normal file
View file

@ -0,0 +1,85 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/models/search/search_curated_content.model.dart';
import 'package:immich_mobile/models/search/search_filter.model.dart';
import 'package:immich_mobile/widgets/search/thumbnail_with_info.dart';
import 'package:immich_mobile/routing/router.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/entities/store.entity.dart';
import 'package:immich_mobile/utils/image_url_builder.dart';
class ExploreGrid extends StatelessWidget {
final List<SearchCuratedContent> curatedContent;
final bool isPeople;
const ExploreGrid({
super.key,
required this.curatedContent,
this.isPeople = false,
});
@override
Widget build(BuildContext context) {
if (curatedContent.isEmpty) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: SizedBox(
height: 100,
width: 100,
child: ThumbnailWithInfo(
textInfo: '',
onTap: () {},
),
),
);
}
return GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 140,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
),
itemBuilder: (context, index) {
final content = curatedContent[index];
final thumbnailRequestUrl = isPeople
? getFaceThumbnailUrl(content.id)
: '${Store.get(StoreKey.serverEndpoint)}/asset/thumbnail/${content.id}';
return ThumbnailWithInfo(
imageUrl: thumbnailRequestUrl,
textInfo: content.label,
borderRadius: 0,
onTap: () {
isPeople
? context.pushRoute(
PersonResultRoute(
personId: content.id,
personName: content.label,
),
)
: context.pushRoute(
SearchInputRoute(
prefilter: SearchFilter(
people: {},
location: SearchLocationFilter(
city: content.label,
),
camera: SearchCameraFilter(),
date: SearchDateFilter(),
display: SearchDisplayFilters(
isNotInAlbum: false,
isArchive: false,
isFavorite: false,
),
mediaType: AssetType.other,
),
),
);
},
);
},
itemCount: curatedContent.length,
);
}
}

81
mobile/lib/widgets/search/person_name_edit_form.dart Normal file
View file

@ -0,0 +1,81 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/providers/search/people.provider.dart';
class PersonNameEditFormResult {
final bool success;
final String updatedName;
PersonNameEditFormResult(this.success, this.updatedName);
}
class PersonNameEditForm extends HookConsumerWidget {
final String personId;
final String personName;
const PersonNameEditForm({
super.key,
required this.personId,
required this.personName,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final controller = useTextEditingController(text: personName);
final isError = useState(false);
return AlertDialog(
title: const Text(
"search_page_person_add_name_dialog_title",
style: TextStyle(fontWeight: FontWeight.bold),
).tr(),
content: SingleChildScrollView(
child: TextFormField(
controller: controller,
autofocus: true,
decoration: InputDecoration(
hintText: 'search_page_person_add_name_dialog_hint'.tr(),
border: const OutlineInputBorder(),
errorText: isError.value ? 'Error occured' : null,
),
),
),
actions: [
TextButton(
onPressed: () => context.pop(
PersonNameEditFormResult(false, ''),
),
child: Text(
"search_page_person_add_name_dialog_cancel",
style: TextStyle(
color: Colors.red[300],
fontWeight: FontWeight.bold,
),
).tr(),
),
TextButton(
onPressed: () async {
isError.value = false;
final result = await ref.read(
updatePersonNameProvider(personId, controller.text).future,
);
isError.value = !result;
if (result) {
context.pop(PersonNameEditFormResult(true, controller.text));
}
},
child: Text(
"search_page_person_add_name_dialog_save",
style: TextStyle(
color: context.primaryColor,
fontWeight: FontWeight.bold,
),
).tr(),
),
],
);
}
}

121
mobile/lib/widgets/search/search_filter/camera_picker.dart Normal file
View file

@ -0,0 +1,121 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/models/search/search_filter.model.dart';
import 'package:immich_mobile/providers/search/search_filter.provider.dart';
import 'package:openapi/api.dart';
class CameraPicker extends HookConsumerWidget {
const CameraPicker({super.key, required this.onSelect, this.filter});
final Function(Map<String, String?>) onSelect;
final SearchCameraFilter? filter;
@override
Widget build(BuildContext context, WidgetRef ref) {
final makeTextController = useTextEditingController(text: filter?.make);
final modelTextController = useTextEditingController(text: filter?.model);
final selectedMake = useState<String?>(filter?.make);
final selectedModel = useState<String?>(filter?.model);
final make = ref.watch(
getSearchSuggestionsProvider(
SearchSuggestionType.cameraMake,
),
);
final models = ref.watch(
getSearchSuggestionsProvider(
SearchSuggestionType.cameraModel,
make: selectedMake.value,
),
);
final inputDecorationTheme = InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
),
contentPadding: const EdgeInsets.only(left: 16),
);
final menuStyle = MenuStyle(
shape: MaterialStatePropertyAll<OutlinedBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
);
return Container(
padding: const EdgeInsets.only(
// bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
DropdownMenu(
dropdownMenuEntries: switch (make) {
AsyncError() => [],
AsyncData(:final value) => value
.map(
(e) => DropdownMenuEntry(
value: e,
label: e,
),
)
.toList(),
_ => [],
},
width: context.width * 0.45,
menuHeight: 400,
label: const Text('search_filter_camera_make').tr(),
inputDecorationTheme: inputDecorationTheme,
controller: makeTextController,
menuStyle: menuStyle,
leadingIcon: const Icon(Icons.photo_camera_rounded),
trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
onSelected: (value) {
selectedMake.value = value.toString();
onSelect({
'make': selectedMake.value,
'model': selectedModel.value,
});
},
),
DropdownMenu(
dropdownMenuEntries: switch (models) {
AsyncError() => [],
AsyncData(:final value) => value
.map(
(e) => DropdownMenuEntry(
value: e,
label: e,
),
)
.toList(),
_ => [],
},
width: context.width * 0.45,
menuHeight: 400,
label: const Text('search_filter_camera_model').tr(),
inputDecorationTheme: inputDecorationTheme,
controller: modelTextController,
menuStyle: menuStyle,
leadingIcon: const Icon(Icons.camera),
trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
onSelected: (value) {
selectedModel.value = value.toString();
onSelect({
'make': selectedMake.value,
'model': selectedModel.value,
});
},
),
],
),
);
}
}

69
mobile/lib/widgets/search/search_filter/display_option_picker.dart Normal file
View file

@ -0,0 +1,69 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:immich_mobile/models/search/search_filter.model.dart';
enum DisplayOption {
notInAlbum,
favorite,
archive,
}
class DisplayOptionPicker extends HookWidget {
const DisplayOptionPicker({
super.key,
required this.onSelect,
this.filter,
});
final Function(Map<DisplayOption, bool>) onSelect;
final SearchDisplayFilters? filter;
@override
Widget build(BuildContext context) {
final options = useState<Map<DisplayOption, bool>>({
DisplayOption.notInAlbum: filter?.isNotInAlbum ?? false,
DisplayOption.favorite: filter?.isFavorite ?? false,
DisplayOption.archive: filter?.isArchive ?? false,
});
return ListView(
shrinkWrap: true,
children: [
CheckboxListTile(
title: const Text('search_filter_display_option_not_in_album').tr(),
value: options.value[DisplayOption.notInAlbum],
onChanged: (bool? value) {
options.value = {
...options.value,
DisplayOption.notInAlbum: value!,
};
onSelect(options.value);
},
),
CheckboxListTile(
title: const Text('search_filter_display_option_favorite').tr(),
value: options.value[DisplayOption.favorite],
onChanged: (value) {
options.value = {
...options.value,
DisplayOption.favorite: value!,
};
onSelect(options.value);
},
),
CheckboxListTile(
title: const Text('search_filter_display_option_archive').tr(),
value: options.value[DisplayOption.archive],
onChanged: (value) {
options.value = {
...options.value,
DisplayOption.archive: value!,
};
onSelect(options.value);
},
),
],
);
}
}

69
mobile/lib/widgets/search/search_filter/filter_bottom_sheet_scaffold.dart Normal file
View file

@ -0,0 +1,69 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
class FilterBottomSheetScaffold extends StatelessWidget {
const FilterBottomSheetScaffold({
super.key,
required this.child,
required this.onSearch,
required this.onClear,
required this.title,
this.expanded,
});
final bool? expanded;
final String title;
final Widget child;
final Function() onSearch;
final Function() onClear;
@override
Widget build(BuildContext context) {
buildChildWidget() {
if (expanded != null && expanded == true) {
return Expanded(child: child);
}
return child;
}
return SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
title,
style: context.textTheme.headlineSmall,
),
),
buildChildWidget(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
OutlinedButton(
onPressed: () {
onClear();
Navigator.of(context).pop();
},
child: const Text('action_common_clear').tr(),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: () {
onSearch();
Navigator.of(context).pop();
},
child: const Text('search_filter_apply').tr(),
),
],
),
),
],
),
);
}
}

176
mobile/lib/widgets/search/search_filter/location_picker.dart Normal file
View file

@ -0,0 +1,176 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/models/search/search_filter.model.dart';
import 'package:immich_mobile/providers/search/search_filter.provider.dart';
import 'package:openapi/api.dart';
class LocationPicker extends HookConsumerWidget {
const LocationPicker({super.key, required this.onSelected, this.filter});
final Function(Map<String, String?>) onSelected;
final SearchLocationFilter? filter;
@override
Widget build(BuildContext context, WidgetRef ref) {
final countryTextController =
useTextEditingController(text: filter?.country);
final stateTextController = useTextEditingController(text: filter?.state);
final cityTextController = useTextEditingController(text: filter?.city);
final selectedCountry = useState<String?>(filter?.country);
final selectedState = useState<String?>(filter?.state);
final selectedCity = useState<String?>(filter?.city);
final countries = ref.watch(
getSearchSuggestionsProvider(
SearchSuggestionType.country,
locationCountry: selectedCountry.value,
locationState: selectedState.value,
),
);
final states = ref.watch(
getSearchSuggestionsProvider(
SearchSuggestionType.state,
locationCountry: selectedCountry.value,
locationState: selectedState.value,
),
);
final cities = ref.watch(
getSearchSuggestionsProvider(
SearchSuggestionType.city,
locationCountry: selectedCountry.value,
locationState: selectedState.value,
),
);
final inputDecorationTheme = InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
),
contentPadding: const EdgeInsets.only(left: 16),
);
final menuStyle = MenuStyle(
shape: MaterialStatePropertyAll<OutlinedBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
);
return Column(
children: [
DropdownMenu(
dropdownMenuEntries: switch (countries) {
AsyncError() => [],
AsyncData(:final value) => value
.map(
(e) => DropdownMenuEntry(
value: e,
label: e,
),
)
.toList(),
_ => [],
},
menuHeight: 400,
width: context.width * 0.9,
label: const Text('search_filter_location_country').tr(),
inputDecorationTheme: inputDecorationTheme,
menuStyle: menuStyle,
controller: countryTextController,
trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
onSelected: (value) {
if (value.toString() == selectedCountry.value) {
return;
}
selectedCountry.value = value.toString();
stateTextController.value = TextEditingValue.empty;
cityTextController.value = TextEditingValue.empty;
onSelected({
'country': selectedCountry.value,
'state': null,
'city': null,
});
},
),
const SizedBox(
height: 16,
),
DropdownMenu(
dropdownMenuEntries: switch (states) {
AsyncError() => [],
AsyncData(:final value) => value
.map(
(e) => DropdownMenuEntry(
value: e,
label: e,
),
)
.toList(),
_ => [],
},
menuHeight: 400,
width: context.width * 0.9,
label: const Text('search_filter_location_state').tr(),
inputDecorationTheme: inputDecorationTheme,
menuStyle: menuStyle,
controller: stateTextController,
trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
onSelected: (value) {
if (value.toString() == selectedState.value) {
return;
}
selectedState.value = value.toString();
cityTextController.value = TextEditingValue.empty;
onSelected({
'country': selectedCountry.value,
'state': selectedState.value,
'city': null,
});
},
),
const SizedBox(
height: 16,
),
DropdownMenu(
dropdownMenuEntries: switch (cities) {
AsyncError() => [],
AsyncData(:final value) => value
.map(
(e) => DropdownMenuEntry(
value: e,
label: e,
),
)
.toList(),
_ => [],
},
menuHeight: 400,
width: context.width * 0.9,
label: const Text('search_filter_location_city').tr(),
inputDecorationTheme: inputDecorationTheme,
menuStyle: menuStyle,
controller: cityTextController,
trailingIcon: const Icon(Icons.arrow_drop_down_rounded),
selectedTrailingIcon: const Icon(Icons.arrow_drop_up_rounded),
onSelected: (value) {
selectedCity.value = value.toString();
onSelected({
'country': selectedCountry.value,
'state': selectedState.value,
'city': selectedCity.value,
});
},
),
],
);
}
}

49
mobile/lib/widgets/search/search_filter/media_type_picker.dart Normal file
View file

@ -0,0 +1,49 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
class MediaTypePicker extends HookWidget {
const MediaTypePicker({super.key, required this.onSelect, this.filter});
final Function(AssetType) onSelect;
final AssetType? filter;
@override
Widget build(BuildContext context) {
final selectedMediaType = useState(filter ?? AssetType.other);
return ListView(
shrinkWrap: true,
children: [
RadioListTile(
title: const Text("search_filter_media_type_all").tr(),
value: AssetType.other,
onChanged: (value) {
selectedMediaType.value = value!;
onSelect(value);
},
groupValue: selectedMediaType.value,
),
RadioListTile(
title: const Text("search_filter_media_type_image").tr(),
value: AssetType.image,
onChanged: (value) {
selectedMediaType.value = value!;
onSelect(value);
},
groupValue: selectedMediaType.value,
),
RadioListTile(
title: const Text("search_filter_media_type_video").tr(),
value: AssetType.video,
onChanged: (value) {
selectedMediaType.value = value!;
onSelect(value);
},
groupValue: selectedMediaType.value,
),
],
);
}
}

81
mobile/lib/widgets/search/search_filter/people_picker.dart Normal file
View file

@ -0,0 +1,81 @@
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/providers/search/people.provider.dart';
import 'package:immich_mobile/entities/store.entity.dart' as local_store;
import 'package:immich_mobile/utils/image_url_builder.dart';
import 'package:openapi/api.dart';
class PeoplePicker extends HookConsumerWidget {
const PeoplePicker({super.key, required this.onSelect, this.filter});
final Function(Set<PersonResponseDto>) onSelect;
final Set<PersonResponseDto>? filter;
@override
Widget build(BuildContext context, WidgetRef ref) {
var imageSize = 45.0;
final people = ref.watch(getAllPeopleProvider);
final headers = {
"x-immich-user-token":
local_store.Store.get(local_store.StoreKey.accessToken),
};
final selectedPeople = useState<Set<PersonResponseDto>>(filter ?? {});
return people.widgetWhen(
onData: (people) {
return ListView.builder(
shrinkWrap: true,
itemCount: people.length,
padding: const EdgeInsets.all(8),
itemBuilder: (context, index) {
final person = people[index];
return Card(
elevation: 0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15)),
),
child: ListTile(
title: Text(
person.name,
style: context.textTheme.bodyLarge,
),
leading: SizedBox(
height: imageSize,
child: Material(
shape: const CircleBorder(side: BorderSide.none),
elevation: 3,
child: CircleAvatar(
maxRadius: imageSize / 2,
backgroundImage: NetworkImage(
getFaceThumbnailUrl(person.id),
headers: headers,
),
),
),
),
onTap: () {
if (selectedPeople.value.contains(person)) {
selectedPeople.value.remove(person);
} else {
selectedPeople.value.add(person);
}
selectedPeople.value = {...selectedPeople.value};
onSelect(selectedPeople.value);
},
selected: selectedPeople.value.contains(person),
selectedTileColor: context.primaryColor.withOpacity(0.2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15)),
),
),
);
},
);
},
);
}
}

68
mobile/lib/widgets/search/search_filter/search_filter_chip.dart Normal file
View file

@ -0,0 +1,68 @@
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
class SearchFilterChip extends StatelessWidget {
final String label;
final Function() onTap;
final Widget? currentFilter;
final IconData icon;
const SearchFilterChip({
super.key,
required this.label,
required this.onTap,
required this.icon,
this.currentFilter,
});
@override
Widget build(BuildContext context) {
if (currentFilter != null) {
return GestureDetector(
onTap: onTap,
child: Card(
elevation: 0,
color: context.primaryColor.withAlpha(25),
shape: StadiumBorder(
side: BorderSide(color: context.primaryColor),
),
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 2.0, horizontal: 14.0),
child: Row(
children: [
Icon(
icon,
size: 18,
),
const SizedBox(width: 4.0),
currentFilter!,
],
),
),
),
);
}
return GestureDetector(
onTap: onTap,
child: Card(
elevation: 0,
shape:
StadiumBorder(side: BorderSide(color: Colors.grey.withAlpha(100))),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0, horizontal: 14.0),
child: Row(
children: [
Icon(
icon,
size: 18,
),
const SizedBox(width: 4.0),
Text(label),
],
),
),
),
);
}
}

19
mobile/lib/widgets/search/search_filter/search_filter_utils.dart Normal file
View file

@ -0,0 +1,19 @@
import 'package:flutter/material.dart';
Future<T> showFilterBottomSheet<T>({
required BuildContext context,
required Widget child,
bool isScrollControlled = false,
bool isDismissible = true,
}) async {
return await showModalBottomSheet(
context: context,
isScrollControlled: isScrollControlled,
useSafeArea: false,
isDismissible: isDismissible,
showDragHandle: isDismissible,
builder: (BuildContext context) {
return child;
},
);
}

47
mobile/lib/widgets/search/search_row_title.dart Normal file
View file

@ -0,0 +1,47 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
class SearchRowTitle extends StatelessWidget {
final Function() onViewAllPressed;
final String title;
final double top;
const SearchRowTitle({
super.key,
required this.onViewAllPressed,
required this.title,
this.top = 12,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
left: 16.0,
right: 16.0,
top: top,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: context.textTheme.bodyLarge?.copyWith(
fontWeight: FontWeight.w500,
),
),
TextButton(
onPressed: onViewAllPressed,
child: Text(
'search_page_view_all_button',
style: context.textTheme.labelLarge?.copyWith(
color: context.primaryColor,
),
).tr(),
),
],
),
);
}
}

95
mobile/lib/widgets/search/thumbnail_with_info.dart Normal file
View file

@ -0,0 +1,95 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/entities/store.entity.dart';
import 'package:immich_mobile/extensions/string_extensions.dart';
// ignore: must_be_immutable
class ThumbnailWithInfo extends StatelessWidget {
ThumbnailWithInfo({
super.key,
required this.textInfo,
this.imageUrl,
this.noImageIcon,
this.borderRadius = 10,
required this.onTap,
});
final String textInfo;
final String? imageUrl;
final Function onTap;
final IconData? noImageIcon;
double borderRadius;
@override
Widget build(BuildContext context) {
var textAndIconColor =
context.isDarkTheme ? Colors.grey[100] : Colors.grey[700];
return GestureDetector(
onTap: () {
onTap();
},
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius),
color: context.isDarkTheme ? Colors.grey[900] : Colors.grey[100],
),
child: imageUrl != null
? ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: CachedNetworkImage(
width: double.infinity,
height: double.infinity,
fit: BoxFit.cover,
imageUrl: imageUrl!,
httpHeaders: {
"x-immich-user-token": Store.get(StoreKey.accessToken),
},
errorWidget: (context, url, error) =>
const Icon(Icons.image_not_supported_outlined),
),
)
: Center(
child: Icon(
noImageIcon ?? Icons.not_listed_location,
color: textAndIconColor,
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius),
color: Colors.white,
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
colors: [
Colors.grey.withOpacity(0.0),
textInfo == ''
? Colors.black.withOpacity(0.1)
: Colors.black.withOpacity(0.5),
],
stops: const [0.0, 1.0],
),
),
),
Positioned(
bottom: 12,
left: 14,
child: Text(
textInfo == '' ? textInfo : textInfo.capitalize(),
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
),
],
),
);
}
}