fix: Image viewer

This commit is contained in:
Christian Pauly 2021-05-25 20:41:37 +02:00
parent 91965b141d
commit ece1238846
5 changed files with 71 additions and 99 deletions

View File

@ -1,6 +1,5 @@
import 'package:fluffychat/pages/archive.dart'; import 'package:fluffychat/pages/archive.dart';
import 'package:fluffychat/pages/homeserver_picker.dart'; import 'package:fluffychat/pages/homeserver_picker.dart';
import 'package:fluffychat/pages/image_viewer.dart';
import 'package:fluffychat/pages/invitation_selection.dart'; import 'package:fluffychat/pages/invitation_selection.dart';
import 'package:fluffychat/pages/settings_emotes.dart'; import 'package:fluffychat/pages/settings_emotes.dart';
import 'package:fluffychat/pages/settings_multiple_emotes.dart'; import 'package:fluffychat/pages/settings_multiple_emotes.dart';
@ -52,11 +51,6 @@ class AppRoutes {
widget: ChatList(), widget: ChatList(),
stackedRoutes: [ stackedRoutes: [
VWidget(path: ':roomid', widget: Chat(), stackedRoutes: [ VWidget(path: ':roomid', widget: Chat(), stackedRoutes: [
VWidget(
path: 'image/:eventid',
widget: ImageViewer(),
buildTransition: _fadeTransition,
),
VWidget( VWidget(
path: 'encryption', path: 'encryption',
widget: ChatEncryptionSettings(), widget: ChatEncryptionSettings(),
@ -132,11 +126,6 @@ class AppRoutes {
widget: EmptyPage(), widget: EmptyPage(),
buildTransition: _fadeTransition, buildTransition: _fadeTransition,
), ),
VWidget(
path: 'image/:eventid',
widget: ImageViewer(),
buildTransition: _fadeTransition,
),
VWidget( VWidget(
path: 'encryption', path: 'encryption',
widget: ChatEncryptionSettings(), widget: ChatEncryptionSettings(),

View File

@ -8,9 +8,10 @@ import 'package:vrouter/vrouter.dart';
import '../utils/matrix_sdk_extensions.dart/event_extension.dart'; import '../utils/matrix_sdk_extensions.dart/event_extension.dart';
class ImageViewer extends StatefulWidget { class ImageViewer extends StatefulWidget {
final Event event;
final void Function() onLoaded; final void Function() onLoaded;
const ImageViewer({Key key, this.onLoaded}) : super(key: key); const ImageViewer(this.event, {Key key, this.onLoaded}) : super(key: key);
@override @override
ImageViewerController createState() => ImageViewerController(); ImageViewerController createState() => ImageViewerController();
@ -18,14 +19,13 @@ class ImageViewer extends StatefulWidget {
class ImageViewerController extends State<ImageViewer> { class ImageViewerController extends State<ImageViewer> {
/// Forward this image to another room. /// Forward this image to another room.
void forwardAction(Event event) { void forwardAction() {
Matrix.of(context).shareContent = event.content; Matrix.of(context).shareContent = widget.event.content;
VRouter.of(context).push('/rooms'); VRouter.of(context).push('/rooms');
} }
/// Open this file with a system call. /// Open this file with a system call.
void openFileAction(Event event) => void openFileAction() => widget.event.openFile(context, downloadOnly: true);
event.openFile(context, downloadOnly: true);
/// Go back if user swiped it away /// Go back if user swiped it away
void onInteractionEnds(ScaleEndDetails endDetails) { void onInteractionEnds(ScaleEndDetails endDetails) {
@ -37,16 +37,6 @@ class ImageViewerController extends State<ImageViewer> {
} }
} }
Future<Event> getEvent() {
final roomId = VRouter.of(context).pathParameters['roomid'];
final eventId = VRouter.of(context).pathParameters['eventid'];
return Matrix.of(context).client.database.getEventById(
Matrix.of(context).client.id,
eventId,
Matrix.of(context).client.getRoomById(roomId),
);
}
@override @override
Widget build(BuildContext context) => ImageViewerView(this); Widget build(BuildContext context) => ImageViewerView(this);
} }

View File

@ -1,5 +1,3 @@
import 'package:famedlysdk/famedlysdk.dart';
import '../image_viewer.dart'; import '../image_viewer.dart';
import 'package:fluffychat/widgets/event_content/image_bubble.dart'; import 'package:fluffychat/widgets/event_content/image_bubble.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -12,49 +10,28 @@ class ImageViewerView extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return FutureBuilder<Event>(
future: controller.getEvent(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
elevation: 0,
backgroundColor: Color(0x44000000),
),
body: Center(
child: snapshot.hasError
? Text(
L10n.of(context).oopsSomethingWentWrong,
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
)
: CircularProgressIndicator()),
);
}
final event = snapshot.data;
return Scaffold( return Scaffold(
backgroundColor: Colors.black, backgroundColor: Colors.black,
extendBodyBehindAppBar: true, extendBodyBehindAppBar: true,
appBar: AppBar( appBar: AppBar(
elevation: 0, elevation: 0,
backgroundColor: Color(0x44000000),
leading: IconButton( leading: IconButton(
icon: Icon(Icons.close), icon: Icon(Icons.close),
onPressed: Navigator.of(context, rootNavigator: false).pop, onPressed: Navigator.of(context).pop,
color: Colors.white, color: Colors.white,
tooltip: L10n.of(context).close, tooltip: L10n.of(context).close,
), ),
backgroundColor: Color(0x44000000),
actions: [ actions: [
IconButton( IconButton(
icon: Icon(Icons.reply_outlined), icon: Icon(Icons.reply_outlined),
onPressed: () => controller.forwardAction(event), onPressed: controller.forwardAction,
color: Colors.white, color: Colors.white,
tooltip: L10n.of(context).share, tooltip: L10n.of(context).share,
), ),
IconButton( IconButton(
icon: Icon(Icons.download_outlined), icon: Icon(Icons.download_outlined),
onPressed: () => controller.openFileAction(event), onPressed: controller.openFileAction,
color: Colors.white, color: Colors.white,
tooltip: L10n.of(context).downloadFile, tooltip: L10n.of(context).downloadFile,
), ),
@ -66,7 +43,7 @@ class ImageViewerView extends StatelessWidget {
onInteractionEnd: controller.onInteractionEnds, onInteractionEnd: controller.onInteractionEnds,
child: Center( child: Center(
child: ImageBubble( child: ImageBubble(
event, controller.widget.event,
tapToView: false, tapToView: false,
onLoaded: controller.widget.onLoaded, onLoaded: controller.widget.onLoaded,
fit: BoxFit.contain, fit: BoxFit.contain,
@ -78,6 +55,5 @@ class ImageViewerView extends StatelessWidget {
), ),
), ),
); );
});
} }
} }

View File

@ -3,14 +3,16 @@ import 'package:future_loading_dialog/future_loading_dialog.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart'; import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:vrouter/vrouter.dart';
import 'matrix_file_extension.dart'; import 'matrix_file_extension.dart';
import '../../pages/image_viewer.dart';
extension LocalizedBody on Event { extension LocalizedBody on Event {
void openFile(BuildContext context, {bool downloadOnly = false}) async { void openFile(BuildContext context, {bool downloadOnly = false}) async {
if (!downloadOnly && if (!downloadOnly &&
[MessageTypes.Image, MessageTypes.Sticker].contains(messageType)) { [MessageTypes.Image, MessageTypes.Sticker].contains(messageType)) {
VRouter.of(context).push('/rooms/${room.id}/image/$eventId'); await Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (_) => ImageViewer(this)),
);
return; return;
} }
final matrixFile = await showFutureLoadingDialog( final matrixFile = await showFutureLoadingDialog(

View File

@ -1,10 +1,10 @@
import 'package:famedlysdk/famedlysdk.dart'; import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/pages/image_viewer.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter_blurhash/flutter_blurhash.dart'; import 'package:flutter_blurhash/flutter_blurhash.dart';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:vrouter/vrouter.dart';
import '../../utils/matrix_sdk_extensions.dart/event_extension.dart'; import '../../utils/matrix_sdk_extensions.dart/event_extension.dart';
@ -237,8 +237,23 @@ class _ImageBubbleState extends State<ImageBubble> {
child: InkWell( child: InkWell(
onTap: () { onTap: () {
if (!widget.tapToView) return; if (!widget.tapToView) return;
VRouter.of(context).push( Navigator.of(context, rootNavigator: true).push(
'/rooms/${widget.event.room.id}/image/${widget.event.eventId}'); MaterialPageRoute(
builder: (_) => ImageViewer(widget.event, onLoaded: () {
// If the original file didn't load yet, we want to do that now.
// This is so that the original file displays after going on the image viewer,
// waiting for it to load, and then hitting back. This ensures that we always
// display the best image available, with requiring as little network as possible
if (_file == null) {
widget.event.isAttachmentCached().then((cached) {
if (cached) {
_requestFile();
}
});
}
}),
),
);
}, },
child: Hero( child: Hero(
tag: widget.event.eventId, tag: widget.event.eventId,