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

View File

@ -72,6 +72,50 @@
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 {
color: var(--ov-text-surface-color);
}
@ -80,6 +124,11 @@
color: var(--ov-error-color);
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 {
font-size: 14px;
font-weight: bold;
@ -106,6 +155,11 @@
color: var(--ov-secondary-action-color);
}
.start-recording-button-container {
width: 100%;
display: inline-block;
}
#stop-recording-btn {
width: 100%;
background-color: var(--ov-error-color);

View File

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

View File

@ -120,7 +120,12 @@
*ngIf="!isMinimal && showRecordingButton"
mat-menu-item
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()"
>
<mat-icon color="warn">radio_button_checked</mat-icon>

View File

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

View File

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

View File

@ -55,7 +55,8 @@
"LEAVE": "Die Raum verlassen",
"PARTICIPANTS": "Teilnehmer",
"CHAT": "Chat",
"ACTIVITIES": "Aktivitäten"
"ACTIVITIES": "Aktivitäten",
"NO_TRACKS_PUBLISHED": "Teile Audio oder Video, um mit der Aufnahme zu beginnen."
},
"STREAM": {
"SETTINGS": "Einstellungen",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Möchten Sie die Aufzeichnung wirklich löschen?",
"DOWNLOAD": "Download",
"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": {
"TITLE": "Streaming",

View File

@ -55,7 +55,8 @@
"LEAVE": "Leave the room",
"PARTICIPANTS": "Participants",
"CHAT": "Chat",
"ACTIVITIES": "Activities"
"ACTIVITIES": "Activities",
"NO_TRACKS_PUBLISHED": "Share audio or video to start recording."
},
"STREAM": {
"SETTINGS": "Settings",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Are you sure you want to delete the recording?",
"DOWNLOAD": "Download",
"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": {
"TITLE": "Streaming",

View File

@ -55,7 +55,8 @@
"LEAVE": "Salir de la sala",
"PARTICIPANTS": "Participantes",
"CHAT": "Chat",
"ACTIVITIES": "Actividades"
"ACTIVITIES": "Actividades",
"NO_TRACKS_PUBLISHED": "Comparte audio o video para poder empezar a grabar."
},
"STREAM": {
"SETTINGS": "Ajustes",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "¿Estás seguro/a de que deseas borrar la grabación?",
"DOWNLOAD": "Descargar",
"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": {
"TITLE": "Streaming",

View File

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

View File

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

View File

@ -55,7 +55,8 @@
"LEAVE": "Abbandona la stanza",
"PARTICIPANTS": "Partecipanti",
"CHAT": "Chat",
"ACTIVITIES": "Attività"
"ACTIVITIES": "Attività",
"NO_TRACKS_PUBLISHED": "Condividi audio o video per iniziare la registrazione."
},
"STREAM": {
"SETTINGS": "Impostazioni",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Sei sicuro di voler eliminare la registrazione?",
"DOWNLOAD": "Scarica",
"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": {
"TITLE": "Streaming",

View File

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

View File

@ -55,7 +55,8 @@
"LEAVE": "Verlaat de kamer",
"PARTICIPANTS": "Deelnemers",
"CHAT": "Chat",
"ACTIVITIES": "Activiteiten"
"ACTIVITIES": "Activiteiten",
"NO_TRACKS_PUBLISHED": "Deel audio of video om met opnemen te beginnen."
},
"STREAM": {
"SETTINGS": "Instellingen",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Weet je zeker dat je de opname wilt verwijderen?",
"DOWNLOAD": "Downloaden",
"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": {
"TITLE": "Streaming",

View File

@ -55,7 +55,8 @@
"LEAVE": "Sair da sala",
"PARTICIPANTS": "Participantes",
"CHAT": "Chat",
"ACTIVITIES": "Actividades"
"ACTIVITIES": "Actividades",
"NO_TRACKS_PUBLISHED": "Compartilhe áudio ou vídeo para começar a gravar."
},
"STREAM": {
"SETTINGS": "Configurações",
@ -124,7 +125,8 @@
"DELETE_QUESTION": "Tem certeza de que deseja excluir a gravação?",
"DOWNLOAD": "Download",
"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": {
"TITLE": "Streaming",

View File

@ -151,6 +151,14 @@ export class OpenViduService {
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
*/