self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-08-08 23:07:06 +02:00
Code Issues Releases Activity

feat: memories in new timeline (#19720)

Browse Source 
* feat: memories sliver

* memories lane

* display and show memory

* fix: get correct memories

* naming

* pr feedback

* use equalsValue for visibility

---------

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>
This commit is contained in:
Alex
2025-07-04 13:49:15 -05:00
committed by GitHub
parent 181efb9010
commit 4a2cf28882
15 changed files with 958 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
mobile/lib/presentation/widgets/memory/memory_bottom_info.widget.dart Normal file
View File

@ -0,0 +1,64 @@
// ignore_for_file: require_trailing_commas
import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/domain/models/memory.model.dart';
import 'package:immich_mobile/providers/asset_viewer/scroll_to_date_notifier.provider.dart';
class DriftMemoryBottomInfo extends StatelessWidget {
final DriftMemory memory;
final String title;
const DriftMemoryBottomInfo({
super.key,
required this.memory,
required this.title,
});
@override
Widget build(BuildContext context) {
final df = DateFormat.yMMMMd();
final fileCreatedDate = memory.assets.first.createdAt;
return Padding(
padding: const EdgeInsets.all(16.0),
child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
color: Colors.grey[400],
fontSize: 13.0,
fontWeight: FontWeight.w500,
),
),
Text(
df.format(fileCreatedDate),
style: const TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.w500,
),
),
],
),
MaterialButton(
minWidth: 0,
onPressed: () {
context.maybePop();
scrollToDateNotifierProvider.scrollToDate(fileCreatedDate);
},
shape: const CircleBorder(),
color: Colors.white.withValues(alpha: 0.2),
elevation: 0,
child: const Icon(
Icons.open_in_new,
color: Colors.white,
),
),
]),
);
}
}

159
mobile/lib/presentation/widgets/memory/memory_card.widget.dart Normal file
View File

@ -0,0 +1,159 @@
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/extensions/build_context_extensions.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/utils/hooks/blurhash_hook.dart';
class DriftMemoryCard extends StatelessWidget {
final RemoteAsset asset;
final String title;
final bool showTitle;
final Function()? onVideoEnded;
const DriftMemoryCard({
required this.asset,
required this.title,
required this.showTitle,
this.onVideoEnded,
super.key,
});
@override
Widget build(BuildContext context) {
return Card(
color: Colors.black,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25.0)),
side: BorderSide(
color: Colors.black,
width: 1.0,
),
),
clipBehavior: Clip.hardEdge,
child: Stack(
children: [
SizedBox.expand(
child: _BlurredBackdrop(asset: asset),
),
LayoutBuilder(
builder: (context, constraints) {
// Determine the fit using the aspect ratio
BoxFit fit = BoxFit.contain;
if (asset.width != null && asset.height != null) {
final aspectRatio = asset.width! / asset.height!;
final phoneAspectRatio =
constraints.maxWidth / constraints.maxHeight;
// Look for a 25% difference in either direction
if (phoneAspectRatio * .75 < aspectRatio &&
phoneAspectRatio * 1.25 > aspectRatio) {
// Cover to look nice if we have nearly the same aspect ratio
fit = BoxFit.cover;
}
}
if (asset.isImage) {
return Hero(
tag: 'memory-${asset.id}',
child: FullImage(
asset,
fit: fit,
size: const Size(double.infinity, double.infinity),
),
);
} else {
return Hero(
tag: 'memory-${asset.id}',
// child: SizedBox(
// width: context.width,
// height: context.height,
// child: NativeVideoViewerPage(
// key: ValueKey(asset.id),
// asset: asset,
// showControls: false,
// playbackDelayFactor: 2,
// image: ImmichImage(
// asset,
// width: context.width,
// height: context.height,
// fit: BoxFit.contain,
// ),
// ),
// ),
child: FullImage(
asset,
fit: fit,
size: const Size(double.infinity, double.infinity),
),
);
}
},
),
if (showTitle)
Positioned(
left: 18.0,
bottom: 18.0,
child: Text(
title,
style: context.textTheme.headlineMedium?.copyWith(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
],
),
);
}
}
class _BlurredBackdrop extends HookWidget {
final RemoteAsset asset;
const _BlurredBackdrop({required this.asset});
@override
Widget build(BuildContext context) {
final blurhash = useDriftBlurHashRef(asset).value;
if (blurhash != null) {
// Use a nice cheap blur hash image decoration
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: MemoryImage(
blurhash,
),
fit: BoxFit.cover,
),
),
child: Container(
color: Colors.black.withValues(alpha: 0.2),
),
);
} else {
// Fall back to using a more expensive image filtered
// Since the ImmichImage is already precached, we can
// safely use that as the image provider
return ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: getFullImageProvider(
asset,
size: Size(context.width, context.height),
),
fit: BoxFit.cover,
),
),
child: Container(
color: Colors.black.withValues(alpha: 0.2),
),
),
);
}
}
}

115
mobile/lib/presentation/widgets/memory/memory_lane.widget.dart Normal file
View File

@ -0,0 +1,115 @@
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/extensions/translate_extensions.dart';
import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
import 'package:immich_mobile/providers/asset_viewer/video_player_value_provider.dart';
import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
import 'package:immich_mobile/routing/router.dart';
class DriftMemoryLane extends ConsumerWidget {
final List<DriftMemory> memories;
const DriftMemoryLane({super.key, required this.memories});
@override
Widget build(BuildContext context, WidgetRef ref) {
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) {
final asset = memories[index].assets[0];
ref.read(currentAssetNotifier.notifier).setAsset(asset);
if (asset.isVideo) {
ref.read(videoPlaybackValueProvider.notifier).reset();
}
}
context.pushRoute(
DriftMemoryRoute(
memories: memories,
memoryIndex: index,
),
);
},
children:
memories.map((memory) => DriftMemoryCard(memory: memory)).toList(),
),
);
}
}
class DriftMemoryCard extends ConsumerWidget {
const DriftMemoryCard({
super.key,
required this.memory,
});
final DriftMemory memory;
@override
Widget build(BuildContext context, WidgetRef ref) {
final yearsAgo = DateTime.now().year - memory.data.year;
final title = 'years_ago'.t(
context: context,
args: {
'years': yearsAgo.toString(),
},
);
return Center(
child: Stack(
children: [
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withValues(alpha: 0.2),
BlendMode.darken,
),
child: Hero(
tag: 'memory-${memory.assets[0].id}',
child: SizedBox(
width: 205,
height: 200,
child: Thumbnail(
remoteId: memory.assets[0].id,
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,
),
),
),
),
],
),
);
}
}

8
mobile/lib/presentation/widgets/timeline/scrubber.widget.dart
View File

@ -26,6 +26,8 @@ class Scrubber extends ConsumerStatefulWidget {
final double bottomPadding;
final double? monthSegmentSnappingOffset;
Scrubber({
super.key,
Key? scrollThumbKey,
@ -33,6 +35,7 @@ class Scrubber extends ConsumerStatefulWidget {
required this.timelineHeight,
this.topPadding = 0,
this.bottomPadding = 0,
this.monthSegmentSnappingOffset,
required this.child,
}) : assert(child.scrollDirection == Axis.vertical);
@ -296,7 +299,10 @@ class ScrubberState extends ConsumerState<Scrubber>
final viewportHeight = _scrollController.position.viewportDimension;
final targetScrollOffset = layoutSegment.startOffset;
final centeredOffset = targetScrollOffset - (viewportHeight / 4) + 100;
final centeredOffset = targetScrollOffset -
(viewportHeight / 4) +
100 +
(widget.monthSegmentSnappingOffset ?? 0.0);
_scrollController.jumpTo(centeredOffset.clamp(0.0, maxScrollExtent));
}

17
mobile/lib/presentation/widgets/timeline/timeline.widget.dart
View File

@ -20,7 +20,10 @@ import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
import 'package:immich_mobile/widgets/common/immich_sliver_app_bar.dart';
class Timeline extends StatelessWidget {
const Timeline({super.key});
const Timeline({super.key, this.topSliverWidget, this.topSliverWidgetHeight});
final Widget? topSliverWidget;
final double? topSliverWidgetHeight;
@override
Widget build(BuildContext context) {
@ -38,7 +41,10 @@ class Timeline extends StatelessWidget {
),
),
],
child: const _SliverTimeline(),
child: _SliverTimeline(
topSliverWidget: topSliverWidget,
topSliverWidgetHeight: topSliverWidgetHeight,
),
),
),
);
@ -46,7 +52,10 @@ class Timeline extends StatelessWidget {
}
class _SliverTimeline extends ConsumerStatefulWidget {
const _SliverTimeline();
const _SliverTimeline({this.topSliverWidget, this.topSliverWidgetHeight});
final Widget? topSliverWidget;
final double? topSliverWidgetHeight;
@override
ConsumerState createState() => _SliverTimelineState();
@ -91,6 +100,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
timelineHeight: maxHeight,
topPadding: totalAppBarHeight + 10,
bottomPadding: context.padding.bottom + scrubberBottomPadding,
monthSegmentSnappingOffset: widget.topSliverWidgetHeight,
child: CustomScrollView(
primary: true,
cacheExtent: maxHeight * 2,
@ -100,6 +110,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
pinned: false,
snap: false,
),
if (widget.topSliverWidget != null) widget.topSliverWidget!,
_SliverSegmentedList(
segments: segments,
delegate: SliverChildBuilderDelegate(