Skip to content

Commit

Permalink
Merge pull request #1764 from ardriveapp/PE-6281-upload-images-with-t…
Browse files Browse the repository at this point in the history 
…humbnails-with-generator

PE-6281: upload images with thumbnails with generator
  • Loading branch information
@thiagocarvalhodev
thiagocarvalhodev authored Jun 25, 2024
2 parents cfda4f0 + e59c82d commit 4ff20b7
Show file tree
Hide file tree
Showing 56 changed files with 2,189 additions and 592 deletions.
16 changes: 16 additions & 0 deletions lib/blocs/upload/upload_cubit.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@ class UploadCubit extends Cubit<UploadState> {
late Drive _targetDrive;
late FolderEntry _targetFolder;
UploadMethod? _uploadMethod;
bool _uploadThumbnail = true;

void changeUploadThumbnailOption(bool uploadThumbnail) {
_uploadThumbnail = uploadThumbnail;
}

void setUploadMethod(
UploadMethod? method,
Expand Down Expand Up @@ -601,6 +606,7 @@ class UploadCubit extends Cubit<UploadState> {
final uploadController = await ardriveUploader.uploadEntities(
entities: entities,
wallet: _auth.currentUser.wallet,
uploadThumbnail: _uploadThumbnail,
type:
_uploadMethod == UploadMethod.ar ? UploadType.d2n : UploadType.turbo,
driveKey: driveKey,
Expand Down Expand Up @@ -722,6 +728,7 @@ class UploadCubit extends Cubit<UploadState> {
files: uploadFiles,
wallet: _auth.currentUser.wallet,
driveKey: driveKey,
uploadThumbnail: _uploadThumbnail,
type:
_uploadMethod == UploadMethod.ar ? UploadType.d2n : UploadType.turbo,
);
Expand Down Expand Up @@ -817,6 +824,14 @@ class UploadCubit extends Cubit<UploadState> {
? RevisionAction.uploadNewVersion
: RevisionAction.create;

Thumbnail? thumbnail;

if (fileMetadata.thumbnailInfo != null) {
thumbnail = Thumbnail(variants: [
Variant.fromJson(fileMetadata.thumbnailInfo!.first.toJson())
]);
}

final entity = FileEntity(
dataContentType: fileMetadata.dataContentType,
dataTxId: fileMetadata.dataTxId,
Expand All @@ -827,6 +842,7 @@ class UploadCubit extends Cubit<UploadState> {
name: fileMetadata.name,
parentFolderId: fileMetadata.parentFolderId,
size: fileMetadata.size,
thumbnail: thumbnail,
// TODO: pinnedDataOwnerAddress
);

Expand Down
1 change: 0 additions & 1 deletion lib/blocs/upload/upload_state.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ class UploadReady extends UploadState {
final bool isDragNDrop;
final bool uploadIsPublic;
final int numberOfFiles;

final UploadParams params;

final bool isArConnect;
Expand Down
64 changes: 47 additions & 17 deletions lib/components/details_panel.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import 'package:ardrive/components/truncated_address.dart';
import 'package:ardrive/core/arfs/entities/arfs_entities.dart';
import 'package:ardrive/core/crypto/crypto.dart';
import 'package:ardrive/download/multiple_file_download_modal.dart';
import 'package:ardrive/drive_explorer/thumbnail_creation/page/thumbnail_creation_modal.dart';
import 'package:ardrive/l11n/l11n.dart';
import 'package:ardrive/misc/resources.dart';
import 'package:ardrive/models/models.dart';
Expand All @@ -25,6 +26,7 @@ import 'package:ardrive/utils/app_localizations_wrapper.dart';
import 'package:ardrive/utils/filesize.dart';
import 'package:ardrive/utils/num_to_string_parsers.dart';
import 'package:ardrive/utils/open_url.dart';
import 'package:ardrive/utils/show_general_dialog.dart';
import 'package:ardrive/utils/size_constants.dart';
import 'package:ardrive/utils/user_utils.dart';
import 'package:ardrive_ui/ardrive_ui.dart';
Expand Down Expand Up @@ -303,6 +305,27 @@ class _DetailsPanelState extends State<DetailsPanel> {
size: 32,
),
},
if (widget.item is FileDataTableItem &&
FileTypeHelper.isImage(widget.item.contentType) &&
(widget.item as FileDataTableItem).thumbnail ==
null) ...{
ArDriveIconButton(
icon: ArDriveIcons.image(),
tooltip: 'Create Thumbnail',
onPressed: () {
showArDriveDialog(
context,
content: BlocProvider.value(
value: context.read<DriveDetailCubit>(),
child: ThumbnailCreationModal(
fileDataTableItem:
widget.item as FileDataTableItem,
),
),
);
},
)
},
if (widget.currentDrive != null)
ScreenTypeLayout.builder(
desktop: (context) => const SizedBox.shrink(),
Expand Down Expand Up @@ -716,15 +739,11 @@ class _DetailsPanelState extends State<DetailsPanel> {
leading: Row(
mainAxisSize: MainAxisSize.min,
children: [
ArDriveIconButton(
tooltip: appLocalizationsOf(context).viewOnViewBlock,
icon: ArDriveIcons.newWindow(size: 20),
onPressed: () {
openUrl(
url:
'https://viewblock.io/arweave/tx/${state.metadataTxId}',
);
},
Text(
'${state.metadataTxId.substring(0, 4)}...',
style: ArDriveTypography.body
.buttonNormalRegular()
.copyWith(decoration: TextDecoration.underline),
),
const SizedBox(width: 12),
CopyButton(
Expand All @@ -739,14 +758,25 @@ class _DetailsPanelState extends State<DetailsPanel> {
leading: Row(
mainAxisSize: MainAxisSize.min,
children: [
ArDriveIconButton(
tooltip: appLocalizationsOf(context).viewOnViewBlock,
icon: ArDriveIcons.newWindow(size: 20),
onPressed: () {
openUrl(
url: 'https://viewblock.io/arweave/tx/${item.dataTxId}',
);
},
// only first 4 characters of the data tx id are shown
ArDriveClickArea(
child: GestureDetector(
onTap: () {
openUrl(
url: 'https://viewblock.io/arweave/tx/${item.dataTxId}',
);
},
child: Tooltip(
message: item.dataTxId,
child: Text(
'${item.dataTxId.substring(0, 4)}...',
style:
ArDriveTypography.body.buttonNormalRegular().copyWith(
decoration: TextDecoration.underline,
),
),
),
),
),
const SizedBox(width: 12),
CopyButton(
Expand Down
40 changes: 20 additions & 20 deletions lib/components/side_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,8 @@ class _AppSideBarState extends State<AppSideBar> {
}

Widget _buildAccordion(DrivesLoadSuccess state, bool isMobile) {
final typography = ArDriveTypographyNew.of(context);

return ArDriveAccordion(
contentPadding: isMobile ? const EdgeInsets.all(4) : null,
key: ValueKey(state.userDrives.map((e) => e.name)),
Expand All @@ -291,9 +293,9 @@ class _AppSideBarState extends State<AppSideBar> {
isExpanded: true,
Text(
appLocalizationsOf(context).publicDrives,
style: ArDriveTypography.body.buttonLargeBold().copyWith(
fontWeight: FontWeight.w700,
),
style: typography.paragraphNormal(
fontWeight: ArFontWeight.bold,
),
),
state.userDrives
.where((element) => element.isPublic)
Expand All @@ -319,9 +321,9 @@ class _AppSideBarState extends State<AppSideBar> {
isExpanded: true,
Text(
appLocalizationsOf(context).privateDrives,
style: ArDriveTypography.body
.buttonLargeBold()
.copyWith(fontWeight: FontWeight.w700),
style: typography.paragraphNormal(
fontWeight: ArFontWeight.bold,
),
),
state.userDrives
.where((element) => element.isPrivate)
Expand All @@ -342,9 +344,9 @@ class _AppSideBarState extends State<AppSideBar> {
isExpanded: true,
Text(
appLocalizationsOf(context).sharedDrives,
style: ArDriveTypography.body
.buttonLargeBold()
.copyWith(fontWeight: FontWeight.w700),
style: typography.paragraphNormal(
fontWeight: ArFontWeight.bold,
),
),
state.sharedDrives
.map(
Expand Down Expand Up @@ -675,6 +677,8 @@ class DriveListTile extends StatelessWidget {

@override
Widget build(BuildContext context) {
final typography = ArDriveTypographyNew.of(context);

return GestureDetector(
key: key,
onTap: onTap,
Expand All @@ -693,19 +697,15 @@ class DriveListTile extends StatelessWidget {
child: Text(
drive.name,
style: isSelected
? ArDriveTypography.body
.buttonNormalBold(
color: ArDriveTheme.of(context)
.themeData
.colors
.themeFgDefault,
)
.copyWith(fontWeight: FontWeight.w700)
: ArDriveTypography.body.buttonNormalRegular(
? typography.paragraphNormal(
fontWeight: ArFontWeight.semiBold,
)
: typography.paragraphNormal(
fontWeight: ArFontWeight.semiBold,
color: ArDriveTheme.of(context)
.themeData
.colors
.themeAccentDisabled,
.colorTokens
.textLow,
),
),
),
Expand Down
31 changes: 31 additions & 0 deletions lib/components/upload_form.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,6 +419,7 @@ class _UploadFormState extends State<UploadForm> {
),
);
} else if (state is UploadReady) {
final typography = ArDriveTypographyNew.of(context);
return ReactiveForm(
formGroup: context.watch<UploadCubit>().licenseCategoryForm,
child: ReactiveFormConsumer(builder: (_, form, __) {
Expand Down Expand Up @@ -478,6 +479,33 @@ class _UploadFormState extends State<UploadForm> {
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Row(
children: [
ArDriveCheckBox(
title: 'Upload with thumbnails',
checked: true,
titleStyle: typography.paragraphLarge(
fontWeight: ArFontWeight.semiBold,
),
onChange: (value) {
context
.read<UploadCubit>()
.changeUploadThumbnailOption(value);
},
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: ArDriveIconButton(
icon: ArDriveIcons.info(),
tooltip:
'Uploading with thumbnails is free, but may make your upload take longer.\nYou can always attach a thumbnail later.',
),
)
],
),
),
SizedBox(
child: ReactiveForm(
formGroup:
Expand Down Expand Up @@ -954,6 +982,9 @@ class _UploadFormState extends State<UploadForm> {
case UploadStatus.creatingBundle:
status =
'We are preparing your upload. Preparation step 2/2';
case UploadStatus.uploadingThumbnail:
status = 'Uploading thumbnail...';
break;
}

final statusAvailableForShowingProgress =
Expand Down
36 changes: 21 additions & 15 deletions lib/dev_tools/app_dev_tools.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'dart:convert';

import 'package:ardrive/dev_tools/drives_health_check.dart';
import 'package:ardrive/dev_tools/thumbnail_generator_poc.dart';
import 'package:ardrive/main.dart';
import 'package:ardrive/services/config/config.dart';
import 'package:ardrive/turbo/topup/blocs/payment_form/payment_form_bloc.dart';
Expand Down Expand Up @@ -156,20 +157,6 @@ class AppConfigWindowManagerState extends State<AppConfigWindowManager> {
type: ArDriveDevToolOptionType.text,
);

final ArDriveDevToolOption defaultTurboPaymentUrlOption =
ArDriveDevToolOption(
name: 'defaultTurboUrl',
value: config.defaultTurboPaymentUrl,
onChange: (value) {
setState(() {
configService.updateAppConfig(
config.copyWith(defaultTurboPaymentUrl: value),
);
});
},
type: ArDriveDevToolOptionType.text,
);

final ArDriveDevToolOption stripePublishableKey = ArDriveDevToolOption(
name: 'stripePublishableKey',
value: config.stripePublishableKey,
Expand Down Expand Up @@ -344,6 +331,25 @@ class AppConfigWindowManagerState extends State<AppConfigWindowManager> {
type: ArDriveDevToolOptionType.button,
);

final ArDriveDevToolOption pickImageAndGenerateThumbnailItem =
ArDriveDevToolOption(
name: 'Generate Thumbnails',
value: '',
onChange: (value) {},
onInteraction: () async {
try {
final BuildContext context = ArDriveDevTools().context!;

showArDriveDialog(context,
content:
const ArDriveStandardModal(content: ThumbnailGeneratorPOC()));
} catch (e) {
logger.e('Error setting default data on payment form', e);
}
},
type: ArDriveDevToolOptionType.button,
);

final ArDriveDevToolOption forceNoFreeThanksToTurbo = ArDriveDevToolOption(
name: 'forceNoFreeThanksToTurbo',
value: config.forceNoFreeThanksToTurbo,
Expand Down Expand Up @@ -374,8 +380,8 @@ class AppConfigWindowManagerState extends State<AppConfigWindowManager> {
runHealthCheck,
useTurboOption,
useTurboPaymentOption,
defaultTurboPaymentUrlOption,
enableSyncFromSnapshotOption,
pickImageAndGenerateThumbnailItem,
stripePublishableKey,
enableQuickSyncAuthoringOption,
enableMultipleFileDownloadOption,
Expand Down
3 changes: 1 addition & 2 deletions lib/dev_tools/drives_health_check.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ class _DrivesHealthCheckModalState extends State<DrivesHealthCheckModal> {
currentStatus.totalFiles = files.length;

selectedDriveStatus = currentStatus;

setState(() {});

await processFiles(files, currentStatus);
Expand Down Expand Up @@ -321,7 +320,7 @@ class _DrivesHealthCheckModalState extends State<DrivesHealthCheckModal> {

if (response.statusCode > 400) {
driveStatus.files.add(FileHealthCheckStatus(
file: file,
file: file,
isSuccess: false,
isFailed: true,
));
Expand Down
Loading

0 comments on commit 4ff20b7

Please sign in to comment.