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 59e2b913..0012366e 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 @@ -1,4 +1,9 @@ - + @@ -42,98 +47,125 @@
- -
+ +
-

{{ 'PANEL.RECORDING.CONTENT_TITLE' | translate }}

- {{ 'PANEL.RECORDING.CONTENT_SUBTITLE' | translate }} + +
+

{{ 'PANEL.RECORDING.CONTENT_TITLE' | translate }}

+ {{ 'PANEL.RECORDING.CONTENT_SUBTITLE' | translate }} +
- +
+ - - - {{ 'PANEL.RECORDING.STARTING' | translate }} - {{ 'PANEL.RECORDING.STOPPING' | translate }} - Message: - {{ recordingError }} -
+ + +
+ + {{ 'PANEL.RECORDING.STARTING' | translate }} + + + + {{ 'PANEL.RECORDING.STOPPING' | translate }} + + +
+ Message: {{ recordingError }} + +
+
-
- +
+ video_file + +
{{ recording.filename }}
-
- {{ 'PANEL.RECORDING.IN_PROGRESS' | translate }} + + +
+ + {{ 'PANEL.RECORDING.IN_PROGRESS' | translate }} + + + {{ recording.duration | duration }} + | {{ recording.size / 1024 / 1024 | number: '1.1-2' }} MBs +
-
- {{ recording.duration | duration }} - | {{ recording.size / 1024 / 1024 | number: '1.1-2' }} MBs -
+
{{ recording.startedAt | date: 'HH:mm - dd/MM/yyyy' }}
-
+ +
+ diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss index c0238306..5d31d187 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss @@ -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); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts index 4761470d..69fc0be1 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts @@ -134,6 +134,13 @@ export class RecordingActivityComponent implements OnInit { if (this.recordingStatusSubscription) this.recordingStatusSubscription.unsubscribe(); } + /** + * @internal + */ + get hasRoomTracksPublished(): boolean { + return this.openviduService.hasRoomTracksPublished(); + } + /** * @internal */ 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 372ee944..4cbd1d6e 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 @@ -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()" > radio_button_checked 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 66bbf102..360a9cea 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 @@ -465,6 +465,13 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { this.cdkOverlayService.setSelector('body'); } + /** + * @internal + */ + get hasRoomTracksPublished(): boolean { + return this.openviduService.hasRoomTracksPublished(); + } + /** * @ignore */ 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 50d00b4d..bd7db1b2 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 @@ -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": "直播", 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 b0aa1acc..6c6719aa 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 @@ -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", 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 fd002a49..f0f6c0c9 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 @@ -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", 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 a86e55ca..35ed1d8f 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 @@ -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", 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 ddad7040..d7922523 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 @@ -55,7 +55,8 @@ "LEAVE": "Quitter la salle", "PARTICIPANTS": "Participants", "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": { "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 l’audio ou de la vidéo pour commencer l’enregistrement." }, "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 beedc820..8b962e56 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 @@ -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": "स्ट्रीमिंग", 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 ed509917..b388b2ae 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 @@ -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", 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 3a8e5b87..9c1b0b9a 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 @@ -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": "ストリーミング", 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 a8005ea5..f54c0842 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 @@ -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", 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 9c173609..57c4dba4 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 @@ -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", diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/openvidu/openvidu.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/openvidu/openvidu.service.ts index 0405f86e..a350ab74 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/openvidu/openvidu.service.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/openvidu/openvidu.service.ts @@ -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 */