neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: enhance share recording dialog with error handling and clipboard support

Browse Source
This commit is contained in:
juancarmore 2025-06-17 15:11:16 +02:00
parent 110f66aca2
commit 253c7cb37b
3 changed files with 85 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,21 +1,42 @@
<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>
@if (!recordingUrl) {
@if (erroMessage) {
<div class="error-text">
<mat-icon color="warn">error</mat-icon>
{{ erroMessage }}
</div>
}
<div class="generate-btn-container">
<button mat-raised-button color="primary" (click)="getRecordingUrl()">Generate Link</button>
</div>
<mat-radio-group [(ngModel)]="accessType">
<mat-radio-button value="public">Public (anyone with the link)</mat-radio-button>
<mat-radio-button value="private">Private (authenticated users)</mat-radio-button>
</mat-radio-group>
<div class="generate-btn-container">
@if (loading) {
<mat-spinner diameter="24"></mat-spinner>
} @else {
<button mat-flat-button color="primary" (click)="getRecordingUrl()" [disabled]="loading">
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-icon-button
matSuffix
(click)="copyToClipboard()"
[matTooltip]="copied ? 'Copied!' : 'Copy to clipboard'"
matTooltipPosition="above"
>
<mat-icon>{{ copied ? 'check' : 'content_copy' }}</mat-icon>
</button>
</mat-form-field>
</div>

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

@ -3,6 +3,7 @@
flex-direction: column;
gap: 20px;
min-width: 100%;
overflow: hidden;
mat-radio-group {
display: flex;
@ -10,20 +11,26 @@
gap: 10px;
mat-radio-button {
color: var(--ov-text-primary-color);
color: var(--ov-text-surface-color);
}
}
}
.generate-btn-container {
.error-text {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 6px;
color: var(--ov-error-color);
font-weight: 500;
}
.generate-btn-container {
align-self: flex-start;
}
.recording-url-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-top: 8px;
}
.url-field {
@ -31,6 +38,6 @@
input {
font-size: 14px;
color: var(--ov-text-primary-color);
color: var(--ov-text-surface-color);
}
}

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

@ -1,3 +1,4 @@
import { Clipboard } from '@angular/cdk/clipboard';
import { Component, Inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
@ -11,7 +12,9 @@ import {
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatTooltipModule } from '@angular/material/tooltip';
import { HttpService } from 'shared-meet-components';
@Component({
@ -27,29 +30,56 @@ import { HttpService } from 'shared-meet-components';
MatDialogTitle,
MatDialogContent,
MatDialogActions,
MatDialogClose
MatDialogClose,
MatTooltipModule,
MatProgressSpinnerModule
],
templateUrl: './share-recording-dialog.component.html',
styleUrl: './share-recording-dialog.component.scss'
})
export class ShareRecordingDialogComponent {
accessType: 'private' | 'public' = 'private';
recordingUrl: string | undefined;
accessType: 'private' | 'public' = 'public';
recordingUrl?: string;
loading = false;
erroMessage?: string;
copied = false;
constructor(
@Inject(MAT_DIALOG_DATA) public data: { recordingId: string },
private httpService: HttpService
) {}
@Inject(MAT_DIALOG_DATA) public data: { recordingId: string; recordingUrl?: string },
private httpService: HttpService,
private clipboard: Clipboard
) {
this.recordingUrl = data.recordingUrl;
}
async getRecordingUrl() {
const privateAccess = this.accessType === 'private';
const { url } = await this.httpService.generateRecordingUrl(this.data.recordingId, privateAccess);
this.recordingUrl = url;
this.loading = true;
this.erroMessage = undefined;
try {
const privateAccess = this.accessType === 'private';
const { url } = await this.httpService.generateRecordingUrl(this.data.recordingId, privateAccess);
this.recordingUrl = url;
} catch (error) {
this.erroMessage = 'Failed to generate recording URL. Please try again later.';
console.error('Error generating recording URL:', error);
} finally {
this.loading = false;
}
}
copyToClipboard() {
if (this.recordingUrl) {
navigator.clipboard.writeText(this.recordingUrl);
if (!this.recordingUrl) {
return;
}
this.clipboard.copy(this.recordingUrl!);
this.copied = true;
// Reset copied state after 2 seconds
setTimeout(() => {
this.copied = false;
}, 2000);
}
}