frontend: refactor ViewRecordingComponent by removing unused back navigation and share link components

frontend/projects/shared-meet-components/src/lib/pages/view-recording/view-recording.component.html

@@ -21,10 +21,6 @@
 						<mat-icon>refresh</mat-icon>
 						<span>Try Again</span>
 					</button>
-					<button mat-button (click)="goBack()">
-						<mat-icon>arrow_back</mat-icon>
-						<span>Go Back</span>
-					</button>
 				</div>
 			</div>
 		</div>
@@ -38,11 +34,6 @@
 			<!-- Header Section -->
 			<div class="recording-header">
 				<div class="header-content">
-					<div class="header-actions">
-						<button mat-icon-button (click)="goBack()" matTooltip="Go back" class="back-btn">
-							<mat-icon>arrow_back</mat-icon>
-						</button>
-					</div>
 					<div class="header-info">
 						<div class="recording-info">
 							<h1 class="recording-title">{{ recording.roomName }}</h1>
@@ -64,9 +55,10 @@
 							</div>
 						</div>
 						<!-- Actions Section -->
-						@if (recordingUrl && !videoError) {
+						@if (!videoError) {
 							<div class="actions-section">
 								<div class="primary-actions">
+									@if (recordingUrl) {
 										<button
 											mat-button
 											(click)="downloadRecording()"
@@ -76,6 +68,7 @@
 											<mat-icon>download</mat-icon>
 											<span>Download</span>
 										</button>
+									}
 
 									<button
 										mat-raised-button
@@ -89,15 +82,6 @@
 									</button>
 								</div>
 							</div>
-
-							<!-- Share Link Component -->
-							<!-- <ov-share-meeting-link
-					[meetingUrl]="recordingUrl"
-					title="Share this recording"
-					titleSize="md"
-					subtitle="Anyone with this link can view the recording"
-					(copyClicked)="copyRecordingLink()"
-				></ov-share-meeting-link> -->
 						}
 					</div>
 				</div>
@@ -108,16 +92,14 @@
 				@if (recordingUrl && !videoError) {
 					<div class="video-container">
 						<video
-							#videoPlayer
+							[src]="recordingUrl"
 							controls
 							controlsList="nodownload"
 							playsinline
 							class="video-player"
 							(loadeddata)="onVideoLoaded()"
 							(error)="onVideoError()"
-						>
+						></video>
-							<source [src]="recordingUrl" type="video/mp4" />
-						</video>
 
 						@if (!isVideoLoaded) {
 							<div class="video-loading-overlay">

frontend/projects/shared-meet-components/src/lib/pages/view-recording/view-recording.component.scss

@@ -163,27 +163,6 @@
 			}
 		}
 	}
-
-	.header-actions {
-		display: flex;
-		gap: var(--ov-meet-spacing-sm);
-
-		@include ov-tablet-down {
-			justify-content: flex-end;
-		}
-
-		.back-btn {
-			@include ov-button-base;
-			@include ov-theme-transition;
-			color: var(--ov-meet-text-secondary);
-			padding: 0;
-
-			&:hover {
-				color: var(--ov-meet-text-primary);
-				background-color: var(--ov-meet-surface-hover);
-			}
-		}
-	}
 }
 
 // === VIDEO SECTION ===

frontend/projects/shared-meet-components/src/lib/pages/view-recording/view-recording.component.ts

@@ -1,16 +1,15 @@
 import { DatePipe } from '@angular/common';
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RecordingManagerService } from '@lib/services';
+import { NotificationService, RecordingManagerService } from '@lib/services';
 import { MeetRecordingInfo, MeetRecordingStatus } from '@lib/typings/ce';
-import { ActionService } from 'openvidu-components-angular';
+import { formatDurationToTime } from '@lib/utils';
-import { ShareMeetingLinkComponent } from '@lib/components/share-meeting-link/share-meeting-link.component';
 
 @Component({
 	selector: 'ov-view-recording',
@@ -24,11 +23,10 @@ import { ShareMeetingLinkComponent } from '@lib/components/share-meeting-link/sh
 		DatePipe,
 		MatProgressSpinnerModule,
 		MatTooltipModule,
-		MatSnackBarModule,
+		MatSnackBarModule
-		ShareMeetingLinkComponent
 	]
 })
-export class ViewRecordingComponent implements OnInit, OnDestroy {
+export class ViewRecordingComponent implements OnInit {
 	recording?: MeetRecordingInfo;
 	recordingUrl?: string;
 	videoError = false;
@@ -38,20 +36,17 @@ export class ViewRecordingComponent implements OnInit, OnDestroy {
 
 	constructor(
 		protected recordingService: RecordingManagerService,
-		protected actionService: ActionService,
+		protected notificationService: NotificationService,
 		protected route: ActivatedRoute,
-		protected router: Router,
+		protected router: Router
-		private snackBar: MatSnackBar
 	) {}
 
 	async ngOnInit() {
 		await this.loadRecording();
 	}
 
-	ngOnDestroy() {}
-
 	private async loadRecording() {
-		const recordingId = this.route.snapshot.paramMap.get('recording-id');
+		const recordingId = this.route.snapshot.params['recording-id'];
 		const secret = this.route.snapshot.queryParams['secret'];
 
 		if (!recordingId) {
@@ -66,7 +61,6 @@ export class ViewRecordingComponent implements OnInit, OnDestroy {
 			if (this.recording.status === MeetRecordingStatus.COMPLETE) {
 				this.recordingUrl = this.recordingService.getRecordingMediaUrl(recordingId, secret);
 			}
-			console.warn('Recording loaded:', this.recordingUrl);
 		} catch (error) {
 			console.error('Error fetching recording:', error);
 			this.hasError = true;
@@ -75,24 +69,24 @@ export class ViewRecordingComponent implements OnInit, OnDestroy {
 		}
 	}
 
-	onVideoLoaded = () => {
+	onVideoLoaded() {
 		this.isVideoLoaded = true;
 		this.videoError = false;
-	};
+	}
 
-	onVideoError = () => {
+	onVideoError() {
+		console.error('Error loading video');
 		this.videoError = true;
 		this.isVideoLoaded = false;
-	};
+	}
 
 	downloadRecording() {
 		if (!this.recording || !this.recordingUrl) {
-			this.snackBar.open('Recording is not available for download', 'Close', { duration: 3000 });
+			this.notificationService.showSnackbar('Recording is not available for download');
 			return;
 		}
 
 		this.recordingService.downloadRecording(this.recording);
-		this.snackBar.open('Download started', 'Close', { duration: 2000 });
 	}
 
 	openShareDialog() {
@@ -100,28 +94,11 @@ export class ViewRecordingComponent implements OnInit, OnDestroy {
 		this.recordingService.openShareRecordingDialog(this.recording!.recordingId, url);
 	}
 
-	// copyRecordingLink() {
+	async retryLoad() {
-	// 	const url = window.location.href;
-	// 	navigator.clipboard.writeText(url).then(() => {
-	// 		this.snackBar.open('Link copied to clipboard', 'Close', { duration: 2000 });
-	// 	}).catch(() => {
-	// 		this.snackBar.open('Failed to copy link', 'Close', { duration: 3000 });
-	// 	});
-	// }
-
-	goBack() {
-		if (window.history.length > 1) {
-			window.history.back();
-		} else {
-			this.router.navigate(['/']);
-		}
-	}
-
-	retryLoad() {
 		this.isLoading = true;
 		this.hasError = false;
 		this.videoError = false;
-		this.loadRecording();
+		await this.loadRecording();
 	}
 
 	getStatusIcon(): string {
@@ -156,9 +133,7 @@ export class ViewRecordingComponent implements OnInit, OnDestroy {
 		}
 	}
 
-	formatDuration(durationSeconds: number): string {
+	formatDuration(duration: number): string {
-		const minutes = Math.floor(durationSeconds / 60);
+		return formatDurationToTime(duration);
-		const seconds = Math.floor(durationSeconds % 60);
-		return `${minutes}:${seconds.toString().padStart(2, '0')}`;
 	}
 }