mirror of
https://github.com/immich-app/immich.git
synced 2025-01-06 03:46:47 +01:00
feat(mobile): show current upload asset (#1399)
* Refactor info box * Added show thumbnail * Added loading indicator
This commit is contained in:
Alex
GitHub
parent
9987e3bcef
commit
9a300d0286
2 changed files with 221 additions and 151 deletions
219
mobile/lib/modules/backup/ui/current_backup_asset_info_box.dart
Normal file
219
mobile/lib/modules/backup/ui/current_backup_asset_info_box.dart
Normal file
|
|
@ -0,0 +1,219 @@
|
||||||
|
import 'package:auto_route/auto_route.dart';
|
||||||
|
import 'package:easy_localization/easy_localization.dart';
|
||||||
|
import 'package:flutter/foundation.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
|
import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
|
||||||
|
import 'package:immich_mobile/modules/backup/providers/error_backup_list.provider.dart';
|
||||||
|
import 'package:immich_mobile/routing/router.dart';
|
||||||
|
import 'package:photo_manager/photo_manager.dart';
|
||||||
|
|
||||||
|
class CurrentUploadingAssetInfoBox extends HookConsumerWidget {
|
||||||
|
const CurrentUploadingAssetInfoBox({super.key});
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
|
var asset = ref.watch(backupProvider).currentUploadAsset;
|
||||||
|
var uploadProgress = ref.watch(backupProvider).progressInPercentage;
|
||||||
|
final isShowThumbnail = useState(false);
|
||||||
|
|
||||||
|
String getAssetCreationDate() {
|
||||||
|
return DateFormat.yMMMMd('en_US').format(
|
||||||
|
DateTime.parse(
|
||||||
|
asset.createdAt.toString(),
|
||||||
|
).toLocal(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget buildErrorChip() {
|
||||||
|
return ActionChip(
|
||||||
|
avatar: Icon(
|
||||||
|
Icons.info,
|
||||||
|
color: Colors.red[400],
|
||||||
|
),
|
||||||
|
elevation: 1,
|
||||||
|
visualDensity: VisualDensity.compact,
|
||||||
|
label: Text(
|
||||||
|
"backup_controller_page_failed",
|
||||||
|
style: TextStyle(
|
||||||
|
color: Colors.red[400],
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontSize: 11,
|
||||||
|
),
|
||||||
|
).tr(
|
||||||
|
args: [ref.watch(errorBackupListProvider).length.toString()],
|
||||||
|
),
|
||||||
|
backgroundColor: Colors.white,
|
||||||
|
onPressed: () {
|
||||||
|
AutoRouter.of(context).push(const FailedBackupStatusRoute());
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget buildAssetInfoTable() {
|
||||||
|
return Table(
|
||||||
|
border: TableBorder.all(
|
||||||
|
color: Theme.of(context).primaryColorLight,
|
||||||
|
width: 1,
|
||||||
|
),
|
||||||
|
children: [
|
||||||
|
TableRow(
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
// color: Colors.grey[100],
|
||||||
|
),
|
||||||
|
children: [
|
||||||
|
TableCell(
|
||||||
|
verticalAlignment: TableCellVerticalAlignment.middle,
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(6.0),
|
||||||
|
child: const Text(
|
||||||
|
'backup_controller_page_filename',
|
||||||
|
style: TextStyle(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontSize: 10.0,
|
||||||
|
),
|
||||||
|
).tr(
|
||||||
|
args: [asset.fileName, asset.fileType.toLowerCase()],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
TableRow(
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
// color: Colors.grey[200],
|
||||||
|
),
|
||||||
|
children: [
|
||||||
|
TableCell(
|
||||||
|
verticalAlignment: TableCellVerticalAlignment.middle,
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(6.0),
|
||||||
|
child: const Text(
|
||||||
|
"backup_controller_page_created",
|
||||||
|
style: TextStyle(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontSize: 10.0,
|
||||||
|
),
|
||||||
|
).tr(
|
||||||
|
args: [getAssetCreationDate()],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
TableRow(
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
// color: Colors.grey[100],
|
||||||
|
),
|
||||||
|
children: [
|
||||||
|
TableCell(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(6.0),
|
||||||
|
child: const Text(
|
||||||
|
"backup_controller_page_id",
|
||||||
|
style: TextStyle(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontSize: 10.0,
|
||||||
|
),
|
||||||
|
).tr(args: [asset.id]),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
buildAssetThumbnail() async {
|
||||||
|
var assetEntity = await AssetEntity.fromId(asset.id);
|
||||||
|
|
||||||
|
if (assetEntity != null) {
|
||||||
|
return assetEntity.thumbnailDataWithSize(
|
||||||
|
const ThumbnailSize(500, 500),
|
||||||
|
quality: 100,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return FutureBuilder<Uint8List?>(
|
||||||
|
future: buildAssetThumbnail(),
|
||||||
|
builder: (context, thumbnail) => ListTile(
|
||||||
|
leading: AnimatedCrossFade(
|
||||||
|
alignment: Alignment.centerLeft,
|
||||||
|
firstChild: GestureDetector(
|
||||||
|
onTap: () => isShowThumbnail.value = false,
|
||||||
|
child: thumbnail.hasData
|
||||||
|
? ClipRRect(
|
||||||
|
borderRadius: BorderRadius.circular(5),
|
||||||
|
child: Image.memory(
|
||||||
|
thumbnail.data!,
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: const SizedBox(
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
child: Padding(
|
||||||
|
padding: EdgeInsets.all(8.0),
|
||||||
|
child: CircularProgressIndicator.adaptive(
|
||||||
|
strokeWidth: 1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
secondChild: GestureDetector(
|
||||||
|
onTap: () => isShowThumbnail.value = true,
|
||||||
|
child: Icon(
|
||||||
|
Icons.image_outlined,
|
||||||
|
color: Theme.of(context).primaryColor,
|
||||||
|
size: 30,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
crossFadeState: isShowThumbnail.value
|
||||||
|
? CrossFadeState.showFirst
|
||||||
|
: CrossFadeState.showSecond,
|
||||||
|
duration: const Duration(milliseconds: 200),
|
||||||
|
),
|
||||||
|
title: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
const Text(
|
||||||
|
"backup_controller_page_uploading_file_info",
|
||||||
|
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
|
||||||
|
).tr(),
|
||||||
|
if (ref.watch(errorBackupListProvider).isNotEmpty) buildErrorChip(),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
subtitle: Column(
|
||||||
|
children: [
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(top: 8.0),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Expanded(
|
||||||
|
child: LinearProgressIndicator(
|
||||||
|
minHeight: 10.0,
|
||||||
|
value: uploadProgress / 100.0,
|
||||||
|
backgroundColor: Colors.grey,
|
||||||
|
color: Theme.of(context).primaryColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
" ${uploadProgress.toStringAsFixed(0)}%",
|
||||||
|
style: const TextStyle(fontSize: 12),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(top: 8.0),
|
||||||
|
child: buildAssetInfoTable(),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
import 'package:immich_mobile/modules/backup/providers/error_backup_list.provider.dart';
|
import 'package:immich_mobile/modules/backup/providers/error_backup_list.provider.dart';
|
||||||
|
import 'package:immich_mobile/modules/backup/ui/current_backup_asset_info_box.dart';
|
||||||
import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
|
import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
|
||||||
import 'package:immich_mobile/modules/backup/models/backup_state.model.dart';
|
import 'package:immich_mobile/modules/backup/models/backup_state.model.dart';
|
||||||
import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
|
import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
|
||||||
|
|
@ -467,156 +468,6 @@ class BackupControllerPage extends HookConsumerWidget {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
buildCurrentBackupAssetInfoCard() {
|
|
||||||
String getAssetCreationDate() {
|
|
||||||
return DateFormat.yMMMMd('en_US').format(
|
|
||||||
DateTime.parse(
|
|
||||||
backupState.currentUploadAsset.createdAt.toString(),
|
|
||||||
).toLocal(),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return ListTile(
|
|
||||||
leading: Icon(
|
|
||||||
Icons.info_outline_rounded,
|
|
||||||
color: Theme.of(context).primaryColor,
|
|
||||||
),
|
|
||||||
title: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
const Text(
|
|
||||||
"backup_controller_page_uploading_file_info",
|
|
||||||
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
|
|
||||||
).tr(),
|
|
||||||
if (ref.watch(errorBackupListProvider).isNotEmpty)
|
|
||||||
ActionChip(
|
|
||||||
avatar: Icon(
|
|
||||||
Icons.info,
|
|
||||||
color: Colors.red[400],
|
|
||||||
),
|
|
||||||
elevation: 1,
|
|
||||||
visualDensity: VisualDensity.compact,
|
|
||||||
label: Text(
|
|
||||||
"backup_controller_page_failed",
|
|
||||||
style: TextStyle(
|
|
||||||
color: Colors.red[400],
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
fontSize: 11,
|
|
||||||
),
|
|
||||||
).tr(
|
|
||||||
args: [ref.watch(errorBackupListProvider).length.toString()],
|
|
||||||
),
|
|
||||||
backgroundColor: Colors.white,
|
|
||||||
onPressed: () {
|
|
||||||
AutoRouter.of(context).push(const FailedBackupStatusRoute());
|
|
||||||
},
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
subtitle: Column(
|
|
||||||
children: [
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.only(top: 8.0),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: LinearProgressIndicator(
|
|
||||||
minHeight: 10.0,
|
|
||||||
value: backupState.progressInPercentage / 100.0,
|
|
||||||
backgroundColor: Colors.grey,
|
|
||||||
color: Theme.of(context).primaryColor,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
" ${backupState.progressInPercentage.toStringAsFixed(0)}%",
|
|
||||||
style: const TextStyle(fontSize: 12),
|
|
||||||
)
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.only(top: 8.0),
|
|
||||||
child: Table(
|
|
||||||
border: TableBorder.all(
|
|
||||||
color: Theme.of(context).primaryColorLight,
|
|
||||||
width: 1,
|
|
||||||
),
|
|
||||||
children: [
|
|
||||||
TableRow(
|
|
||||||
decoration: const BoxDecoration(
|
|
||||||
// color: Colors.grey[100],
|
|
||||||
),
|
|
||||||
children: [
|
|
||||||
TableCell(
|
|
||||||
verticalAlignment: TableCellVerticalAlignment.middle,
|
|
||||||
child: Padding(
|
|
||||||
padding: const EdgeInsets.all(6.0),
|
|
||||||
child: const Text(
|
|
||||||
'backup_controller_page_filename',
|
|
||||||
style: TextStyle(
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
fontSize: 10.0,
|
|
||||||
),
|
|
||||||
).tr(
|
|
||||||
args: [
|
|
||||||
backupState.currentUploadAsset.fileName,
|
|
||||||
backupState.currentUploadAsset.fileType
|
|
||||||
.toLowerCase()
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
TableRow(
|
|
||||||
decoration: const BoxDecoration(
|
|
||||||
// color: Colors.grey[200],
|
|
||||||
),
|
|
||||||
children: [
|
|
||||||
TableCell(
|
|
||||||
verticalAlignment: TableCellVerticalAlignment.middle,
|
|
||||||
child: Padding(
|
|
||||||
padding: const EdgeInsets.all(6.0),
|
|
||||||
child: const Text(
|
|
||||||
"backup_controller_page_created",
|
|
||||||
style: TextStyle(
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
fontSize: 10.0,
|
|
||||||
),
|
|
||||||
).tr(
|
|
||||||
args: [getAssetCreationDate()],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
TableRow(
|
|
||||||
decoration: const BoxDecoration(
|
|
||||||
// color: Colors.grey[100],
|
|
||||||
),
|
|
||||||
children: [
|
|
||||||
TableCell(
|
|
||||||
child: Padding(
|
|
||||||
padding: const EdgeInsets.all(6.0),
|
|
||||||
child: const Text(
|
|
||||||
"backup_controller_page_id",
|
|
||||||
style: TextStyle(
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
fontSize: 10.0,
|
|
||||||
),
|
|
||||||
).tr(args: [backupState.currentUploadAsset.id]),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
void startBackup() {
|
void startBackup() {
|
||||||
ref.watch(errorBackupListProvider.notifier).empty();
|
ref.watch(errorBackupListProvider.notifier).empty();
|
||||||
if (ref.watch(backupProvider).backupProgress !=
|
if (ref.watch(backupProvider).backupProgress !=
|
||||||
|
|
@ -700,7 +551,7 @@ class BackupControllerPage extends HookConsumerWidget {
|
||||||
const Divider(),
|
const Divider(),
|
||||||
buildStorageInformation(),
|
buildStorageInformation(),
|
||||||
const Divider(),
|
const Divider(),
|
||||||
buildCurrentBackupAssetInfoCard(),
|
const CurrentUploadingAssetInfoBox(),
|
||||||
Padding(
|
Padding(
|
||||||
padding: const EdgeInsets.only(
|
padding: const EdgeInsets.only(
|
||||||
top: 24,
|
top: 24,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue