👽 Authorized image load request
💄 Optimize image styling
This commit is contained in:
@@ -1,11 +1,16 @@
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_blurhash/flutter_blurhash.dart';
|
||||
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:island/pods/config.dart';
|
||||
import 'package:island/pods/network.dart';
|
||||
|
||||
class UniversalImage extends HookWidget {
|
||||
class UniversalImage extends HookConsumerWidget {
|
||||
final String uri;
|
||||
final String? blurHash;
|
||||
final BoxFit fit;
|
||||
@@ -28,11 +33,19 @@ class UniversalImage extends HookWidget {
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final loaded = useState(false);
|
||||
final isCached = useState<bool?>(null);
|
||||
final isSvgImage = isSvg || uri.toLowerCase().endsWith('.svg');
|
||||
|
||||
final serverUrl = ref.watch(serverUrlProvider);
|
||||
final token = ref.watch(tokenProvider);
|
||||
|
||||
final Map<String, String>? httpHeaders =
|
||||
uri.startsWith(serverUrl) && token != null
|
||||
? {'Authorization': 'AtField ${token.token}'}
|
||||
: null;
|
||||
|
||||
useEffect(() {
|
||||
DefaultCacheManager().getFileFromCache(uri).then((fileInfo) {
|
||||
isCached.value = fileInfo != null;
|
||||
@@ -73,6 +86,7 @@ class UniversalImage extends HookWidget {
|
||||
else if (isCached.value!)
|
||||
CachedNetworkImage(
|
||||
imageUrl: uri,
|
||||
httpHeaders: httpHeaders,
|
||||
fit: fit,
|
||||
width: width,
|
||||
height: height,
|
||||
@@ -84,17 +98,18 @@ class UniversalImage extends HookWidget {
|
||||
width: width,
|
||||
height: height,
|
||||
),
|
||||
errorWidget: (context, url, error) => useFallbackImage
|
||||
? Image.asset(
|
||||
'assets/images/media-offline.jpg',
|
||||
fit: BoxFit.cover,
|
||||
key: Key('image-broke-$uri'),
|
||||
)
|
||||
: SizedBox.shrink(),
|
||||
errorWidget: (context, url, error) => CachedImageErrorWidget(
|
||||
useFallbackImage: useFallbackImage,
|
||||
uri: uri,
|
||||
blurHash: blurHash,
|
||||
error: error,
|
||||
debug: true,
|
||||
),
|
||||
)
|
||||
else
|
||||
CachedNetworkImage(
|
||||
imageUrl: uri,
|
||||
httpHeaders: httpHeaders,
|
||||
fit: fit,
|
||||
width: width,
|
||||
height: height,
|
||||
@@ -123,13 +138,13 @@ class UniversalImage extends HookWidget {
|
||||
),
|
||||
);
|
||||
},
|
||||
errorWidget: (context, url, error) => useFallbackImage
|
||||
? Image.asset(
|
||||
'assets/images/media-offline.jpg',
|
||||
fit: BoxFit.cover,
|
||||
key: Key('image-broke-$uri'),
|
||||
)
|
||||
: SizedBox.shrink(),
|
||||
errorWidget: (context, url, error) => CachedImageErrorWidget(
|
||||
useFallbackImage: useFallbackImage,
|
||||
uri: uri,
|
||||
blurHash: blurHash,
|
||||
error: error,
|
||||
debug: true,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -137,6 +152,135 @@ class UniversalImage extends HookWidget {
|
||||
}
|
||||
}
|
||||
|
||||
class CachedImageErrorWidget extends StatelessWidget {
|
||||
final bool useFallbackImage;
|
||||
final String uri;
|
||||
final String? blurHash;
|
||||
final dynamic error;
|
||||
final bool debug;
|
||||
|
||||
const CachedImageErrorWidget({
|
||||
super.key,
|
||||
required this.useFallbackImage,
|
||||
required this.uri,
|
||||
this.blurHash,
|
||||
this.error,
|
||||
this.debug = false,
|
||||
});
|
||||
|
||||
int? _extractStatusCode(dynamic error) {
|
||||
if (error == null) return null;
|
||||
final errorString = error.toString();
|
||||
// Check for HttpException with status code
|
||||
final httpExceptionRegex = RegExp(r'Invalid statusCode: (\d+)');
|
||||
final match = httpExceptionRegex.firstMatch(errorString);
|
||||
if (match != null) {
|
||||
return int.tryParse(match.group(1) ?? '');
|
||||
}
|
||||
// Check if error has statusCode property (like DioError)
|
||||
if (error.response?.statusCode != null) {
|
||||
return error.response.statusCode;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (debug && error != null) {
|
||||
debugPrint('Image load error for $uri: $error');
|
||||
}
|
||||
|
||||
if (!useFallbackImage) {
|
||||
return SizedBox.shrink();
|
||||
}
|
||||
|
||||
final statusCode = _extractStatusCode(error);
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final minDimension = constraints.maxWidth < constraints.maxHeight
|
||||
? constraints.maxWidth
|
||||
: constraints.maxHeight;
|
||||
final iconSize = math.max(
|
||||
minDimension * 0.3,
|
||||
28,
|
||||
); // 30% of the smaller dimension
|
||||
final hasEnoughSpace = minDimension > 40;
|
||||
|
||||
return Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
if (blurHash != null)
|
||||
BlurHash(hash: blurHash!)
|
||||
else
|
||||
Image.asset(
|
||||
'assets/images/media-offline.jpg',
|
||||
fit: BoxFit.cover,
|
||||
key: Key('-$uri'),
|
||||
),
|
||||
Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
_getErrorIcon(statusCode),
|
||||
color: Colors.white,
|
||||
size: iconSize * 0.5,
|
||||
shadows: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.3),
|
||||
blurRadius: 4,
|
||||
offset: Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (hasEnoughSpace && statusCode != null) ...[
|
||||
SizedBox(height: iconSize * 0.1),
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: iconSize * 0.15,
|
||||
vertical: iconSize * 0.05,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withOpacity(0.7),
|
||||
borderRadius: BorderRadius.circular(iconSize * 0.1),
|
||||
),
|
||||
child: Text(
|
||||
statusCode.toString(),
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: iconSize * 0.15,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
IconData _getErrorIcon(int? statusCode) {
|
||||
switch (statusCode) {
|
||||
case 403:
|
||||
case 401:
|
||||
return Icons.lock_rounded;
|
||||
case 404:
|
||||
return Icons.broken_image_rounded;
|
||||
case 500:
|
||||
case 502:
|
||||
case 503:
|
||||
return Icons.error_rounded;
|
||||
default:
|
||||
return Icons.broken_image_rounded;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class AnimatedCircularProgressIndicator extends HookWidget {
|
||||
final double? value;
|
||||
final Color? color;
|
||||
@@ -172,4 +316,4 @@ class AnimatedCircularProgressIndicator extends HookWidget {
|
||||
backgroundColor: Colors.transparent,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user