From 0eb0ff167bd286d334ce4b29cca262130416822e Mon Sep 17 00:00:00 2001
From: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com>
Date: Wed, 12 Apr 2023 19:32:34 +0530
Subject: [PATCH] [ACA-4676][ACA-4678] Added Non Responsive Preview Dialog to
viewer component (#8428)
* [ACA-4676] Added NonResponsivePreview dialog to download file incase file preview takes longer than a set period of time.
* [ACA-4676] Updated button positioning for non responsive preview dialog
* [ACA-4676] Added documentation for NonResponsivePreviewDialog functionality for viewer.component.ts
* [ACA-4676] Added unit tests for NonResponsivePreviewDialog
* [ACA-4676] Updated template of NonResponsivePreviewDialog to use components and directives from mat-dialog. Removed non-responsive-dialog.component.scss. Removed unused methods from non-responsive-dialog.component.ts
* [ACA-4676] Corrected typo in NonResponsivePreviewDialog unit tests
* [ACA-4676] Added test cases for NonResponsivePreviewDialog in viewer.component.ts. NOT WORKING
* [ACA-4676] Fixed test cases for non-responsive preview dialog. Moved NonResponsivePreview dialog tests to separate describe block. Updated component code to make properties and methods visible to testing environment
* [ACA-4676] Migrated viewer component test env setup from setupTestBed() to TestBed.configureTestingModule(). Moved NonResponsivePreviewDialog unit tests to inside parent Viewer component describe block
* [ACA-4676] Removed unused async tag. Added license info to non-responsive-dialog.component.ts and non-responsive-preview-actions.enum.ts
* [ACA-4676] Updated code to use "viewer" appConfig object instead of "preview-config". Added non-responsive-preview-actions.enum.ts to public-api.ts
* [ACA-4676] Resolved potential lint issues
* [ACA-4676] Updated non responsive preview to look for viewer config object inside app.config instead of preview-config
* [ACA-4676] Removed duplicate import for @adf/core. Added NonResponsiveDialogComponent to adf/core exports
* [ACA-4676] Renamed properties/config/documentation from nonResponsivePreview to downloadPrompt. Renamed NonResponsivePreviewActionsEnum to DownloadPromptActions.
* [ACA-4676] Resolved linting and unit test failures
* [ACA-4676] Changed dataType for timers to number. Updated code to use window.setTimeout(), instead of just setTimeout(). Added missing whitespace. Updated method names in demo shell to use 'downloadPrompt' naming scheme.
* [ACA-4676] Fixed incorrect import statement in viewer.module.ts for download-prompt-dialog
* [ACA-4676] Testing disabled by default behaviour of downloadPrompt feature
* [ACA-4676] Changed default value for enableDownloadPrompt and enableDownloadPromptReminders to false in app.config.json
* [ACA-4676] Removed un-needed AppConfig configurations from unit tests
---
demo-shell/src/app.config.json | 4 +
.../app/components/files/files.component.html | 24 ++++
.../app/components/files/files.component.ts | 24 ++++
docs/core/components/viewer.component.md | 25 ++++
lib/core/src/lib/i18n/en.json | 9 +-
.../download-prompt-dialog.component.html | 23 ++++
.../download-prompt-dialog.component.spec.ts | 73 +++++++++++
.../download-prompt-dialog.component.ts | 27 ++++
.../components/viewer.component.spec.ts | 118 ++++++++++++++----
.../lib/viewer/components/viewer.component.ts | 97 +++++++++++++-
.../viewer/models/download-prompt.actions.ts | 22 ++++
lib/core/src/lib/viewer/public-api.ts | 2 +
lib/core/src/lib/viewer/viewer.module.ts | 4 +-
13 files changed, 423 insertions(+), 29 deletions(-)
create mode 100644 lib/core/src/lib/viewer/components/download-prompt-dialog/download-prompt-dialog.component.html
create mode 100644 lib/core/src/lib/viewer/components/download-prompt-dialog/download-prompt-dialog.component.spec.ts
create mode 100644 lib/core/src/lib/viewer/components/download-prompt-dialog/download-prompt-dialog.component.ts
create mode 100644 lib/core/src/lib/viewer/models/download-prompt.actions.ts
diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json
index f055130a77..6a8abf7e33 100644
--- a/demo-shell/src/app.config.json
+++ b/demo-shell/src/app.config.json
@@ -1478,6 +1478,10 @@
]
},
"viewer": {
+ "enableDownloadPrompt": false,
+ "enableDownloadPromptReminder": false,
+ "downloadPromptDelay": 50,
+ "downloadPromptReminderDelay": 30,
"enableFileAutoDownload": true,
"fileAutoDownloadSizeThresholdInMB": 15
}
diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
index a1de8a994f..207752d20d 100644
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -653,6 +653,30 @@
+
+
+ Enable Download Prompt
+
+
+
+
+
+
+
+
+
+
+ Enable Download Prompt Reminders
+
+
+
+
+
+
+
+
diff --git a/demo-shell/src/app/components/files/files.component.ts b/demo-shell/src/app/components/files/files.component.ts
index 6980dcfa62..570f16e3ad 100644
--- a/demo-shell/src/app/components/files/files.component.ts
+++ b/demo-shell/src/app/components/files/files.component.ts
@@ -251,6 +251,10 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
selectedNodes = [];
+ enableDownloadPrompt: boolean = this.appConfig.get('viewer.enableDownloadPrompt', false);
+ enableDownloadPromptReminder: boolean = this.appConfig.get('viewer.enableDownloadPromptReminders', false);
+ downloadPromptDelay = this.appConfig.get('viewer.downloadPromptDelay', 50);
+ downloadPromptReminderDelay = this.appConfig.get('viewer.downloadPromptReminderDelay', 30);
enableFileAutoDownload: boolean = this.appConfig.get('viewer.enableFileAutoDownload', true);
fileAutoDownloadSizeThresholdInMB: number = this.appConfig.get('viewer.fileAutoDownloadSizeThresholdInMB', 15);
@@ -780,6 +784,26 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
this.selectedNodes = [];
}
+ onEnableDownloadPrompt() {
+ const previewConfig = this.appConfig?.config['viewer'];
+ previewConfig['enableDownloadPrompt'] = this.enableDownloadPrompt;
+ }
+
+ onDownloadPromptDelayChange() {
+ const previewConfig = this.appConfig?.config['viewer'];
+ previewConfig['downloadPromptDelay'] = this.downloadPromptDelay;
+ }
+
+ onEnableDownloadPromptReminderChange() {
+ const previewConfig = this.appConfig?.config['viewer'];
+ previewConfig['enableDownloadPromptReminder'] = this.enableDownloadPromptReminder;
+ }
+
+ onDownloadPromptReminderChange() {
+ const previewConfig = this.appConfig?.config['viewer'];
+ previewConfig['downloadPromptReminderDelay'] = this.downloadPromptReminderDelay;
+ }
+
onEnableFileAutoDownloadChange() {
const previewConfig = this.appConfig?.config['viewer'];
previewConfig['enableFileAutoDownload'] = this.enableFileAutoDownload;
diff --git a/docs/core/components/viewer.component.md b/docs/core/components/viewer.component.md
index e3f815f1aa..e592f28bbc 100644
--- a/docs/core/components/viewer.component.md
+++ b/docs/core/components/viewer.component.md
@@ -380,6 +380,31 @@ In the same way you can set a default zoom scaling value for the image viewer by
By default the viewer's zoom scaling is set to 100%.
+## Handling non responsive file preview
+
+It is possible that trying to load a large file, especially over a slow network, can cause the viewer component to get stuck in the loading state. To handle such cases,
+the viewer can be configured to display a prompt to ask the user to either download the file locally and then close the viewer, or wait for the viewer to load the file.
+In case the user decides to wait, the viewer can further be configured to display subsequent reminder prompts asking the same options.
+
+In order to configure this feature, add the following code in `app.config.json`.
+
+```
+ "viewer": {
+ "enableDownloadPrompt": true,
+ "enableDownloadPromptReminder": true,
+ "downloadPromptDelay": 50,
+ "downloadPromptReminderDelay": 30
+ }
+```
+
+Here `enableDownloadPrompt: true` enables the dialog to be visible after a set period of time. This time can be configured by updating the value in the
+`downloadPromptDelay` property.
+
+The second boolean flag `enableDownloadPromptReminder: true` can be used to configure whether the reminder prompts should be displayed or not.
+`downloadPromptReminderDelay` property can be used to configure the time to wait between reminder prompts.
+
+Note: All times in this configuration must be provided in seconds
+
## See also
- [Document List component](../../content-services/components/document-list.component.md)
diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json
index 426dcb40a3..362a9b32a7 100644
--- a/lib/core/src/lib/i18n/en.json
+++ b/lib/core/src/lib/i18n/en.json
@@ -391,7 +391,8 @@
"FULLSCREEN": "Activate full-screen mode",
"CLOSE": "Close",
"NEXT_FILE": "Next File",
- "PREV_FILE": "Previous File"
+ "PREV_FILE": "Previous File",
+ "WAIT": "Wait"
},
"ARIA": {
"PREVIOUS_PAGE": "Previous page",
@@ -429,7 +430,11 @@
"PLACEHOLDER": "Password",
"ERROR": "Password is wrong"
},
- "SUBTITLES": "Subtitles"
+ "SUBTITLES": "Subtitles",
+ "NON_RESPONSIVE_DIALOG": {
+ "HEADER": "Preview loading delayed",
+ "LABEL": "You can continue to wait, or download the document."
+ }
},
"ERROR_CONTENT": {
"UNKNOWN": {
diff --git a/lib/core/src/lib/viewer/components/download-prompt-dialog/download-prompt-dialog.component.html b/lib/core/src/lib/viewer/components/download-prompt-dialog/download-prompt-dialog.component.html
new file mode 100644
index 0000000000..d84c16fc9e
--- /dev/null
+++ b/lib/core/src/lib/viewer/components/download-prompt-dialog/download-prompt-dialog.component.html
@@ -0,0 +1,23 @@
+