Optimize post attachment loading

This commit is contained in:
LittleSheep 2024-10-10 22:52:05 +08:00
parent 1e37c6ddae
commit 382e3c4a4c
10 changed files with 130 additions and 90 deletions

View File

@ -2,8 +2,10 @@ import 'dart:math';
import 'package:get/get.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:solian/models/attachment.dart';
import 'package:solian/models/pagination.dart';
import 'package:solian/models/post.dart';
import 'package:solian/providers/content/attachment.dart';
import 'package:solian/providers/content/posts.dart';
import 'package:solian/providers/last_read.dart';
@ -111,33 +113,33 @@ class PostListController extends GetxController {
Future<List<Post>?> _loadPosts(int pageKey) async {
isBusy.value = true;
final PostProvider provider = Get.find();
final PostProvider posts = Get.find();
Response resp;
try {
if (author != null) {
resp = await provider.listPost(
resp = await posts.listPost(
pageKey,
author: author,
);
} else {
switch (mode.value) {
case 2:
resp = await provider.listRecommendations(
resp = await posts.listRecommendations(
pageKey,
channel: 'shuffle',
realm: realm,
);
break;
case 1:
resp = await provider.listRecommendations(
resp = await posts.listRecommendations(
pageKey,
channel: 'friends',
realm: realm,
);
break;
default:
resp = await provider.listRecommendations(
resp = await posts.listRecommendations(
pageKey,
realm: realm,
);
@ -153,6 +155,27 @@ class PostListController extends GetxController {
final result = PaginationResult.fromJson(resp.body);
final out = result.data?.map((e) => Post.fromJson(e)).toList();
final AttachmentProvider attach = Get.find();
if (out != null) {
final attachmentIds = out
.mapMany((x) => x.body['attachments'] ?? [])
.cast<String>()
.toSet()
.toList();
final attachmentOut = await attach.listMetadata(attachmentIds);
for (var idx = 0; idx < out.length; idx++) {
final rids = List<String>.from(out[idx].body['attachments'] ?? []);
out[idx].preload = PostPreload(
attachments: attachmentOut
.where((x) => x != null && rids.contains(x.rid))
.cast<Attachment>()
.toList(),
);
}
}
postTotal.value = result.count;
return out;

View File

@ -1,10 +1,19 @@
import 'package:json_annotation/json_annotation.dart';
import 'package:solian/models/account.dart';
import 'package:solian/models/attachment.dart';
import 'package:solian/models/post_categories.dart';
import 'package:solian/models/realm.dart';
part 'post.g.dart';
class PostPreload {
List<Attachment> attachments;
PostPreload({
required this.attachments,
});
}
@JsonSerializable()
class Post {
int id;
@ -33,6 +42,9 @@ class Post {
Account author;
PostMetric? metric;
@JsonKey(includeFromJson: false, includeToJson: false)
PostPreload? preload;
Post({
required this.id,
required this.createdAt,

View File

@ -26,7 +26,6 @@ import 'package:solian/widgets/app_bar_leading.dart';
import 'package:solian/widgets/attachments/attachment_list.dart';
import 'package:solian/widgets/daily_sign/history_chart.dart';
import 'package:solian/widgets/posts/post_list.dart';
import 'package:solian/widgets/posts/post_warped_list.dart';
import 'package:solian/widgets/reports/abuse_report.dart';
import 'package:solian/widgets/root_container.dart';
import 'package:solian/widgets/sized_container.dart';
@ -609,7 +608,7 @@ class _AccountProfilePageState extends State<AccountProfilePage> {
child: Center(child: CircularProgressIndicator()),
),
if (_userinfo != null)
PostWarpedListWidget(
ControlledPostListWidget(
isPinned: false,
controller: _postController.pagingController,
onUpdate: () => _postController.reloadAllOver(),

View File

@ -13,8 +13,8 @@ import 'package:solian/widgets/account/signin_required_overlay.dart';
import 'package:solian/widgets/current_state_action.dart';
import 'package:solian/widgets/app_bar_leading.dart';
import 'package:solian/widgets/navigation/realm_switcher.dart';
import 'package:solian/widgets/posts/post_list.dart';
import 'package:solian/widgets/posts/post_shuffle_swiper.dart';
import 'package:solian/widgets/posts/post_warped_list.dart';
import 'package:solian/widgets/root_container.dart';
class ExploreScreen extends StatefulWidget {
@ -156,7 +156,7 @@ class _ExploreScreenState extends State<ExploreScreen>
RefreshIndicator(
onRefresh: () => _postController.reloadAllOver(),
child: CustomScrollView(slivers: [
PostWarpedListWidget(
ControlledPostListWidget(
controller: _postController.pagingController,
onUpdate: () => _postController.reloadAllOver(),
),
@ -167,7 +167,7 @@ class _ExploreScreenState extends State<ExploreScreen>
return RefreshIndicator(
onRefresh: () => _postController.reloadAllOver(),
child: CustomScrollView(slivers: [
PostWarpedListWidget(
ControlledPostListWidget(
controller: _postController.pagingController,
onUpdate: () => _postController.reloadAllOver(),
),

View File

@ -3,7 +3,7 @@ import 'package:get/get.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:solian/models/pagination.dart';
import 'package:solian/providers/content/posts.dart';
import 'package:solian/widgets/posts/post_warped_list.dart';
import 'package:solian/widgets/posts/post_list.dart';
import '../../models/post.dart';
@ -77,7 +77,7 @@ class _FeedSearchScreenState extends State<FeedSearchScreen> {
onRefresh: () => Future.sync(() => _pagingController.refresh()),
child: CustomScrollView(
slivers: [
PostWarpedListWidget(
ControlledPostListWidget(
controller: _pagingController,
onUpdate: () => _pagingController.refresh(),
),

View File

@ -15,7 +15,8 @@ import 'package:solian/widgets/sized_container.dart';
class AttachmentList extends StatefulWidget {
final String parentId;
final List<String> attachmentsId;
final List<String>? attachmentIds;
final List<Attachment>? attachments;
final bool isGrid;
final bool isColumn;
final bool isForceGrid;
@ -29,7 +30,8 @@ class AttachmentList extends StatefulWidget {
const AttachmentList({
super.key,
required this.parentId,
required this.attachmentsId,
this.attachmentIds,
this.attachments,
this.isGrid = false,
this.isColumn = false,
this.isForceGrid = false,
@ -50,21 +52,21 @@ class _AttachmentListState extends State<AttachmentList> {
double _aspectRatio = 1;
List<Attachment?> _attachmentsMeta = List.empty();
List<Attachment?> _attachments = List.empty();
void _getMetadataList() {
final AttachmentProvider attach = Get.find();
if (widget.attachmentsId.isEmpty) {
if (widget.attachmentIds?.isEmpty ?? false) {
return;
} else {
_attachmentsMeta = List.filled(widget.attachmentsId.length, null);
_attachments = List.filled(widget.attachmentIds!.length, null);
}
attach.listMetadata(widget.attachmentsId).then((result) {
attach.listMetadata(widget.attachmentIds!).then((result) {
if (mounted) {
setState(() {
_attachmentsMeta = result;
_attachments = result;
_isLoading = false;
});
}
@ -76,7 +78,7 @@ class _AttachmentListState extends State<AttachmentList> {
bool isConsistent = true;
double? consistentValue;
int portrait = 0, square = 0, landscape = 0;
for (var entry in _attachmentsMeta) {
for (var entry in _attachments) {
if (entry == null) continue;
if (entry.metadata?['ratio'] != null) {
if (entry.metadata?['ratio'] is int) {
@ -117,10 +119,9 @@ class _AttachmentListState extends State<AttachmentList> {
item: element,
parentId: widget.parentId,
width: width ?? widget.width,
badgeContent: '${idx + 1}/${_attachmentsMeta.length}',
showBadge:
_attachmentsMeta.length > 1 && !widget.isGrid && !widget.isColumn,
showBorder: widget.attachmentsId.length > 1,
badgeContent: '${idx + 1}/${_attachments.length}',
showBadge: _attachments.length > 1 && !widget.isGrid && !widget.isColumn,
showBorder: _attachments.length > 1,
showMature: _showMature,
autoload: widget.autoload,
onReveal: (value) {
@ -132,7 +133,16 @@ class _AttachmentListState extends State<AttachmentList> {
@override
void initState() {
super.initState();
_getMetadataList();
assert(widget.attachmentIds != null || widget.attachments != null);
if (widget.attachments == null) {
_getMetadataList();
} else {
setState(() {
_attachments = widget.attachments!;
_isLoading = false;
});
_calculateAspectRatio();
}
}
Color get _unFocusColor =>
@ -140,7 +150,7 @@ class _AttachmentListState extends State<AttachmentList> {
@override
Widget build(BuildContext context) {
if (widget.attachmentsId.isEmpty) {
if (widget.attachmentIds?.isEmpty ?? widget.attachments!.isEmpty) {
return const SizedBox.shrink();
}
@ -154,7 +164,7 @@ class _AttachmentListState extends State<AttachmentList> {
).paddingOnly(right: 5),
Text(
'attachmentHint'.trParams(
{'count': widget.attachmentsId.length.toString()},
{'count': _attachments.toString()},
),
style: TextStyle(color: _unFocusColor, fontSize: 12),
)
@ -171,8 +181,8 @@ class _AttachmentListState extends State<AttachmentList> {
return Wrap(
spacing: 8,
runSpacing: 8,
children: widget.attachmentsId.map((x) {
final element = _attachmentsMeta[idx];
children: _attachments.map((x) {
final element = _attachments[idx];
idx++;
if (element == null) return const SizedBox.shrink();
double ratio = element.metadata?['ratio']?.toDouble() ?? 16 / 9;
@ -202,7 +212,7 @@ class _AttachmentListState extends State<AttachmentList> {
);
}
final isNotPureImage = _attachmentsMeta.any(
final isNotPureImage = _attachments.any(
(x) => x?.mimetype.split('/').firstOrNull != 'image',
);
if (widget.isGrid && (widget.isForceGrid || !isNotPureImage)) {
@ -213,13 +223,13 @@ class _AttachmentListState extends State<AttachmentList> {
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: math.min(3, widget.attachmentsId.length),
crossAxisCount: math.min(3, _attachments.length),
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
),
itemCount: widget.attachmentsId.length,
itemCount: _attachments.length,
itemBuilder: (context, idx) {
final element = _attachmentsMeta[idx];
final element = _attachments[idx];
return Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHigh,
@ -257,12 +267,12 @@ class _AttachmentListState extends State<AttachmentList> {
animateToClosest: true,
aspectRatio: _aspectRatio,
viewportFraction:
widget.viewport ?? (widget.attachmentsId.length > 1 ? 0.95 : 1),
widget.viewport ?? (_attachments.length > 1 ? 0.95 : 1),
enableInfiniteScroll: false,
),
itemCount: _attachmentsMeta.length,
itemCount: _attachments.length,
itemBuilder: (context, idx, _) {
final element = _attachmentsMeta[idx];
final element = _attachments[idx];
return _buildEntry(element, idx);
},
),

View File

@ -78,7 +78,7 @@ class ChatEvent extends StatelessWidget {
child: AttachmentList(
key: Key('m${item.uuid}attachments'),
parentId: item.uuid,
attachmentsId: attachments,
attachmentIds: attachments,
isColumn: true,
),
);

View File

@ -455,14 +455,16 @@ class _PostAttachmentWidget extends StatelessWidget {
if (attachments.length > 3) {
return AttachmentList(
parentId: item.id.toString(),
attachmentsId: attachments,
attachmentIds: item.preload == null ? attachments : null,
attachments: item.preload?.attachments,
autoload: false,
isGrid: true,
).paddingOnly(left: 36, top: 4, bottom: 4);
} else if (attachments.length > 1 || isLargeScreen) {
return AttachmentList(
parentId: item.id.toString(),
attachmentsId: attachments,
attachmentIds: item.preload == null ? attachments : null,
attachments: item.preload?.attachments,
autoload: false,
isColumn: true,
).paddingOnly(left: 60, right: 24, top: 4, bottom: 4);
@ -470,7 +472,8 @@ class _PostAttachmentWidget extends StatelessWidget {
return AttachmentList(
flatMaxHeight: MediaQuery.of(context).size.width,
parentId: item.id.toString(),
attachmentsId: attachments,
attachmentIds: item.preload == null ? attachments : null,
attachments: item.preload?.attachments,
autoload: false,
);
}

View File

@ -48,7 +48,6 @@ class PostListWidget extends StatelessWidget {
}
class PostListEntryWidget extends StatelessWidget {
final int renderOrder;
final bool isShowEmbed;
final bool isNestedClickable;
final bool isClickable;
@ -59,7 +58,6 @@ class PostListEntryWidget extends StatelessWidget {
const PostListEntryWidget({
super.key,
this.renderOrder = 0,
required this.isShowEmbed,
required this.isNestedClickable,
required this.isClickable,
@ -101,3 +99,46 @@ class PostListEntryWidget extends StatelessWidget {
);
}
}
class ControlledPostListWidget extends StatelessWidget {
final bool isShowEmbed;
final bool isClickable;
final bool isNestedClickable;
final bool isPinned;
final PagingController<int, Post> controller;
final Function? onUpdate;
const ControlledPostListWidget({
super.key,
required this.controller,
this.isShowEmbed = true,
this.isClickable = true,
this.isNestedClickable = true,
this.isPinned = true,
this.onUpdate,
});
@override
Widget build(BuildContext context) {
return PagedSliverList<int, Post>.separated(
addRepaintBoundaries: true,
pagingController: controller,
builderDelegate: PagedChildBuilderDelegate<Post>(
itemBuilder: (context, item, index) {
if (item.pinnedAt != null && !isPinned) {
return const SizedBox.shrink();
}
return PostListEntryWidget(
isShowEmbed: isShowEmbed,
isNestedClickable: isNestedClickable,
isClickable: isClickable,
showFeaturedReply: true,
item: item,
onUpdate: onUpdate ?? () {},
);
},
),
separatorBuilder: (_, __) => const Divider(thickness: 0.3, height: 0.3),
);
}
}

View File

@ -1,48 +0,0 @@
import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:solian/models/post.dart';
import 'package:solian/widgets/posts/post_list.dart';
class PostWarpedListWidget extends StatelessWidget {
final bool isShowEmbed;
final bool isClickable;
final bool isNestedClickable;
final bool isPinned;
final PagingController<int, Post> controller;
final Function? onUpdate;
const PostWarpedListWidget({
super.key,
required this.controller,
this.isShowEmbed = true,
this.isClickable = true,
this.isNestedClickable = true,
this.isPinned = true,
this.onUpdate,
});
@override
Widget build(BuildContext context) {
return PagedSliverList<int, Post>.separated(
addRepaintBoundaries: true,
pagingController: controller,
builderDelegate: PagedChildBuilderDelegate<Post>(
itemBuilder: (context, item, index) {
if (item.pinnedAt != null && !isPinned) {
return const SizedBox.shrink();
}
return PostListEntryWidget(
renderOrder: index,
isShowEmbed: isShowEmbed,
isNestedClickable: isNestedClickable,
isClickable: isClickable,
showFeaturedReply: true,
item: item,
onUpdate: onUpdate ?? () {},
);
},
),
separatorBuilder: (_, __) => const Divider(thickness: 0.3, height: 0.3),
);
}
}