feat: Nicer images, stickers and videos

lib/pages/chat/events/message.dart

@@ -4,6 +4,7 @@ import 'package:matrix/matrix.dart';
 
 import 'package:fluffychat/config/themes.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/widgets/avatar.dart';
 import 'package:fluffychat/widgets/matrix.dart';
@@ -90,10 +91,12 @@ class Message extends StatelessWidget {
       bottomRight: const Radius.circular(AppConfig.borderRadius),
     );
     final noBubble = {
-      MessageTypes.Video,
-      MessageTypes.Image,
-      MessageTypes.Sticker,
-    }.contains(event.messageType);
+          MessageTypes.Video,
+          MessageTypes.Image,
+          MessageTypes.Sticker,
+        }.contains(event.messageType) &&
+        !(event.messageType == MessageTypes.Video &&
+            !(PlatformInfos.isMobile || PlatformInfos.isWeb));
 
     if (ownMessage) {
       color = displayEvent.status.isError
@@ -145,8 +148,8 @@ class Message extends StatelessWidget {
               alignment: alignment,
               padding: const EdgeInsets.only(left: 8),
               child: Material(
-                color: noBubble ? null : color,
-                elevation: noBubble ? 0 : 6,
+                color: noBubble ? Colors.transparent : color,
+                elevation: event.type == EventTypes.Sticker ? 0 : 6,
                 shadowColor:
                     Theme.of(context).secondaryHeaderColor.withAlpha(100),
                 borderRadius: borderRadius,

lib/pages/chat/events/message_content.dart

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

lib/pages/chat/events/message_download_content.dart

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

lib/pages/search/search.dart

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

lib/utils/url_launcher.dart

@@ -1,4 +1,3 @@
-import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
 import 'package:flutter/material.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/widgets/matrix.dart';
 import 'package:fluffychat/widgets/profile_bottom_sheet.dart';
+import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
 import 'platform_infos.dart';
 
 class UrlLauncher {