From be9ec52ca9a11086d9900011363aabc8d11a3214 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Thu, 5 Jun 2025 17:00:47 +0300 Subject: [PATCH 01/12] Create new file viewer v2 file --- .../file-list-item.component.ts | 14 +- .../file-list/file-list.component.ts | 4 +- .../file-viewer-v2.component.html | 189 ++++++++ .../file-viewer-v2.component.scss | 311 +++++++++++++ .../file-viewer-v2.component.spec.ts | 23 + .../file-viewer-v2.component.ts | 423 ++++++++++++++++++ .../file-browser-components.module.ts | 3 + src/app/file-browser/file-browser.module.ts | 2 + src/app/file-browser/file-browser.routes.ts | 7 + .../share-preview/share-preview.component.ts | 11 +- .../relationship-share-resolve.service.ts | 2 + src/app/share-preview/share-preview.routes.ts | 23 +- 12 files changed, 993 insertions(+), 19 deletions(-) create mode 100644 src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.html create mode 100644 src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.scss create mode 100644 src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.spec.ts create mode 100644 src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.ts diff --git a/src/app/file-browser/components/file-list-item/file-list-item.component.ts b/src/app/file-browser/components/file-list-item/file-list-item.component.ts index 3d6f5ff24..b51532a76 100644 --- a/src/app/file-browser/components/file-list-item/file-list-item.component.ts +++ b/src/app/file-browser/components/file-list-item/file-list-item.component.ts @@ -580,9 +580,17 @@ export class FileListItemComponent ) { this.router.navigate(['/shares/record', this.item.archiveNbr]); } else { - this.router.navigate(['record', this.item.archiveNbr], { - relativeTo: this.route, - }); + console.log(this.item); + if (this.item.archiveNbr) { + this.router.navigate(['record', this.item.archiveNbr], { + relativeTo: this.route, + }); + } else if (this.item.archiveNumber) { + this.router.navigate(['record','v2', this.item.archiveNumber], { + relativeTo: this.route, + queryParamsHandling: 'preserve', + }); + } } } diff --git a/src/app/file-browser/components/file-list/file-list.component.ts b/src/app/file-browser/components/file-list/file-list.component.ts index c215cb7ec..c1a09dc54 100644 --- a/src/app/file-browser/components/file-list/file-list.component.ts +++ b/src/app/file-browser/components/file-list/file-list.component.ts @@ -362,7 +362,7 @@ export class FileListComponent } ngOnDestroy() { - this.dataService.setCurrentFolder(); + // this.dataService.setCurrentFolder(); unsubscribeAll(this.subscriptions); if (this.unlistenMouseMove) { this.unlistenMouseMove(); @@ -439,7 +439,7 @@ export class FileListComponent } onItemClick(itemClick: ItemClickEvent) { - this.itemClicked.emit(itemClick); + // this.itemClicked.emit(itemClick); if (!this.showSidebar || !itemClick.selectable) { return; diff --git a/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.html b/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.html new file mode 100644 index 000000000..9580a80f0 --- /dev/null +++ b/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.html @@ -0,0 +1,189 @@ + +
+
+ Back +
+
+
+
+
+ + + + + +
+
+
+ ‹ +
+
+ › +
+
+
{{ currentRecord.displayName }}
+
+
+ +
+ +
+ + + + + + + + + + + + + + + + + +
Date + +
Uploaded{{ currentRecord.createdDT | date }}
Size{{ currentRecord.size | dsFileSize }}
Type{{ currentRecord.type | prConstants | titlecase }}
+

Alt Text

+ + + + + + + + + + + + + + + + +
Keywords + +
+ Custom
+ Metadata + 		+ +
Location + + {{ + (currentRecord.LocnVO | prLocation)?.full + }} + + Click to add location + No location +
+ +
+
+
diff --git a/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.scss b/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.scss new file mode 100644 index 000000000..f221cefec --- /dev/null +++ b/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.scss @@ -0,0 +1,311 @@ +@import 'variables'; + +$toolbar-height: 30px; +$transition-length: 0.35s; +$button-size: 2rem; +:host { + @include fullscreenComponent; +} + +.file-viewer { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: white; + + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + + &.minimal { + background-color: black; + .file-viewer-close { + transform: translateY(-100%); + } + + .file-viewer-name { + transform: translateY(100%); + } + } + + transition: background-color $transition-length ease-in-out; +} + +.file-viewer-close { + position: absolute; + top: 0; + height: $toolbar-height; + transform: translateY(0); + display: flex; + align-items: center; + + a { + line-height: $toolbar-height; + padding: 0px 5px; + cursor: pointer; + > span { + opacity: 0.5; + } + } + + button.close { + border-radius: 50%; + background-color: $gray-500; + width: $button-size; + height: $button-size; + line-height: $button-size; + display: flex; + justify-content: center; + align-items: center; + } +} + +.file-viewer-name { + position: absolute; + bottom: 0; + left: 0; + right: 0; + white-space: nowrap; + height: $toolbar-height; + line-height: $toolbar-height; + text-align: center; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + transform: translateY(0); +} + +.file-viewer-name, +.file-viewer-close { + transition: transform $transition-length ease-in-out; +} + +.file-viewer-image, +pr-zooming-image-viewer, +pr-thumbnail, +pr-video, +pr-audio .thumb-preview, +iframe { + position: absolute; + top: 0px; + bottom: 0px; + left: 5px; + right: 5px; + background-size: contain; + background-repeat: no-repeat; + background-position: 50% 50%; + + &.full { + z-index: 1; + } +} + +.thumb-target { + position: absolute; + top: $toolbar-height; + bottom: $toolbar-height; + left: 0px; + right: 0px; + + iframe { + width: 100%; + height: 100%; + + @media screen and (max-width: 800px) { + display: none; + } + } +} + +.file-viewer-control { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: $button-size; + height: $button-size; + border-radius: 50%; + background: rgba($gray-500, 0.5); + text-align: center; + font-size: 24px; + font-weight: bold; + z-index: 2; + color: white; + cursor: pointer; + display: flex; + + align-items: center; + justify-content: center; + + span { + position: relative; + top: -2px; + } + + @media screen and (max-width: 800px) { + display: none; + } + + &.file-viewer-control-previous { + left: 10px; + } + + &.file-viewer-control-next { + right: 10px; + } +} + +.thumb-wrapper { + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + + &.prev { + transform: translateX(-100%); + z-index: 1; + } + + &.next { + transform: translateX(100%); + z-index: 1; + } + + &.current { + z-index: 2; + } +} + +.file-viewer-metadata, +.file-viewer-metadata-wrapper { + display: none; +} + +.editing-date pr-inline-value-edit[type='date'] { + left: -20%; + top: 3em; + margin-bottom: 3em; +} + +.can-edit { + pr-tags, + .location-container { + cursor: pointer; + } +} + +// Desktop tweaks +@media screen and (min-width: 801px) { + .thumb-target.thumb-target { + right: $metadata-width; + overflow: hidden; + } + + .file-viewer-metadata-wrapper { + top: $toolbar-height; + bottom: $toolbar-height; + width: $metadata-width; + right: 0; + position: absolute; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + padding: 10px; + overflow-y: auto; + overflow-x: hidden; + + td:first-child { + font-weight: bold; + } + + .metadata-table { + width: calc($metadata-width - 20px); + } + } + + .file-viewer-metadata { + display: flex; + flex-direction: column; + align-items: stretch; + margin: auto 0; + } + + .file-viewer-name { + display: none; + } +} + +.file-viewer-metadata { + td { + padding: 5px 0; + vertical-align: top; + + &:first-child { + padding-right: 15px; + vertical-align: middle; + + &.top-align { + vertical-align: top; + padding-top: 0.5rem; + } + } + } + + .file-viewer-description { + flex: 0 1 auto; + min-height: 0; + overflow-y: auto; + } + .metadata-item { + padding: 5px 10px; + label { + font-weight: 600; + margin-bottom: 0px; + } + + .metadata-item-content { + $padding-y: 0.25rem; + padding: $padding-y 0; + min-height: $line-height-base * 1rem + (2 * $padding-y); + } + } +} + +@supports (padding-left: env(safe-area-inset-left)) { + .file-viewer { + padding-top: env(safe-area-inset-top); + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + padding-bottom: env(safe-area-inset-bottom); + } + + .file-viewer-name { + bottom: env(safe-area-inset-bottom); + } + + .thumb-target { + --safe-area-inset-top: env(safe-area-inset-top); + --safe-area-inset-bottom: env(safe-area-inset-bottom); + top: calc(var(--safe-area-inset-top) + 30px); + bottom: calc(var(--safe-area-inset-bottom) + 30px); + left: env(safe-area-inset-left); + right: env(safe-area-inset-right); + } +} + +pr-download-button { + margin-top: 1rem; +} + +.title { + width: 110px; +} + +.alt-text { + font-weight: bold; + margin-top: 10px; +} diff --git a/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.spec.ts b/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.spec.ts new file mode 100644 index 000000000..b637f3009 --- /dev/null +++ b/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FileViewerV2Component } from './file-viewer-v2.component'; + +describe('FileViewerV2Component', () => { + let component: FileViewerV2Component; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FileViewerV2Component] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FileViewerV2Component); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.ts b/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.ts new file mode 100644 index 000000000..7167a14d4 --- /dev/null +++ b/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.ts @@ -0,0 +1,423 @@ +/* @format */ +import { + Component, + OnInit, + OnDestroy, + ElementRef, + Inject, + HostListener, + Optional, +} from '@angular/core'; +import { DOCUMENT } from '@angular/common'; +import { Router, ActivatedRoute } from '@angular/router'; +import { Key } from 'ts-key-enum'; +import * as Hammer from 'hammerjs'; +import { gsap } from 'gsap'; +import { filter, findIndex, find } from 'lodash'; +import { RecordVO, ItemVO, TagVOData, AccessRole } from '@root/app/models'; +import { AccountService } from '@shared/services/account/account.service'; +import { DataService } from '@shared/services/data/data.service'; +import { EditService } from '@core/services/edit/edit.service'; +import { DataStatus } from '@models/data-status.enum'; +import { DomSanitizer } from '@angular/platform-browser'; +import { PublicProfileService } from '@public/services/public-profile/public-profile.service'; +import type { KeysOfType } from '@shared/utilities/keysoftype'; +import { Subscription } from 'rxjs'; +import { SearchService } from '@search/services/search.service'; +import { ZoomingImageViewerComponent } from '@shared/components/zooming-image-viewer/zooming-image-viewer.component'; +import { FileFormat } from '@models/file-vo'; +import { GetAccessFile } from '@models/get-access-file'; +import { TagsService } from '../../../core/services/tags/tags.service'; + +@Component({ + selector: 'pr-file-viewer-v2', + templateUrl: './file-viewer-v2.component.html', + styleUrls: ['./file-viewer-v2.component.scss'], + providers: [SearchService], +}) +export class FileViewerV2Component implements OnInit, OnDestroy { + // Record + public currentRecord: RecordVO; + public prevRecord: RecordVO; + public nextRecord: RecordVO; + public records: RecordVO[]; + public currentIndex: number; + public isZoomableImage = false; + public isVideo = false; + public isAudio = false; + public isDocument = false; + public showThumbnail = true; + public isPublicArchive: boolean = false; + public allowDownloads: boolean = false; + public keywords: TagVOData[]; + public customMetadata: TagVOData[]; + + public documentUrl = null; + + public canEdit: boolean; + + // Swiping + private touchElement: HTMLElement; + private thumbElement: HTMLElement; + private bodyScroll: number; + private hammer: HammerManager; + private disableSwipes: boolean; + private fullscreen: boolean; + private velocityThreshold = 0.2; + private screenWidth: number; + private offscreenThreshold: number; + private loadingRecord = false; + + // UI + public useMinimalView = false; + public editingDate: boolean = false; + private bodyScrollTop: number; + private tagSubscription: Subscription; + + constructor( + private router: Router, + private route: ActivatedRoute, + private element: ElementRef, + private dataService: DataService, + @Inject(DOCUMENT) private document: any, + public sanitizer: DomSanitizer, + private accountService: AccountService, + private editService: EditService, + private tagsService: TagsService, + @Optional() private publicProfile: PublicProfileService, + ) { + // store current scroll position in file list + this.bodyScrollTop = window.scrollY; + + const resolvedRecord = route.snapshot.data.currentRecord; + + if (route.snapshot.data.singleFile) { + this.currentRecord = resolvedRecord; + this.records = [this.currentRecord]; + this.currentIndex = 0; + } else { + console.log(this.dataService.currentFolder); + this.records = filter( + this.dataService.currentFolder.ChildItemVOs, + 'recordId', + ) as RecordVO[]; + console.log(this.records); + this.currentIndex = findIndex(this.records, { + folderLinkId: resolvedRecord.folder_linkId.toString(), + }); + console.log(this.records); + console.log(resolvedRecord); + console.log(this.currentIndex); + this.currentRecord = new RecordVO(this.records[this.currentIndex]); + console.log(this.currentRecord); + if (resolvedRecord !== this.currentRecord) { + this.currentRecord.update(resolvedRecord); + } + + this.loadQueuedItems(); + } + + if (route.snapshot.data?.isPublicArchive) { + this.isPublicArchive = route.snapshot.data.isPublicArchive; + } + + if (publicProfile) { + publicProfile.archive$()?.subscribe((archive) => { + this.allowDownloads = !!archive?.allowPublicDownload; + }); + } + + this.canEdit = + this.accountService.checkMinimumAccess( + this.currentRecord.accessRole, + AccessRole.Editor, + ) && !route.snapshot.data?.isPublicArchive; + + this.tagSubscription = this.tagsService + .getItemTags$() + ?.subscribe((tags) => { + this.customMetadata = tags?.filter((tag) => + tag.type.includes('type.tag.metadata'), + ); + this.keywords = tags?.filter( + (tag) => !tag.type.includes('type.tag.metadata'), + ); + }); + } + + ngOnInit() { + this.initRecord(); + + // disable scrolling file list in background + this.document.body.style.setProperty('overflow', 'hidden'); + + // bind hammer events to thumbnail area + this.touchElement = + this.element.nativeElement.querySelector('.thumb-target'); + this.hammer = new Hammer(this.touchElement); + this.hammer.on('pan', (evt: HammerInput) => { + this.handlePanEvent(evt); + }); + // this.hammer.on('tap', (evt: HammerInput) => { + // this.useMinimalView = !this.useMinimalView; + // }); + + this.screenWidth = this.touchElement.clientWidth; + this.offscreenThreshold = this.screenWidth / 2; + } + + ngOnDestroy() { + // re-enable scrolling and return to initial scroll position + this.document.body.style.setProperty('overflow', ''); + setTimeout(() => { + window.scrollTo(0, this.bodyScrollTop); + }); + this.tagSubscription.unsubscribe(); + } + + @HostListener('window:resize', []) + onViewportResize(event) { + this.screenWidth = this.touchElement.clientWidth; + this.offscreenThreshold = this.screenWidth / 2; + } + + // Keyboard + @HostListener('document:keydown', ['$event']) + onKeyDown(event) { + if (!this.fullscreen) { + switch (event.key) { + case Key.ArrowLeft: + this.incrementCurrentRecord(true); + break; + case Key.ArrowRight: + this.incrementCurrentRecord(); + break; + } + } + } + + initRecord() { + this.isAudio = this.currentRecord.type.includes('audio'); + this.isVideo = this.currentRecord.type.includes('video'); + this.isZoomableImage = + this.currentRecord.type.includes('image') && + this.currentRecord.FileVOs?.length && + typeof ZoomingImageViewerComponent.chooseFullSizeImage( + this.currentRecord, + ) !== 'undefined'; + this.isDocument = this.currentRecord.FileVOs?.some( + (obj) => obj.type.includes('pdf') || obj.type.includes('txt'), + ); + this.documentUrl = this.getDocumentUrl(); + this.setCurrentTags(); + } + + toggleSwipe(value: boolean) { + this.disableSwipes = value; + } + + toggleFullscreen(value: boolean) { + this.fullscreen = value; + } + + getDocumentUrl() { + if (!this.isDocument) { + return false; + } + + const original = this.currentRecord.FileVOs.find( + (file) => file.format === FileFormat.Original, + ); + const access = GetAccessFile(this.currentRecord); + + let url; + + if (original?.type.includes('pdf') || original?.type.includes('txt')) { + url = original?.fileURL; + } else if (access) { + url = access?.fileURL; + } + + if (!url) { + return false; + } + return this.sanitizer.bypassSecurityTrustResourceUrl(url); + } + + isQueued(indexToCheck: number) { + return ( + indexToCheck >= this.currentIndex - 1 && + indexToCheck <= this.currentIndex + 1 + ); + } + + handlePanEvent(evt: HammerInput) { + if (this.disableSwipes) { + return; + } + + const queuedThumbs = document.querySelectorAll('.thumb-wrapper.queue'); + + const previous = evt.deltaX > 0; + const next = evt.deltaX < 0; + const canNavigate = + (previous && this.records[this.currentIndex - 1]) || + (next && this.records[this.currentIndex + 1]); + const fastEnough = Math.abs(evt.velocityX) > this.velocityThreshold; + const farEnough = Math.abs(evt.deltaX) > this.offscreenThreshold; + + if (!evt.isFinal) { + // follow pointer for panning + gsap.set(queuedThumbs, { + x: (index, target) => { + return evt.deltaX + getOrder(target) * this.screenWidth; + }, + }); + } else if (!(fastEnough || farEnough) || !canNavigate) { + // reset to center, not fast enough or far enough + gsap.to(queuedThumbs, { + duration: 0.5, + x: (index, target) => { + return getOrder(target) * this.screenWidth; + }, + ease: 'Power4.easeOut', + } as any); + } else { + // send offscreen to left or right, depending on direction + let offset = 1; + if (evt.deltaX < 0) { + offset = -1; + } + this.disableSwipes = true; + gsap.to(queuedThumbs, { + duration: 0.5, + x: (index, target) => { + return (getOrder(target) + offset) * this.screenWidth; + }, + ease: 'Power4.easeOut', + onComplete: () => { + this.incrementCurrentRecord(previous); + }, + } as any); + } + + function getOrder(elem: HTMLElement) { + if (elem.classList.contains('prev')) { + return -1; + } + if (elem.classList.contains('next')) { + return 1; + } else { + return 0; + } + } + } + + incrementCurrentRecord(previous = false) { + if (this.loadingRecord) { + return; + } + + let targetIndex = this.currentIndex; + if (previous) { + targetIndex--; + } else { + targetIndex++; + } + + if (!this.records[targetIndex]) { + return; + } + + this.loadingRecord = true; + + // update current record and fetch surrounding items + const targetRecord = this.records[targetIndex]; + + this.currentIndex = targetIndex; + this.currentRecord = targetRecord; + + this.initRecord(); + + this.disableSwipes = false; + this.loadQueuedItems(); + + if (targetRecord.archiveNbr) { + this.navigateToCurrentRecord(); + } else if (targetRecord.isFetching) { + targetRecord.fetched.then(() => { + this.navigateToCurrentRecord(); + }); + } else { + this.dataService.fetchLeanItems([targetRecord]).then(() => { + this.navigateToCurrentRecord(); + }); + } + } + + navigateToCurrentRecord() { + this.router.navigate(['../', this.currentRecord.archiveNbr], { + relativeTo: this.route, + }); + this.loadingRecord = false; + } + + loadQueuedItems() { + const surroundingCount = 5; + const start = Math.max(this.currentIndex - surroundingCount, 0); + const end = Math.min( + this.currentIndex + surroundingCount + 1, + this.records.length, + ); + const itemsToFetch = this.records + .slice(start, end) + .filter((item: RecordVO) => item.dataStatus < DataStatus.Full); + if (itemsToFetch.length) { + this.dataService.fetchFullItems(itemsToFetch); + } + } + + close() { + this.router.navigate(['.'], { relativeTo: this.route.parent }); + } + + public async onFinishEditing( + property: KeysOfType, + value: string, + ): Promise { + this.editService.saveItemVoProperty( + this.currentRecord as ItemVO, + property, + value, + ); + } + + public onLocationClick(): void { + if (this.canEdit) { + this.editService.openLocationDialog(this.currentRecord as ItemVO); + } + } + + public onTagsClick(type: string): void { + if (this.canEdit) { + this.editService.openTagsDialog(this.currentRecord as ItemVO, type); + } + } + + public onDateToggle(active: boolean): void { + this.editingDate = active; + } + + public onDownloadClick(): void { + this.dataService.downloadFile(this.currentRecord); + } + + private setCurrentTags(): void { + this.keywords = this.currentRecord.TagVOs.filter( + (tag) => !tag.type.includes('type.tag.metadata'), + ); + this.customMetadata = this.currentRecord.TagVOs.filter((tag) => + tag.type.includes('type.tag.metadata'), + ); + } +} diff --git a/src/app/file-browser/file-browser-components.module.ts b/src/app/file-browser/file-browser-components.module.ts index 63aa43b2a..a38250baf 100644 --- a/src/app/file-browser/file-browser-components.module.ts +++ b/src/app/file-browser/file-browser-components.module.ts @@ -29,6 +29,7 @@ import { ShareLinkDropdownComponent } from './components/share-link-dropdown/sha import { DownloadButtonComponent } from './components/download-button/download-button.component'; import { ShareLinkSettingsComponent } from './components/share-link-settings/share-link-settings.component'; +import { FileViewerV2Component } from './components/file-viewer-v2/file-viewer-v2.component'; @NgModule({ imports: [ @@ -43,6 +44,7 @@ import { ShareLinkSettingsComponent } from './components/share-link-settings/sha FileListComponent, FileListItemComponent, FileViewerComponent, + FileViewerV2Component, VideoComponent, SidebarComponent, FileListControlsComponent, @@ -57,6 +59,7 @@ import { ShareLinkSettingsComponent } from './components/share-link-settings/sha FileListItemComponent, FileListControlsComponent, FileViewerComponent, + FileViewerV2Component, FolderViewComponent, VideoComponent, SharingComponent, diff --git a/src/app/file-browser/file-browser.module.ts b/src/app/file-browser/file-browser.module.ts index 9ed284c38..01d8052c3 100644 --- a/src/app/file-browser/file-browser.module.ts +++ b/src/app/file-browser/file-browser.module.ts @@ -8,6 +8,7 @@ import { SharedModule } from '@shared/shared.module'; import { FileListComponent } from '@fileBrowser/components/file-list/file-list.component'; import { FileListItemComponent } from '@fileBrowser/components/file-list-item/file-list-item.component'; +import { FileViewerV2Component } from './components/file-viewer-v2/file-viewer-v2.component'; import { FileViewerComponent } from '@fileBrowser/components/file-viewer/file-viewer.component'; import { VideoComponent } from '@shared/components/video/video.component'; import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; @@ -26,6 +27,7 @@ import { FileBrowserComponentsModule } from './file-browser-components.module'; FileListComponent, FileListItemComponent, FileViewerComponent, + FileViewerV2Component, VideoComponent, ], }) diff --git a/src/app/file-browser/file-browser.routes.ts b/src/app/file-browser/file-browser.routes.ts index 78965211c..39be40dc1 100644 --- a/src/app/file-browser/file-browser.routes.ts +++ b/src/app/file-browser/file-browser.routes.ts @@ -6,6 +6,8 @@ import { RecordResolveService } from '@core/resolves/record-resolve.service'; import { FileListComponent } from '@fileBrowser/components/file-list/file-list.component'; import { FileViewerComponent } from '@fileBrowser/components/file-viewer/file-viewer.component'; +import { FileViewerV2Component } from './components/file-viewer-v2/file-viewer-v2.component'; +import { resolve } from 'path'; const folderResolve = { currentFolder: FolderResolveService, @@ -21,6 +23,11 @@ export const fileListChildRoutes = [ component: FileViewerComponent, resolve: recordResolve, }, + { + path: 'record/v2/:recArchiveNbr', + component: FileViewerV2Component, + resolve: recordResolve, + }, ]; export const routes: Routes = [ diff --git a/src/app/share-preview/components/share-preview/share-preview.component.ts b/src/app/share-preview/components/share-preview/share-preview.component.ts index 4f8a34498..bacaafaba 100644 --- a/src/app/share-preview/components/share-preview/share-preview.component.ts +++ b/src/app/share-preview/components/share-preview/share-preview.component.ts @@ -334,6 +334,8 @@ export class SharePreviewComponent implements OnInit, OnDestroy, AfterViewInit { } reloadSharePreviewData() { + console.log(this.isRelationshipShare); + if (this.isLinkShare) { return this.api.share .checkShareLink(this.route.snapshot.params.shareToken) @@ -344,6 +346,7 @@ export class SharePreviewComponent implements OnInit, OnDestroy, AfterViewInit { } }); } else if (this.isRelationshipShare) { + console.log('here'); const params = this.route.snapshot.params; return this.api.share .getShareForPreview(params.shareId, params.folder_linkId) @@ -683,8 +686,12 @@ export class SharePreviewComponent implements OnInit, OnDestroy, AfterViewInit { this.fileListClickListener = componentReference.itemClicked.subscribe( (item) => { - this.dispatchBannerClose(); - this.showCreateAccountDialog(); + // this.dispatchBannerClose(); + // this.showCreateAccountDialog(); + this.router.navigate(['record', 'v2', item.item.archiveNumber], { + relativeTo: this.route, + queryParamsHandling: 'preserve', + }); }, ); } diff --git a/src/app/share-preview/resolves/relationship-share-resolve.service.ts b/src/app/share-preview/resolves/relationship-share-resolve.service.ts index 29261278e..e32edcfce 100644 --- a/src/app/share-preview/resolves/relationship-share-resolve.service.ts +++ b/src/app/share-preview/resolves/relationship-share-resolve.service.ts @@ -34,6 +34,8 @@ export class RelationshipShareResolveService { } } + console.log('here') + return this.api.share .getShareForPreview(route.params.shareId, route.params.folder_linkId) .then((response: ShareResponse): any => { diff --git a/src/app/share-preview/share-preview.routes.ts b/src/app/share-preview/share-preview.routes.ts index 6cd5c5630..4dab7dec2 100644 --- a/src/app/share-preview/share-preview.routes.ts +++ b/src/app/share-preview/share-preview.routes.ts @@ -10,6 +10,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { LazyLoadFileBrowserSibling } from '@fileBrowser/lazy-load-file-browser-sibling'; import { RecordResolveService } from '@core/resolves/record-resolve.service'; import { FileViewerComponent } from '@fileBrowser/components/file-viewer/file-viewer.component'; +import { FileViewerV2Component } from '@fileBrowser/components/file-viewer-v2/file-viewer-v2.component'; import { AnnouncementModule } from '../announcement/announcement.module'; import { SharePreviewComponent } from './components/share-preview/share-preview.component'; import { PreviewArchiveResolveService } from './resolves/preview-archive-resolve.service'; @@ -64,8 +65,8 @@ const sharePreviewChildren = [ loadChildren: LazyLoadFileBrowserSibling, }, { - path: 'record/:recArchiveNbr', - component: FileViewerComponent, + path: 'record/v2/:recArchiveNbr', + component: FileViewerV2Component, resolve: { currentRecord: RecordResolveService, }, @@ -86,6 +87,13 @@ export const routes: Routes = [ }, children: sharePreviewChildren, }, + { + path: 'view/record/:recArchiveNbr', + component: FileViewerV2Component, + resolve: { + currentRecord: RecordResolveService, + }, + }, { path: 'view/:shareId/:folder_linkId', resolve: shareRelationshipResolve, @@ -100,16 +108,7 @@ export const routes: Routes = [ data: { noFileListPadding: true, }, - children: [ - ...sharePreviewChildren, - // { - // path: 'record/:recArchiveNbr', - // component: FileViewerComponent, - // resolve: { - // currentRecord: RecordResolveService, - // }, - // }, - ], + children: [...sharePreviewChildren], }, ]; @NgModule({ From 7a695519e30f579a4e06a85c9f25b828c22e26b0 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Thu, 5 Jun 2025 17:07:14 +0300 Subject: [PATCH 02/12] preserve query params --- .../components/file-viewer-v2/file-viewer-v2.component.html | 2 +- .../components/file-viewer-v2/file-viewer-v2.component.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.html b/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.html index 9580a80f0..30e8358d1 100644 --- a/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.html +++ b/src/app/file-browser/components/file-viewer-v2/file-viewer-v2.component.html @@ -50,7 +50,7 @@ !isVideo && !isAudio " - > + >https://local.permanent.org/share?itemType=record&token=b5dad0af-40dc-435f-bf0c-cc01fe6e8b76&itemId=3&accountId=10