openvidu-components: Updated docs

Updated build scripts docs
Added description for token parameter

openvidu-components-angular/package.json

@@ -57,9 +57,9 @@
     "scripts": {
         "build": "ng build openvidu-components-testapp --configuration production",
         "bundle-report": "ng build openvidu-webcomponent --stats-json --configuration production && webpack-bundle-analyzer dist/openvidu-webcomponent/stats.json",
-        "doc:build": "cd projects/openvidu-angular && npx compodoc -p ./doc/tsconfig.doc.json -c ./doc/.compodocrc.json", 
+        "doc:build": "npx compodoc -p ./projects/openvidu-angular/doc/tsconfig.doc.json -c ./projects/openvidu-angular/doc/.compodocrc.json",
         "doc:clean-copy": "rm -rf ../../openvidu.io-docs/docs/api/openvidu-angular && cp -r ./docs/openvidu-angular/ ../../openvidu.io-docs/docs/api/openvidu-angular",
-        "doc:serve": "cd projects/openvidu-angular && npx compodoc -p ./doc/tsconfig.doc.json --watch --serve -c ./doc/.compodocrc.json", 
+        "doc:serve": "npx compodoc --watch --serve --includes ./projects/openvidu-angular/doc/extends  -c ./projects/openvidu-angular/doc/.compodocrc.json",
         "lib:build": "ng build openvidu-angular --configuration production && cd ./dist/openvidu-angular && npm pack",
         "lib:copy": "cp dist/openvidu-angular/openvidu-angular-*.tgz ../../openvidu-tutorials/openvidu-call/openvidu-call-front",
         "lib:e2e": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/angular.test.js",

openvidu-components-angular/projects/openvidu-angular/doc/.compodocrc.json

@@ -1,6 +1,6 @@
 {
 	"name": "OpenVidu Angular Documentation",
-	"output": "../../docs/openvidu-angular",
+	"output": "./docs/openvidu-angular",
 	"hideGenerator": true,
 	"disableLifeCycleHooks": true,
 	"disableProtected": true,
@@ -14,7 +14,7 @@
 	"disableStyleTab": true,
 	"disableDependencies": true,
 	"theme": "gitbook",
-	"customFavicon": "doc/favicon.ico",
+	"customFavicon": "./projects/openvidu-angular/doc/favicon.ico",
-	"extTheme": "doc/"
+	"extTheme": "./projects/openvidu-angular/doc/",
-
+	"tsconfig": "./projects/openvidu-angular/doc/tsconfig.doc.json"
 }

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

@@ -264,32 +264,45 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
 	openviduAngularStreamTemplate: TemplateRef<any>;
 
 	/**
-	 * @param {TokenModel} tokens  The tokens parameter must be an object with `webcam` and `screen` fields.
+	 * Tokens parameter is required to grant a participant access to a Session.
-	 *  Both of them are `string` type. See {@link TokenModel}
+	 * This OpenVidu token will be use by each participant when connecting to a Session.
+	 *
+	 * This input accepts a {@link TokenModel} object type.
+	 *
+	 * @param {TokenModel} tokens  The tokens parameter must be a {@link TokenModel} object.
+	 *
 	 */
 	@Input()
 	set tokens(tokens: TokenModel) {
+		let openviduEdition;
 		if (!tokens || !tokens.webcam) {
-			this.log.w('No tokens received');
+			this.log.e('No tokens received');
-		} else {
+			throw new Error("No token(s) received.");
-			this.log.w('Tokens received');
-			this.openviduService.setWebcamToken(tokens.webcam);
-
-			const openviduEdition = new URL(tokens.webcam).searchParams.get('edition');
-			if (!!openviduEdition) {
-				this.openviduService.setOpenViduEdition(OpenViduEdition.PRO);
-			} else {
-				this.openviduService.setOpenViduEdition(OpenViduEdition.CE);
-			}
-
-			if (tokens.screen) {
-				this.openviduService.setScreenToken(tokens.screen);
-			} else {
-				this.log.w('No screen token found. Screenshare feature will be disabled');
-			}
-
-			this.start();
 		}
+
+		try {
+			openviduEdition = new URL(tokens.webcam).searchParams.get('edition');
+		} catch (error) {
+			this.log.e('Token received does not seem to be valid: ', tokens.webcam);
+			throw new Error(`Error validating token parameter ${error}`);
+		}
+
+		this.log.d('Tokens received');
+		if (!!openviduEdition) {
+			this.openviduService.setOpenViduEdition(OpenViduEdition.PRO);
+		} else {
+			this.openviduService.setOpenViduEdition(OpenViduEdition.CE);
+		}
+
+		this.openviduService.setWebcamToken(tokens.webcam);
+		if (tokens.screen) {
+			this.openviduService.setScreenToken(tokens.screen);
+		} else {
+			this.log.w('No screen token found. Screenshare feature will be disabled');
+		}
+
+		this.start();
+
 	}
 
 	/**

openvidu-components-angular/projects/openvidu-angular/src/lib/models/token.model.ts

@@ -1,3 +1,12 @@
+
+/**
+ *
+ * TokenModel type must be contain a `webcam` property (it will be used by a standart participant).
+ * It also optionally can contain a `screen` property.
+ *
+ * If TokenModel contains the `screen` token, the participant will be able to share a screen and camera at the same time.
+ * Otherwise, the participant will not be able to share a screen.
+ */
 export interface TokenModel {
 	webcam: string;
 	screen?: string;

openvidu-components-angular/src/app/app.module.ts

@@ -1,20 +1,20 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { MatCheckboxModule } from '@angular/material/checkbox';
 import { NgModule } from '@angular/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { BrowserModule } from '@angular/platform-browser';
 
-import { AppRoutingModule } from './app.routing.module';
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app.routing.module';
 
 import { environment } from 'src/environments/environment';
 
-import { CallComponent } from './openvidu-call/call.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { TestingComponent } from './testing-app/testing.component';
 import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { CallComponent } from './openvidu-call/call.component';
+import { TestingComponent } from './testing-app/testing.component';
 // openvidu-angular
 import { OpenViduAngularModule } from 'openvidu-angular';
 

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts

@@ -1,5 +1,5 @@
-import { Component, ElementRef, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { OpenViduService, TokenModel, ParticipantAbstractModel, RecordingInfo } from 'openvidu-angular';
+import { OpenViduService, ParticipantAbstractModel, RecordingInfo, TokenModel } from 'openvidu-angular';
 import { Session } from 'openvidu-browser';
 
 /**
@@ -345,7 +345,7 @@ export class OpenviduWebComponentComponent implements OnInit {
 	 * @example
 	 * <openvidu-webcomponent toolbar-captions-button="false"></openvidu-webcomponent>
 	 */
-	 @Input() set toolbarCaptionsButton(value: string | boolean) {
+	@Input() set toolbarCaptionsButton(value: string | boolean) {
 		this._toolbarCaptionsButton = this.castToBoolean(value);
 	}
 	/**
@@ -542,27 +542,33 @@ export class OpenviduWebComponentComponent implements OnInit {
 	ngOnInit(): void {}
 
 	/**
+	 * Tokens parameter is required to grant a participant access to a Session.
+	 * This OpenVidu token will be use by each participant when connecting to a Session.
+	 *
+	 * This input accepts a {@link TokenModel} object type or a string type.
+	 *
 	 * @example
 	 * <openvidu-webcomponent tokens='{"webcam":"TOKEN1", "screen":"TOKEN2"}'></openvidu-webcomponent>
 	 *
-	 * or
 	 *
+	 * @example
 	 * <openvidu-webcomponent tokens='TOKEN1'></openvidu-webcomponent>
+	 *
 	 */
 	@Input('tokens')
 	set tokens(value: TokenModel | string) {
-		console.debug('Webcomponent tokens: ', value);
+		// console.debug('Webcomponent tokens: ', value);
 		try {
 			this._tokens = this.castToJson(value);
 			this.success = !!this._tokens?.webcam && !!this._tokens?.screen;
 		} catch (error) {
 			if (typeof value === 'string' && value !== '') {
-				console.debug('Sigle token received.');
+				console.debug('Single token received.');
 				this._tokens = { webcam: value };
 				this.success = true;
 			} else {
 				console.error(error);
-				console.error('Parameters received are incorrect: ', value);
+				console.error('Tokens parameter received is incorrect: ', value);
 				console.error('Session cannot start');
 			}
 		}

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts

@@ -1,6 +1,6 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { DoBootstrap, Injector, NgModule } from '@angular/core';
 import { APP_BASE_HREF, CommonModule } from '@angular/common';
+import { DoBootstrap, Injector, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { OpenviduWebComponentComponent } from './openvidu-webcomponent.component';