frontend: Added shared-call-components project and configure application

frontend/angular.json

@@ -7,7 +7,7 @@
 			"root": "",
 			"sourceRoot": "src",
 			"projectType": "application",
-			"prefix": "app",
+			"prefix": "ov",
 			"schematics": {
 				"@schematics/angular:component": {
 					"style": "scss"
@@ -134,6 +134,41 @@
 					}
 				}
 			}
+		},
+		"shared-call-components": {
+			"projectType": "library",
+			"root": "projects/shared-call-components",
+			"sourceRoot": "projects/shared-call-components/src",
+			"prefix": "ov",
+			"schematics": {
+				"@schematics/angular:component": {
+					"style": "scss"
+				}
+			},
+			"architect": {
+				"build": {
+					"builder": "@angular-devkit/build-angular:ng-packagr",
+					"options": {
+						"project": "projects/shared-call-components/ng-package.json"
+					},
+					"configurations": {
+						"production": {
+							"tsConfig": "projects/shared-call-components/tsconfig.lib.prod.json"
+						},
+						"development": {
+							"tsConfig": "projects/shared-call-components/tsconfig.lib.json"
+						}
+					},
+					"defaultConfiguration": "production"
+				},
+				"test": {
+					"builder": "@angular-devkit/build-angular:karma",
+					"options": {
+						"tsConfig": "projects/shared-call-components/tsconfig.spec.json",
+						"polyfills": ["zone.js", "zone.js/testing"]
+					}
+				}
+			}
 		}
 	},
 	"cli": {

frontend/package.json

@@ -13,6 +13,7 @@
     "core-js": "^3.38.1",
     "openvidu-components-angular": "3.0.0-beta2",
     "rxjs": "7.8.1",
+    "tslib": "^2.3.0",
     "unique-names-generator": "^4.7.1",
     "zone.js": "0.14.10"
   },
@@ -53,13 +54,18 @@
   "scripts": {
     "dev:start": "ng serve --configuration development --port=5080 --host=0.0.0.0",
     "dev:build": "./node_modules/@angular/cli/bin/ng.js build --output-path ../backend/public/",
+    "install:lib": "npm run lib:build && npm run lib:pack&& npm install ../shared-call-components/dist/shared-call-components/shared-call-components-**.tgz",
     "build": "func() { ./node_modules/@angular/cli/bin/ng.js build --configuration production --base-href=\"${1:-/}\"; }; func",
     "build-and-copy": "npm run build && mkdir -p ../backend/dist/public && cp -r dist/openvidu-call/* ../backend/dist/public",
     "e2e:all": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/**/*.test.js",
     "e2e:home": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/home.test.js",
     "e2e:room": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/room.test.js",
     "e2e:recordings": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/recording.test.js",
     "e2e:auth": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/auth.test.js",
+    "lib:serve": "ng build shared-call-components --watch",
+    "lib:build": "ng build shared-call-components",
+    "lib:pack": "cd dist/shared-call-components && npm pack",
+    "lib:sync-call-pro": "rm -rf ../../openvidu-call-pro/frontend/node_modules/shared-call-components && cp dist/shared-call-components/shared-call-components-**.tgz ../../openvidu-call-pro/frontend && cd ../../openvidu-call-pro/frontend && npm install shared-call-components-**.tgz",
     "test": "ng test openvidu-call --watch=false --code-coverage",
     "lint": "eslint src --fix",
     "format": "prettier --ignore-path ../gitignore . --write"

frontend/projects/shared-call-components/README.md

@@ -0,0 +1,24 @@
+# SharedCallComponents
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project shared-call-components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project shared-call-components`.
+> Note: Don't forget to add `--project shared-call-components` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build shared-call-components` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build shared-call-components`, go to the dist folder `cd dist/shared-call-components` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test shared-call-components` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

frontend/projects/shared-call-components/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/shared-call-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

frontend/projects/shared-call-components/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "shared-call-components",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

frontend/projects/shared-call-components/src/lib/components/card/logo-card/logo-card.component.html

@@ -0,0 +1,14 @@
+<mat-card class="logo-card" [style.background-color]="cardBackgroundColor">
+	<div class="card-content" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
+		<div class="logo-container">
+			<img [src]="logoSrc" alt="App Logo" class="app-logo" />
+			@if (isHovering && isEnabled) {
+				<mat-icon class="select-icon">add_a_photo</mat-icon>
+			}
+		</div>
+		<div class="text-container">
+			<div class="card-title">{{ title || '' }}</div>
+			<div class="card-subtitle">{{ description || 'Select your app logo' }}</div>
+		</div>
+	</div>
+</mat-card>

frontend/projects/shared-call-components/src/lib/components/card/logo-card/logo-card.component.scss

@@ -0,0 +1,61 @@
+.logo-card {
+	max-width: 100%;
+	border-radius: 8px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	transition: box-shadow 0.3s ease-in-out;
+	position: relative; // Para posicionar el icono de selección
+
+	&:hover {
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+	}
+}
+
+.card-content {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	padding: 20px;
+}
+
+.logo-container {
+	position: relative; // Para posicionar el icono de selección
+	border-radius: 4px;
+}
+
+.app-logo {
+	width: 64px; // Ajusta el tamaño del logo
+	height: 64px; // Ajusta el tamaño del logo
+	border-radius: 4px; // Opcional: para esquinas redondeadas
+	object-fit: cover; // Mantiene la proporción de la imagen
+}
+
+.select-icon {
+	position: absolute; // Para que el icono se superponga al logo
+	top: 50%; // Centrado verticalmente
+	left: 50%; // Centrado horizontalmente
+	transform: translate(-50%, -50%); // Ajuste del centro
+	color: #673ab7; // Color del icono
+	font-size: 36px; // Tamaño del icono
+	opacity: 0; // Inicialmente oculto
+	transition: opacity 0.2s ease; // Transición suave
+}
+
+.logo-card:hover .select-icon {
+	opacity: 1; // Mostrar el icono al hacer hover
+}
+
+.text-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.card-title {
+	font-size: 1.2rem;
+	font-weight: 600;
+	color: #333;
+}
+
+.card-subtitle {
+	font-size: 0.9rem;
+	color: #666;
+}

frontend/projects/shared-call-components/src/lib/components/card/logo-card/logo-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogoCardComponent } from './logo-card.component';
+
+describe('LogoCardComponent', () => {
+  let component: LogoCardComponent;
+  let fixture: ComponentFixture<LogoCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LogoCardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LogoCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/projects/shared-call-components/src/lib/components/card/logo-card/logo-card.component.ts

@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+	selector: 'ov-logo-card',
+	standalone: true,
+	imports: [CommonModule, MatCardModule, MatIconModule],
+	templateUrl: './logo-card.component.html',
+	styleUrl: './logo-card.component.scss'
+})
+export class LogoCardComponent {
+	@Input() title: string = '';
+	@Input() description: string = '';
+	@Input() logoSrc: string = ''; // URL de la imagen del logo
+	@Input() cardBackgroundColor: string = '#ffffff';
+	@Input() isEnabled: boolean = true;
+
+	isHovering: boolean = false; // Estado para controlar el hover
+
+	// Métodos para manejar el mouseenter y mouseleave
+	onMouseEnter() {
+		if (this.isEnabled) {
+			this.isHovering = true;
+		}
+	}
+
+	onMouseLeave() {
+		this.isHovering = false;
+	}
+}

frontend/projects/shared-call-components/src/lib/components/card/toggle-card/toggle-card.component.html

@@ -0,0 +1,16 @@
+<mat-card class="toggle-card" [style.background-color]="cardBackgroundColor">
+	<div class="card-content">
+		<div class="icon-container" [style.background-color]="iconBackgroundColor">
+			<mat-icon class="card-icon">{{ icon }}</mat-icon>
+		</div>
+		<div class="text-container">
+			<div class="card-title">{{ title || '' }}</div>
+			<div class="card-subtitle">{{ description || 'OpenVidu' }}</div>
+		</div>
+	</div>
+
+	<div class="card-footer">
+		<span>{{ title }} is {{ toggleValue ? 'active' : 'disabled' }}</span>
+		<mat-slide-toggle [checked]="toggleValue" (change)="onToggleChange($event)"></mat-slide-toggle>
+	</div>
+</mat-card>

frontend/projects/shared-call-components/src/lib/components/card/toggle-card/toggle-card.component.scss

@@ -0,0 +1,67 @@
+.toggle-card {
+	max-width: 100%;
+	border-radius: 8px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	transition: box-shadow 0.3s ease-in-out;
+}
+
+.toggle-card:hover {
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.card-content {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	padding: 20px;
+}
+
+.icon-container {
+	background-color: #673ab7; /* Color de fondo del icono */
+	padding: 16px;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.card-icon {
+	color: white;
+	font-size: 24px;
+}
+
+.text-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.card-title {
+	font-size: 1.2rem;
+	font-weight: 600;
+	color: #333;
+}
+
+.card-subtitle {
+	font-size: 0.9rem;
+	color: #666;
+}
+
+.card-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding-top: 8px;
+	padding: 10px;
+	background-color: #f8f9fa;
+	border-top: 1px solid #e9ecef;
+}
+
+.view-more {
+	font-size: 0.9rem;
+	color: #007bff;
+	text-decoration: none;
+}
+
+.view-more:hover {
+	text-decoration: underline;
+}