Add support for web archive rendering

constants/master_en.json

@@ -740,6 +740,9 @@
 				"mkv": "A Matroska Multimedia Container file",
 				"mpg": "A MPEG-2 File",
 				"mpeg": "A MPEG-2 File"
+			},
+			"web_archive": {
+				"wacz": "Web Archive"
 			}
 		},
 		"folder": {
@@ -833,7 +836,8 @@
 			"reference": "Reference",
 			"spreadsheet": "spreadsheet",
 			"unknown": "unknown",
-			"video": "video"
+			"video": "video",
+			"web_archive": "web archive"
 		},
 		"report": {
 			"cloud_file_missing": "Went to get a cloud file that should have been there",

src/app/file-browser/components/file-viewer/file-viewer.component.html

@@ -39,17 +39,29 @@
 						isZoomableImage &&
 						!isDocument &&
 						!isVideo &&
-						!isAudio
+						!isAudio &&
+						!isArchive &&
+						!isWebArchive
 					"
 				></pr-zooming-image-viewer>
+
+				<iframe
+					[src]="replayUrl"
+					*ngIf="isWebArchive && replayUrl"
+					width="100%"
+					height="100%"
+					frameborder="0"
+				></iframe>
 				<pr-thumbnail
 					[item]="currentRecord"
 					*ngIf="
 						showThumbnail &&
 						!isZoomableImage &&
 						!isDocument &&
 						!isVideo &&
-						!isAudio
+						!isAudio &&
+						!isArchive &&
+						!isWebArchive
 					"
 				></pr-thumbnail>
 				<pr-video [item]="currentRecord" *ngIf="isVideo"></pr-video>

src/app/file-browser/components/file-viewer/file-viewer.component.scss

@@ -88,7 +88,8 @@ pr-zooming-image-viewer,
 pr-thumbnail,
 pr-video,
 pr-audio .thumb-preview,
-iframe {
+iframe,
+replay-web-page {
 	position: absolute;
 	top: 0px;
 	bottom: 0px;

src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts

@@ -12,6 +12,7 @@ import { TagsService } from '@core/services/tags/tags.service';
 import { PublicProfileService } from '@public/services/public-profile/public-profile.service';
 import { ShareLinksService } from '@root/app/share-links/services/share-links.service';
 import { ApiService } from '@shared/services/api/api.service';
+import { FeatureFlagService } from '@root/app/feature-flag/services/feature-flag.service';
 import { MockComponent } from 'ng-mocks';
 import { TagsComponent } from '../../../shared/components/tags/tags.component';
 import { FileViewerComponent } from './file-viewer.component';
@@ -97,6 +98,7 @@ describe('FileViewerComponent', () => {
 	let openedDialogs: string[];
 	let downloaded: boolean;
 	let publicProfileService: PublicProfileService;
+	let featureFlagsEnabled: Map<string, boolean>;
 
 	function setUpMultipleRecords(...items: ItemVO[]) {
 		folderChildren.push(...items);
@@ -117,6 +119,7 @@ describe('FileViewerComponent', () => {
 		openedDialogs = [];
 		downloaded = false;
 		publicProfileService = new PublicProfileService();
+		featureFlagsEnabled = new Map<string, boolean>();
 
 		await TestBed.configureTestingModule({
 			declarations: [
@@ -201,6 +204,12 @@ describe('FileViewerComponent', () => {
 						},
 					},
 				},
+				{
+					provide: FeatureFlagService,
+					useValue: {
+						isEnabled: (flag: string) => featureFlagsEnabled.get(flag) ?? false,
+					},
+				},
 			],
 			schemas: [CUSTOM_ELEMENTS_SCHEMA],
 		}).compileComponents();
@@ -480,6 +489,60 @@ describe('FileViewerComponent', () => {
 		});
 	});
 
+	describe('Replay URLs for web archives', () => {
+		function setUpWebArchiveRecord() {
+			activatedRouteData.currentRecord = new RecordVO({
+				type: 'type.record.web_archive',
+				displayName: 'Test Web Archive',
+				TagVOs: [],
+				FileVOs: [
+					{
+						format: 'file.format.original',
+						type: 'wacz',
+						fileURL: 'http://example.com/archive.wacz',
+					},
+				],
+			});
+		}
+
+		it('should set replayUrl when replay-web feature flag is enabled', async () => {
+			featureFlagsEnabled.set('replay-web', true);
+			setUpWebArchiveRecord();
+			fixture = TestBed.createComponent(FileViewerComponent);
+			component = fixture.componentInstance;
+			fixture.detectChanges();
+			await fixture.whenStable();
+
+			expect(component.replayUrl).toBeTruthy();
+		});
+
+		it('should not set replayUrl when replay-web feature flag is disabled', async () => {
+			featureFlagsEnabled.set('replay-web', false);
+			setUpWebArchiveRecord();
+			fixture = TestBed.createComponent(FileViewerComponent);
+			component = fixture.componentInstance;
+			fixture.detectChanges();
+			await fixture.whenStable();
+
+			expect(component.replayUrl).toBeNull();
+		});
+
+		it('should have null replayUrl for non-web-archive records even when flag is enabled', async () => {
+			featureFlagsEnabled.set('replay-web', true);
+			activatedRouteData.currentRecord = new RecordVO({
+				type: 'document',
+				displayName: 'Test Document',
+				TagVOs: [],
+			});
+			fixture = TestBed.createComponent(FileViewerComponent);
+			component = fixture.componentInstance;
+			fixture.detectChanges();
+			await fixture.whenStable();
+
+			expect(component.replayUrl).toBeNull();
+		});
+	});
+
 	describe('Component API', () => {
 		function setAccess(access: boolean) {
 			hasAccess = access;

src/app/file-browser/components/file-viewer/file-viewer.component.ts

@@ -29,6 +29,7 @@ import { FileFormat } from '@models/file-vo';
 import { GetAccessFile } from '@models/get-access-file';
 import { ShareLinksService } from '@root/app/share-links/services/share-links.service';
 import { ApiService } from '@shared/services/api/api.service';
+import { FeatureFlagService } from '@root/app/feature-flag/services/feature-flag.service';
 import { TagsService } from '../../../core/services/tags/tags.service';
 
 @Component({
@@ -49,13 +50,15 @@ export class FileViewerComponent implements OnInit, OnDestroy {
 	public isVideo = false;
 	public isAudio = false;
 	public isDocument = false;
+	public isWebArchive = false;
 	public showThumbnail = true;
 	public isPublicArchive: boolean = false;
 	public allowDownloads: boolean = false;
 	public keywords: TagVOData[];
 	public customMetadata: TagVOData[];
 
 	public documentUrl = null;
+	public replayUrl = null;
 
 	public canEdit: boolean;
 
@@ -91,6 +94,7 @@ export class FileViewerComponent implements OnInit, OnDestroy {
 		@Optional() publicProfile: PublicProfileService,
 		private shareLinksService: ShareLinksService,
 		private api: ApiService,
+		private feature: FeatureFlagService,
 	) {
 		// store current scroll position in file list
 		this.bodyScrollTop = window.scrollY;
@@ -224,7 +228,11 @@ export class FileViewerComponent implements OnInit, OnDestroy {
 		this.isDocument = this.currentRecord.FileVOs?.some(
 			(obj) => obj.type.includes('pdf') || obj.type.includes('txt'),
 		);
+		this.isWebArchive = this.currentRecord.type.includes('web_archive');
 		this.documentUrl = this.getDocumentUrl();
+		if (this.feature.isEnabled('replay-web')) {
+			this.replayUrl = this.getReplayUrl();
+		}
 		this.setCurrentTags();
 	}
 
@@ -260,6 +268,23 @@ export class FileViewerComponent implements OnInit, OnDestroy {
 		return this.sanitizer.bypassSecurityTrustResourceUrl(url);
 	}
 
+	getReplayUrl() {
+		if (!this.isWebArchive) {
+			return null;
+		}
+
+		const originalFileUrl = this.currentRecord?.FileVOs?.find(
+			(file) => file.format === FileFormat.Original,
+		)?.fileURL;
+
+		if (!originalFileUrl) {
+			return null;
+		}
+
+		const url = `https://replay.dev.permanent.org/?source=${encodeURIComponent(originalFileUrl)}&embed=replay-with-info`;
+		return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+	}
+
 	isQueued(indexToCheck: number) {
 		return (
 			indexToCheck >= this.currentIndex - 1 &&

src/app/models/vo-types.ts

@@ -47,7 +47,8 @@ export type RecordType =
 	| 'type.record.reference'
 	| 'type.record.spreadsheet'
 	| 'type.record.unknown'
-	| 'type.record.video';
+	| 'type.record.video'
+	| 'type.record.web_archive';
 
 export type GenericStatus =
 	| 'status.generic.declined'

src/index.html

@@ -51,5 +51,6 @@
 			<div class="lds-dual-ring"></div>
 		</pr-app-root>
 		<script src="https://js.stripe.com/v3/"></script>
+		<script src="https://replay.dev.permanent.org/ui.js"></script>
 	</body>
 </html>