eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-3450 Replace current pdf and html previewer

Browse Source
This commit is contained in:
DatDang
2025-02-19 15:31:43 +07:00
committed by Dat H. Pham
parent 14408c1000
commit 5cecdd2e6a
10 changed files with 198 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/email/presentation/widgets/html_attachment_previewer.dart
+22 -10
View File
@@ -1,3 +1,5 @@
import 'dart:convert';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart';
import 'package:core/presentation/views/html_viewer/html_content_viewer_widget.dart';
@@ -9,6 +11,10 @@ import 'package:tmail_ui_user/features/base/isolate/background_isolate_binary_me
import 'package:tmail_ui_user/features/email/presentation/widgets/pdf_viewer/top_bar_attachment_viewer.dart';
import 'package:tmail_ui_user/main/routes/route_navigation.dart';
import 'package:tmail_ui_user/main/utils/app_utils.dart';
import 'package:twake_previewer_flutter/core/previewer_options/options/previewer_state.dart';
import 'package:twake_previewer_flutter/core/previewer_options/previewer_options.dart';
import 'package:twake_previewer_flutter/twake_html_previewer/options/html_view_options.dart';
import 'package:twake_previewer_flutter/twake_html_previewer/twake_html_previewer.dart';
class HtmlAttachmentPreviewer extends StatefulWidget {
const HtmlAttachmentPreviewer({
@@ -115,16 +121,22 @@ class _HtmlAttachmentPreviewerState extends State<HtmlAttachmentPreviewer> {
required double height,
}) {
return PlatformInfo.isWeb
? HtmlContentViewerOnWeb(
contentHtml: widget.htmlContent,
widthContent: width,
heightContent: height,
direction: AppUtils.getCurrentDirection(context),
mailtoDelegate: (uri) {
popBack();
widget.mailToClicked(uri);
},
keepWidthWhileLoading: true,
? TwakeHtmlPreviewer(
bytes: utf8.encode(widget.htmlContent),
previewerOptions: PreviewerOptions(
previewerState: PreviewerState.success,
width: width,
height: height,
),
htmlViewOptions: HtmlViewOptions(
contentClassName: 'tmail-content',
direction: AppUtils.getCurrentDirection(context),
mailtoDelegate: (uri) {
popBack();
widget.mailToClicked(uri);
},
keepWidthWhileLoading: true,
),
)
: HtmlContentViewer(
contentHtml: widget.htmlContent,
lib/features/email/presentation/widgets/pdf_viewer/pagination_pdf_viewer.dart
-226
View File
@@ -1,226 +0,0 @@
import 'package:core/utils/app_logger.dart';
import 'package:flutter/material.dart';
import 'package:pdf_render/pdf_render_widgets.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
enum ZoomState {
activate,
inactivate
}
class PaginationPDFViewer extends StatefulWidget {
final PdfViewerController? pdfViewerController;
const PaginationPDFViewer({
super.key,
this.pdfViewerController,
});
@override
State<PaginationPDFViewer> createState() => _PaginationPDFViewerState();
}
class _PaginationPDFViewerState extends State<PaginationPDFViewer> {
static const double _maxZoomLevelDefault = 4.0;
static const double _minZoomLevelDefault = 1.0;
final ValueNotifier<ZoomState> _zoomInPageNotifier = ValueNotifier<ZoomState>(ZoomState.activate);
final ValueNotifier<ZoomState> _zoomOutPageNotifier = ValueNotifier<ZoomState>(ZoomState.inactivate);
final ValueNotifier<int> _pageCurrentNotifier = ValueNotifier<int>(1);
double _zoomLevel = 1.0;
@override
void initState() {
_zoomLevel = 1.0;
_pageCurrentNotifier.value = 1;
widget.pdfViewerController?.addListener(_pageChanged);
super.initState();
}
@override
void dispose() {
_zoomLevel = 1.0;
widget.pdfViewerController?.removeListener(_pageChanged);
_pageCurrentNotifier.dispose();
_zoomInPageNotifier.dispose();
_zoomOutPageNotifier.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.8),
borderRadius: const BorderRadius.all(Radius.circular(5))
),
height: 50,
padding: const EdgeInsetsDirectional.only(start: 16, end: 12),
margin: const EdgeInsets.only(bottom: 24),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context).page,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Colors.white,
fontSize: 14
),
),
const SizedBox(width: 12),
ValueListenableBuilder(
valueListenable: _pageCurrentNotifier,
builder: (_, value, __) {
return Text(
'$value',
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Colors.white,
fontSize: 14
),
);
}),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
'/',
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Colors.white,
fontSize: 14
),
),
),
Text(
'${widget.pdfViewerController?.pageCount}',
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Colors.white,
fontSize: 14
),
),
const Padding(
padding: EdgeInsetsDirectional.only(start: 12, end: 8),
child: VerticalDivider(color: Colors.grey),
),
ValueListenableBuilder(
valueListenable: _zoomOutPageNotifier,
builder: (_, state, __) {
return IconButton(
onPressed: _zoomOutPage,
padding: const EdgeInsets.all(2),
icon: Icon(
Icons.horizontal_rule,
color: _getColorByZoomState(state),
size: 24,
),
focusColor: Colors.black.withOpacity(0.3),
hoverColor: Colors.black.withOpacity(0.3),
tooltip: AppLocalizations.of(context).zoomOut,
);
}
),
const Padding(
padding: EdgeInsets.all(5),
child: Icon(
Icons.zoom_in,
color: Colors.white,
size: 28,
),
),
ValueListenableBuilder(
valueListenable: _zoomInPageNotifier,
builder: (_, state, __) {
return IconButton(
onPressed: _zoomInPage,
padding: const EdgeInsets.all(2),
icon: Icon(
Icons.add,
color: _getColorByZoomState(state),
size: 24,
),
focusColor: Colors.black.withOpacity(0.3),
hoverColor: Colors.black.withOpacity(0.3),
tooltip: AppLocalizations.of(context).zoomIn,
);
}
)
],
),
);
}
Color _getColorByZoomState(ZoomState zoomState) {
switch (zoomState) {
case ZoomState.activate:
return Colors.white;
case ZoomState.inactivate:
return Colors.grey;
}
}
void _pageChanged({String? property}) {
_pageCurrentNotifier.value = widget.pdfViewerController?.currentPageNumber ?? 1;
_updateZoomState();
}
void _zoomInPage() {
if (_zoomLevel < _maxZoomLevelDefault) {
if (_zoomLevel >= 1.0 && _zoomLevel < 1.25) {
_zoomLevel = 1.25;
} else if (_zoomLevel >= 1.25 && _zoomLevel < 1.50) {
_zoomLevel = 1.50;
} else if (_zoomLevel >= 1.50 && _zoomLevel < 2.0) {
_zoomLevel = 2.0;
} else if (_zoomLevel >= 2.0 && _zoomLevel < 2.50) {
_zoomLevel = 2.5;
} else if (_zoomLevel >= 2.5 && _zoomLevel < 3.0) {
_zoomLevel = 3.0;
} else if (_zoomLevel >= 3.0 && _zoomLevel < 3.5) {
_zoomLevel = 3.5;
} else if (_zoomLevel >= 3.5 && _zoomLevel < 4.0) {
_zoomLevel = 4.0;
}
_updateZoomState();
widget.pdfViewerController?.setZoomRatio(zoomRatio: _zoomLevel);
}
}
void _zoomOutPage() {
if (_zoomLevel > _minZoomLevelDefault) {
if (_zoomLevel > 1.0 && _zoomLevel <= 1.25) {
_zoomLevel = 1.0;
} else if (_zoomLevel > 1.25 && _zoomLevel <= 1.50) {
_zoomLevel = 1.25;
} else if (_zoomLevel > 1.50 && _zoomLevel <= 2.0) {
_zoomLevel = 1.50;
} else if (_zoomLevel > 2.0 && _zoomLevel <= 2.50) {
_zoomLevel = 2.0;
} else if (_zoomLevel > 2.5 && _zoomLevel <= 3.0) {
_zoomLevel = 2.5;
} else if (_zoomLevel > 3.0 && _zoomLevel <= 3.5) {
_zoomLevel = 3.0;
} else if (_zoomLevel > 3.5 && _zoomLevel <= 4.0) {
_zoomLevel = 3.5;
}
_updateZoomState();
widget.pdfViewerController?.setZoomRatio(zoomRatio: _zoomLevel);
}
}
void _updateZoomState() {
final zoomLevel = widget.pdfViewerController?.zoomRatio ?? 1.0;
log('_PaginationPDFViewerState::_updateZoomState:zoomLevel = $zoomLevel');
if (zoomLevel <= _maxZoomLevelDefault && zoomLevel > _minZoomLevelDefault) {
_zoomOutPageNotifier.value = ZoomState.activate;
} else {
_zoomOutPageNotifier.value = ZoomState.inactivate;
}
if (zoomLevel < _maxZoomLevelDefault && zoomLevel >= _minZoomLevelDefault) {
_zoomInPageNotifier.value = ZoomState.activate;
} else {
_zoomInPageNotifier.value = ZoomState.inactivate;
}
}
}
lib/features/email/presentation/widgets/pdf_viewer/pdf_viewer.dart
+71 -170
View File
@@ -1,5 +1,4 @@
import 'dart:async';
import 'dart:math';
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/state/failure.dart';
@@ -14,16 +13,16 @@ import 'package:get/get.dart';
import 'package:jmap_dart_client/jmap/account_id.dart';
import 'package:model/download/download_task_id.dart';
import 'package:model/email/attachment.dart';
import 'package:pdf_render/pdf_render_widgets.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:tmail_ui_user/features/base/widget/circle_loading_widget.dart';
import 'package:tmail_ui_user/features/email/domain/exceptions/download_attachment_exceptions.dart';
import 'package:tmail_ui_user/features/email/domain/state/download_attachment_for_web_state.dart';
import 'package:tmail_ui_user/features/email/domain/usecases/download_attachment_for_web_interactor.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/pdf_viewer/pagination_pdf_viewer.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/pdf_viewer/top_bar_attachment_viewer.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
import 'package:tmail_ui_user/main/routes/route_navigation.dart';
import 'package:twake_previewer_flutter/core/previewer_options/options/loading_options.dart';
import 'package:twake_previewer_flutter/core/previewer_options/options/previewer_state.dart';
import 'package:twake_previewer_flutter/core/previewer_options/options/top_bar_options.dart';
import 'package:twake_previewer_flutter/core/previewer_options/previewer_options.dart';
import 'package:twake_previewer_flutter/twake_pdf_previewer/twake_pdf_previewer.dart';
typedef DownloadPDFFileAction = Function(Uint8List bytes, String fileName);
typedef PrintPDFFileAction = Function(Uint8List bytes, String fileName);
@@ -56,11 +55,9 @@ class _PDFViewerState extends State<PDFViewer> {
StreamSubscription<dartz.Either<Failure, Success>>? _downloadInteractorStreamSubscription;
CancelToken? _downloadAttachmentCancelToken;
final PdfViewerController _pdfViewerController = PdfViewerController();
final ValueNotifier<Object?> _pdfViewStateNotifier = ValueNotifier<Object?>(null);
final DeviceInfoPlugin _deviceInfoPlugin = Get.find<DeviceInfoPlugin>();
final FocusNode _keyboardFocusNode = FocusNode();
@override
void initState() {
@@ -110,175 +107,85 @@ class _PDFViewerState extends State<PDFViewer> {
@override
void dispose() {
_pdfViewerController.dispose();
_pdfViewStateNotifier.dispose();
_downloadAttachmentStreamSubscription.cancel();
_downloadAttachmentStreamController.close();
_downloadInteractorStreamSubscription?.cancel();
_downloadInteractorStreamSubscription = null;
_downloadAttachmentCancelToken = null;
_keyboardFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return KeyboardListener(
focusNode: _keyboardFocusNode,
autofocus: true,
onKeyEvent: _handleKeyboardEventListener,
child: Center(
child: Stack(
children: [
Center(
child: SizedBox(
width: double.infinity,
child: ValueListenableBuilder(
valueListenable: _pdfViewStateNotifier,
builder: (context, viewState, widget) {
if (viewState is DownloadAttachmentForWebSuccess) {
return PdfViewer.openData(
viewState.bytes,
viewerController: _pdfViewerController,
onError: (error) {
logError('_PDFViewerState::build:openData:onError:: $error');
_pdfViewStateNotifier.value = DownloadAttachmentForWebFailure(exception: error);
},
params: PdfViewerParams(
panAxis: PanAxis.vertical,
scrollByMouseWheel: 0.5,
layoutPages: (viewSize, pages) {
List<Rect> rect = [];
final viewWidth = viewSize.width;
final viewHeight = viewSize.height;
final maxHeight = pages.fold<double>(0.0, (maxHeight, page) => max(maxHeight, page.height));
final maxWidth = pages.fold<double>(0.0, (maxWidth, page) => max(maxWidth, page.width));
final ratio = viewHeight / max(maxHeight, maxWidth);
log('_PDFViewerState::build: viewWidth = $viewWidth | viewHeight = $viewHeight | maxHeight = $maxHeight | ratio = $ratio');
var top = 0.0;
double padding = 16.0;
for (var page in pages) {
final width = page.width * ratio;
final height = page.height * ratio;
final left = viewWidth > viewHeight ? (viewWidth / 2) - (width / 2) : 0.0;
rect.add(Rect.fromLTWH(left, top, width, height));
top += height + padding;
}
return rect;
},
onClickOutSidePageViewer: _closeView
),
);
} else if (viewState is DownloadingAttachmentForWeb) {
return CircularPercentIndicator(
percent: viewState.progress / 100,
progressColor: AppColor.primaryColor,
lineWidth: 4.0,
backgroundColor: Colors.white,
radius: 40,
center: Text(
'${viewState.progress.round()}%',
style: Theme.of(context).textTheme.labelMedium?.copyWith(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w500
),
),
);
} else if (viewState is DownloadAttachmentForWebFailure) {
return Center(
child: Text(
AppLocalizations.of(context).noPreviewAvailable,
style: Theme.of(context).textTheme.labelMedium?.copyWith(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w500
),
),
);
} else {
return const Center(
child: CircleLoadingWidget(
size: 80,
strokeWidth: 4.0,
)
);
}
},
)
),
),
Align(
alignment: AlignmentDirectional.topCenter,
child: ValueListenableBuilder(
valueListenable: _pdfViewStateNotifier,
builder: (context, viewState, child) {
if (viewState is DownloadAttachmentForWebSuccess) {
return FutureBuilder<BaseDeviceInfo>(
future: _deviceInfoPlugin.deviceInfo,
builder: (context, deviceInfo) {
BrowserName? browserName;
if (deviceInfo.hasData && deviceInfo.data is WebBrowserInfo) {
browserName = (deviceInfo.data as WebBrowserInfo).browserName;
}
return TopBarAttachmentViewer(
title: widget.attachment.generateFileName(),
downloadAction: () => widget.downloadAction?.call(
viewState.bytes,
widget.attachment.generateFileName()
),
printAction: browserName != null && isBrowserSupportedPrinting(browserName)
? () => widget.printAction?.call(viewState.bytes, widget.attachment.generateFileName())
: null,
);
});
}
return child ?? const SizedBox.shrink();
return FutureBuilder(
future: _deviceInfoPlugin.deviceInfo,
builder: (context, deviceInfo) {
BrowserName? browserName;
if (deviceInfo.hasData && deviceInfo.data is WebBrowserInfo) {
browserName = (deviceInfo.data as WebBrowserInfo).browserName;
}
return ValueListenableBuilder(
valueListenable: _pdfViewStateNotifier,
builder: (context, viewState, child) {
final previewerState = switch (viewState) {
DownloadAttachmentForWebSuccess() => PreviewerState.success,
DownloadAttachmentForWebFailure() => PreviewerState.failure,
DownloadingAttachmentForWeb() => PreviewerState.loading,
_ => PreviewerState.idle,
};
final bytes = switch (viewState) {
DownloadAttachmentForWebSuccess(bytes: final bytes) => bytes,
_ => null,
};
final downloadProgress = switch (viewState) {
DownloadingAttachmentForWeb(progress: final progress) => progress / 100,
_ => 0.0,
};
final progressText = switch (viewState) {
DownloadingAttachmentForWeb(progress: final progress) => '${progress.round()}%',
_ => '',
};
final title = switch (viewState) {
DownloadAttachmentForWebSuccess(attachment: final attachment) => attachment.generateFileName(),
_ => '',
};
return TwakePdfPreviewer(
bytes: Uint8List.fromList(bytes ?? []),
previewerOptions: PreviewerOptions(
previewerState: previewerState,
onError: (error) {
logError('_PDFViewerState::build:openData:onError:: $error');
_pdfViewStateNotifier.value = DownloadAttachmentForWebFailure(exception: error);
},
child: TopBarAttachmentViewer(
title: widget.attachment.generateFileName(),
closeAction: () {
_downloadAttachmentCancelToken?.cancel();
Navigator.maybeOf(context)?.pop();
},
),
errorMessage: AppLocalizations.of(context).noPreviewAvailable,
),
),
ValueListenableBuilder(
valueListenable: _pdfViewerController,
builder: (_, __, ___) {
if (_pdfViewerController.isReady) {
return Align(
alignment: AlignmentDirectional.bottomCenter,
child: PaginationPDFViewer(
pdfViewerController: _pdfViewerController,
),
);
} else {
return const SizedBox.shrink();
}
}
),
ValueListenableBuilder(
valueListenable: _pdfViewerController,
builder: (context, m, child) {
if (!_pdfViewerController.isReady) return Container();
final v = _pdfViewerController.viewRect;
final all = _pdfViewerController.fullSize;
final top = v.top / all.height * v.height;
final height = v.height / all.height * v.height;
return Positioned(
right: 0,
top: top,
height: height,
width: 8,
child: Container(color: AppColor.colorTextBody),
);
},
),
],
),
),
loadingOptions: LoadingOptions(
progress: downloadProgress,
progressColor: AppColor.primaryColor,
text: progressText,
),
onTapOutside: _closeView,
topBarOptions: TopBarOptions(
title: title,
onDownload: bytes != null
? () => widget.downloadAction?.call(bytes, title)
: null,
onPrint: browserName != null && isBrowserSupportedPrinting(browserName) && bytes != null
? () => widget.printAction?.call(bytes, title)
: null,
onClose: _closeView,
),
);
},
);
}
);
}
@@ -286,10 +193,4 @@ class _PDFViewerState extends State<PDFViewer> {
_downloadAttachmentCancelToken?.cancel();
Navigator.maybeOf(context)?.pop();
}
void _handleKeyboardEventListener(KeyEvent event) {
if (event is KeyDownEvent && event.logicalKey == LogicalKeyboardKey.escape) {
_closeView();
}
}
}