ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: enhance recording functionality with track checks and UI updates

master
Carlos Santos 2025-07-17 12:03:48 +02:00
parent d151834048
commit 55fd64c254
16 changed files with 188 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
View File

File diff suppressed because one or more lines are too long

54
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
View File

@ -72,6 +72,50 @@
text-align: center; text-align: center;
} }
.recording-placeholder {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.recording-placeholder-img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.empty-state {
margin-bottom: 20px;
}
.recording-status-messages {
margin-top: 10px;
}
.recording-error-container {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.recording-list-container {
margin-top: 10px;
}
.recording-actions {
display: flex;
gap: 5px;
}
.action-button {
transition: all 0.2s ease;
&:hover {
transform: scale(1.1);
}
}
.recording-message { .recording-message {
color: var(--ov-text-surface-color); color: var(--ov-text-surface-color);
} }
@ -80,6 +124,11 @@
color: var(--ov-error-color); color: var(--ov-error-color);
font-weight: 600; font-weight: 600;
} }
.disable-recording-btn {
background-color: var(--ov-secondary-action-color) !important;
color: var(--ov-text-surface-color) !important;
cursor: not-allowed !important;
}
.recording-name { .recording-name {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@ -106,6 +155,11 @@
color: var(--ov-secondary-action-color); color: var(--ov-secondary-action-color);
} }
.start-recording-button-container {
width: 100%;
display: inline-block;
}
#stop-recording-btn { #stop-recording-btn {
width: 100%; width: 100%;
background-color: var(--ov-error-color); background-color: var(--ov-error-color);

7
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts
View File

@ -134,6 +134,13 @@ export class RecordingActivityComponent implements OnInit {
if (this.recordingStatusSubscription) this.recordingStatusSubscription.unsubscribe(); if (this.recordingStatusSubscription) this.recordingStatusSubscription.unsubscribe();
} }
/**
* @internal
*/
get hasRoomTracksPublished(): boolean {
return this.openviduService.hasRoomTracksPublished();
}
/** /**
* @internal * @internal
*/ */

7
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
View File

@ -120,7 +120,12 @@
*ngIf="!isMinimal && showRecordingButton" *ngIf="!isMinimal && showRecordingButton"
mat-menu-item mat-menu-item
id="recording-btn" id="recording-btn"
[disabled]="recordingStatus === _recordingStatus.STARTING || recordingStatus === _recordingStatus.STOPPING" [disabled]="
recordingStatus === _recordingStatus.STARTING ||
recordingStatus === _recordingStatus.STOPPING ||
!hasRoomTracksPublished
"
[matTooltip]="!hasRoomTracksPublished ? ('TOOLBAR.NO_TRACKS_PUBLISHED' | translate) : ''"
(click)="toggleRecording()" (click)="toggleRecording()"
> >
<mat-icon color="warn">radio_button_checked</mat-icon> <mat-icon color="warn">radio_button_checked</mat-icon>

7
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
View File

@ -465,6 +465,13 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.cdkOverlayService.setSelector('body'); this.cdkOverlayService.setSelector('body');
} }
/**
* @internal
*/
get hasRoomTracksPublished(): boolean {
return this.openviduService.hasRoomTracksPublished();
}
/** /**
* @ignore * @ignore
*/ */

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/cn.json
View File

@ -55,7 +55,8 @@
"LEAVE": "离开会议", "LEAVE": "离开会议",
"PARTICIPANTS": "参与者", "PARTICIPANTS": "参与者",
"CHAT": "聊天", "CHAT": "聊天",
"ACTIVITIES": "活动" "ACTIVITIES": "活动",
"NO_TRACKS_PUBLISHED": "请分享音频或视频以开始录制。"
}, },
"STREAM": { "STREAM": {
"SETTINGS": "设置", "SETTINGS": "设置",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "您确定要删除录音吗", "DELETE_QUESTION": "您确定要删除录音吗",
"DOWNLOAD": "下载", "DOWNLOAD": "下载",
"RECORDINGS": "录制", "RECORDINGS": "录制",
"NO_MODERATOR": "只有主持人可以开始录音" "NO_MODERATOR": "只有主持人可以开始录音",
"NO_TRACKS_PUBLISHED": "请分享音频或视频以开始录制。"
}, },
"STREAMING": { "STREAMING": {
"TITLE": "直播", "TITLE": "直播",

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/de.json
View File

@ -55,7 +55,8 @@
"LEAVE": "Die Raum verlassen", "LEAVE": "Die Raum verlassen",
"PARTICIPANTS": "Teilnehmer", "PARTICIPANTS": "Teilnehmer",
"CHAT": "Chat", "CHAT": "Chat",
"ACTIVITIES": "Aktivitäten" "ACTIVITIES": "Aktivitäten",
"NO_TRACKS_PUBLISHED": "Teile Audio oder Video, um mit der Aufnahme zu beginnen."
}, },
"STREAM": { "STREAM": {
"SETTINGS": "Einstellungen", "SETTINGS": "Einstellungen",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Möchten Sie die Aufzeichnung wirklich löschen?", "DELETE_QUESTION": "Möchten Sie die Aufzeichnung wirklich löschen?",
"DOWNLOAD": "Download", "DOWNLOAD": "Download",
"RECORDINGS": "AUFZEICHNUNGEN", "RECORDINGS": "AUFZEICHNUNGEN",
"NO_MODERATOR": "Nur der MODERATOR kann die Aufzeichnung starten" "NO_MODERATOR": "Nur der MODERATOR kann die Aufzeichnung starten",
"NO_TRACKS_PUBLISHED": "Teile Audio oder Video, um mit der Aufnahme zu beginnen."
}, },
"STREAMING": { "STREAMING": {
"TITLE": "Streaming", "TITLE": "Streaming",

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/en.json
View File

@ -55,7 +55,8 @@
"LEAVE": "Leave the room", "LEAVE": "Leave the room",
"PARTICIPANTS": "Participants", "PARTICIPANTS": "Participants",
"CHAT": "Chat", "CHAT": "Chat",
"ACTIVITIES": "Activities" "ACTIVITIES": "Activities",
"NO_TRACKS_PUBLISHED": "Share audio or video to start recording."
}, },
"STREAM": { "STREAM": {
"SETTINGS": "Settings", "SETTINGS": "Settings",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Are you sure you want to delete the recording?", "DELETE_QUESTION": "Are you sure you want to delete the recording?",
"DOWNLOAD": "Download", "DOWNLOAD": "Download",
"RECORDINGS": "RECORDINGS", "RECORDINGS": "RECORDINGS",
"NO_MODERATOR": "Only the MODERATOR can start the recording" "NO_MODERATOR": "Only the MODERATOR can start the recording",
"NO_TRACKS_PUBLISHED": "Share audio or video to start recording."
}, },
"STREAMING": { "STREAMING": {
"TITLE": "Streaming", "TITLE": "Streaming",

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
View File

@ -55,7 +55,8 @@
"LEAVE": "Salir de la sala", "LEAVE": "Salir de la sala",
"PARTICIPANTS": "Participantes", "PARTICIPANTS": "Participantes",
"CHAT": "Chat", "CHAT": "Chat",
"ACTIVITIES": "Actividades" "ACTIVITIES": "Actividades",
"NO_TRACKS_PUBLISHED": "Comparte audio o video para poder empezar a grabar."
}, },
"STREAM": { "STREAM": {
"SETTINGS": "Ajustes", "SETTINGS": "Ajustes",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "¿Estás seguro/a de que deseas borrar la grabación?", "DELETE_QUESTION": "¿Estás seguro/a de que deseas borrar la grabación?",
"DOWNLOAD": "Descargar", "DOWNLOAD": "Descargar",
"RECORDINGS": "GRABACIONES", "RECORDINGS": "GRABACIONES",
"NO_MODERATOR": "Sólo el MODERADOR puede iniciar la grabación" "NO_MODERATOR": "Sólo el MODERADOR puede iniciar la grabación",
"NO_TRACKS_PUBLISHED": "Comparte audio o video para poder empezar a grabar."
}, },
"STREAMING": { "STREAMING": {
"TITLE": "Streaming", "TITLE": "Streaming",

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/fr.json
View File

@ -55,7 +55,8 @@
"LEAVE": "Quitter la salle", "LEAVE": "Quitter la salle",
"PARTICIPANTS": "Participants", "PARTICIPANTS": "Participants",
"CHAT": "Chat", "CHAT": "Chat",
"ACTIVITES": "Activités" "ACTIVITES": "Activités",
"NO_TRACKS_PUBLISHED": "Partagez de l’audio ou de la vidéo pour commencer l’enregistrement."
}, },
"STREAM": { "STREAM": {
"SETTINGS": "Paramètres", "SETTINGS": "Paramètres",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Voulez-vous vraiment supprimer l'enregistrement ?", "DELETE_QUESTION": "Voulez-vous vraiment supprimer l'enregistrement ?",
"DOWNLOAD": "Télécharger", "DOWNLOAD": "Télécharger",
"RECORDINGS": "ENREGISTREMENTS", "RECORDINGS": "ENREGISTREMENTS",
"NO_MODERATOR": "Seul le MODERATEUR peut lancer l'enregistrement" "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."
}, },
"STREAMING": { "STREAMING": {
"TITLE": "Streaming", "TITLE": "Streaming",

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/hi.json
View File

@ -55,7 +55,8 @@
"LEAVE": "कमरा छोड़ें", "LEAVE": "कमरा छोड़ें",
"PARTICIPANTS": "सदस्य", "PARTICIPANTS": "सदस्य",
"CHAT": "बातचीत", "CHAT": "बातचीत",
"ACTIVITIES": "गतिविधियाँ" "ACTIVITIES": "गतिविधियाँ",
"NO_TRACKS_PUBLISHED": "रिकॉर्डिंग शुरू करने के लिए ऑडियो या वीडियो साझा करें।"
}, },
"STREAM": { "STREAM": {
"SETTINGS": "सेटिंग्स", "SETTINGS": "सेटिंग्स",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "क्या आप वाकई रिकॉर्डिंग हटाना चाहते हैं", "DELETE_QUESTION": "क्या आप वाकई रिकॉर्डिंग हटाना चाहते हैं",
"DOWNLOAD": "डाउनलोड", "DOWNLOAD": "डाउनलोड",
"RECORDINGS": "रिकॉर्डिंग", "RECORDINGS": "रिकॉर्डिंग",
"NO_MODERATOR": "केवल मॉडरेटर ही रिकॉर्डिंग शुरू कर सकता है" "NO_MODERATOR": "केवल मॉडरेटर ही रिकॉर्डिंग शुरू कर सकता है",
"NO_TRACKS_PUBLISHED": "रिकॉर्डिंग शुरू करने के लिए ऑडियो या वीडियो साझा करें।"
}, },
"STREAMING": { "STREAMING": {
"TITLE": "स्ट्रीमिंग", "TITLE": "स्ट्रीमिंग",

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/it.json
View File

@ -55,7 +55,8 @@
"LEAVE": "Abbandona la stanza", "LEAVE": "Abbandona la stanza",
"PARTICIPANTS": "Partecipanti", "PARTICIPANTS": "Partecipanti",
"CHAT": "Chat", "CHAT": "Chat",
"ACTIVITIES": "Attività" "ACTIVITIES": "Attività",
"NO_TRACKS_PUBLISHED": "Condividi audio o video per iniziare la registrazione."
}, },
"STREAM": { "STREAM": {
"SETTINGS": "Impostazioni", "SETTINGS": "Impostazioni",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Sei sicuro di voler eliminare la registrazione?", "DELETE_QUESTION": "Sei sicuro di voler eliminare la registrazione?",
"DOWNLOAD": "Scarica", "DOWNLOAD": "Scarica",
"RECORDINGS": "REGISTRAZIONI", "RECORDINGS": "REGISTRAZIONI",
"NO_MODERATOR": "Solo il MODERATORE può avviare la registrazione" "NO_MODERATOR": "Solo il MODERATORE può avviare la registrazione",
"NO_TRACKS_PUBLISHED": "Condividi audio o video per iniziare la registrazione."
}, },
"STREAMING": { "STREAMING": {
"TITLE": "Streaming", "TITLE": "Streaming",

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/ja.json
View File

@ -55,7 +55,8 @@
"LEAVE": "ルームを終了する", "LEAVE": "ルームを終了する",
"PARTICIPANTS": "参加者", "PARTICIPANTS": "参加者",
"CHAT": "チャット", "CHAT": "チャット",
"ACTIVITIES": "アクティビティ" "ACTIVITIES": "アクティビティ",
"NO_TRACKS_PUBLISHED": "録音を開始するには、音声または動画を共有してください。"
}, },
"STREAM": { "STREAM": {
"SETTINGS": "設定", "SETTINGS": "設定",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "録画を削除してもよろしいですか", "DELETE_QUESTION": "録画を削除してもよろしいですか",
"DOWNLOAD": "保存", "DOWNLOAD": "保存",
"RECORDINGS": "録画", "RECORDINGS": "録画",
"NO_MODERATOR": "録画を開始できるのは、モデレーターのみです" "NO_MODERATOR": "録画を開始できるのは、モデレーターのみです",
"NO_TRACKS_PUBLISHED": "録音を開始するには、音声または動画を共有してください。"
}, },
"STREAMING": { "STREAMING": {
"TITLE": "ストリーミング", "TITLE": "ストリーミング",

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/nl.json
View File

@ -55,7 +55,8 @@
"LEAVE": "Verlaat de kamer", "LEAVE": "Verlaat de kamer",
"PARTICIPANTS": "Deelnemers", "PARTICIPANTS": "Deelnemers",
"CHAT": "Chat", "CHAT": "Chat",
"ACTIVITIES": "Activiteiten" "ACTIVITIES": "Activiteiten",
"NO_TRACKS_PUBLISHED": "Deel audio of video om met opnemen te beginnen."
}, },
"STREAM": { "STREAM": {
"SETTINGS": "Instellingen", "SETTINGS": "Instellingen",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Weet je zeker dat je de opname wilt verwijderen?", "DELETE_QUESTION": "Weet je zeker dat je de opname wilt verwijderen?",
"DOWNLOAD": "Downloaden", "DOWNLOAD": "Downloaden",
"RECORDINGS": "OPNAME", "RECORDINGS": "OPNAME",
"NO_MODERATOR": "Alleen de MOEDERATOR kan de opname starten" "NO_MODERATOR": "Alleen de MOEDERATOR kan de opname starten",
"NO_TRACKS_PUBLISHED": "Deel audio of video om met opnemen te beginnen."
}, },
"STREAMING": { "STREAMING": {
"TITLE": "Streaming", "TITLE": "Streaming",

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/pt.json
View File

@ -55,7 +55,8 @@
"LEAVE": "Sair da sala", "LEAVE": "Sair da sala",
"PARTICIPANTS": "Participantes", "PARTICIPANTS": "Participantes",
"CHAT": "Chat", "CHAT": "Chat",
"ACTIVITIES": "Actividades" "ACTIVITIES": "Actividades",
"NO_TRACKS_PUBLISHED": "Compartilhe áudio ou vídeo para começar a gravar."
}, },
"STREAM": { "STREAM": {
"SETTINGS": "Configurações", "SETTINGS": "Configurações",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Tem certeza de que deseja excluir a gravação?", "DELETE_QUESTION": "Tem certeza de que deseja excluir a gravação?",
"DOWNLOAD": "Download", "DOWNLOAD": "Download",
"RECORDINGS": "GRAVAÇÕES", "RECORDINGS": "GRAVAÇÕES",
"NO_MODERATOR": "Só o MODERADOR pode iniciar a gravação" "NO_MODERATOR": "Só o MODERADOR pode iniciar a gravação",
"NO_TRACKS_PUBLISHED": "Compartilhe áudio ou vídeo para começar a gravar."
}, },
"STREAMING": { "STREAMING": {
"TITLE": "Streaming", "TITLE": "Streaming",

8
openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/openvidu/openvidu.service.ts
View File

@ -151,6 +151,14 @@ export class OpenViduService {
return this.room?.state === ConnectionState.Connected; return this.room?.state === ConnectionState.Connected;
} }
hasRoomTracksPublished(): boolean {
const { localParticipant, remoteParticipants } = this.getRoom();
const localTracks = localParticipant.getTrackPublications();
const remoteTracks = Array.from(remoteParticipants.values()).flatMap((p) => p.getTrackPublications());
return localTracks.length > 0 || remoteTracks.length > 0;
}
/** /**
* @internal * @internal
*/ */