Solian/lib/widgets/attachments/attachment_item.dart

641 lines
19 KiB
Dart
Raw Normal View History

2024-09-10 14:47:28 +00:00
import 'dart:math' as math;
2024-09-08 14:43:01 +00:00
2024-05-18 14:23:36 +00:00
import 'package:flutter/material.dart';
2024-09-10 14:47:28 +00:00
import 'package:flutter_animate/flutter_animate.dart';
import 'package:gap/gap.dart';
2024-05-20 15:39:23 +00:00
import 'package:get/get.dart';
2024-09-08 14:43:01 +00:00
import 'package:google_fonts/google_fonts.dart';
import 'package:media_kit/media_kit.dart';
import 'package:media_kit_video/media_kit_video.dart';
2024-05-18 14:23:36 +00:00
import 'package:solian/models/attachment.dart';
2024-09-08 14:43:01 +00:00
import 'package:solian/providers/durations.dart';
2024-05-18 14:23:36 +00:00
import 'package:solian/services.dart';
import 'package:solian/widgets/auto_cache_image.dart';
import 'package:solian/widgets/sized_container.dart';
2024-05-27 15:07:01 +00:00
import 'package:url_launcher/url_launcher_string.dart';
2024-05-18 14:23:36 +00:00
2024-05-27 15:07:01 +00:00
class AttachmentItem extends StatefulWidget {
2024-05-25 16:11:00 +00:00
final String parentId;
2024-05-18 14:23:36 +00:00
final Attachment item;
2024-05-20 16:02:39 +00:00
final bool showBadge;
final bool showHideButton;
2024-08-16 13:06:50 +00:00
final bool autoload;
2024-05-20 16:02:39 +00:00
final BoxFit fit;
2024-05-20 15:39:23 +00:00
final String? badge;
2024-05-20 16:02:39 +00:00
final Function? onHide;
2024-05-18 14:23:36 +00:00
2024-05-20 15:39:23 +00:00
const AttachmentItem({
super.key,
2024-05-25 16:11:00 +00:00
required this.parentId,
2024-05-20 15:39:23 +00:00
required this.item,
this.badge,
2024-05-20 16:02:39 +00:00
this.fit = BoxFit.cover,
this.showBadge = true,
this.showHideButton = true,
2024-08-16 13:06:50 +00:00
this.autoload = false,
2024-05-20 16:02:39 +00:00
this.onHide,
2024-05-20 15:39:23 +00:00
});
2024-05-18 14:23:36 +00:00
2024-05-27 15:07:01 +00:00
@override
State<AttachmentItem> createState() => _AttachmentItemState();
}
class _AttachmentItemState extends State<AttachmentItem> {
2024-05-18 14:23:36 +00:00
@override
Widget build(BuildContext context) {
2024-05-27 15:07:01 +00:00
switch (widget.item.mimetype.split('/').first) {
case 'image':
2024-07-06 10:35:43 +00:00
return _AttachmentItemImage(
parentId: widget.parentId,
item: widget.item,
badge: widget.badge,
fit: widget.fit,
showBadge: widget.showBadge,
showHideButton: widget.showHideButton,
onHide: widget.onHide,
2024-05-27 15:07:01 +00:00
);
case 'video':
2024-08-16 13:06:50 +00:00
return _AttachmentItemVideo(
item: widget.item,
autoload: widget.autoload,
);
2024-09-08 14:43:01 +00:00
case 'audio':
return _AttachmentItemAudio(
item: widget.item,
autoload: widget.autoload,
);
2024-05-27 15:07:01 +00:00
default:
return Center(
child: Container(
constraints: const BoxConstraints(
maxWidth: 280,
2024-05-20 15:39:23 +00:00
),
2024-05-27 15:07:01 +00:00
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.file_present, size: 32),
const Gap(6),
2024-05-27 15:07:01 +00:00
Text(
widget.item.mimetype,
style: TextStyle(
fontSize: 12,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
textAlign: TextAlign.center,
),
const Gap(2),
2024-05-27 15:07:01 +00:00
Text(
widget.item.alt,
style: const TextStyle(fontSize: 13),
textAlign: TextAlign.center,
),
const Gap(12),
2024-05-27 15:07:01 +00:00
TextButton.icon(
icon: const Icon(Icons.launch),
label: Text('openInBrowser'.tr),
style: const ButtonStyle(
visualDensity: VisualDensity(vertical: -2, horizontal: -4),
),
2024-05-20 16:02:39 +00:00
onPressed: () {
2024-05-27 15:07:01 +00:00
launchUrlString(
ServiceFinder.buildUrl(
'files',
'/attachments/${widget.item.rid}',
),
2024-05-27 15:07:01 +00:00
);
2024-05-20 16:02:39 +00:00
},
2024-05-20 15:39:23 +00:00
),
2024-05-27 15:07:01 +00:00
],
2024-05-20 15:39:23 +00:00
),
2024-05-27 15:07:01 +00:00
),
);
}
}
2024-07-06 10:35:43 +00:00
}
class _AttachmentItemImage extends StatelessWidget {
final String parentId;
final Attachment item;
final bool showBadge;
final bool showHideButton;
final BoxFit fit;
final String? badge;
final Function? onHide;
const _AttachmentItemImage({
required this.parentId,
required this.item,
required this.showBadge,
required this.showHideButton,
required this.fit,
this.badge,
this.onHide,
});
@override
Widget build(BuildContext context) {
return Hero(
tag: Key('a${item.uuid}p$parentId'),
2024-07-06 10:35:43 +00:00
child: Stack(
fit: StackFit.expand,
children: [
AutoCacheImage(
ServiceFinder.buildUrl(
'files',
'/attachments/${item.rid}',
2024-07-06 10:35:43 +00:00
),
fit: fit,
),
2024-07-06 10:35:43 +00:00
if (showBadge && badge != null)
Positioned(
right: 12,
bottom: 8,
child: Material(
color: Colors.transparent,
child: Chip(label: Text(badge!)),
),
),
if (showHideButton && item.isMature)
Positioned(
top: 8,
left: 12,
child: Material(
color: Colors.transparent,
child: ActionChip(
visualDensity:
const VisualDensity(vertical: -4, horizontal: -4),
avatar: Icon(
Icons.visibility_off,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
label: Text('hide'.tr),
onPressed: () {
if (onHide != null) onHide!();
},
),
),
),
],
),
);
}
}
class _AttachmentItemVideo extends StatefulWidget {
final Attachment item;
final bool autoload;
2024-07-06 10:35:43 +00:00
const _AttachmentItemVideo({
required this.item,
this.autoload = false,
});
2024-07-06 10:35:43 +00:00
@override
State<_AttachmentItemVideo> createState() => _AttachmentItemVideoState();
}
class _AttachmentItemVideoState extends State<_AttachmentItemVideo> {
2024-09-08 14:43:01 +00:00
bool _showContent = false;
Player? _videoPlayer;
VideoController? _videoController;
2024-09-08 14:43:01 +00:00
Future<void> _startLoad() async {
setState(() => _showContent = true);
MediaKit.ensureInitialized();
final url = ServiceFinder.buildUrl(
'files',
'/attachments/${widget.item.rid}',
2024-09-08 14:43:01 +00:00
);
_videoPlayer = Player();
_videoController = VideoController(_videoPlayer!);
_videoPlayer!.open(Media(url), play: !widget.autoload);
2024-09-08 14:43:01 +00:00
}
@override
void initState() {
super.initState();
if (widget.autoload) {
_startLoad();
}
}
@override
Widget build(BuildContext context) {
2024-09-10 14:47:28 +00:00
const labelShadows = <Shadow>[
Shadow(
offset: Offset(1, 1),
blurRadius: 5.0,
color: Color.fromARGB(255, 0, 0, 0),
),
];
2024-09-08 14:43:01 +00:00
final ratio = widget.item.metadata?['ratio'] ?? 16 / 9;
if (!_showContent) {
return GestureDetector(
2024-09-10 14:47:28 +00:00
child: Stack(
children: [
if (widget.item.metadata?['thumbnail'] != null)
AspectRatio(
aspectRatio: 16 / 9,
2024-09-10 14:47:28 +00:00
child: AutoCacheImage(
ServiceFinder.buildUrl(
'uc',
'/attachments/${widget.item.metadata?['thumbnail']}',
2024-09-08 14:43:01 +00:00
),
2024-09-10 14:47:28 +00:00
fit: BoxFit.cover,
),
)
else
const Center(
child: Icon(Icons.movie, size: 64),
),
Align(
alignment: Alignment.bottomCenter,
child: IgnorePointer(
child: Container(
height: 56,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Theme.of(context).colorScheme.surface,
Theme.of(context).colorScheme.surface.withOpacity(0),
2024-09-10 14:47:28 +00:00
],
),
),
),
),
),
Positioned(
bottom: 4,
left: 16,
right: 16,
child: SizedBox(
height: 45,
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.item.alt,
style: const TextStyle(
shadows: labelShadows,
color: Colors.white,
),
2024-09-10 14:47:28 +00:00
),
Text(
Duration(
milliseconds:
(widget.item.metadata?['duration'] ?? 0)
.toInt() *
2024-09-10 14:47:28 +00:00
1000,
).toHumanReadableString(),
style: GoogleFonts.robotoMono(
fontSize: 12,
shadows: labelShadows,
color: Colors.white,
2024-09-10 14:47:28 +00:00
),
),
],
),
),
const Icon(
Icons.play_arrow,
shadows: labelShadows,
color: Colors.white,
).paddingOnly(bottom: 4, right: 8),
2024-09-10 14:47:28 +00:00
],
2024-09-08 14:43:01 +00:00
),
),
2024-09-10 14:47:28 +00:00
),
],
2024-09-08 14:43:01 +00:00
),
onTap: () {
_startLoad();
},
);
} else if (_videoController == null) {
2024-09-08 14:43:01 +00:00
return const Center(
child: CircularProgressIndicator(),
);
}
return Video(
controller: _videoController!,
aspectRatio: ratio,
);
2024-09-08 14:43:01 +00:00
}
@override
void dispose() {
_videoPlayer?.dispose();
2024-09-08 14:43:01 +00:00
super.dispose();
}
}
class _AttachmentItemAudio extends StatefulWidget {
final Attachment item;
final bool autoload;
2024-08-19 11:36:01 +00:00
2024-09-08 14:43:01 +00:00
const _AttachmentItemAudio({
required this.item,
this.autoload = false,
});
@override
State<_AttachmentItemAudio> createState() => _AttachmentItemAudioState();
}
2024-07-06 10:35:43 +00:00
2024-09-08 14:43:01 +00:00
class _AttachmentItemAudioState extends State<_AttachmentItemAudio> {
bool _showContent = false;
2024-09-08 14:43:01 +00:00
double? _draggingValue;
bool _isPlaying = false;
Duration _duration = Duration.zero;
Duration _position = Duration.zero;
Duration _bufferedPosition = Duration.zero;
2024-09-08 14:43:01 +00:00
Player? _audioPlayer;
2024-09-08 14:43:01 +00:00
2024-08-17 10:44:20 +00:00
Future<void> _startLoad() async {
setState(() => _showContent = true);
MediaKit.ensureInitialized();
final url = ServiceFinder.buildUrl(
'files',
'/attachments/${widget.item.rid}',
);
_audioPlayer = Player();
await _audioPlayer!.open(Media(url), play: !widget.autoload);
_audioPlayer!.stream.playing.listen((v) => setState(() => _isPlaying = v));
_audioPlayer!.stream.position.listen((v) => setState(() => _position = v));
_audioPlayer!.stream.duration.listen((v) => setState(() => _duration = v));
_audioPlayer!.stream.buffer.listen(
(v) => setState(() => _bufferedPosition = v),
);
}
2024-09-10 14:47:28 +00:00
String _formatBytes(int bytes, {int decimals = 2}) {
if (bytes == 0) return '0 Bytes';
const k = 1024;
final dm = decimals < 0 ? 0 : decimals;
final sizes = [
'Bytes',
'KiB',
'MiB',
'GiB',
'TiB',
'PiB',
'EiB',
'ZiB',
'YiB'
];
final i = (math.log(bytes) / math.log(k)).floor().toInt();
return '${(bytes / math.pow(k, i)).toStringAsFixed(dm)} ${sizes[i]}';
}
@override
void initState() {
super.initState();
2024-08-17 10:44:20 +00:00
if (widget.autoload) {
_startLoad();
}
2024-07-06 10:35:43 +00:00
}
@override
Widget build(BuildContext context) {
2024-09-10 14:47:28 +00:00
const labelShadows = <Shadow>[
Shadow(
offset: Offset(1, 1),
blurRadius: 5.0,
color: Color.fromARGB(255, 0, 0, 0),
),
];
2024-09-08 14:43:01 +00:00
const ratio = 16 / 9;
2024-08-19 11:36:01 +00:00
if (!_showContent) {
return GestureDetector(
2024-09-10 14:47:28 +00:00
child: Stack(
children: [
if (widget.item.metadata?['thumbnail'] != null)
AspectRatio(
aspectRatio: 16 / 9,
child: AutoCacheImage(
ServiceFinder.buildUrl(
'uc',
'/attachments/${widget.item.metadata?['thumbnail']}',
),
fit: BoxFit.cover,
),
2024-09-10 14:47:28 +00:00
)
else
const Center(
child: Icon(Icons.radio, size: 64),
),
Align(
alignment: Alignment.bottomCenter,
child: IgnorePointer(
child: Container(
height: 56,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Theme.of(context).colorScheme.surface,
Theme.of(context).colorScheme.surface.withOpacity(0),
2024-09-10 14:47:28 +00:00
],
),
),
),
2024-09-10 14:47:28 +00:00
),
),
Positioned(
bottom: 4,
left: 16,
right: 16,
child: SizedBox(
height: 45,
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.item.alt,
style: const TextStyle(
shadows: labelShadows,
color: Colors.white,
),
2024-09-10 14:47:28 +00:00
),
Text(
_formatBytes(widget.item.size),
style: GoogleFonts.robotoMono(
fontSize: 12,
shadows: labelShadows,
color: Colors.white,
2024-09-10 14:47:28 +00:00
),
),
],
),
),
const Icon(
Icons.play_arrow,
shadows: labelShadows,
color: Colors.white,
).paddingOnly(bottom: 4, right: 8),
2024-09-10 14:47:28 +00:00
],
),
2024-09-10 14:47:28 +00:00
),
),
2024-09-10 14:47:28 +00:00
],
),
onTap: () {
_startLoad();
},
);
} else if (_audioPlayer == null) {
2024-09-08 14:43:01 +00:00
return const Center(
child: CircularProgressIndicator(),
);
}
2024-09-10 14:47:28 +00:00
return Stack(
children: [
if (widget.item.metadata?['thumbnail'] != null)
AspectRatio(
aspectRatio: 16 / 9,
child: AutoCacheImage(
ServiceFinder.buildUrl(
'uc',
'/attachments/${widget.item.metadata?['thumbnail']}',
),
fit: BoxFit.cover,
2024-09-08 14:43:01 +00:00
),
2024-09-10 14:47:28 +00:00
).animate().blur(
duration: 300.ms,
end: const Offset(10, 10),
curve: Curves.easeInOut,
),
AspectRatio(
aspectRatio: ratio,
child: CenteredContainer(
maxWidth: 320,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
2024-09-08 14:43:01 +00:00
children: [
2024-09-10 14:47:28 +00:00
const Icon(Icons.audio_file, size: 32),
const Gap(8),
Text(
widget.item.alt,
style: const TextStyle(fontSize: 13),
textAlign: TextAlign.center,
),
const Gap(12),
Row(
children: [
Expanded(
child: Column(
2024-09-08 14:43:01 +00:00
children: [
2024-09-10 14:47:28 +00:00
SliderTheme(
data: SliderThemeData(
trackHeight: 2,
trackShape: _PlayerProgressTrackShape(),
thumbShape: const RoundSliderThumbShape(
enabledThumbRadius: 8,
),
overlayShape: SliderComponentShape.noOverlay,
),
child: Slider(
secondaryTrackValue: _bufferedPosition
.inMilliseconds
.abs()
.toDouble(),
value: _draggingValue?.abs() ??
_position.inMilliseconds.toDouble().abs(),
min: 0,
max: math
.max(
_bufferedPosition.inMilliseconds.abs(),
math.max(
_position.inMilliseconds.abs(),
_duration.inMilliseconds.abs(),
),
)
.toDouble(),
onChanged: (value) {
setState(() => _draggingValue = value);
},
onChangeEnd: (value) {
_audioPlayer!.seek(
Duration(milliseconds: value.toInt()),
);
setState(() => _draggingValue = null);
},
),
2024-09-08 14:43:01 +00:00
),
2024-09-10 14:47:28 +00:00
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
_position.toHumanReadableString(),
style: GoogleFonts.robotoMono(fontSize: 12),
),
Text(
_duration.toHumanReadableString(),
style: GoogleFonts.robotoMono(fontSize: 12),
),
],
).paddingSymmetric(horizontal: 8, vertical: 4),
2024-09-08 14:43:01 +00:00
],
2024-09-10 14:47:28 +00:00
),
),
const Gap(16),
IconButton.filled(
icon: _isPlaying
? const Icon(Icons.pause)
: const Icon(Icons.play_arrow),
onPressed: () {
_audioPlayer!.playOrPause();
},
visualDensity: const VisualDensity(
horizontal: -4,
vertical: 0,
),
),
],
2024-09-08 14:43:01 +00:00
),
],
),
2024-09-10 14:47:28 +00:00
),
2024-09-08 14:43:01 +00:00
),
2024-09-10 14:47:28 +00:00
],
2024-07-06 11:07:46 +00:00
);
2024-07-06 10:35:43 +00:00
}
2024-08-19 11:36:01 +00:00
@override
void dispose() {
_audioPlayer?.dispose();
2024-08-19 11:36:01 +00:00
super.dispose();
}
2024-05-20 15:39:23 +00:00
}
2024-09-08 14:43:01 +00:00
class _PlayerProgressTrackShape extends RoundedRectSliderTrackShape {
@override
Rect getPreferredRect({
required RenderBox parentBox,
Offset offset = Offset.zero,
required SliderThemeData sliderTheme,
bool isEnabled = false,
bool isDiscrete = false,
}) {
final trackHeight = sliderTheme.trackHeight;
final trackLeft = offset.dx;
final trackTop = offset.dy + (parentBox.size.height - trackHeight!) / 2;
final trackWidth = parentBox.size.width;
return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
}
}