bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement a server proxy for external images to avoid CORS errors on web

Browse Source 
Remove ResizeImage component on web platform to avoid UI thread locking
This commit is contained in:
Shawn 2023-09-06 20:11:04 -06:00
parent e440b29276
commit ab7ce7bcd6
3 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/ui/common/collectible_item.dart
View File

@ -8,7 +8,7 @@ import 'package:wonders/ui/screens/collectible_found/collectible_found_screen.da
class CollectibleItem extends StatelessWidget with GetItMixin { class CollectibleItem extends StatelessWidget with GetItMixin {
CollectibleItem(this.collectible, {this.size = 64.0, Key? key}) : super(key: key) { CollectibleItem(this.collectible, {this.size = 64.0, Key? key}) : super(key: key) {
// pre-fetch the image, so it's ready if we show the collectible found screen. // pre-fetch the image, so it's ready if we show the collectible found screen.
_imageProvider = NetworkImage(collectible.imageUrlSmall); _imageProvider = NetworkImage(AppImage.maybeAddImgProxy(collectible.imageUrl));
_imageProvider.resolve(ImageConfiguration()).addListener(ImageStreamListener((_, __) {})); _imageProvider.resolve(ImageConfiguration()).addListener(ImageStreamListener((_, __) {}));
} }

19
lib/ui/common/controls/app_image.dart
View File

@ -28,6 +28,14 @@ class AppImage extends StatefulWidget {
final Color? color; final Color? color;
final double? scale; final double? scale;
static String maybeAddImgProxy(String url) {
String proxyUrl = 'proxy.wonderous.app:8081/';
if (!url.contains(proxyUrl) && (url.contains('images.metmuseum.org') || url.contains('img.youtube.com'))) {
url = 'https://$proxyUrl$url';
}
return url;
}
@override @override
State<AppImage> createState() => _AppImageState(); State<AppImage> createState() => _AppImageState();
} }
@ -54,18 +62,11 @@ class _AppImageState extends State<AppImage> {
/// Apply proxy to MET api images /// Apply proxy to MET api images
if(kIsWeb && _sourceImage is NetworkImage){ if(kIsWeb && _sourceImage is NetworkImage){
final url = (_sourceImage as NetworkImage).url; final url = (_sourceImage as NetworkImage).url;
_sourceImage = NetworkImage(maybeAddMetProxy(url)); _sourceImage = NetworkImage(AppImage.maybeAddImgProxy(url));
} }
_displayImage = _capImageSize(_addRetry(_sourceImage)); _displayImage = _capImageSize(_addRetry(_sourceImage));
} }
String maybeAddMetProxy(String url) {
if (url.contains('images.metmuseum.org')) {
url = 'https://proxy.wonderous.app:8081/$url';
return url;
}
return url;
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -100,6 +101,8 @@ class _AppImageState extends State<AppImage> {
} }
ImageProvider? _capImageSize(ImageProvider? image) { ImageProvider? _capImageSize(ImageProvider? image) {
// Disable resizing for web as it is currently single-threaded and causes the UI to lock up when resizing large images
if(kIsWeb) return image; // TODO: Remove this when the web engine is updated to support non-blocking image resizing
if (image == null || widget.scale == null) return image; if (image == null || widget.scale == null) return image;
final MediaQueryData mq = MediaQuery.of(context); final MediaQueryData mq = MediaQuery.of(context);
final Size screenSize = mq.size * mq.devicePixelRatio * widget.scale!; final Size screenSize = mq.size * mq.devicePixelRatio * widget.scale!;

18
pubspec.lock
View File

@ -308,10 +308,10 @@ packages:
dependency: "direct main" dependency: "direct main"
description: description:
name: google_maps_flutter name: google_maps_flutter
sha256: abefcb1e5e5c96bdd8084939dda555257af272c7972902ca46d5631092c1df68 sha256: d4914cb38b3dcb62c39c085d968d434de0f8050f00f4d9f5ba4a7c7e004934cb
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "2.2.8" version: "2.5.0"
google_maps_flutter_android: google_maps_flutter_android:
dependency: transitive dependency: transitive
description: description:
@ -340,10 +340,10 @@ packages:
dependency: "direct main" dependency: "direct main"
description: description:
name: google_maps_flutter_web name: google_maps_flutter_web
sha256: ed964ba9042472e851db5a6184d84c5ccb82c4c3729cff810bf6be1b0ac28e51 sha256: f893d1542c6562bc8299ef768fbbe92ade83c220ab3209b9477ec9f81ad585e4
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.4.0+9" version: "0.5.4+2"
html: html:
dependency: transitive dependency: transitive
description: description:
@ -822,13 +822,13 @@ packages:
source: hosted source: hosted
version: "2.1.1" version: "2.1.1"
url_launcher: url_launcher:
dependency: transitive dependency: "direct main"
description: description:
name: url_launcher name: url_launcher
sha256: "781bd58a1eb16069412365c98597726cd8810ae27435f04b3b4d3a470bacd61e" sha256: "47e208a6711459d813ba18af120d9663c20bdf6985d6ad39fe165d2538378d27"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "6.1.12" version: "6.1.14"
url_launcher_android: url_launcher_android:
dependency: transitive dependency: transitive
description: description:
@ -1014,5 +1014,5 @@ packages:
source: hosted source: hosted
version: "2.0.2" version: "2.0.2"
sdks: sdks:
dart: ">=3.1.0-185.0.dev <4.0.0" dart: ">=3.1.0 <4.0.0"
flutter: ">=3.10.0" flutter: ">=3.13.0"