544 lines
20 KiB
Dart
544 lines
20 KiB
Dart
import 'dart:io';
|
|
|
|
import 'package:dio/dio.dart';
|
|
import 'package:dismissible_page/dismissible_page.dart';
|
|
import 'package:easy_localization/easy_localization.dart';
|
|
import 'package:file_saver/file_saver.dart';
|
|
import 'package:flutter/foundation.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:gal/gal.dart';
|
|
import 'package:gap/gap.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:material_symbols_icons/symbols.dart';
|
|
import 'package:path/path.dart' show extension;
|
|
import 'package:photo_view/photo_view.dart';
|
|
import 'package:photo_view/photo_view_gallery.dart';
|
|
import 'package:provider/provider.dart';
|
|
import 'package:styled_widget/styled_widget.dart';
|
|
import 'package:surface/providers/sn_network.dart';
|
|
import 'package:surface/types/attachment.dart';
|
|
import 'package:surface/widgets/account/account_image.dart';
|
|
import 'package:surface/widgets/dialog.dart';
|
|
import 'package:surface/widgets/universal_image.dart';
|
|
import 'package:url_launcher/url_launcher_string.dart';
|
|
import 'package:uuid/uuid.dart';
|
|
|
|
class AttachmentZoomView extends StatefulWidget {
|
|
final Iterable<SnAttachment> data;
|
|
final int? initialIndex;
|
|
final List<String?>? heroTags;
|
|
|
|
const AttachmentZoomView({
|
|
super.key,
|
|
required this.data,
|
|
this.initialIndex,
|
|
this.heroTags,
|
|
});
|
|
|
|
@override
|
|
State<AttachmentZoomView> createState() => _AttachmentZoomViewState();
|
|
}
|
|
|
|
class _AttachmentZoomViewState extends State<AttachmentZoomView> {
|
|
late final PageController _pageController =
|
|
PageController(initialPage: widget.initialIndex ?? 0);
|
|
|
|
bool _showOverlay = true;
|
|
bool _dismissable = true;
|
|
|
|
int _page = 0;
|
|
|
|
void _updatePage() {
|
|
setState(() {
|
|
if (_isCompletedDownload) {
|
|
setState(() => _isCompletedDownload = false);
|
|
}
|
|
_page = _pageController.page?.round() ?? 0;
|
|
});
|
|
}
|
|
|
|
bool _isDownloading = false;
|
|
bool _isCompletedDownload = false;
|
|
double? _progressOfDownload = 0;
|
|
|
|
Future<void> _saveToAlbum(int idx) async {
|
|
final sn = context.read<SnNetworkProvider>();
|
|
final item = widget.data.elementAt(idx);
|
|
final url = sn.getAttachmentUrl(item.rid, preview: false);
|
|
|
|
if (kIsWeb || Platform.isLinux) {
|
|
await launchUrlString(url);
|
|
return;
|
|
}
|
|
|
|
setState(() => _isDownloading = true);
|
|
|
|
var extName = extension(item.name);
|
|
if (extName.isEmpty) extName = '.png';
|
|
final imagePath = '${Directory.systemTemp.path}/${item.uuid}$extName';
|
|
await Dio().download(
|
|
url,
|
|
imagePath,
|
|
onReceiveProgress: (count, total) {
|
|
setState(() => _progressOfDownload = count / total);
|
|
},
|
|
);
|
|
|
|
bool isSuccess = false;
|
|
try {
|
|
if (!kIsWeb && (Platform.isAndroid || Platform.isIOS)) {
|
|
if (!await Gal.hasAccess(toAlbum: true)) {
|
|
if (!await Gal.requestAccess(toAlbum: true)) return;
|
|
}
|
|
await Gal.putImage(imagePath, album: 'Solar Network');
|
|
} else {
|
|
await FileSaver.instance.saveFile(
|
|
name: item.name,
|
|
file: File(imagePath),
|
|
);
|
|
}
|
|
setState(() {
|
|
isSuccess = true;
|
|
_isDownloading = false;
|
|
_isCompletedDownload = isSuccess;
|
|
});
|
|
} catch (e) {
|
|
if (!mounted) return;
|
|
context.showErrorDialog(e);
|
|
}
|
|
|
|
if (!mounted) return;
|
|
context.showSnackbar(
|
|
(!kIsWeb && (Platform.isIOS || Platform.isAndroid))
|
|
? 'attachmentSaved'.tr()
|
|
: 'attachmentSavedDesktop'.tr(),
|
|
action: (!kIsWeb && (Platform.isIOS || Platform.isAndroid))
|
|
? SnackBarAction(
|
|
label: 'openInAlbum'.tr(),
|
|
onPressed: () async => Gal.open(),
|
|
)
|
|
: null,
|
|
);
|
|
}
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_pageController.addListener(_updatePage);
|
|
Future.delayed(const Duration(milliseconds: 100), _updatePage);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_pageController.removeListener(_updatePage);
|
|
_pageController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
Color get _unFocusColor =>
|
|
Theme.of(context).colorScheme.onSurface.withOpacity(0.75);
|
|
|
|
bool _showDetail = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final sn = context.read<SnNetworkProvider>();
|
|
final uuid = Uuid();
|
|
|
|
final metaTextStyle = GoogleFonts.roboto(
|
|
fontSize: 12,
|
|
color: _unFocusColor,
|
|
height: 1,
|
|
);
|
|
|
|
return DismissiblePage(
|
|
onDismissed: () {
|
|
Navigator.of(context).pop();
|
|
},
|
|
direction: _dismissable
|
|
? DismissiblePageDismissDirection.down
|
|
: DismissiblePageDismissDirection.none,
|
|
backgroundColor: Colors.transparent,
|
|
isFullScreen: true,
|
|
child: GestureDetector(
|
|
behavior: HitTestBehavior.translucent,
|
|
child: Scaffold(
|
|
backgroundColor: Colors.transparent,
|
|
body: Stack(
|
|
children: [
|
|
Builder(builder: (context) {
|
|
if (widget.data.length == 1) {
|
|
final heroTag = widget.heroTags?.first ?? uuid.v4();
|
|
return Hero(
|
|
tag: 'attachment-${widget.data.first.rid}-$heroTag',
|
|
child: PhotoView(
|
|
key: Key(
|
|
'attachment-detail-${widget.data.first.rid}-$heroTag'),
|
|
backgroundDecoration:
|
|
BoxDecoration(color: Colors.transparent),
|
|
scaleStateChangedCallback: (scaleState) {
|
|
setState(() => _dismissable =
|
|
scaleState == PhotoViewScaleState.initial);
|
|
},
|
|
imageProvider: UniversalImage.provider(
|
|
sn.getAttachmentUrl(
|
|
widget.data.first.rid,
|
|
preview: false,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return PhotoViewGallery.builder(
|
|
pageController: _pageController,
|
|
enableRotation: true,
|
|
scaleStateChangedCallback: (scaleState) {
|
|
setState(() => _dismissable =
|
|
scaleState == PhotoViewScaleState.initial);
|
|
},
|
|
builder: (context, idx) {
|
|
final heroTag =
|
|
widget.heroTags?.elementAt(idx) ?? uuid.v4();
|
|
return PhotoViewGalleryPageOptions(
|
|
imageProvider: UniversalImage.provider(
|
|
sn.getAttachmentUrl(
|
|
widget.data.elementAt(idx).rid,
|
|
preview: false,
|
|
),
|
|
),
|
|
heroAttributes: PhotoViewHeroAttributes(
|
|
tag: 'attachment-${widget.data.first.rid}-$heroTag',
|
|
),
|
|
);
|
|
},
|
|
itemCount: widget.data.length,
|
|
loadingBuilder: (context, event) => Center(
|
|
child: SizedBox(
|
|
width: 20.0,
|
|
height: 20.0,
|
|
child: CircularProgressIndicator(
|
|
value: event == null
|
|
? 0
|
|
: event.cumulativeBytesLoaded /
|
|
(event.expectedTotalBytes ?? 1),
|
|
),
|
|
),
|
|
),
|
|
backgroundDecoration:
|
|
BoxDecoration(color: Colors.transparent),
|
|
);
|
|
}),
|
|
Align(
|
|
alignment: Alignment.bottomCenter,
|
|
child: IgnorePointer(
|
|
child: Container(
|
|
height: 200,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.bottomCenter,
|
|
end: Alignment.topCenter,
|
|
colors: [
|
|
Theme.of(context).colorScheme.surface,
|
|
Colors.transparent,
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
.opacity(_showOverlay ? 1 : 0, animate: true)
|
|
.animate(const Duration(milliseconds: 300), Curves.easeInOut),
|
|
Positioned(
|
|
left: 16,
|
|
right: 16,
|
|
bottom: 16 + MediaQuery.of(context).padding.bottom,
|
|
child: Material(
|
|
color: Colors.transparent,
|
|
child: Builder(builder: (context) {
|
|
return Row(
|
|
children: [
|
|
IconButton(
|
|
iconSize: 18,
|
|
constraints: const BoxConstraints(),
|
|
icon: const Icon(Icons.close),
|
|
style: ButtonStyle(
|
|
backgroundColor: MaterialStateProperty.all(
|
|
Theme.of(context)
|
|
.colorScheme
|
|
.surface
|
|
.withOpacity(0.5),
|
|
),
|
|
),
|
|
onPressed: () {
|
|
Navigator.of(context).pop();
|
|
},
|
|
),
|
|
IconButton(
|
|
iconSize: 20,
|
|
constraints: const BoxConstraints(),
|
|
padding: EdgeInsets.zero,
|
|
visualDensity: VisualDensity.compact,
|
|
icon: const Icon(Symbols.hide).padding(all: 6),
|
|
onPressed: () {
|
|
setState(() => _showOverlay = false);
|
|
}),
|
|
Expanded(
|
|
child: IgnorePointer(
|
|
child: Builder(builder: (context) {
|
|
final item = widget.data.elementAt(_page);
|
|
final doShowCameraInfo =
|
|
item.metadata['exif']?['Model'] != null;
|
|
final exif = item.metadata['exif'];
|
|
return Column(
|
|
children: [
|
|
if (widget.data.length > 1)
|
|
Text(
|
|
'${_page + 1}/${widget.data.length}',
|
|
style:
|
|
GoogleFonts.robotoMono(fontSize: 13),
|
|
).padding(right: 8),
|
|
if (doShowCameraInfo)
|
|
Text(
|
|
'attachmentShotOn'
|
|
.tr(args: [exif?['Model']]),
|
|
style: metaTextStyle,
|
|
textAlign: TextAlign.center,
|
|
),
|
|
if (doShowCameraInfo)
|
|
Row(
|
|
spacing: 4,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
if (exif?['Megapixels'] != null)
|
|
Text(
|
|
'${exif?['Megapixels']}MP',
|
|
style: metaTextStyle,
|
|
),
|
|
if (exif?['ISO'] != null)
|
|
Text(
|
|
'ISO${exif['ISO']}',
|
|
style: metaTextStyle,
|
|
),
|
|
if (exif?['FNumber'] != null)
|
|
Text(
|
|
'f/${exif['FNumber']}',
|
|
style: metaTextStyle,
|
|
),
|
|
],
|
|
)
|
|
],
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
IconButton(
|
|
constraints: const BoxConstraints(),
|
|
padding: EdgeInsets.zero,
|
|
visualDensity: VisualDensity.compact,
|
|
icon: Container(
|
|
padding: const EdgeInsets.all(6),
|
|
child: !_isDownloading
|
|
? !_isCompletedDownload
|
|
? const Icon(Symbols.save_alt)
|
|
: const Icon(Symbols.download_done)
|
|
: SizedBox(
|
|
width: 20,
|
|
height: 20,
|
|
child: CircularProgressIndicator(
|
|
backgroundColor: Theme.of(context)
|
|
.colorScheme
|
|
.surfaceContainerHighest,
|
|
value: _progressOfDownload,
|
|
strokeWidth: 3,
|
|
),
|
|
),
|
|
),
|
|
onPressed:
|
|
_isDownloading ? null : () => _saveToAlbum(_page),
|
|
),
|
|
IconButton(
|
|
iconSize: 18,
|
|
constraints: const BoxConstraints(),
|
|
icon: const Icon(Icons.info_outline),
|
|
style: ButtonStyle(
|
|
backgroundColor: MaterialStateProperty.all(
|
|
Theme.of(context)
|
|
.colorScheme
|
|
.surface
|
|
.withOpacity(0.5),
|
|
),
|
|
),
|
|
onPressed: () {
|
|
_showDetail = true;
|
|
showModalBottomSheet(
|
|
context: context,
|
|
builder: (context) => _AttachmentZoomDetailPopup(
|
|
data: widget.data.elementAt(_page),
|
|
),
|
|
).then((_) {
|
|
_showDetail = false;
|
|
});
|
|
},
|
|
),
|
|
],
|
|
);
|
|
}),
|
|
).opacity(_showOverlay ? 1 : 0, animate: true).animate(
|
|
const Duration(milliseconds: 300), Curves.easeInOut),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
onTap: () {
|
|
if (_showOverlay) {
|
|
Navigator.pop(context);
|
|
return;
|
|
}
|
|
setState(() => _showOverlay = !_showOverlay);
|
|
},
|
|
onVerticalDragUpdate: (details) {
|
|
if (_showDetail || !_dismissable) return;
|
|
if (details.delta.dy <= -20) {
|
|
_showDetail = true;
|
|
showModalBottomSheet(
|
|
context: context,
|
|
builder: (context) => _AttachmentZoomDetailPopup(
|
|
data: widget.data.elementAt(_page),
|
|
),
|
|
).then((_) {
|
|
_showDetail = false;
|
|
});
|
|
}
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _AttachmentZoomDetailPopup extends StatelessWidget {
|
|
final SnAttachment data;
|
|
|
|
const _AttachmentZoomDetailPopup({required this.data});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final account = data.account!;
|
|
|
|
const tableGap = TableRow(
|
|
children: [
|
|
TableCell(child: SizedBox(height: 16)),
|
|
TableCell(child: SizedBox(height: 16)),
|
|
],
|
|
);
|
|
|
|
return SizedBox(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
const Icon(Symbols.info, size: 24),
|
|
const Gap(16),
|
|
Text('attachmentDetailInfo')
|
|
.tr()
|
|
.textStyle(Theme.of(context).textTheme.titleLarge!),
|
|
],
|
|
).padding(horizontal: 20, top: 16, bottom: 12),
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
child: Table(
|
|
columnWidths: {
|
|
0: IntrinsicColumnWidth(),
|
|
1: FlexColumnWidth(),
|
|
},
|
|
children: [
|
|
TableRow(
|
|
children: [
|
|
TableCell(
|
|
child:
|
|
Text('attachmentUploadBy').tr().padding(right: 16),
|
|
),
|
|
TableCell(
|
|
child: Row(
|
|
children: [
|
|
if (data.accountId > 0)
|
|
AccountImage(
|
|
content: account.avatar,
|
|
radius: 8,
|
|
),
|
|
const Gap(8),
|
|
Text(data.accountId > 0
|
|
? account.nick
|
|
: 'unknown'.tr()),
|
|
const Gap(8),
|
|
Text('#${data.accountId}',
|
|
style: GoogleFonts.robotoMono())
|
|
.opacity(0.75),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
tableGap,
|
|
TableRow(
|
|
children: [
|
|
TableCell(child: Text('Mimetype').padding(right: 16)),
|
|
TableCell(child: Text(data.mimetype)),
|
|
],
|
|
),
|
|
TableRow(
|
|
children: [
|
|
TableCell(child: Text('Size').padding(right: 16)),
|
|
TableCell(
|
|
child: Row(
|
|
children: [
|
|
Text(data.size.formatBytes()),
|
|
const Gap(12),
|
|
Text('${data.size} Bytes',
|
|
style: GoogleFonts.robotoMono())
|
|
.opacity(0.75),
|
|
],
|
|
)),
|
|
],
|
|
),
|
|
TableRow(
|
|
children: [
|
|
TableCell(child: Text('Name').padding(right: 16)),
|
|
TableCell(child: Text(data.name)),
|
|
],
|
|
),
|
|
if (data.hash.isNotEmpty)
|
|
TableRow(
|
|
children: [
|
|
TableCell(child: Text('Hash').padding(right: 16)),
|
|
TableCell(
|
|
child: Text(data.hash,
|
|
style: GoogleFonts.robotoMono(fontSize: 11))
|
|
.opacity(0.9)),
|
|
],
|
|
),
|
|
tableGap,
|
|
...(data.metadata['exif']?.keys.map((k) => TableRow(
|
|
children: [
|
|
TableCell(child: Text(k).padding(right: 16)),
|
|
TableCell(
|
|
child: Text(
|
|
data.metadata['exif'][k].toString())),
|
|
],
|
|
)) ??
|
|
[]),
|
|
],
|
|
).padding(
|
|
horizontal: 20,
|
|
vertical: 8,
|
|
bottom: MediaQuery.of(context).padding.bottom),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|