From fe3f90d2663d0b81f6e98698f0955f9736657618 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Tue, 29 Jul 2025 18:19:16 +0200
Subject: [PATCH] ov-components: Implement error handling for recording start
failures and enhance UI interactions
---
.../recording-activity.component.html | 2 +-
.../components/toolbar/toolbar.component.html | 41 ++++++++++++-------
.../components/toolbar/toolbar.component.scss | 1 +
.../components/toolbar/toolbar.component.ts | 37 +++++++++++++----
.../src/lib/lang/cn.json | 3 +-
.../src/lib/lang/de.json | 3 +-
.../src/lib/lang/en.json | 3 +-
.../src/lib/lang/es.json | 3 +-
.../src/lib/lang/fr.json | 3 +-
.../src/lib/lang/hi.json | 3 +-
.../src/lib/lang/it.json | 3 +-
.../src/lib/lang/ja.json | 3 +-
.../src/lib/lang/nl.json | 3 +-
.../src/lib/lang/pt.json | 3 +-
14 files changed, 78 insertions(+), 33 deletions(-)
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
index 715b2e31..e0908aca 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
@@ -103,7 +103,7 @@
error_outline
- Error starting recording
+ {{ 'PANEL.RECORDING.ERROR_STARTING' | translate }}
{{ recordingError }}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
index d0ea4b2c..79820df6 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
@@ -11,15 +11,21 @@
id="activities-tag"
*ngIf="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED"
>
-
- radio_button_checked
- REC
- | {{ recordingTime | date: 'H:mm:ss' }}
-
-
- sensors
- LIVE
-
+ @if (recordingStatus === _recordingStatus.STARTED) {
+
+ radio_button_checked
+ REC
+ | {{ recordingTime | date: 'H:mm:ss' }}
+
+ }
+
+ @if (broadcastingStatus === _broadcastingStatus.STARTED) {
+
+
+ sensors
+ LIVE
+
+ }
@@ -129,12 +135,17 @@
(click)="toggleRecording()"
>
radio_button_checked
-
- {{ 'TOOLBAR.START_RECORDING' | translate }}
-
-
- {{ 'TOOLBAR.STOP_RECORDING' | translate }}
-
+ @if (
+ recordingStatus === _recordingStatus.STOPPED ||
+ recordingStatus === _recordingStatus.STOPPING ||
+ recordingStatus === _recordingStatus.FAILED
+ ) {
+
+ {{ 'TOOLBAR.START_RECORDING' | translate }}
+
+ } @else if (recordingStatus === _recordingStatus.STARTED || recordingStatus === _recordingStatus.STARTING) {
+ {{ 'TOOLBAR.RECORDING' | translate }}
+ }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
index 258f6554..96f4f235 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
@@ -126,6 +126,7 @@ $ov-recording-blinking-color: #eb5144;
text-align: center;
line-height: 20px;
margin: auto;
+ cursor: pointer;
}
.recording-tag {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
index aa5db1a6..e1a2d257 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
@@ -563,10 +563,33 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
}
}
+ /**
+ * @ignore
+ */
+ openRecordingActivityPanel() {
+ if (this.showActivitiesPanelButton && !this.isActivitiesOpened) {
+ this.panelService.togglePanel(PanelType.ACTIVITIES, 'recording');
+ }
+ }
+
+ /**
+ * @ignore
+ */
+ openBroadcastingActivityPanel() {
+ if (this.showActivitiesPanelButton && !this.isActivitiesOpened) {
+ this.panelService.togglePanel(PanelType.ACTIVITIES, 'broadcasting');
+ }
+ }
+
/**
* @ignore
*/
toggleRecording() {
+ if (this.recordingStatus === RecordingStatus.FAILED) {
+ this.openRecordingActivityPanel();
+ return;
+ }
+
const payload: RecordingStartRequestedEvent = {
roomName: this.openviduService.getRoomName()
};
@@ -576,9 +599,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.onRecordingStopRequested.emit(payload);
} else if (this.recordingStatus === RecordingStatus.STOPPED) {
this.onRecordingStartRequested.emit(payload);
- if (this.showActivitiesPanelButton && !this.isActivitiesOpened) {
- this.toggleActivitiesPanel('recording');
- }
+ this.openRecordingActivityPanel();
}
}
@@ -595,9 +616,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.onBroadcastingStopRequested.emit(payload);
this.broadcastingService.setBroadcastingStopped();
} else if (this.broadcastingStatus === BroadcastingStatus.STOPPED) {
- if (this.showActivitiesPanelButton && !this.isActivitiesOpened) {
- this.toggleActivitiesPanel('broadcasting');
- }
+ this.openBroadcastingActivityPanel();
}
}
@@ -650,7 +669,11 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.documentService.toggleFullscreen('session-container');
}
- private toggleActivitiesPanel(expandPanel: string) {
+ /**
+ * @internal
+ * @param expandPanel
+ */
+ toggleActivitiesPanel(expandPanel: string) {
this.panelService.togglePanel(PanelType.ACTIVITIES, expandPanel);
}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json
index e063403d..90ff3211 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json
@@ -132,7 +132,8 @@
"RECORDINGS": "录制",
"NO_MODERATOR": "只有主持人可以开始录音",
"NO_TRACKS_PUBLISHED": "请分享音频或视频以开始录制。",
- "NO_RECORDINGS_AVAILABLE": "目前没有可用的录音"
+ "NO_RECORDINGS_AVAILABLE": "目前没有可用的录音",
+ "ERROR_STARTING": "开始录音时出错"
},
"STREAMING": {
"TITLE": "直播",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json
index 6c6719aa..c87ce8cc 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json
@@ -126,7 +126,8 @@
"DOWNLOAD": "Download",
"RECORDINGS": "AUFZEICHNUNGEN",
"NO_MODERATOR": "Nur der MODERATOR kann die Aufzeichnung starten",
- "NO_TRACKS_PUBLISHED": "Teile Audio oder Video, um mit der Aufnahme zu beginnen."
+ "NO_TRACKS_PUBLISHED": "Teile Audio oder Video, um mit der Aufnahme zu beginnen.",
+ "ERROR_STARTING": "Fehler beim Starten der Aufnahme"
},
"STREAMING": {
"TITLE": "Streaming",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json
index db853236..c8cac44e 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json
@@ -136,7 +136,8 @@
"NO_MODERATOR": "Only the MODERATOR can start the recording",
"NO_TRACKS_PUBLISHED": "Share audio or video to start recording.",
"NO_RECORDINGS_AVAILABLE": "No recordings available at this time",
- "BROWSE_RECORDINGS": "Browse saved recordings"
+ "BROWSE_RECORDINGS": "Browse saved recordings",
+ "ERROR_STARTING": "Error starting recording"
},
"STREAMING": {
"TITLE": "Streaming",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
index f66b7bc8..3eec3fdb 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
@@ -132,7 +132,8 @@
"RECORDINGS": "GRABACIONES",
"NO_MODERATOR": "Sólo el MODERADOR puede iniciar la grabación",
"NO_TRACKS_PUBLISHED": "Comparte audio o video para poder empezar a grabar.",
- "NO_RECORDINGS_AVAILABLE": "No hay grabaciones disponibles en este momento"
+ "NO_RECORDINGS_AVAILABLE": "No hay grabaciones disponibles en este momento",
+ "ERROR_STARTING": "Error iniciando la grabación"
},
"STREAMING": {
"TITLE": "Streaming",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json
index a6351692..664ee167 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json
@@ -132,7 +132,8 @@
"RECORDINGS": "ENREGISTREMENTS",
"NO_MODERATOR": "Seul le MODERATEUR peut lancer l'enregistrement",
"NO_TRACKS_PUBLISHED": "Partagez de l’audio ou de la vidéo pour commencer l’enregistrement.",
- "NO_RECORDINGS_AVAILABLE": "Aucun enregistrement disponible pour le moment"
+ "NO_RECORDINGS_AVAILABLE": "Aucun enregistrement disponible pour le moment",
+ "ERROR_STARTING": "Erreur de démarrage"
},
"STREAMING": {
"TITLE": "Streaming",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json
index d068242d..26ad7ea7 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json
@@ -132,7 +132,8 @@
"RECORDINGS": "रिकॉर्डिंग",
"NO_MODERATOR": "केवल मॉडरेटर ही रिकॉर्डिंग शुरू कर सकता है",
"NO_TRACKS_PUBLISHED": "रिकॉर्डिंग शुरू करने के लिए ऑडियो या वीडियो साझा करें।",
- "NO_RECORDINGS_AVAILABLE": "इस समय कोई रिकॉर्डिंग उपलब्ध नहीं है"
+ "NO_RECORDINGS_AVAILABLE": "इस समय कोई रिकॉर्डिंग उपलब्ध नहीं है",
+ "ERROR_STARTING": "रिकॉर्डिंग शुरू करने में त्रुटि"
},
"STREAMING": {
"TITLE": "स्ट्रीमिंग",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json
index 4e2240a1..f377f835 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json
@@ -132,7 +132,8 @@
"RECORDINGS": "REGISTRAZIONI",
"NO_MODERATOR": "Solo il MODERATORE può avviare la registrazione",
"NO_TRACKS_PUBLISHED": "Condividi audio o video per iniziare la registrazione.",
- "NO_RECORDINGS_AVAILABLE": "Nessuna registrazione disponibile al momento"
+ "NO_RECORDINGS_AVAILABLE": "Nessuna registrazione disponibile al momento",
+ "ERROR_STARTING": "Errore di avvio"
},
"STREAMING": {
"TITLE": "Streaming",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json
index e7a3913f..ab8e2ab3 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json
@@ -132,7 +132,8 @@
"RECORDINGS": "録画",
"NO_MODERATOR": "録画を開始できるのは、モデレーターのみです",
"NO_TRACKS_PUBLISHED": "録音を開始するには、音声または動画を共有してください。",
- "NO_RECORDINGS_AVAILABLE": "現在利用可能な録画はありません"
+ "NO_RECORDINGS_AVAILABLE": "現在利用可能な録画はありません",
+ "ERROR_STARTING": "録画開始エラー"
},
"STREAMING": {
"TITLE": "ストリーミング",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json
index bc5cd35b..b935daec 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json
@@ -132,7 +132,8 @@
"RECORDINGS": "OPNAME",
"NO_MODERATOR": "Alleen de MOEDERATOR kan de opname starten",
"NO_TRACKS_PUBLISHED": "Deel audio of video om met opnemen te beginnen.",
- "NO_RECORDINGS_AVAILABLE": "Momenteel zijn er geen opnames beschikbaar"
+ "NO_RECORDINGS_AVAILABLE": "Momenteel zijn er geen opnames beschikbaar",
+ "ERROR_STARTING": "Fout bij starten opname"
},
"STREAMING": {
"TITLE": "Streaming",
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json
index 0c4d6748..c8c37405 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json
@@ -132,7 +132,8 @@
"RECORDINGS": "GRAVAÇÕES",
"NO_MODERATOR": "Só o MODERADOR pode iniciar a gravação",
"NO_TRACKS_PUBLISHED": "Compartilhe áudio ou vídeo para começar a gravar.",
- "NO_RECORDINGS_AVAILABLE": "Nenhuma gravação disponível no momento"
+ "NO_RECORDINGS_AVAILABLE": "Nenhuma gravação disponível no momento",
+ "ERROR_STARTING": "Erro ao iniciar gravação"
},
"STREAMING": {
"TITLE": "Streaming",