+
+
+ `,
+ styles: []
+})
+export class AppComponent {
+ title = 'openvidu-panel-buttons';
+ tokens!: TokenModel;
+ sessionId = 'toolbar-additionalPanelbtn';
+ OPENVIDU_SERVER_URL = 'https://localhost:4443';
+ OPENVIDU_SERVER_SECRET = 'MY_SECRET';
+
+ constructor(private httpClient: HttpClient) {}
+
+ async onJoinButtonClicked() {
+ this.tokens = {
+ webcam: await this.getToken(),
+ screen: await this.getToken()
+ };
+ }
+
+ /**
+ * --------------------------
+ * SERVER-SIDE RESPONSIBILITY
+ * --------------------------
+ * This method retrieve the mandatory user token from OpenVidu Server,
+ * in this case making use Angular http API.
+ * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
+ * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
+ * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection)
+ * 3) The Connection.token must be consumed in Session.connect() method
+ */
+
+ getToken(): Promise {
+ return this.createSession(this.sessionId).then((sessionId: string) => {
+ return this.createToken(sessionId);
+ });
+ }
+
+ createSession(sessionId: string): Promise {
+ return new Promise((resolve, reject) => {
+ const body = JSON.stringify({ customSessionId: sessionId });
+ const options = {
+ headers: new HttpHeaders({
+ Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
+ 'Content-Type': 'application/json'
+ })
+ };
+ return this.httpClient
+ .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options)
+ .pipe(
+ catchError((error) => {
+ if (error.status === 409) {
+ resolve(sessionId);
+ } else {
+ console.warn(
+ 'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL
+ );
+ if (
+ window.confirm(
+ 'No connection to OpenVidu Server. This may be a certificate error at "' +
+ this.OPENVIDU_SERVER_URL +
+ '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
+ 'is up and running at "' +
+ this.OPENVIDU_SERVER_URL +
+ '"'
+ )
+ ) {
+ location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate');
+ }
+ }
+ return observableThrowError(error);
+ })
+ )
+ .subscribe((response: any) => {
+ console.log(response);
+ resolve(response['id']);
+ });
+ });
+ }
+
+ createToken(sessionId: string): Promise {
+ return new Promise((resolve, reject) => {
+ const body = {};
+ const options = {
+ headers: new HttpHeaders({
+ Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
+ 'Content-Type': 'application/json'
+ })
+ };
+ return this.httpClient
+ .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
+ .pipe(
+ catchError((error) => {
+ reject(error);
+ return observableThrowError(error);
+ })
+ )
+ .subscribe((response: any) => {
+ console.log(response);
+ resolve(response['token']);
+ });
+ });
+ }
+
+
+}
diff --git a/openvidu-components/openvidu-panel-buttons/src/app/app.module.ts b/openvidu-components/openvidu-panel-buttons/src/app/app.module.ts
new file mode 100644
index 00000000..e05d1106
--- /dev/null
+++ b/openvidu-components/openvidu-panel-buttons/src/app/app.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from "./app.component";
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { OpenViduAngularConfig, OpenViduAngularModule } from "openvidu-angular";
+import { environment } from "src/environments/environment";
+
+const config: OpenViduAngularConfig = {
+ production: environment.production,
+};
+
+@NgModule({
+ declarations: [AppComponent],
+ imports: [
+ BrowserModule,
+ BrowserAnimationsModule,
+ OpenViduAngularModule.forRoot(config),
+ ],
+ providers: [],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
diff --git a/openvidu-components/openvidu-panel-buttons/src/assets/.gitkeep b/openvidu-components/openvidu-panel-buttons/src/assets/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/openvidu-components/openvidu-panel-buttons/src/environments/environment.prod.ts b/openvidu-components/openvidu-panel-buttons/src/environments/environment.prod.ts
new file mode 100644
index 00000000..3612073b
--- /dev/null
+++ b/openvidu-components/openvidu-panel-buttons/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
diff --git a/openvidu-components/openvidu-panel-buttons/src/environments/environment.ts b/openvidu-components/openvidu-panel-buttons/src/environments/environment.ts
new file mode 100644
index 00000000..f56ff470
--- /dev/null
+++ b/openvidu-components/openvidu-panel-buttons/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+ production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
diff --git a/openvidu-components/openvidu-panel-buttons/src/favicon.ico b/openvidu-components/openvidu-panel-buttons/src/favicon.ico
new file mode 100644
index 00000000..997406ad
Binary files /dev/null and b/openvidu-components/openvidu-panel-buttons/src/favicon.ico differ
diff --git a/openvidu-components/openvidu-panel-buttons/src/index.html b/openvidu-components/openvidu-panel-buttons/src/index.html
new file mode 100644
index 00000000..c32520f1
--- /dev/null
+++ b/openvidu-components/openvidu-panel-buttons/src/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+ OpenviduPanelButtons
+
+
+
+
+
+
+
+
+
+
+
diff --git a/openvidu-components/openvidu-panel-buttons/src/main.ts b/openvidu-components/openvidu-panel-buttons/src/main.ts
new file mode 100644
index 00000000..c7b673cf
--- /dev/null
+++ b/openvidu-components/openvidu-panel-buttons/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+ .catch(err => console.error(err));
diff --git a/openvidu-components/openvidu-panel-buttons/src/polyfills.ts b/openvidu-components/openvidu-panel-buttons/src/polyfills.ts
new file mode 100644
index 00000000..429bb9ef
--- /dev/null
+++ b/openvidu-components/openvidu-panel-buttons/src/polyfills.ts
@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ * (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js'; // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/openvidu-components/openvidu-panel-buttons/src/styles.scss b/openvidu-components/openvidu-panel-buttons/src/styles.scss
new file mode 100644
index 00000000..a2b96386
--- /dev/null
+++ b/openvidu-components/openvidu-panel-buttons/src/styles.scss
@@ -0,0 +1,24 @@
+/* You can add global styles to this file, and also import other style files */
+
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+:root {
+ --ov-primary-color: #303030;
+ --ov-secondary-color: #3e3f3f;
+ --ov-secondary-light-color: #e6e6e6;
+ --ov-tertiary-color: #598eff;
+ --ov-warn-color: #EB5144;
+ --ov-accent-color: #ffae35;
+
+ --ov-text-color: #ffffff;
+
+ --ov-panel-text-color: #1d1d1d;
+ --ov-panel-background: #ffffff;
+
+ --ov-buttons-radius: 50%; // border-radius property
+ --ov-leave-button-radius: 10px;
+ --ov-video-radius: 5px;
+ --ov-panel-radius: 5px;
+ }
\ No newline at end of file
diff --git a/openvidu-components/openvidu-panel-buttons/tsconfig.app.json b/openvidu-components/openvidu-panel-buttons/tsconfig.app.json
new file mode 100644
index 00000000..82d91dc4
--- /dev/null
+++ b/openvidu-components/openvidu-panel-buttons/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/app",
+ "types": []
+ },
+ "files": [
+ "src/main.ts",
+ "src/polyfills.ts"
+ ],
+ "include": [
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/openvidu-components/openvidu-panel-buttons/tsconfig.json b/openvidu-components/openvidu-panel-buttons/tsconfig.json
new file mode 100644
index 00000000..f531992d
--- /dev/null
+++ b/openvidu-components/openvidu-panel-buttons/tsconfig.json
@@ -0,0 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "baseUrl": "./",
+ "outDir": "./dist/out-tsc",
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "sourceMap": true,
+ "declaration": false,
+ "downlevelIteration": true,
+ "experimentalDecorators": true,
+ "moduleResolution": "node",
+ "importHelpers": true,
+ "target": "es2017",
+ "module": "es2020",
+ "lib": [
+ "es2020",
+ "dom"
+ ]
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
diff --git a/openvidu-components/openvidu-toggle-hand/.editorconfig b/openvidu-components/openvidu-toggle-hand/.editorconfig
new file mode 100644
index 00000000..59d9a3a3
--- /dev/null
+++ b/openvidu-components/openvidu-toggle-hand/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/openvidu-components/openvidu-toggle-hand/.gitignore b/openvidu-components/openvidu-toggle-hand/.gitignore
new file mode 100644
index 00000000..555d3f14
--- /dev/null
+++ b/openvidu-components/openvidu-toggle-hand/.gitignore
@@ -0,0 +1,48 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+*.angular
+*.browserslistrc
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/openvidu-components/openvidu-toggle-hand/.prettierrc b/openvidu-components/openvidu-toggle-hand/.prettierrc
new file mode 100644
index 00000000..de5031e2
--- /dev/null
+++ b/openvidu-components/openvidu-toggle-hand/.prettierrc
@@ -0,0 +1,10 @@
+{
+ "singleQuote": true,
+ "printWidth": 140,
+ "trailingComma": "none",
+ "semi": true,
+ "bracketSpacing": true,
+ "useTabs": true,
+ "jsxSingleQuote": true,
+ "tabWidth": 4
+}
diff --git a/openvidu-components/openvidu-toggle-hand/README.md b/openvidu-components/openvidu-toggle-hand/README.md
new file mode 100644
index 00000000..39d3b16e
--- /dev/null
+++ b/openvidu-components/openvidu-toggle-hand/README.md
@@ -0,0 +1,80 @@
+openvidu-toggle-hand is a tutorial sample which shows how to use efficiently the **openvidu-components** library. In this tutorial **we're going to add the raise the hand feature in a video room**, allowing to all users raise the hand and showing the properly notification to others.
+
+For doing that, we're going to **openvidu-components-library** in our angular project. Go ahead.
+
+
+
+1. First step to do is create a new Angular project. It must include Angular Material. After that, we need to install openvidu-components-library:
+
+
+```bash
+npm install openvidu-components-library
+```
+
+2. Once the library is installed, add `OpenviduComponentsLibraryModule` into your `app.module.ts`:
+
+```typescript
+
+@NgModule({
+ ...
+
+ imports: [
+ ...
+ OpenviduComponentsLibraryModule.forRoot(environment),
+
+ ]
+
+})
+
+```
+We need to add our angular environment as a library parameter.
+
+
+3. Add the components you want to use in your application into the `providers` section of your `app.module.ts`. In this tutorial we're going to use all of them.
+
+```typescript
+@NgModule({
+ ...
+
+ providers: [
+ UserSettingsComponent,
+ ToolbarComponent,
+ ChatComponent,
+ RoomComponent,
+ LayoutComponent
+ ],
+
+})
+
+```
+4. In our `app.component.html` we'll add the default previsualize user modal and we'll add a custom room component using **openvidu-components-library**:
+
+```html
+