frontend: create share recording dialog component

frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Inject, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
-import type { DialogOptions } from '../../models';
+import type { DialogOptions } from '../../../models';
 
 @Component({
 	selector: 'ov-dialog',

frontend/projects/shared-meet-components/src/lib/components/dialogs/share-recording-dialog/share-recording-dialog.component.html

@@ -0,0 +1,26 @@
+<h2 mat-dialog-title>Share Recording</h2>
+<mat-dialog-content class="dialog-content">
+	<mat-radio-group [(ngModel)]="accessType">
+		<mat-radio-button value="private">Private (authenticated users)</mat-radio-button>
+		<mat-radio-button value="public">Public (anyone with the link)</mat-radio-button>
+	</mat-radio-group>
+
+	<div class="generate-btn-container">
+		<button mat-raised-button color="primary" (click)="getRecordingUrl()">Generate Link</button>
+	</div>
+
+	@if (recordingUrl) {
+		<div class="recording-url-container">
+			<mat-form-field appearance="outline" class="url-field">
+				<mat-label>Shareable URL</mat-label>
+				<input matInput [value]="recordingUrl" readonly />
+				<button mat-icon-button matSuffix (click)="copyToClipboard()">
+					<mat-icon>content_copy</mat-icon>
+				</button>
+			</mat-form-field>
+		</div>
+	}
+</mat-dialog-content>
+<mat-dialog-actions>
+	<button mat-button mat-dialog-close>Close</button>
+</mat-dialog-actions>

frontend/projects/shared-meet-components/src/lib/components/dialogs/share-recording-dialog/share-recording-dialog.component.scss

@@ -0,0 +1,36 @@
+.dialog-content {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	min-width: 100%;
+
+	mat-radio-group {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+
+		mat-radio-button {
+			color: var(--ov-text-primary-color);
+		}
+	}
+}
+
+.generate-btn-container {
+	display: flex;
+	justify-content: flex-start;
+}
+
+.recording-url-container {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.url-field {
+	width: 100%;
+
+	input {
+		font-size: 14px;
+		color: var(--ov-text-primary-color);
+	}
+}

frontend/projects/shared-meet-components/src/lib/components/dialogs/share-recording-dialog/share-recording-dialog.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShareRecordingDialogComponent } from './share-recording-dialog.component';
+
+describe('ShareRecordingDialogComponent', () => {
+	let component: ShareRecordingDialogComponent;
+	let fixture: ComponentFixture<ShareRecordingDialogComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [ShareRecordingDialogComponent]
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(ShareRecordingDialogComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

frontend/projects/shared-meet-components/src/lib/components/dialogs/share-recording-dialog/share-recording-dialog.component.ts

@@ -0,0 +1,55 @@
+import { Component, Inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+	MAT_DIALOG_DATA,
+	MatDialogActions,
+	MatDialogClose,
+	MatDialogContent,
+	MatDialogTitle
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { HttpService } from 'shared-meet-components';
+
+@Component({
+	selector: 'ov-share-recording-dialog',
+	standalone: true,
+	imports: [
+		FormsModule,
+		MatRadioModule,
+		MatFormFieldModule,
+		MatInputModule,
+		MatButtonModule,
+		MatIconModule,
+		MatDialogTitle,
+		MatDialogContent,
+		MatDialogActions,
+		MatDialogClose
+	],
+	templateUrl: './share-recording-dialog.component.html',
+	styleUrl: './share-recording-dialog.component.scss'
+})
+export class ShareRecordingDialogComponent {
+	accessType: 'private' | 'public' = 'private';
+	recordingUrl: string | undefined;
+
+	constructor(
+		@Inject(MAT_DIALOG_DATA) public data: { recordingId: string },
+		private httpService: HttpService
+	) {}
+
+	async getRecordingUrl() {
+		const privateAccess = this.accessType === 'private';
+		const { url } = await this.httpService.generateRecordingUrl(this.data.recordingId, privateAccess);
+		this.recordingUrl = url;
+	}
+
+	copyToClipboard() {
+		if (this.recordingUrl) {
+			navigator.clipboard.writeText(this.recordingUrl);
+		}
+	}
+}

frontend/projects/shared-meet-components/src/lib/components/index.ts

@@ -3,7 +3,8 @@ export * from './cards/toggle-card/toggle-card.component';
 export * from './cards/selection-card/selection-card.component';
 export * from './cards/pro-feature/pro-feature.component';
 export * from './console-nav/console-nav.component';
-export * from './dialog/dialog.component';
+export * from './dialogs/basic-dialog/dialog.component';
+export * from './dialogs/share-recording-dialog/share-recording-dialog.component';
 export * from './dynamic-grid/dynamic-grid.component';
 export * from './generics/list/list.component';
 export * from './spinner/spinner.component';

frontend/projects/shared-meet-components/src/lib/services/notification/notification.service.ts

@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { SpinnerComponent } from '../../components/spinner/spinner.component';
-import { DialogComponent } from '../../components/dialog/dialog.component';
+import { DialogComponent } from '../../components/dialogs/basic-dialog/dialog.component';
 import { DialogOptions } from '../../models';
 
 @Injectable({