diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts index 61a5e857..a33a2597 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts @@ -7,6 +7,9 @@ import { OpenViduAngularConfigService } from '../../../../services/config/openvi import { ParticipantService } from '../../../../services/participant/participant.service'; import { RecordingService } from '../../../../services/recording/recording.service'; +/** + * @internal + */ @Component({ selector: 'ov-recording-activity', templateUrl: './recording-activity.component.html', diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts index 2aadf895..dac4f97d 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts @@ -5,6 +5,9 @@ import { PanelType } from '../../../models/panel.model'; import { PanelService } from '../../../services/panel/panel.service'; import { VirtualBackgroundService } from '../../../services/virtual-background/virtual-background.service'; +/** + * @internal + */ @Component({ selector: 'ov-background-effects-panel', templateUrl: './background-effects-panel.component.html', diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts index 5ce6e7ac..d3cacf4d 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts @@ -92,24 +92,24 @@ export class PanelComponent implements OnInit { } } - @ContentChild(BackgroundEffectsPanelDirective) - set externalBackgroundEffectsPanel(externalBackgroundEffectsPanel: BackgroundEffectsPanelDirective) { - // This directive will has value only when BACKGROUND EFFECTS PANEL component tagged with '*ovBackgroundEffectsPanel' - // is inside of the PANEL component tagged with '*ovPanel' - // TODO: backgroundEffectsPanel does not provides customization - // if (externalBackgroundEffectsPanel) { - // this.backgroundEffectsPanelTemplate = externalBackgroundEffectsPanel.template; - // } - } + // TODO: backgroundEffectsPanel does not provides customization + // @ContentChild(BackgroundEffectsPanelDirective) + // set externalBackgroundEffectsPanel(externalBackgroundEffectsPanel: BackgroundEffectsPanelDirective) { + // This directive will has value only when BACKGROUND EFFECTS PANEL component tagged with '*ovBackgroundEffectsPanel' + // is inside of the PANEL component tagged with '*ovPanel' + // if (externalBackgroundEffectsPanel) { + // this.backgroundEffectsPanelTemplate = externalBackgroundEffectsPanel.template; + // } + // } // TODO: settingsPanel does not provides customization // @ContentChild(SettingsPanelDirective) // set externalSettingsPanel(externalSettingsPanel: SettingsPanelDirective) { - // This directive will has value only when SETTINGS PANEL component tagged with '*ovSettingsPanel' - // is inside of the PANEL component tagged with '*ovPanel' - // if (externalSettingsPanel) { - // this.settingsPanelTemplate = externalSettingsPanel.template; - // } + // This directive will has value only when SETTINGS PANEL component tagged with '*ovSettingsPanel' + // is inside of the PANEL component tagged with '*ovPanel' + // if (externalSettingsPanel) { + // this.settingsPanelTemplate = externalSettingsPanel.template; + // } // } @ContentChild(ActivitiesPanelDirective) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts index 89dc2984..ea666aae 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts @@ -4,6 +4,9 @@ import { PanelSettingsOptions, PanelType } from '../../../models/panel.model'; import { OpenViduAngularConfigService } from '../../../services/config/openvidu-angular.config.service'; import { PanelEvent, PanelService } from '../../../services/panel/panel.service'; +/** + * @internal + */ @Component({ selector: 'ov-settings-panel', templateUrl: './settings-panel.component.html', diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.ts index d05017b4..9ea707c6 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.ts @@ -4,6 +4,10 @@ import { ParticipantAbstractModel } from '../../../models/participant.model'; import { ParticipantService } from '../../../services/participant/participant.service'; import { StorageService } from '../../../services/storage/storage.service'; + +/** + * @internal + */ @Component({ selector: 'ov-nickname-input', templateUrl: './nickname-input.component.html', diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/subtitles/subtitles.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/subtitles/subtitles.component.ts index 7488fc23..715b2800 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/subtitles/subtitles.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/subtitles/subtitles.component.ts @@ -2,6 +2,10 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { Subscription } from 'rxjs'; import { LayoutService } from '../../../services/layout/layout.service'; + +/** + * @internal + */ @Component({ selector: 'ov-subtitles-settings', templateUrl: './subtitles.component.html', @@ -23,7 +27,7 @@ export class SubtitlesSettingComponent implements OnInit, OnDestroy { if (this.subtitlesSubs) this.subtitlesSubs.unsubscribe(); } - onLangSelected(lang: string){ + onLangSelected(lang: string) { this.langSelected = lang; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts index 51b4c4de..4ee70945 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts @@ -365,7 +365,7 @@ export class ChatPanelDirective { } /** - * TODO: WIP. backgroundEffectsPanel does not provides customization + * backgroundEffectsPanel does not provides customization * @internal */ @Directive({ @@ -377,8 +377,44 @@ export class BackgroundEffectsPanelDirective { /** - * TODO: WIP - * @internal + * The ***ovActivitiesPanel** directive allows to replace the default activities panel template injecting your own component. + * Here we're going to redefine the activities template in a few code lines. + * + * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-activities-panel#run-this-tutorial). + * + * ```html + * + *
+ *

ACTIVITIES

+ *
+ * CUSTOM ACTIVITIES + *
+ *
+ *
+ *``` + *
+ * + * As we need to assign the tokens to the the {@link VideoconferenceComponent}, we can request the tokens on the ngOnInit Angular lifecycle. + * + * ```javascript + * export class AppComponent implements OnInit { + * tokens: TokenModel; + * sessionId = 'activities-panel-directive-example'; + * OPENVIDU_URL = 'https://localhost:4443'; + * OPENVIDU_SECRET = 'MY_SECRET'; + + * constructor(private httpClient: HttpClient) {} + * + * async ngOnInit() { + * this.tokens = { + * webcam: await this.getToken(), + * screen: await this.getToken(), + * }; + * } + * + *} + * ``` + * */ @Directive({ selector: '[ovActivitiesPanel]' 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 1e9e31c5..22cd9ba7 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 @@ -67,6 +67,7 @@ const publicComponents = [ VideoconferenceComponent, ToolbarComponent, PanelComponent, + ActivitiesPanelComponent, ParticipantsPanelComponent, ParticipantPanelItemComponent, ChatPanelComponent, @@ -76,7 +77,6 @@ const publicComponents = [ const privateComponents = [ PreJoinComponent, SessionComponent, - ActivitiesPanelComponent, BackgroundEffectsPanelComponent, SettingsPanelComponent, AudioWaveComponent, 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 e3915002..6ed420b9 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts @@ -17,6 +17,7 @@ export * from './lib/services/recording/recording.service'; export * from './lib/components/videoconference/videoconference.component'; export * from './lib/components/toolbar/toolbar.component'; export * from './lib/components/panel/panel.component'; +export * from './lib/components/panel/activities-panel/activities-panel.component'; export * from './lib/components/panel/chat-panel/chat-panel.component'; export * from './lib/components/panel/participants-panel/participants-panel/participants-panel.component'; export * from './lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component'; @@ -39,10 +40,11 @@ export * from './lib/pipes/participant.pipe'; export * from './lib/pipes/recording.pipe'; // Directives -export * from './lib/directives/api/api.directive.module'; export * from './lib/directives/template/openvidu-angular.directive.module'; -export * from './lib/directives/api/internals.directive'; export * from './lib/directives/template/openvidu-angular.directive'; + +export * from './lib/directives/api/api.directive.module'; +export * from './lib/directives/api/internals.directive'; export * from './lib/directives/api/toolbar.directive'; export * from './lib/directives/api/stream.directive'; export * from './lib/directives/api/videoconference.directive';