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

openvidu-components: Updated recording panel

pull/739/head
csantosm 2022-06-13 14:04:23 +02:00
parent b133313e44
commit cf77883982
3 changed files with 63 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,13 +28,13 @@
height: 18px;
}
.started {
background-color: #3b7430 !important;
color: var(--ov-text-color);
}
.activity-icon.started, .failed {
.activity-icon.started,
.failed {
background-color: var(--ov-warn-color) !important;
color: var(--ov-text-color);
}
@ -54,12 +54,12 @@
.panel-body-container > .content {
align-items: stretch;
justify-content: center;
display: flex;
flex-direction: column;
box-flex: 1;
flex-grow: 1;
text-align: center;
justify-content: center;
display: flex;
flex-direction: column;
box-flex: 1;
flex-grow: 1;
text-align: center;
}
.recording-error {
@ -87,11 +87,13 @@
}
#start-recording-btn {
width: 100%;
background-color: var(--ov-tertiary-color);
color: var(--ov-text-color);
}
#stop-recording-btn {
width: 100%;
background-color: var(--ov-warn-color);
color: var(--ov-text-color);
}
@ -100,6 +102,11 @@
color: var(--ov-warn-color);
}
#reset-recording-status-btn {
width: 100%;
background-color: var(--ov-light-color);
}
mat-expansion-panel {
margin: 0px 0px 15px 0px;
}
@ -108,5 +115,7 @@ mat-expansion-panel {
animation: blinker 1.5s linear infinite !important;
}
@keyframes blinker {
50% { opacity: 0.4; }
50% {
opacity: 0.4;
}
}

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

@ -50,13 +50,13 @@
<!-- Recording button -->
<div *ngIf="isSessionCreator" class="item recording-action-buttons">
<button *ngIf="liveRecording" mat-stroked-button id="stop-recording-btn" (click)="stopRecording()">
<button *ngIf="recordingAlive" mat-flat-button id="stop-recording-btn" (click)="stopRecording()">
<span>{{ 'TOOLBAR.STOP_RECORDING' | translate }}</span>
</button>
<button
*ngIf="recordingStatus === recStatusEnum.STOPPED"
mat-stroked-button
mat-flat-button
id="start-recording-btn"
(click)="startRecording()"
>
@ -67,6 +67,16 @@
<span *ngIf="recordingStatus === recStatusEnum.STOPPING">{{ 'PANEL.RECORDING.STOPPING' | translate }} </span>
<span *ngIf="recordingStatus === recStatusEnum.FAILED">Message: </span>
<span *ngIf="recordingStatus === recStatusEnum.FAILED" class="recording-error">{{ recordingError | json }} </span>
<div>
<button
*ngIf="recordingStatus === recStatusEnum.FAILED"
mat-flat-button
id="reset-recording-status-btn"
(click)="resetStatus()"
>
<span>{{ 'PANEL.RECORDING.RESTORE' | translate }}</span>
</button>
</div>
</div>
<!-- Message for no Moderators-->
@ -89,10 +99,20 @@
</div>
<div mat-line class="recording-date">{{ recording.createdAt | date: 'HH:mm - dd/MM/yyyy' }}</div>
<button mat-icon-button (click)="play(recording.id)" id="play-recording-btn" matTooltip="{{ 'PANEL.RECORDING.PLAY' | translate }}">
<button
mat-icon-button
(click)="play(recording.id)"
id="play-recording-btn"
matTooltip="{{ 'PANEL.RECORDING.PLAY' | translate }}"
>
<mat-icon>play_arrow</mat-icon>
</button>
<button mat-icon-button (click)="download(recording.id)" id="download-recording-btn" matTooltip="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}">
<button
mat-icon-button
(click)="download(recording.id)"
id="download-recording-btn"
matTooltip="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
>
<mat-icon>download</mat-icon>
</button>

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

@ -51,6 +51,7 @@ export class RecordingActivityComponent implements OnInit {
* @internal
*/
recordingStatus: RecordingStatus = RecordingStatus.STOPPED;
oldRecordingStatus: RecordingStatus;
/**
* @internal
*/
@ -69,7 +70,7 @@ export class RecordingActivityComponent implements OnInit {
/**
* @internal
*/
liveRecording: RecordingInfo;
recordingAlive: boolean = false;
/**
* @internal
*/
@ -117,7 +118,6 @@ export class RecordingActivityComponent implements OnInit {
* @internal
*/
panelOpened() {
//TODO emit event
this.opened = true;
}
@ -125,10 +125,22 @@ export class RecordingActivityComponent implements OnInit {
* @internal
*/
panelClosed() {
//TODO emit event
this.opened = false;
}
/**
* @internal
*/
resetStatus() {
let status: RecordingStatus = this.oldRecordingStatus;
if (this.oldRecordingStatus === RecordingStatus.STARTING) {
status = RecordingStatus.STOPPED;
} else if (this.oldRecordingStatus === RecordingStatus.STOPPING) {
status = RecordingStatus.STARTED;
}
this.recordingService.updateStatus(status);
}
/**
* @internal
*/
@ -168,18 +180,18 @@ export class RecordingActivityComponent implements OnInit {
*/
play(recordingId: string) {
this.onPlayRecordingClicked.emit(recordingId);
// this.recordingService.playRecording2(this.recordingsList.find(rec => rec.id === recordingId).url)
}
private subscribeToRecordingStatus() {
this.recordingStatusSubscription = this.recordingService.recordingStatusObs.subscribe(
(ev: { info: RecordingInfo; time?: Date }) => {
if (ev?.info) {
this.recordingStatus = ev.info.status;
if (ev.info.status === RecordingStatus.STARTED) {
this.liveRecording = ev.info;
} else {
this.liveRecording = null;
if (this.recordingStatus !== RecordingStatus.FAILED) {
this.oldRecordingStatus = this.recordingStatus;
}
this.recordingStatus = ev.info.status;
this.recordingAlive = ev.info.status === RecordingStatus.STARTED;
}
this.cd.markForCheck();
}