openvidu-components: Renamed streaming by broadcasting

pull/780/head
Carlos Santos 2023-02-17 17:03:15 +01:00
parent d4be677613
commit 10bcc87ac5
35 changed files with 606 additions and 615 deletions

View File

@ -884,7 +884,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.clickOn('#ovToolbar-checkbox'); await utils.clickOn('#ovToolbar-checkbox');
await utils.clickOn('#streamingButton-checkbox'); await utils.clickOn('#broadcastingButton-checkbox');
await utils.clickOn('#apply-btn'); await utils.clickOn('#apply-btn');
@ -897,7 +897,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.waitForElement('.mat-menu-content'); await utils.waitForElement('.mat-menu-content');
// Checking if fullscreen button is not present // Checking if fullscreen button is not present
expect(await utils.isPresent('#streaming-btn')).to.be.false; expect(await utils.isPresent('#broadcasting-btn')).to.be.false;
}); });
it('should HIDE the LEAVE button', async () => { it('should HIDE the LEAVE button', async () => {
@ -1033,7 +1033,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.clickOn('#ovActivitiesPanel-checkbox'); await utils.clickOn('#ovActivitiesPanel-checkbox');
await utils.clickOn('#streamingActivity-checkbox'); await utils.clickOn('#broadcastingActivity-checkbox');
await utils.clickOn('#apply-btn'); await utils.clickOn('#apply-btn');
@ -1047,7 +1047,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.waitForElement('ov-recording-activity'); await utils.waitForElement('ov-recording-activity');
expect(await utils.isPresent('ov-streaming-activity')).to.be.false; expect(await utils.isPresent('ov-broadcasting-activity')).to.be.false;
}); });
it('should SHOW STREAMING ERROR', async () => { it('should SHOW STREAMING ERROR', async () => {
@ -1055,7 +1055,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.clickOn('#ovActivitiesPanel-checkbox'); await utils.clickOn('#ovActivitiesPanel-checkbox');
await utils.clickOn('#streamingError-checkbox'); await utils.clickOn('#broadcastingError-checkbox');
await utils.clickOn('#apply-btn'); await utils.clickOn('#apply-btn');
@ -1067,13 +1067,13 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => {
await utils.waitForElement('#custom-activities-panel'); await utils.waitForElement('#custom-activities-panel');
const status = await utils.waitForElement('#streaming-status'); const status = await utils.waitForElement('#broadcasting-status');
expect(await status.getAttribute('innerText')).equals('FAILED'); expect(await status.getAttribute('innerText')).equals('FAILED');
await utils.clickOn('#streaming-activity'); await utils.clickOn('#broadcasting-activity');
await browser.sleep(500); await browser.sleep(500);
const error = await utils.waitForElement('#streaming-error'); const error = await utils.waitForElement('#broadcasting-error');
expect(await error.getAttribute('innerText')).equals('TEST_ERROR'); expect(await error.getAttribute('innerText')).equals('TEST_ERROR');
}); });
}); });

View File

@ -58,10 +58,10 @@ $(document).ready(() => {
url.searchParams.get('toolbarRecordingButton') === null ? true : url.searchParams.get('toolbarRecordingButton') === 'true'; url.searchParams.get('toolbarRecordingButton') === null ? true : url.searchParams.get('toolbarRecordingButton') === 'true';
FULLSCREEN_BUTTON = url.searchParams.get('fullscreenBtn') === null ? true : url.searchParams.get('fullscreenBtn') === 'true'; FULLSCREEN_BUTTON = url.searchParams.get('fullscreenBtn') === null ? true : url.searchParams.get('fullscreenBtn') === 'true';
STREAMING_BUTTON = STREAMING_BUTTON =
url.searchParams.get('toolbarStreamingButton') === null ? true : url.searchParams.get('toolbarStreamingButton') === 'true'; url.searchParams.get('toolbarBroadcastingButton') === null ? true : url.searchParams.get('toolbarBroadcastingButton') === 'true';
if (url.searchParams.get('streamingError') !== null) { if (url.searchParams.get('broadcastingError') !== null) {
STREAMING_ERROR = url.searchParams.get('streamingError'); STREAMING_ERROR = url.searchParams.get('broadcastingError');
} }
TOOLBAR_SETTINGS_BUTTON = TOOLBAR_SETTINGS_BUTTON =
@ -75,9 +75,9 @@ $(document).ready(() => {
PARTICIPANTS_PANEL_BUTTON = PARTICIPANTS_PANEL_BUTTON =
url.searchParams.get('participantsPanelBtn') === null ? true : url.searchParams.get('participantsPanelBtn') === 'true'; url.searchParams.get('participantsPanelBtn') === null ? true : url.searchParams.get('participantsPanelBtn') === 'true';
ACTIVITIES_STREAMING_ACTIVITY = ACTIVITIES_STREAMING_ACTIVITY =
url.searchParams.get('activitiesPanelStreamingActivity') === null url.searchParams.get('activitiesPanelBroadcastingActivity') === null
? true ? true
: url.searchParams.get('activitiesPanelStreamingActivity') === 'true'; : url.searchParams.get('activitiesPanelBroadcastingActivity') === 'true';
ACTIVITIES_RECORDING_ACTIVITY = ACTIVITIES_RECORDING_ACTIVITY =
url.searchParams.get('activitiesPanelRecordingActivity') === null url.searchParams.get('activitiesPanelRecordingActivity') === null
? true ? true
@ -127,8 +127,8 @@ $(document).ready(() => {
// await stopRecording(RECORDING_ID); // await stopRecording(RECORDING_ID);
// }); // });
webComponent.addEventListener('onToolbarStopStreamingClicked', async (event) => { webComponent.addEventListener('onToolbarStopBroadcastingClicked', async (event) => {
appendElement('onToolbarStopStreamingClicked'); appendElement('onToolbarStopBroadcastingClicked');
}); });
webComponent.addEventListener('onActivitiesPanelStartRecordingClicked', async (event) => { webComponent.addEventListener('onActivitiesPanelStartRecordingClicked', async (event) => {
@ -146,12 +146,12 @@ $(document).ready(() => {
appendElement('onActivitiesPanelDeleteRecordingClicked'); appendElement('onActivitiesPanelDeleteRecordingClicked');
); );
webComponent.addEventListener('onActivitiesPanelStartStreamingClicked', async (event) => { webComponent.addEventListener('onActivitiesPanelStartBroadcastingClicked', async (event) => {
appendElement('onActivitiesPanelStartStreamingClicked'); appendElement('onActivitiesPanelStartBroadcastingClicked');
}); });
webComponent.addEventListener('onActivitiesPanelStopStreamingClicked', async (event) => { webComponent.addEventListener('onActivitiesPanelStopBroadcastingClicked', async (event) => {
appendElement('onActivitiesPanelStopStreamingClicked'); appendElement('onActivitiesPanelStopBroadcastingClicked');
}); });
webComponent.addEventListener('onSessionCreated', (event) => { webComponent.addEventListener('onSessionCreated', (event) => {
@ -217,7 +217,7 @@ async function joinSession(sessionName, participantName) {
webComponent.toolbarCaptionsButton = CAPTIONS_BUTTON; webComponent.toolbarCaptionsButton = CAPTIONS_BUTTON;
webComponent.toolbarLeaveButton = LEAVE_BUTTON; webComponent.toolbarLeaveButton = LEAVE_BUTTON;
webComponent.toolbarRecordingButton = RECORDING_BUTTON; webComponent.toolbarRecordingButton = RECORDING_BUTTON;
webComponent.toolbarStreamingButton = STREAMING_BUTTON; webComponent.toolbarBroadcastingButton = STREAMING_BUTTON;
webComponent.toolbarActivitiesPanelButton = ACTIVITIES_PANEL_BUTTON; webComponent.toolbarActivitiesPanelButton = ACTIVITIES_PANEL_BUTTON;
webComponent.toolbarChatPanelButton = CHAT_PANEL_BUTTON; webComponent.toolbarChatPanelButton = CHAT_PANEL_BUTTON;
webComponent.toolbarParticipantsPanelButton = PARTICIPANTS_PANEL_BUTTON; webComponent.toolbarParticipantsPanelButton = PARTICIPANTS_PANEL_BUTTON;
@ -230,10 +230,10 @@ async function joinSession(sessionName, participantName) {
webComponent.recordingActivityRecordingsList = [{ status: 'ready' }]; webComponent.recordingActivityRecordingsList = [{ status: 'ready' }];
webComponent.activitiesPanelRecordingActivity = ACTIVITIES_RECORDING_ACTIVITY; webComponent.activitiesPanelRecordingActivity = ACTIVITIES_RECORDING_ACTIVITY;
webComponent.activitiesPanelStreamingActivity = ACTIVITIES_STREAMING_ACTIVITY; webComponent.activitiesPanelBroadcastingActivity = ACTIVITIES_STREAMING_ACTIVITY;
webComponent.recordingActivityRecordingError = RECORDING_ERROR; webComponent.recordingActivityRecordingError = RECORDING_ERROR;
webComponent.streamingActivityStreamingError = {message: STREAMING_ERROR, rtmpAvailable: true}; webComponent.broadcastingActivityBroadcastingError = {message: STREAMING_ERROR, broadcastAvailable: true};
webComponent.participantName = participantName; webComponent.participantName = participantName;
webComponent.tokens = tokens; webComponent.tokens = tokens;

View File

@ -308,7 +308,7 @@ describe('Testing API Directives', () => {
}); });
it('should HIDE the TOOLBAR STREAMING button', async () => { it('should HIDE the TOOLBAR STREAMING button', async () => {
await browser.get(`${url}&prejoin=false&toolbarStreamingButton=false`); await browser.get(`${url}&prejoin=false&toolbarBroadcastingButton=false`);
await utils.checkSessionIsPresent(); await utils.checkSessionIsPresent();
@ -324,8 +324,8 @@ describe('Testing API Directives', () => {
await utils.waitForElement('.mat-menu-content'); await utils.waitForElement('.mat-menu-content');
expect(await utils.isPresent('.mat-menu-content')).to.be.true; expect(await utils.isPresent('.mat-menu-content')).to.be.true;
// Checking if streaming button is not present // Checking if broadcasting button is not present
expect(await utils.isPresent('#streaming-btn')).to.be.false; expect(await utils.isPresent('#broadcasting-btn')).to.be.false;
}); });
it('should HIDE the TOOLBAR SETTINGS button', async () => { it('should HIDE the TOOLBAR SETTINGS button', async () => {
@ -572,7 +572,7 @@ describe('Testing API Directives', () => {
it('should SHOW a STREAMING ERROR in activities panel', async () => { it('should SHOW a STREAMING ERROR in activities panel', async () => {
let element; let element;
const fixedUrl = `${url}&prejoin=false&streamingError=TEST_ERROR`; const fixedUrl = `${url}&prejoin=false&broadcastingError=TEST_ERROR`;
await browser.get(fixedUrl); await browser.get(fixedUrl);
await utils.checkSessionIsPresent(); await utils.checkSessionIsPresent();
@ -587,26 +587,26 @@ describe('Testing API Directives', () => {
await utils.waitForElement('#default-activities-panel'); await utils.waitForElement('#default-activities-panel');
expect(await utils.isPresent('#default-activities-panel')).to.be.true; expect(await utils.isPresent('#default-activities-panel')).to.be.true;
// Checking if streaming activity exists // Checking if broadcasting activity exists
await utils.waitForElement('#activities-container'); await utils.waitForElement('#activities-container');
await utils.waitForElement('.activities-body-container'); await utils.waitForElement('.activities-body-container');
await utils.waitForElement('ov-streaming-activity'); await utils.waitForElement('ov-broadcasting-activity');
expect(await utils.isPresent('ov-streaming-activity')).to.be.true; expect(await utils.isPresent('ov-broadcasting-activity')).to.be.true;
const status = await utils.waitForElement('#streaming-status'); const status = await utils.waitForElement('#broadcasting-status');
expect(await status.getAttribute('innerText')).equals('FAILED'); expect(await status.getAttribute('innerText')).equals('FAILED');
// Open streaming // Open broadcasting
await browser.sleep(1000); await browser.sleep(1000);
await utils.clickOn('ov-streaming-activity'); await utils.clickOn('ov-broadcasting-activity');
element = await utils.waitForElement('#streaming-error'); element = await utils.waitForElement('#broadcasting-error');
expect(await element.getAttribute('innerText')).equal('TEST_ERROR'); expect(await element.getAttribute('innerText')).equal('TEST_ERROR');
}); });
it('should HIDE the STREAMING ACTIVITY in activities panel', async () => { it('should HIDE the STREAMING ACTIVITY in activities panel', async () => {
await browser.get(`${url}&prejoin=false&activitiesPanelStreamingActivity=false`); await browser.get(`${url}&prejoin=false&activitiesPanelBroadcastingActivity=false`);
await utils.checkSessionIsPresent(); await utils.checkSessionIsPresent();
@ -624,7 +624,7 @@ describe('Testing API Directives', () => {
// Checking if recording activity exists // Checking if recording activity exists
await utils.waitForElement('.activities-body-container'); await utils.waitForElement('.activities-body-container');
expect(await utils.isPresent('ov-streaming-activity')).to.be.false; expect(await utils.isPresent('ov-broadcasting-activity')).to.be.false;
}); });
}); });
@ -831,7 +831,7 @@ describe('Testing videoconference EVENTS', () => {
}); });
// TODO: it needs an OpenVidu PRO // TODO: it needs an OpenVidu PRO
// it('should receive the onToolbarStopStreamingClicked event', async () => { // it('should receive the onToolbarStopBroadcastingClicked event', async () => {
// await browser.get(`${url}&prejoin=false`); // await browser.get(`${url}&prejoin=false`);
// await utils.checkSessionIsPresent(); // await utils.checkSessionIsPresent();
@ -846,18 +846,18 @@ describe('Testing videoconference EVENTS', () => {
// await utils.waitForElement('.mat-menu-content'); // await utils.waitForElement('.mat-menu-content');
// await utils.waitForElement('#streaming-btn'); // await utils.waitForElement('#broadcasting-btn');
// await utils.clickOn('#streaming-btn'); // await utils.clickOn('#broadcasting-btn');
// await browser.sleep(500); // await browser.sleep(500);
// await utils.waitForElement('.sidenav-menu'); // await utils.waitForElement('.sidenav-menu');
// await utils.waitForElement('#activities-container'); // await utils.waitForElement('#activities-container');
// await utils.waitForElement('#streaming-url-input'); // await utils.waitForElement('#broadcasting-url-input');
// const input = await utils.waitForElement('#rtmp-url-input'); // const input = await utils.waitForElement('#broadcast-url-input');
// await input.sendKeys('RTMPurl'); // await input.sendKeys('BroadcastUrl');
// await utils.clickOn('#streaming-btn'); // await utils.clickOn('#broadcasting-btn');
// // Open more options menu // // Open more options menu
// await utils.waitForElement('#more-options-btn'); // await utils.waitForElement('#more-options-btn');
@ -868,12 +868,12 @@ describe('Testing videoconference EVENTS', () => {
// await utils.waitForElement('.mat-menu-content'); // await utils.waitForElement('.mat-menu-content');
// await utils.waitForElement('#streaming-btn'); // await utils.waitForElement('#broadcasting-btn');
// await utils.clickOn('#streaming-btn'); // await utils.clickOn('#broadcasting-btn');
// // Checking if onToolbarStopStreamingClicked has been received // // Checking if onToolbarStopBroadcastingClicked has been received
// await utils.waitForElement('#onToolbarStopStreamingClicked'); // await utils.waitForElement('#onToolbarStopBroadcastingClicked');
// expect(await utils.isPresent('#onToolbarStopStreamingClicked')).to.be.true; // expect(await utils.isPresent('#onToolbarStopBroadcastingClicked')).to.be.true;
// }); // });
it('should receive the onActivitiesPanelStartRecordingClicked event', async () => { it('should receive the onActivitiesPanelStartRecordingClicked event', async () => {
@ -941,7 +941,7 @@ describe('Testing videoconference EVENTS', () => {
expect(await utils.isPresent('#onActivitiesPanelDeleteRecordingClicked')).to.be.true; expect(await utils.isPresent('#onActivitiesPanelDeleteRecordingClicked')).to.be.true;
}); });
it('should receive the onActivitiesPanelStartStreaming event', async () => { it('should receive the onActivitiesPanelStartBroadcasting event', async () => {
await browser.get(`${url}&prejoin=false`); await browser.get(`${url}&prejoin=false`);
await utils.checkSessionIsPresent(); await utils.checkSessionIsPresent();
@ -956,35 +956,35 @@ describe('Testing videoconference EVENTS', () => {
await utils.waitForElement('#activities-container'); await utils.waitForElement('#activities-container');
expect(await utils.isPresent('#activities-container')).to.be.true; expect(await utils.isPresent('#activities-container')).to.be.true;
await utils.waitForElement('#streaming-activity'); await utils.waitForElement('#broadcasting-activity');
await utils.clickOn('#streaming-activity'); await utils.clickOn('#broadcasting-activity');
await browser.sleep(1000); await browser.sleep(1000);
const button = await utils.waitForElement('#streaming-btn'); const button = await utils.waitForElement('#broadcasting-btn');
expect(await button.isEnabled()).to.be.false; expect(await button.isEnabled()).to.be.false;
const input = await utils.waitForElement('#rtmp-url-input'); const input = await utils.waitForElement('#broadcast-url-input');
await input.sendKeys('RTMPurl'); await input.sendKeys('BroadcastUrl');
await utils.clickOn('#streaming-btn'); await utils.clickOn('#broadcasting-btn');
// Checking if onActivitiesPanelStartStreamingClicked has been received // Checking if onActivitiesPanelStartBroadcastingClicked has been received
await utils.waitForElement('#onActivitiesPanelStartStreamingClicked'); await utils.waitForElement('#onActivitiesPanelStartBroadcastingClicked');
expect(await utils.isPresent('#onActivitiesPanelStartStreamingClicked')).to.be.true; expect(await utils.isPresent('#onActivitiesPanelStartBroadcastingClicked')).to.be.true;
// TODO: it needs an OpenVidu PRO (onActivitiesPanelStopStreamingClicked event) // TODO: it needs an OpenVidu PRO (onActivitiesPanelStopBroadcastingClicked event)
// expect(await utils.isPresent('#streaming-tag')).to.be.true; // expect(await utils.isPresent('#broadcasting-tag')).to.be.true;
// await utils.clickOn('#stop-streaming-btn'); // await utils.clickOn('#stop-broadcasting-btn');
// // Checking if onActivitiesPanelStopStreamingClicked has been received // // Checking if onActivitiesPanelStopBroadcastingClicked has been received
// await utils.waitForElement('#onActivitiesPanelStopStreamingClicked'); // await utils.waitForElement('#onActivitiesPanelStopBroadcastingClicked');
// expect(await utils.isPresent('#onActivitiesPanelStopStreamingClicked')).to.be.true; // expect(await utils.isPresent('#onActivitiesPanelStopBroadcastingClicked')).to.be.true;
// expect(await utils.isPresent('#streaming-tag')).to.be.false; // expect(await utils.isPresent('#broadcasting-tag')).to.be.false;
}); });
it('should receive the onSessionCreated event', async () => { it('should receive the onSessionCreated event', async () => {

View File

@ -16,13 +16,13 @@
(onStopRecordingClicked)="_onStopRecordingClicked()" (onStopRecordingClicked)="_onStopRecordingClicked()"
(onDeleteRecordingClicked)="_onDeleteRecordingClicked($event)" (onDeleteRecordingClicked)="_onDeleteRecordingClicked($event)"
></ov-recording-activity> ></ov-recording-activity>
<ov-streaming-activity <ov-broadcasting-activity
*ngIf="showStreamingActivity" *ngIf="showBroadcastingActivity"
id="streaming-activity" id="broadcasting-activity"
[expanded]="expandedPanel === 'streaming'" [expanded]="expandedPanel === 'broadcasting'"
(onStartStreamingClicked)="_onStartStreamingClicked($event)" (onStartBroadcastingClicked)="_onStartBroadcastingClicked($event)"
(onStopStreamingClicked)="_onStopStreamingClicked()" (onStopBroadcastingClicked)="_onStopBroadcastingClicked()"
></ov-streaming-activity> ></ov-broadcasting-activity>
</mat-accordion> </mat-accordion>
</div> </div>
</div> </div>

View File

@ -30,16 +30,16 @@ export class ActivitiesPanelComponent implements OnInit {
@Output() onDeleteRecordingClicked: EventEmitter<string> = new EventEmitter<string>(); @Output() onDeleteRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
/** /**
* Provides event notifications that fire when start streaming button has been clicked. * Provides event notifications that fire when start broadcasting button has been clicked.
* The streaming should be started using the REST API. * The broadcasting should be started using the REST API.
*/ */
@Output() onStartStreamingClicked: EventEmitter<string> = new EventEmitter<string>(); @Output() onStartBroadcastingClicked: EventEmitter<string> = new EventEmitter<string>();
/** /**
* Provides event notifications that fire when stop streaming button has been clicked. * Provides event notifications that fire when stop broadcasting button has been clicked.
* The streaming should be stopped using the REST API. * The broadcasting should be stopped using the REST API.
*/ */
@Output() onStopStreamingClicked: EventEmitter<void> = new EventEmitter<void>(); @Output() onStopBroadcastingClicked: EventEmitter<void> = new EventEmitter<void>();
/** /**
* @internal * @internal
@ -49,10 +49,10 @@ export class ActivitiesPanelComponent implements OnInit {
* @internal * @internal
*/ */
showRecordingActivity: boolean = true; showRecordingActivity: boolean = true;
showStreamingActivity: boolean = true; showBroadcastingActivity: boolean = true;
private panelSubscription: Subscription; private panelSubscription: Subscription;
private recordingActivitySub: Subscription; private recordingActivitySub: Subscription;
private streamingActivitySub: Subscription; private broadcastingActivitySub: Subscription;
/** /**
* @internal * @internal
@ -73,7 +73,7 @@ export class ActivitiesPanelComponent implements OnInit {
ngOnDestroy() { ngOnDestroy() {
if (this.panelSubscription) this.panelSubscription.unsubscribe(); if (this.panelSubscription) this.panelSubscription.unsubscribe();
if (this.recordingActivitySub) this.recordingActivitySub.unsubscribe(); if (this.recordingActivitySub) this.recordingActivitySub.unsubscribe();
if (this.streamingActivitySub) this.streamingActivitySub.unsubscribe(); if (this.broadcastingActivitySub) this.broadcastingActivitySub.unsubscribe();
} }
/** /**
@ -104,12 +104,12 @@ export class ActivitiesPanelComponent implements OnInit {
this.onDeleteRecordingClicked.emit(recordingId); this.onDeleteRecordingClicked.emit(recordingId);
} }
_onStartStreamingClicked(rtmpUrl: string) { _onStartBroadcastingClicked(broadcastUrl: string) {
this.onStartStreamingClicked.emit(rtmpUrl); this.onStartBroadcastingClicked.emit(broadcastUrl);
} }
_onStopStreamingClicked() { _onStopBroadcastingClicked() {
this.onStopStreamingClicked.emit(); this.onStopBroadcastingClicked.emit();
} }
private subscribeToPanelToggling() { private subscribeToPanelToggling() {
@ -126,8 +126,8 @@ export class ActivitiesPanelComponent implements OnInit {
this.cd.markForCheck(); this.cd.markForCheck();
}); });
this.streamingActivitySub = this.libService.streamingActivity.subscribe((value: boolean) => { this.broadcastingActivitySub = this.libService.broadcastingActivity.subscribe((value: boolean) => {
this.showStreamingActivity = value; this.showBroadcastingActivity = value;
this.cd.markForCheck(); this.cd.markForCheck();
}); });
} }

View File

@ -1,4 +1,4 @@
#streaming-status { #broadcasting-status {
color: var(--ov-text-color); color: var(--ov-text-color);
display: inline; display: inline;
padding: 3px; padding: 3px;
@ -16,18 +16,18 @@
font-size: 14px; font-size: 14px;
} }
#streaming-icon { #broadcasting-icon {
color: #5903ca; color: #5903ca;
} }
.streaming-duration { .broadcasting-duration {
background-color: var(--ov-light-color); background-color: var(--ov-light-color);
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
font-weight: 500; font-weight: 500;
} }
.streaming-duration mat-icon { .broadcasting-duration mat-icon {
font-size: 18px; font-size: 18px;
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -71,11 +71,11 @@
text-align: center; text-align: center;
} }
.streaming-error { .broadcasting-error {
color: var(--ov-warn-color); color: var(--ov-warn-color);
font-weight: 600; font-weight: 600;
} }
.streaming-name { .broadcasting-name {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
@ -85,23 +85,23 @@
font-weight: bold; font-weight: bold;
} }
.streaming-action-buttons { .broadcasting-action-buttons {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
/* #start-streaming-btn { /* #start-broadcasting-btn {
width: 100%; width: 100%;
background-color: var(--ov-tertiary-color); background-color: var(--ov-tertiary-color);
color: var(--ov-text-color); color: var(--ov-text-color);
} */ } */
#stop-streaming-btn { #stop-broadcasting-btn {
/* background-color: var(--ov-warn-color); */ /* background-color: var(--ov-warn-color); */
color: var(--ov-warn-color); color: var(--ov-warn-color);
} }
#reset-streaming-status-btn { #reset-broadcasting-status-btn {
width: 100%; width: 100%;
background-color: var(--ov-light-color); background-color: var(--ov-light-color);
} }

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BroadcastingActivityComponent } from './broadcasting-activity.component';
describe('BroadcastingActivityComponent', () => {
let component: BroadcastingActivityComponent;
let fixture: ComponentFixture<BroadcastingActivityComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ BroadcastingActivityComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(BroadcastingActivityComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,168 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Subscription } from 'rxjs';
import { BroadcastingError, BroadcastingStatus } from '../../../../models/broadcasting.model';
import { BroadcastingService } from '../../../../services/broadcasting/broadcasting.service';
import { OpenViduAngularConfigService } from '../../../../services/config/openvidu-angular.config.service';
import { ParticipantService } from '../../../../services/participant/participant.service';
@Component({
selector: 'ov-broadcasting-activity',
templateUrl: './broadcasting-activity.component.html',
styleUrls: ['./broadcasting-activity.component.css', '../activities-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BroadcastingActivityComponent implements OnInit {
/**
* Provides event notifications that fire when start broadcasting button has been clicked.
* The broadcasting should be started using the REST API.
*/
@Output() onStartBroadcastingClicked: EventEmitter<string> = new EventEmitter<string>();
/**
* Provides event notifications that fire when stop broadcasting button has been clicked.
* The broadcasting should be stopped using the REST API.
*/
@Output() onStopBroadcastingClicked: EventEmitter<void> = new EventEmitter<void>();
/**
* @internal
*/
urlRequiredError: boolean = false;
/**
* @internal
*/
oldBroadcastingStatus: BroadcastingStatus;
/**
* @internal
*/
broadcastUrl: string = '';
/**
* @internal
*/
@Input() expanded: boolean;
/**
* @internal
*/
broadcastingError: BroadcastingError | undefined;
/**
* @internal
*/
broadcastingStatus: BroadcastingStatus = BroadcastingStatus.STOPPED;
/**
* @internal
*/
broadcastingStatusEnum = BroadcastingStatus;
/**
* @internal
*/
opened: boolean = false;
/**
* @internal
*/
isSessionCreator: boolean = false;
/**
* @internal
*/
isBroadcastModuleAvailable: boolean = true;
private broadcastingSub: Subscription;
private broadcastingErrorSub: Subscription;
/**
* @internal
*/
constructor(
private broadcastingService: BroadcastingService,
private participantService: ParticipantService,
private libService: OpenViduAngularConfigService,
private cd: ChangeDetectorRef
) {}
/**
* @internal
*/
ngOnInit(): void {
this.isSessionCreator = this.participantService.amIModerator();
this.subscribeToBroadcastingStatus();
this.subscribeToBroadcastingError();
}
/**
* @internal
*/
ngOnDestroy() {
if (this.broadcastingSub) this.broadcastingSub.unsubscribe();
if (this.broadcastingErrorSub) this.broadcastingErrorSub.unsubscribe();
}
/**
* @internal
*/
panelOpened() {
this.opened = true;
}
/**
* @internal
*/
panelClosed() {
this.opened = false;
}
/**
* @ignore
*/
eventKeyPress(event) {
// Pressed 'Enter' key
if (event && event.keyCode === 13) {
event.preventDefault();
this.startBroadcasting();
}
}
/**
* @internal
*/
startBroadcasting() {
if (!!this.broadcastUrl) {
this.isBroadcastModuleAvailable = true;
this.broadcastingError = undefined;
this.broadcastingService.updateStatus(BroadcastingStatus.STARTING);
this.onStartBroadcastingClicked.emit(this.broadcastUrl);
}
this.urlRequiredError = !this.broadcastUrl;
}
/**
* @internal
*/
stopBroadcasting() {
this.onStopBroadcastingClicked.emit();
this.broadcastingService.updateStatus(BroadcastingStatus.STOPPING);
}
private subscribeToBroadcastingStatus() {
this.broadcastingSub = this.broadcastingService.broadcastingStatusObs.subscribe(
(ev: { status: BroadcastingStatus; time?: Date } | undefined) => {
if (!!ev) {
this.broadcastingStatus = ev.status;
this.cd.markForCheck();
}
}
);
}
private subscribeToBroadcastingError() {
this.broadcastingErrorSub = this.libService.broadcastingErrorObs.subscribe((error: BroadcastingError | undefined) => {
if (!!error) {
this.broadcastingError = error;
this.isBroadcastModuleAvailable = error.broadcastAvailable;
this.broadcastingService.updateStatus(BroadcastingStatus.FAILED);
this.cd.markForCheck();
}
});
}
}

View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { StreamingActivityComponent } from './streaming-activity.component';
describe('StreamingActivityComponent', () => {
let component: StreamingActivityComponent;
let fixture: ComponentFixture<StreamingActivityComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ StreamingActivityComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(StreamingActivityComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -1,170 +0,0 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Subscription } from 'rxjs';
import { StreamingError, StreamingStatus } from '../../../../models/streaming.model';
import { OpenViduAngularConfigService } from '../../../../services/config/openvidu-angular.config.service';
import { OpenViduService } from '../../../../services/openvidu/openvidu.service';
import { ParticipantService } from '../../../../services/participant/participant.service';
import { StreamingService } from '../../../../services/streaming/streaming.service';
@Component({
selector: 'ov-streaming-activity',
templateUrl: './streaming-activity.component.html',
styleUrls: ['./streaming-activity.component.css', '../activities-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class StreamingActivityComponent implements OnInit {
/**
* Provides event notifications that fire when start streaming button has been clicked.
* The streaming should be started using the REST API.
*/
@Output() onStartStreamingClicked: EventEmitter<string> = new EventEmitter<string>();
/**
* Provides event notifications that fire when stop streaming button has been clicked.
* The streaming should be stopped using the REST API.
*/
@Output() onStopStreamingClicked: EventEmitter<void> = new EventEmitter<void>();
/**
* @internal
*/
urlRequiredError: boolean = false;
/**
* @internal
*/
oldStreamingStatus: StreamingStatus;
/**
* @internal
*/
rtmpUrl: string = '';
/**
* @internal
*/
@Input() expanded: boolean;
/**
* @internal
*/
streamingError: StreamingError | undefined;
/**
* @internal
*/
streamingStatus: StreamingStatus = StreamingStatus.STOPPED;
/**
* @internal
*/
streamingStatusEnum = StreamingStatus;
/**
* @internal
*/
opened: boolean = false;
/**
* @internal
*/
isSessionCreator: boolean = false;
/**
* @internal
*/
isRtmpModuleAvailable: boolean = true;
private streamingSub: Subscription;
private streamingErrorSub: Subscription;
/**
* @internal
*/
constructor(
private streamingService: StreamingService,
private participantService: ParticipantService,
private openviduService: OpenViduService,
private libService: OpenViduAngularConfigService,
private cd: ChangeDetectorRef
) {}
/**
* @internal
*/
ngOnInit(): void {
this.isSessionCreator = this.participantService.amIModerator();
this.subscribeToStreamingStatus();
this.subscribeToStreamingError();
}
/**
* @internal
*/
ngOnDestroy() {
if (this.streamingSub) this.streamingSub.unsubscribe();
if (this.streamingErrorSub) this.streamingErrorSub.unsubscribe();
}
/**
* @internal
*/
panelOpened() {
this.opened = true;
}
/**
* @internal
*/
panelClosed() {
this.opened = false;
}
/**
* @ignore
*/
eventKeyPress(event) {
// Pressed 'Enter' key
if (event && event.keyCode === 13) {
event.preventDefault();
this.startStreaming();
}
}
/**
* @internal
*/
startStreaming() {
if (!!this.rtmpUrl) {
this.isRtmpModuleAvailable = true;
this.streamingError = undefined;
this.streamingService.updateStatus(StreamingStatus.STARTING);
this.onStartStreamingClicked.emit(this.rtmpUrl);
}
this.urlRequiredError = !this.rtmpUrl;
}
/**
* @internal
*/
stopStreaming() {
this.onStopStreamingClicked.emit();
this.streamingService.updateStatus(StreamingStatus.STOPPING);
}
private subscribeToStreamingStatus() {
this.streamingSub = this.streamingService.streamingStatusObs.subscribe(
(ev: { status: StreamingStatus; time?: Date } | undefined) => {
if (!!ev) {
this.streamingStatus = ev.status;
this.cd.markForCheck();
}
}
);
}
private subscribeToStreamingError() {
this.streamingErrorSub = this.libService.streamingErrorObs.subscribe((error: StreamingError | undefined) => {
if (!!error) {
this.streamingError = error;
this.isRtmpModuleAvailable = error.rtmpAvailable;
this.streamingService.updateStatus(StreamingStatus.FAILED);
this.cd.markForCheck();
}
});
}
}

View File

@ -31,11 +31,12 @@ import { VideoType } from '../../models/video-type.model';
import { animate, style, transition, trigger } from '@angular/animations'; import { animate, style, transition, trigger } from '@angular/animations';
import { MatDrawerContainer, MatSidenav } from '@angular/material/sidenav'; import { MatDrawerContainer, MatSidenav } from '@angular/material/sidenav';
import { skip, Subscription } from 'rxjs'; import { skip, Subscription } from 'rxjs';
import { BroadcastingStatus } from '../../models/broadcasting.model';
import { SidenavMode } from '../../models/layout.model'; import { SidenavMode } from '../../models/layout.model';
import { PanelEvent, PanelType } from '../../models/panel.model'; import { PanelEvent, PanelType } from '../../models/panel.model';
import { Signal } from '../../models/signal.model'; import { Signal } from '../../models/signal.model';
import { StreamingStatus } from '../../models/streaming.model';
import { ActionService } from '../../services/action/action.service'; import { ActionService } from '../../services/action/action.service';
import { BroadcastingService } from '../../services/broadcasting/broadcasting.service';
import { CaptionService } from '../../services/caption/caption.service'; import { CaptionService } from '../../services/caption/caption.service';
import { ChatService } from '../../services/chat/chat.service'; import { ChatService } from '../../services/chat/chat.service';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
@ -46,7 +47,6 @@ import { PanelService } from '../../services/panel/panel.service';
import { ParticipantService } from '../../services/participant/participant.service'; import { ParticipantService } from '../../services/participant/participant.service';
import { PlatformService } from '../../services/platform/platform.service'; import { PlatformService } from '../../services/platform/platform.service';
import { RecordingService } from '../../services/recording/recording.service'; import { RecordingService } from '../../services/recording/recording.service';
import { StreamingService } from '../../services/streaming/streaming.service';
import { TranslateService } from '../../services/translate/translate.service'; import { TranslateService } from '../../services/translate/translate.service';
import { VirtualBackgroundService } from '../../services/virtual-background/virtual-background.service'; import { VirtualBackgroundService } from '../../services/virtual-background/virtual-background.service';
@ -101,7 +101,7 @@ export class SessionComponent implements OnInit, OnDestroy {
protected layoutService: LayoutService, protected layoutService: LayoutService,
protected panelService: PanelService, protected panelService: PanelService,
private recordingService: RecordingService, private recordingService: RecordingService,
private streamingService: StreamingService, private broadcastingService: BroadcastingService,
private translateService: TranslateService, private translateService: TranslateService,
private captionService: CaptionService, private captionService: CaptionService,
private platformService: PlatformService, private platformService: PlatformService,
@ -170,7 +170,6 @@ export class SessionComponent implements OnInit, OnDestroy {
async ngOnInit() { async ngOnInit() {
if (!this.usedInPrejoinPage) { if (!this.usedInPrejoinPage) {
if (!this.openviduService.getScreenToken()) { if (!this.openviduService.getScreenToken()) {
// Hide screenshare button if screen token does not exist // Hide screenshare button if screen token does not exist
this.libService.screenshareButton.next(false); this.libService.screenshareButton.next(false);
@ -199,8 +198,8 @@ export class SessionComponent implements OnInit, OnDestroy {
this.subscribeToRecordingEvents(); this.subscribeToRecordingEvents();
} }
if (this.libService.isStreamingEnabled()) { if (this.libService.isBroadcastingEnabled()) {
this.subscribeToStreamingEvents(); this.subscribeToBroadcastingEvents();
} }
} }
this.preparing = false; this.preparing = false;
@ -438,18 +437,14 @@ export class SessionComponent implements OnInit, OnDestroy {
} }
private subscribeToRecordingEvents() { private subscribeToRecordingEvents() {
this.session.on('recordingStarted', (event: RecordingEvent) => { this.session.on('recordingStarted', (event: RecordingEvent) => this.recordingService.startRecording(event));
this.recordingService.startRecording(event);
});
this.session.on('recordingStopped', (event: RecordingEvent) => { this.session.on('recordingStopped', (event: RecordingEvent) => this.recordingService.stopRecording(event));
this.recordingService.stopRecording(event);
});
} }
private subscribeToStreamingEvents() { private subscribeToBroadcastingEvents() {
this.session.on('broadcastStarted', () => this.streamingService.updateStatus(StreamingStatus.STARTED)); this.session.on('broadcastStarted', () => this.broadcastingService.updateStatus(BroadcastingStatus.STARTED));
this.session.on('broadcastStopped', () => this.streamingService.updateStatus(StreamingStatus.STOPPED)); this.session.on('broadcastStopped', () => this.broadcastingService.updateStatus(BroadcastingStatus.STOPPED));
} }
private startUpdateLayoutInterval() { private startUpdateLayoutInterval() {

View File

@ -71,7 +71,7 @@
} }
.recording-tag, .recording-tag,
.streaming-tag { .broadcasting-tag {
padding: 0 10px; padding: 0 10px;
border-radius: var(--ov-panel-radius); border-radius: var(--ov-panel-radius);
width: fit-content; width: fit-content;
@ -84,19 +84,19 @@
.recording-tag { .recording-tag {
background-color: var(--ov-warn-color); background-color: var(--ov-warn-color);
} }
.streaming-tag { .broadcasting-tag {
background-color: #5903ca; background-color: #5903ca;
} }
.recording-tag mat-icon, .recording-tag mat-icon,
.streaming-tag mat-icon { .broadcasting-tag mat-icon {
font-size: 16px; font-size: 16px;
display: inline; display: inline;
vertical-align: sub; vertical-align: sub;
margin-right: 5px; margin-right: 5px;
} }
#streaming-btn > mat-icon { #broadcasting-btn > mat-icon {
color: #5903ca; color: #5903ca;
} }

View File

@ -9,10 +9,10 @@
<span class="blink">REC</span> <span class="blink">REC</span>
<span> | {{ recordingTime | date : 'H:mm:ss' }}</span> <span> | {{ recordingTime | date : 'H:mm:ss' }}</span>
</div> </div>
<div *ngIf="streamingStatus === _streamingStatus.STARTED" id="streaming-tag" class="streaming-tag"> <div *ngIf="broadcastingStatus === _broadcastingStatus.STARTED" id="broadcasting-tag" class="broadcasting-tag">
<mat-icon class="blink">sensors</mat-icon> <mat-icon class="blink">sensors</mat-icon>
<span class="blink">LIVE</span> <span class="blink">LIVE</span>
<span> | {{ streamingTime | date : 'H:mm:ss' }}</span> <span> | {{ broadcastingTime | date : 'H:mm:ss' }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -122,25 +122,25 @@
</span> </span>
</button> </button>
<!-- Streaming button --> <!-- Broadcasting button -->
<button <button
*ngIf="!isMinimal && showStreamingButton" *ngIf="!isMinimal && showBroadcastingButton"
mat-menu-item mat-menu-item
id="streaming-btn" id="broadcasting-btn"
[disabled]="streamingStatus === _streamingStatus.STARTING || recordingStatus === _streamingStatus.STOPPING" [disabled]="broadcastingStatus === _broadcastingStatus.STARTING || recordingStatus === _broadcastingStatus.STOPPING"
(click)="toggleStreaming()" (click)="toggleBroadcasting()"
> >
<mat-icon>sensors</mat-icon> <mat-icon>sensors</mat-icon>
<span <span
*ngIf=" *ngIf="
streamingStatus === _streamingStatus.STOPPED || broadcastingStatus === _broadcastingStatus.STOPPED ||
streamingStatus === _streamingStatus.STOPPING || broadcastingStatus === _broadcastingStatus.STOPPING ||
streamingStatus === _streamingStatus.FAILED broadcastingStatus === _broadcastingStatus.FAILED
" "
> >
{{ 'PANEL.STREAMING.START' | translate }} {{ 'PANEL.STREAMING.START' | translate }}
</span> </span>
<span *ngIf="streamingStatus === _streamingStatus.STARTED || streamingStatus === _streamingStatus.STARTING"> <span *ngIf="broadcastingStatus === _broadcastingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTING">
{{ 'PANEL.STREAMING.STOP' | translate }} {{ 'PANEL.STREAMING.STOP' | translate }}
</span> </span>
</button> </button>

View File

@ -24,13 +24,14 @@ import {
ToolbarAdditionalButtonsDirective, ToolbarAdditionalButtonsDirective,
ToolbarAdditionalPanelButtonsDirective ToolbarAdditionalPanelButtonsDirective
} from '../../directives/template/openvidu-angular.directive'; } from '../../directives/template/openvidu-angular.directive';
import { BroadcastingStatus } from '../../models/broadcasting.model';
import { ChatMessage } from '../../models/chat.model'; import { ChatMessage } from '../../models/chat.model';
import { ILogger } from '../../models/logger.model'; import { ILogger } from '../../models/logger.model';
import { PanelEvent, PanelType } from '../../models/panel.model'; import { PanelEvent, PanelType } from '../../models/panel.model';
import { OpenViduRole, ParticipantAbstractModel } from '../../models/participant.model'; import { OpenViduRole, ParticipantAbstractModel } from '../../models/participant.model';
import { RecordingInfo, RecordingStatus } from '../../models/recording.model'; import { RecordingInfo, RecordingStatus } from '../../models/recording.model';
import { StreamingStatus } from '../../models/streaming.model';
import { ActionService } from '../../services/action/action.service'; import { ActionService } from '../../services/action/action.service';
import { BroadcastingService } from '../../services/broadcasting/broadcasting.service';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
import { DeviceService } from '../../services/device/device.service'; import { DeviceService } from '../../services/device/device.service';
import { LayoutService } from '../../services/layout/layout.service'; import { LayoutService } from '../../services/layout/layout.service';
@ -40,7 +41,6 @@ import { ParticipantService } from '../../services/participant/participant.servi
import { PlatformService } from '../../services/platform/platform.service'; import { PlatformService } from '../../services/platform/platform.service';
import { RecordingService } from '../../services/recording/recording.service'; import { RecordingService } from '../../services/recording/recording.service';
import { StorageService } from '../../services/storage/storage.service'; import { StorageService } from '../../services/storage/storage.service';
import { StreamingService } from '../../services/streaming/streaming.service';
import { TranslateService } from '../../services/translate/translate.service'; import { TranslateService } from '../../services/translate/translate.service';
/** /**
@ -185,9 +185,9 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
@Output() onStartRecordingClicked: EventEmitter<void> = new EventEmitter<void>(); @Output() onStartRecordingClicked: EventEmitter<void> = new EventEmitter<void>();
/** /**
* Provides event notifications that fire when start streaming button has been clicked. * Provides event notifications that fire when start broadcasting button has been clicked.
*/ */
@Output() onStopStreamingClicked: EventEmitter<void> = new EventEmitter<void>(); @Output() onStopBroadcastingClicked: EventEmitter<void> = new EventEmitter<void>();
/** /**
* Provides event notifications that fire when stop recording button has been clicked. * Provides event notifications that fire when stop recording button has been clicked.
@ -283,7 +283,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/** /**
* @ignore * @ignore
*/ */
showStreamingButton: boolean = true; showBroadcastingButton: boolean = true;
/** /**
* @ignore * @ignore
@ -340,7 +340,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/** /**
* @ignore * @ignore
*/ */
streamingStatus: StreamingStatus = StreamingStatus.STOPPED; broadcastingStatus: BroadcastingStatus = BroadcastingStatus.STOPPED;
/** /**
* @ignore * @ignore
*/ */
@ -348,7 +348,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/** /**
* @ignore * @ignore
*/ */
_streamingStatus = StreamingStatus; _broadcastingStatus = BroadcastingStatus;
/** /**
* @ignore * @ignore
@ -357,7 +357,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/** /**
* @ignore * @ignore
*/ */
streamingTime: Date; broadcastingTime: Date;
/** /**
* @ignore * @ignore
@ -379,9 +379,9 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
private backgroundEffectsButtonSub: Subscription; private backgroundEffectsButtonSub: Subscription;
private leaveButtonSub: Subscription; private leaveButtonSub: Subscription;
private recordingButtonSub: Subscription; private recordingButtonSub: Subscription;
private streamingButtonSub: Subscription; private broadcastingButtonSub: Subscription;
private recordingSubscription: Subscription; private recordingSubscription: Subscription;
private streamingSubscription: Subscription; private broadcastingSubscription: Subscription;
private activitiesPanelButtonSub: Subscription; private activitiesPanelButtonSub: Subscription;
private participantsPanelButtonSub: Subscription; private participantsPanelButtonSub: Subscription;
private chatPanelButtonSub: Subscription; private chatPanelButtonSub: Subscription;
@ -409,7 +409,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
private libService: OpenViduAngularConfigService, private libService: OpenViduAngularConfigService,
private platformService: PlatformService, private platformService: PlatformService,
private recordingService: RecordingService, private recordingService: RecordingService,
private streamingService: StreamingService, private broadcastingService: BroadcastingService,
private translateService: TranslateService, private translateService: TranslateService,
private storageSrv: StorageService private storageSrv: StorageService
) { ) {
@ -452,7 +452,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.subscribeToMenuToggling(); this.subscribeToMenuToggling();
this.subscribeToChatMessages(); this.subscribeToChatMessages();
this.subscribeToRecordingStatus(); this.subscribeToRecordingStatus();
this.subscribeToStreamingStatus(); this.subscribeToBroadcastingStatus();
this.subscribeToScreenSize(); this.subscribeToScreenSize();
this.subscribeToCaptionsToggling(); this.subscribeToCaptionsToggling();
} }
@ -473,7 +473,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
if (this.backgroundEffectsButtonSub) this.backgroundEffectsButtonSub.unsubscribe(); if (this.backgroundEffectsButtonSub) this.backgroundEffectsButtonSub.unsubscribe();
if (this.leaveButtonSub) this.leaveButtonSub.unsubscribe(); if (this.leaveButtonSub) this.leaveButtonSub.unsubscribe();
if (this.recordingButtonSub) this.recordingButtonSub.unsubscribe(); if (this.recordingButtonSub) this.recordingButtonSub.unsubscribe();
if (this.streamingButtonSub) this.streamingButtonSub.unsubscribe(); if (this.broadcastingButtonSub) this.broadcastingButtonSub.unsubscribe();
if (this.participantsPanelButtonSub) this.participantsPanelButtonSub.unsubscribe(); if (this.participantsPanelButtonSub) this.participantsPanelButtonSub.unsubscribe();
if (this.chatPanelButtonSub) this.chatPanelButtonSub.unsubscribe(); if (this.chatPanelButtonSub) this.chatPanelButtonSub.unsubscribe();
if (this.displayLogoSub) this.displayLogoSub.unsubscribe(); if (this.displayLogoSub) this.displayLogoSub.unsubscribe();
@ -481,7 +481,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
if (this.minimalSub) this.minimalSub.unsubscribe(); if (this.minimalSub) this.minimalSub.unsubscribe();
if (this.activitiesPanelButtonSub) this.activitiesPanelButtonSub.unsubscribe(); if (this.activitiesPanelButtonSub) this.activitiesPanelButtonSub.unsubscribe();
if (this.recordingSubscription) this.recordingSubscription.unsubscribe(); if (this.recordingSubscription) this.recordingSubscription.unsubscribe();
if (this.streamingSubscription) this.streamingSubscription.unsubscribe(); if (this.broadcastingSubscription) this.broadcastingSubscription.unsubscribe();
if (this.screenSizeSub) this.screenSizeSub.unsubscribe(); if (this.screenSizeSub) this.screenSizeSub.unsubscribe();
if (this.settingsButtonSub) this.settingsButtonSub.unsubscribe(); if (this.settingsButtonSub) this.settingsButtonSub.unsubscribe();
if (this.captionsSubs) this.captionsSubs.unsubscribe(); if (this.captionsSubs) this.captionsSubs.unsubscribe();
@ -571,14 +571,14 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
/** /**
* @ignore * @ignore
*/ */
toggleStreaming() { toggleBroadcasting() {
if (this.streamingStatus === StreamingStatus.STARTED) { if (this.broadcastingStatus === BroadcastingStatus.STARTED) {
this.log.d('Stopping streaming'); this.log.d('Stopping broadcasting');
this.onStopStreamingClicked.emit(); this.onStopBroadcastingClicked.emit();
this.streamingService.updateStatus(StreamingStatus.STOPPING); this.broadcastingService.updateStatus(BroadcastingStatus.STOPPING);
} else if (this.streamingStatus === StreamingStatus.STOPPED) { } else if (this.broadcastingStatus === BroadcastingStatus.STOPPED) {
if (this.showActivitiesPanelButton && !this.isActivitiesOpened) { if (this.showActivitiesPanelButton && !this.isActivitiesOpened) {
this.toggleActivitiesPanel('streaming'); this.toggleActivitiesPanel('broadcasting');
} }
} }
} }
@ -706,14 +706,14 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
}); });
} }
private subscribeToStreamingStatus() { private subscribeToBroadcastingStatus() {
this.streamingSubscription = this.streamingService.streamingStatusObs this.broadcastingSubscription = this.broadcastingService.broadcastingStatusObs
.pipe(skip(1)) .pipe(skip(1))
.subscribe((ev: { status: StreamingStatus, time?: Date } | undefined) => { .subscribe((ev: { status: BroadcastingStatus, time?: Date } | undefined) => {
if (!!ev) { if (!!ev) {
this.streamingStatus = ev.status; this.broadcastingStatus = ev.status;
if (ev.time) { if (ev.time) {
this.streamingTime = ev.time; this.broadcastingTime = ev.time;
} }
this.cd.markForCheck(); this.cd.markForCheck();
} }
@ -745,8 +745,8 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.cd.markForCheck(); this.cd.markForCheck();
}); });
this.streamingButtonSub = this.libService.streamingButtonObs.subscribe((value: boolean) => { this.broadcastingButtonSub = this.libService.broadcastingButtonObs.subscribe((value: boolean) => {
this.showStreamingButton = value; this.showBroadcastingButton = value;
this.checkDisplayMoreOptions(); this.checkDisplayMoreOptions();
this.cd.markForCheck(); this.cd.markForCheck();
}); });
@ -806,7 +806,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.showFullscreenButton || this.showFullscreenButton ||
this.showBackgroundEffectsButton || this.showBackgroundEffectsButton ||
this.showRecordingButton || this.showRecordingButton ||
this.showStreamingButton || this.showBroadcastingButton ||
this.showSettingsButton; this.showSettingsButton;
} }
} }

View File

@ -50,7 +50,7 @@
(onActivitiesPanelButtonClicked)="onActivitiesPanelButtonClicked()" (onActivitiesPanelButtonClicked)="onActivitiesPanelButtonClicked()"
(onStartRecordingClicked)="onStartRecordingClicked('toolbar')" (onStartRecordingClicked)="onStartRecordingClicked('toolbar')"
(onStopRecordingClicked)="onStopRecordingClicked('toolbar')" (onStopRecordingClicked)="onStopRecordingClicked('toolbar')"
(onStopStreamingClicked)="onStopStreamingClicked('toolbar')" (onStopBroadcastingClicked)="onStopBroadcastingClicked('toolbar')"
> >
<ng-template #toolbarAdditionalButtons> <ng-template #toolbarAdditionalButtons>
<ng-container *ngTemplateOutlet="openviduAngularToolbarAdditionalButtonsTemplate"></ng-container> <ng-container *ngTemplateOutlet="openviduAngularToolbarAdditionalButtonsTemplate"></ng-container>
@ -100,8 +100,8 @@
(onStartRecordingClicked)="onStartRecordingClicked('panel')" (onStartRecordingClicked)="onStartRecordingClicked('panel')"
(onStopRecordingClicked)="onStopRecordingClicked('panel')" (onStopRecordingClicked)="onStopRecordingClicked('panel')"
(onDeleteRecordingClicked)="onDeleteRecordingClicked($event)" (onDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
(onStartStreamingClicked)="onStartStreamingClicked($event)" (onStartBroadcastingClicked)="onStartBroadcastingClicked($event)"
(onStopStreamingClicked)="onStopStreamingClicked('panel')" (onStopBroadcastingClicked)="onStopBroadcastingClicked('panel')"
></ov-activities-panel> ></ov-activities-panel>
</ng-template> </ng-template>

View File

@ -384,19 +384,19 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
@Output() onActivitiesPanelPlayRecordingClicked: EventEmitter<string> = new EventEmitter<string>(); @Output() onActivitiesPanelPlayRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
/** /**
* Provides event notifications that fire when start streaming button is clicked from {@link ActivitiesPanelComponent}. * Provides event notifications that fire when start broadcasting button is clicked from {@link ActivitiesPanelComponent}.
*/ */
@Output() onActivitiesPanelStartStreamingClicked: EventEmitter<string> = new EventEmitter<string>(); @Output() onActivitiesPanelStartBroadcastingClicked: EventEmitter<string> = new EventEmitter<string>();
/** /**
* Provides event notifications that fire when start streaming button is clicked from {@link ActivitiesPanelComponent}. * Provides event notifications that fire when start broadcasting button is clicked from {@link ActivitiesPanelComponent}.
*/ */
@Output() onActivitiesPanelStopStreamingClicked: EventEmitter<void> = new EventEmitter<void>(); @Output() onActivitiesPanelStopBroadcastingClicked: EventEmitter<void> = new EventEmitter<void>();
/** /**
* Provides event notifications that fire when start streaming button is clicked from {@link ToolbarComponent}. * Provides event notifications that fire when start broadcasting button is clicked from {@link ToolbarComponent}.
*/ */
@Output() onToolbarStopStreamingClicked: EventEmitter<void> = new EventEmitter<void>(); @Output() onToolbarStopBroadcastingClicked: EventEmitter<void> = new EventEmitter<void>();
/** /**
* Provides event notifications that fire when OpenVidu Session is created. * Provides event notifications that fire when OpenVidu Session is created.
@ -695,22 +695,22 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
/** /**
* @internal * @internal
*/ */
onStartStreamingClicked(rtmpUrl: string) { onStartBroadcastingClicked(broadcastUrl: string) {
// if (from === 'toolbar') { // if (from === 'toolbar') {
// this.onToolbarStartRecordingClicked.emit(); // this.onToolbarStartRecordingClicked.emit();
// } else if (from === 'panel') { // } else if (from === 'panel') {
this.onActivitiesPanelStartStreamingClicked.emit(rtmpUrl); this.onActivitiesPanelStartBroadcastingClicked.emit(broadcastUrl);
// } // }
} }
/** /**
* @internal * @internal
*/ */
onStopStreamingClicked(from: string) { onStopBroadcastingClicked(from: string) {
if (from === 'toolbar') { if (from === 'toolbar') {
this.onToolbarStopStreamingClicked.emit(); this.onToolbarStopBroadcastingClicked.emit();
} else if (from === 'panel') { } else if (from === 'panel') {
this.onActivitiesPanelStopStreamingClicked.emit(); this.onActivitiesPanelStopBroadcastingClicked.emit();
} }
} }

View File

@ -52,51 +52,51 @@ export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit,
} }
/** /**
* The **streamingActivity** directive allows show/hide the streaming activity in {@link ActivitiesPanelComponent}. * The **broadcastingActivity** directive allows show/hide the broadcasting activity in {@link ActivitiesPanelComponent}.
* *
* Default: `true` * Default: `true`
* *
* It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `activitiesPanel` component: * It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `activitiesPanel` component:
* *
* @example * @example
* <ov-videoconference [activitiesPanelStreamingActivity]="false"></ov-videoconference> * <ov-videoconference [activitiesPanelBroadcastingActivity]="false"></ov-videoconference>
* *
* \ * \
* And it also can be used in the {@link ActivitiesPanelComponent}. * And it also can be used in the {@link ActivitiesPanelComponent}.
* @example * @example
* <ov-activities-panel *ovActivitiesPanel [streamingActivity]="false"></ov-activities-panel> * <ov-activities-panel *ovActivitiesPanel [broadcastingActivity]="false"></ov-activities-panel>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[activitiesPanelStreamingActivity], ov-activities-panel[streamingActivity]' selector: 'ov-videoconference[activitiesPanelBroadcastingActivity], ov-activities-panel[broadcastingActivity]'
}) })
export class ActivitiesPanelStreamingActivityDirective implements AfterViewInit, OnDestroy { export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewInit, OnDestroy {
@Input() set activitiesPanelStreamingActivity(value: boolean) { @Input() set activitiesPanelBroadcastingActivity(value: boolean) {
this.streamingActivityValue = value; this.broadcastingActivityValue = value;
this.update(this.streamingActivityValue); this.update(this.broadcastingActivityValue);
} }
@Input() set streamingActivity(value: boolean) { @Input() set broadcastingActivity(value: boolean) {
this.streamingActivityValue = value; this.broadcastingActivityValue = value;
this.update(this.streamingActivityValue); this.update(this.broadcastingActivityValue);
} }
streamingActivityValue: boolean = true; broadcastingActivityValue: boolean = true;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
this.update(this.streamingActivityValue); this.update(this.broadcastingActivityValue);
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.clear(); this.clear();
} }
clear() { clear() {
this.streamingActivityValue = true; this.broadcastingActivityValue = true;
this.update(true); this.update(true);
} }
update(value: boolean) { update(value: boolean) {
if (this.libService.streamingActivity.getValue() !== value) { if (this.libService.broadcastingActivity.getValue() !== value) {
this.libService.streamingActivity.next(value); this.libService.broadcastingActivity.next(value);
} }
} }
} }

View File

@ -1,6 +1,7 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { ActivitiesPanelRecordingActivityDirective, ActivitiesPanelStreamingActivityDirective } from './activities-panel.directive'; import { ActivitiesPanelBroadcastingActivityDirective, ActivitiesPanelRecordingActivityDirective } from './activities-panel.directive';
import { AdminLoginDirective, AdminRecordingsListDirective } from './admin.directive'; import { AdminLoginDirective, AdminRecordingsListDirective } from './admin.directive';
import { BroadcastingActivityBroadcastingErrorDirective } from './broadcasting-activity.directive';
import { LogoDirective } from './internals.directive'; import { LogoDirective } from './internals.directive';
import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive'; import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
import { RecordingActivityRecordingErrorDirective, RecordingActivityRecordingsListDirective } from './recording-activity.directive'; import { RecordingActivityRecordingErrorDirective, RecordingActivityRecordingsListDirective } from './recording-activity.directive';
@ -9,11 +10,9 @@ import {
StreamDisplayParticipantNameDirective, StreamDisplayParticipantNameDirective,
StreamSettingsButtonDirective StreamSettingsButtonDirective
} from './stream.directive'; } from './stream.directive';
import { StreamingActivityStreamingErrorDirective } from './streaming-activity.directive';
import { import {
ToolbarActivitiesPanelButtonDirective, ToolbarActivitiesPanelButtonDirective,
ToolbarBackgroundEffectsButtonDirective, ToolbarBackgroundEffectsButtonDirective, ToolbarBroadcastingButtonDirective, ToolbarCaptionsButtonDirective,
ToolbarCaptionsButtonDirective,
ToolbarChatPanelButtonDirective, ToolbarChatPanelButtonDirective,
ToolbarDisplayLogoDirective, ToolbarDisplayLogoDirective,
ToolbarDisplaySessionNameDirective, ToolbarDisplaySessionNameDirective,
@ -22,8 +21,7 @@ import {
ToolbarParticipantsPanelButtonDirective, ToolbarParticipantsPanelButtonDirective,
ToolbarRecordingButtonDirective, ToolbarRecordingButtonDirective,
ToolbarScreenshareButtonDirective, ToolbarScreenshareButtonDirective,
ToolbarSettingsButtonDirective, ToolbarSettingsButtonDirective
ToolbarStreamingButtonDirective
} from './toolbar.directive'; } from './toolbar.directive';
import { import {
AudioMutedDirective, AudioMutedDirective,
@ -51,7 +49,7 @@ import {
ToolbarCaptionsButtonDirective, ToolbarCaptionsButtonDirective,
ToolbarLeaveButtonDirective, ToolbarLeaveButtonDirective,
ToolbarRecordingButtonDirective, ToolbarRecordingButtonDirective,
ToolbarStreamingButtonDirective, ToolbarBroadcastingButtonDirective,
ToolbarParticipantsPanelButtonDirective, ToolbarParticipantsPanelButtonDirective,
ToolbarChatPanelButtonDirective, ToolbarChatPanelButtonDirective,
ToolbarActivitiesPanelButtonDirective, ToolbarActivitiesPanelButtonDirective,
@ -65,10 +63,10 @@ import {
ParticipantPanelItemMuteButtonDirective, ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective, ParticipantNameDirective,
ActivitiesPanelRecordingActivityDirective, ActivitiesPanelRecordingActivityDirective,
ActivitiesPanelStreamingActivityDirective, ActivitiesPanelBroadcastingActivityDirective,
RecordingActivityRecordingsListDirective, RecordingActivityRecordingsListDirective,
RecordingActivityRecordingErrorDirective, RecordingActivityRecordingErrorDirective,
StreamingActivityStreamingErrorDirective, BroadcastingActivityBroadcastingErrorDirective,
AdminRecordingsListDirective, AdminRecordingsListDirective,
AdminLoginDirective AdminLoginDirective
], ],
@ -86,7 +84,7 @@ import {
ToolbarCaptionsButtonDirective, ToolbarCaptionsButtonDirective,
ToolbarLeaveButtonDirective, ToolbarLeaveButtonDirective,
ToolbarRecordingButtonDirective, ToolbarRecordingButtonDirective,
ToolbarStreamingButtonDirective, ToolbarBroadcastingButtonDirective,
ToolbarParticipantsPanelButtonDirective, ToolbarParticipantsPanelButtonDirective,
ToolbarChatPanelButtonDirective, ToolbarChatPanelButtonDirective,
ToolbarActivitiesPanelButtonDirective, ToolbarActivitiesPanelButtonDirective,
@ -100,10 +98,10 @@ import {
ParticipantPanelItemMuteButtonDirective, ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective, ParticipantNameDirective,
ActivitiesPanelRecordingActivityDirective, ActivitiesPanelRecordingActivityDirective,
ActivitiesPanelStreamingActivityDirective, ActivitiesPanelBroadcastingActivityDirective,
RecordingActivityRecordingsListDirective, RecordingActivityRecordingsListDirective,
RecordingActivityRecordingErrorDirective, RecordingActivityRecordingErrorDirective,
StreamingActivityStreamingErrorDirective, BroadcastingActivityBroadcastingErrorDirective,
AdminRecordingsListDirective, AdminRecordingsListDirective,
AdminLoginDirective AdminLoginDirective
] ]

View File

@ -0,0 +1,55 @@
import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
import { BroadcastingError } from '../../models/broadcasting.model';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
/**
* The **broadcastingError** directive allows to show any possible error with the broadcasting in the {@link BroadcastingActivityComponent}.
*
* Default: `undefined`
*
* Type: {@link BroadcastingError}
*
* It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `broadcastingActivity` component:
*
* @example
* <ov-videoconference [broadcastingActivityBroadcastingError]="error"></ov-videoconference>
*
* \
* And it also can be used in the {@link BroadcastingActivityComponent}.
* @example
* <ov-broadcasting-activity [broadcastingError]="error"></ov-broadcasting-activity>
*/
@Directive({
selector: 'ov-videoconference[broadcastingActivityBroadcastingError], ov-broadcasting-activity[broadcastingError]'
})
export class BroadcastingActivityBroadcastingErrorDirective implements AfterViewInit, OnDestroy {
@Input() set broadcastingActivityBroadcastingError(value: BroadcastingError) {
this.broadcastingErrorValue = value;
this.update(this.broadcastingErrorValue);
}
@Input() set broadcastingError(value: BroadcastingError) {
this.broadcastingErrorValue = value;
this.update(this.broadcastingErrorValue);
}
broadcastingErrorValue: BroadcastingError | undefined = undefined;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() {
this.update(this.broadcastingErrorValue);
}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.broadcastingErrorValue = undefined;
this.update(undefined);
}
update(value: BroadcastingError | undefined) {
if (this.libService.broadcastingError.getValue() !== value) {
this.libService.broadcastingError.next(value);
}
}
}

View File

@ -1,55 +0,0 @@
import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
import { StreamingError } from '../../models/streaming.model';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
/**
* The **streamingError** directive allows to show any possible error with the streaming in the {@link StreamingActivityComponent}.
*
* Default: `undefined`
*
* Type: {@link StreamingError}
*
* It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `streamingActivity` component:
*
* @example
* <ov-videoconference [streamingActivityStreamingError]="error"></ov-videoconference>
*
* \
* And it also can be used in the {@link StreamingActivityComponent}.
* @example
* <ov-streaming-activity [streamingError]="error"></ov-streaming-activity>
*/
@Directive({
selector: 'ov-videoconference[streamingActivityStreamingError], ov-streaming-activity[streamingError]'
})
export class StreamingActivityStreamingErrorDirective implements AfterViewInit, OnDestroy {
@Input() set streamingActivityStreamingError(value: StreamingError) {
this.streamingErrorValue = value;
this.update(this.streamingErrorValue);
}
@Input() set streamingError(value: StreamingError) {
this.streamingErrorValue = value;
this.update(this.streamingErrorValue);
}
streamingErrorValue: StreamingError | undefined = undefined;
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() {
this.update(this.streamingErrorValue);
}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.streamingErrorValue = undefined;
this.update(undefined);
}
update(value: StreamingError | undefined) {
if (this.libService.streamingError.getValue() !== value) {
this.libService.streamingError.next(value);
}
}
}

View File

@ -125,40 +125,40 @@ export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy
} }
/** /**
* The **streamingButton** directive allows show/hide the start/stop streaming toolbar button. * The **broadcastingButton** directive allows show/hide the start/stop broadcasting toolbar button.
* *
* Default: `true` * Default: `true`
* *
* It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `toolbar` component: * It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `toolbar` component:
* *
* @example * @example
* <ov-videoconference [toolbarStreamingButton]="false"></ov-videoconference> * <ov-videoconference [toolbarBroadcastingButton]="false"></ov-videoconference>
* *
* \ * \
* And it also can be used in the {@link ToolbarComponent}. * And it also can be used in the {@link ToolbarComponent}.
* @example * @example
* <ov-toolbar [streamingButton]="false"></ov-toolbar> * <ov-toolbar [broadcastingButton]="false"></ov-toolbar>
* *
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[toolbarStreamingButton], ov-toolbar[streamingButton]' selector: 'ov-videoconference[toolbarBroadcastingButton], ov-toolbar[broadcastingButton]'
}) })
export class ToolbarStreamingButtonDirective implements AfterViewInit, OnDestroy { export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDestroy {
/** /**
* @ignore * @ignore
*/ */
@Input() set toolbarStreamingButton(value: boolean) { @Input() set toolbarBroadcastingButton(value: boolean) {
this.streamingValue = value; this.broadcastingValue = value;
this.update(this.streamingValue); this.update(this.broadcastingValue);
} }
/** /**
* @ignore * @ignore
*/ */
@Input() set streamingButton(value: boolean) { @Input() set broadcastingButton(value: boolean) {
this.streamingValue = value; this.broadcastingValue = value;
this.update(this.streamingValue); this.update(this.broadcastingValue);
} }
private streamingValue: boolean = true; private broadcastingValue: boolean = true;
/** /**
* @ignore * @ignore
@ -166,20 +166,20 @@ export class ToolbarStreamingButtonDirective implements AfterViewInit, OnDestroy
constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
ngAfterViewInit() { ngAfterViewInit() {
this.update(this.streamingValue); this.update(this.broadcastingValue);
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.clear(); this.clear();
} }
private clear() { private clear() {
this.streamingValue = true; this.broadcastingValue = true;
this.update(true); this.update(true);
} }
private update(value: boolean) { private update(value: boolean) {
if (this.libService.streamingButton.getValue() !== value) { if (this.libService.broadcastingButton.getValue() !== value) {
this.libService.streamingButton.next(value); this.libService.broadcastingButton.next(value);
} }
} }
} }

View File

@ -0,0 +1,13 @@
export enum BroadcastingStatus {
STARTING = 'starting',
STARTED = 'started',
STOPPING = 'stopping',
STOPPED = 'stopped',
FAILED = 'failed'
}
export interface BroadcastingError {
message: string;
// If broadcasting feature is available or not
broadcastAvailable: boolean;
}

View File

@ -1,13 +0,0 @@
export enum StreamingStatus {
STARTING = 'starting',
STARTED = 'started',
STOPPING = 'stopping',
STOPPED = 'stopped',
FAILED = 'failed'
}
export interface StreamingError {
message: string;
// If streaming service is available or not
rtmpAvailable: boolean;
}

View File

@ -49,8 +49,8 @@ import { AvatarProfileComponent } from './components/avatar-profile/avatar-profi
import { CaptionsComponent } from './components/captions/captions.component'; import { CaptionsComponent } from './components/captions/captions.component';
import { ProFeatureDialogTemplateComponent } from './components/dialogs/pro-feature-dialog.component'; import { ProFeatureDialogTemplateComponent } from './components/dialogs/pro-feature-dialog.component';
import { ActivitiesPanelComponent } from './components/panel/activities-panel/activities-panel.component'; import { ActivitiesPanelComponent } from './components/panel/activities-panel/activities-panel.component';
import { BroadcastingActivityComponent } from './components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component';
import { RecordingActivityComponent } from './components/panel/activities-panel/recording-activity/recording-activity.component'; import { RecordingActivityComponent } from './components/panel/activities-panel/recording-activity/recording-activity.component';
import { StreamingActivityComponent } from './components/panel/activities-panel/streaming-activity/streaming-activity.component';
import { BackgroundEffectsPanelComponent } from './components/panel/background-effects-panel/background-effects-panel.component'; import { BackgroundEffectsPanelComponent } from './components/panel/background-effects-panel/background-effects-panel.component';
import { SettingsPanelComponent } from './components/panel/settings-panel/settings-panel.component'; import { SettingsPanelComponent } from './components/panel/settings-panel/settings-panel.component';
import { AudioDevicesComponent } from './components/settings/audio-devices/audio-devices.component'; import { AudioDevicesComponent } from './components/settings/audio-devices/audio-devices.component';
@ -71,7 +71,7 @@ const publicComponents = [
PanelComponent, PanelComponent,
ActivitiesPanelComponent, ActivitiesPanelComponent,
RecordingActivityComponent, RecordingActivityComponent,
StreamingActivityComponent, BroadcastingActivityComponent,
ParticipantsPanelComponent, ParticipantsPanelComponent,
ParticipantPanelItemComponent, ParticipantPanelItemComponent,
ChatPanelComponent, ChatPanelComponent,

View File

@ -1,13 +1,13 @@
import { TestBed } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing';
import { StreamingService } from './streaming.service'; import { BroadcastingService } from './broadcasting.service';
describe('StreamingService', () => { describe('BroadcastingService', () => {
let service: StreamingService; let service: BroadcastingService;
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({}); TestBed.configureTestingModule({});
service = TestBed.inject(StreamingService); service = TestBed.inject(BroadcastingService);
}); });
it('should be created', () => { it('should be created', () => {

View File

@ -0,0 +1,49 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { BroadcastingStatus } from '../../models/broadcasting.model';
@Injectable({
providedIn: 'root'
})
export class BroadcastingService {
/**
* Broadcasting status Observable which pushes the broadcasting state in every update.
*/
broadcastingStatusObs: Observable<{ status: BroadcastingStatus; time?: Date } | undefined>;
private broadcastingTime: Date | undefined;
private broadcastingTimeInterval: NodeJS.Timer;
private broadcastingStatus = <BehaviorSubject<{ status: BroadcastingStatus; time?: Date } | undefined>>new BehaviorSubject(undefined);
constructor() {
this.broadcastingStatusObs = this.broadcastingStatus.asObservable();
}
/**
* @internal
* @param status
*/
updateStatus(status: BroadcastingStatus) {
if (status === BroadcastingStatus.STARTED) {
this.startBroadcastingTime();
} else {
this.stopBroadcastingTime();
}
this.broadcastingStatus.next({ status, time: this.broadcastingTime });
}
private startBroadcastingTime() {
this.broadcastingTime = new Date();
this.broadcastingTime.setHours(0, 0, 0, 0);
this.broadcastingTimeInterval = setInterval(() => {
this.broadcastingTime?.setSeconds(this.broadcastingTime.getSeconds() + 1);
this.broadcastingTime = new Date(this.broadcastingTime.getTime());
this.broadcastingStatus.next({ status: this.broadcastingStatus.getValue()?.status, time: this.broadcastingTime });
}, 1000);
}
private stopBroadcastingTime() {
clearInterval(this.broadcastingTimeInterval);
this.broadcastingTime = undefined;
}
}

View File

@ -1,8 +1,8 @@
import { Inject, Injectable } from '@angular/core'; import { Inject, Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
import { OpenViduAngularConfig, ParticipantFactoryFunction } from '../../config/openvidu-angular.config'; import { OpenViduAngularConfig, ParticipantFactoryFunction } from '../../config/openvidu-angular.config';
import { BroadcastingError } from '../../models/broadcasting.model';
import { RecordingInfo } from '../../models/recording.model'; import { RecordingInfo } from '../../models/recording.model';
import { StreamingError } from '../../models/streaming.model';
// import { version } from '../../../../package.json'; // import { version } from '../../../../package.json';
@ -66,16 +66,16 @@ export class OpenViduAngularConfigService {
recordingsListObs: Observable<RecordingInfo[]>; recordingsListObs: Observable<RecordingInfo[]>;
recordingButton = <BehaviorSubject<boolean>>new BehaviorSubject(true); recordingButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
recordingButtonObs: Observable<boolean>; recordingButtonObs: Observable<boolean>;
streamingButton = <BehaviorSubject<boolean>>new BehaviorSubject(true); broadcastingButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
streamingButtonObs: Observable<boolean>; broadcastingButtonObs: Observable<boolean>;
recordingActivity = <BehaviorSubject<boolean>>new BehaviorSubject(true); recordingActivity = <BehaviorSubject<boolean>>new BehaviorSubject(true);
recordingActivityObs: Observable<boolean>; recordingActivityObs: Observable<boolean>;
streamingActivity = <BehaviorSubject<boolean>>new BehaviorSubject(true); broadcastingActivity = <BehaviorSubject<boolean>>new BehaviorSubject(true);
streamingActivityObs: Observable<boolean>; broadcastingActivityObs: Observable<boolean>;
recordingError = <BehaviorSubject<any>>new BehaviorSubject(null); recordingError = <BehaviorSubject<any>>new BehaviorSubject(null);
recordingErrorObs: Observable<any>; recordingErrorObs: Observable<any>;
streamingErrorObs: Observable<StreamingError | undefined>; broadcastingErrorObs: Observable<BroadcastingError | undefined>;
streamingError = <BehaviorSubject<StreamingError | undefined>>new BehaviorSubject(undefined); broadcastingError = <BehaviorSubject<BroadcastingError | undefined>>new BehaviorSubject(undefined);
// Admin // Admin
adminRecordingsList: BehaviorSubject<RecordingInfo[]> = new BehaviorSubject(<RecordingInfo[]>[]); adminRecordingsList: BehaviorSubject<RecordingInfo[]> = new BehaviorSubject(<RecordingInfo[]>[]);
adminRecordingsListObs: Observable<RecordingInfo[]>; adminRecordingsListObs: Observable<RecordingInfo[]>;
@ -102,7 +102,7 @@ export class OpenViduAngularConfigService {
this.displaySessionNameObs = this.displaySessionName.asObservable(); this.displaySessionNameObs = this.displaySessionName.asObservable();
this.displayLogoObs = this.displayLogo.asObservable(); this.displayLogoObs = this.displayLogo.asObservable();
this.recordingButtonObs = this.recordingButton.asObservable(); this.recordingButtonObs = this.recordingButton.asObservable();
this.streamingButtonObs = this.streamingButton.asObservable(); this.broadcastingButtonObs = this.broadcastingButton.asObservable();
this.toolbarSettingsButtonObs = this.toolbarSettingsButton.asObservable(); this.toolbarSettingsButtonObs = this.toolbarSettingsButton.asObservable();
this.captionsButtonObs = this.captionsButton.asObservable(); this.captionsButtonObs = this.captionsButton.asObservable();
//Stream observables //Stream observables
@ -115,9 +115,9 @@ export class OpenViduAngularConfigService {
this.recordingActivityObs = this.recordingActivity.asObservable(); this.recordingActivityObs = this.recordingActivity.asObservable();
this.recordingsListObs = this.recordingsList.asObservable(); this.recordingsListObs = this.recordingsList.asObservable();
this.recordingErrorObs = this.recordingError.asObservable(); this.recordingErrorObs = this.recordingError.asObservable();
// Streaming activity // Broadcasting activity
this.streamingActivityObs = this.streamingActivity.asObservable(); this.broadcastingActivityObs = this.broadcastingActivity.asObservable();
this.streamingErrorObs = this.streamingError.asObservable(); this.broadcastingErrorObs = this.broadcastingError.asObservable();
// Admin dashboard // Admin dashboard
this.adminRecordingsListObs = this.adminRecordingsList.asObservable(); this.adminRecordingsListObs = this.adminRecordingsList.asObservable();
this.adminLoginErrorObs = this.adminLoginError.asObservable(); this.adminLoginErrorObs = this.adminLoginError.asObservable();
@ -142,7 +142,7 @@ export class OpenViduAngularConfigService {
return this.recordingButton.getValue() && this.recordingActivity.getValue(); return this.recordingButton.getValue() && this.recordingActivity.getValue();
} }
isStreamingEnabled(): boolean { isBroadcastingEnabled(): boolean {
return this.streamingButton.getValue() && this.streamingActivity.getValue(); return this.broadcastingButton.getValue() && this.broadcastingActivity.getValue();
} }
} }

View File

@ -1,49 +0,0 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { StreamingStatus } from '../../models/streaming.model';
@Injectable({
providedIn: 'root'
})
export class StreamingService {
/**
* Streaming status Observable which pushes the streaming state in every update.
*/
streamingStatusObs: Observable<{ status: StreamingStatus; time?: Date } | undefined>;
private streamingTime: Date | undefined;
private streamingTimeInterval: NodeJS.Timer;
private streamingStatus = <BehaviorSubject<{ status: StreamingStatus; time?: Date } | undefined>>new BehaviorSubject(undefined);
constructor() {
this.streamingStatusObs = this.streamingStatus.asObservable();
}
/**
* @internal
* @param status
*/
updateStatus(status: StreamingStatus) {
if (status === StreamingStatus.STARTED) {
this.startStreamingTime();
} else {
this.stopStreamingTime();
}
this.streamingStatus.next({ status, time: this.streamingTime });
}
private startStreamingTime() {
this.streamingTime = new Date();
this.streamingTime.setHours(0, 0, 0, 0);
this.streamingTimeInterval = setInterval(() => {
this.streamingTime?.setSeconds(this.streamingTime.getSeconds() + 1);
this.streamingTime = new Date(this.streamingTime.getTime());
this.streamingStatus.next({ status: this.streamingStatus.getValue()?.status, time: this.streamingTime });
}, 1000);
}
private stopStreamingTime() {
clearInterval(this.streamingTimeInterval);
this.streamingTime = undefined;
}
}

View File

@ -7,8 +7,8 @@ export * from './lib/admin/dashboard/dashboard.component';
export * from './lib/admin/login/login.component'; export * from './lib/admin/login/login.component';
export * from './lib/components/layout/layout.component'; export * from './lib/components/layout/layout.component';
export * from './lib/components/panel/activities-panel/activities-panel.component'; export * from './lib/components/panel/activities-panel/activities-panel.component';
export * from './lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component';
export * from './lib/components/panel/activities-panel/recording-activity/recording-activity.component'; export * from './lib/components/panel/activities-panel/recording-activity/recording-activity.component';
export * from './lib/components/panel/activities-panel/streaming-activity/streaming-activity.component';
export * from './lib/components/panel/chat-panel/chat-panel.component'; export * from './lib/components/panel/chat-panel/chat-panel.component';
export * from './lib/components/panel/panel.component'; export * from './lib/components/panel/panel.component';
export * from './lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component'; export * from './lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component';
@ -21,21 +21,21 @@ export * from './lib/config/openvidu-angular.config';
export * from './lib/directives/api/activities-panel.directive'; export * from './lib/directives/api/activities-panel.directive';
export * from './lib/directives/api/admin.directive'; export * from './lib/directives/api/admin.directive';
export * from './lib/directives/api/api.directive.module'; export * from './lib/directives/api/api.directive.module';
export * from './lib/directives/api/broadcasting-activity.directive';
export * from './lib/directives/api/internals.directive'; export * from './lib/directives/api/internals.directive';
export * from './lib/directives/api/participant-panel-item.directive'; export * from './lib/directives/api/participant-panel-item.directive';
export * from './lib/directives/api/recording-activity.directive'; export * from './lib/directives/api/recording-activity.directive';
export * from './lib/directives/api/stream.directive'; export * from './lib/directives/api/stream.directive';
export * from './lib/directives/api/streaming-activity.directive';
export * from './lib/directives/api/toolbar.directive'; export * from './lib/directives/api/toolbar.directive';
export * from './lib/directives/api/videoconference.directive'; export * from './lib/directives/api/videoconference.directive';
export * from './lib/directives/template/openvidu-angular.directive'; export * from './lib/directives/template/openvidu-angular.directive';
export * from './lib/directives/template/openvidu-angular.directive.module'; export * from './lib/directives/template/openvidu-angular.directive.module';
export * from './lib/models/broadcasting.model';
// Models // Models
export * from './lib/models/panel.model'; export * from './lib/models/panel.model';
export * from './lib/models/participant.model'; export * from './lib/models/participant.model';
export * from './lib/models/recording.model'; export * from './lib/models/recording.model';
export * from './lib/models/signal.model'; export * from './lib/models/signal.model';
export * from './lib/models/streaming.model';
export * from './lib/models/token.model'; export * from './lib/models/token.model';
export * from './lib/models/video-type.model'; export * from './lib/models/video-type.model';
export * from './lib/openvidu-angular.module'; export * from './lib/openvidu-angular.module';
@ -44,11 +44,11 @@ export * from './lib/pipes/participant.pipe';
export * from './lib/pipes/recording.pipe'; export * from './lib/pipes/recording.pipe';
// Services // Services
export * from './lib/services/action/action.service'; export * from './lib/services/action/action.service';
export * from './lib/services/broadcasting/broadcasting.service';
export * from './lib/services/chat/chat.service'; export * from './lib/services/chat/chat.service';
export * from './lib/services/layout/layout.service'; export * from './lib/services/layout/layout.service';
export * from './lib/services/openvidu/openvidu.service'; export * from './lib/services/openvidu/openvidu.service';
export * from './lib/services/panel/panel.service'; export * from './lib/services/panel/panel.service';
export * from './lib/services/participant/participant.service'; export * from './lib/services/participant/participant.service';
export * from './lib/services/recording/recording.service'; export * from './lib/services/recording/recording.service';
export * from './lib/services/streaming/streaming.service';

View File

@ -12,7 +12,7 @@
[toolbarFullscreenButton]="true" [toolbarFullscreenButton]="true"
[toolbarCaptionsButton]="true" [toolbarCaptionsButton]="true"
[toolbarRecordingButton]="true" [toolbarRecordingButton]="true"
[toolbarStreamingButton]="true" [toolbarBroadcastingButton]="true"
[toolbarBackgroundEffectsButton]="true" [toolbarBackgroundEffectsButton]="true"
[toolbarLeaveButton]="true" [toolbarLeaveButton]="true"
[toolbarChatPanelButton]="true" [toolbarChatPanelButton]="true"
@ -26,7 +26,7 @@
[activitiesPanelRecordingActivity]="true" [activitiesPanelRecordingActivity]="true"
[recordingActivityRecordingsList]="recordingList" [recordingActivityRecordingsList]="recordingList"
[recordingActivityRecordingError]="recordingError" [recordingActivityRecordingError]="recordingError"
[streamingActivityStreamingError]="streamingError" [broadcastingActivityBroadcastingError]="broadcastingError"
[toolbarSettingsButton]="true" [toolbarSettingsButton]="true"
(onJoinButtonClicked)="onJoinClicked()" (onJoinButtonClicked)="onJoinClicked()"
(onToolbarLeaveButtonClicked)="onToolbarLeaveButtonClicked()" (onToolbarLeaveButtonClicked)="onToolbarLeaveButtonClicked()"
@ -41,9 +41,9 @@
(onActivitiesPanelStartRecordingClicked)="onStartRecordingClicked()" (onActivitiesPanelStartRecordingClicked)="onStartRecordingClicked()"
(onActivitiesPanelStopRecordingClicked)="onStopRecordingClicked()" (onActivitiesPanelStopRecordingClicked)="onStopRecordingClicked()"
(onActivitiesPanelDeleteRecordingClicked)="onDeleteRecordingClicked($event)" (onActivitiesPanelDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
(onActivitiesPanelStartStreamingClicked)="onStartStreamingClicked($event)" (onActivitiesPanelStartBroadcastingClicked)="onStartBroadcastingClicked($event)"
(onActivitiesPanelStopStreamingClicked)="onStopStreamingClicked()" (onActivitiesPanelStopBroadcastingClicked)="onStopBroadcastingClicked()"
(onToolbarStopStreamingClicked)="onStopStreamingClicked()" (onToolbarStopBroadcastingClicked)="onStopBroadcastingClicked()"
(onNodeCrashed)="onNodeCrashed()" (onNodeCrashed)="onNodeCrashed()"
> >
<!-- <div *ovActivitiesPanel>HELLO</div> --> <!-- <div *ovActivitiesPanel>HELLO</div> -->

View File

@ -16,7 +16,7 @@ export class CallComponent implements OnInit {
isSessionAlive: boolean = false; isSessionAlive: boolean = false;
recordingList: RecordingInfo[] = []; recordingList: RecordingInfo[] = [];
recordingError: any; recordingError: any;
streamingError: any; broadcastingError: any;
constructor(private restService: RestService) {} constructor(private restService: RestService) {}
@ -81,27 +81,27 @@ export class CallComponent implements OnInit {
console.log('TOOLBAR LEAVE CLICKED'); console.log('TOOLBAR LEAVE CLICKED');
} }
async onStartStreamingClicked(rtmpUrl: string) { async onStartBroadcastingClicked(broadcastUrl: string) {
console.log('START STREAMING', rtmpUrl); console.log('START STREAMING', broadcastUrl);
try { try {
this.streamingError = null; this.broadcastingError = null;
const resp = await this.restService.startStreaming(rtmpUrl); const resp = await this.restService.startBroadcasting(broadcastUrl);
console.log('Streaming response ', resp); console.log('Broadcasting response ', resp);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
this.streamingError = error.error; this.broadcastingError = error.error;
} }
} }
async onStopStreamingClicked() { async onStopBroadcastingClicked() {
console.log('STOP STREAMING'); console.log('STOP STREAMING');
try { try {
this.streamingError = null; this.broadcastingError = null;
const resp = await this.restService.stopStreaming(); const resp = await this.restService.stopBroadcasting();
console.log('Streaming response ', resp); console.log('Broadcasting response ', resp);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
this.streamingError = error.message || error; this.broadcastingError = error.message || error;
} }
} }

View File

@ -41,7 +41,7 @@ export class RestService {
} }
} }
async startStreaming(broadcastUrl: string) { async startBroadcasting(broadcastUrl: string) {
try { try {
const options = { const options = {
headers: new HttpHeaders({ headers: new HttpHeaders({
@ -68,7 +68,7 @@ export class RestService {
} }
} }
async stopStreaming() { async stopBroadcasting() {
try { try {
return lastValueFrom(this.http.delete<any>(`${this.baseHref}broadcasts/stop`)); return lastValueFrom(this.http.delete<any>(`${this.baseHref}broadcasts/stop`));
} catch (error) { } catch (error) {

View File

@ -84,7 +84,7 @@
[chatPanelButton]="chatPanelBtn" [chatPanelButton]="chatPanelBtn"
[displaySessionName]="displaySessionId" [displaySessionName]="displaySessionId"
[displayLogo]="displayLogo" [displayLogo]="displayLogo"
[streamingButton]="streamingBtn" [broadcastingButton]="broadcastingBtn"
(onLeaveButtonClicked)="appendElement('onLeaveButtonClicked')" (onLeaveButtonClicked)="appendElement('onLeaveButtonClicked')"
(onCameraButtonClicked)="appendElement('onCameraButtonClicked')" (onCameraButtonClicked)="appendElement('onCameraButtonClicked')"
(onMicrophoneButtonClicked)="appendElement('onMicrophoneButtonClicked')" (onMicrophoneButtonClicked)="appendElement('onMicrophoneButtonClicked')"
@ -205,11 +205,11 @@
<ov-activities-panel <ov-activities-panel
*ovActivitiesPanel *ovActivitiesPanel
[recordingActivity]="recordingActivity" [recordingActivity]="recordingActivity"
[streamingActivity]="streamingActivity" [broadcastingActivity]="broadcastingActivity"
id="custom-activities-panel" id="custom-activities-panel"
> >
<ov-recording-activity *ngIf="recordingActivity"></ov-recording-activity> <ov-recording-activity *ngIf="recordingActivity"></ov-recording-activity>
<ov-streaming-activity *ngIf="streamingActivity" [streamingError]="streamingError"></ov-streaming-activity> <ov-broadcasting-activity *ngIf="broadcastingActivity" [broadcastingError]="broadcastingError"></ov-broadcasting-activity>
</ov-activities-panel> </ov-activities-panel>
</ng-template> </ng-template>

View File

@ -2,7 +2,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { PanelService, StreamingError } from 'openvidu-angular'; import { BroadcastingError, PanelService } from 'openvidu-angular';
import { Subscription, throwError as observableThrowError } from 'rxjs'; import { Subscription, throwError as observableThrowError } from 'rxjs';
import { catchError } from 'rxjs/operators'; import { catchError } from 'rxjs/operators';
@ -39,7 +39,7 @@ export enum AttributeDirective {
// AUDIO_MUTED = 'audioMuted', // AUDIO_MUTED = 'audioMuted',
TOOLBAR_SCREENSHARE = 'screenshareButton', TOOLBAR_SCREENSHARE = 'screenshareButton',
TOOLBAR_FULLSCREEN = 'fullscreenButton', TOOLBAR_FULLSCREEN = 'fullscreenButton',
TOOLBAR_STREAMING = 'streamingButton', TOOLBAR_BROADCASTING = 'broadcastingButton',
TOOLBAR_LEAVE = 'leaveButton', TOOLBAR_LEAVE = 'leaveButton',
TOOLBAR_PARTICIPANTS_PANEL = 'participantsPanelButton', TOOLBAR_PARTICIPANTS_PANEL = 'participantsPanelButton',
TOOLBAR_ACTIVITIES_PANEL = 'activitiesPanelButton', TOOLBAR_ACTIVITIES_PANEL = 'activitiesPanelButton',
@ -51,8 +51,8 @@ export enum AttributeDirective {
STREAM_SETTINGS = 'settingsButton', STREAM_SETTINGS = 'settingsButton',
PARTICIPANT_ITEM_MUTE = 'muteButton', PARTICIPANT_ITEM_MUTE = 'muteButton',
ACTIVITIES_PANEL_RECORDING_ACTIVITY = 'recordingActivity', ACTIVITIES_PANEL_RECORDING_ACTIVITY = 'recordingActivity',
ACTIVITIES_PANEL_STREAMING_ACTIVITY = 'streamingActivity', ACTIVITIES_PANEL_BROADCASTING_ACTIVITY = 'broadcastingActivity',
ACTIVITIES_PANEL_STREAMING_ERROR = 'streamingError' ACTIVITIES_PANEL_BROADCASTING_ERROR = 'broadcastingError'
} }
@Component({ @Component({
@ -100,7 +100,7 @@ export class TestingComponent implements OnInit {
{ name: AttributeDirective.TOOLBAR_DISPLAY_LOGO, checked: true }, { name: AttributeDirective.TOOLBAR_DISPLAY_LOGO, checked: true },
{ name: AttributeDirective.TOOLBAR_DISPLAY_SESSION, checked: true }, { name: AttributeDirective.TOOLBAR_DISPLAY_SESSION, checked: true },
{ name: AttributeDirective.TOOLBAR_FULLSCREEN, checked: true }, { name: AttributeDirective.TOOLBAR_FULLSCREEN, checked: true },
{ name: AttributeDirective.TOOLBAR_STREAMING, checked: true }, { name: AttributeDirective.TOOLBAR_BROADCASTING, checked: true },
{ name: AttributeDirective.TOOLBAR_LEAVE, checked: true }, { name: AttributeDirective.TOOLBAR_LEAVE, checked: true },
{ name: AttributeDirective.TOOLBAR_PARTICIPANTS_PANEL, checked: true }, { name: AttributeDirective.TOOLBAR_PARTICIPANTS_PANEL, checked: true },
{ name: AttributeDirective.TOOLBAR_ACTIVITIES_PANEL, checked: true }, { name: AttributeDirective.TOOLBAR_ACTIVITIES_PANEL, checked: true },
@ -123,8 +123,8 @@ export class TestingComponent implements OnInit {
component: StructuralDirectives.ACTIVITIES_PANEL, component: StructuralDirectives.ACTIVITIES_PANEL,
directives: [ directives: [
{ name: AttributeDirective.ACTIVITIES_PANEL_RECORDING_ACTIVITY, checked: true }, { name: AttributeDirective.ACTIVITIES_PANEL_RECORDING_ACTIVITY, checked: true },
{ name: AttributeDirective.ACTIVITIES_PANEL_STREAMING_ACTIVITY, checked: true }, { name: AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ACTIVITY, checked: true },
{ name: AttributeDirective.ACTIVITIES_PANEL_STREAMING_ERROR, checked: false } { name: AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ERROR, checked: false }
] ]
} }
]; ];
@ -155,13 +155,13 @@ export class TestingComponent implements OnInit {
participantName = true; participantName = true;
settingsBtn = true; settingsBtn = true;
participantItemMuteBtn = true; participantItemMuteBtn = true;
streamingActivity = true; broadcastingActivity = true;
streamingBtn = true; broadcastingBtn = true;
tokens: { webcam: any; screen: any }; tokens: { webcam: any; screen: any };
subscription: Subscription; subscription: Subscription;
streamingError: StreamingError | undefined; broadcastingError: BroadcastingError | undefined;
recordingActivity = true; recordingActivity = true;
@ -264,8 +264,8 @@ export class TestingComponent implements OnInit {
this.fullscreenBtn = value; this.fullscreenBtn = value;
break; break;
case AttributeDirective.TOOLBAR_STREAMING: case AttributeDirective.TOOLBAR_BROADCASTING:
this.streamingBtn = value; this.broadcastingBtn = value;
break; break;
case AttributeDirective.TOOLBAR_LEAVE: case AttributeDirective.TOOLBAR_LEAVE:
@ -296,12 +296,12 @@ export class TestingComponent implements OnInit {
case AttributeDirective.ACTIVITIES_PANEL_RECORDING_ACTIVITY: case AttributeDirective.ACTIVITIES_PANEL_RECORDING_ACTIVITY:
this.recordingActivity = value; this.recordingActivity = value;
break; break;
case AttributeDirective.ACTIVITIES_PANEL_STREAMING_ACTIVITY: case AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ACTIVITY:
this.streamingActivity = value; this.broadcastingActivity = value;
break; break;
case AttributeDirective.ACTIVITIES_PANEL_STREAMING_ERROR: case AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ERROR:
this.streamingError = { message: 'TEST_ERROR', rtmpAvailable: true }; this.broadcastingError = { message: 'TEST_ERROR', broadcastAvailable: true };
break; break;
default: default:
break; break;