Make this better

This commit is contained in:
shamoon 2024-10-13 20:52:06 -07:00
parent 5b042deede
commit d77cb8ec00
3 changed files with 25 additions and 5 deletions

View File

@ -350,15 +350,16 @@
</ng-template>
<ng-template #previewContent>
@if (!metadata) {
<img [src]="thumbUrl | safeUrl" class="thumb-preview" width="100%" height="auto" alt="Document loading..." i18n-alt />
<div class="position-absolute top-0 left-0 p-2 d-flex align-items-center justify-content-center">
<div class="thumb-preview position-absolute pe-none" [class.fade]="previewLoaded">
<img [src]="thumbUrl | safeUrl" class="" width="100%" height="auto" alt="Document loading..." i18n-alt />
<div class="position-absolute top-0 start-0 m-2 p-2 d-flex align-items-center justify-content-center">
<div>
<div class="spinner-border spinner-border-sm me-2" role="status"></div>
<ng-container i18n>Loading...</ng-container>
</div>
</div>
} @else {
</div>
@if (metadata) {
@switch (archiveContentRenderType) {
@case (ContentRenderType.PDF) {
@if (!useNativePdfViewer) {

View File

@ -64,5 +64,16 @@ textarea.rtl {
}
.thumb-preview {
border: 8px solid var(--bs-secondary);
top: 0;
left: calc(.5 * var(--bs-gutter-x));
height: calc(100vh - 160px);
overflow: hidden;
background-color: gray;
padding: 10px 8px; // border
width: calc(100% - var(--bs-gutter-x));
z-index: 1000;
> div {
mix-blend-mode: difference;
}
}

View File

@ -136,6 +136,7 @@ export class DocumentDetailComponent
previewText: string
downloadUrl: string
downloadOriginalUrl: string
previewLoaded: boolean = false
correspondents: Correspondent[]
documentTypes: DocumentType[]
@ -538,6 +539,9 @@ export class DocumentDetailComponent
.subscribe({
next: (result) => {
this.metadata = result
if (this.archiveContentRenderType !== ContentRenderType.PDF) {
this.previewLoaded = true
}
},
error: (error) => {
this.metadata = {} // allow display to fallback to <object> tag
@ -904,11 +908,15 @@ export class DocumentDetailComponent
pdfPreviewLoaded(pdf: PDFDocumentProxy) {
this.previewNumPages = pdf.numPages
if (this.password) this.requiresPassword = false
setTimeout(() => {
this.previewLoaded = true
}, 300)
}
onError(event) {
if (event.name == 'PasswordException') {
this.requiresPassword = true
this.previewLoaded = true
}
}