Utilize ReplayWeb environments

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

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

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

@@ -15,6 +15,7 @@ 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 { GetThumbnailPipe } from '@shared/pipes/get-thumbnail.pipe';
+import { environment } from '@root/environments/environment';
 import { TagsComponent } from '../../../shared/components/tags/tags.component';
 import { FileViewerComponent } from './file-viewer.component';
 
@@ -579,6 +580,10 @@ describe('FileViewerComponent', () => {
 			await fixture.whenStable();
 
 			expect(component.replayUrl).toBeTruthy();
+			const internalUrl = (component.replayUrl as any)
+				.changingThisBreaksApplicationSecurity;
+
+			expect(internalUrl.startsWith(environment.replayBaseUrl)).toBe(true);
 		});
 
 		it('should not set replayUrl when replay-web feature flag is disabled', async () => {

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

@@ -30,6 +30,7 @@ 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 { environment } from '@root/environments/environment';
 import { TagsService } from '../../../core/services/tags/tags.service';
 
 @Component({
@@ -291,7 +292,7 @@ export class FileViewerComponent implements OnInit, OnDestroy {
 			return null;
 		}
 
-		const url = `https://replay.dev.permanent.org/?source=${encodeURIComponent(originalFileUrl)}&embed=replay-with-info`;
+		const url = `${environment.replayBaseUrl}/?source=${encodeURIComponent(originalFileUrl)}&embed=replay-with-info`;
 		return this.sanitizer.bypassSecurityTrustResourceUrl(url);
 	}
 

src/environments/environment-interface.ts

@@ -23,6 +23,7 @@ interface AnalyticsConfig {
 export interface Environment {
 	production: boolean;
 	apiUrl: string;
+	replayBaseUrl: string;
 	hmr: boolean;
 	firebase: FirebaseConfig;
 	debug: boolean;

src/environments/environment.dev.ts

@@ -4,6 +4,7 @@ import { Environment } from './environment-interface';
 export const environment: Environment = {
 	production: true,
 	apiUrl: 'https://app.dev.permanent.org/api',
+	replayBaseUrl: 'https://replay.dev.permanent.org',
 	hmr: false,
 	firebase: {
 		authDomain: 'prpledgedev.firebaseapp.com',

src/environments/environment.local-docker.proxy.ts

@@ -4,6 +4,7 @@ import { Environment } from './environment-interface';
 export const environment: Environment = {
 	production: false,
 	apiUrl: 'https://local.permanent.org/api',
+	replayBaseUrl: 'https://replay.dev.permanent.org',
 	hmr: false,
 	firebase: {
 		authDomain: 'prpledgedev.firebaseapp.com',

src/environments/environment.local.proxy.ts

@@ -4,6 +4,7 @@ import { Environment } from './environment-interface';
 export const environment: Environment = {
 	production: false,
 	apiUrl: 'https://ng.permanent.org:4200/api',
+	replayBaseUrl: 'https://replay.dev.permanent.org',
 	hmr: false,
 	firebase: {
 		authDomain: 'prpledgedev.firebaseapp.com',

src/environments/environment.prod.ts

@@ -4,6 +4,7 @@ import { Environment } from './environment-interface';
 export const environment: Environment = {
 	production: true,
 	apiUrl: 'https://app.permanent.org/api',
+	replayBaseUrl: 'https://replay.permanent.org',
 	hmr: false,
 	firebase: {
 		authDomain: 'prpledgeprod.firebaseapp.com',

src/environments/environment.staging.ts

@@ -4,6 +4,7 @@ import { Environment } from './environment-interface';
 export const environment: Environment = {
 	production: true,
 	apiUrl: 'https://app.staging.permanent.org/api',
+	replayBaseUrl: 'https://replay.staging.permanent.org',
 	hmr: false,
 	firebase: {
 		authDomain: 'prpledgestaging.firebaseapp.com',

src/environments/environment.ts

@@ -4,6 +4,7 @@ import { Environment } from './environment-interface';
 export const environment: Environment = {
 	production: false,
 	apiUrl: 'https://local.permanent.org/api',
+	replayBaseUrl: 'https://replay.dev.permanent.org',
 	hmr: false,
 	firebase: {
 		authDomain: 'prpledgedev.firebaseapp.com',

src/index.html

@@ -51,6 +51,5 @@
 			<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>