feat: birthday memory on mobile (#32165)

feat: birthday memory on mobile (#32113)

* feat: birthday memory on mobile

* chore: remove yellow bg colors

* pr feedback

(cherry picked from commit 82cfc4b28b55c660d9c2da00c57437a20585a47b)

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
immich-push-o-matic[bot]
2026-10-06 13:51:26 +00:00
committed by GitHub
co-authored by Alex
parent bc87d064de
commit 62bcb0601f
14 changed files with 319 additions and 80 deletions
+1
View File
@@ -672,6 +672,7 @@
"birthdate_set_description": "Date of birth is used to calculate the age of this person at the time of a photo.",
"birthday_memory_age": "{age, selectordinal, one {#st} two {#nd} few {#rd} other {#th}} birthday",
"birthday_memory_title": "{name}'s birthday",
"birthday_memory_title_with_age": "{name}'s birthday · {age, plural, one {# year old} other {# years old}}",
"blurred_background": "Blurred background",
"browse_templates": "Browse templates",
"bugs_and_feature_requests": "Bugs & Feature Requests",
+1 -1
View File
@@ -67,4 +67,4 @@ SPEC CHECKSUMS:
PODFILE CHECKSUM: 3c43a700a4bffb4120bf696cad263aefd4bb3c8c
COCOAPODS: 1.17.0
COCOAPODS: 1.16.2
+3 -3
View File
@@ -16,14 +16,14 @@ enum MemoryTypeEnum {
abstract class MemoryData with _$MemoryData {
const MemoryData._();
const factory MemoryData({required int year}) = _MemoryData;
const factory MemoryData({required int year, String? personName}) = _MemoryData;
Map<String, dynamic> toMap() {
return <String, dynamic>{'year': year};
return <String, dynamic>{'year': year, 'personName': ?personName};
}
factory MemoryData.fromMap(Map<String, dynamic> map) {
return MemoryData(year: map['year'] as int);
return MemoryData(year: map['year'] as int, personName: map['personName'] as String?);
}
@visibleForTesting
@@ -24,7 +24,6 @@ class MemoryRepository extends DatabaseAccessor<Drift> with $MemoryRepositoryMix
),
])
..where(_db.memoryEntity.ownerId.equals(ownerId))
..where(_db.memoryEntity.type.equalsValue(MemoryTypeEnum.onThisDay))
..where(_db.memoryEntity.deletedAt.isNull());
if (onlyFavorites) {
+11 -5
View File
@@ -8,7 +8,6 @@ import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
import 'package:immich_mobile/domain/models/memory.model.dart';
import 'package:immich_mobile/generated/translations.g.dart';
import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
import 'package:immich_mobile/presentation/widgets/memory/memory_bottom_info.widget.dart';
import 'package:immich_mobile/presentation/widgets/memory/memory_card.widget.dart';
@@ -247,8 +246,6 @@ class MemoryPage extends HookConsumerWidget {
);
}
final yearsAgo = DateTime.now().year - memories[mIndex].data.year;
final title = context.t.years_ago(years: yearsAgo);
// Build horizontal page
final assetController = memoryAssetPageControllers[mIndex];
return Column(
@@ -287,7 +284,7 @@ class MemoryPage extends HookConsumerWidget {
color: Colors.black,
child: MemoryCard(
asset: asset,
title: title,
memory: memories[mIndex],
showTitle: index == 0,
isCurrent: mIndex == currentMemoryIndex.value && index == currentAssetPage.value,
),
@@ -348,7 +345,16 @@ class MemoryPage extends HookConsumerWidget {
],
),
),
MemoryBottomInfo(memory: memories[mIndex], title: title),
AnimatedBuilder(
animation: assetController,
builder: (context, child) {
int assetIndex = 0;
if (assetController.hasClients) {
assetIndex = (assetController.page ?? 0).round().clamp(0, memories[mIndex].assets.length - 1);
}
return MemoryBottomInfo(memory: memories[mIndex], asset: memories[mIndex].assets[assetIndex]);
},
),
],
);
},
@@ -1,13 +1,13 @@
import 'dart:async';
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/asyncvalue_extensions.dart';
import 'package:immich_mobile/generated/translations.g.dart';
import 'package:immich_mobile/presentation/pages/memory.page.dart';
import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
import 'package:immich_mobile/presentation/widgets/memory/memory_title.widget.dart';
import 'package:immich_mobile/providers/infrastructure/memory.provider.dart';
import 'package:immich_mobile/routing/router.dart';
@@ -75,8 +75,9 @@ class _MemoryListPageState extends ConsumerState<MemoryListPage> {
Positioned(
bottom: 16,
left: 16,
child: Text(
DateFormat.yMMMMd().format(memories[index].memoryAt),
right: 16,
child: MemoryTitle(
memory: memories[index],
style: const TextStyle(fontWeight: FontWeight.w600, color: Colors.white, fontSize: 15),
),
),
@@ -1,38 +1,42 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
import 'package:immich_mobile/domain/models/events.model.dart';
import 'package:immich_mobile/domain/models/memory.model.dart';
import 'package:immich_mobile/domain/utils/event_stream.dart';
import 'package:immich_mobile/generated/translations.g.dart';
import 'package:immich_mobile/presentation/widgets/memory/memory_title.widget.dart';
import 'package:immich_mobile/routing/router.dart';
import 'package:intl/intl.dart';
class MemoryBottomInfo extends StatelessWidget {
final Memory memory;
final String title;
const MemoryBottomInfo({super.key, required this.memory, required this.title});
final RemoteAsset asset;
const MemoryBottomInfo({super.key, required this.memory, required this.asset});
@override
Widget build(BuildContext context) {
final df = DateFormat.yMMMMd();
final fileCreatedDate = memory.assets.first.createdAt;
final fileCreatedDate = asset.createdAt;
return Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
spacing: 16.0,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(color: Colors.grey[400], fontSize: 13.0, fontWeight: FontWeight.w500),
),
Text(
df.format(fileCreatedDate.toLocal()),
style: const TextStyle(color: Colors.white, fontSize: 15.0, fontWeight: FontWeight.w500),
),
],
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
getMemoryTitle(context.t, memory, asset: asset),
style: TextStyle(color: Colors.grey[400], fontSize: 13.0, fontWeight: FontWeight.w500),
),
Text(
df.format(fileCreatedDate.toLocal()),
style: const TextStyle(color: Colors.white, fontSize: 15.0, fontWeight: FontWeight.w500),
),
],
),
),
Tooltip(
message: context.t.view_in_timeline,
@@ -3,21 +3,23 @@ import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
import 'package:immich_mobile/domain/models/memory.model.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer.widget.dart';
import 'package:immich_mobile/presentation/widgets/images/full_image.widget.dart';
import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
import 'package:immich_mobile/presentation/widgets/memory/memory_title.widget.dart';
import 'package:immich_mobile/utils/hooks/blurhash_hook.dart';
class MemoryCard extends StatelessWidget {
final RemoteAsset asset;
final String title;
final Memory memory;
final bool showTitle;
final bool isCurrent;
const MemoryCard({
required this.asset,
required this.title,
required this.memory,
required this.showTitle,
this.isCurrent = false,
super.key,
@@ -28,7 +30,7 @@ class MemoryCard extends StatelessWidget {
return Card(
color: Colors.black,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25.0)),
borderRadius: BorderRadius.all(Radius.circular(24.0)),
side: BorderSide(color: Colors.black, width: 1.0),
),
clipBehavior: Clip.hardEdge,
@@ -72,9 +74,10 @@ class MemoryCard extends StatelessWidget {
if (showTitle)
Positioned(
left: 18.0,
right: 18.0,
bottom: 18.0,
child: Text(
title,
child: MemoryTitle(
memory: memory,
style: context.textTheme.headlineMedium?.copyWith(color: Colors.white, fontWeight: FontWeight.w500),
),
),
@@ -4,9 +4,9 @@ import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/domain/models/memory.model.dart';
import 'package:immich_mobile/generated/translations.g.dart';
import 'package:immich_mobile/presentation/pages/memory.page.dart';
import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
import 'package:immich_mobile/presentation/widgets/memory/memory_title.widget.dart';
import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
import 'package:immich_mobile/providers/infrastructure/memory.provider.dart';
import 'package:immich_mobile/routing/router.dart';
@@ -22,22 +22,43 @@ class MemoryLane extends ConsumerWidget {
return const SizedBox.shrink();
}
return ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 200),
child: CarouselView(
itemExtent: 145.0,
shrinkExtent: 1.0,
elevation: 2,
backgroundColor: Colors.black,
overlayColor: WidgetStateProperty.all(Colors.white.withValues(alpha: 0.1)),
onTap: (index) {
ref.read(hapticFeedbackProvider.notifier).heavyImpact();
if (memories[index].assets.isNotEmpty) {
MemoryPage.setMemory(ref, memories[index]);
}
unawaited(context.pushRoute(MemoryRoute(memories: memories, memoryIndex: index)));
},
children: memories.map((memory) => MemoryCard(key: Key(memory.id), memory: memory)).toList(growable: false),
void handleTap(int index) {
ref.read(hapticFeedbackProvider.notifier).heavyImpact();
if (memories[index].assets.isNotEmpty) {
MemoryPage.setMemory(ref, memories[index]);
}
unawaited(context.pushRoute(MemoryRoute(memories: memories, memoryIndex: index)));
}
return SizedBox(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemExtent: 170.0,
itemCount: memories.length,
itemBuilder: (context, index) => Padding(
key: Key(memories[index].id),
padding: const EdgeInsets.all(4),
child: Material(
color: Colors.black,
elevation: 2,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(24))),
clipBehavior: Clip.antiAlias,
child: Stack(
fit: StackFit.expand,
children: [
MemoryCard(memory: memories[index]),
Material(
type: MaterialType.transparency,
child: InkWell(
overlayColor: WidgetStateProperty.all(Colors.white.withValues(alpha: 0.1)),
onTap: () => handleTap(index),
),
),
],
),
),
),
),
);
}
@@ -50,36 +71,27 @@ class MemoryCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final yearsAgo = DateTime.now().year - memory.data.year;
final title = context.t.years_ago(years: yearsAgo);
return Center(
child: Stack(
children: [
ColorFiltered(
colorFilter: ColorFilter.mode(Colors.black.withValues(alpha: 0.2), BlendMode.darken),
child: SizedBox(
width: 205,
height: 200,
child: Thumbnail.remote(
remoteId: memory.assets[0].id,
thumbhash: memory.assets[0].thumbHash ?? "",
fit: BoxFit.cover,
),
),
return Stack(
fit: StackFit.expand,
children: [
ColorFiltered(
colorFilter: ColorFilter.mode(Colors.black.withValues(alpha: 0.2), BlendMode.darken),
child: Thumbnail.remote(
remoteId: memory.assets[0].id,
thumbhash: memory.assets[0].thumbHash ?? "",
fit: BoxFit.cover,
),
Positioned(
bottom: 16,
left: 16,
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 114),
child: Text(
title,
style: const TextStyle(fontWeight: FontWeight.w600, color: Colors.white, fontSize: 15),
),
),
),
Positioned(
left: 16,
right: 16,
bottom: 16,
child: MemoryTitle(
memory: memory,
style: const TextStyle(fontWeight: FontWeight.w600, color: Colors.white, fontSize: 15),
),
],
),
),
],
);
}
}
@@ -0,0 +1,50 @@
import 'package:flutter/material.dart';
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
import 'package:immich_mobile/domain/models/memory.model.dart';
import 'package:immich_mobile/extensions/object_extensions.dart';
import 'package:immich_mobile/generated/translations.g.dart';
/// [asset] adds the age at that asset to birthday titles
String getMemoryTitle(Translations t, Memory memory, {RemoteAsset? asset}) => switch (memory.type) {
MemoryTypeEnum.onThisDay => t.years_ago(years: DateTime.now().year - memory.data.year),
MemoryTypeEnum.birthday => _getBirthdayTitle(t, memory.data, asset),
};
String _getBirthdayTitle(Translations t, MemoryData data, RemoteAsset? asset) {
final name = data.personName;
if (name == null || name.isEmpty) {
return t.unknown;
}
final age = asset?.let((asset) => asset.createdAt.toLocal().year - data.year);
if (age == null || age < 1) {
return t.birthday_memory_title(name: name);
}
return t.birthday_memory_title_with_age(name: name, age: age);
}
class MemoryTitle extends StatelessWidget {
final Memory memory;
final TextStyle? style;
const MemoryTitle({super.key, required this.memory, this.style});
@override
Widget build(BuildContext context) {
final title = getMemoryTitle(context.t, memory);
if (memory.type != MemoryTypeEnum.birthday) {
return Text(title, style: style);
}
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.cake_rounded, color: style?.color, size: 20),
const SizedBox(height: 4),
Text(title, style: style, maxLines: 2, overflow: TextOverflow.ellipsis),
],
);
}
}
@@ -1,4 +1,5 @@
import 'package:flutter_test/flutter_test.dart';
import 'package:immich_mobile/domain/models/memory.model.dart';
import 'package:immich_mobile/infrastructure/repositories/memory.repository.dart';
import '../repository_context.dart';
@@ -104,5 +105,17 @@ void main() {
expect(result, isEmpty);
});
test('includes a birthday memory with its person name', () async {
final user = await ctx.newUser();
final asset = await ctx.newRemoteAsset(ownerId: user.id);
final memory = await ctx.newMemory(ownerId: user.id, type: MemoryTypeEnum.birthday, personName: 'Alice');
await ctx.newMemoryAsset(memoryId: memory.id, assetId: asset.id);
final result = await sut.getAll(user.id);
expect(result.single.type, MemoryTypeEnum.birthday);
expect(result.single.data.personName, 'Alice');
});
});
}
+2 -1
View File
@@ -370,6 +370,7 @@ class MediumRepositoryContext {
String? ownerId,
MemoryTypeEnum? type,
int? year,
String? personName,
DateTime? memoryAt,
DateTime? showAt,
DateTime? hideAt,
@@ -384,7 +385,7 @@ class MediumRepositoryContext {
id: .new(id),
ownerId: .new(TestUtils.uuid(ownerId)),
type: .new(type ?? MemoryTypeEnum.onThisDay),
data: .new(MemoryData(year: year ?? 2020).toJson()),
data: .new(MemoryData(year: year ?? 2020, personName: personName).toJson()),
isSaved: .new(isSaved ?? false),
memoryAt: .new(TestUtils.date(memoryAt)),
showAt: .new(showAt),
@@ -0,0 +1,63 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
import 'package:immich_mobile/domain/models/memory.model.dart';
import 'package:immich_mobile/presentation/widgets/memory/memory_bottom_info.widget.dart';
import '../factories/remote_asset_factory.dart';
import 'presentation_context.dart';
void main() {
late PresentationContext context;
setUp(() async => context = await PresentationContext.create());
tearDown(() async => await context.dispose());
RemoteAsset newAssetTakenIn(int year) =>
RemoteAssetFactory.create().copyWith(createdAt: DateTime(year, 9, 28, 12).toUtc());
Memory newBirthdayMemory(List<RemoteAsset> assets, {String personName = 'Katie'}) => Memory(
id: 'memory-1',
createdAt: DateTime(2026),
updatedAt: DateTime(2026),
ownerId: 'user-1',
type: MemoryTypeEnum.birthday,
data: MemoryData(year: 1995, personName: personName),
isSaved: false,
memoryAt: DateTime(2026),
assets: assets,
);
group('MemoryBottomInfo', () {
testWidgets('shows the age and date of the given asset', (tester) async {
final first = newAssetTakenIn(2021);
final current = newAssetTakenIn(2015);
await tester.pumpTestWidget(
context,
MemoryBottomInfo(memory: newBirthdayMemory([first, current]), asset: current),
);
expect(find.text("Katie's birthday · 20 years old"), findsOneWidget);
expect(find.text('September 28, 2015'), findsOneWidget);
expect(find.text('September 28, 2021'), findsNothing);
});
testWidgets('wraps a long title instead of pushing the timeline button off screen', (tester) async {
tester.view.physicalSize = const Size(360, 640);
tester.view.devicePixelRatio = 1;
addTearDown(tester.view.reset);
final asset = newAssetTakenIn(2015);
final memory = newBirthdayMemory([asset], personName: 'Amelia Josephine Montgomery Vanderbilt');
await tester.pumpTestWidget(context, MemoryBottomInfo(memory: memory, asset: asset));
expect(tester.takeException(), isNull);
expect(tester.getRect(find.byIcon(Icons.open_in_new)).right, lessThanOrEqualTo(360));
expect(
tester.getRect(find.textContaining('Amelia')).right,
lessThanOrEqualTo(tester.getRect(find.byType(MaterialButton)).left),
);
});
});
}
@@ -0,0 +1,86 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
import 'package:immich_mobile/domain/models/memory.model.dart';
import 'package:immich_mobile/generated/translations.g.dart';
import 'package:immich_mobile/presentation/widgets/memory/memory_title.widget.dart';
import '../factories/remote_asset_factory.dart';
import 'presentation_context.dart';
void main() {
late PresentationContext context;
setUp(() async => context = await PresentationContext.create());
tearDown(() async => await context.dispose());
Memory newMemory({required MemoryTypeEnum type, required int year, String? personName}) => Memory(
id: 'memory-1',
createdAt: DateTime(2026),
updatedAt: DateTime(2026),
ownerId: 'user-1',
type: type,
data: MemoryData(year: year, personName: personName),
isSaved: false,
memoryAt: DateTime(2026),
assets: [],
);
Widget titleOf(Memory memory, {RemoteAsset? asset}) =>
Builder(builder: (context) => Text(getMemoryTitle(context.t, memory, asset: asset)));
RemoteAsset newAssetTakenIn(int year) =>
RemoteAssetFactory.create().copyWith(createdAt: DateTime(year, 9, 28, 12).toUtc());
group('getMemoryTitle', () {
testWidgets('returns years ago for an on this day memory', (tester) async {
final memory = newMemory(type: MemoryTypeEnum.onThisDay, year: DateTime.now().year - 3);
await tester.pumpTestWidget(context, titleOf(memory));
expect(find.text('3 years ago'), findsOneWidget);
});
testWidgets('returns the person name for a birthday memory', (tester) async {
final memory = newMemory(type: MemoryTypeEnum.birthday, year: 1990, personName: 'Alice');
await tester.pumpTestWidget(context, titleOf(memory));
expect(find.text("Alice's birthday"), findsOneWidget);
});
testWidgets('returns unknown for a birthday memory without a person name', (tester) async {
final memory = newMemory(type: MemoryTypeEnum.birthday, year: 1990);
await tester.pumpTestWidget(context, titleOf(memory));
expect(find.text('Unknown'), findsOneWidget);
});
for (final (age, expected) in [(1, "Alice's birthday · 1 year old"), (20, "Alice's birthday · 20 years old")]) {
testWidgets('returns "$expected" for an asset taken at age $age', (tester) async {
final memory = newMemory(type: MemoryTypeEnum.birthday, year: 1990, personName: 'Alice');
await tester.pumpTestWidget(context, titleOf(memory, asset: newAssetTakenIn(1990 + age)));
expect(find.text(expected), findsOneWidget);
});
}
testWidgets('omits the age for an asset taken in the birth year', (tester) async {
final memory = newMemory(type: MemoryTypeEnum.birthday, year: 1990, personName: 'Alice');
await tester.pumpTestWidget(context, titleOf(memory, asset: newAssetTakenIn(1990)));
expect(find.text("Alice's birthday"), findsOneWidget);
});
testWidgets('ignores the asset for an on this day memory', (tester) async {
final memory = newMemory(type: MemoryTypeEnum.onThisDay, year: DateTime.now().year - 3);
await tester.pumpTestWidget(context, titleOf(memory, asset: newAssetTakenIn(2015)));
expect(find.text('3 years ago'), findsOneWidget);
});
});
}