ente/lib/ui/huge_listview/lazy_loading_gallery.dart

573 lines
18 KiB
Dart
Raw Normal View History

import 'dart:async';
2021-04-20 12:26:42 +00:00
import 'dart:math';
2021-04-27 20:02:39 +00:00
import 'package:flutter/foundation.dart';
2021-04-20 12:26:42 +00:00
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:logging/logging.dart';
import 'package:media_extension/media_extension.dart';
import 'package:media_extension/media_extension_action_types.dart';
import 'package:photos/core/configuration.dart';
2021-05-20 23:18:45 +00:00
import 'package:photos/core/constants.dart';
import 'package:photos/core/event_bus.dart';
2022-11-19 11:36:16 +00:00
import 'package:photos/events/clear_selections_event.dart';
import 'package:photos/events/files_updated_event.dart';
import 'package:photos/extensions/string_ext.dart';
2021-04-20 12:26:42 +00:00
import 'package:photos/models/file.dart';
2021-04-23 19:55:50 +00:00
import 'package:photos/models/selected_files.dart';
import 'package:photos/services/app_lifecycle_service.dart';
import 'package:photos/theme/ente_theme.dart';
2021-04-20 12:26:42 +00:00
import 'package:photos/ui/huge_listview/place_holder_widget.dart';
import 'package:photos/ui/viewer/file/detail_page.dart';
import 'package:photos/ui/viewer/file/thumbnail_widget.dart';
import 'package:photos/ui/viewer/gallery/gallery.dart';
2021-04-20 12:26:42 +00:00
import 'package:photos/utils/date_time_util.dart';
import 'package:photos/utils/file_util.dart';
import 'package:photos/utils/navigation_util.dart';
2021-04-20 12:26:42 +00:00
import 'package:visibility_detector/visibility_detector.dart';
2021-04-23 19:55:50 +00:00
class LazyLoadingGallery extends StatefulWidget {
final List<File> files;
final int index;
final Stream<FilesUpdatedEvent>? reloadEvent;
final Set<EventType> removalEventTypes;
final GalleryLoader asyncLoader;
final SelectedFiles? selectedFiles;
2021-04-23 19:55:50 +00:00
final String tag;
final String? logTag;
final Stream<int> currentIndexStream;
final int photoGirdSize;
final bool areFilesCollatedByDay;
final bool limitSelectionToOne;
2021-05-06 21:15:40 +00:00
LazyLoadingGallery(
this.files,
this.index,
this.reloadEvent,
this.removalEventTypes,
2021-05-06 21:15:40 +00:00
this.asyncLoader,
this.selectedFiles,
this.tag,
this.currentIndexStream,
this.areFilesCollatedByDay, {
2022-11-11 09:30:07 +00:00
this.logTag = "",
this.photoGirdSize = photoGridSizeDefault,
this.limitSelectionToOne = false,
Key? key,
2021-05-07 12:14:51 +00:00
}) : super(key: key ?? UniqueKey());
2021-04-20 12:26:42 +00:00
2021-04-23 19:55:50 +00:00
@override
2022-07-03 09:45:00 +00:00
State<LazyLoadingGallery> createState() => _LazyLoadingGalleryState();
2021-04-23 19:55:50 +00:00
}
class _LazyLoadingGalleryState extends State<LazyLoadingGallery> {
2021-05-06 21:31:31 +00:00
static const kRecycleLimit = 400;
static const kNumberOfDaysToRenderBeforeAndAfter = 8;
2021-04-23 19:55:50 +00:00
late Logger _logger;
2021-04-23 19:55:50 +00:00
late List<File> _files;
late StreamSubscription<FilesUpdatedEvent>? _reloadEventSubscription;
late StreamSubscription<int> _currentIndexSubscription;
bool? _shouldRender;
2022-11-21 13:31:00 +00:00
final ValueNotifier<bool> _toggleSelectAllFromDay = ValueNotifier(false);
final ValueNotifier<bool> _showSelectAllButton = ValueNotifier(false);
final ValueNotifier<bool> _areAllFromDaySelected = ValueNotifier(false);
2021-04-23 19:55:50 +00:00
@override
void initState() {
2022-11-09 13:51:36 +00:00
//this is for removing the 'select all from day' icon on unselecting all files with 'cancel'
widget.selectedFiles?.addListener(_selectedFilesListener);
2021-04-23 19:55:50 +00:00
super.initState();
_init();
}
void _init() {
2022-11-11 09:30:07 +00:00
_logger = Logger("LazyLoading_${widget.logTag}");
_shouldRender = true;
2021-04-23 19:55:50 +00:00
_files = widget.files;
_reloadEventSubscription = widget.reloadEvent?.listen((e) => _onReload(e));
2022-07-03 09:49:33 +00:00
_currentIndexSubscription =
widget.currentIndexStream.listen((currentIndex) {
2022-08-29 14:43:31 +00:00
final bool shouldRender = (currentIndex - widget.index).abs() <
2022-07-03 09:49:33 +00:00
kNumberOfDaysToRenderBeforeAndAfter;
if (mounted && shouldRender != _shouldRender) {
setState(() {
_shouldRender = shouldRender;
});
}
});
2021-04-23 19:55:50 +00:00
}
2021-05-06 21:15:40 +00:00
Future _onReload(FilesUpdatedEvent event) async {
2022-07-03 09:49:33 +00:00
final galleryDate =
DateTime.fromMicrosecondsSinceEpoch(_files[0].creationTime!);
final filesUpdatedThisDay = event.updatedFiles.where((file) {
final fileDate = DateTime.fromMicrosecondsSinceEpoch(file.creationTime!);
2021-05-06 21:15:40 +00:00
return fileDate.year == galleryDate.year &&
fileDate.month == galleryDate.month &&
fileDate.day == galleryDate.day;
});
if (filesUpdatedThisDay.isNotEmpty) {
2022-11-11 09:30:07 +00:00
if (kDebugMode) {
_logger.info(
filesUpdatedThisDay.length.toString() +
" files were updated due to ${event.reason} on " +
2022-11-11 09:30:07 +00:00
getDayTitle(galleryDate.microsecondsSinceEpoch),
);
}
2021-10-29 23:56:27 +00:00
if (event.type == EventType.addedOrUpdated) {
2022-07-03 09:49:33 +00:00
final dayStartTime =
DateTime(galleryDate.year, galleryDate.month, galleryDate.day);
final result = await widget.asyncLoader(
2022-06-11 08:23:52 +00:00
dayStartTime.microsecondsSinceEpoch,
dayStartTime.microsecondsSinceEpoch + microSecondsInDay - 1,
2022-06-11 08:23:52 +00:00
);
if (mounted) {
setState(() {
_files = result.files;
});
2021-05-06 21:15:40 +00:00
}
} else if (widget.removalEventTypes.contains(event.type)) {
// Files were removed
final generatedFileIDs = <int?>{};
final uploadedFileIds = <int?>{};
2021-05-06 21:15:40 +00:00
for (final file in filesUpdatedThisDay) {
if (file.generatedID != null) {
generatedFileIDs.add(file.generatedID);
} else if (file.uploadedFileID != null) {
uploadedFileIds.add(file.uploadedFileID);
}
2021-05-06 21:15:40 +00:00
}
final List<File> files = [];
files.addAll(_files);
files.removeWhere(
(file) =>
generatedFileIDs.contains(file.generatedID) ||
uploadedFileIds.contains(file.uploadedFileID),
);
if (kDebugMode) {
_logger.finest(
"removed ${_files.length - files.length} due to ${event.reason}",
);
}
if (mounted) {
2021-05-06 21:15:40 +00:00
setState(() {
_files = files;
});
}
2022-11-11 09:30:07 +00:00
} else {
if (kDebugMode) {
debugPrint("Unexpected event ${event.type.name}");
}
2021-05-06 21:15:40 +00:00
}
}
}
@override
void dispose() {
_reloadEventSubscription?.cancel();
_currentIndexSubscription.cancel();
widget.selectedFiles?.removeListener(_selectedFilesListener);
2022-12-06 12:24:45 +00:00
_toggleSelectAllFromDay.dispose();
_showSelectAllButton.dispose();
_areAllFromDaySelected.dispose();
super.dispose();
}
@override
void didUpdateWidget(LazyLoadingGallery oldWidget) {
super.didUpdateWidget(oldWidget);
2021-04-27 20:02:39 +00:00
if (!listEquals(_files, widget.files)) {
_reloadEventSubscription?.cancel();
2021-05-07 20:32:33 +00:00
_init();
}
}
2021-04-20 12:26:42 +00:00
@override
Widget build(BuildContext context) {
if (_files.isEmpty) {
return const SizedBox.shrink();
}
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (widget.areFilesCollatedByDay)
getDayWidget(
context,
_files[0].creationTime!,
widget.photoGirdSize,
),
widget.limitSelectionToOne
? const SizedBox.shrink()
: ValueListenableBuilder(
valueListenable: _showSelectAllButton,
builder: (context, dynamic value, _) {
return !value
? const SizedBox.shrink()
: GestureDetector(
behavior: HitTestBehavior.translucent,
child: SizedBox(
width: 48,
height: 44,
child: ValueListenableBuilder(
valueListenable: _areAllFromDaySelected,
builder: (context, dynamic value, _) {
return value
? const Icon(
Icons.check_circle,
size: 18,
)
: Icon(
Icons.check_circle_outlined,
color: getEnteColorScheme(context)
.strokeMuted,
size: 18,
);
},
),
),
onTap: () {
//this value has no significance
//changing only to notify the listeners
_toggleSelectAllFromDay.value =
!_toggleSelectAllFromDay.value;
},
);
},
)
],
),
_shouldRender!
2022-12-07 04:08:42 +00:00
? _getGallery()
: PlaceHolderWidget(
_files.length,
widget.photoGirdSize,
2022-12-07 04:08:42 +00:00
),
],
2021-04-20 12:26:42 +00:00
);
}
2021-04-23 19:55:50 +00:00
Widget _getGallery() {
2022-08-29 14:43:31 +00:00
final List<Widget> childGalleries = [];
final subGalleryItemLimit = widget.photoGirdSize * subGalleryMultiplier;
for (int index = 0; index < _files.length; index += subGalleryItemLimit) {
2022-06-11 08:23:52 +00:00
childGalleries.add(
LazyLoadingGridView(
widget.tag,
_files.sublist(
2022-07-03 06:56:43 +00:00
index,
min(index + subGalleryItemLimit, _files.length),
2022-07-03 06:56:43 +00:00
),
2022-06-11 08:23:52 +00:00
widget.asyncLoader,
widget.selectedFiles,
index == 0,
_files.length > kRecycleLimit,
2022-11-21 13:31:00 +00:00
_toggleSelectAllFromDay,
_areAllFromDaySelected,
widget.photoGirdSize,
limitSelectionToOne: widget.limitSelectionToOne,
2022-06-11 08:23:52 +00:00
),
);
2021-04-20 12:26:42 +00:00
}
return Column(
children: childGalleries,
2021-04-20 12:26:42 +00:00
);
}
void _selectedFilesListener() {
if (widget.selectedFiles!.files.isEmpty) {
_showSelectAllButton.value = false;
} else {
_showSelectAllButton.value = true;
}
}
2021-04-20 12:26:42 +00:00
}
class LazyLoadingGridView extends StatefulWidget {
2021-04-25 11:39:04 +00:00
final String tag;
final List<File> filesInDay;
final GalleryLoader asyncLoader;
final SelectedFiles? selectedFiles;
2021-05-06 21:17:38 +00:00
final bool shouldRender;
2021-05-06 21:31:31 +00:00
final bool shouldRecycle;
2022-11-21 13:31:00 +00:00
final ValueNotifier toggleSelectAllFromDay;
final ValueNotifier areAllFilesSelected;
final int? photoGridSize;
final bool limitSelectionToOne;
2021-04-20 12:26:42 +00:00
2021-05-04 15:49:11 +00:00
LazyLoadingGridView(
2021-05-06 21:15:40 +00:00
this.tag,
2022-11-21 13:31:00 +00:00
this.filesInDay,
this.asyncLoader,
2021-05-06 21:15:40 +00:00
this.selectedFiles,
2021-05-06 21:31:31 +00:00
this.shouldRender,
2022-11-09 12:00:28 +00:00
this.shouldRecycle,
2022-11-21 13:31:00 +00:00
this.toggleSelectAllFromDay,
this.areAllFilesSelected,
this.photoGridSize, {
this.limitSelectionToOne = false,
Key? key,
2021-05-07 12:14:51 +00:00
}) : super(key: key ?? UniqueKey());
2021-04-20 12:26:42 +00:00
@override
2022-07-03 09:45:00 +00:00
State<LazyLoadingGridView> createState() => _LazyLoadingGridViewState();
2021-04-20 12:26:42 +00:00
}
class _LazyLoadingGridViewState extends State<LazyLoadingGridView> {
bool? _shouldRender;
int? _currentUserID;
late StreamSubscription<ClearSelectionsEvent> _clearSelectionsEvent;
2021-04-25 11:39:04 +00:00
2021-04-24 07:44:56 +00:00
@override
void initState() {
2021-05-06 21:17:38 +00:00
_shouldRender = widget.shouldRender;
_currentUserID = Configuration.instance.getUserID();
widget.selectedFiles?.addListener(_selectedFilesListener);
2022-11-19 11:36:16 +00:00
_clearSelectionsEvent =
Bus.instance.on<ClearSelectionsEvent>().listen((event) {
if (mounted) {
setState(() {});
}
});
2022-11-21 13:31:00 +00:00
widget.toggleSelectAllFromDay.addListener(_toggleSelectAllFromDayListener);
super.initState();
2021-04-24 07:44:56 +00:00
}
2021-04-20 12:26:42 +00:00
@override
void dispose() {
widget.selectedFiles?.removeListener(_selectedFilesListener);
2022-11-19 11:36:16 +00:00
_clearSelectionsEvent.cancel();
2022-11-21 13:31:00 +00:00
widget.toggleSelectAllFromDay
.removeListener(_toggleSelectAllFromDayListener);
super.dispose();
}
2021-04-27 20:02:39 +00:00
@override
void didUpdateWidget(LazyLoadingGridView oldWidget) {
super.didUpdateWidget(oldWidget);
2022-11-21 13:31:00 +00:00
if (!listEquals(widget.filesInDay, oldWidget.filesInDay)) {
2021-05-07 20:32:33 +00:00
_shouldRender = widget.shouldRender;
2021-04-27 20:02:39 +00:00
}
}
2021-04-20 12:26:42 +00:00
@override
Widget build(BuildContext context) {
2021-05-06 21:31:31 +00:00
if (widget.shouldRecycle) {
return _getRecyclableView();
} else {
return _getNonRecyclableView();
}
}
Widget _getRecyclableView() {
return VisibilityDetector(
key: Key("gallery" + widget.filesInDay.first.tag),
2021-05-06 21:31:31 +00:00
onVisibilityChanged: (visibility) {
final shouldRender = visibility.visibleFraction > 0;
if (mounted && shouldRender != _shouldRender) {
setState(() {
_shouldRender = shouldRender;
});
}
},
child: _shouldRender!
2022-07-03 09:49:33 +00:00
? _getGridView()
: PlaceHolderWidget(widget.filesInDay.length, widget.photoGridSize!),
2021-05-06 21:31:31 +00:00
);
}
Widget _getNonRecyclableView() {
if (!_shouldRender!) {
2021-04-20 12:26:42 +00:00
return VisibilityDetector(
key: Key("gallery" + widget.filesInDay.first.tag),
2021-04-20 12:26:42 +00:00
onVisibilityChanged: (visibility) {
if (mounted && visibility.visibleFraction > 0 && !_shouldRender!) {
2021-04-20 12:26:42 +00:00
setState(() {
2021-05-06 21:17:38 +00:00
_shouldRender = true;
2021-04-20 12:26:42 +00:00
});
}
},
child:
PlaceHolderWidget(widget.filesInDay.length, widget.photoGridSize!),
2021-04-20 12:26:42 +00:00
);
} else {
2021-05-06 21:31:31 +00:00
return _getGridView();
2021-04-20 12:26:42 +00:00
}
}
2021-05-06 21:31:31 +00:00
Widget _getGridView() {
return GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
// to disable GridView's scrolling
2021-05-06 21:31:31 +00:00
itemBuilder: (context, index) {
return _buildFile(context, widget.filesInDay[index]);
2021-05-06 21:31:31 +00:00
},
2022-11-21 13:31:00 +00:00
itemCount: widget.filesInDay.length,
2022-11-28 08:00:37 +00:00
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
2022-11-21 09:45:25 +00:00
crossAxisSpacing: 2,
mainAxisSpacing: 2,
crossAxisCount: widget.photoGridSize!,
2021-05-06 21:31:31 +00:00
),
padding: const EdgeInsets.symmetric(vertical: (galleryGridSpacing / 2)),
2021-05-06 21:31:31 +00:00
);
}
2021-04-20 12:26:42 +00:00
Widget _buildFile(BuildContext context, File file) {
final isFileSelected = widget.selectedFiles?.isFileSelected(file) ?? false;
Color selectionColor = Colors.white;
if (isFileSelected &&
file.isUploaded &&
(file.ownerID != _currentUserID ||
file.pubMagicMetadata!.uploaderName != null)) {
final avatarColors = getEnteColorScheme(context).avatarColors;
final int randomID = file.ownerID != _currentUserID
? file.ownerID!
: file.pubMagicMetadata!.uploaderName.sumAsciiValues;
selectionColor = avatarColors[(randomID).remainder(avatarColors.length)];
}
2021-04-20 12:26:42 +00:00
return GestureDetector(
onTap: () {
widget.limitSelectionToOne
? _onTapWithSelectionLimit(file)
: _onTapNoSelectionLimit(file);
},
onLongPress: () {
widget.limitSelectionToOne
? _onLongPressWithSelectionLimit(file)
: _onLongPressNoSelectionLimit(file);
},
child: ClipRRect(
borderRadius: BorderRadius.circular(1),
child: Stack(
children: [
Hero(
tag: widget.tag + file.tag,
child: ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(
isFileSelected ? 0.4 : 0,
),
BlendMode.darken,
),
child: ThumbnailWidget(
file,
diskLoadDeferDuration: thumbnailDiskLoadDeferDuration,
serverLoadDeferDuration: thumbnailServerLoadDeferDuration,
shouldShowLivePhotoOverlay: true,
key: Key(widget.tag + file.tag),
thumbnailSize: widget.photoGridSize! < photoGridSizeDefault
? thumbnailLargeSize
: thumbnailSmallSize,
shouldShowOwnerAvatar: !isFileSelected,
2022-05-03 10:25:30 +00:00
),
),
2022-11-21 09:45:25 +00:00
),
Visibility(
visible: isFileSelected,
child: Positioned(
right: 4,
top: 4,
child: Icon(
Icons.check_circle_rounded,
size: 20,
color: selectionColor, //same for both themes
),
2022-11-21 09:45:25 +00:00
),
)
],
),
2021-04-20 12:26:42 +00:00
),
);
}
void _toggleFileSelection(File file) {
widget.selectedFiles!.toggleSelection(file);
2021-04-20 12:26:42 +00:00
}
void _onTapNoSelectionLimit(File file) async {
if (widget.selectedFiles?.files.isNotEmpty ?? false) {
_toggleFileSelection(file);
} else {
if (AppLifecycleService.instance.mediaExtensionAction.action ==
IntentAction.pick) {
final ioFile = await getFile(file);
MediaExtension().setResult("file://${ioFile!.path}");
} else {
_routeToDetailPage(file, context);
}
}
}
void _onTapWithSelectionLimit(File file) {
if (widget.selectedFiles!.files.isNotEmpty &&
widget.selectedFiles!.files.first != file) {
widget.selectedFiles!.clearAll();
}
_toggleFileSelection(file);
}
void _onLongPressNoSelectionLimit(File file) {
if (widget.selectedFiles!.files.isNotEmpty) {
_routeToDetailPage(file, context);
} else if (AppLifecycleService.instance.mediaExtensionAction.action ==
IntentAction.main) {
HapticFeedback.lightImpact();
_toggleFileSelection(file);
}
}
Future<void> _onLongPressWithSelectionLimit(File file) async {
if (AppLifecycleService.instance.mediaExtensionAction.action ==
IntentAction.pick) {
final ioFile = await getFile(file);
MediaExtension().setResult("file://${ioFile!.path}");
} else {
_routeToDetailPage(file, context);
}
}
2021-04-20 12:26:42 +00:00
void _routeToDetailPage(File file, BuildContext context) {
2022-06-11 08:23:52 +00:00
final page = DetailPage(
DetailPageConfiguration(
2022-11-21 13:31:00 +00:00
List.unmodifiable(widget.filesInDay),
2022-06-11 08:23:52 +00:00
widget.asyncLoader,
2022-11-21 13:31:00 +00:00
widget.filesInDay.indexOf(file),
2022-06-11 08:23:52 +00:00
widget.tag,
),
);
routeToPage(context, page, forceCustomPageRoute: true);
2021-04-20 12:26:42 +00:00
}
void _selectedFilesListener() {
if (widget.selectedFiles!.files.containsAll(widget.filesInDay.toSet())) {
widget.areAllFilesSelected.value = true;
} else {
widget.areAllFilesSelected.value = false;
}
bool shouldRefresh = false;
2022-11-21 13:31:00 +00:00
for (final file in widget.filesInDay) {
if (widget.selectedFiles!.isPartOfLastSelected(file)) {
shouldRefresh = true;
}
}
if (shouldRefresh && mounted) {
setState(() {});
}
}
2022-11-16 10:52:49 +00:00
2022-11-21 13:31:00 +00:00
void _toggleSelectAllFromDayListener() {
if (widget.selectedFiles!.files.containsAll(widget.filesInDay.toSet())) {
2022-11-16 10:52:49 +00:00
setState(() {
widget.selectedFiles!.unSelectAll(widget.filesInDay.toSet());
2022-11-16 10:52:49 +00:00
});
} else {
widget.selectedFiles!.selectAll(widget.filesInDay.toSet());
2022-11-16 10:52:49 +00:00
}
}
2021-04-20 12:26:42 +00:00
}