feat: Extended stories

lib/pages/add_story/add_story.dart

@@ -1,6 +1,7 @@
-import 'dart:async';
 import 'dart:io';
+import 'dart:math';
 
+import 'package:fluffychat/utils/story_theme_data.dart';
 import 'package:flutter/material.dart';
 
 import 'package:file_picker_cross/file_picker_cross.dart';
@@ -41,22 +42,29 @@ class AddStoryController extends State<AddStoryPage> {
 
   bool textFieldHasFocus = false;
 
-  Timer? _updateColorsCooldown;
+  BoxFit fit = BoxFit.contain;
 
-  void updateColors() {
+  int alignmentX = 0;
-    if (hasText != controller.text.isNotEmpty) {
+  int alignmentY = 0;
+
+  void toggleBoxFit() {
+    if (fit == BoxFit.contain) {
       setState(() {
-        hasText = controller.text.isNotEmpty;
+        fit = BoxFit.cover;
+      });
+    } else {
+      setState(() {
+        fit = BoxFit.contain;
+      });
+    }
+  }
+
+  void updateHasText(String text) {
+    if (hasText != text.isNotEmpty) {
+      setState(() {
+        hasText = text.isNotEmpty;
       });
     }
-    _updateColorsCooldown?.cancel();
-    _updateColorsCooldown = Timer(
-      const Duration(seconds: 3),
-      () => setState(() {
-        backgroundColor = controller.text.color;
-        backgroundColorDark = controller.text.darkColor;
-      }),
-    );
   }
 
   void importMedia() async {
@@ -65,13 +73,16 @@ class AddStoryController extends State<AddStoryPage> {
     );
     final fileName = picked.fileName;
     if (fileName == null) return;
-    final shrinked = await MatrixImageFile.shrink(
+    final shrinked = await showFutureLoadingDialog(
+      context: context,
+      future: () => MatrixImageFile.shrink(
         bytes: picked.toUint8List(),
         name: fileName,
         compute: Matrix.of(context).client.runInBackground,
+      ),
     );
     setState(() {
-      image = shrinked;
+      image = shrinked.result;
     });
   }
 
@@ -80,14 +91,27 @@ class AddStoryController extends State<AddStoryPage> {
       source: ImageSource.camera,
     );
     if (picked == null) return;
+    final shrinked = await showFutureLoadingDialog(
+        context: context,
+        future: () async {
           final bytes = await picked.readAsBytes();
-    final shrinked = await MatrixImageFile.shrink(
+          return await MatrixImageFile.shrink(
             bytes: bytes,
             name: picked.name,
             compute: Matrix.of(context).client.runInBackground,
           );
+        });
+
     setState(() {
-      image = shrinked;
+      image = shrinked.result;
+    });
+  }
+
+  void updateColor() {
+    final rand = Random().nextInt(1000).toString();
+    setState(() {
+      backgroundColor = rand.color;
+      backgroundColorDark = rand.darkColor;
     });
   }
 
@@ -143,7 +167,14 @@ class AddStoryController extends State<AddStoryPage> {
           final thumbnail = await video.getVideoThumbnail();
           await storiesRoom.sendFileEvent(
             video,
-            extraContent: {'body': controller.text},
+            extraContent: {
+              'body': controller.text,
+              StoryThemeData.contentKey: StoryThemeData(
+                fit: fit,
+                alignmentX: alignmentX,
+                alignmentY: alignmentY,
+              ).toJson(),
+            },
             thumbnail: thumbnail,
           );
           return;
@@ -152,11 +183,28 @@ class AddStoryController extends State<AddStoryPage> {
         if (image != null) {
           await storiesRoom.sendFileEvent(
             image,
-            extraContent: {'body': controller.text},
+            extraContent: {
+              'body': controller.text,
+              StoryThemeData.contentKey: StoryThemeData(
+                fit: fit,
+                alignmentX: alignmentX,
+                alignmentY: alignmentY,
+              ).toJson(),
+            },
           );
           return;
         }
-        await storiesRoom.sendTextEvent(controller.text);
+        await storiesRoom.sendEvent(<String, dynamic>{
+          'msgtype': MessageTypes.Text,
+          'body': controller.text,
+          StoryThemeData.contentKey: StoryThemeData(
+            color1: backgroundColor,
+            color2: backgroundColorDark,
+            fit: fit,
+            alignmentX: alignmentX,
+            alignmentY: alignmentY,
+          ).toJson(),
+        });
       },
     );
     if (postResult.error == null) {
@@ -164,12 +212,40 @@ class AddStoryController extends State<AddStoryPage> {
     }
   }
 
+  void onVerticalDragUpdate(DragUpdateDetails details) {
+    final delta = details.primaryDelta;
+    if (delta == null) return;
+    if (delta > 0 && alignmentY < 100) {
+      setState(() {
+        alignmentY += 1;
+      });
+    } else if (delta < 0 && alignmentY > -100) {
+      setState(() {
+        alignmentY -= 1;
+      });
+    }
+  }
+
+  void onHorizontalDragUpdate(DragUpdateDetails details) {
+    final delta = details.primaryDelta;
+    if (delta == null) return;
+    if (delta > 0 && alignmentX < 100) {
+      setState(() {
+        alignmentX += 1;
+      });
+    } else if (delta < 0 && alignmentX > -100) {
+      setState(() {
+        alignmentX -= 1;
+      });
+    }
+  }
+
   @override
   void initState() {
     super.initState();
-    final text = Matrix.of(context).client.userID!;
+    final rand = Random().nextInt(1000).toString();
-    backgroundColor = text.color;
+    backgroundColor = rand.color;
-    backgroundColorDark = text.darkColor;
+    backgroundColorDark = rand.darkColor;
     focusNode.addListener(() {
       if (textFieldHasFocus != focusNode.hasFocus) {
         setState(() {

lib/pages/add_story/add_story_view.dart

@@ -13,6 +13,7 @@ class AddStoryView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final video = controller.videoPlayerController;
+
     return Scaffold(
       backgroundColor: Colors.blueGrey.shade900,
       appBar: AppBar(
@@ -35,6 +36,15 @@ class AddStoryView extends StatelessWidget {
         ),
         actions: [
           if (controller.hasMedia)
+            IconButton(
+              icon: const Icon(Icons.fullscreen_outlined),
+              onPressed: controller.toggleBoxFit,
+            ),
+          if (!controller.hasMedia)
+            IconButton(
+              icon: const Icon(Icons.color_lens_outlined),
+              onPressed: controller.updateColor,
+            ),
           IconButton(
             icon: const Icon(Icons.delete_outlined),
             onPressed: controller.reset,
@@ -42,7 +52,10 @@ class AddStoryView extends StatelessWidget {
         ],
       ),
       extendBodyBehindAppBar: true,
-      body: Stack(
+      body: GestureDetector(
+        onVerticalDragUpdate: controller.onVerticalDragUpdate,
+        onHorizontalDragUpdate: controller.onHorizontalDragUpdate,
+        child: Stack(
           children: [
             if (video != null)
               Padding(
@@ -53,7 +66,7 @@ class AddStoryView extends StatelessWidget {
                 ),
               ),
             AnimatedContainer(
-            duration: const Duration(seconds: 2),
+              duration: const Duration(seconds: 1),
               padding: const EdgeInsets.symmetric(
                 horizontal: 8.0,
                 vertical: 80.0,
@@ -63,7 +76,7 @@ class AddStoryView extends StatelessWidget {
                     ? null
                     : DecorationImage(
                         image: MemoryImage(controller.image!.bytes),
-                      fit: BoxFit.contain,
+                        fit: controller.fit,
                         opacity: 0.75,
                       ),
                 gradient: controller.hasMedia
@@ -77,7 +90,12 @@ class AddStoryView extends StatelessWidget {
                         end: Alignment.bottomCenter,
                       ),
               ),
-            child: Center(
+              child: Align(
+                alignment: Alignment(
+                  controller.alignmentX / 100,
+                  controller.alignmentY / 100,
+                ),
+                child: IntrinsicWidth(
                   child: TextField(
                     controller: controller.controller,
                     focusNode: controller.focusNode,
@@ -89,11 +107,32 @@ class AddStoryView extends StatelessWidget {
                     style: TextStyle(
                       fontSize: 24,
                       color: Colors.white,
-                  backgroundColor: !controller.hasMedia
+                      shadows: controller.hasMedia
-                      ? null
+                          ? const [
-                      : Colors.black.withOpacity(0.5),
+                              Shadow(
+                                color: Colors.black,
+                                offset: Offset(5, 5),
+                                blurRadius: 20,
                               ),
-                onChanged: (_) => controller.updateColors(),
+                              Shadow(
+                                color: Colors.black,
+                                offset: Offset(5, 5),
+                                blurRadius: 20,
+                              ),
+                              Shadow(
+                                color: Colors.black,
+                                offset: Offset(-5, -5),
+                                blurRadius: 20,
+                              ),
+                              Shadow(
+                                color: Colors.black,
+                                offset: Offset(-5, -5),
+                                blurRadius: 20,
+                              ),
+                            ]
+                          : null,
+                    ),
+                    onChanged: controller.updateHasText,
                     decoration: InputDecoration(
                       border: InputBorder.none,
                       hintText: controller.hasMedia
@@ -110,28 +149,14 @@ class AddStoryView extends StatelessWidget {
                   ),
                 ),
               ),
+            ),
           ],
         ),
-      floatingActionButton: Column(
+      ),
+      floatingActionButton: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          if (!controller.hasMedia && !controller.textFieldHasFocus) ...[
+          if (!controller.hasMedia) ...[
-            FloatingActionButton(
-              onPressed: controller.captureVideo,
-              backgroundColor: controller.backgroundColorDark,
-              foregroundColor: Colors.white,
-              heroTag: null,
-              child: const Icon(Icons.video_camera_front_outlined),
-            ),
-            const SizedBox(height: 16),
-            FloatingActionButton(
-              onPressed: controller.capturePhoto,
-              backgroundColor: controller.backgroundColorDark,
-              foregroundColor: Colors.white,
-              heroTag: null,
-              child: const Icon(Icons.camera_alt_outlined),
-            ),
-            const SizedBox(height: 16),
             FloatingActionButton(
               onPressed: controller.importMedia,
               backgroundColor: controller.backgroundColorDark,
@@ -139,9 +164,25 @@ class AddStoryView extends StatelessWidget {
               heroTag: null,
               child: const Icon(Icons.photo_outlined),
             ),
+            const SizedBox(width: 16),
+            FloatingActionButton(
+              onPressed: controller.capturePhoto,
+              backgroundColor: controller.backgroundColorDark,
+              foregroundColor: Colors.white,
+              heroTag: null,
+              child: const Icon(Icons.camera_alt_outlined),
+            ),
+            const SizedBox(width: 16),
+            FloatingActionButton(
+              onPressed: controller.captureVideo,
+              backgroundColor: controller.backgroundColorDark,
+              foregroundColor: Colors.white,
+              heroTag: null,
+              child: const Icon(Icons.video_camera_front_outlined),
+            ),
           ],
           if (controller.hasMedia || controller.hasText) ...[
-            const SizedBox(height: 16),
+            const SizedBox(width: 16),
             FloatingActionButton(
               onPressed: controller.postStory,
               backgroundColor: Theme.of(context).colorScheme.surface,

lib/pages/story/story_page.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'dart:io';
 
+import 'package:fluffychat/utils/story_theme_data.dart';
 import 'package:flutter/material.dart';
 
 import 'package:adaptive_dialog/adaptive_dialog.dart';
@@ -44,6 +45,10 @@ class StoryPageController extends State<StoryPage> {
   Timeline? timeline;
 
   Event? get currentEvent => index < events.length ? events[index] : null;
+  StoryThemeData get storyThemeData =>
+      StoryThemeData.fromJson(currentEvent?.content
+              .tryGetMap<String, dynamic>(StoryThemeData.contentKey) ??
+          {});
 
   bool replyLoading = false;
   bool _modalOpened = false;
@@ -467,6 +472,14 @@ class StoryPageController extends State<StoryPage> {
       case PopupStoryAction.delete:
         _delete();
         break;
+      case PopupStoryAction.message:
+        final roomIdResult = await showFutureLoadingDialog(
+          context: context,
+          future: () => currentEvent!.sender.startDirectChat(),
+        );
+        if (roomIdResult.error != null) return;
+        VRouter.of(context).toSegments(['rooms', roomIdResult.result!]);
+        break;
     }
   }
 
@@ -493,4 +506,5 @@ extension on List<Event> {
 enum PopupStoryAction {
   report,
   delete,
+  message,
 }

lib/pages/story/story_view.dart

@@ -19,6 +19,29 @@ class StoryView extends StatelessWidget {
   final StoryPageController controller;
   const StoryView(this.controller, {Key? key}) : super(key: key);
 
+  static const List<Shadow> textShadows = [
+    Shadow(
+      color: Colors.black,
+      offset: Offset(5, 5),
+      blurRadius: 20,
+    ),
+    Shadow(
+      color: Colors.black,
+      offset: Offset(5, 5),
+      blurRadius: 20,
+    ),
+    Shadow(
+      color: Colors.black,
+      offset: Offset(-5, -5),
+      blurRadius: 20,
+    ),
+    Shadow(
+      color: Colors.black,
+      offset: Offset(-5, -5),
+      blurRadius: 20,
+    ),
+  ];
+
   @override
   Widget build(BuildContext context) {
     final currentEvent = controller.currentEvent;
@@ -85,6 +108,11 @@ class StoryView extends StatelessWidget {
                       value: PopupStoryAction.report,
                       child: Text(L10n.of(context)!.reportMessage),
                     ),
+                    if (!controller.isOwnStory)
+                      PopupMenuItem(
+                        value: PopupStoryAction.message,
+                        child: Text(L10n.of(context)!.sendAMessage),
+                      ),
                   ],
                 ),
               ],
@@ -134,9 +162,10 @@ class StoryView extends StatelessWidget {
             );
           }
           final event = events[controller.index];
-          final backgroundColor = event.content.tryGet<String>('body')?.color ??
+          final backgroundColor = controller.storyThemeData.color1 ??
+              event.content.tryGet<String>('body')?.color ??
               Theme.of(context).primaryColor;
-          final backgroundColorDark =
+          final backgroundColorDark = controller.storyThemeData.color2 ??
               event.content.tryGet<String>('body')?.darkColor ??
               Theme.of(context).primaryColorDark;
           if (event.messageType == MessageTypes.Text) {
@@ -146,6 +175,11 @@ class StoryView extends StatelessWidget {
           return GestureDetector(
             onTapDown: controller.hold,
             onTapUp: controller.unhold,
+            onTapCancel: controller.unhold,
+            onVerticalDragStart: controller.hold,
+            onVerticalDragEnd: controller.unhold,
+            onHorizontalDragStart: controller.hold,
+            onHorizontalDragEnd: controller.unhold,
             child: Stack(
               children: [
                 if (hash is String)
@@ -178,12 +212,7 @@ class StoryView extends StatelessWidget {
                 if (event.messageType == MessageTypes.Image ||
                     (event.messageType == MessageTypes.Video &&
                         !PlatformInfos.isMobile))
-                  Positioned(
+                  FutureBuilder<MatrixFile>(
-                    top: 80,
-                    bottom: 64,
-                    left: 0,
-                    right: 0,
-                    child: FutureBuilder<MatrixFile>(
                     future: controller.downloadAndDecryptAttachment(
                         event, event.messageType == MessageTypes.Video),
                     builder: (context, snapshot) {
@@ -196,12 +225,11 @@ class StoryView extends StatelessWidget {
                       return Center(
                         child: Image.memory(
                           matrixFile.bytes,
-                            fit: BoxFit.contain,
+                          fit: controller.storyThemeData.fit,
                         ),
                       );
                     },
                   ),
-                  ),
                 AnimatedContainer(
                   duration: const Duration(milliseconds: 200),
                   padding: const EdgeInsets.symmetric(
@@ -220,37 +248,32 @@ class StoryView extends StatelessWidget {
                           )
                         : null,
                   ),
-                  alignment: Alignment.center,
+                  alignment: Alignment(
-                  child: ListView(
+                    controller.storyThemeData.alignmentX.toDouble() / 100,
-                    shrinkWrap: true,
+                    controller.storyThemeData.alignmentY.toDouble() / 100,
-                    children: [
+                  ),
-                      LinkText(
+                  child: LinkText(
                     text: controller.loadingMode
                         ? L10n.of(context)!.loadingPleaseWait
                         : event.content.tryGet<String>('body') ?? '',
                     textAlign: TextAlign.center,
-                        onLinkTap: (url) =>
+                    onLinkTap: (url) => UrlLauncher(context, url).launchUrl(),
-                            UrlLauncher(context, url).launchUrl(),
                     linkStyle: TextStyle(
                       fontSize: 24,
                       color: Colors.blue.shade50,
                       decoration: TextDecoration.underline,
-                          backgroundColor:
+                      shadows: event.messageType == MessageTypes.Text
-                              event.messageType == MessageTypes.Text
                           ? null
-                                  : Colors.black,
+                          : textShadows,
                     ),
                     textStyle: TextStyle(
                       fontSize: 24,
                       color: Colors.white,
-                          backgroundColor:
+                      shadows: event.messageType == MessageTypes.Text
-                              event.messageType == MessageTypes.Text
                           ? null
-                                  : Colors.black,
+                          : textShadows,
                     ),
                   ),
-                    ],
-                  ),
                 ),
                 Positioned(
                   top: 4,

lib/utils/story_theme_data.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:matrix/matrix.dart';
+
+class StoryThemeData {
+  final Color? color1;
+  final Color? color2;
+  final BoxFit fit;
+  final int alignmentX;
+  final int alignmentY;
+
+  static const String contentKey = 'msc3588.stories.design';
+
+  const StoryThemeData({
+    this.color1,
+    this.color2,
+    this.fit = BoxFit.contain,
+    this.alignmentX = 0,
+    this.alignmentY = 0,
+  });
+
+  factory StoryThemeData.fromJson(Map<String, dynamic> json) {
+    final color1Int = json.tryGet<int>('color1');
+    final color2Int = json.tryGet<int>('color2');
+    final color1 = color1Int == null ? null : Color(color1Int);
+    final color2 = color2Int == null ? null : Color(color2Int);
+    return StoryThemeData(
+      color1: color1,
+      color2: color2,
+      fit:
+          json.tryGet<String>('fit') == 'cover' ? BoxFit.cover : BoxFit.contain,
+      alignmentX: json.tryGet<int>('alignment_x') ?? 0,
+      alignmentY: json.tryGet<int>('alignment_y') ?? 0,
+    );
+  }
+
+  Map<String, dynamic> toJson() => {
+        if (color1 != null) 'color1': color1?.value,
+        if (color2 != null) 'color2': color2?.value,
+        'fit': fit.name,
+        'alignment_x': alignmentX,
+        'alignment_y': alignmentY,
+      };
+}