From 10bcc87ac5de516aad656514ecd9043fde0e469c Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Fri, 17 Feb 2023 17:03:15 +0100 Subject: [PATCH] openvidu-components: Renamed streaming by broadcasting --- .../e2e/angular.test.ts | 16 +- .../e2e/webcomponent-app/app.js | 28 +-- .../e2e/webcomponent.test.ts | 84 ++++----- .../activities-panel.component.html | 14 +- .../activities-panel.component.ts | 30 ++-- .../broadcasting-activity.component.css} | 20 +-- .../broadcasting-activity.component.html} | 62 +++---- .../broadcasting-activity.component.spec.ts | 23 +++ .../broadcasting-activity.component.ts | 168 +++++++++++++++++ .../streaming-activity.component.spec.ts | 23 --- .../streaming-activity.component.ts | 170 ------------------ .../components/session/session.component.ts | 25 ++- .../components/toolbar/toolbar.component.css | 8 +- .../components/toolbar/toolbar.component.html | 22 +-- .../components/toolbar/toolbar.component.ts | 58 +++--- .../videoconference.component.html | 6 +- .../videoconference.component.ts | 22 +-- .../api/activities-panel.directive.ts | 32 ++-- .../directives/api/api.directive.module.ts | 22 ++- .../api/broadcasting-activity.directive.ts | 55 ++++++ .../api/streaming-activity.directive.ts | 55 ------ .../lib/directives/api/toolbar.directive.ts | 32 ++-- .../src/lib/models/broadcasting.model.ts | 13 ++ .../src/lib/models/streaming.model.ts | 13 -- .../src/lib/openvidu-angular.module.ts | 4 +- .../broadcasting.service.spec.ts} | 8 +- .../broadcasting/broadcasting.service.ts | 49 +++++ .../config/openvidu-angular.config.service.ts | 26 +-- .../services/streaming/streaming.service.ts | 49 ----- .../openvidu-angular/src/public-api.ts | 8 +- .../src/app/openvidu-call/call.component.html | 10 +- .../src/app/openvidu-call/call.component.ts | 24 +-- .../src/app/services/rest.service.ts | 4 +- .../app/testing-app/testing.component.html | 6 +- .../src/app/testing-app/testing.component.ts | 32 ++-- 35 files changed, 606 insertions(+), 615 deletions(-) rename openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/{streaming-activity/streaming-activity.component.css => broadcasting-activity/broadcasting-activity.component.css} (89%) rename openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/{streaming-activity/streaming-activity.component.html => broadcasting-activity/broadcasting-activity.component.html} (88%) create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.spec.ts create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.ts delete mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.spec.ts delete mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.ts create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/broadcasting-activity.directive.ts delete mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/streaming-activity.directive.ts create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/models/broadcasting.model.ts delete mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/models/streaming.model.ts rename openvidu-components-angular/projects/openvidu-angular/src/lib/services/{streaming/streaming.service.spec.ts => broadcasting/broadcasting.service.spec.ts} (51%) create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/services/broadcasting/broadcasting.service.ts delete mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/services/streaming/streaming.service.ts diff --git a/openvidu-components-angular/e2e/angular.test.ts b/openvidu-components-angular/e2e/angular.test.ts index 949e932c..5dd7e29f 100644 --- a/openvidu-components-angular/e2e/angular.test.ts +++ b/openvidu-components-angular/e2e/angular.test.ts @@ -884,7 +884,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => { await utils.clickOn('#ovToolbar-checkbox'); - await utils.clickOn('#streamingButton-checkbox'); + await utils.clickOn('#broadcastingButton-checkbox'); await utils.clickOn('#apply-btn'); @@ -897,7 +897,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => { await utils.waitForElement('.mat-menu-content'); // 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 () => { @@ -1033,7 +1033,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => { await utils.clickOn('#ovActivitiesPanel-checkbox'); - await utils.clickOn('#streamingActivity-checkbox'); + await utils.clickOn('#broadcastingActivity-checkbox'); await utils.clickOn('#apply-btn'); @@ -1047,7 +1047,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => { 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 () => { @@ -1055,7 +1055,7 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => { await utils.clickOn('#ovActivitiesPanel-checkbox'); - await utils.clickOn('#streamingError-checkbox'); + await utils.clickOn('#broadcastingError-checkbox'); await utils.clickOn('#apply-btn'); @@ -1067,13 +1067,13 @@ describe('Testing ATTRIBUTE DIRECTIVES', () => { 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'); - await utils.clickOn('#streaming-activity'); + await utils.clickOn('#broadcasting-activity'); 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'); }); }); diff --git a/openvidu-components-angular/e2e/webcomponent-app/app.js b/openvidu-components-angular/e2e/webcomponent-app/app.js index b9d47adf..2165ca47 100644 --- a/openvidu-components-angular/e2e/webcomponent-app/app.js +++ b/openvidu-components-angular/e2e/webcomponent-app/app.js @@ -58,10 +58,10 @@ $(document).ready(() => { url.searchParams.get('toolbarRecordingButton') === null ? true : url.searchParams.get('toolbarRecordingButton') === 'true'; FULLSCREEN_BUTTON = url.searchParams.get('fullscreenBtn') === null ? true : url.searchParams.get('fullscreenBtn') === 'true'; 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) { - STREAMING_ERROR = url.searchParams.get('streamingError'); + if (url.searchParams.get('broadcastingError') !== null) { + STREAMING_ERROR = url.searchParams.get('broadcastingError'); } TOOLBAR_SETTINGS_BUTTON = @@ -75,9 +75,9 @@ $(document).ready(() => { PARTICIPANTS_PANEL_BUTTON = url.searchParams.get('participantsPanelBtn') === null ? true : url.searchParams.get('participantsPanelBtn') === 'true'; ACTIVITIES_STREAMING_ACTIVITY = - url.searchParams.get('activitiesPanelStreamingActivity') === null + url.searchParams.get('activitiesPanelBroadcastingActivity') === null ? true - : url.searchParams.get('activitiesPanelStreamingActivity') === 'true'; + : url.searchParams.get('activitiesPanelBroadcastingActivity') === 'true'; ACTIVITIES_RECORDING_ACTIVITY = url.searchParams.get('activitiesPanelRecordingActivity') === null ? true @@ -127,8 +127,8 @@ $(document).ready(() => { // await stopRecording(RECORDING_ID); // }); - webComponent.addEventListener('onToolbarStopStreamingClicked', async (event) => { - appendElement('onToolbarStopStreamingClicked'); + webComponent.addEventListener('onToolbarStopBroadcastingClicked', async (event) => { + appendElement('onToolbarStopBroadcastingClicked'); }); webComponent.addEventListener('onActivitiesPanelStartRecordingClicked', async (event) => { @@ -146,12 +146,12 @@ $(document).ready(() => { appendElement('onActivitiesPanelDeleteRecordingClicked'); ); - webComponent.addEventListener('onActivitiesPanelStartStreamingClicked', async (event) => { - appendElement('onActivitiesPanelStartStreamingClicked'); + webComponent.addEventListener('onActivitiesPanelStartBroadcastingClicked', async (event) => { + appendElement('onActivitiesPanelStartBroadcastingClicked'); }); - webComponent.addEventListener('onActivitiesPanelStopStreamingClicked', async (event) => { - appendElement('onActivitiesPanelStopStreamingClicked'); + webComponent.addEventListener('onActivitiesPanelStopBroadcastingClicked', async (event) => { + appendElement('onActivitiesPanelStopBroadcastingClicked'); }); webComponent.addEventListener('onSessionCreated', (event) => { @@ -217,7 +217,7 @@ async function joinSession(sessionName, participantName) { webComponent.toolbarCaptionsButton = CAPTIONS_BUTTON; webComponent.toolbarLeaveButton = LEAVE_BUTTON; webComponent.toolbarRecordingButton = RECORDING_BUTTON; - webComponent.toolbarStreamingButton = STREAMING_BUTTON; + webComponent.toolbarBroadcastingButton = STREAMING_BUTTON; webComponent.toolbarActivitiesPanelButton = ACTIVITIES_PANEL_BUTTON; webComponent.toolbarChatPanelButton = CHAT_PANEL_BUTTON; webComponent.toolbarParticipantsPanelButton = PARTICIPANTS_PANEL_BUTTON; @@ -230,10 +230,10 @@ async function joinSession(sessionName, participantName) { webComponent.recordingActivityRecordingsList = [{ status: 'ready' }]; webComponent.activitiesPanelRecordingActivity = ACTIVITIES_RECORDING_ACTIVITY; - webComponent.activitiesPanelStreamingActivity = ACTIVITIES_STREAMING_ACTIVITY; + webComponent.activitiesPanelBroadcastingActivity = ACTIVITIES_STREAMING_ACTIVITY; webComponent.recordingActivityRecordingError = RECORDING_ERROR; - webComponent.streamingActivityStreamingError = {message: STREAMING_ERROR, rtmpAvailable: true}; + webComponent.broadcastingActivityBroadcastingError = {message: STREAMING_ERROR, broadcastAvailable: true}; webComponent.participantName = participantName; webComponent.tokens = tokens; diff --git a/openvidu-components-angular/e2e/webcomponent.test.ts b/openvidu-components-angular/e2e/webcomponent.test.ts index 0b50b508..4ea8e8e7 100644 --- a/openvidu-components-angular/e2e/webcomponent.test.ts +++ b/openvidu-components-angular/e2e/webcomponent.test.ts @@ -308,7 +308,7 @@ describe('Testing API Directives', () => { }); 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(); @@ -324,8 +324,8 @@ describe('Testing API Directives', () => { await utils.waitForElement('.mat-menu-content'); expect(await utils.isPresent('.mat-menu-content')).to.be.true; - // Checking if streaming button is not present - expect(await utils.isPresent('#streaming-btn')).to.be.false; + // Checking if broadcasting button is not present + expect(await utils.isPresent('#broadcasting-btn')).to.be.false; }); 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 () => { let element; - const fixedUrl = `${url}&prejoin=false&streamingError=TEST_ERROR`; + const fixedUrl = `${url}&prejoin=false&broadcastingError=TEST_ERROR`; await browser.get(fixedUrl); await utils.checkSessionIsPresent(); @@ -587,26 +587,26 @@ describe('Testing API Directives', () => { await utils.waitForElement('#default-activities-panel'); 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-body-container'); - await utils.waitForElement('ov-streaming-activity'); - expect(await utils.isPresent('ov-streaming-activity')).to.be.true; + await utils.waitForElement('ov-broadcasting-activity'); + 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'); - // Open streaming + // Open broadcasting 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'); }); 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(); @@ -624,7 +624,7 @@ describe('Testing API Directives', () => { // Checking if recording activity exists 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 - // it('should receive the onToolbarStopStreamingClicked event', async () => { + // it('should receive the onToolbarStopBroadcastingClicked event', async () => { // await browser.get(`${url}&prejoin=false`); // await utils.checkSessionIsPresent(); @@ -846,18 +846,18 @@ describe('Testing videoconference EVENTS', () => { // await utils.waitForElement('.mat-menu-content'); - // await utils.waitForElement('#streaming-btn'); - // await utils.clickOn('#streaming-btn'); + // await utils.waitForElement('#broadcasting-btn'); + // await utils.clickOn('#broadcasting-btn'); // await browser.sleep(500); // await utils.waitForElement('.sidenav-menu'); // await utils.waitForElement('#activities-container'); - // await utils.waitForElement('#streaming-url-input'); - // const input = await utils.waitForElement('#rtmp-url-input'); - // await input.sendKeys('RTMPurl'); - // await utils.clickOn('#streaming-btn'); + // await utils.waitForElement('#broadcasting-url-input'); + // const input = await utils.waitForElement('#broadcast-url-input'); + // await input.sendKeys('BroadcastUrl'); + // await utils.clickOn('#broadcasting-btn'); // // Open more options menu // await utils.waitForElement('#more-options-btn'); @@ -868,12 +868,12 @@ describe('Testing videoconference EVENTS', () => { // await utils.waitForElement('.mat-menu-content'); - // await utils.waitForElement('#streaming-btn'); - // await utils.clickOn('#streaming-btn'); + // await utils.waitForElement('#broadcasting-btn'); + // await utils.clickOn('#broadcasting-btn'); - // // Checking if onToolbarStopStreamingClicked has been received - // await utils.waitForElement('#onToolbarStopStreamingClicked'); - // expect(await utils.isPresent('#onToolbarStopStreamingClicked')).to.be.true; + // // Checking if onToolbarStopBroadcastingClicked has been received + // await utils.waitForElement('#onToolbarStopBroadcastingClicked'); + // expect(await utils.isPresent('#onToolbarStopBroadcastingClicked')).to.be.true; // }); it('should receive the onActivitiesPanelStartRecordingClicked event', async () => { @@ -941,7 +941,7 @@ describe('Testing videoconference EVENTS', () => { 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 utils.checkSessionIsPresent(); @@ -956,35 +956,35 @@ describe('Testing videoconference EVENTS', () => { await utils.waitForElement('#activities-container'); expect(await utils.isPresent('#activities-container')).to.be.true; - await utils.waitForElement('#streaming-activity'); - await utils.clickOn('#streaming-activity'); + await utils.waitForElement('#broadcasting-activity'); + await utils.clickOn('#broadcasting-activity'); 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; - const input = await utils.waitForElement('#rtmp-url-input'); - await input.sendKeys('RTMPurl'); + const input = await utils.waitForElement('#broadcast-url-input'); + await input.sendKeys('BroadcastUrl'); - await utils.clickOn('#streaming-btn'); + await utils.clickOn('#broadcasting-btn'); - // Checking if onActivitiesPanelStartStreamingClicked has been received - await utils.waitForElement('#onActivitiesPanelStartStreamingClicked'); - expect(await utils.isPresent('#onActivitiesPanelStartStreamingClicked')).to.be.true; + // Checking if onActivitiesPanelStartBroadcastingClicked has been received + await utils.waitForElement('#onActivitiesPanelStartBroadcastingClicked'); + 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 - // await utils.waitForElement('#onActivitiesPanelStopStreamingClicked'); - // expect(await utils.isPresent('#onActivitiesPanelStopStreamingClicked')).to.be.true; - // expect(await utils.isPresent('#streaming-tag')).to.be.false; + // // Checking if onActivitiesPanelStopBroadcastingClicked has been received + // await utils.waitForElement('#onActivitiesPanelStopBroadcastingClicked'); + // expect(await utils.isPresent('#onActivitiesPanelStopBroadcastingClicked')).to.be.true; + // expect(await utils.isPresent('#broadcasting-tag')).to.be.false; }); it('should receive the onSessionCreated event', async () => { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html index d3dfb0c4..3038ad0d 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html @@ -16,13 +16,13 @@ (onStopRecordingClicked)="_onStopRecordingClicked()" (onDeleteRecordingClicked)="_onDeleteRecordingClicked($event)" > - + diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts index af1ef658..d4578a8a 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts @@ -30,16 +30,16 @@ export class ActivitiesPanelComponent implements OnInit { @Output() onDeleteRecordingClicked: EventEmitter = new EventEmitter(); /** - * Provides event notifications that fire when start streaming button has been clicked. - * The streaming should be started using the REST API. + * Provides event notifications that fire when start broadcasting button has been clicked. + * The broadcasting should be started using the REST API. */ - @Output() onStartStreamingClicked: EventEmitter = new EventEmitter(); + @Output() onStartBroadcastingClicked: EventEmitter = new EventEmitter(); /** - * Provides event notifications that fire when stop streaming button has been clicked. - * The streaming should be stopped using the REST API. + * Provides event notifications that fire when stop broadcasting button has been clicked. + * The broadcasting should be stopped using the REST API. */ - @Output() onStopStreamingClicked: EventEmitter = new EventEmitter(); + @Output() onStopBroadcastingClicked: EventEmitter = new EventEmitter(); /** * @internal @@ -49,10 +49,10 @@ export class ActivitiesPanelComponent implements OnInit { * @internal */ showRecordingActivity: boolean = true; - showStreamingActivity: boolean = true; + showBroadcastingActivity: boolean = true; private panelSubscription: Subscription; private recordingActivitySub: Subscription; - private streamingActivitySub: Subscription; + private broadcastingActivitySub: Subscription; /** * @internal @@ -73,7 +73,7 @@ export class ActivitiesPanelComponent implements OnInit { ngOnDestroy() { if (this.panelSubscription) this.panelSubscription.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); } - _onStartStreamingClicked(rtmpUrl: string) { - this.onStartStreamingClicked.emit(rtmpUrl); + _onStartBroadcastingClicked(broadcastUrl: string) { + this.onStartBroadcastingClicked.emit(broadcastUrl); } - _onStopStreamingClicked() { - this.onStopStreamingClicked.emit(); + _onStopBroadcastingClicked() { + this.onStopBroadcastingClicked.emit(); } private subscribeToPanelToggling() { @@ -126,8 +126,8 @@ export class ActivitiesPanelComponent implements OnInit { this.cd.markForCheck(); }); - this.streamingActivitySub = this.libService.streamingActivity.subscribe((value: boolean) => { - this.showStreamingActivity = value; + this.broadcastingActivitySub = this.libService.broadcastingActivity.subscribe((value: boolean) => { + this.showBroadcastingActivity = value; this.cd.markForCheck(); }); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.css similarity index 89% rename from openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.css rename to openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.css index f4f88cf7..2f7acf43 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.css @@ -1,4 +1,4 @@ -#streaming-status { +#broadcasting-status { color: var(--ov-text-color); display: inline; padding: 3px; @@ -16,18 +16,18 @@ font-size: 14px; } -#streaming-icon { +#broadcasting-icon { color: #5903ca; } -.streaming-duration { +.broadcasting-duration { background-color: var(--ov-light-color); padding: 4px 8px; border-radius: var(--ov-panel-radius); font-weight: 500; } -.streaming-duration mat-icon { +.broadcasting-duration mat-icon { font-size: 18px; width: 18px; height: 18px; @@ -71,11 +71,11 @@ text-align: center; } -.streaming-error { +.broadcasting-error { color: var(--ov-warn-color); font-weight: 600; } -.streaming-name { +.broadcasting-name { font-size: 16px; font-weight: bold; } @@ -85,23 +85,23 @@ font-weight: bold; } -.streaming-action-buttons { +.broadcasting-action-buttons { margin-top: 20px; margin-bottom: 20px; } -/* #start-streaming-btn { +/* #start-broadcasting-btn { width: 100%; background-color: var(--ov-tertiary-color); color: var(--ov-text-color); } */ -#stop-streaming-btn { +#stop-broadcasting-btn { /* background-color: var(--ov-warn-color); */ color: var(--ov-warn-color); } -#reset-streaming-status-btn { +#reset-broadcasting-status-btn { width: 100%; background-color: var(--ov-light-color); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html similarity index 88% rename from openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.html rename to openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html index 51dd133d..3810db88 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html @@ -6,34 +6,34 @@ matListAvatar class="activity-icon" [ngClass]="{ - started: streamingStatus === streamingStatusEnum.STARTED, - stopped: streamingStatus === streamingStatusEnum.STOPPED, - failed: streamingStatus === streamingStatusEnum.FAILED, - pending: streamingStatus === streamingStatusEnum.STARTING || streamingStatus === streamingStatusEnum.STOPPING + started: broadcastingStatus === broadcastingStatusEnum.STARTED, + stopped: broadcastingStatus === broadcastingStatusEnum.STOPPED, + failed: broadcastingStatus === broadcastingStatusEnum.FAILED, + pending: broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING }" > sensors - error - sensors + error + sensors

{{ 'PANEL.STREAMING.TITLE' | translate }}

{{ 'PANEL.STREAMING.SUBTITLE' | translate }}

- {{ streamingStatus | uppercase }} + {{ broadcastingStatus | uppercase }}
@@ -41,47 +41,47 @@
- -
+ +
- +
@@ -90,11 +90,11 @@

{{ 'CONTENT_SUBTITLE' | translate }}

{{ 'PANEL.STREAMING.REQUIRED_URL' | translate }}

-

{{ streamingError.message }}

+

{{ broadcastingError.message }}

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.spec.ts new file mode 100644 index 00000000..9a10ec7d --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BroadcastingActivityComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(BroadcastingActivityComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.ts new file mode 100644 index 00000000..319a28a1 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.ts @@ -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 = new EventEmitter(); + + /** + * Provides event notifications that fire when stop broadcasting button has been clicked. + * The broadcasting should be stopped using the REST API. + */ + @Output() onStopBroadcastingClicked: EventEmitter = new EventEmitter(); + + /** + * @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(); + } + }); + } +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.spec.ts deleted file mode 100644 index 2d35125f..00000000 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ StreamingActivityComponent ] - }) - .compileComponents(); - - fixture = TestBed.createComponent(StreamingActivityComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.ts deleted file mode 100644 index a1f6dcef..00000000 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/streaming-activity/streaming-activity.component.ts +++ /dev/null @@ -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 = new EventEmitter(); - - /** - * Provides event notifications that fire when stop streaming button has been clicked. - * The streaming should be stopped using the REST API. - */ - @Output() onStopStreamingClicked: EventEmitter = new EventEmitter(); - - /** - * @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(); - } - }); - } -} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index 967c019a..daa6d532 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts @@ -31,11 +31,12 @@ import { VideoType } from '../../models/video-type.model'; import { animate, style, transition, trigger } from '@angular/animations'; import { MatDrawerContainer, MatSidenav } from '@angular/material/sidenav'; import { skip, Subscription } from 'rxjs'; +import { BroadcastingStatus } from '../../models/broadcasting.model'; import { SidenavMode } from '../../models/layout.model'; import { PanelEvent, PanelType } from '../../models/panel.model'; import { Signal } from '../../models/signal.model'; -import { StreamingStatus } from '../../models/streaming.model'; import { ActionService } from '../../services/action/action.service'; +import { BroadcastingService } from '../../services/broadcasting/broadcasting.service'; import { CaptionService } from '../../services/caption/caption.service'; import { ChatService } from '../../services/chat/chat.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 { PlatformService } from '../../services/platform/platform.service'; import { RecordingService } from '../../services/recording/recording.service'; -import { StreamingService } from '../../services/streaming/streaming.service'; import { TranslateService } from '../../services/translate/translate.service'; import { VirtualBackgroundService } from '../../services/virtual-background/virtual-background.service'; @@ -101,7 +101,7 @@ export class SessionComponent implements OnInit, OnDestroy { protected layoutService: LayoutService, protected panelService: PanelService, private recordingService: RecordingService, - private streamingService: StreamingService, + private broadcastingService: BroadcastingService, private translateService: TranslateService, private captionService: CaptionService, private platformService: PlatformService, @@ -170,7 +170,6 @@ export class SessionComponent implements OnInit, OnDestroy { async ngOnInit() { if (!this.usedInPrejoinPage) { - if (!this.openviduService.getScreenToken()) { // Hide screenshare button if screen token does not exist this.libService.screenshareButton.next(false); @@ -199,8 +198,8 @@ export class SessionComponent implements OnInit, OnDestroy { this.subscribeToRecordingEvents(); } - if (this.libService.isStreamingEnabled()) { - this.subscribeToStreamingEvents(); + if (this.libService.isBroadcastingEnabled()) { + this.subscribeToBroadcastingEvents(); } } this.preparing = false; @@ -438,18 +437,14 @@ export class SessionComponent implements OnInit, OnDestroy { } private subscribeToRecordingEvents() { - this.session.on('recordingStarted', (event: RecordingEvent) => { - this.recordingService.startRecording(event); - }); + this.session.on('recordingStarted', (event: RecordingEvent) => this.recordingService.startRecording(event)); - this.session.on('recordingStopped', (event: RecordingEvent) => { - this.recordingService.stopRecording(event); - }); + this.session.on('recordingStopped', (event: RecordingEvent) => this.recordingService.stopRecording(event)); } - private subscribeToStreamingEvents() { - this.session.on('broadcastStarted', () => this.streamingService.updateStatus(StreamingStatus.STARTED)); - this.session.on('broadcastStopped', () => this.streamingService.updateStatus(StreamingStatus.STOPPED)); + private subscribeToBroadcastingEvents() { + this.session.on('broadcastStarted', () => this.broadcastingService.updateStatus(BroadcastingStatus.STARTED)); + this.session.on('broadcastStopped', () => this.broadcastingService.updateStatus(BroadcastingStatus.STOPPED)); } private startUpdateLayoutInterval() { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css index 36416269..f6b58257 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css @@ -71,7 +71,7 @@ } .recording-tag, -.streaming-tag { +.broadcasting-tag { padding: 0 10px; border-radius: var(--ov-panel-radius); width: fit-content; @@ -84,19 +84,19 @@ .recording-tag { background-color: var(--ov-warn-color); } -.streaming-tag { +.broadcasting-tag { background-color: #5903ca; } .recording-tag mat-icon, -.streaming-tag mat-icon { +.broadcasting-tag mat-icon { font-size: 16px; display: inline; vertical-align: sub; margin-right: 5px; } -#streaming-btn > mat-icon { +#broadcasting-btn > mat-icon { color: #5903ca; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html index df456d72..cecc799a 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html @@ -9,10 +9,10 @@ REC | {{ recordingTime | date : 'H:mm:ss' }}
-
+
sensors LIVE - | {{ streamingTime | date : 'H:mm:ss' }} + | {{ broadcastingTime | date : 'H:mm:ss' }}
@@ -122,25 +122,25 @@ - + diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts index 9ad282c3..ea59f4d5 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts @@ -24,13 +24,14 @@ import { ToolbarAdditionalButtonsDirective, ToolbarAdditionalPanelButtonsDirective } from '../../directives/template/openvidu-angular.directive'; +import { BroadcastingStatus } from '../../models/broadcasting.model'; import { ChatMessage } from '../../models/chat.model'; import { ILogger } from '../../models/logger.model'; import { PanelEvent, PanelType } from '../../models/panel.model'; import { OpenViduRole, ParticipantAbstractModel } from '../../models/participant.model'; import { RecordingInfo, RecordingStatus } from '../../models/recording.model'; -import { StreamingStatus } from '../../models/streaming.model'; import { ActionService } from '../../services/action/action.service'; +import { BroadcastingService } from '../../services/broadcasting/broadcasting.service'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; import { DeviceService } from '../../services/device/device.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 { RecordingService } from '../../services/recording/recording.service'; import { StorageService } from '../../services/storage/storage.service'; -import { StreamingService } from '../../services/streaming/streaming.service'; import { TranslateService } from '../../services/translate/translate.service'; /** @@ -185,9 +185,9 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { @Output() onStartRecordingClicked: EventEmitter = new EventEmitter(); /** - * 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 = new EventEmitter(); + @Output() onStopBroadcastingClicked: EventEmitter = new EventEmitter(); /** * Provides event notifications that fire when stop recording button has been clicked. @@ -283,7 +283,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { /** * @ignore */ - showStreamingButton: boolean = true; + showBroadcastingButton: boolean = true; /** * @ignore @@ -340,7 +340,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { /** * @ignore */ - streamingStatus: StreamingStatus = StreamingStatus.STOPPED; + broadcastingStatus: BroadcastingStatus = BroadcastingStatus.STOPPED; /** * @ignore */ @@ -348,7 +348,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { /** * @ignore */ - _streamingStatus = StreamingStatus; + _broadcastingStatus = BroadcastingStatus; /** * @ignore @@ -357,7 +357,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { /** * @ignore */ - streamingTime: Date; + broadcastingTime: Date; /** * @ignore @@ -379,9 +379,9 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { private backgroundEffectsButtonSub: Subscription; private leaveButtonSub: Subscription; private recordingButtonSub: Subscription; - private streamingButtonSub: Subscription; + private broadcastingButtonSub: Subscription; private recordingSubscription: Subscription; - private streamingSubscription: Subscription; + private broadcastingSubscription: Subscription; private activitiesPanelButtonSub: Subscription; private participantsPanelButtonSub: Subscription; private chatPanelButtonSub: Subscription; @@ -409,7 +409,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { private libService: OpenViduAngularConfigService, private platformService: PlatformService, private recordingService: RecordingService, - private streamingService: StreamingService, + private broadcastingService: BroadcastingService, private translateService: TranslateService, private storageSrv: StorageService ) { @@ -452,7 +452,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { this.subscribeToMenuToggling(); this.subscribeToChatMessages(); this.subscribeToRecordingStatus(); - this.subscribeToStreamingStatus(); + this.subscribeToBroadcastingStatus(); this.subscribeToScreenSize(); this.subscribeToCaptionsToggling(); } @@ -473,7 +473,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { if (this.backgroundEffectsButtonSub) this.backgroundEffectsButtonSub.unsubscribe(); if (this.leaveButtonSub) this.leaveButtonSub.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.chatPanelButtonSub) this.chatPanelButtonSub.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.activitiesPanelButtonSub) this.activitiesPanelButtonSub.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.settingsButtonSub) this.settingsButtonSub.unsubscribe(); if (this.captionsSubs) this.captionsSubs.unsubscribe(); @@ -571,14 +571,14 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { /** * @ignore */ - toggleStreaming() { - if (this.streamingStatus === StreamingStatus.STARTED) { - this.log.d('Stopping streaming'); - this.onStopStreamingClicked.emit(); - this.streamingService.updateStatus(StreamingStatus.STOPPING); - } else if (this.streamingStatus === StreamingStatus.STOPPED) { + toggleBroadcasting() { + if (this.broadcastingStatus === BroadcastingStatus.STARTED) { + this.log.d('Stopping broadcasting'); + this.onStopBroadcastingClicked.emit(); + this.broadcastingService.updateStatus(BroadcastingStatus.STOPPING); + } else if (this.broadcastingStatus === BroadcastingStatus.STOPPED) { if (this.showActivitiesPanelButton && !this.isActivitiesOpened) { - this.toggleActivitiesPanel('streaming'); + this.toggleActivitiesPanel('broadcasting'); } } } @@ -706,14 +706,14 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { }); } - private subscribeToStreamingStatus() { - this.streamingSubscription = this.streamingService.streamingStatusObs + private subscribeToBroadcastingStatus() { + this.broadcastingSubscription = this.broadcastingService.broadcastingStatusObs .pipe(skip(1)) - .subscribe((ev: { status: StreamingStatus, time?: Date } | undefined) => { + .subscribe((ev: { status: BroadcastingStatus, time?: Date } | undefined) => { if (!!ev) { - this.streamingStatus = ev.status; + this.broadcastingStatus = ev.status; if (ev.time) { - this.streamingTime = ev.time; + this.broadcastingTime = ev.time; } this.cd.markForCheck(); } @@ -745,8 +745,8 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { this.cd.markForCheck(); }); - this.streamingButtonSub = this.libService.streamingButtonObs.subscribe((value: boolean) => { - this.showStreamingButton = value; + this.broadcastingButtonSub = this.libService.broadcastingButtonObs.subscribe((value: boolean) => { + this.showBroadcastingButton = value; this.checkDisplayMoreOptions(); this.cd.markForCheck(); }); @@ -806,7 +806,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { this.showFullscreenButton || this.showBackgroundEffectsButton || this.showRecordingButton || - this.showStreamingButton || + this.showBroadcastingButton || this.showSettingsButton; } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html index b2ca9917..ecfb68c6 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html @@ -50,7 +50,7 @@ (onActivitiesPanelButtonClicked)="onActivitiesPanelButtonClicked()" (onStartRecordingClicked)="onStartRecordingClicked('toolbar')" (onStopRecordingClicked)="onStopRecordingClicked('toolbar')" - (onStopStreamingClicked)="onStopStreamingClicked('toolbar')" + (onStopBroadcastingClicked)="onStopBroadcastingClicked('toolbar')" > @@ -100,8 +100,8 @@ (onStartRecordingClicked)="onStartRecordingClicked('panel')" (onStopRecordingClicked)="onStopRecordingClicked('panel')" (onDeleteRecordingClicked)="onDeleteRecordingClicked($event)" - (onStartStreamingClicked)="onStartStreamingClicked($event)" - (onStopStreamingClicked)="onStopStreamingClicked('panel')" + (onStartBroadcastingClicked)="onStartBroadcastingClicked($event)" + (onStopBroadcastingClicked)="onStopBroadcastingClicked('panel')" > diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts index e5d1ab6d..4c49cea1 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts @@ -384,19 +384,19 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni @Output() onActivitiesPanelPlayRecordingClicked: EventEmitter = new EventEmitter(); /** - * 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 = new EventEmitter(); + @Output() onActivitiesPanelStartBroadcastingClicked: EventEmitter = new EventEmitter(); /** - * 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 = new EventEmitter(); + @Output() onActivitiesPanelStopBroadcastingClicked: EventEmitter = new EventEmitter(); /** - * 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 = new EventEmitter(); + @Output() onToolbarStopBroadcastingClicked: EventEmitter = new EventEmitter(); /** * Provides event notifications that fire when OpenVidu Session is created. @@ -695,22 +695,22 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni /** * @internal */ - onStartStreamingClicked(rtmpUrl: string) { + onStartBroadcastingClicked(broadcastUrl: string) { // if (from === 'toolbar') { // this.onToolbarStartRecordingClicked.emit(); // } else if (from === 'panel') { - this.onActivitiesPanelStartStreamingClicked.emit(rtmpUrl); + this.onActivitiesPanelStartBroadcastingClicked.emit(broadcastUrl); // } } /** * @internal */ - onStopStreamingClicked(from: string) { + onStopBroadcastingClicked(from: string) { if (from === 'toolbar') { - this.onToolbarStopStreamingClicked.emit(); + this.onToolbarStopBroadcastingClicked.emit(); } else if (from === 'panel') { - this.onActivitiesPanelStopStreamingClicked.emit(); + this.onActivitiesPanelStopBroadcastingClicked.emit(); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/activities-panel.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/activities-panel.directive.ts index 8adfba84..052ef0c7 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/activities-panel.directive.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/activities-panel.directive.ts @@ -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` * * It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `activitiesPanel` component: * * @example - * + * * * \ * And it also can be used in the {@link ActivitiesPanelComponent}. * @example - * + * */ @Directive({ - selector: 'ov-videoconference[activitiesPanelStreamingActivity], ov-activities-panel[streamingActivity]' + selector: 'ov-videoconference[activitiesPanelBroadcastingActivity], ov-activities-panel[broadcastingActivity]' }) -export class ActivitiesPanelStreamingActivityDirective implements AfterViewInit, OnDestroy { - @Input() set activitiesPanelStreamingActivity(value: boolean) { - this.streamingActivityValue = value; - this.update(this.streamingActivityValue); +export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewInit, OnDestroy { + @Input() set activitiesPanelBroadcastingActivity(value: boolean) { + this.broadcastingActivityValue = value; + this.update(this.broadcastingActivityValue); } - @Input() set streamingActivity(value: boolean) { - this.streamingActivityValue = value; - this.update(this.streamingActivityValue); + @Input() set broadcastingActivity(value: boolean) { + this.broadcastingActivityValue = value; + this.update(this.broadcastingActivityValue); } - streamingActivityValue: boolean = true; + broadcastingActivityValue: boolean = true; constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} ngAfterViewInit() { - this.update(this.streamingActivityValue); + this.update(this.broadcastingActivityValue); } ngOnDestroy(): void { this.clear(); } clear() { - this.streamingActivityValue = true; + this.broadcastingActivityValue = true; this.update(true); } update(value: boolean) { - if (this.libService.streamingActivity.getValue() !== value) { - this.libService.streamingActivity.next(value); + if (this.libService.broadcastingActivity.getValue() !== value) { + this.libService.broadcastingActivity.next(value); } } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts index 4a609c45..8464e385 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts @@ -1,6 +1,7 @@ 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 { BroadcastingActivityBroadcastingErrorDirective } from './broadcasting-activity.directive'; import { LogoDirective } from './internals.directive'; import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive'; import { RecordingActivityRecordingErrorDirective, RecordingActivityRecordingsListDirective } from './recording-activity.directive'; @@ -9,11 +10,9 @@ import { StreamDisplayParticipantNameDirective, StreamSettingsButtonDirective } from './stream.directive'; -import { StreamingActivityStreamingErrorDirective } from './streaming-activity.directive'; import { ToolbarActivitiesPanelButtonDirective, - ToolbarBackgroundEffectsButtonDirective, - ToolbarCaptionsButtonDirective, + ToolbarBackgroundEffectsButtonDirective, ToolbarBroadcastingButtonDirective, ToolbarCaptionsButtonDirective, ToolbarChatPanelButtonDirective, ToolbarDisplayLogoDirective, ToolbarDisplaySessionNameDirective, @@ -22,8 +21,7 @@ import { ToolbarParticipantsPanelButtonDirective, ToolbarRecordingButtonDirective, ToolbarScreenshareButtonDirective, - ToolbarSettingsButtonDirective, - ToolbarStreamingButtonDirective + ToolbarSettingsButtonDirective } from './toolbar.directive'; import { AudioMutedDirective, @@ -51,7 +49,7 @@ import { ToolbarCaptionsButtonDirective, ToolbarLeaveButtonDirective, ToolbarRecordingButtonDirective, - ToolbarStreamingButtonDirective, + ToolbarBroadcastingButtonDirective, ToolbarParticipantsPanelButtonDirective, ToolbarChatPanelButtonDirective, ToolbarActivitiesPanelButtonDirective, @@ -65,10 +63,10 @@ import { ParticipantPanelItemMuteButtonDirective, ParticipantNameDirective, ActivitiesPanelRecordingActivityDirective, - ActivitiesPanelStreamingActivityDirective, + ActivitiesPanelBroadcastingActivityDirective, RecordingActivityRecordingsListDirective, RecordingActivityRecordingErrorDirective, - StreamingActivityStreamingErrorDirective, + BroadcastingActivityBroadcastingErrorDirective, AdminRecordingsListDirective, AdminLoginDirective ], @@ -86,7 +84,7 @@ import { ToolbarCaptionsButtonDirective, ToolbarLeaveButtonDirective, ToolbarRecordingButtonDirective, - ToolbarStreamingButtonDirective, + ToolbarBroadcastingButtonDirective, ToolbarParticipantsPanelButtonDirective, ToolbarChatPanelButtonDirective, ToolbarActivitiesPanelButtonDirective, @@ -100,10 +98,10 @@ import { ParticipantPanelItemMuteButtonDirective, ParticipantNameDirective, ActivitiesPanelRecordingActivityDirective, - ActivitiesPanelStreamingActivityDirective, + ActivitiesPanelBroadcastingActivityDirective, RecordingActivityRecordingsListDirective, RecordingActivityRecordingErrorDirective, - StreamingActivityStreamingErrorDirective, + BroadcastingActivityBroadcastingErrorDirective, AdminRecordingsListDirective, AdminLoginDirective ] diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/broadcasting-activity.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/broadcasting-activity.directive.ts new file mode 100644 index 00000000..3c23f844 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/broadcasting-activity.directive.ts @@ -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 + * + * + * \ + * And it also can be used in the {@link BroadcastingActivityComponent}. + * @example + * + */ +@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); + } + } +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/streaming-activity.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/streaming-activity.directive.ts deleted file mode 100644 index de16d2bf..00000000 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/streaming-activity.directive.ts +++ /dev/null @@ -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 - * - * - * \ - * And it also can be used in the {@link StreamingActivityComponent}. - * @example - * - */ -@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); - } - } -} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/toolbar.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/toolbar.directive.ts index 83a7e312..845ae6a5 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/toolbar.directive.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/toolbar.directive.ts @@ -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` * * It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `toolbar` component: * * @example - * + * * * \ * And it also can be used in the {@link ToolbarComponent}. * @example - * + * * */ @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 */ - @Input() set toolbarStreamingButton(value: boolean) { - this.streamingValue = value; - this.update(this.streamingValue); + @Input() set toolbarBroadcastingButton(value: boolean) { + this.broadcastingValue = value; + this.update(this.broadcastingValue); } /** * @ignore */ - @Input() set streamingButton(value: boolean) { - this.streamingValue = value; - this.update(this.streamingValue); + @Input() set broadcastingButton(value: boolean) { + this.broadcastingValue = value; + this.update(this.broadcastingValue); } - private streamingValue: boolean = true; + private broadcastingValue: boolean = true; /** * @ignore @@ -166,20 +166,20 @@ export class ToolbarStreamingButtonDirective implements AfterViewInit, OnDestroy constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} ngAfterViewInit() { - this.update(this.streamingValue); + this.update(this.broadcastingValue); } ngOnDestroy(): void { this.clear(); } private clear() { - this.streamingValue = true; + this.broadcastingValue = true; this.update(true); } private update(value: boolean) { - if (this.libService.streamingButton.getValue() !== value) { - this.libService.streamingButton.next(value); + if (this.libService.broadcastingButton.getValue() !== value) { + this.libService.broadcastingButton.next(value); } } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/broadcasting.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/broadcasting.model.ts new file mode 100644 index 00000000..cbc438f2 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/broadcasting.model.ts @@ -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; +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/streaming.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/streaming.model.ts deleted file mode 100644 index d961418b..00000000 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/streaming.model.ts +++ /dev/null @@ -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; -} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts index 53abfb1c..c05c77cf 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts @@ -49,8 +49,8 @@ import { AvatarProfileComponent } from './components/avatar-profile/avatar-profi import { CaptionsComponent } from './components/captions/captions.component'; import { ProFeatureDialogTemplateComponent } from './components/dialogs/pro-feature-dialog.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 { StreamingActivityComponent } from './components/panel/activities-panel/streaming-activity/streaming-activity.component'; import { BackgroundEffectsPanelComponent } from './components/panel/background-effects-panel/background-effects-panel.component'; import { SettingsPanelComponent } from './components/panel/settings-panel/settings-panel.component'; import { AudioDevicesComponent } from './components/settings/audio-devices/audio-devices.component'; @@ -71,7 +71,7 @@ const publicComponents = [ PanelComponent, ActivitiesPanelComponent, RecordingActivityComponent, - StreamingActivityComponent, + BroadcastingActivityComponent, ParticipantsPanelComponent, ParticipantPanelItemComponent, ChatPanelComponent, diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/streaming/streaming.service.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/broadcasting/broadcasting.service.spec.ts similarity index 51% rename from openvidu-components-angular/projects/openvidu-angular/src/lib/services/streaming/streaming.service.spec.ts rename to openvidu-components-angular/projects/openvidu-angular/src/lib/services/broadcasting/broadcasting.service.spec.ts index f8349f8e..f0261e7c 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/streaming/streaming.service.spec.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/broadcasting/broadcasting.service.spec.ts @@ -1,13 +1,13 @@ import { TestBed } from '@angular/core/testing'; -import { StreamingService } from './streaming.service'; +import { BroadcastingService } from './broadcasting.service'; -describe('StreamingService', () => { - let service: StreamingService; +describe('BroadcastingService', () => { + let service: BroadcastingService; beforeEach(() => { TestBed.configureTestingModule({}); - service = TestBed.inject(StreamingService); + service = TestBed.inject(BroadcastingService); }); it('should be created', () => { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/broadcasting/broadcasting.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/broadcasting/broadcasting.service.ts new file mode 100644 index 00000000..419df1d0 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/broadcasting/broadcasting.service.ts @@ -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 = >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; + } +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts index 41ea5729..bbeadc5a 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts @@ -1,8 +1,8 @@ import { Inject, Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { OpenViduAngularConfig, ParticipantFactoryFunction } from '../../config/openvidu-angular.config'; +import { BroadcastingError } from '../../models/broadcasting.model'; import { RecordingInfo } from '../../models/recording.model'; -import { StreamingError } from '../../models/streaming.model'; // import { version } from '../../../../package.json'; @@ -66,16 +66,16 @@ export class OpenViduAngularConfigService { recordingsListObs: Observable; recordingButton = >new BehaviorSubject(true); recordingButtonObs: Observable; - streamingButton = >new BehaviorSubject(true); - streamingButtonObs: Observable; + broadcastingButton = >new BehaviorSubject(true); + broadcastingButtonObs: Observable; recordingActivity = >new BehaviorSubject(true); recordingActivityObs: Observable; - streamingActivity = >new BehaviorSubject(true); - streamingActivityObs: Observable; + broadcastingActivity = >new BehaviorSubject(true); + broadcastingActivityObs: Observable; recordingError = >new BehaviorSubject(null); recordingErrorObs: Observable; - streamingErrorObs: Observable; - streamingError = >new BehaviorSubject(undefined); + broadcastingErrorObs: Observable; + broadcastingError = >new BehaviorSubject(undefined); // Admin adminRecordingsList: BehaviorSubject = new BehaviorSubject([]); adminRecordingsListObs: Observable; @@ -102,7 +102,7 @@ export class OpenViduAngularConfigService { this.displaySessionNameObs = this.displaySessionName.asObservable(); this.displayLogoObs = this.displayLogo.asObservable(); this.recordingButtonObs = this.recordingButton.asObservable(); - this.streamingButtonObs = this.streamingButton.asObservable(); + this.broadcastingButtonObs = this.broadcastingButton.asObservable(); this.toolbarSettingsButtonObs = this.toolbarSettingsButton.asObservable(); this.captionsButtonObs = this.captionsButton.asObservable(); //Stream observables @@ -115,9 +115,9 @@ export class OpenViduAngularConfigService { this.recordingActivityObs = this.recordingActivity.asObservable(); this.recordingsListObs = this.recordingsList.asObservable(); this.recordingErrorObs = this.recordingError.asObservable(); - // Streaming activity - this.streamingActivityObs = this.streamingActivity.asObservable(); - this.streamingErrorObs = this.streamingError.asObservable(); + // Broadcasting activity + this.broadcastingActivityObs = this.broadcastingActivity.asObservable(); + this.broadcastingErrorObs = this.broadcastingError.asObservable(); // Admin dashboard this.adminRecordingsListObs = this.adminRecordingsList.asObservable(); this.adminLoginErrorObs = this.adminLoginError.asObservable(); @@ -142,7 +142,7 @@ export class OpenViduAngularConfigService { return this.recordingButton.getValue() && this.recordingActivity.getValue(); } - isStreamingEnabled(): boolean { - return this.streamingButton.getValue() && this.streamingActivity.getValue(); + isBroadcastingEnabled(): boolean { + return this.broadcastingButton.getValue() && this.broadcastingActivity.getValue(); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/streaming/streaming.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/streaming/streaming.service.ts deleted file mode 100644 index 3a126945..00000000 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/streaming/streaming.service.ts +++ /dev/null @@ -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 = >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; - } -} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts index 93971506..07da6928 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts @@ -7,8 +7,8 @@ export * from './lib/admin/dashboard/dashboard.component'; export * from './lib/admin/login/login.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/broadcasting-activity/broadcasting-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/panel.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/admin.directive'; 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/participant-panel-item.directive'; export * from './lib/directives/api/recording-activity.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/videoconference.directive'; export * from './lib/directives/template/openvidu-angular.directive'; export * from './lib/directives/template/openvidu-angular.directive.module'; +export * from './lib/models/broadcasting.model'; // Models export * from './lib/models/panel.model'; export * from './lib/models/participant.model'; export * from './lib/models/recording.model'; export * from './lib/models/signal.model'; -export * from './lib/models/streaming.model'; export * from './lib/models/token.model'; export * from './lib/models/video-type.model'; export * from './lib/openvidu-angular.module'; @@ -44,11 +44,11 @@ export * from './lib/pipes/participant.pipe'; export * from './lib/pipes/recording.pipe'; // Services 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/layout/layout.service'; export * from './lib/services/openvidu/openvidu.service'; export * from './lib/services/panel/panel.service'; export * from './lib/services/participant/participant.service'; export * from './lib/services/recording/recording.service'; -export * from './lib/services/streaming/streaming.service'; diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.html b/openvidu-components-angular/src/app/openvidu-call/call.component.html index cc9f31b7..a6008065 100644 --- a/openvidu-components-angular/src/app/openvidu-call/call.component.html +++ b/openvidu-components-angular/src/app/openvidu-call/call.component.html @@ -12,7 +12,7 @@ [toolbarFullscreenButton]="true" [toolbarCaptionsButton]="true" [toolbarRecordingButton]="true" - [toolbarStreamingButton]="true" + [toolbarBroadcastingButton]="true" [toolbarBackgroundEffectsButton]="true" [toolbarLeaveButton]="true" [toolbarChatPanelButton]="true" @@ -26,7 +26,7 @@ [activitiesPanelRecordingActivity]="true" [recordingActivityRecordingsList]="recordingList" [recordingActivityRecordingError]="recordingError" - [streamingActivityStreamingError]="streamingError" + [broadcastingActivityBroadcastingError]="broadcastingError" [toolbarSettingsButton]="true" (onJoinButtonClicked)="onJoinClicked()" (onToolbarLeaveButtonClicked)="onToolbarLeaveButtonClicked()" @@ -41,9 +41,9 @@ (onActivitiesPanelStartRecordingClicked)="onStartRecordingClicked()" (onActivitiesPanelStopRecordingClicked)="onStopRecordingClicked()" (onActivitiesPanelDeleteRecordingClicked)="onDeleteRecordingClicked($event)" - (onActivitiesPanelStartStreamingClicked)="onStartStreamingClicked($event)" - (onActivitiesPanelStopStreamingClicked)="onStopStreamingClicked()" - (onToolbarStopStreamingClicked)="onStopStreamingClicked()" + (onActivitiesPanelStartBroadcastingClicked)="onStartBroadcastingClicked($event)" + (onActivitiesPanelStopBroadcastingClicked)="onStopBroadcastingClicked()" + (onToolbarStopBroadcastingClicked)="onStopBroadcastingClicked()" (onNodeCrashed)="onNodeCrashed()" > diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.ts b/openvidu-components-angular/src/app/openvidu-call/call.component.ts index 611af7c9..534ea4b1 100644 --- a/openvidu-components-angular/src/app/openvidu-call/call.component.ts +++ b/openvidu-components-angular/src/app/openvidu-call/call.component.ts @@ -16,7 +16,7 @@ export class CallComponent implements OnInit { isSessionAlive: boolean = false; recordingList: RecordingInfo[] = []; recordingError: any; - streamingError: any; + broadcastingError: any; constructor(private restService: RestService) {} @@ -81,27 +81,27 @@ export class CallComponent implements OnInit { console.log('TOOLBAR LEAVE CLICKED'); } - async onStartStreamingClicked(rtmpUrl: string) { - console.log('START STREAMING', rtmpUrl); + async onStartBroadcastingClicked(broadcastUrl: string) { + console.log('START STREAMING', broadcastUrl); try { - this.streamingError = null; - const resp = await this.restService.startStreaming(rtmpUrl); - console.log('Streaming response ', resp); + this.broadcastingError = null; + const resp = await this.restService.startBroadcasting(broadcastUrl); + console.log('Broadcasting response ', resp); } catch (error) { console.error(error); - this.streamingError = error.error; + this.broadcastingError = error.error; } } - async onStopStreamingClicked() { + async onStopBroadcastingClicked() { console.log('STOP STREAMING'); try { - this.streamingError = null; - const resp = await this.restService.stopStreaming(); - console.log('Streaming response ', resp); + this.broadcastingError = null; + const resp = await this.restService.stopBroadcasting(); + console.log('Broadcasting response ', resp); } catch (error) { console.error(error); - this.streamingError = error.message || error; + this.broadcastingError = error.message || error; } } diff --git a/openvidu-components-angular/src/app/services/rest.service.ts b/openvidu-components-angular/src/app/services/rest.service.ts index 447bf189..0f0b7a72 100644 --- a/openvidu-components-angular/src/app/services/rest.service.ts +++ b/openvidu-components-angular/src/app/services/rest.service.ts @@ -41,7 +41,7 @@ export class RestService { } } - async startStreaming(broadcastUrl: string) { + async startBroadcasting(broadcastUrl: string) { try { const options = { headers: new HttpHeaders({ @@ -68,7 +68,7 @@ export class RestService { } } - async stopStreaming() { + async stopBroadcasting() { try { return lastValueFrom(this.http.delete(`${this.baseHref}broadcasts/stop`)); } catch (error) { diff --git a/openvidu-components-angular/src/app/testing-app/testing.component.html b/openvidu-components-angular/src/app/testing-app/testing.component.html index cc8f77d3..8ba13c3d 100644 --- a/openvidu-components-angular/src/app/testing-app/testing.component.html +++ b/openvidu-components-angular/src/app/testing-app/testing.component.html @@ -84,7 +84,7 @@ [chatPanelButton]="chatPanelBtn" [displaySessionName]="displaySessionId" [displayLogo]="displayLogo" - [streamingButton]="streamingBtn" + [broadcastingButton]="broadcastingBtn" (onLeaveButtonClicked)="appendElement('onLeaveButtonClicked')" (onCameraButtonClicked)="appendElement('onCameraButtonClicked')" (onMicrophoneButtonClicked)="appendElement('onMicrophoneButtonClicked')" @@ -205,11 +205,11 @@ - + diff --git a/openvidu-components-angular/src/app/testing-app/testing.component.ts b/openvidu-components-angular/src/app/testing-app/testing.component.ts index b08c93f9..9c4a7b41 100644 --- a/openvidu-components-angular/src/app/testing-app/testing.component.ts +++ b/openvidu-components-angular/src/app/testing-app/testing.component.ts @@ -2,7 +2,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; 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 { catchError } from 'rxjs/operators'; @@ -39,7 +39,7 @@ export enum AttributeDirective { // AUDIO_MUTED = 'audioMuted', TOOLBAR_SCREENSHARE = 'screenshareButton', TOOLBAR_FULLSCREEN = 'fullscreenButton', - TOOLBAR_STREAMING = 'streamingButton', + TOOLBAR_BROADCASTING = 'broadcastingButton', TOOLBAR_LEAVE = 'leaveButton', TOOLBAR_PARTICIPANTS_PANEL = 'participantsPanelButton', TOOLBAR_ACTIVITIES_PANEL = 'activitiesPanelButton', @@ -51,8 +51,8 @@ export enum AttributeDirective { STREAM_SETTINGS = 'settingsButton', PARTICIPANT_ITEM_MUTE = 'muteButton', ACTIVITIES_PANEL_RECORDING_ACTIVITY = 'recordingActivity', - ACTIVITIES_PANEL_STREAMING_ACTIVITY = 'streamingActivity', - ACTIVITIES_PANEL_STREAMING_ERROR = 'streamingError' + ACTIVITIES_PANEL_BROADCASTING_ACTIVITY = 'broadcastingActivity', + ACTIVITIES_PANEL_BROADCASTING_ERROR = 'broadcastingError' } @Component({ @@ -100,7 +100,7 @@ export class TestingComponent implements OnInit { { name: AttributeDirective.TOOLBAR_DISPLAY_LOGO, checked: true }, { name: AttributeDirective.TOOLBAR_DISPLAY_SESSION, 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_PARTICIPANTS_PANEL, checked: true }, { name: AttributeDirective.TOOLBAR_ACTIVITIES_PANEL, checked: true }, @@ -123,8 +123,8 @@ export class TestingComponent implements OnInit { component: StructuralDirectives.ACTIVITIES_PANEL, directives: [ { name: AttributeDirective.ACTIVITIES_PANEL_RECORDING_ACTIVITY, checked: true }, - { name: AttributeDirective.ACTIVITIES_PANEL_STREAMING_ACTIVITY, checked: true }, - { name: AttributeDirective.ACTIVITIES_PANEL_STREAMING_ERROR, checked: false } + { name: AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ACTIVITY, checked: true }, + { name: AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ERROR, checked: false } ] } ]; @@ -155,13 +155,13 @@ export class TestingComponent implements OnInit { participantName = true; settingsBtn = true; participantItemMuteBtn = true; - streamingActivity = true; - streamingBtn = true; + broadcastingActivity = true; + broadcastingBtn = true; tokens: { webcam: any; screen: any }; subscription: Subscription; - streamingError: StreamingError | undefined; + broadcastingError: BroadcastingError | undefined; recordingActivity = true; @@ -264,8 +264,8 @@ export class TestingComponent implements OnInit { this.fullscreenBtn = value; break; - case AttributeDirective.TOOLBAR_STREAMING: - this.streamingBtn = value; + case AttributeDirective.TOOLBAR_BROADCASTING: + this.broadcastingBtn = value; break; case AttributeDirective.TOOLBAR_LEAVE: @@ -296,12 +296,12 @@ export class TestingComponent implements OnInit { case AttributeDirective.ACTIVITIES_PANEL_RECORDING_ACTIVITY: this.recordingActivity = value; break; - case AttributeDirective.ACTIVITIES_PANEL_STREAMING_ACTIVITY: - this.streamingActivity = value; + case AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ACTIVITY: + this.broadcastingActivity = value; break; - case AttributeDirective.ACTIVITIES_PANEL_STREAMING_ERROR: - this.streamingError = { message: 'TEST_ERROR', rtmpAvailable: true }; + case AttributeDirective.ACTIVITIES_PANEL_BROADCASTING_ERROR: + this.broadcastingError = { message: 'TEST_ERROR', broadcastAvailable: true }; break; default: break;