mirror of
https://github.com/krille-chan/fluffychat
synced 2024-09-19 04:15:09 +00:00
refactor: Use cached network image for mxc image uris
This commit is contained in:
parent
87d3d0feed
commit
86b1314c61
5 changed files with 75 additions and 83 deletions
|
@ -280,7 +280,6 @@ class ImageExtension extends HtmlExtension {
|
||||||
uri: mxcUrl,
|
uri: mxcUrl,
|
||||||
width: width ?? height ?? defaultDimension,
|
width: width ?? height ?? defaultDimension,
|
||||||
height: height ?? width ?? defaultDimension,
|
height: height ?? width ?? defaultDimension,
|
||||||
cacheKey: mxcUrl.toString(),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
|
@ -47,29 +47,32 @@ class Avatar extends StatelessWidget {
|
||||||
final noPic = mxContent == null ||
|
final noPic = mxContent == null ||
|
||||||
mxContent.toString().isEmpty ||
|
mxContent.toString().isEmpty ||
|
||||||
mxContent.toString() == 'null';
|
mxContent.toString() == 'null';
|
||||||
final textWidget = Center(
|
final textWidget = Container(
|
||||||
|
color: name?.lightColorAvatar,
|
||||||
|
alignment: Alignment.center,
|
||||||
child: Text(
|
child: Text(
|
||||||
fallbackLetters,
|
fallbackLetters,
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
color: noPic ? Colors.white : null,
|
color: Colors.white,
|
||||||
fontSize: (size / 2.5).roundToDouble(),
|
fontSize: (size / 2.5).roundToDouble(),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
final borderRadius = this.borderRadius ?? BorderRadius.circular(size / 2);
|
final borderRadius = this.borderRadius ?? BorderRadius.circular(size / 2);
|
||||||
final presenceUserId = this.presenceUserId;
|
final presenceUserId = this.presenceUserId;
|
||||||
final color =
|
|
||||||
noPic ? name?.lightColorAvatar : Theme.of(context).secondaryHeaderColor;
|
|
||||||
final container = Stack(
|
final container = Stack(
|
||||||
children: [
|
children: [
|
||||||
SizedBox(
|
SizedBox(
|
||||||
width: size,
|
width: size,
|
||||||
height: size,
|
height: size,
|
||||||
child: Material(
|
child: Material(
|
||||||
color: color,
|
|
||||||
shape: RoundedRectangleBorder(
|
shape: RoundedRectangleBorder(
|
||||||
borderRadius: borderRadius,
|
borderRadius: borderRadius,
|
||||||
side: border ?? BorderSide.none,
|
side: border ??
|
||||||
|
BorderSide(
|
||||||
|
color: Theme.of(context).dividerColor,
|
||||||
|
width: 1,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
clipBehavior: Clip.hardEdge,
|
clipBehavior: Clip.hardEdge,
|
||||||
child: noPic
|
child: noPic
|
||||||
|
@ -81,7 +84,6 @@ class Avatar extends StatelessWidget {
|
||||||
width: size,
|
width: size,
|
||||||
height: size,
|
height: size,
|
||||||
placeholder: (_) => textWidget,
|
placeholder: (_) => textWidget,
|
||||||
cacheKey: mxContent.toString(),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
@ -2,7 +2,7 @@ import 'dart:typed_data';
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
import 'package:http/http.dart' as http;
|
import 'package:cached_network_image/cached_network_image.dart';
|
||||||
import 'package:matrix/matrix.dart';
|
import 'package:matrix/matrix.dart';
|
||||||
|
|
||||||
import 'package:fluffychat/config/themes.dart';
|
import 'package:fluffychat/config/themes.dart';
|
||||||
|
@ -18,11 +18,8 @@ class MxcImage extends StatefulWidget {
|
||||||
final bool isThumbnail;
|
final bool isThumbnail;
|
||||||
final bool animated;
|
final bool animated;
|
||||||
final Duration retryDuration;
|
final Duration retryDuration;
|
||||||
final Duration animationDuration;
|
|
||||||
final Curve animationCurve;
|
|
||||||
final ThumbnailMethod thumbnailMethod;
|
final ThumbnailMethod thumbnailMethod;
|
||||||
final Widget Function(BuildContext context)? placeholder;
|
final Widget Function(BuildContext context)? placeholder;
|
||||||
final String? cacheKey;
|
|
||||||
|
|
||||||
const MxcImage({
|
const MxcImage({
|
||||||
this.uri,
|
this.uri,
|
||||||
|
@ -33,11 +30,8 @@ class MxcImage extends StatefulWidget {
|
||||||
this.placeholder,
|
this.placeholder,
|
||||||
this.isThumbnail = true,
|
this.isThumbnail = true,
|
||||||
this.animated = false,
|
this.animated = false,
|
||||||
this.animationDuration = FluffyThemes.animationDuration,
|
|
||||||
this.retryDuration = const Duration(seconds: 2),
|
this.retryDuration = const Duration(seconds: 2),
|
||||||
this.animationCurve = FluffyThemes.animationCurve,
|
|
||||||
this.thumbnailMethod = ThumbnailMethod.scale,
|
this.thumbnailMethod = ThumbnailMethod.scale,
|
||||||
this.cacheKey,
|
|
||||||
super.key,
|
super.key,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -46,76 +40,11 @@ class MxcImage extends StatefulWidget {
|
||||||
}
|
}
|
||||||
|
|
||||||
class _MxcImageState extends State<MxcImage> {
|
class _MxcImageState extends State<MxcImage> {
|
||||||
static final Map<String, Uint8List> _imageDataCache = {};
|
Uint8List? _imageData;
|
||||||
Uint8List? _imageDataNoCache;
|
|
||||||
Uint8List? get _imageData {
|
|
||||||
final cacheKey = widget.cacheKey;
|
|
||||||
return cacheKey == null ? _imageDataNoCache : _imageDataCache[cacheKey];
|
|
||||||
}
|
|
||||||
|
|
||||||
set _imageData(Uint8List? data) {
|
|
||||||
if (data == null) return;
|
|
||||||
final cacheKey = widget.cacheKey;
|
|
||||||
cacheKey == null
|
|
||||||
? _imageDataNoCache = data
|
|
||||||
: _imageDataCache[cacheKey] = data;
|
|
||||||
}
|
|
||||||
|
|
||||||
bool? _isCached;
|
|
||||||
|
|
||||||
Future<void> _load() async {
|
Future<void> _load() async {
|
||||||
final client = Matrix.of(context).client;
|
|
||||||
final uri = widget.uri;
|
|
||||||
final event = widget.event;
|
final event = widget.event;
|
||||||
|
|
||||||
if (uri != null) {
|
|
||||||
final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
|
|
||||||
final width = widget.width;
|
|
||||||
final realWidth = width == null ? null : width * devicePixelRatio;
|
|
||||||
final height = widget.height;
|
|
||||||
final realHeight = height == null ? null : height * devicePixelRatio;
|
|
||||||
|
|
||||||
final httpUri = widget.isThumbnail
|
|
||||||
? uri.getThumbnail(
|
|
||||||
client,
|
|
||||||
width: realWidth,
|
|
||||||
height: realHeight,
|
|
||||||
animated: widget.animated,
|
|
||||||
method: widget.thumbnailMethod,
|
|
||||||
)
|
|
||||||
: uri.getDownloadLink(client);
|
|
||||||
|
|
||||||
final storeKey = widget.isThumbnail ? httpUri : uri;
|
|
||||||
|
|
||||||
if (_isCached == null) {
|
|
||||||
final cachedData = await client.database?.getFile(storeKey);
|
|
||||||
if (cachedData != null) {
|
|
||||||
if (!mounted) return;
|
|
||||||
setState(() {
|
|
||||||
_imageData = cachedData;
|
|
||||||
_isCached = true;
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
_isCached = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
final response = await http.get(httpUri);
|
|
||||||
if (response.statusCode != 200) {
|
|
||||||
if (response.statusCode == 404) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
throw Exception();
|
|
||||||
}
|
|
||||||
final remoteData = response.bodyBytes;
|
|
||||||
|
|
||||||
if (!mounted) return;
|
|
||||||
setState(() {
|
|
||||||
_imageData = remoteData;
|
|
||||||
});
|
|
||||||
await client.database?.storeFile(storeKey, remoteData, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event != null) {
|
if (event != null) {
|
||||||
final data = await event.downloadAndDecryptAttachment(
|
final data = await event.downloadAndDecryptAttachment(
|
||||||
getThumbnail: widget.isThumbnail,
|
getThumbnail: widget.isThumbnail,
|
||||||
|
@ -131,7 +60,7 @@ class _MxcImageState extends State<MxcImage> {
|
||||||
}
|
}
|
||||||
|
|
||||||
void _tryLoad(_) async {
|
void _tryLoad(_) async {
|
||||||
if (_imageData != null) {
|
if (_imageData != null || widget.event == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
|
@ -160,6 +89,36 @@ class _MxcImageState extends State<MxcImage> {
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
final uri = widget.uri;
|
||||||
|
|
||||||
|
if (uri != null) {
|
||||||
|
final client = Matrix.of(context).client;
|
||||||
|
final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
|
||||||
|
final width = widget.width;
|
||||||
|
final realWidth = width == null ? null : width * devicePixelRatio;
|
||||||
|
final height = widget.height;
|
||||||
|
final realHeight = height == null ? null : height * devicePixelRatio;
|
||||||
|
|
||||||
|
final httpUri = widget.isThumbnail
|
||||||
|
? uri.getThumbnail(
|
||||||
|
client,
|
||||||
|
width: realWidth,
|
||||||
|
height: realHeight,
|
||||||
|
animated: widget.animated,
|
||||||
|
method: widget.thumbnailMethod,
|
||||||
|
)
|
||||||
|
: uri.getDownloadLink(client);
|
||||||
|
|
||||||
|
return CachedNetworkImage(
|
||||||
|
imageUrl: httpUri.toString(),
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
fit: widget.fit,
|
||||||
|
placeholder: (context, _) => placeholder(context),
|
||||||
|
errorWidget: (context, _, __) => placeholder(context),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
final data = _imageData;
|
final data = _imageData;
|
||||||
final hasData = data != null && data.isNotEmpty;
|
final hasData = data != null && data.isNotEmpty;
|
||||||
|
|
||||||
|
@ -177,7 +136,6 @@ class _MxcImageState extends State<MxcImage> {
|
||||||
filterQuality:
|
filterQuality:
|
||||||
widget.isThumbnail ? FilterQuality.low : FilterQuality.medium,
|
widget.isThumbnail ? FilterQuality.low : FilterQuality.medium,
|
||||||
errorBuilder: (context, __, ___) {
|
errorBuilder: (context, __, ___) {
|
||||||
_isCached = false;
|
|
||||||
_imageData = null;
|
_imageData = null;
|
||||||
WidgetsBinding.instance.addPostFrameCallback(_tryLoad);
|
WidgetsBinding.instance.addPostFrameCallback(_tryLoad);
|
||||||
return placeholder(context);
|
return placeholder(context);
|
||||||
|
|
32
pubspec.lock
32
pubspec.lock
|
@ -129,6 +129,30 @@ packages:
|
||||||
url: "https://pub.dev"
|
url: "https://pub.dev"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "1.1.1"
|
version: "1.1.1"
|
||||||
|
cached_network_image:
|
||||||
|
dependency: "direct main"
|
||||||
|
description:
|
||||||
|
name: cached_network_image
|
||||||
|
sha256: "28ea9690a8207179c319965c13cd8df184d5ee721ae2ce60f398ced1219cea1f"
|
||||||
|
url: "https://pub.dev"
|
||||||
|
source: hosted
|
||||||
|
version: "3.3.1"
|
||||||
|
cached_network_image_platform_interface:
|
||||||
|
dependency: transitive
|
||||||
|
description:
|
||||||
|
name: cached_network_image_platform_interface
|
||||||
|
sha256: "9e90e78ae72caa874a323d78fa6301b3fb8fa7ea76a8f96dc5b5bf79f283bf2f"
|
||||||
|
url: "https://pub.dev"
|
||||||
|
source: hosted
|
||||||
|
version: "4.0.0"
|
||||||
|
cached_network_image_web:
|
||||||
|
dependency: transitive
|
||||||
|
description:
|
||||||
|
name: cached_network_image_web
|
||||||
|
sha256: "205d6a9f1862de34b93184f22b9d2d94586b2f05c581d546695e3d8f6a805cd7"
|
||||||
|
url: "https://pub.dev"
|
||||||
|
source: hosted
|
||||||
|
version: "1.2.0"
|
||||||
callkeep:
|
callkeep:
|
||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description:
|
description:
|
||||||
|
@ -1270,6 +1294,14 @@ packages:
|
||||||
url: "https://pub.dev"
|
url: "https://pub.dev"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "2.0.2"
|
version: "2.0.2"
|
||||||
|
octo_image:
|
||||||
|
dependency: transitive
|
||||||
|
description:
|
||||||
|
name: octo_image
|
||||||
|
sha256: "45b40f99622f11901238e18d48f5f12ea36426d8eced9f4cbf58479c7aa2430d"
|
||||||
|
url: "https://pub.dev"
|
||||||
|
source: hosted
|
||||||
|
version: "2.0.0"
|
||||||
olm:
|
olm:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
|
|
|
@ -14,6 +14,7 @@ dependencies:
|
||||||
async: ^2.11.0
|
async: ^2.11.0
|
||||||
badges: ^3.1.2
|
badges: ^3.1.2
|
||||||
blurhash_dart: ^1.2.1
|
blurhash_dart: ^1.2.1
|
||||||
|
cached_network_image: ^3.3.1
|
||||||
callkeep: ^0.3.2
|
callkeep: ^0.3.2
|
||||||
chewie: ^1.8.1
|
chewie: ^1.8.1
|
||||||
collection: ^1.18.0
|
collection: ^1.18.0
|
||||||
|
|
Loading…
Reference in a new issue