feat: Nicer images, stickers and videos

This commit is contained in:
Krille Fear 2021-11-14 18:57:48 +01:00
parent 055b99bc85
commit 397c6ed292
5 changed files with 32 additions and 47 deletions

View File

@ -4,6 +4,7 @@ import 'package:matrix/matrix.dart';
import 'package:fluffychat/config/themes.dart'; import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/utils/date_time_extension.dart'; import 'package:fluffychat/utils/date_time_extension.dart';
import 'package:fluffychat/utils/platform_infos.dart';
import 'package:fluffychat/utils/string_color.dart'; import 'package:fluffychat/utils/string_color.dart';
import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/matrix.dart';
@ -93,7 +94,9 @@ class Message extends StatelessWidget {
MessageTypes.Video, MessageTypes.Video,
MessageTypes.Image, MessageTypes.Image,
MessageTypes.Sticker, MessageTypes.Sticker,
}.contains(event.messageType); }.contains(event.messageType) &&
!(event.messageType == MessageTypes.Video &&
!(PlatformInfos.isMobile || PlatformInfos.isWeb));
if (ownMessage) { if (ownMessage) {
color = displayEvent.status.isError color = displayEvent.status.isError
@ -145,8 +148,8 @@ class Message extends StatelessWidget {
alignment: alignment, alignment: alignment,
padding: const EdgeInsets.only(left: 8), padding: const EdgeInsets.only(left: 8),
child: Material( child: Material(
color: noBubble ? null : color, color: noBubble ? Colors.transparent : color,
elevation: noBubble ? 0 : 6, elevation: event.type == EventTypes.Sticker ? 0 : 6,
shadowColor: shadowColor:
Theme.of(context).secondaryHeaderColor.withAlpha(100), Theme.of(context).secondaryHeaderColor.withAlpha(100),
borderRadius: borderRadius, borderRadius: borderRadius,

View File

@ -106,26 +106,29 @@ class MessageContent extends StatelessWidget {
case MessageTypes.Video: case MessageTypes.Video:
if (event.showThumbnail && if (event.showThumbnail &&
(PlatformInfos.isMobile || PlatformInfos.isWeb)) { (PlatformInfos.isMobile || PlatformInfos.isWeb)) {
return InkWell( return Stack(
onTap: () => showDialog(
context: Matrix.of(context).navigatorContext,
useRootNavigator: false,
builder: (_) => VideoViewer(event),
),
child: Stack(
alignment: Alignment.center, alignment: Alignment.center,
children: <Widget>[ children: <Widget>[
ImageBubble( Opacity(
opacity: 0.4,
child: ImageBubble(
event, event,
width: 400, width: 400,
height: 300, height: 300,
fit: BoxFit.cover, fit: BoxFit.cover,
tapToView: false, tapToView: false,
), ),
const Icon(Icons.play_circle_outline,
size: 200, color: Colors.grey),
],
), ),
FloatingActionButton.extended(
onPressed: () => showDialog(
context: Matrix.of(context).navigatorContext,
useRootNavigator: false,
builder: (_) => VideoViewer(event),
),
label: Text(L10n.of(context).play('Video')),
icon: const Icon(Icons.video_camera_front_outlined),
),
],
); );
} }
return MessageDownloadContent(event, textColor); return MessageDownloadContent(event, textColor);
@ -276,11 +279,7 @@ class _ButtonContent extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return OutlinedButton.icon( return TextButton.icon(
style: OutlinedButton.styleFrom(
primary: textColor,
textStyle: TextStyle(color: textColor),
),
onPressed: onPressed, onPressed: onPressed,
icon: icon, icon: icon,
label: Text(label, overflow: TextOverflow.ellipsis), label: Text(label, overflow: TextOverflow.ellipsis),

View File

@ -20,27 +20,10 @@ class MessageDownloadContent extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
ElevatedButton( TextButton.icon(
style: ElevatedButton.styleFrom(
primary: Theme.of(context).scaffoldBackgroundColor,
onPrimary: Theme.of(context).textTheme.bodyText1.color,
),
onPressed: () => event.saveFile(context), onPressed: () => event.saveFile(context),
child: Row( icon: const Icon(Icons.download_outlined),
mainAxisSize: MainAxisSize.min, label: Text(filename),
children: [
const Icon(Icons.download_outlined),
const SizedBox(width: 8),
Expanded(
child: Text(
filename,
overflow: TextOverflow.fade,
softWrap: false,
maxLines: 1,
),
),
],
),
), ),
if (event.sizeString != null) if (event.sizeString != null)
Text( Text(

View File

@ -1,6 +1,5 @@
import 'dart:async'; import 'dart:async';
import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:adaptive_dialog/adaptive_dialog.dart'; import 'package:adaptive_dialog/adaptive_dialog.dart';
@ -9,6 +8,7 @@ import 'package:matrix/matrix.dart';
import 'package:vrouter/vrouter.dart'; import 'package:vrouter/vrouter.dart';
import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/matrix.dart';
import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
import 'search_view.dart'; import 'search_view.dart';
class Search extends StatefulWidget { class Search extends StatefulWidget {

View File

@ -1,4 +1,3 @@
import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:adaptive_dialog/adaptive_dialog.dart'; import 'package:adaptive_dialog/adaptive_dialog.dart';
@ -12,6 +11,7 @@ import 'package:vrouter/vrouter.dart';
import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/matrix.dart';
import 'package:fluffychat/widgets/profile_bottom_sheet.dart'; import 'package:fluffychat/widgets/profile_bottom_sheet.dart';
import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
import 'platform_infos.dart'; import 'platform_infos.dart';
class UrlLauncher { class UrlLauncher {