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

feat: album edit (#19936)

Browse Source
This commit is contained in:
Alex
2025-07-15 20:37:44 -05:00
committed by GitHub
parent bcb968e3d1
commit 34620e1e9a
22 changed files with 2271 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
mobile/lib/widgets/album/remote_album_shared_user_icons.dart Normal file
View File

@ -0,0 +1,50 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
import 'package:immich_mobile/providers/infrastructure/remote_album.provider.dart';
import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
class RemoteAlbumSharedUserIcons extends ConsumerWidget {
const RemoteAlbumSharedUserIcons({
super.key,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final currentAlbum = ref.watch(currentRemoteAlbumProvider);
if (currentAlbum == null) {
return const SizedBox();
}
final sharedUsersAsync =
ref.watch(remoteAlbumSharedUsersProvider(currentAlbum.id));
return sharedUsersAsync.maybeWhen(
data: (sharedUsers) {
if (sharedUsers.isEmpty) {
return const SizedBox();
}
return SizedBox(
height: 50,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: ((context, index) {
return Padding(
padding: const EdgeInsets.only(right: 4.0),
child: UserCircleAvatar(
user: sharedUsers[index],
radius: 18,
size: 36,
hasBorder: true,
),
);
}),
itemCount: sharedUsers.length,
),
);
},
orElse: () => const SizedBox(),
);
}
}

687
mobile/lib/widgets/common/remote_album_sliver_app_bar.dart Normal file
View File

@ -0,0 +1,687 @@
import 'dart:async';
import 'dart:io';
import 'dart:ui';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
import 'package:immich_mobile/domain/services/timeline.service.dart';
import 'package:immich_mobile/domain/utils/event_stream.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/extensions/datetime_extensions.dart';
import 'package:immich_mobile/extensions/translate_extensions.dart';
import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
import 'package:immich_mobile/providers/infrastructure/remote_album.provider.dart';
import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
import 'package:immich_mobile/widgets/album/remote_album_shared_user_icons.dart';
class RemoteAlbumSliverAppBar extends ConsumerStatefulWidget {
const RemoteAlbumSliverAppBar({
super.key,
this.icon = Icons.camera,
this.onShowOptions,
this.onToggleAlbumOrder,
this.onEditTitle,
});
final IconData icon;
final void Function()? onShowOptions;
final void Function()? onToggleAlbumOrder;
final void Function()? onEditTitle;
@override
ConsumerState<RemoteAlbumSliverAppBar> createState() =>
_MesmerizingSliverAppBarState();
}
class _MesmerizingSliverAppBarState
extends ConsumerState<RemoteAlbumSliverAppBar> {
double _scrollProgress = 0.0;
double _calculateScrollProgress(FlexibleSpaceBarSettings? settings) {
if (settings?.maxExtent == null || settings?.minExtent == null) {
return 1.0;
}
final deltaExtent = settings!.maxExtent - settings.minExtent;
if (deltaExtent <= 0.0) {
return 1.0;
}
return (1.0 - (settings.currentExtent - settings.minExtent) / deltaExtent)
.clamp(0.0, 1.0);
}
@override
Widget build(BuildContext context) {
final isMultiSelectEnabled =
ref.watch(multiSelectProvider.select((s) => s.isEnabled));
final currentAlbum = ref.watch(currentRemoteAlbumProvider);
if (currentAlbum == null) {
return const SliverToBoxAdapter(child: SizedBox.shrink());
}
Color? actionIconColor = Color.lerp(
Colors.white,
context.primaryColor,
_scrollProgress,
);
List<Shadow> actionIconShadows = [
if (_scrollProgress < 0.95)
Shadow(
offset: const Offset(0, 2),
blurRadius: 5,
color: Colors.black.withValues(alpha: 0.5),
)
else
const Shadow(
offset: Offset(0, 2),
blurRadius: 0,
color: Colors.transparent,
),
];
return isMultiSelectEnabled
? SliverToBoxAdapter(
child: switch (_scrollProgress) {
< 0.8 => const SizedBox(height: 120),
_ => const SizedBox(height: 452),
},
)
: SliverAppBar(
expandedHeight: 400.0,
floating: false,
pinned: true,
snap: false,
elevation: 0,
leading: IconButton(
icon: Icon(
Platform.isIOS
? Icons.arrow_back_ios_new_rounded
: Icons.arrow_back,
color: actionIconColor,
shadows: actionIconShadows,
),
onPressed: () {
ref.read(remoteAlbumProvider.notifier).refresh();
context.pop();
},
),
actions: [
if (widget.onToggleAlbumOrder != null)
IconButton(
icon: Icon(
Icons.swap_vert_rounded,
color: actionIconColor,
shadows: actionIconShadows,
),
onPressed: widget.onToggleAlbumOrder,
),
if (widget.onShowOptions != null)
IconButton(
icon: Icon(
Icons.more_vert,
color: actionIconColor,
shadows: actionIconShadows,
),
onPressed: widget.onShowOptions,
),
],
flexibleSpace: Builder(
builder: (context) {
final settings = context.dependOnInheritedWidgetOfExactType<
FlexibleSpaceBarSettings>();
final scrollProgress = _calculateScrollProgress(settings);
// Update scroll progress for the leading button
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted && _scrollProgress != scrollProgress) {
setState(() {
_scrollProgress = scrollProgress;
});
}
});
return FlexibleSpaceBar(
centerTitle: true,
title: AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
child: scrollProgress > 0.95
? Text(
currentAlbum.name,
style: TextStyle(
color: context.primaryColor,
fontWeight: FontWeight.w600,
fontSize: 18,
),
)
: null,
),
background: _ExpandedBackground(
scrollProgress: scrollProgress,
icon: widget.icon,
onEditTitle: widget.onEditTitle,
),
);
},
),
);
}
}
class _ExpandedBackground extends ConsumerStatefulWidget {
final double scrollProgress;
final IconData icon;
final void Function()? onEditTitle;
const _ExpandedBackground({
required this.scrollProgress,
required this.icon,
this.onEditTitle,
});
@override
ConsumerState<_ExpandedBackground> createState() =>
_ExpandedBackgroundState();
}
class _ExpandedBackgroundState extends ConsumerState<_ExpandedBackground>
with SingleTickerProviderStateMixin {
late AnimationController _slideController;
late Animation<Offset> _slideAnimation;
@override
void initState() {
super.initState();
_slideController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
_slideAnimation = Tween<Offset>(
begin: const Offset(0, 1.5),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _slideController,
curve: Curves.easeOutCubic,
),
);
Future.delayed(const Duration(milliseconds: 100), () {
if (mounted) {
_slideController.forward();
}
});
}
@override
void dispose() {
_slideController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final timelineService = ref.watch(timelineServiceProvider);
final currentAlbum = ref.watch(currentRemoteAlbumProvider);
if (currentAlbum == null) {
return const SizedBox.shrink();
}
final dateRange = ref.watch(
remoteAlbumDateRangeProvider(currentAlbum.id),
);
return Stack(
fit: StackFit.expand,
children: [
Transform.translate(
offset: Offset(0, widget.scrollProgress * 50),
child: Transform.scale(
scale: 1.4 - (widget.scrollProgress * 0.2),
child: _RandomAssetBackground(
timelineService: timelineService,
icon: widget.icon,
),
),
),
ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: widget.scrollProgress * 2.0,
sigmaY: widget.scrollProgress * 2.0,
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withValues(alpha: 0.05),
Colors.transparent,
Colors.black.withValues(alpha: 0.3),
Colors.black.withValues(
alpha: 0.6 + (widget.scrollProgress * 0.25),
),
],
stops: const [0.0, 0.15, 0.55, 1.0],
),
),
),
),
),
Positioned(
bottom: 16,
left: 16,
right: 16,
child: SlideTransition(
position: _slideAnimation,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
if (dateRange.hasValue)
Text(
DateRangeFormatting.formatDateRange(
dateRange.value!.$1.toLocal(),
dateRange.value!.$2.toLocal(),
context.locale,
),
style: const TextStyle(
color: Colors.white,
shadows: [
Shadow(
offset: Offset(0, 2),
blurRadius: 12,
color: Colors.black87,
),
],
),
),
const Text(
" • ",
style: TextStyle(
color: Colors.white,
shadows: [
Shadow(
offset: Offset(0, 2),
blurRadius: 12,
color: Colors.black87,
),
],
),
),
AnimatedContainer(
duration: const Duration(milliseconds: 300),
child: const _ItemCountText(),
),
],
),
GestureDetector(
onTap: widget.onEditTitle,
child: SizedBox(
width: double.infinity,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Text(
currentAlbum.name,
maxLines: 1,
style: const TextStyle(
color: Colors.white,
fontSize: 36,
fontWeight: FontWeight.bold,
letterSpacing: 0.5,
shadows: [
Shadow(
offset: Offset(0, 2),
blurRadius: 12,
color: Colors.black54,
),
],
),
),
),
),
),
if (currentAlbum.description.isNotEmpty)
GestureDetector(
onTap: widget.onEditTitle,
child: ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 80,
),
child: SingleChildScrollView(
child: Text(
currentAlbum.description,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
shadows: [
Shadow(
offset: Offset(0, 2),
blurRadius: 8,
color: Colors.black54,
),
],
),
),
),
),
),
const Padding(
padding: EdgeInsets.only(top: 8.0),
child: RemoteAlbumSharedUserIcons(),
),
],
),
),
),
],
);
}
}
class _ItemCountText extends ConsumerStatefulWidget {
const _ItemCountText();
@override
ConsumerState<_ItemCountText> createState() => _ItemCountTextState();
}
class _ItemCountTextState extends ConsumerState<_ItemCountText> {
StreamSubscription? _reloadSubscription;
@override
void initState() {
super.initState();
_reloadSubscription =
EventStream.shared.listen<TimelineReloadEvent>((_) => setState(() {}));
}
@override
void dispose() {
_reloadSubscription?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
final assetCount = ref.watch(
timelineServiceProvider.select((s) => s.totalAssets),
);
return Text(
'items_count'.t(
context: context,
args: {"count": assetCount},
),
style: context.textTheme.labelLarge?.copyWith(
color: Colors.white,
shadows: [
const Shadow(
offset: Offset(0, 2),
blurRadius: 12,
color: Colors.black87,
),
],
),
);
}
}
class _RandomAssetBackground extends StatefulWidget {
final TimelineService timelineService;
final IconData icon;
const _RandomAssetBackground({
required this.timelineService,
required this.icon,
});
@override
State<_RandomAssetBackground> createState() => _RandomAssetBackgroundState();
}
class _RandomAssetBackgroundState extends State<_RandomAssetBackground>
with TickerProviderStateMixin {
late AnimationController _zoomController;
late AnimationController _crossFadeController;
late Animation<double> _zoomAnimation;
late Animation<Offset> _panAnimation;
late Animation<double> _crossFadeAnimation;
BaseAsset? _currentAsset;
BaseAsset? _nextAsset;
bool _isZoomingIn = true;
@override
void initState() {
super.initState();
_zoomController = AnimationController(
duration: const Duration(seconds: 12),
vsync: this,
);
_crossFadeController = AnimationController(
duration: const Duration(milliseconds: 1200),
vsync: this,
);
_zoomAnimation = Tween<double>(
begin: 1.0,
end: 1.2,
).animate(
CurvedAnimation(
parent: _zoomController,
curve: Curves.easeInOut,
),
);
_panAnimation = Tween<Offset>(
begin: Offset.zero,
end: const Offset(0.5, -0.5),
).animate(
CurvedAnimation(
parent: _zoomController,
curve: Curves.easeInOut,
),
);
_crossFadeAnimation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: _crossFadeController,
curve: Curves.easeInOutCubic,
),
);
Future.delayed(
Durations.medium1,
() => _loadFirstAsset(),
);
}
@override
void dispose() {
_zoomController.dispose();
_crossFadeController.dispose();
super.dispose();
}
void _startAnimationCycle() {
if (_isZoomingIn) {
_zoomController.forward().then((_) {
_loadNextAsset();
});
} else {
_zoomController.reverse().then((_) {
_loadNextAsset();
});
}
}
Future<void> _loadFirstAsset() async {
if (!mounted) {
return;
}
if (widget.timelineService.totalAssets == 0) {
setState(() {
_currentAsset = null;
});
return;
}
setState(() {
_currentAsset = widget.timelineService.getRandomAsset();
});
await _crossFadeController.forward();
if (_zoomController.status == AnimationStatus.dismissed) {
if (_isZoomingIn) {
_zoomController.reset();
} else {
_zoomController.value = 1.0;
}
_startAnimationCycle();
}
}
Future<void> _loadNextAsset() async {
if (!mounted) {
return;
}
try {
if (widget.timelineService.totalAssets > 1) {
// Load next asset while keeping current one visible
final nextAsset = widget.timelineService.getRandomAsset();
setState(() {
_nextAsset = nextAsset;
});
await _crossFadeController.reverse();
setState(() {
_currentAsset = _nextAsset;
_nextAsset = null;
});
_crossFadeController.value = 1.0;
_isZoomingIn = !_isZoomingIn;
_startAnimationCycle();
}
} catch (e) {
_zoomController.reset();
_startAnimationCycle();
}
}
@override
Widget build(BuildContext context) {
if (widget.timelineService.totalAssets == 0) {
return const SizedBox.shrink();
}
return AnimatedBuilder(
animation: Listenable.merge(
[_zoomAnimation, _panAnimation, _crossFadeAnimation],
),
builder: (context, child) {
return Transform.scale(
scale: _zoomAnimation.value,
filterQuality: Platform.isAndroid ? FilterQuality.low : null,
child: Transform.translate(
offset: _panAnimation.value,
filterQuality: Platform.isAndroid ? FilterQuality.low : null,
child: Stack(
fit: StackFit.expand,
children: [
// Current image
if (_currentAsset != null)
Opacity(
opacity: _crossFadeAnimation.value,
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: Image(
alignment: Alignment.topRight,
image: getFullImageProvider(_currentAsset!),
fit: BoxFit.cover,
frameBuilder:
(context, child, frame, wasSynchronouslyLoaded) {
if (wasSynchronouslyLoaded || frame != null) {
return child;
}
return Container();
},
errorBuilder: (context, error, stackTrace) {
return SizedBox(
width: double.infinity,
height: double.infinity,
child: Icon(
Icons.error_outline_rounded,
size: 24,
color: Colors.red[300],
),
);
},
),
),
),
if (_nextAsset != null)
Opacity(
opacity: 1.0 - _crossFadeAnimation.value,
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: Image(
alignment: Alignment.topRight,
image: getFullImageProvider(_nextAsset!),
fit: BoxFit.cover,
frameBuilder:
(context, child, frame, wasSynchronouslyLoaded) {
if (wasSynchronouslyLoaded || frame != null) {
return child;
}
return const SizedBox.shrink();
},
errorBuilder: (context, error, stackTrace) {
return SizedBox(
width: double.infinity,
height: double.infinity,
child: Icon(
Icons.error_outline_rounded,
size: 24,
color: Colors.red[300],
),
);
},
),
),
),
],
),
),
);
},
);
}
}

54
mobile/lib/widgets/common/user_circle_avatar.dart
View File

@ -14,11 +14,13 @@ class UserCircleAvatar extends ConsumerWidget {
final UserDto user;
double radius;
double size;
bool hasBorder;
UserCircleAvatar({
super.key,
this.radius = 22,
this.size = 44,
this.hasBorder = false,
required this.user,
});
@ -38,25 +40,39 @@ class UserCircleAvatar extends ConsumerWidget {
),
child: Text(user.name[0].toUpperCase()),
);
return CircleAvatar(
backgroundColor: userAvatarColor,
radius: radius,
child: user.profileImagePath == null
? textIcon
: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(50)),
child: CachedNetworkImage(
fit: BoxFit.cover,
cacheKey: user.profileImagePath,
width: size,
height: size,
placeholder: (_, __) => Image.memory(kTransparentImage),
imageUrl: profileImageUrl,
httpHeaders: ApiService.getRequestHeaders(),
fadeInDuration: const Duration(milliseconds: 300),
errorWidget: (context, error, stackTrace) => textIcon,
),
),
return Tooltip(
message: user.name,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: hasBorder
? Border.all(
color: Colors.grey[500]!,
width: 1,
)
: null,
),
child: CircleAvatar(
backgroundColor: userAvatarColor,
radius: radius,
child: user.profileImagePath == null
? textIcon
: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(50)),
child: CachedNetworkImage(
fit: BoxFit.cover,
cacheKey: user.profileImagePath,
width: size,
height: size,
placeholder: (_, __) => Image.memory(kTransparentImage),
imageUrl: profileImageUrl,
httpHeaders: ApiService.getRequestHeaders(),
fadeInDuration: const Duration(milliseconds: 300),
errorWidget: (context, error, stackTrace) => textIcon,
),
),
),
),
);
}
}