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(
-      bytes: picked.toUint8List(),
+      context: context,
-      name: fileName,
+      future: () => MatrixImageFile.shrink(
-      compute: Matrix.of(context).client.runInBackground,
+        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 bytes = await picked.readAsBytes();
+    final shrinked = await showFutureLoadingDialog(
-    final shrinked = await MatrixImageFile.shrink(
+        context: context,
-      bytes: bytes,
+        future: () async {
-      name: picked.name,
+          final bytes = await picked.readAsBytes();
-      compute: Matrix.of(context).client.runInBackground,
+          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(
@@ -36,102 +37,126 @@ class AddStoryView extends StatelessWidget {
         actions: [
           if (controller.hasMedia)
             IconButton(
-              icon: const Icon(Icons.delete_outlined),
+              icon: const Icon(Icons.fullscreen_outlined),
-              onPressed: controller.reset,
+              onPressed: controller.toggleBoxFit,
             ),
-        ],
+          if (!controller.hasMedia)
-      ),
+            IconButton(
-      extendBodyBehindAppBar: true,
+              icon: const Icon(Icons.color_lens_outlined),
-      body: Stack(
+              onPressed: controller.updateColor,
-        children: [
-          if (video != null)
-            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.symmetric(
-              horizontal: 8.0,
-              vertical: 80.0,
-            ),
-            decoration: BoxDecoration(
-              image: controller.image == null
-                  ? null
-                  : DecorationImage(
-                      image: MemoryImage(controller.image!.bytes),
-                      fit: BoxFit.contain,
-                      opacity: 0.75,
-                    ),
-              gradient: controller.hasMedia
-                  ? null
-                  : LinearGradient(
-                      colors: [
-                        controller.backgroundColorDark,
-                        controller.backgroundColor,
-                      ],
-                      begin: Alignment.topCenter,
-                      end: Alignment.bottomCenter,
-                    ),
-            ),
-            child: Center(
-              child: TextField(
-                controller: controller.controller,
-                focusNode: controller.focusNode,
-                minLines: 1,
-                maxLines: 15,
-                maxLength: 500,
-                autofocus: false,
-                textAlign: TextAlign.center,
-                style: TextStyle(
-                  fontSize: 24,
-                  color: Colors.white,
-                  backgroundColor: !controller.hasMedia
-                      ? null
-                      : Colors.black.withOpacity(0.5),
-                ),
-                onChanged: (_) => controller.updateColors(),
-                decoration: InputDecoration(
-                  border: InputBorder.none,
-                  hintText: controller.hasMedia
-                      ? L10n.of(context)!.addDescription
-                      : L10n.of(context)!.whatIsGoingOn,
-                  filled: false,
-                  hintStyle: TextStyle(
-                    color: Colors.white.withOpacity(0.5),
-                    backgroundColor: Colors.transparent,
-                  ),
-                  enabledBorder: InputBorder.none,
-                  focusedBorder: InputBorder.none,
-                ),
-              ),
             ),
+          IconButton(
+            icon: const Icon(Icons.delete_outlined),
+            onPressed: controller.reset,
           ),
         ],
       ),
-      floatingActionButton: Column(
+      extendBodyBehindAppBar: true,
+      body: GestureDetector(
+        onVerticalDragUpdate: controller.onVerticalDragUpdate,
+        onHorizontalDragUpdate: controller.onHorizontalDragUpdate,
+        child: Stack(
+          children: [
+            if (video != null)
+              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: 1),
+              padding: const EdgeInsets.symmetric(
+                horizontal: 8.0,
+                vertical: 80.0,
+              ),
+              decoration: BoxDecoration(
+                image: controller.image == null
+                    ? null
+                    : DecorationImage(
+                        image: MemoryImage(controller.image!.bytes),
+                        fit: controller.fit,
+                        opacity: 0.75,
+                      ),
+                gradient: controller.hasMedia
+                    ? null
+                    : LinearGradient(
+                        colors: [
+                          controller.backgroundColorDark,
+                          controller.backgroundColor,
+                        ],
+                        begin: Alignment.topCenter,
+                        end: Alignment.bottomCenter,
+                      ),
+              ),
+              child: Align(
+                alignment: Alignment(
+                  controller.alignmentX / 100,
+                  controller.alignmentY / 100,
+                ),
+                child: IntrinsicWidth(
+                  child: TextField(
+                    controller: controller.controller,
+                    focusNode: controller.focusNode,
+                    minLines: 1,
+                    maxLines: 15,
+                    maxLength: 500,
+                    autofocus: false,
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      fontSize: 24,
+                      color: Colors.white,
+                      shadows: controller.hasMedia
+                          ? const [
+                              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,
+                              ),
+                            ]
+                          : null,
+                    ),
+                    onChanged: controller.updateHasText,
+                    decoration: InputDecoration(
+                      border: InputBorder.none,
+                      hintText: controller.hasMedia
+                          ? L10n.of(context)!.addDescription
+                          : L10n.of(context)!.whatIsGoingOn,
+                      filled: false,
+                      hintStyle: TextStyle(
+                        color: Colors.white.withOpacity(0.5),
+                        backgroundColor: Colors.transparent,
+                      ),
+                      enabledBorder: InputBorder.none,
+                      focusedBorder: InputBorder.none,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+      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,11 +162,12 @@ 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;
+              Theme.of(context).primaryColorDark;
           if (event.messageType == MessageTypes.Text) {
             controller.loadingModeOff();
           }
@@ -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,29 +212,23 @@ class StoryView extends StatelessWidget {
                 if (event.messageType == MessageTypes.Image ||
                     (event.messageType == MessageTypes.Video &&
                         !PlatformInfos.isMobile))
-                  Positioned(
+                  FutureBuilder<MatrixFile>(
-                    top: 80,
+                    future: controller.downloadAndDecryptAttachment(
-                    bottom: 64,
+                        event, event.messageType == MessageTypes.Video),
-                    left: 0,
+                    builder: (context, snapshot) {
-                    right: 0,
+                      final matrixFile = snapshot.data;
-                    child: FutureBuilder<MatrixFile>(
+                      if (matrixFile == null) {
-                      future: controller.downloadAndDecryptAttachment(
+                        controller.loadingModeOn();
-                          event, event.messageType == MessageTypes.Video),
+                        return Container();
-                      builder: (context, snapshot) {
+                      }
-                        final matrixFile = snapshot.data;
+                      controller.loadingModeOff();
-                        if (matrixFile == null) {
+                      return Center(
-                          controller.loadingModeOn();
+                        child: Image.memory(
-                          return Container();
+                          matrixFile.bytes,
-                        }
+                          fit: controller.storyThemeData.fit,
-                        controller.loadingModeOff();
+                        ),
-                        return Center(
+                      );
-                          child: Image.memory(
+                    },
-                            matrixFile.bytes,
-                            fit: BoxFit.contain,
-                          ),
-                        );
-                      },
-                    ),
                   ),
                 AnimatedContainer(
                   duration: const Duration(milliseconds: 200),
@@ -220,36 +248,31 @@ 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
+                    text: controller.loadingMode
-                            ? L10n.of(context)!.loadingPleaseWait
+                        ? L10n.of(context)!.loadingPleaseWait
-                            : event.content.tryGet<String>('body') ?? '',
+                        : event.content.tryGet<String>('body') ?? '',
-                        textAlign: TextAlign.center,
+                    textAlign: TextAlign.center,
-                        onLinkTap: (url) =>
+                    onLinkTap: (url) => UrlLauncher(context, url).launchUrl(),
-                            UrlLauncher(context, url).launchUrl(),
+                    linkStyle: TextStyle(
-                        linkStyle: TextStyle(
+                      fontSize: 24,
-                          fontSize: 24,
+                      color: Colors.blue.shade50,
-                          color: Colors.blue.shade50,
+                      decoration: TextDecoration.underline,
-                          decoration: TextDecoration.underline,
+                      shadows: event.messageType == MessageTypes.Text
-                          backgroundColor:
+                          ? null
-                              event.messageType == MessageTypes.Text
+                          : textShadows,
-                                  ? null
+                    ),
-                                  : Colors.black,
+                    textStyle: TextStyle(
-                        ),
+                      fontSize: 24,
-                        textStyle: TextStyle(
+                      color: Colors.white,
-                          fontSize: 24,
+                      shadows: event.messageType == MessageTypes.Text
-                          color: Colors.white,
+                          ? null
-                          backgroundColor:
+                          : textShadows,
-                              event.messageType == MessageTypes.Text
+                    ),
-                                  ? null
-                                  : Colors.black,
-                        ),
-                      ),
-                    ],
                   ),
                 ),
                 Positioned(

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,
+      };
+}