feat: Extended stories
This commit is contained in:
Krille Fear
Christian Pauly
parent
616655350b
commit
78ca38c40a
5 changed files with 357 additions and 160 deletions
|
|
@ -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() {
|
||||
if (hasText != controller.text.isNotEmpty) {
|
||||
int alignmentX = 0;
|
||||
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(
|
||||
bytes: picked.toUint8List(),
|
||||
name: fileName,
|
||||
compute: Matrix.of(context).client.runInBackground,
|
||||
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 bytes = await picked.readAsBytes();
|
||||
final shrinked = await MatrixImageFile.shrink(
|
||||
bytes: bytes,
|
||||
name: picked.name,
|
||||
compute: Matrix.of(context).client.runInBackground,
|
||||
);
|
||||
final shrinked = await showFutureLoadingDialog(
|
||||
context: context,
|
||||
future: () async {
|
||||
final bytes = await picked.readAsBytes();
|
||||
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!;
|
||||
backgroundColor = text.color;
|
||||
backgroundColorDark = text.darkColor;
|
||||
final rand = Random().nextInt(1000).toString();
|
||||
backgroundColor = rand.color;
|
||||
backgroundColorDark = rand.darkColor;
|
||||
focusNode.addListener(() {
|
||||
if (textFieldHasFocus != focusNode.hasFocus) {
|
||||
setState(() {
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
onPressed: controller.reset,
|
||||
icon: const Icon(Icons.fullscreen_outlined),
|
||||
onPressed: controller.toggleBoxFit,
|
||||
),
|
||||
],
|
||||
),
|
||||
extendBodyBehindAppBar: true,
|
||||
body: 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: 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,
|
||||
),
|
||||
),
|
||||
if (!controller.hasMedia)
|
||||
IconButton(
|
||||
icon: const Icon(Icons.color_lens_outlined),
|
||||
onPressed: controller.updateColor,
|
||||
),
|
||||
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) ...[
|
||||
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),
|
||||
if (!controller.hasMedia) ...[
|
||||
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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue