Merge branch 'krille/betterstories' into 'main'

chore: Story design follow up

See merge request famedly/fluffychat!689

lib/pages/add_story/add_story.dart

@@ -14,6 +14,7 @@ import 'package:vrouter/vrouter.dart';
 import 'package:fluffychat/pages/add_story/add_story_view.dart';
 import 'package:fluffychat/pages/add_story/invite_story_page.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_file_extension.dart';
+import 'package:fluffychat/utils/resize_image.dart';
 import 'package:fluffychat/utils/room_send_file_extension.dart';
 import 'package:fluffychat/utils/string_color.dart';
 import 'package:fluffychat/widgets/matrix.dart';
@@ -81,6 +82,7 @@ class AddStoryController extends State<AddStoryPage> {
   }
 
   void postStory() async {
+    if (video == null && image == null && controller.text.isEmpty) return;
     final client = Matrix.of(context).client;
     var storiesRoom = await client.getStoriesRoom(context);
 
@@ -106,18 +108,20 @@ class AddStoryController extends State<AddStoryPage> {
       context: context,
       future: () async {
         if (storiesRoom == null) throw ('Stories room is null');
-        final video = this.video;
+        var video = this.video?.detectFileType;
         if (video != null) {
+          video = await video.resizeVideo();
           await storiesRoom.sendFileEventWithThumbnail(
-            video.detectFileType,
+            video,
             extraContent: {'body': controller.text},
           );
           return;
         }
-        final image = this.image;
+        var image = this.image?.detectFileType;
         if (image != null) {
+          image = await image.resizeImage();
           await storiesRoom.sendFileEventWithThumbnail(
-            image.detectFileType,
+            image,
             extraContent: {'body': controller.text},
           );
           return;

lib/pages/add_story/add_story_view.dart

@@ -59,13 +59,19 @@ class AddStoryView extends StatelessWidget {
       body: Stack(
         children: [
           if (video != null)
-            FutureBuilder(
+            Padding(
+              padding: const EdgeInsets.symmetric(vertical: 80.0),
+              child: FutureBuilder(
                 future: video.initialize().then((_) => video.play()),
                 builder: (_, __) => Center(child: VideoPlayer(video)),
               ),
+            ),
           AnimatedContainer(
             duration: const Duration(seconds: 2),
-            padding: const EdgeInsets.all(8.0),
+            padding: const EdgeInsets.symmetric(
+              horizontal: 8.0,
+              vertical: 80.0,
+            ),
             decoration: BoxDecoration(
               image: controller.image == null
                   ? null
@@ -96,7 +102,9 @@ class AddStoryView extends StatelessWidget {
                 style: TextStyle(
                   fontSize: 24,
                   color: Colors.white,
-                  backgroundColor: !controller.hasMedia ? null : Colors.black,
+                  backgroundColor: !controller.hasMedia
+                      ? null
+                      : Colors.black.withOpacity(0.5),
                 ),
                 onEditingComplete: controller.updateColors,
                 decoration: InputDecoration(
@@ -117,10 +125,7 @@ class AddStoryView extends StatelessWidget {
           ),
         ],
       ),
-      floatingActionButton:
+      floatingActionButton: FloatingActionButton.extended(
-          controller.controller.text.isEmpty && !controller.hasMedia
-              ? null
-              : FloatingActionButton.extended(
         onPressed: controller.postStory,
         label: Text(L10n.of(context)!.publish),
         backgroundColor: Theme.of(context).colorScheme.surface,

lib/pages/story/story_view.dart

@@ -32,10 +32,7 @@ class StoryView extends StatelessWidget {
           icon: const Icon(Icons.close),
           onPressed: Navigator.of(context).pop,
         ),
-        title: AnimatedOpacity(
+        title: ListTile(
-          duration: const Duration(seconds: 1),
-          opacity: controller.isHold ? 0 : 1,
-          child: ListTile(
           contentPadding: EdgeInsets.zero,
           title: Text(
             controller.title,
@@ -70,23 +67,15 @@ class StoryView extends StatelessWidget {
             name: controller.title,
           ),
         ),
-        ),
         actions: currentEvent == null
             ? null
             : [
                 if (!controller.isOwnStory)
-                  AnimatedOpacity(
+                  IconButton(
-                    duration: const Duration(seconds: 1),
-                    opacity: controller.isHold ? 0 : 1,
-                    child: IconButton(
                     icon: Icon(Icons.adaptive.share_outlined),
                     onPressed: controller.share,
                   ),
-                  ),
+                PopupMenuButton<PopupStoryAction>(
-                AnimatedOpacity(
-                    duration: const Duration(seconds: 1),
-                    opacity: controller.isHold ? 0 : 1,
-                    child: PopupMenuButton<PopupStoryAction>(
                   onSelected: controller.onPopupStoryAction,
                   itemBuilder: (context) => [
                     if (controller.currentEvent?.canRedact ?? false)
@@ -99,7 +88,7 @@ class StoryView extends StatelessWidget {
                       child: Text(L10n.of(context)!.reportMessage),
                     ),
                   ],
-                    )),
+                ),
               ],
         systemOverlayStyle: SystemUiOverlayStyle.light,
         iconTheme: const IconThemeData(color: Colors.white),
@@ -155,14 +144,25 @@ class StoryView extends StatelessWidget {
           if (event.messageType == MessageTypes.Text) {
             controller.loadingModeOff();
           }
+          final hash = event.infoMap['xyz.amorgan.blurhash'];
           return GestureDetector(
             onTapDown: controller.hold,
             onTapUp: controller.unhold,
             child: Stack(
               children: [
+                if (hash is String)
+                  BlurHash(
+                    hash: hash,
+                    imageFit: BoxFit.cover,
+                  ),
                 if (event.messageType == MessageTypes.Video &&
                     PlatformInfos.isMobile)
-                  FutureBuilder<VideoPlayerController?>(
+                  Positioned(
+                    top: 80,
+                    bottom: 64,
+                    left: 0,
+                    right: 0,
+                    child: FutureBuilder<VideoPlayerController?>(
                       future: controller.loadVideoControllerFuture ??=
                           controller.loadVideoController(event),
                       builder: (context, snapshot) {
@@ -172,15 +172,17 @@ class StoryView extends StatelessWidget {
                           return Container();
                         }
                         controller.loadingModeOff();
-                      return Center(child: VideoPlayer(videoPlayerController));
+                        return Center(
+                            child: VideoPlayer(videoPlayerController));
                       },
                     ),
+                  ),
                 if (event.messageType == MessageTypes.Image ||
                     (event.messageType == MessageTypes.Video &&
                         !PlatformInfos.isMobile))
                   Positioned(
-                    top: 0,
+                    top: 80,
-                    bottom: 0,
+                    bottom: 64,
                     left: 0,
                     right: 0,
                     child: FutureBuilder<MatrixFile>(
@@ -190,13 +192,7 @@ class StoryView extends StatelessWidget {
                         final matrixFile = snapshot.data;
                         if (matrixFile == null) {
                           controller.loadingModeOn();
-                          final hash = event.infoMap['xyz.amorgan.blurhash'];
+                          return Container();
-                          return hash is String
-                              ? BlurHash(
-                                  hash: hash,
-                                  imageFit: BoxFit.cover,
-                                )
-                              : Container();
                         }
                         controller.loadingModeOff();
                         return Center(
@@ -210,7 +206,10 @@ class StoryView extends StatelessWidget {
                   ),
                 AnimatedContainer(
                   duration: const Duration(milliseconds: 200),
-                  padding: const EdgeInsets.all(8.0),
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 8.0,
+                    vertical: 64,
+                  ),
                   decoration: BoxDecoration(
                     gradient: event.messageType == MessageTypes.Text
                         ? LinearGradient(
@@ -259,9 +258,6 @@ class StoryView extends StatelessWidget {
                   top: 4,
                   left: 4,
                   right: 4,
-                  child: AnimatedOpacity(
-                    duration: const Duration(seconds: 1),
-                    opacity: controller.isHold ? 0 : 1,
                   child: SafeArea(
                     child: Row(
                       mainAxisAlignment: MainAxisAlignment.center,
@@ -291,15 +287,11 @@ class StoryView extends StatelessWidget {
                     ),
                   ),
                 ),
-                ),
                 if (!controller.isOwnStory && currentEvent != null)
                   Positioned(
                     bottom: 16,
                     left: 16,
                     right: 16,
-                    child: AnimatedOpacity(
-                      duration: const Duration(seconds: 1),
-                      opacity: controller.isHold ? 0 : 1,
                     child: SafeArea(
                       child: TextField(
                         focusNode: controller.replyFocus,
@@ -326,16 +318,12 @@ class StoryView extends StatelessWidget {
                       ),
                     ),
                   ),
-                  ),
                 if (controller.isOwnStory &&
                     controller.currentSeenByUsers.isNotEmpty)
                   Positioned(
                     bottom: 16,
                     left: 16,
                     right: 16,
-                    child: AnimatedOpacity(
-                      duration: const Duration(seconds: 1),
-                      opacity: controller.isHold ? 0 : 1,
                     child: SafeArea(
                       child: Center(
                         child: OutlinedButton.icon(
@@ -350,7 +338,6 @@ class StoryView extends StatelessWidget {
                       ),
                     ),
                   ),
-                  ),
               ],
             ),
           );