diff --git a/lib/components/content_banner.dart b/lib/components/content_banner.dart index 172e5c3..54322f7 100644 --- a/lib/components/content_banner.dart +++ b/lib/components/content_banner.dart @@ -1,7 +1,6 @@ import 'package:cached_network_image/cached_network_image.dart'; import 'package:famedlysdk/famedlysdk.dart'; -import 'package:fluffychat/utils/app_route.dart'; -import 'package:fluffychat/views/content_web_view.dart'; +import 'package:fluffychat/views/image_viewer.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @@ -35,12 +34,7 @@ class ContentBanner extends StatelessWidget { ); return InkWell( onTap: () => mxContent.mxc?.isNotEmpty ?? false - ? Navigator.of(context).push( - AppRoute.defaultRoute( - context, - ContentWebView(mxContent), - ), - ) + ? ImageViewer.show(context, mxContent) : null, child: Container( height: 300, diff --git a/lib/components/list_items/message.dart b/lib/components/list_items/message.dart index 6f8bc69..758cb67 100644 --- a/lib/components/list_items/message.dart +++ b/lib/components/list_items/message.dart @@ -3,10 +3,9 @@ import 'package:famedlysdk/famedlysdk.dart'; import 'package:fluffychat/components/message_content.dart'; import 'package:fluffychat/components/reply_content.dart'; import 'package:fluffychat/i18n/i18n.dart'; -import 'package:fluffychat/utils/app_route.dart'; import 'package:fluffychat/utils/date_time_extension.dart'; import 'package:fluffychat/utils/string_color.dart'; -import 'package:fluffychat/views/content_web_view.dart'; +import 'package:fluffychat/views/image_viewer.dart'; import 'package:flutter/material.dart'; import '../avatar.dart'; @@ -133,12 +132,7 @@ class Message extends StatelessWidget { : Avatar( event.sender.avatarUrl, event.sender.calcDisplayname(), - onTap: () => Navigator.of(context).push( - AppRoute.defaultRoute( - context, - ContentWebView(event.sender.avatarUrl), - ), - ), + onTap: () => ImageViewer.show(context, event.sender.avatarUrl), ); if (ownMessage) { rowChildren.add(avatarOrSizedBox); diff --git a/lib/components/message_content.dart b/lib/components/message_content.dart index 1adcf16..49e1fb2 100644 --- a/lib/components/message_content.dart +++ b/lib/components/message_content.dart @@ -5,6 +5,7 @@ import 'package:fluffychat/i18n/i18n.dart'; import 'package:fluffychat/utils/app_route.dart'; import 'package:fluffychat/utils/event_extension.dart'; import 'package:fluffychat/views/content_web_view.dart'; +import 'package:fluffychat/views/image_viewer.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:link_text/link_text.dart'; @@ -27,7 +28,8 @@ class MessageContent extends StatelessWidget { case MessageTypes.Image: case MessageTypes.Sticker: final int size = 400; - final String src = MxContent(event.content["url"]).getThumbnail( + final MxContent content = MxContent(event.content["url"]); + final String src = content.getThumbnail( Matrix.of(context).client, width: size * MediaQuery.of(context).devicePixelRatio, height: size * MediaQuery.of(context).devicePixelRatio, @@ -38,21 +40,23 @@ class MessageContent extends StatelessWidget { radius: Radius.circular(10), elevation: 0, child: InkWell( - onTap: () => Navigator.of(context).push( - AppRoute.defaultRoute( - context, - ContentWebView(MxContent(event.content["url"])), - ), + onTap: () => ImageViewer.show(context, content), + child: Container( + height: size.toDouble(), + width: size.toDouble(), + child: kIsWeb + ? Image.network( + src, + fit: BoxFit.cover, + ) + : CachedNetworkImage( + imageUrl: src, + fit: BoxFit.cover, + placeholder: (c, s) => Center( + child: CircularProgressIndicator(), + ), + ), ), - child: kIsWeb - ? Image.network( - src, - width: size.toDouble(), - ) - : CachedNetworkImage( - imageUrl: src, - width: size.toDouble(), - ), ), ); case MessageTypes.Audio: diff --git a/lib/views/image_viewer.dart b/lib/views/image_viewer.dart new file mode 100644 index 0000000..ffff429 --- /dev/null +++ b/lib/views/image_viewer.dart @@ -0,0 +1,47 @@ +import 'package:cached_network_image/cached_network_image.dart'; +import 'package:famedlysdk/famedlysdk.dart'; +import 'package:fluffychat/components/matrix.dart'; +import 'package:fluffychat/utils/app_route.dart'; +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import 'package:photo_view/photo_view.dart'; +import 'package:url_launcher/url_launcher.dart'; + +class ImageViewer extends StatelessWidget { + final MxContent mxContent; + + const ImageViewer(this.mxContent); + + static show(BuildContext context, MxContent content) { + if (kIsWeb) { + launch(content.getDownloadLink(Matrix.of(context).client)); + } else { + Navigator.of(context).push( + AppRoute( + ImageViewer(content), + ), + ); + } + } + + @override + Widget build(BuildContext context) { + final String url = mxContent.getDownloadLink(Matrix.of(context).client); + return Scaffold( + appBar: AppBar( + actions: [ + IconButton( + icon: Icon(Icons.file_download), + onPressed: () => launch(url), + ), + ], + ), + body: PhotoView( + loadingBuilder: (c, i) => Center(child: CircularProgressIndicator()), + imageProvider: CachedNetworkImageProvider( + url, + ), + ), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 188811c..c90364b 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -438,6 +438,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "2.4.0" + photo_view: + dependency: "direct main" + description: + name: photo_view + url: "https://pub.dartlang.org" + source: hosted + version: "0.9.2" platform: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 1d981fa..866a7a3 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -51,6 +51,7 @@ dependencies: uni_links: ^0.2.0 flutter_svg: ^0.17.1 flutter_slidable: ^0.5.4 + photo_view: ^0.9.2 intl: ^0.16.0 intl_translation: ^0.17.9