openvidu-components: Updated documentation

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',

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',

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts

@@ -92,15 +92,15 @@ export class PanelComponent implements OnInit {
 		}
 	}
 
-	@ContentChild(BackgroundEffectsPanelDirective)
-	set externalBackgroundEffectsPanel(externalBackgroundEffectsPanel: BackgroundEffectsPanelDirective) {
+	// 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'
-		// TODO: backgroundEffectsPanel does not provides customization
 	// if (externalBackgroundEffectsPanel) {
 	// 	this.backgroundEffectsPanelTemplate = externalBackgroundEffectsPanel.template;
 	// }
-	}
+	// }
 
 	// TODO: settingsPanel does not provides customization
 	// @ContentChild(SettingsPanelDirective)

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',

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',

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;
 	}
 

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
+ * <ov-videoconference [tokens]="tokens">
+ *	<div *ovActivitiesPanel id="my-panel">
+ *		<h3>ACTIVITIES</h3>
+ *		<div>
+ *			CUSTOM ACTIVITIES
+ *		</div>
+ *	</div>
+ * </ov-videoconference>
+ *```
+ * <br/>
+ *
+ * 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]'

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,

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';