Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-31 15:08:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor(mobile): image thumbnails (#19821)

Browse Source 
* image thumbnail refactor

* minor const-ification in new thumbnail tile

* underscore helper classes

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Mert 2025-07-09 22:16:09 +03:00 committed by GitHub
parent a918481c0b
commit fd48a33686
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 317 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
mobile/lib/domain/models/asset/base_asset.model.dart
View File

@ -43,6 +43,14 @@ sealed class BaseAsset {
bool get isImage => type == AssetType.image;
bool get isVideo => type == AssetType.video;
Duration get duration {
final durationInSeconds = this.durationInSeconds;
if (durationInSeconds != null) {
return Duration(seconds: durationInSeconds);
}
return const Duration();
}
bool get hasRemote =>
storage == AssetState.remote || storage == AssetState.merged;
bool get hasLocal =>

12
mobile/lib/extensions/duration_extensions.dart
View File

@ -3,3 +3,15 @@ extension TZOffsetExtension on Duration {
String formatAsOffset() =>
"${isNegative ? '-' : '+'}${inHours.abs().toString().padLeft(2, '0')}:${inMinutes.abs().remainder(60).toString().padLeft(2, '0')}";
}
extension DurationFormatExtension on Duration {
String format() {
final seconds = inSeconds.remainder(60).toString().padLeft(2, '0');
final minutes = inMinutes.remainder(60).toString().padLeft(2, '0');
if (inHours == 0) {
return "$minutes:$seconds";
}
final hours = inHours.toString().padLeft(2, '0');
return "$hours:$minutes:$seconds";
}
}

72
mobile/lib/presentation/widgets/images/thumbnail_tile.widget.dart
View File

@ -2,6 +2,7 @@ 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/extensions/build_context_extensions.dart';
import 'package:immich_mobile/extensions/duration_extensions.dart';
import 'package:immich_mobile/extensions/theme_extensions.dart';
import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
@ -76,23 +77,33 @@ class ThumbnailTile extends ConsumerWidget {
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(right: 10.0, top: 6.0),
child: _VideoIndicator(asset.durationInSeconds ?? 0),
child: _VideoIndicator(asset.duration),
),
),
if (showStorageIndicator)
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.only(right: 10.0, bottom: 6.0),
child: _TileOverlayIcon(
switch (asset.storage) {
AssetState.local => Icons.cloud_off_outlined,
AssetState.remote => Icons.cloud_outlined,
AssetState.merged => Icons.cloud_done_outlined,
},
switch (asset.storage) {
AssetState.local => const Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.cloud_off_outlined),
),
),
),
),
AssetState.remote => const Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.cloud_outlined),
),
),
AssetState.merged => const Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
child: _TileOverlayIcon(Icons.cloud_done_outlined),
),
),
},
if (asset.isFavorite)
const Align(
alignment: Alignment.bottomLeft,
@ -138,7 +149,7 @@ class _SelectionIndicator extends StatelessWidget {
@override
Widget build(BuildContext context) {
if (isLocked) {
return Container(
return DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
@ -149,7 +160,7 @@ class _SelectionIndicator extends StatelessWidget {
),
);
} else if (isSelected) {
return Container(
return DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
@ -169,23 +180,8 @@ class _SelectionIndicator extends StatelessWidget {
}
class _VideoIndicator extends StatelessWidget {
final int durationInSeconds;
const _VideoIndicator(this.durationInSeconds);
String _formatDuration(int durationInSec) {
final int hours = durationInSec ~/ 3600;
final int minutes = (durationInSec % 3600) ~/ 60;
final int seconds = durationInSec % 60;
final String minutesPadded = minutes.toString().padLeft(2, '0');
final String secondsPadded = seconds.toString().padLeft(2, '0');
if (hours > 0) {
return "$hours:$minutesPadded:$secondsPadded"; // H:MM:SS
} else {
return "$minutesPadded:$secondsPadded"; // MM:SS
}
}
final Duration duration;
const _VideoIndicator(this.duration);
@override
Widget build(BuildContext context) {
@ -197,15 +193,15 @@ class _VideoIndicator extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
_formatDuration(durationInSeconds),
style: TextStyle(
duration.format(),
style: const TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold,
shadows: [
Shadow(
blurRadius: 5.0,
color: Colors.black.withValues(alpha: 0.6),
color: Color.fromRGBO(0, 0, 0, 0.6),
),
],
),
@ -228,10 +224,10 @@ class _TileOverlayIcon extends StatelessWidget {
color: Colors.white,
size: 16,
shadows: [
Shadow(
const Shadow(
blurRadius: 5.0,
color: Colors.black.withValues(alpha: 0.6),
offset: const Offset(0.0, 0.0),
color: Color.fromRGBO(0, 0, 0, 0.6),
offset: Offset(0.0, 0.0),
),
],
);

9
mobile/lib/utils/storage_indicator.dart
View File

@ -1,9 +0,0 @@
import 'package:flutter/material.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
/// Returns the suitable [IconData] to represent an [Asset]s storage location
IconData storageIcon(Asset asset) => switch (asset.storage) {
AssetState.local => Icons.cloud_off_outlined,
AssetState.remote => Icons.cloud_outlined,
AssetState.merged => Icons.cloud_done_outlined,
};

430
mobile/lib/widgets/asset_grid/thumbnail_image.dart
View File

@ -1,13 +1,12 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/constants/constants.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/extensions/duration_extensions.dart';
import 'package:immich_mobile/extensions/theme_extensions.dart';
import 'package:immich_mobile/widgets/common/immich_thumbnail.dart';
import 'package:immich_mobile/utils/storage_indicator.dart';
class ThumbnailImage extends ConsumerWidget {
class ThumbnailImage extends StatelessWidget {
/// The asset to show the thumbnail image for
final Asset asset;
@ -41,144 +40,10 @@ class ThumbnailImage extends ConsumerWidget {
});
@override
Widget build(BuildContext context, WidgetRef ref) {
Widget build(BuildContext context) {
final assetContainerColor = context.isDarkTheme
? context.primaryColor.darken(amount: 0.6)
: context.primaryColor.lighten(amount: 0.8);
// Assets from response DTOs do not have an isar id, querying which would give us the default autoIncrement id
final isFromDto = asset.id == noDbId;
Widget buildSelectionIcon() {
if (isSelected) {
return Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: assetContainerColor,
),
child: Icon(
Icons.check_circle_rounded,
color: context.primaryColor,
),
);
} else {
return const Icon(
Icons.circle_outlined,
color: Colors.white,
);
}
}
Widget buildVideoIcon() {
final minutes = asset.duration.inMinutes;
final durationString = asset.duration.toString();
return Positioned(
top: 5,
right: 8,
child: Row(
children: [
Text(
minutes > 59
? durationString.substring(0, 7) // h:mm:ss
: minutes > 0
? durationString.substring(2, 7) // mm:ss
: durationString.substring(3, 7), // m:ss
style: const TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.bold,
),
),
const SizedBox(
width: 3,
),
const Icon(
Icons.play_circle_fill_rounded,
color: Colors.white,
size: 18,
),
],
),
);
}
Widget buildStackIcon() {
return Positioned(
top: !asset.isImage ? 28 : 5,
right: 8,
child: Row(
children: [
if (asset.stackCount > 1)
Text(
"${asset.stackCount}",
style: const TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.bold,
),
),
if (asset.stackCount > 1)
const SizedBox(
width: 3,
),
const Icon(
Icons.burst_mode_rounded,
color: Colors.white,
size: 18,
),
],
),
);
}
Widget buildImage() {
final image = SizedBox.expand(
child: Hero(
tag: isFromDto
? '${asset.remoteId}-$heroOffset'
: asset.id + heroOffset,
child: Stack(
children: [
SizedBox.expand(
child: ImmichThumbnail(
asset: asset,
height: 250,
width: 250,
),
),
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromRGBO(0, 0, 0, 0.1),
Colors.transparent,
Colors.transparent,
Color.fromRGBO(0, 0, 0, 0.1),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0, 0.3, 0.6, 1],
),
),
),
],
),
),
);
if (!multiselectEnabled || !isSelected) {
return image;
}
return Container(
decoration: BoxDecoration(
color: canDeselect ? assetContainerColor : Colors.grey,
),
child: ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(15.0),
),
child: image,
),
);
}
return Stack(
children: [
@ -187,32 +52,30 @@ class ThumbnailImage extends ConsumerWidget {
curve: Curves.decelerate,
decoration: BoxDecoration(
border: multiselectEnabled && isSelected
? Border.all(
color: canDeselect ? assetContainerColor : Colors.grey,
width: 8,
)
? canDeselect
? Border.all(
color: assetContainerColor,
width: 8,
)
: const Border(
top: BorderSide(color: Colors.grey, width: 8),
right: BorderSide(color: Colors.grey, width: 8),
bottom: BorderSide(color: Colors.grey, width: 8),
left: BorderSide(color: Colors.grey, width: 8),
)
: const Border(),
),
child: Stack(
children: [
buildImage(),
if (showStorageIndicator)
Positioned(
right: 8,
bottom: 5,
child: Icon(
storageIcon(asset),
color: Colors.white.withValues(alpha: .8),
size: 16,
shadows: [
Shadow(
blurRadius: 5.0,
color: Colors.black.withValues(alpha: 0.6),
offset: const Offset(0.0, 0.0),
),
],
),
),
_ImageIcon(
heroOffset: heroOffset,
asset: asset,
assetContainerColor: assetContainerColor,
multiselectEnabled: multiselectEnabled,
canDeselect: canDeselect,
isSelected: isSelected,
),
if (showStorageIndicator) _StorageIcon(storage: asset.storage),
if (asset.isFavorite)
const Positioned(
left: 8,
@ -223,20 +86,249 @@ class ThumbnailImage extends ConsumerWidget {
size: 16,
),
),
if (!asset.isImage) buildVideoIcon(),
if (asset.stackCount > 0) buildStackIcon(),
if (asset.isVideo) _VideoIcon(duration: asset.duration),
if (asset.stackCount > 0)
_StackIcon(
isVideo: asset.isVideo,
stackCount: asset.stackCount,
),
],
),
),
if (multiselectEnabled)
Padding(
padding: const EdgeInsets.all(3.0),
child: Align(
alignment: Alignment.topLeft,
child: buildSelectionIcon(),
),
),
isSelected
? const Padding(
padding: EdgeInsets.all(3.0),
child: Align(
alignment: Alignment.topLeft,
child: _SelectedIcon(),
),
)
: const Icon(
Icons.circle_outlined,
color: Colors.white,
),
],
);
}
}
class _SelectedIcon extends StatelessWidget {
const _SelectedIcon();
@override
Widget build(BuildContext context) {
final assetContainerColor = context.isDarkTheme
? context.primaryColor.darken(amount: 0.6)
: context.primaryColor.lighten(amount: 0.8);
return DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: assetContainerColor,
),
child: Icon(
Icons.check_circle_rounded,
color: context.primaryColor,
),
);
}
}
class _VideoIcon extends StatelessWidget {
final Duration duration;
const _VideoIcon({required this.duration});
@override
Widget build(BuildContext context) {
return Positioned(
top: 5,
right: 8,
child: Row(
children: [
Text(
duration.format(),
style: const TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 3),
const Icon(
Icons.play_circle_fill_rounded,
color: Colors.white,
size: 18,
),
],
),
);
}
}
class _StackIcon extends StatelessWidget {
final bool isVideo;
final int stackCount;
const _StackIcon({required this.isVideo, required this.stackCount});
@override
Widget build(BuildContext context) {
return Positioned(
top: isVideo ? 28 : 5,
right: 8,
child: Row(
children: [
if (stackCount > 1)
Text(
"$stackCount",
style: const TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.bold,
),
),
if (stackCount > 1)
const SizedBox(
width: 3,
),
const Icon(
Icons.burst_mode_rounded,
color: Colors.white,
size: 18,
),
],
),
);
}
}
class _StorageIcon extends StatelessWidget {
final AssetState storage;
const _StorageIcon({required this.storage});
@override
Widget build(BuildContext context) {
return switch (storage) {
AssetState.local => const Positioned(
right: 8,
bottom: 5,
child: Icon(
Icons.cloud_off_outlined,
color: Color.fromRGBO(255, 255, 255, 0.8),
size: 16,
shadows: [
Shadow(
blurRadius: 5.0,
color: Color.fromRGBO(0, 0, 0, 0.6),
offset: Offset(0.0, 0.0),
),
],
),
),
AssetState.remote => const Positioned(
right: 8,
bottom: 5,
child: Icon(
Icons.cloud_outlined,
color: Color.fromRGBO(255, 255, 255, 0.8),
size: 16,
shadows: [
Shadow(
blurRadius: 5.0,
color: Color.fromRGBO(0, 0, 0, 0.6),
offset: Offset(0.0, 0.0),
),
],
),
),
AssetState.merged => const Positioned(
right: 8,
bottom: 5,
child: Icon(
Icons.cloud_done_outlined,
color: Color.fromRGBO(255, 255, 255, 0.8),
size: 16,
shadows: [
Shadow(
blurRadius: 5.0,
color: Color.fromRGBO(0, 0, 0, 0.6),
offset: Offset(0.0, 0.0),
),
],
),
),
};
}
}
class _ImageIcon extends StatelessWidget {
final int heroOffset;
final Asset asset;
final Color assetContainerColor;
final bool multiselectEnabled;
final bool canDeselect;
final bool isSelected;
const _ImageIcon({
required this.heroOffset,
required this.asset,
required this.assetContainerColor,
required this.multiselectEnabled,
required this.canDeselect,
required this.isSelected,
});
@override
Widget build(BuildContext context) {
// Assets from response DTOs do not have an isar id, querying which would give us the default autoIncrement id
final isDto = asset.id == noDbId;
final image = SizedBox.expand(
child: Hero(
tag: isDto ? '${asset.remoteId}-$heroOffset' : asset.id + heroOffset,
child: Stack(
children: [
SizedBox.expand(
child: ImmichThumbnail(
asset: asset,
height: 250,
width: 250,
),
),
const DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromRGBO(0, 0, 0, 0.1),
Colors.transparent,
Colors.transparent,
Color.fromRGBO(0, 0, 0, 0.1),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0, 0.3, 0.6, 1],
),
),
),
],
),
),
);
if (!multiselectEnabled || !isSelected) {
return image;
}
return DecoratedBox(
decoration: canDeselect
? BoxDecoration(color: assetContainerColor)
: const BoxDecoration(color: Colors.grey),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(15.0)),
child: image,
),
);
}
}

14
mobile/lib/widgets/asset_viewer/formatted_duration.dart
View File

@ -1,15 +1,5 @@
import 'package:flutter/material.dart';
@pragma('vm:prefer-inline')
String _formatDuration(Duration position) {
final seconds = position.inSeconds.remainder(60).toString().padLeft(2, "0");
final minutes = position.inMinutes.remainder(60).toString().padLeft(2, "0");
if (position.inHours == 0) {
return "$minutes:$seconds";
}
final hours = position.inHours.toString().padLeft(2, '0');
return "$hours:$minutes:$seconds";
}
import 'package:immich_mobile/extensions/duration_extensions.dart';
class FormattedDuration extends StatelessWidget {
final Duration data;
@ -20,7 +10,7 @@ class FormattedDuration extends StatelessWidget {
return SizedBox(
width: data.inHours > 0 ? 70 : 60, // use a fixed width to prevent jitter
child: Text(
_formatDuration(data),
data.format(),
style: const TextStyle(
fontSize: 14.0,
color: Colors.white,